diff --git a/core/components/css-utilities/Spacing/Data.tsx b/core/components/css-utilities/Spacing/Data.tsx index e6303ea731..2ea3f669f7 100644 --- a/core/components/css-utilities/Spacing/Data.tsx +++ b/core/components/css-utilities/Spacing/Data.tsx @@ -15,6 +15,10 @@ const classMap = [ marginClasses: 'm-3', paddingClasses: 'p-3', }, + { + marginClasses: 'm-3-5', + paddingClasses: 'p-3-5', + }, { marginClasses: 'm-4', paddingClasses: 'p-4', @@ -79,6 +83,10 @@ const classMap = [ marginClasses: 'mx-3', paddingClasses: 'px-3', }, + { + marginClasses: 'mx-3-5', + paddingClasses: 'px-3-5', + }, { marginClasses: 'mx-4', paddingClasses: 'px-4', @@ -143,6 +151,10 @@ const classMap = [ marginClasses: 'my-3', paddingClasses: 'py-3', }, + { + marginClasses: 'my-3-5', + paddingClasses: 'py-3-5', + }, { marginClasses: 'my-4', paddingClasses: 'py-4', @@ -207,6 +219,10 @@ const classMap = [ marginClasses: 'mt-3', paddingClasses: 'pt-3', }, + { + marginClasses: 'mt-3-5', + paddingClasses: 'pt-3-5', + }, { marginClasses: 'mt-4', paddingClasses: 'pt-4', @@ -271,6 +287,10 @@ const classMap = [ marginClasses: 'mb-3', paddingClasses: 'pb-3', }, + { + marginClasses: 'mb-3-5', + paddingClasses: 'pb-3-5', + }, { marginClasses: 'mb-4', paddingClasses: 'pb-4', @@ -335,6 +355,10 @@ const classMap = [ marginClasses: 'mr-3', paddingClasses: 'pr-3', }, + { + marginClasses: 'mr-3-5', + paddingClasses: 'pr-3-5', + }, { marginClasses: 'mr-4', paddingClasses: 'pr-4', @@ -399,6 +423,10 @@ const classMap = [ marginClasses: 'ml-3', paddingClasses: 'pl-3', }, + { + marginClasses: 'ml-3-5', + paddingClasses: 'pl-3-5', + }, { marginClasses: 'ml-4', paddingClasses: 'pl-4', @@ -454,6 +482,7 @@ export const sizeData = [ { pixel: '1px', value: '1', properties: 'var(--spacing-xs)' }, { pixel: '2px', value: '2', properties: 'var(--spacing-s)' }, { pixel: '4px', value: '3', properties: 'var(--spacing-m)' }, + { pixel: '6px', value: '3-5', properties: 'var(--spacing-0-75)' }, { pixel: '8px', value: '4', properties: 'var(--spacing)' }, { pixel: '12px', value: '5', properties: 'var(--spacing-l)' }, { pixel: '16px', value: '6', properties: 'var(--spacing-2)' }, @@ -468,11 +497,12 @@ export const sizeData = [ { pixel: '', value: 'auto', properties: 'auto' }, ]; -const sizeMap = { +const sizeMap: Record = { 0: '0', 1: '1px', 2: '2px', 3: '4px', + '3-5': '6px', 4: '8px', 5: '12px', 6: '16px', @@ -489,7 +519,13 @@ const sizeMap = { export const classData = classMap.map((item) => { const { paddingClasses = '' } = item; - const key = paddingClasses.split('-')[1] as keyof typeof sizeMap; + const values = paddingClasses.split('-'); + let key; + if (values.length > 2) { + key = '3-5' as keyof typeof sizeMap; + } else { + key = values[1] as keyof typeof sizeMap; + } return { ...item, diff --git a/core/components/molecules/chipInput/ChipInput.tsx b/core/components/molecules/chipInput/ChipInput.tsx index 8ae3b41b70..6ee622ac11 100644 --- a/core/components/molecules/chipInput/ChipInput.tsx +++ b/core/components/molecules/chipInput/ChipInput.tsx @@ -92,6 +92,8 @@ export const ChipInput = (props: ChipInputProps) => { } = props; const inputRef = React.createRef(); + const customRef = React.useRef(); + const [chips, setChips] = React.useState(value || defaultValue); const [inputValue, setInputValue] = React.useState(''); @@ -103,6 +105,13 @@ export const ChipInput = (props: ChipInputProps) => { } }, [value]); + React.useEffect(() => { + if (inputValue === '' && inputRef.current) { + inputRef.current.style.flexBasis = '0'; + customRef.current.charCount = null; + } + }, [inputValue]); + const ChipInputBorderClass = classNames({ ['ChipInput-border']: true, ['ChipInput-border--error']: error, @@ -178,6 +187,23 @@ export const ChipInput = (props: ChipInputProps) => { }; const onInputChangeHandler = (e: React.ChangeEvent) => { + const elementScrollWidth = inputRef.current?.scrollWidth; + const elementClientWidth = inputRef.current?.clientWidth; + const charLen = e.target.value.length; + + if (elementScrollWidth && elementClientWidth && inputRef.current) { + if (elementScrollWidth > elementClientWidth && inputValue.length <= charLen && customRef.current) { + inputRef.current.style.flexBasis = 'auto'; + customRef.current.charCount = charLen; + } else if ( + elementScrollWidth <= elementClientWidth && + inputValue.length > charLen && + charLen <= customRef.current?.charCount - 2 + ) { + inputRef.current.style.flex = '0'; + } + } + setInputValue(e.target.value); }; @@ -215,7 +241,7 @@ export const ChipInput = (props: ChipInputProps) => { onClick={onClickHandler} tabIndex={disabled ? -1 : 0} > -
+
{chips && chips.length > 0 && chipComponents}
@@ -193,6 +194,7 @@ exports[`ChipInput component data-test="DesignSystem-ChipInput--Input" disabled="" placeholder="" + style="flex-basis: 0px;" value="" />
@@ -298,6 +300,7 @@ exports[`ChipInput component class="ChipInput-input" data-test="DesignSystem-ChipInput--Input" placeholder="" + style="flex-basis: 0px;" value="" /> diff --git a/core/components/molecules/dropzone/utils.tsx b/core/components/molecules/dropzone/utils.tsx index 6493335505..eee7bf6c1e 100644 --- a/core/components/molecules/dropzone/utils.tsx +++ b/core/components/molecules/dropzone/utils.tsx @@ -13,6 +13,10 @@ export const accepts = (file: File, acceptedFiles?: string | string[]) => { const mimeType = (file.type || '').toLowerCase(); const baseMimeType = mimeType.replace(/\/.*$/, ''); + if (!mimeType) { + return true; + } + return acceptedFilesArray.some((type) => { const validType = type.trim().toLowerCase(); if (validType.charAt(0) === '.') { diff --git a/css/Readme.md b/css/Readme.md index 51f9865994..8a56046fe2 100644 --- a/css/Readme.md +++ b/css/Readme.md @@ -99,6 +99,7 @@ | --spacing-xs | 1px | | --spacing-s | 2px | | --spacing-m | 4px | +| --spacing-0-75 | 6px | | --spacing | 8px | | --spacing-l | 12px | | --spacing-2 | 16px | @@ -128,12 +129,13 @@ x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of: -| value | properites | +| value | properties | | ----- | ---------- | | **0** | 0 ; | | **1** | --spacing-xs ;| | **2** | --spacing-s ; | | **3** | --spacing-m ; | +| **3-5** | --spacing-0-75 ; | | **4** | --spacing ; | | **5** | --spacing-l ; | | **6** | --spacing-2 ; | @@ -155,6 +157,7 @@ Where size is one of: | **.m-1** | **.p-1** | | **.m-2** | **.p-2** | | **.m-3** | **.p-3** | +| **.m-3-5** | **.p-3-5** | | **.m-4** | **.p-4** | | **.m-5** | **.p-5** | | **.m-6** | **.p-6** | @@ -171,6 +174,7 @@ Where size is one of: | **.mx-1** | **.px-1** | | **.mx-2** | **.px-2** | | **.mx-3** | **.px-3** | +| **.mx-3-5** | **.px-3-5** | | **.mx-4** | **.px-4** | | **.mx-5** | **.px-5** | | **.mx-6** | **.px-6** | @@ -187,6 +191,7 @@ Where size is one of: | **.my-1** | **.py-1** | | **.my-2** | **.py-2** | | **.my-3** | **.py-3** | +| **.my-3-5** | **.py-3-5** | | **.my-4** | **.py-4** | | **.my-5** | **.py-5** | | **.my-6** | **.py-6** | @@ -203,6 +208,7 @@ Where size is one of: | **.mt-1** | **.pt-1** | | **.mt-2** | **.pt-2** | | **.mt-3** | **.pt-3** | +| **.mt-3-5** | **.pt-3-5** | | **.mt-4** | **.pt-4** | | **.mt-5** | **.pt-5** | | **.mt-6** | **.pt-6** | @@ -219,6 +225,7 @@ Where size is one of: | **.mb-1** | **.pb-1** | | **.mb-2** | **.pb-2** | | **.mb-3** | **.pb-3** | +| **.mb-3-5** | **.pb-3-5** | | **.mb-4** | **.pb-4** | | **.mb-5** | **.pb-5** | | **.mb-6** | **.pb-6** | @@ -235,6 +242,7 @@ Where size is one of: | **.mr-1** | **.pr-1** | | **.mr-2** | **.pr-2** | | **.mr-3** | **.pr-3** | +| **.mr-3-5** | **.pr-3-5** | | **.mr-4** | **.pr-4** | | **.mr-5** | **.pr-5** | | **.mr-6** | **.pr-6** | @@ -251,6 +259,7 @@ Where size is one of: | **.ml-1** | **.pl-1** | | **.ml-2** | **.pl-2** | | **.ml-3** | **.pl-3** | +| **.ml-3-5** | **.pl-3-5** | | **.ml-4** | **.pl-4** | | **.ml-5** | **.pl-5** | | **.ml-6** | **.pl-6** | diff --git a/css/src/components/tooltip.css b/css/src/components/tooltip.css index 28859f77cb..9406f916ff 100644 --- a/css/src/components/tooltip.css +++ b/css/src/components/tooltip.css @@ -3,7 +3,7 @@ padding: var(--spacing-m) var(--spacing); border-radius: var(--spacing-m); z-index: 500; - background: color-mod(var(--inverse) a(0.88)); + background: var(--inverse); overflow: hidden; box-sizing: border-box; transition: opacity 120ms; diff --git a/css/src/utils/spacing.css b/css/src/utils/spacing.css index 1728c2f4cb..a5deb4fdf3 100644 --- a/css/src/utils/spacing.css +++ b/css/src/utils/spacing.css @@ -14,6 +14,10 @@ margin: var(--spacing-m) !important; } +.m-3-5 { + margin: var(--spacing-0-75) !important; +} + .m-4 { margin: var(--spacing) !important; } @@ -82,6 +86,11 @@ margin-left: var(--spacing-m) !important; } +.mx-3-5 { + margin-right: var(--spacing-0-75) !important; + margin-left: var(--spacing-0-75) !important; +} + .mx-4 { margin-right: var(--spacing) !important; margin-left: var(--spacing) !important; @@ -162,6 +171,11 @@ margin-bottom: var(--spacing-m) !important; } +.my-3-5 { + margin-top: var(--spacing-0-75) !important; + margin-bottom: var(--spacing-0-75) !important; +} + .my-4 { margin-top: var(--spacing) !important; margin-bottom: var(--spacing) !important; @@ -238,6 +252,10 @@ margin-top: var(--spacing-m) !important; } +.mt-3-5 { + margin-top: var(--spacing-0-75) !important; +} + .mt-4 { margin-top: var(--spacing) !important; } @@ -302,6 +320,10 @@ margin-bottom: var(--spacing-m) !important; } +.mb-3-5 { + margin-bottom: var(--spacing-0-75) !important; +} + .mb-4 { margin-bottom: var(--spacing) !important; } @@ -366,6 +388,10 @@ margin-right: var(--spacing-m) !important; } +.mr-3-5 { + margin-right: var(--spacing-0-75) !important; +} + .mr-4 { margin-right: var(--spacing) !important; } @@ -430,6 +456,10 @@ margin-left: var(--spacing-m) !important; } +.ml-3-5 { + margin-left: var(--spacing-0-75) !important; +} + .ml-4 { margin-left: var(--spacing) !important; } @@ -494,6 +524,10 @@ padding: var(--spacing-m) !important; } +.p-3-5 { + padding: var(--spacing-0-75) !important; +} + .p-4 { padding: var(--spacing) !important; } @@ -562,6 +596,11 @@ padding-left: var(--spacing-m) !important; } +.px-3-5 { + padding-right: var(--spacing-0-75) !important; + padding-left: var(--spacing-0-75) !important; +} + .px-4 { padding-right: var(--spacing) !important; padding-left: var(--spacing) !important; @@ -642,6 +681,11 @@ padding-bottom: var(--spacing-m) !important; } +.py-3-5 { + padding-top: var(--spacing-0-75) !important; + padding-bottom: var(--spacing-0-75) !important; +} + .py-4 { padding-top: var(--spacing) !important; padding-bottom: var(--spacing) !important; @@ -718,6 +762,10 @@ padding-top: var(--spacing-m) !important; } +.pt-3-5 { + padding-top: var(--spacing-0-75) !important; +} + .pt-4 { padding-top: var(--spacing) !important; } @@ -782,6 +830,10 @@ padding-bottom: var(--spacing-m) !important; } +.pb-3-5 { + padding-bottom: var(--spacing-0-75) !important; +} + .pb-4 { padding-bottom: var(--spacing) !important; } @@ -846,6 +898,10 @@ padding-right: var(--spacing-m) !important; } +.pr-3-5 { + padding-right: var(--spacing-0-75) !important; +} + .pr-4 { padding-right: var(--spacing) !important; } @@ -910,6 +966,10 @@ padding-left: var(--spacing-m) !important; } +.pl-3-5 { + padding-left: var(--spacing-0-75) !important; +} + .pl-4 { padding-left: var(--spacing) !important; } diff --git a/docs/src/pages/components/AIButton/usage.mdx b/docs/src/pages/components/AIButton/usage.mdx index cd2df8dc64..2585cc2d6a 100644 --- a/docs/src/pages/components/AIButton/usage.mdx +++ b/docs/src/pages/components/AIButton/usage.mdx @@ -63,7 +63,7 @@ Icon buttons supports **6 states** - default, hover, active, focus, disabled a ### Structure -#### AI buttons +#### AI Buttons
@@ -154,7 +154,7 @@ Icon buttons supports **6 states** - default, hover, active, focus, disabled a ### Usage -#### Position of magic sparkle icon in an icon button +#### Position of Magic Sparkle Icon in an Icon Button The magic sparkle icon can be either positioned at top-right or bottom-right in the icon button. The sparkles are position to align with the edges of icon container. diff --git a/docs/src/pages/components/AIChip/usage.mdx b/docs/src/pages/components/AIChip/usage.mdx index a6103891d5..2681bb47ea 100644 --- a/docs/src/pages/components/AIChip/usage.mdx +++ b/docs/src/pages/components/AIChip/usage.mdx @@ -17,7 +17,7 @@ AI Chip supports **5 states** - default, hover, active, focus and disabled. ### Structure -#### AI chip +#### AI Chip @@ -69,7 +69,7 @@ AI Chip supports **5 states** - default, hover, active, focus and disabled. ### Usage -#### AI Chip for AI assisted actions +#### AI Chip for AI Assisted Actions AI Chip should be used where there are actions that are assisted/powered by AI. diff --git a/docs/src/pages/components/AIResponse/usage.mdx b/docs/src/pages/components/AIResponse/usage.mdx index 0121a2215f..f7d4488183 100644 --- a/docs/src/pages/components/AIResponse/usage.mdx +++ b/docs/src/pages/components/AIResponse/usage.mdx @@ -88,7 +88,7 @@ AI Response has **2 states** - default and generating. ### Behavior -#### Tooltip on actions +#### Tooltip on Actions It is recommended to display a tooltip when hovering over icon buttons within an AI response. @@ -104,14 +104,14 @@ Here is an example showcasing how content is generated inside AI Response. ### Usage -#### Custom response +#### Custom Response AI responses are highly customizable and can incorporate a wide range of components to meet diverse use cases. ![Custom Content inside AI Response](./images/custom.png) -#### Taking Feedback from Users +#### Taking Feedback From Users Users can share their feedback on the AI response by using the feedback buttons located at the bottom right corner of the response. diff --git a/docs/src/pages/components/avatar/usage.mdx b/docs/src/pages/components/avatar/usage.mdx index c164e3e160..30c0f376eb 100644 --- a/docs/src/pages/components/avatar/usage.mdx +++ b/docs/src/pages/components/avatar/usage.mdx @@ -15,13 +15,13 @@ Avatar comes in 9 appearances - ### Shapes Avatar comes in **2 shapes** - round and square. -#### Round avatar +#### Round Avatar Round avatar represents a single entity i.e a user, bot or app. ![Shapes](./images/round-avatar.png) -#### Square avatar +#### Square Avatar Square avatar represents a group of entities or organization. ![Shapes](./images/square-avatar.png) @@ -58,7 +58,7 @@ Avatar comes in **3 states** - default, focus and disabled. ### Structure -#### Round avatar +#### Round Avatar

@@ -104,7 +104,7 @@ Avatar comes in **3 states** - default, focus and disabled.
Custom Content inside AI ResponseA round avatarAvatars with image

-#### Square avatar +#### Square Avatar

@@ -159,7 +159,7 @@ Avatar comes in **3 states** - default, focus and disabled.

-#### Round avatar +#### Round Avatar

@@ -222,7 +222,7 @@ Avatar comes in **3 states** - default, focus and disabled.
-#### Square avatar +#### Square Avatar

@@ -289,7 +289,7 @@ Avatar comes in **3 states** - default, focus and disabled.
-#### Color assignment +#### Color Assignment The background color of an avatar should be generated dynamically in such a way that at the time of its creation a random color (from the available options) is assigned. Once assigned, the color should stay the same as long as that particular avatar is in use. @@ -308,18 +308,18 @@ Since an avatar can either show an image, icon or the initials, there should be Hovering on an avatar
-#### Square avatar vs Round avatar group +#### Square Avatar vs Round Avatar Group Square avatars and round avatar group are both used to group entities. Square avatar is ideal for presenting a group as a unified entity, while round avatar group facilitates an interactive and visually cohesive representation of individual members within the group. -#### Fallback hierarchy +#### Fallback Hierarchy This is the fallback order defined for avatars: ![With Image](./images/fallback-hierarchy.png) Fallback hierarchy -#### Avoid square avatar with Icon button +#### Avoid Square Avatar With Icon Button It is recommended to not use square avatar in conjunction with an icon button as users may mistake the avatar for a button. diff --git a/docs/src/pages/components/avatarGroup/interactions.mdx b/docs/src/pages/components/avatarGroup/interactions.mdx index 9fc80d3fd2..c1411d0668 100644 --- a/docs/src/pages/components/avatarGroup/interactions.mdx +++ b/docs/src/pages/components/avatarGroup/interactions.mdx @@ -1,4 +1,4 @@ -### Elevation in selection avatar +### Elevation in Selection Avatar

@@ -83,7 +83,7 @@ /> -### Depression in selection avatar +### Depression in Selection Avatar

diff --git a/docs/src/pages/components/avatarGroup/usage.mdx b/docs/src/pages/components/avatarGroup/usage.mdx index 35f6de9f81..1c3d6d3548 100644 --- a/docs/src/pages/components/avatarGroup/usage.mdx +++ b/docs/src/pages/components/avatarGroup/usage.mdx @@ -64,7 +64,7 @@ Both avatar group and selection avatar group share the same variants. ### Structure -#### Option item (Selection Avatar Group) +#### Option Item (Selection Avatar Group)

diff --git a/docs/src/pages/components/badges/usage.mdx b/docs/src/pages/components/badges/usage.mdx index e38477b669..0b982bbeda 100644 --- a/docs/src/pages/components/badges/usage.mdx +++ b/docs/src/pages/components/badges/usage.mdx @@ -10,19 +10,19 @@ Badges help the users to understand the difference between multiple entities by ### Variants -#### Solid badge +#### Solid Badge Solid style is used to highlight important information on the page so that they can be recognized easily. Solid style helps the badge to easily pop out in a page. -#### Subtle badge +#### Subtle Badge Subtle style is used when a lot of entities on a single page need tagging/labelling. In that case, using solid badges becomes a bit overwhelming e.g. tags in a list. This is why subtle badges use the lightest shade of the colors. -### Appearance +### Appearance A badge comes in 9 appearances - @@ -109,7 +109,7 @@ A badge comes in 9 appearances - ### Usage
-#### Spacing between badges +#### Spacing Between Badges Badges should maintain a **minimum spacing of 8px** from the content on either side. ![Spacing between badges](./images/badges-1.png) @@ -123,14 +123,14 @@ Badges are used for tagging entities while pills are used to display count of en Badges vs Pills
-#### Hover on badge +#### Hover on Badge Badges can be used to display related information when hovered. ![Hover on badge](./images/hover-on-badge.png) Hover on badge
-#### Badge vs Status hint +#### Badge vs Status Hint Badge is used as a label to tag entities while status hint is used to display the status of a resource. ![Badge vs Status hint](./images/badge-vs-statusHint.png) diff --git a/docs/src/pages/components/breadcrumbs/usage.mdx b/docs/src/pages/components/breadcrumbs/usage.mdx index 83f18683af..a0ebe8dae2 100644 --- a/docs/src/pages/components/breadcrumbs/usage.mdx +++ b/docs/src/pages/components/breadcrumbs/usage.mdx @@ -91,13 +91,13 @@ Since the breadcrumb component is made up of the subtle link, you can change its
-#### Showing more than 4 levels +#### Showing More Than 4 Levels By default, breadcrumbs can show upto 4 levels of hierarchy. For cases where there are more than 4 levels, only first and last breadcrumb is shown. The rest levels can be seen on clicking the menu button present in the middle. -#### Seeing the entire label +#### Seeing the Entire Label The max-width of the label is 160px, beyond that the text will truncate with '…'. The users can see the entire label on hover inside a tooltip. diff --git a/docs/src/pages/components/button/content.mdx b/docs/src/pages/components/button/content.mdx index 1d84c7ec80..8a77781006 100644 --- a/docs/src/pages/components/button/content.mdx +++ b/docs/src/pages/components/button/content.mdx @@ -1,4 +1,4 @@ -#### Take the right actions +#### Take the Right Actions Take the right actions in order to move towards the goal. Use them to make your labels predictable and consequential. ##### Create vs. New @@ -630,7 +630,7 @@ Use it to shut the application and exit the page. -#### Remember to +#### Remember To * Use verbs for initiating an action. * Use consistent words for labels throughout the product. * Use sentence case for labels and buttons even if the text is long. diff --git a/docs/src/pages/components/button/usage.mdx b/docs/src/pages/components/button/usage.mdx index d2995003bd..2f86540ccc 100644 --- a/docs/src/pages/components/button/usage.mdx +++ b/docs/src/pages/components/button/usage.mdx @@ -12,37 +12,37 @@ Buttons are one of the most crucial elements of a user interface. They are used ### Types Buttons come in a lot of styles basis on the intent and prominence. -#### Basic button +#### Basic Button Basic button is the simplest and the default style of the button. It is used the most across products. It provides a lightweight button style while still maintaining affordability. Use other styles if less or more visual weight is required. -#### Primary button +#### Primary Button Primary button is used to draw attention towards the primary action on a page. It is recommneded to have just a single instance of primary button per page. If you think more than one primary action is needed, try to re-evaluate the priority of actions. -#### Alert button +#### Alert Button Alert button indicates destructive actions that cannot be undone typically such as delete, discard, etc. -#### Transparent button +#### Transparent Button Transparent button indicates actions that are less important or less frequent. -#### Expanded button +#### Expanded Button Expanded button is used when the width of the button needs to match the parent. Use it sparingly as it takes a lot of space and attention. -#### Icon with label button +#### Icon With Label Button Icon with label adds additional visual cues in buttons. The icon can either precede the label or succeed it. -##### Icon in left +##### Icon in Left -##### Icon in right +##### Icon in Right -#### Icon button +#### Icon Button Icon button only uses icons to indicate what the action would be. They come handy when there is a space constraint and the icon meaning is universal i.e. easy to understand such as print, edit, delete, etc. It is recommended to show tooltip on hover so as to provide clarity on what the action would be. @@ -67,7 +67,7 @@ Buttons come in **6 states** - default, hover, active, focus, disabled and loadi
-### Structure +### Structure

@@ -165,11 +165,11 @@ Buttons come in **6 states** - default, hover, active, focus, disabled and loadi ### Usage
-#### Loading state inside a button +#### Loading State Inside a Button Buttons come with a loading state which can be used to indicate that the action clicked is in progress. -#### Tooltip on an icon button +#### Tooltip on an Icon Button Always use tooltip with icon buttons. It provides an additional way to indicate the meaning of the button. Keep the tooltip label concise. ![Show tooltip on an icon button](./images/buttons-1.png) @@ -177,18 +177,18 @@ Always use tooltip with icon buttons. It provides an additional way to indicate
-#### Split button +#### Split Button Basic and icon buttons can be combined to create a split button. The split button provides a way to attach multiple options to an action. The spacing between the two buttons is 2px. -#### Toggle behavior +#### Toggle Behavior As mentioned earlier, in addition to the common 6 states, basic and transparent appearances also supports an additional **selected** state which can be used to mimic toggle behavior. ![Bold icon button in selected state](./images/buttons-2.png) Bold icon button in selected state
-#### Button groups +#### Button Groups Multiple buttons of same type can be grouped in proximity to indicate related actions. **Basic button group** diff --git a/docs/src/pages/components/calendar/usage.mdx b/docs/src/pages/components/calendar/usage.mdx index 1f2d983781..aff0afd0f1 100644 --- a/docs/src/pages/components/calendar/usage.mdx +++ b/docs/src/pages/components/calendar/usage.mdx @@ -84,7 +84,7 @@ A time entity in calendar (date, month, year) can come in different states -
### Usage -#### Calendar vs. Date picker +#### Calendar vs. Date Picker Date picker is nothing but a calendar inside a popover and hence a trigger is always required to open it e.g. an input box. On the other hand, calendar is used as an inline component to show a view without additional triggers. ![Calendar is used inline](./images/calendar-2.png) @@ -92,6 +92,6 @@ Date picker is nothing but a calendar inside a popover and hence a trigger is al

-#### Date with an event +#### Date With an Event Specific date can be highlighted to show that there is an event on that particular day. diff --git a/docs/src/pages/components/card/usage.mdx b/docs/src/pages/components/card/usage.mdx index 5d6956c642..fcc8d3bb43 100644 --- a/docs/src/pages/components/card/usage.mdx +++ b/docs/src/pages/components/card/usage.mdx @@ -81,22 +81,22 @@ Flat card is used to create sections within a default card i.e. card inside a ca ### Usage
-#### Scrolling inside a card +#### Scrolling Inside a Card To indicate that the content is scrollable within a card, use a scrollbar. The dividers in the header and the footer should only be shown when the content is scrollable. -#### Highlighting a section +#### Highlighting a Section Subdued card is used to highlight a section inside a card. The condition is that this section must be at the edges (bottom, right, etc.) and not somewhere in between. -#### Card within a default card +#### Card Within a Default Card Flat card is used when there is a need to create sections within a default card i.e. card inside a card. -#### Empty card +#### Empty Card When data is not available, the card remains empty. In that case, an illustration and/or an error message is displayed. \ No newline at end of file diff --git a/docs/src/pages/components/checkbox/usage.mdx b/docs/src/pages/components/checkbox/usage.mdx index 494991f909..0f3da49581 100644 --- a/docs/src/pages/components/checkbox/usage.mdx +++ b/docs/src/pages/components/checkbox/usage.mdx @@ -17,7 +17,7 @@ The default variant comes with a checkbox control and a label, to cater most of -#### With help text +#### With Help Text A checkbox can have a help text below the label to provide additional information about that particular option. The help text will always be aligned to the label. Clicking over the help text will not change the state of checkbox. diff --git a/docs/src/pages/components/chips/usage.mdx b/docs/src/pages/components/chips/usage.mdx index b76c251c9e..75273d2aaf 100644 --- a/docs/src/pages/components/chips/usage.mdx +++ b/docs/src/pages/components/chips/usage.mdx @@ -12,7 +12,7 @@ Chips are compact interactive elements that allow users to make selections, filt ### Types
-#### Selection chip +#### Selection Chip Selection chips are used to let the users select one or many options from a group and the effect is immediate. Do not provide a single option for selection. @@ -21,14 +21,14 @@ For example - applying filters on a page. In that case, as soon as a selection c ![Example of selection chips](./images/01-Selection-chip.png) Example of selection chips -#### Action chip +#### Action Chip Action chips are used when there is a group of related actions to perform. These actions are dynamic and contextual to the content. Buttons can’t be used in this case as they should be used for persistent and consistent actions only. ![Example of action chips](./images/02-Action-chip.png) Example of action chips -#### Input chip +#### Input Chip Input chips are used inside the inputs to behave as removable entries or tags. @@ -39,14 +39,14 @@ Input chips are used inside the inputs to behave as removable entries or tags. ### Variants -#### With icon +#### With Icon Chips can have an optional icon on the left preceding the label. ![with icon on left](./images/04-With-icon.png) with icon on left -#### With remove button +#### With Remove Button Selection and input chips can have a remove button on the right of the label to remove them from a view. @@ -100,7 +100,7 @@ Chips come in **5 states**: default, hover, focus, disabled, and active states. ### Configurations -#### Selection chip +#### Selection Chip
@@ -136,7 +136,7 @@ Chips come in **5 states**: default, hover, focus, disabled, and active states.
-#### Action chip +#### Action Chip
@@ -167,7 +167,7 @@ Chips come in **5 states**: default, hover, focus, disabled, and active states.
-#### Input chip +#### Input Chip
@@ -205,7 +205,7 @@ Chips come in **5 states**: default, hover, focus, disabled, and active states. ### Usage -#### Selection vs input vs action chips +#### Selection vs Input vs Action Chips
@@ -236,7 +236,7 @@ Chips come in **5 states**: default, hover, focus, disabled, and active states.
-#### Chip vs badge +#### Chip vs Badge Chips are used for selection/actions, quick filtering, and offering removable options whereas badges are just used for labeling entities and are not actionable. @@ -245,7 +245,7 @@ Chips are used for selection/actions, quick filtering, and offering removable op
-#### Selection chip vs radio/checkbox +#### Selection Chip vs Radio/checkbox Selection chips generally provide an immediate response but if there is a space crunch in forms, they can replace radio and checkboxes in order to display all the available options in a compact area. @@ -256,7 +256,7 @@ Selection chips generally provide an immediate response but if there is a space
-#### Action chips vs buttons +#### Action Chips vs Buttons The number and label of action chips are contextual to the content and appear dynamically as a group of interactive elements, while buttons are expected to appear consistently and are persistent. @@ -265,7 +265,7 @@ The number and label of action chips are contextual to the content and appear dy
-#### Chips vs interactive cards +#### Chips vs Interactive Cards Chips are used for simpler options whereas interactive cards are used for descriptive options that need better categorization. @@ -274,7 +274,7 @@ Chips are used for simpler options whereas interactive cards are used for descri
-#### Overflow behavior in chips +#### Overflow Behavior in Chips Chip label is by default truncated at the width of 256px which can be customized based on the use case. The truncated label can be seen inside a tooltip on hover. @@ -286,7 +286,7 @@ Chip label is by default truncated at the width of 256px which can be customized
-#### Text styling +#### Text Styling Text inside the chips can be styled to highlight some information. diff --git a/docs/src/pages/components/combobox/interactions.mdx b/docs/src/pages/components/combobox/interactions.mdx index 417cb8597e..edf4b88f02 100644 --- a/docs/src/pages/components/combobox/interactions.mdx +++ b/docs/src/pages/components/combobox/interactions.mdx @@ -1,7 +1,7 @@ import comboboxOpening from "./images/combobox-opening.gif" import comboboxClosing from "./images/combobox-closing.gif" -### Combobox - opening +### Combobox - Opening Opening of Combobox @@ -11,7 +11,7 @@ import comboboxClosing from "./images/combobox-closing.gif" Default [popover](https://design.innovaccer.com/components/popover/interactions/#opening-popover) animation is used. -### Combobox - closing +### Combobox - Closing Closing a Combobox diff --git a/docs/src/pages/components/combobox/usage.mdx b/docs/src/pages/components/combobox/usage.mdx index af11146d03..20b1999535 100644 --- a/docs/src/pages/components/combobox/usage.mdx +++ b/docs/src/pages/components/combobox/usage.mdx @@ -23,14 +23,14 @@ Just like the inputs, combobox also comes in **3 sizes** - small, regular and la ### States -#### Single and multiple input states +#### Single and Multiple Input States The input has following states - default, hover, focus, typing, error and disabled. ![States of input box](./images/states.png) States of input box -#### Option states +#### Option States The items in the option list come in following states - default, hover, active and selected. Users can also use the up/down arrow key on their keyboard to traverse the options. diff --git a/docs/src/pages/components/datePicker/usage.mdx b/docs/src/pages/components/datePicker/usage.mdx index 63b09c815a..cf759e2b23 100644 --- a/docs/src/pages/components/datePicker/usage.mdx +++ b/docs/src/pages/components/datePicker/usage.mdx @@ -13,7 +13,7 @@ Date picker lets users select or directly enter date values. It can either be a ### Types Date picker comes in two types - one for selecting single date value called date picker and another for selecting a date range aptly called date range picker. -#### Date picker +#### Date Picker For selecting single date value. ![Date picker](./images/datePicker-1.png) @@ -22,7 +22,7 @@ For selecting single date value.
-#### Date range picker +#### Date Range Picker For selecting a date range. ![Date range picker](./images/datePicker-2.png) @@ -108,7 +108,7 @@ Date picker is built up using calendar and popover components. Unlike calendar, One obvious expectation from a date picker is the ability to input values using a keyboard e.g. when a user has to enter the date of birth. Getting the desired date is much quicker this way as users do not have to go through the calendar select the desired value. Therefore, use **inputs** to trigger the date picker. -#### Using preset values +#### Using Preset Values Use selection chips to give quick selection of preset date/date-range values. ![Using preset values](./images/datePicker-3.png) @@ -122,11 +122,11 @@ If there is a space crunch, you can have these preset values in the popover itse
-#### Using single input for a date range +#### Using Single Input for a Date Range If there is a space crunch, you can have a single input for entering/selecting a date range. -#### Using date and time picker together +#### Using Date and Time Picker Together As soon as a date or date range is selected, time picker dropdown should be triggered so that users can select the time without any additional click. ![Date and time picker together](./images/datePicker-5.png) @@ -134,25 +134,25 @@ As soon as a date or date range is selected, time picker dropdown should be trig
-#### Selecting day of the week or time of day +#### Selecting Day of the Week or Time of Day Use selection chips for selecting day of the week or time of day. ![Selection chips to select day of the week or time of day](./images/datePicker-6.png) Selection chips to select day of the week or time of day -#### Reverse selection in date range picker +#### Reverse Selection in Date Range Picker Users are allowed to choose the end date first and subsequently select the first date. ![Reverse selection in date range picker](./images/datePicker-7.png) Reverse selection in date range picker -#### Selecting the same date twice +#### Selecting the Same Date Twice Users are allowed to select the same date twice making the first and last date the same. ![Selecting the same date twice](./images/datePicker-8.png) Selecting the same date twice -#### Updating a selected date range +#### Updating a Selected Date Range In case of any update to the selected range, the selection will reset with the newly selected date becoming the new first date. diff --git a/docs/src/pages/components/dividers/usage.mdx b/docs/src/pages/components/dividers/usage.mdx index b0b2c7695e..e9607bc9e5 100644 --- a/docs/src/pages/components/dividers/usage.mdx +++ b/docs/src/pages/components/dividers/usage.mdx @@ -76,7 +76,7 @@ For example, if a user is scrolling the content of the body, any basic divider p
-#### Vertical divider +#### Vertical Divider ![Structure of vertical divider](./images/verticaldivider-structure.png) @@ -98,7 +98,7 @@ For example, if a user is scrolling the content of the body, any basic divider p ### Configurations -#### Horizontal divider +#### Horizontal Divider

@@ -146,14 +146,14 @@ For cases where the available width is not enough to accommodate content with 16 Due to the space crunch, padding inside cards is 12px instead of the regular 16px & hence 12px indentation is being used here
-#### Being aware of default padding/margin +#### Being Aware of Default Padding/margin A lot of the times there is a default padding/margin present in a component e.g. in the body of a sidesheet. Hence, in such cases the dividers do not span till the edge(s). Be aware of padding/margin in such cases. ![Dividers here are within the confinement of body (after applied padding)](./images/dividers-7.png) Dividers here are within the confinement of body (after applied padding)
-#### Dividers with scrollable content +#### Dividers With Scrollable Content In modals, sheets, and cards with scrollable content, the header appearance of divider should be used in the header and footer. The slightly darker color of this divider and its position help in differentiating it from the basic appearance that might be present in the body. ![Header divider in both header & footer](./images/dividers-8.png) diff --git a/docs/src/pages/components/dropdowns/interactions.mdx b/docs/src/pages/components/dropdowns/interactions.mdx index 9e176c045b..fc46c1d374 100644 --- a/docs/src/pages/components/dropdowns/interactions.mdx +++ b/docs/src/pages/components/dropdowns/interactions.mdx @@ -8,7 +8,7 @@ import dropdowns12 from './images/dropdowns-12.gif'

-#### Dropdown button +#### Dropdown Button
@@ -210,7 +210,7 @@ Default popover animation is used.

-#### Dropdown button +#### Dropdown Button
diff --git a/docs/src/pages/components/dropdowns/usage.mdx b/docs/src/pages/components/dropdowns/usage.mdx index dd9d2478d0..df6909c203 100644 --- a/docs/src/pages/components/dropdowns/usage.mdx +++ b/docs/src/pages/components/dropdowns/usage.mdx @@ -28,7 +28,7 @@ This is the icon button + popover combination of dropdowns which is used only fo
-#### Button variants +#### Button Variants The custom button for dropdowns comes with a few variants - @@ -38,19 +38,19 @@ The standard variant consists of just text which changes its state when one or m -##### With icon +##### With Icon This variant comes with an icon in the left preceding the text to provide additional cues regarding the type of the options. -##### Inline label +##### Inline Label This variant comes with a label preceding the text and can be used at places where there is a space crunch. -#### Options variants +#### Options Variants The options in a dropdown can be single select or multi-select. They come with a few variants - @@ -60,19 +60,19 @@ This variant comes with just text. -##### With icon +##### With Icon This variant comes with an icon preceding the text. -##### With sub info +##### With Sub Info This variant comes with sub-info beneath the text. -##### With checkbox +##### With Checkbox This variant comes with the support of checkboxes to select single or multiple options. The options here can also have sub info just like the previous variant. @@ -88,7 +88,7 @@ Dropdowns come in **2 sizes** - small and regular.
-#### Button states +#### Button States The custom button comes in **5 states** - default, hover, focus, active and disabled. @@ -97,7 +97,7 @@ The custom button comes in **5 states** - default, hover, focus, active and disa

-#### Options states +#### Options States The options come in **3 states** - default, hover and selected. Users can also use the up/down arrow key to traverse the options. In that case, the highlighted option has the same state as hover. @@ -117,7 +117,7 @@ Dropdown is made up of 2 key components - a custom **button** which acts as a tr

-#### Trigger (Dropdown button) +#### Trigger (Dropdown Button)

@@ -187,7 +187,7 @@ Dropdown is made up of 2 key components - a custom **button** which acts as a tr

-#### Trigger (Dropdown button) +#### Trigger (Dropdown Button)

@@ -300,11 +300,11 @@ Dropdown can be offered with a search functionality. In that case, the search in -#### Multi select +#### Multi Select The multi-select behavior in a dropdown is divided into **2 categories** as following. -##### For options less than or equal to a threshold +##### For Options Less Than or Equal to a Threshold @@ -315,7 +315,7 @@ The multi-select behavior in a dropdown is divided into **2 categories** as foll

-##### For options more than the threshold +##### For Options More Than the Threshold @@ -329,7 +329,7 @@ The multi-select behavior in a dropdown is divided into **2 categories** as foll
-#### Grouping options +#### Grouping Options Dropdown options can be grouped under a section using a sub header, if needed. @@ -340,7 +340,7 @@ Dropdown options can be grouped under a section using a sub header, if needed.

-#### Label position +#### Label Position The label provides a better understanding of what kind of selection is expected. Labels can be placed either on the top of the dropdown or can be placed inline with the value or placeholder of the dropdown. @@ -352,19 +352,19 @@ The label provides a better understanding of what kind of selection is expected.
-#### Help text +#### Help Text Help text can be provided beneath a dropdown to add context regarding the type of input required just like the input fields. -#### Actions in footer +#### Actions in Footer Using network resources on each checkbox selection in a dropdown can be quite expensive. To avoid sending api calls at every selection, the dropdown with multi-select comes with an option of having actions in the footer. This helps in sending the api call just once i.e. on click of Add/Apply button. -#### Custom trigger +#### Custom Trigger Dropdowns can also be triggered by other components, primarily by buttons and icon buttons. The basic behavior of the dropdown remains the same. diff --git a/docs/src/pages/components/emptyState/usage.mdx b/docs/src/pages/components/emptyState/usage.mdx index 172749ae4e..49b2fed145 100644 --- a/docs/src/pages/components/emptyState/usage.mdx +++ b/docs/src/pages/components/emptyState/usage.mdx @@ -167,7 +167,7 @@ Guidelines to use each action type: **Note:** Be cautious about the number of primary actions displayed on a single page. -#### Where to use +#### Where to Use Empty states can arise due to various factors, each requiring distinct approaches. These include: diff --git a/docs/src/pages/components/helpText/usage.mdx b/docs/src/pages/components/helpText/usage.mdx index 72bbec94e0..b7042b40f8 100644 --- a/docs/src/pages/components/helpText/usage.mdx +++ b/docs/src/pages/components/helpText/usage.mdx @@ -40,7 +40,7 @@ Help text is used to provide additional information accompanying a component suc ### Usage -#### When to use help text +#### When to Use Help Text Help text should only be used to provide a brief description related to the component. It should not be used for headings, main content, or long paragraphs. @@ -54,7 +54,7 @@ Help text should only be used to provide a brief description related to the comp

-#### Help text vs Inline message +#### Help Text vs Inline Message Inline message is used to provide inline feedback regarding a state or action and hence it is reactive (only appears after something has happened, to provide feedback). Whereas help text is used to provide additional information typically appearing just below a component e.g. inputs, dropdowns, etc. @@ -63,7 +63,7 @@ Inline message is used to provide inline feedback regarding a state or action an

-#### Position and width of the help text component +#### Position and Width of the Help Text Component Help text always appears just below the accompanying component and spans across its width. diff --git a/docs/src/pages/components/icons/usage.mdx b/docs/src/pages/components/icons/usage.mdx index ba2eda6ec4..92753c7cbd 100644 --- a/docs/src/pages/components/icons/usage.mdx +++ b/docs/src/pages/components/icons/usage.mdx @@ -146,7 +146,7 @@ Icons are based on Google’s Material Design and rendered using icon fonts. It ### Usage
-#### Different sizes +#### Different Sizes Icons can also be resized to account for various use cases. ##### Large @@ -161,7 +161,7 @@ Smaller than `16px` ![Small sized icon](./images/icons-13.png)
-#### With label +#### With Label Icons can come really handy when showing key-value pairs. ![Icons appearing with label](./images/icons-14.png) @@ -169,7 +169,7 @@ Icons can come really handy when showing key-value pairs.

-#### With background +#### With Background ![Icons with background containers](./images/icons-15.png) Icons with background containers diff --git a/docs/src/pages/components/inlineEditableFields/usage.mdx b/docs/src/pages/components/inlineEditableFields/usage.mdx index 7687b5cdeb..9fd5185849 100644 --- a/docs/src/pages/components/inlineEditableFields/usage.mdx +++ b/docs/src/pages/components/inlineEditableFields/usage.mdx @@ -11,11 +11,11 @@ Inline editable fields enable users to edit the data right where they see it. Th ### Types
-#### Basic input +#### Basic Input Inline editable input comes with two small action buttons to confirm or discard the changes. -#### Input with chips +#### Input With Chips Chips can be used as tags in inputs. **Enter/return** key is used to input the tags. @@ -37,7 +37,7 @@ Inline editable input comes in **2 sizes** - regular and small. On the other han
-#### Input with chips +#### Input With Chips ![States of Inline editable input with chips](./images/inlineEditable-chipsStates.png) States of inline editable input with chips @@ -201,7 +201,7 @@ Inline editable fields are used when the users want to update a field or two wit ![Using Inline editable fields](./images/inlineEditable-intent.png) -#### Showing error +#### Showing Error Errors are shown using popovers alongside the inline editable field. ![Showing error in inline editable fields](./images/inlineEditable-error.png) @@ -209,7 +209,7 @@ Errors are shown using popovers alongside the inline editable field.
-#### Overflow behavior in inline editable chip input +#### Overflow Behavior in Inline Editable Chip Input In case of overflow the chip gets wrapped into the next line. ![Overflow behavior of inline editable fields](./images/inlineEditable-overflow.png) @@ -217,7 +217,7 @@ In case of overflow the chip gets wrapped into the next line.
-#### Horizontal spacing between label and field +#### Horizontal Spacing Between Label and Field It is recommended to have a minimum spacing of 4px between the label and the inline editable field when placed horizontally. > This spacing is recommended so that the focus ring doesn’t overlap with the label. diff --git a/docs/src/pages/components/inputs/usage.mdx b/docs/src/pages/components/inputs/usage.mdx index 5f5dfb481a..b3b6ecd37c 100644 --- a/docs/src/pages/components/inputs/usage.mdx +++ b/docs/src/pages/components/inputs/usage.mdx @@ -12,25 +12,25 @@ Inputs allow users to type in a value. They can be used anywhere, though they mo
-#### Basic input +#### Basic Input Basic input contains the input box, value or placeholder text, and an optional icon on the right. -#### Metric input +#### Metric Input Metric input takes numerical data as input. It can either have a **prefix** e.g. currency symbols such as $, €, ₹, etc., or **suffix** e.g.units such as kg, mm, in, etc. to provide additional information about the data being input. -#### Verification code input +#### Verification Code Input Verification code input allows users to enter the code sent to their systems to verify themselves. These codes can be either 4 or 6 digits long. -#### Free text area +#### Free Text Area Free text area lets users enter data much longer than a basic input. It can have a scrollbar and a resize action at the bottom right. Just like the basic input, it can also have help text beneath it. @@ -40,7 +40,7 @@ Free text area lets users enter data much longer than a basic input. It can have
-#### With icon +#### With Icon Basic inputs can have an icon on the left of text in the input box along with an optional icon on the right. This variant comes in 2 sizes i.e. regular and large as accomodating such icons is not possible in the tiny size. @@ -231,13 +231,13 @@ The label comes with an optional required indicator (\*). -#### Label position +#### Label Position Label can be placed either on the top of the input field or at the left of it. It is not advised to place label on the left until there are some height constraints, as this type of placement causes a lot of eye movement. Top labels are responsive and also maintain the vertical rhythm in case of long forms. -#### Help text +#### Help Text Help text can be added beneath the input box to provide additional information. In case of an error that needs to be explained, inline message is used at the same place. @@ -265,7 +265,7 @@ Inputs can be marked as optional or required depending upon the context. To avoi It is recommended to keep the notations of required and optional fields consistent throughout the app as different notations can confuse users.
-#### Input character limit +#### Input Character Limit Input can have a character count to display both the characters being entered and the total number of characters allowed. it is recommended to allow the users to type past the character limit, but they shouldn't be allowed to submit until they have brought the characters under the character limit. @@ -274,13 +274,13 @@ Input can have a character count to display both the characters being entered an

-#### Input masking +#### Input Masking Input masks are helpful for the data fields that have a specific input format, as they provide the formatting cues to help users know the format in which the data is expected for the field. -#### Input with chips +#### Input With Chips Inputs can also be used to create filters in the field values by using input chips. To embed a chip, press **enter** after typing. To remove all the chips at once, click on the clear icon of the input box. @@ -295,7 +295,7 @@ Inputs can also be used to create filters in the field values by using input chi

-#### Verification code input behaviour +#### Verification Code Input Behaviour
diff --git a/docs/src/pages/components/interactiveCard/usage.mdx b/docs/src/pages/components/interactiveCard/usage.mdx index 4d312a15fb..a15fde55bb 100644 --- a/docs/src/pages/components/interactiveCard/usage.mdx +++ b/docs/src/pages/components/interactiveCard/usage.mdx @@ -10,7 +10,7 @@ Interactive cards are flexible and make for an easily scannable way to present o ### Types -#### Action cards +#### Action Cards Action cards facilitate navigation by offering clear descriptions and a design that is both engaging and balanced. @@ -20,7 +20,7 @@ Action cards facilitate navigation by offering clear descriptions and a design t Action cards -#### Selection cards +#### Selection Cards Selection cards are used for selection. They can be single-select or multi-select. @@ -34,7 +34,7 @@ Selection cards are used for selection. They can be single-select or multi-selec Interactive cards come in 5 states: default, hover, focus, disabled, and active. -#### Action cards +#### Action Cards
@@ -42,7 +42,7 @@ Interactive cards come in 5 states: default, hover, focus, disabled, and active. Various states of action card -#### Selection cards +#### Selection Cards
@@ -52,7 +52,7 @@ Interactive cards come in 5 states: default, hover, focus, disabled, and active. ### Structure -#### Content alignment +#### Content Alignment ##### Left @@ -120,7 +120,7 @@ Interactive cards come in 5 states: default, hover, focus, disabled, and active. ### Usage -#### Content alignment +#### Content Alignment ##### Left @@ -138,7 +138,7 @@ It is recommended to align the content of interactive cards to the center when t
-#### Interactive cards vs Chips +#### Interactive Cards vs Chips Interactive cards are used for descriptive and well organized options, while chips are a space efficient way to display simpler options. @@ -147,7 +147,7 @@ Interactive cards are used for descriptive and well organized options, while chi
-#### Interactive cards vs Radio/checkbox +#### Interactive Cards vs Radio/checkbox Interactive cards are used when you need to categorize your options using strong visual representation without making it overwhelming, while radio/checkbox is used for straightforward, simpler layouts. @@ -156,7 +156,7 @@ Interactive cards are used when you need to categorize your options using strong
-#### Recommended spacing between cards +#### Recommended Spacing Between Cards It is recommended to give a spacing of 16px between cards when stacking them horizontally or vertically. @@ -165,7 +165,7 @@ It is recommended to give a spacing of 16px between cards when stacking them hor
-#### Custom interactive cards +#### Custom Interactive Cards Interactive cards can have custom content inside it, but the states of the card with custom content must remain coherent with the default interactive cards. diff --git a/docs/src/pages/components/linkButton/usage.mdx b/docs/src/pages/components/linkButton/usage.mdx index 352430ae6f..be14da18b7 100644 --- a/docs/src/pages/components/linkButton/usage.mdx +++ b/docs/src/pages/components/linkButton/usage.mdx @@ -26,7 +26,7 @@ Subtle link button is gray in color. It is used where drawing users’ attention ![Subtle link button](./images/subtle-link-button.png) Subtle link button -#### With icon +#### With Icon Link button can have an optional icon on the left or right. @@ -137,14 +137,14 @@ Link button comes in **5 states** - default, hover, active, focus and disabled. ### Usage -#### Subtle link button vs Transparent button +#### Subtle Link Button vs Transparent Button Subtle link button is used when there is a space constraint whereas transparent button is used when there is sufficient space and the clickable area needs to be larger. ![Subtle link button vs Transparent button](./images/link-transparent-button.png) Subtle link button vs Transparent button -#### Link button vs Link +#### Link Button vs Link Link button is used for performing actions whereas link is used for navigation. diff --git a/docs/src/pages/components/links/usage.mdx b/docs/src/pages/components/links/usage.mdx index c8ad117a50..f9f50ede2e 100644 --- a/docs/src/pages/components/links/usage.mdx +++ b/docs/src/pages/components/links/usage.mdx @@ -83,7 +83,7 @@ A link consist of just a text. It does not contain any padding.
### Usage -#### Standard vs. Subtle link +#### Standard vs. Subtle Link ##### Standard Link It is the default link component and comes in the primary color. It is used to draw attention and hence it is not recommended to have many links on a single page. diff --git a/docs/src/pages/components/listbox/interactions.mdx b/docs/src/pages/components/listbox/interactions.mdx index 170c4c1b53..e105581f3c 100644 --- a/docs/src/pages/components/listbox/interactions.mdx +++ b/docs/src/pages/components/listbox/interactions.mdx @@ -2,7 +2,7 @@ import ReorderingItems from './images/Reordering-items.gif' import ExpandingItem from './images/Expanding-item.gif' import CollapsingItem from './images/Collapsing-item.gif' -### Reordering list items +### Reordering List Items To reorder, pick the item to be reordered via the drag handle placed at the beginning. Items other than the picked item will reorder as soon as the picked item reaches the boundary of the adjacent item. @@ -19,7 +19,7 @@ To reorder, pick the item to be reordered via the drag handle placed at the begi Reordering a list item using the drag indicator -#### Picked item +#### Picked Item

@@ -46,7 +46,7 @@ To reorder, pick the item to be reordered via the drag handle placed at the begi
-#### Other items +#### Other Items

@@ -85,9 +85,9 @@ To reorder, pick the item to be reordered via the drag handle placed at the begi
-### Nested list +### Nested List -#### Expanding an item +#### Expanding an Item

@@ -96,7 +96,7 @@ To reorder, pick the item to be reordered via the drag handle placed at the begi Expanding an item in a nested list -##### Expand icon +##### Expand Icon

@@ -135,7 +135,7 @@ To reorder, pick the item to be reordered via the drag handle placed at the begi
-##### Nested content +##### Nested Content

@@ -174,7 +174,7 @@ To reorder, pick the item to be reordered via the drag handle placed at the begi
-#### Collapsing an item +#### Collapsing an Item

@@ -183,7 +183,7 @@ To reorder, pick the item to be reordered via the drag handle placed at the begi Collapsing an item in a nested list -##### Collapse icon +##### Collapse Icon

@@ -222,7 +222,7 @@ To reorder, pick the item to be reordered via the drag handle placed at the begi
-##### Nested content +##### Nested Content

diff --git a/docs/src/pages/components/listbox/usage.mdx b/docs/src/pages/components/listbox/usage.mdx index 65408e1f8a..cb18bcf2af 100644 --- a/docs/src/pages/components/listbox/usage.mdx +++ b/docs/src/pages/components/listbox/usage.mdx @@ -11,19 +11,19 @@ A listbox consists of related content grouped together and arranged vertically o ### Types Listbox come in **3 types**: option list, description list and resource list -#### Option list +#### Option List A list of options where an option is an entity that a user can select/pick. ![An option list](./images/Option-list.png) An option list -#### Description list +#### Description List A list of items containing simple information which is meant for consumption only. It can occasionally contain minor actions such as copy, edit, remove, etc. ![A description list](./images/Description-list.png) A description list -#### Resource list +#### Resource List A list of resources where a resource is an object in itself and has a detailed view linked to it. ![A resource list](./images/Resource-list.png) @@ -75,7 +75,7 @@ Listbox comes in **3 sizes**: standard, tight and compressed. The width varies b ![Compressed size - vertical padding - 8 px](./images/Compressed.png) Compressed size - vertical padding - 8 px -#### Tight +#### Tight This size is typically suited for information-dense lists. @@ -86,7 +86,7 @@ This size is typically suited for information-dense lists. **Note**: Since description list item is not interactive, it does not have any state. -#### Option list +#### Option List

@@ -94,7 +94,7 @@ This size is typically suited for information-dense lists. ![States of option list items](./images/States-Option-list.png) States of option list items -#### Description list +#### Description List

@@ -102,7 +102,7 @@ This size is typically suited for information-dense lists. ![States of description list items](./images/States-Description-list.png) States of description list items -#### Resource list +#### Resource List

@@ -199,7 +199,7 @@ List can be nested to show additional content. Any type of content such as a lis ![A nested list](./images/Nested-list.png) A nested list -#### Reordering list items +#### Reordering List Items Reordering the list items should be hinted using a drag indicator placed at the beginning of the items. The list item can be picked and dragged using the drag indicator to reorder the list. diff --git a/docs/src/pages/components/menu/usage.mdx b/docs/src/pages/components/menu/usage.mdx index 49edb93d85..faff86fc9c 100644 --- a/docs/src/pages/components/menu/usage.mdx +++ b/docs/src/pages/components/menu/usage.mdx @@ -30,31 +30,31 @@ This variant comes with just text. Both default and destructive option type supp -#### With icon +#### With Icon This variant comes with an icon preceding the text. Both default and destructive option type support this variant. -#### With sub info +#### With Sub Info This variant comes with sub-info beneath the text. Both default and destructive option type support this variant. -#### With check +#### With Check This variant comes with a check which acts like a switch introducing immediate change once toggled. Only default option type supports this variant. -#### With keyboard shortcut +#### With Keyboard Shortcut This variant comes with a keyboard shortcut used for expediting common actions in a menu. Only default option type supports this variant. -#### With chevron +#### With Chevron This variant comes with a chevron used for introducing nesting in a menu. Only default option type supports this variant. @@ -62,7 +62,7 @@ This variant comes with a chevron used for introducing nesting in a menu. Only d ### Sizes -#### Trigger size +#### Trigger Size Menu triggers can vary in size, with **2 default sizes:** regular and small. @@ -70,7 +70,7 @@ Menu triggers can vary in size, with **2 default sizes:** regular and small. ### States -#### Option states +#### Option States The options are built using the option list and has **5 valid states** - default, hover, active, focus and disabled. Users can also use the up/down arrow key to traverse the options. @@ -93,7 +93,7 @@ Trigger can be in the form of an icon button, basic button, mouse right-click, e
-#### Option items +#### Option Items ![Option item - Menu](./images/option-item.png) Option item - Menu @@ -127,7 +127,7 @@ Trigger can be in the form of an icon button, basic button, mouse right-click, e ### Configurations -#### Option types +#### Option Types ##### Default @@ -238,7 +238,7 @@ Trigger can be in the form of an icon button, basic button, mouse right-click, e
-#### Popover +#### Popover
@@ -271,21 +271,21 @@ Trigger can be in the form of an icon button, basic button, mouse right-click, e ### Usage -#### Width of popover +#### Width of Popover While the popover's width is flexible and can vary, it is advisable to maintain a size that is equal to or larger than the trigger of menu. ![Width of popover](./images/width-of-popover.png) Width of popover -#### Overflow behavior of items +#### Overflow Behavior of Items In case of overflow, the items will get truncated and can be viewed inside a tooltip on hover. ![Overflow behavior of items](./images/overflow-items.png) Overflow behavior of items -#### Scrolling inside menu +#### Scrolling Inside Menu Menu allows scrolling inside it when a substantial number of options are present. @@ -301,21 +301,21 @@ Divider in menu is used to group simple options into different sections or categ ![Dividers in menu](./images/divider.png) Dividers in menu -##### With Sub heading +##### With Sub Heading Sub heading in menu is used to group complex options into different sections or categories. ![Sub heading in menu](./images/subheading-in-menu.png) Sub heading in menu -#### Nesting in menu +#### Nesting in Menu Nesting in menu is employed to establish a hierarchical structure and hide options, effectively conserving space and mitigating cognitive overload. ![ Nesting in menu](./images/nesting.png) Nesting in menu -#### Custom options +#### Custom Options Menu options can have custom content inside them. diff --git a/docs/src/pages/components/message/usage.mdx b/docs/src/pages/components/message/usage.mdx index f6df8b37c5..23d43e0486 100644 --- a/docs/src/pages/components/message/usage.mdx +++ b/docs/src/pages/components/message/usage.mdx @@ -15,25 +15,25 @@ Messages serve as a prominent means of communicating important information to us This is the default variant when it comes to messages. It has a significant visual loudness and should be used with caution. -#### Inline message +#### Inline Message It is the less attention-grabbing counterpart and hence can be used in between components or patterns. ### Variants Standard message comes with a few variants - -#### With title +#### With Title A title can be shown at the top of the messages. It is typically used to summarize the description in case it's long. -#### With actions +#### With Actions Actions can be a part of messages and are typically used to directly or indirectly dismiss them. ### Sizes Inline messages come in **2 sizes** - small and regular . -#### Inline messages +#### Inline Messages ![Inline messages](./images/inline-messages.png) ### Appearances @@ -63,7 +63,7 @@ The success variant is used when the inline message needs to notify the successf

-#### Standard message +#### Standard Message ![Structure of standard message](./images/message-structure.png)
@@ -82,7 +82,7 @@ The success variant is used when the inline message needs to notify the successf
-#### Inline message +#### Inline Message ![Structure of inline message](./images/inline-structure.png) @@ -108,7 +108,7 @@ The success variant is used when the inline message needs to notify the successf
### Configurations -#### Standard message +#### Standard Message @@ -152,7 +152,7 @@ The success variant is used when the inline message needs to notify the successf

-#### Inline message +#### Inline Message @@ -194,7 +194,7 @@ The success variant is used when the inline message needs to notify the successf ### Usage
-#### Non-dismissive +#### Non-Dismissive Messages are non-dismissive in nature due to the prominent feedback they are delivering. They appear with the rest of the components and cannot be dismissed directly. @@ -204,7 +204,7 @@ Messages are used for important information and are integrated directly into the ![Messages vs Toasts](./images/messages-4.png) -#### Inline vs. Standard message +#### Inline vs. Standard Message Inline message variant should be used when feedback relative to some specific content has to be provided to the users. Whereas, the standard message variant should be used when collective feedback for a section or an entire page has to be provided to the users. ![[Left] Inline message, [Right] Standard message](./images/messages-1.png) @@ -213,7 +213,7 @@ Inline message variant should be used when feedback relative to some specific co

-#### Position & width +#### Position & Width ##### Standard Message component always appears at the top of a section but just below the header. The width of the message component always spans the width of its container or as per the content appearing below it. @@ -222,7 +222,7 @@ Message component always appears at the top of a section but just below the head
-##### Inline message +##### Inline Message Inline message component appears below the component it is related to, with a 4px margin at top and spans the width of the component. ![Position & width of the inline message component](./images/messages-3.png) diff --git a/docs/src/pages/components/metaList/usage.mdx b/docs/src/pages/components/metaList/usage.mdx index eee5ae3d8d..068fe4a3fe 100644 --- a/docs/src/pages/components/metaList/usage.mdx +++ b/docs/src/pages/components/metaList/usage.mdx @@ -16,7 +16,7 @@ The default variant includes just text.
-#### With icon +#### With Icon This variant comes with an icon in the left preceding the text to provide additional cues regarding the meta/secondary information. ![Meta list with icon in the left](./images/metaList-2.png) @@ -93,14 +93,14 @@ Meta list comes in **two sizes** - small and regular.
### Usage -#### In the page header +#### In the Page Header Page headers use meta list to provide secondary/meta information just below the title. ![Meta list in the page header](./images/metaList-3.png)
-#### In a table cell +#### In a Table Cell There is a cell variant in the table which uses meta list to show secondary/meta information. ![Meta list in a table](./images/metaList-4.png) diff --git a/docs/src/pages/components/modals/interactions.mdx b/docs/src/pages/components/modals/interactions.mdx index 9bc70a3d7f..7989339390 100644 --- a/docs/src/pages/components/modals/interactions.mdx +++ b/docs/src/pages/components/modals/interactions.mdx @@ -4,7 +4,7 @@ import modal15 from './images/modal-15.gif' import modal16 from './images/modal-16.gif' import modal17 from './images/modal-17.gif' -### Opening the modal +### Opening the Modal @@ -86,9 +86,9 @@ import modal17 from './images/modal-17.gif'
Messages vs Toasts Meta list in the page header

-### Closing the modal +### Closing the Modal -#### When the action takes the users back +#### When the Action Takes the Users Back @@ -171,7 +171,7 @@ import modal17 from './images/modal-17.gif'
-#### When the action takes the users forward +#### When the Action Takes the Users Forward @@ -261,7 +261,7 @@ import modal17 from './images/modal-17.gif'

-##### Center content +##### Center Content @@ -302,7 +302,7 @@ import modal17 from './images/modal-17.gif'
-##### Container (White background) +##### Container (White Background)
@@ -344,7 +344,7 @@ import modal17 from './images/modal-17.gif'

-##### Center content +##### Center Content
@@ -385,7 +385,7 @@ import modal17 from './images/modal-17.gif'
-##### Container (White background) +##### Container (White Background)
diff --git a/docs/src/pages/components/modals/usage.mdx b/docs/src/pages/components/modals/usage.mdx index 086a799073..f61a43d42b 100644 --- a/docs/src/pages/components/modals/usage.mdx +++ b/docs/src/pages/components/modals/usage.mdx @@ -15,13 +15,13 @@ If the information or interactions are more complex, consider using a side sheet
-#### Standard modal +#### Standard Modal Standard modals appear in the center of the screen along with an overlay which prevents users from interacting with the background. -#### Full screen modal +#### Full Screen Modal Full screen modals cover the entire screen. They are used when you want the complete undivided attention of users. The prime use case is when the users create a new entity because in such cases the context with the content behind the modal is typically not required. @@ -31,7 +31,7 @@ They should not be used for confirmations, critical alerts or to present informa ### Variants -#### Standard modal +#### Standard Modal ##### Dialogs @@ -51,7 +51,7 @@ Confirmation dialogs are used to take confirmation from users before taking any -##### Input modals +##### Input Modals Input modals are used to present forms to users such as input fields, dropdowns, etc. @@ -59,7 +59,7 @@ Input modals are used to present forms to users such as input fields, dropdowns, ### Sizes -#### Standard modal +#### Standard Modal Standard modal comes in **3 sizes** basis on the breakpoints - @@ -124,7 +124,7 @@ Standard modal comes in **3 sizes** basis on the breakpoints -

-#### Full screen modal +#### Full Screen Modal The content of a full screen modal comes in **2 sizes** basis on the breakpoints - @@ -179,7 +179,7 @@ The content of a full screen modal comes in **2 sizes** basis on the breakpoints

-##### Standard modal +##### Standard Modal
@@ -225,7 +225,7 @@ The content of a full screen modal comes in **2 sizes** basis on the breakpoints

-##### Full-screen modal +##### Full-Screen Modal
@@ -249,7 +249,7 @@ The content of a full screen modal comes in **2 sizes** basis on the breakpoints ### Configurations -#### Standard modal +#### Standard Modal @@ -273,7 +273,7 @@ The content of a full screen modal comes in **2 sizes** basis on the breakpoints

-#### Full-screen modal +#### Full-Screen Modal @@ -300,7 +300,7 @@ The content of a full screen modal comes in **2 sizes** basis on the breakpoints
-#### Positioning and scaling of modals +#### Positioning and Scaling of Modals Modals are vertically center-aligned. They scale vertically in case the content is long enough, until reaching 64px from the screen’s top and bottom edge. In those cases, a scroll is introduced as well. @@ -314,7 +314,7 @@ Modals are vertically center-aligned. They scale vertically in case the content

-#### Default focus on secondary action +#### Default Focus on Secondary Action By default, the **secondary** action should be in its focused state when the modal appears. This helps to avoid the trigger of primary action (especially the delete action) by accidental pressing of Enter key. @@ -325,7 +325,7 @@ By default, the **secondary** action should be in its focused state when the mod

-#### The order of the action buttons +#### The Order of the Action Buttons The primary and secondary actions appear at the bottom right in a modal. However, the order in which they appear has to be the same regardless of the nature of the primary action (create, delete, etc.). Listing primary actions last improves the flow, because the modal then [“ends” with its conclusion](https://www.nngroup.com/articles/ok-cancel-or-cancel-ok/). Also, keeping the order the same makes the position of actions predictable. @@ -334,7 +334,7 @@ The primary and secondary actions appear at the bottom right in a modal. However

-#### Using in conjunction with the message component +#### Using in Conjunction With the Message Component Message component can be used in the body of the modal in case the need arises. It should always **appear at the top** in the body section. @@ -365,7 +365,7 @@ The dividers in the header and the footer should **only** be shown when the cont

-#### Scrollable content +#### Scrollable Content You should avoid adding scrollable content in a modal as they are meant to be used to convey concise information, alerts, and confirmations. But there can be cases when scrolling is unavoidable. @@ -375,13 +375,13 @@ Few points to keep in mind then - - To indicate that the content can be scrolled, use a scrollbar and show the dividers in both the header and the footer component. This helps to convey that the header and the footer are fixed. -#### Closing the modal +#### Closing the Modal Clicking outside the modal should **not** cancel the current process and close the modal by default. However, this behavior is configurable and can be turned **on** for dialogs only since they just present information and any sort of user interaction is not required there. Pressing **ESC** key on the keyboard does the same.
-#### Using forms +#### Using Forms Forms with simple inputs can be used inside a modal. For more complex forms and interactions, **side sheets** should be considered. @@ -398,22 +398,22 @@ Steppers can also be used in a modal as long as the content is concise and short

-#### Full screen modals +#### Full Screen Modals
-##### Lifetime of a full screen modal +##### Lifetime of a Full Screen Modal Full screen modal is initialized and displayed when a user clicks on a “Create …” entity button. It is de-initialized and closed as soon as that entity is created. **DO NOT** use full screen modals for workflows involving multiple steps. -##### Two steps workflow - Back button +##### Two Steps Workflow - Back Button To maintain simplicity, full screen modals are only supposed to have 1 step. But even then, there can be cases when a two steps workflow is required in order to create an entity. In that case, the header of the full screen modal can be updated to include a back button. -##### Action buttons +##### Action Buttons Just like the default modals, the action buttons appear at the bottom right and follows the same order rules. @@ -424,7 +424,7 @@ Just like the default modals, the action buttons appear at the bottom right and

-#### Scrolling behavior +#### Scrolling Behavior Unlike default modals, the header and footer are **not fixed** in the full screen modals. So the content goes beneath the fold like this - diff --git a/docs/src/pages/components/navigationHorizontal/interactions.mdx b/docs/src/pages/components/navigationHorizontal/interactions.mdx index 0198e680d0..e94af6ec24 100644 --- a/docs/src/pages/components/navigationHorizontal/interactions.mdx +++ b/docs/src/pages/components/navigationHorizontal/interactions.mdx @@ -1,12 +1,12 @@ import navigationhoriz3 from './images/navigationhoriz-3.gif' -### Navigating to another item +### Navigating to Another Item

-##### Source item +##### Source Item
@@ -42,7 +42,7 @@ import navigationhoriz3 from './images/navigationhoriz-3.gif'
-##### Destination item +##### Destination Item
@@ -79,7 +79,7 @@ import navigationhoriz3 from './images/navigationhoriz-3.gif'

-##### Source body +##### Source Body
@@ -119,7 +119,7 @@ import navigationhoriz3 from './images/navigationhoriz-3.gif'

-##### Destination body +##### Destination Body
diff --git a/docs/src/pages/components/navigationVertical/interactions.mdx b/docs/src/pages/components/navigationVertical/interactions.mdx index 41ada3c462..e1ef456952 100644 --- a/docs/src/pages/components/navigationVertical/interactions.mdx +++ b/docs/src/pages/components/navigationVertical/interactions.mdx @@ -216,7 +216,7 @@ import navigationvertical20 from "./images/navigationvertical-20.gif"

-##### Item background +##### Item Background
@@ -771,7 +771,7 @@ import navigationvertical20 from "./images/navigationvertical-20.gif"

-##### Item background +##### Item Background
@@ -806,13 +806,13 @@ import navigationvertical20 from "./images/navigationvertical-20.gif"

-### Navigating to another item +### Navigating to Another Item

-##### Source item +##### Source Item
@@ -847,7 +847,7 @@ import navigationvertical20 from "./images/navigationvertical-20.gif"

-##### Destination item +##### Destination Item
@@ -886,7 +886,7 @@ import navigationvertical20 from "./images/navigationvertical-20.gif"

-##### Source body +##### Source Body
@@ -927,7 +927,7 @@ import navigationvertical20 from "./images/navigationvertical-20.gif"

-##### Destination body +##### Destination Body
diff --git a/docs/src/pages/components/navigationVertical/usage.mdx b/docs/src/pages/components/navigationVertical/usage.mdx index a64202db9f..972c627242 100644 --- a/docs/src/pages/components/navigationVertical/usage.mdx +++ b/docs/src/pages/components/navigationVertical/usage.mdx @@ -106,7 +106,7 @@ Rounded variant comes handy when the navigation is not at the extreme left. Henc
-#### Overflow behavior +#### Overflow Behavior In case of overflow, the label of the nav items will get truncated and can be viewed inside a tooltip on hover. @@ -115,13 +115,13 @@ In case of overflow, the label of the nav items will get truncated and can be vi
-#### Maximum levels +#### Maximum Levels To reduce the unnecessary visual clutter, a maximum of two levels are supported in the vertical navigation. If more than two levels are needed, one can use tabs, horizontal navigation, or secondary navigation inside the page.
-#### Collapsing a panel +#### Collapsing a Panel
@@ -169,13 +169,13 @@ The icons of children will be visible in the collapsed panel only if the parent

-#### Hover on collapsed panel +#### Hover on Collapsed Panel Hovering over the collapsed panel expands it in overlay mode. -#### Scrolling when the nav overflows +#### Scrolling When the Nav Overflows The toggle panel button is differentiated with a shadow and a divider if the content inside the nav panel becomes scrollable. @@ -224,7 +224,7 @@ In this case, the section title and the subsequent divider will disappear when t

-#### Secondary nav panel +#### Secondary Nav Panel The width of the nav items here will be decided on the basis of the grid that the particular screen size supports. @@ -248,7 +248,7 @@ If the secondary navigation panel is floating, the nav items used will be having
-#### Expand/Collapse Parent Item +#### Expand/Collapse Parent Item Clicking over the collapsed parent item for the first time will expand the particular parent item. Clicking again will collapse the parent item. @@ -271,7 +271,7 @@ The navigation panel can be customized to accommodate content other than the nav

-#### Dynamically adding a new item +#### Dynamically Adding a New Item Navigation items can be added dynamically to the panel on the go. Add item component always appears in the bottom. diff --git a/docs/src/pages/components/pageHeaders/usage.mdx b/docs/src/pages/components/pageHeaders/usage.mdx index cf65439067..238f212a1a 100644 --- a/docs/src/pages/components/pageHeaders/usage.mdx +++ b/docs/src/pages/components/pageHeaders/usage.mdx @@ -19,12 +19,12 @@ Level 1 header comes next in the navigation hierarchy. Users typically arrive he This header stays the same in structure when a user navigates further down to subsequent levels i.e. Level 2, Level 3, and so on. -##### Level 1 with back button +##### Level 1 With Back Button The back button in header takes you to the previous page. -##### Level 1 with breadcrumb +##### Level 1 With Breadcrumb The breadcrumb in header helps you traverse across different levels of page hierarchy. @@ -32,7 +32,7 @@ The breadcrumb in header helps you traverse across different levels of page hier ### Variants Page header comes in **3 variants** - with navigation, with tabs and with steppers. Steppers are not required in Level 0 typically since the process of creating an entity lies in Level 1 and beyond. -#### With navigation +#### With Navigation Level 0, level 1 and level 1 and beyond page headers can accommodate horizontal navigation which allows users to navigate through the different sub-pages easily. Any variant of horizontal navigation (with icon & with count) can be used here. ##### Level 0 @@ -46,7 +46,7 @@ Level 0, level 1 and level 1 and beyond page headers can accommodate horizontal **Level 1 with breadcrumb** -#### With tabs +#### With Tabs Level 0, level 1 and level 1 and beyond page headers can accommodate tabs right beneath the page title to segregate the related content. ##### Level 0 @@ -60,7 +60,7 @@ Level 0, level 1 and level 1 and beyond page headers can accommodate tabs right **Level 1 with breadcrumb** -#### With steppers +#### With Steppers In order to show a multi-step process, page headers can accommodate steppers inside them. When using steppers, the primary action is typically positioned within the body, while if there is any action that is for the whole process it will be accommodated in the page header itself. @@ -114,7 +114,7 @@ Generally, steppers are not required at Level 0 since the process of creating an
### Usage -#### Level 1 and beyond +#### Level 1 and Beyond Page header can show multiple levels of hierarchy using different levels of breadcrumbs within the header in Level 1. ![A Level 1 page header with steppers](./images/pageHeaders-1.png) @@ -122,7 +122,7 @@ Page header can show multiple levels of hierarchy using different levels of brea
-#### Header with back button +#### Header With Back Button It is recommended to use a back button in the header for less than 3 levels to save space. ![Header with back button](./images/header-with-back-button.png) @@ -130,7 +130,7 @@ It is recommended to use a back button in the header for less than 3 levels to s
-#### Tooltip on back button +#### Tooltip on Back Button Back button displays the title of the previous page in a tooltip on hover. ![Tooltip on back button](./images/tooltip-on-back-button.png) @@ -148,7 +148,7 @@ However, it is recommended to not use a divider if the content below is in a car
-#### Spacing with and without divider +#### Spacing With and Without Divider Spacing of 12px is given below header when a divider is present, otherwise no spacing required. ![Spacing with and without header](./images/spacing-with-and-without-header.png) @@ -161,7 +161,7 @@ By default, only the tabs appear beneath the page title. But if there is a width **Note**: Avoid using steppers when there is a width constraint as entity creation doesn’t usually take place in such conditions. -#### Recommended navigation items +#### Recommended Navigation Items It is recommended to use less than three navigation items when there are numerous actions on the right side of header. ![Recommended navigation items](./images/recommended-navigation-items.png) diff --git a/docs/src/pages/components/pagination/usage.mdx b/docs/src/pages/components/pagination/usage.mdx index 7db94a0a8d..d002af3346 100644 --- a/docs/src/pages/components/pagination/usage.mdx +++ b/docs/src/pages/components/pagination/usage.mdx @@ -82,7 +82,7 @@ Pagination control usually appears inside a card with a table or list. It is hor Use pagination over infinite scroll so that the user can navigate to an item’s detail page and return back to the same page. -#### Selection with pagination +#### Selection With Pagination When using pagination, the "Select all" control should select only the visible items. diff --git a/docs/src/pages/components/pills/usage.mdx b/docs/src/pages/components/pills/usage.mdx index 9433975ca5..d17012bdb0 100644 --- a/docs/src/pages/components/pills/usage.mdx +++ b/docs/src/pages/components/pills/usage.mdx @@ -22,7 +22,7 @@ Solid Pill is used to highlight number of items in reference to a particular com Subtle Pill is used when many pills are used in reference to a group of components. In that case, solid pills become a bit overwhelming. eg Pills in vertical navigation items. -#### Subtle style +#### Subtle Style Subtle style is favorable when a lot of pills have to be used to show count against entities. In that case, solid style becomes a bit overwhelming e.g. count in vertical navigation items.
diff --git a/docs/src/pages/components/popover/interactions.mdx b/docs/src/pages/components/popover/interactions.mdx index f73573bec1..630fef355e 100644 --- a/docs/src/pages/components/popover/interactions.mdx +++ b/docs/src/pages/components/popover/interactions.mdx @@ -1,7 +1,7 @@ import popover8 from './images/popover-8.gif' import popover9 from './images/popover-9.gif' -## Opening popover +## Opening Popover @@ -47,7 +47,7 @@ import popover9 from './images/popover-9.gif'

-## Closing popover +## Closing Popover diff --git a/docs/src/pages/components/popover/usage.mdx b/docs/src/pages/components/popover/usage.mdx index ffc2e6bbfb..505044fcb9 100644 --- a/docs/src/pages/components/popover/usage.mdx +++ b/docs/src/pages/components/popover/usage.mdx @@ -100,7 +100,7 @@ The **preferred and default side is the bottom**. Popovers use smart positioning
-#### Padding inside popover +#### Padding Inside Popover It is recommended to keep an overall padding of 16px inside the popover. @@ -110,7 +110,7 @@ It is recommended to keep an overall padding of 16px inside the popover.
-#### Popover as tooltip +#### Popover as Tooltip
@@ -121,7 +121,7 @@ It is recommended to keep an overall padding of 16px inside the popover.

-#### Popover as a floating component +#### Popover as a Floating Component
@@ -132,15 +132,15 @@ It is recommended to keep an overall padding of 16px inside the popover.

-#### Popover with actions +#### Popover With Actions -#### Popover with inputs +#### Popover With Inputs -#### Popover as a dropdown +#### Popover as a Dropdown
@@ -151,7 +151,7 @@ It is recommended to keep an overall padding of 16px inside the popover.

-#### Popover as a menu +#### Popover as a Menu
diff --git a/docs/src/pages/components/progressIndicators/code.mdx b/docs/src/pages/components/progressIndicators/code.mdx index 7be0b26d82..4680027234 100644 --- a/docs/src/pages/components/progressIndicators/code.mdx +++ b/docs/src/pages/components/progressIndicators/code.mdx @@ -2,13 +2,13 @@
-#### Progress bar +#### Progress Bar -#### Progress ring +#### Progress Ring @@ -20,7 +20,7 @@ -#### Skeleton loader +#### Skeleton Loader diff --git a/docs/src/pages/components/progressIndicators/interactions.mdx b/docs/src/pages/components/progressIndicators/interactions.mdx index b84bc48c84..5e45d5e13a 100644 --- a/docs/src/pages/components/progressIndicators/interactions.mdx +++ b/docs/src/pages/components/progressIndicators/interactions.mdx @@ -1,6 +1,6 @@ ### Progressing -#### Progress bar +#### Progress Bar
@@ -35,7 +35,7 @@

-#### Progress ring +#### Progress Ring
diff --git a/docs/src/pages/components/progressIndicators/usage.mdx b/docs/src/pages/components/progressIndicators/usage.mdx index 3fe27d60c6..bb466bd430 100644 --- a/docs/src/pages/components/progressIndicators/usage.mdx +++ b/docs/src/pages/components/progressIndicators/usage.mdx @@ -12,7 +12,7 @@ Progress indicator is a key part of any user interface screen. It helps users be
-#### Progress bar +#### Progress Bar Goes from 0 to 100 linearly. @@ -45,7 +45,7 @@ Skeleton loaders are used if there is a defined template for the data that is go

-#### Progress bar +#### Progress Bar ![Structure of progress bar](./images/progressbar-structure.png)

@@ -70,7 +70,7 @@ Skeleton loaders are used if there is a defined template for the data that is go

-#### Progress ring +#### Progress Ring ![Structure of progress ring](./images/progressring-structure.png)

@@ -151,7 +151,7 @@ Skeleton loaders are used if there is a defined template for the data that is go
-#### Nature of the process +#### Nature of the Process
@@ -175,7 +175,7 @@ When the time taken to load a process is determinable.
-##### Indeterminate +##### Indeterminate When the time taken to load a process cannot be determined. @@ -204,7 +204,7 @@ When the time taken to load a process cannot be determined.

-#### Skeleton loaders +#### Skeleton Loaders
@@ -218,7 +218,7 @@ Skeleton loaders imitate each component of a cell separately at the time of load
-##### Page with Static vs Dynamic Content +##### Page With Static vs Dynamic Content ![Static vs Dynamic content](./images/progressindicators-7.png) Static vs Dynamic content diff --git a/docs/src/pages/components/radio/usage.mdx b/docs/src/pages/components/radio/usage.mdx index a1fc608e53..2f744d63b0 100644 --- a/docs/src/pages/components/radio/usage.mdx +++ b/docs/src/pages/components/radio/usage.mdx @@ -14,7 +14,7 @@ keywords: ['Option', 'Choice'] -#### With help text +#### With Help Text The radio button can have a help text below the label to provide some extra information about the particular option. The help text will always be aligned to the label. Clicking over the help text will not change the state of radio. @@ -93,7 +93,7 @@ Radio comes in two sizes: small and regular. ### Usage
-#### Radio group +#### Radio Group Radio group consists of a list of multiple options, with a label on the top. The label should clearly state the grouping category or the action to perform. @@ -107,7 +107,7 @@ The radio buttons in a group can be aligned either vertically or horizontally. H -#### Overflow Behaviour +#### Overflow Behaviour If the label or the help text with the radio component overflows, wrap it to the next line but make sure that the control and the label are top aligned. diff --git a/docs/src/pages/components/richTextEditor/usage.mdx b/docs/src/pages/components/richTextEditor/usage.mdx index 4142d360f0..4644470c57 100644 --- a/docs/src/pages/components/richTextEditor/usage.mdx +++ b/docs/src/pages/components/richTextEditor/usage.mdx @@ -126,7 +126,7 @@ Rich text editor also provides options to add media and other useful entities su
-#### Hover on options bar items +#### Hover on Options Bar Items ![Hovering on options bar items](./images/richtext-1.png) Hovering on options bar items @@ -134,7 +134,7 @@ Rich text editor also provides options to add media and other useful entities su
-#### Selection on options bar items +#### Selection on Options Bar Items ![Selection on options bar items](./images/richtext-2.png) Selection on options bar items @@ -142,7 +142,7 @@ Rich text editor also provides options to add media and other useful entities su
-#### Inserting images +#### Inserting Images Users can insert images in the rich text editor using the image button from the options bar. @@ -152,7 +152,7 @@ Users can insert images in the rich text editor using the image button from the
-#### Deleting images +#### Deleting Images Users can delete any previously added images by **either using backspace or from the selection popover**. As the name suggests, selection popover appears when **a user clicks on the image**. @@ -162,7 +162,7 @@ Users can delete any previously added images by **either using backspace or from
-#### Adding personalized content +#### Adding Personalized Content Rich text editor comes with the option to add personalized content. This can be done either by **using the personalize button** from the options bar **or by pressing '@' on the keyboard**. Doing @@ -175,7 +175,7 @@ can be cleared from the editor if needed.
-#### Adding hyperlinks +#### Adding Hyperlinks Users can add hyperlinks using the link button from the options bar. @@ -185,7 +185,7 @@ Users can add hyperlinks using the link button from the options bar.
-##### Editing the hyperlink +##### Editing the Hyperlink Users can edit the hyperlink using the options popover which can be revealed by **clicking on the link**. diff --git a/docs/src/pages/components/sara/usage.mdx b/docs/src/pages/components/sara/usage.mdx index f5ce0a0e5b..386f17e405 100644 --- a/docs/src/pages/components/sara/usage.mdx +++ b/docs/src/pages/components/sara/usage.mdx @@ -139,14 +139,14 @@ Sara Sparkle has **4 states** - default, listening, short processing and long pr ### Usage -#### Sara as agent +#### Sara as Agent Use Sara where users interact directly with the AI agent, such as through chat or voice conversations. ![Sara as agent](./images/sara-agent.png) Sara as agent -#### Sara Sparkle for AI assisted actions +#### Sara Sparkle for AI Assisted Actions Use Sara Sparkle for actions assisted or powered by AI like auto-filling, content generation, or modification. These actions can either be direct or indirect. @@ -159,32 +159,32 @@ The Progress Indicator provides real-time feedback on the AI's status, showing w -#### Horizontal vs Vertical Arrangement of progress Indicator +#### Horizontal vs Vertical Arrangement of Progress Indicator -##### Horizontal arrangement +##### Horizontal Arrangement Horizontal arrangement is ideal for compact spaces where horizontal space is abundant, providing a clear and concise layout. ![Horizontal arrangement](./images/horizontal-arrangement.png) Horizontal arrangement -##### Vertical arrangement +##### Vertical Arrangement Vertical arrangement is ideal for layouts where vertical space is preferred or when emphasizing the icon or progress text is necessary. ![Vertical arrangement](./images/vertical-arrangement.png) Vertical arrangement -#### Long Processing vs Short Processing in progress indicator +#### Long Processing vs Short Processing in Progress Indicator -##### Long processing +##### Long Processing The long processing variant is used for tasks that require a substantial duration to complete. ![Long Processing](./images/long-processing.png) Long Processing -##### Short processing +##### Short Processing Short processing variant is used for concise processes. diff --git a/docs/src/pages/components/select/interactions.mdx b/docs/src/pages/components/select/interactions.mdx index 25842b44b6..4f1bd702a4 100644 --- a/docs/src/pages/components/select/interactions.mdx +++ b/docs/src/pages/components/select/interactions.mdx @@ -2,7 +2,7 @@
-#### Single select +#### Single Select @@ -110,7 +110,7 @@

-#### Multi-select +#### Multi-Select
diff --git a/docs/src/pages/components/select/usage.mdx b/docs/src/pages/components/select/usage.mdx index 73f3ce00d6..fb82cec23f 100644 --- a/docs/src/pages/components/select/usage.mdx +++ b/docs/src/pages/components/select/usage.mdx @@ -14,7 +14,7 @@ Select displays a list of options for users to choose from. It provides the opti ### Variants -#### Button variants +#### Button Variants The custom button for select comes with a few variants - @@ -24,13 +24,13 @@ The standard variant consists of just text which changes its state when one or m -##### With icon +##### With Icon This variant comes with an icon in the left, preceding the text to provide additional cues regarding the type of the options. -##### Inline label +##### Inline Label This variant comes with a label preceding the text and can be used at places where there is a space crunch. @@ -38,7 +38,7 @@ This variant comes with a label preceding the text and can be used at places whe
-#### Option variants +#### Option Variants The options in a select can be single select or multi-select. They come with a few variants - @@ -48,25 +48,25 @@ This variant comes with just text. -##### With icon +##### With Icon This variant comes with an icon preceding the text. -##### With sub info +##### With Sub Info This variant comes with sub-info beneath the text. -##### With checkbox +##### With Checkbox This variant comes with the support of checkboxes to select multiple options. The options here can also have sub info just like the previous variant. -##### Add option +##### Add Option This variant allows you to add an option to the list in select. @@ -84,14 +84,14 @@ Select trigger comes in 2 sizes - small and regular. ### States -#### Button states +#### Button States The custom button comes in 5 states - default, hover, focus, active and disabled. ![Button states](./images/select-1.png)
-#### Option item states +#### Option Item States Option items come in 5 states - default, hover, active, focus and disabled. In addition to the aforementioned states, option items also have the selected-default, selected-hover, selected-active, selected-focus and selected-disabled state. @@ -110,7 +110,7 @@ Select is made up of 2 key components - a custom **button** which acts as a trig
-#### Trigger (Select button) +#### Trigger (Select Button) @@ -139,7 +139,7 @@ Select is made up of 2 key components - a custom **button** which acts as a trig

-#### Option item +#### Option Item ![Option item states](./images/select-3.png) @@ -222,7 +222,7 @@ Select is made up of 2 key components - a custom **button** which acts as a trig
-#### Option item +#### Option Item
@@ -306,7 +306,7 @@ Select can be offered with a search functionality. In that case, the search inpu -#### Overflow behavior +#### Overflow Behavior ##### Trigger @@ -325,7 +325,7 @@ If the label exceeds the available space, it will be truncated and can be seen i
-#### Width of popover +#### Width of Popover While the popover's width is flexible and can vary, it is advisable to maintain a size that is equal to or larger than the trigger of select. @@ -334,7 +334,7 @@ While the popover's width is flexible and can vary, it is advisable to maintain
-#### Showing items inside select +#### Showing Items Inside Select The select popover can showcase an unlimited number of items. However, for better user experience when dealing with a large number of items, it's advisable to adopt best practices such as integrating a search feature for effortless navigation to handle a large number of options efficiently. @@ -342,7 +342,7 @@ The select popover can showcase an unlimited number of items. However, for bette
-#### Grouping options +#### Grouping Options Select options can be grouped under a section using a sub header, if needed. @@ -353,7 +353,7 @@ Select options can be grouped under a section using a sub header, if needed.
-#### Label position +#### Label Position The label provides a better understanding of what kind of selection is expected. Labels can be placed either on the top of the select or can be placed inline with the value or placeholder of the select. @@ -363,7 +363,7 @@ The label provides a better understanding of what kind of selection is expected.
-#### Help text +#### Help Text Help text can be provided beneath the select trigger to add context regarding the type of input required just like the input fields. @@ -371,7 +371,7 @@ Help text can be provided beneath the select trigger to add context regarding th
-#### Actions in footer +#### Actions in Footer Using network resources on each checkbox selection in a select can be quite expensive. Select offers the option of incorporating actions in the footer in case of multiple selection, thereby facilitating a single API call upon clicking the Add/Apply button. @@ -379,7 +379,7 @@ Using network resources on each checkbox selection in a select can be quite expe
-#### Custom options +#### Custom Options Select can also accommodate custom options inside it. @@ -396,7 +396,7 @@ It is recommended to use select if the number of multi-select options exceeds 5
-#### Adding option in select +#### Adding Option in Select In certain cases select allows you to add your own option to the list, even if it isn’t available yet but will be needed in the future. @@ -405,7 +405,7 @@ In certain cases select allows you to add your own option to the list, even if i
-#### Adding option in select vs Input in combobox +#### Adding Option in Select vs Input in Combobox It is recommended to use select when the users are encouraged to exercise caution and be mindful when adding options whereas in combobox the users are allowed to type in their value without any obstruction. diff --git a/docs/src/pages/components/sidesheet/interactions.mdx b/docs/src/pages/components/sidesheet/interactions.mdx index b77c3f1127..8106043559 100644 --- a/docs/src/pages/components/sidesheet/interactions.mdx +++ b/docs/src/pages/components/sidesheet/interactions.mdx @@ -3,7 +3,7 @@ import sidesheet8 from './images/sidesheet-8.gif' import sidesheet9 from './images/sidesheet-9.gif' import sidesheet10 from './images/sidesheet-10.gif' -### Opening Side sheet +### Opening Side Sheet
@@ -12,7 +12,7 @@ import sidesheet10 from './images/sidesheet-10.gif'

-#### Side sheet +#### Side Sheet
@@ -179,7 +179,7 @@ import sidesheet10 from './images/sidesheet-10.gif'

-### Closing Side sheet +### Closing Side Sheet
@@ -188,7 +188,7 @@ import sidesheet10 from './images/sidesheet-10.gif'

-#### Side sheet +#### Side Sheet
@@ -354,7 +354,7 @@ import sidesheet10 from './images/sidesheet-10.gif'

-### Progressing to the next step +### Progressing to the Next Step
@@ -534,7 +534,7 @@ import sidesheet10 from './images/sidesheet-10.gif'

-### Returning to the previous step +### Returning to the Previous Step
diff --git a/docs/src/pages/components/sidesheet/usage.mdx b/docs/src/pages/components/sidesheet/usage.mdx index d2c02dcb91..dd420cc59e 100644 --- a/docs/src/pages/components/sidesheet/usage.mdx +++ b/docs/src/pages/components/sidesheet/usage.mdx @@ -139,12 +139,12 @@ The large side sheet takes **10 columns** in the grid and starts from left side
-#### Side sheet vs Page +#### Side Sheet vs Page - Side sheets are used to present a great amount of information as a part of users' primary task while **maintaining the context** with the background content. So if no context is required, go for a new page instead of a side sheet. - Side sheet should **NOT** be used as a replacement of a new page when the page needs to be accessible by a URL. Avoid showing a side sheet based on a URL. -#### Default vs Large side sheet +#### Default vs Large Side Sheet The default side sheet covers most of the use cases but for the cases when the content is **quite complex and needs a wider area, use the large variant**. @@ -154,7 +154,7 @@ The default side sheet covers most of the use cases but for the cases when the c
-#### Position of action buttons +#### Position of Action Buttons The action buttons appear in the **left side of the sheet** and follows the **reverse order** as the modals to keep the position of primary action predictable. Also, @@ -194,11 +194,11 @@ Just like the modals, the dividers in the header and the footer should **ONLY**
-#### Closing the side sheet +#### Closing the Side Sheet Clicking outside the sheet should **NOT** cancel the current process and close it by default. -#### Multi step workflow +#### Multi Step Workflow Unlike modals, side sheets can have multi steps workflow. Instead of showing multiple sheets, the entire workflow happens within the scope of a single side sheet. A user can navigate through the back stack using the **Back button** at the top left. diff --git a/docs/src/pages/components/slider/interactions.mdx b/docs/src/pages/components/slider/interactions.mdx index 4b41aed6c5..d6470dc66c 100644 --- a/docs/src/pages/components/slider/interactions.mdx +++ b/docs/src/pages/components/slider/interactions.mdx @@ -30,7 +30,7 @@ Initial value selected

-#### New default +#### New Default When clicked outside diff --git a/docs/src/pages/components/slider/usage.mdx b/docs/src/pages/components/slider/usage.mdx index 8763077f9b..fb6c5dfc60 100644 --- a/docs/src/pages/components/slider/usage.mdx +++ b/docs/src/pages/components/slider/usage.mdx @@ -10,13 +10,13 @@ keywords: ['Range', 'Rangeinput'] Based on usage, sliders are of two types - -#### Default slider +#### Default Slider The default slider can be used whenever selection of a single value is required out of a range. -#### Range slider +#### Range Slider Range slider is used if the user wants to select a range instead of a single value. @@ -26,14 +26,14 @@ Range slider is used if the user wants to select a range instead of a single val Based on selection, sliders have two variants - -#### Discrete slider +#### Discrete Slider In the case of discrete slier, while dragging slider knob will snap from one tick mark to the other. No values between two tick marks can be selected. -#### Free slider +#### Free Slider In the case of free slider, while dragging slider knob can move to each and every intermediate value possible. Values between tick marks can also be selected. @@ -95,7 +95,7 @@ Values between tick marks can also be selected. ### Usage -#### Pairing with metric inputs +#### Pairing With Metric Inputs Use slider with metric inputs for better accessibility in the case where **choosing a specific value** is important. diff --git a/docs/src/pages/components/statusHint/usage.mdx b/docs/src/pages/components/statusHint/usage.mdx index b90e4bc15a..c8a8130e6f 100644 --- a/docs/src/pages/components/statusHint/usage.mdx +++ b/docs/src/pages/components/statusHint/usage.mdx @@ -15,7 +15,7 @@ Status hint comes in 5 Appearances - -#### Warning +#### Warning @@ -91,11 +91,11 @@ Status hint comes in 5 Appearances -

-### Usage +### Usage
-#### Status hint vs Badge +#### Status Hint vs Badge Status hint is used to display the status of a resource while a badge is used as a label to tag entities. diff --git a/docs/src/pages/components/steppers/interactions.mdx b/docs/src/pages/components/steppers/interactions.mdx index eb911cbbec..4e15fe05e4 100644 --- a/docs/src/pages/components/steppers/interactions.mdx +++ b/docs/src/pages/components/steppers/interactions.mdx @@ -1,14 +1,14 @@ import stepper7 from './images/stepper-7.gif' import stepper8 from './images/stepper-8.gif' -### Moving to next step +### Moving to Next Step

-#### Source stepper +#### Source Stepper
@@ -97,7 +97,7 @@ import stepper8 from './images/stepper-8.gif'

-#### Destination stepper +#### Destination Stepper
@@ -196,7 +196,7 @@ import stepper8 from './images/stepper-8.gif'
-#### Source body +#### Source Body
@@ -291,7 +291,7 @@ import stepper8 from './images/stepper-8.gif'
-#### Destination body +#### Destination Body
@@ -404,14 +404,14 @@ import stepper8 from './images/stepper-8.gif'
-### Moving to the previous step +### Moving to the Previous Step

-#### Source stepper +#### Source Stepper
@@ -500,7 +500,7 @@ import stepper8 from './images/stepper-8.gif'

-#### Destination stepper +#### Destination Stepper
@@ -599,7 +599,7 @@ import stepper8 from './images/stepper-8.gif'
-#### Source body +#### Source Body
@@ -694,7 +694,7 @@ import stepper8 from './images/stepper-8.gif'
-#### Destination body +#### Destination Body
diff --git a/docs/src/pages/components/steppers/usage.mdx b/docs/src/pages/components/steppers/usage.mdx index b0cea71b37..e91161c533 100644 --- a/docs/src/pages/components/steppers/usage.mdx +++ b/docs/src/pages/components/steppers/usage.mdx @@ -80,7 +80,7 @@ The stepper can be used at different places to serve different purposes. The ste
-#### Navigating through steps +#### Navigating Through Steps Users cannot visit any upcoming steps however they can visit any previous steps given the step was done or skipped. @@ -171,7 +171,7 @@ The actions specific to any step will be located at the bottom of the content of

-#### Skipping a step +#### Skipping a Step A stepper can also have a skippable/optional step. Users can skip the step for the time being and can navigate back to it, to fill it again before completing the progress. @@ -183,7 +183,7 @@ In case of an optional step, an additional step-specific action "Skip" gets adde

-##### Skipping the last step +##### Skipping the Last Step In case the last step is supposed to be optional, relabel the Skip button to **Skip and Finish**. diff --git a/docs/src/pages/components/switch/code.mdx b/docs/src/pages/components/switch/code.mdx index cb4036af4b..5a4fb39e29 100644 --- a/docs/src/pages/components/switch/code.mdx +++ b/docs/src/pages/components/switch/code.mdx @@ -1,4 +1,4 @@ -#### Live demo +#### Live Demo diff --git a/docs/src/pages/components/switch/interactions.mdx b/docs/src/pages/components/switch/interactions.mdx index f8c1f2bc8b..064e6c1688 100644 --- a/docs/src/pages/components/switch/interactions.mdx +++ b/docs/src/pages/components/switch/interactions.mdx @@ -1,7 +1,7 @@ import switch1 from './images/switch-1.gif' import switch2 from './images/switch-2.gif' -### Switch - Off to On state +### Switch - Off to On State
@@ -193,7 +193,7 @@ import switch2 from './images/switch-2.gif'

-### Switch - On to Off state +### Switch - On to Off State
diff --git a/docs/src/pages/components/switch/usage.mdx b/docs/src/pages/components/switch/usage.mdx index 2b1b7d224a..cd19d11f9b 100644 --- a/docs/src/pages/components/switch/usage.mdx +++ b/docs/src/pages/components/switch/usage.mdx @@ -79,7 +79,7 @@ Switch comes in **2 sizes** based on height and width - small and regular.
-#### Switch size +#### Switch Size The size of the switch depends on the other components appearing around it. If other components are regular in size, then the regular variant of switch should be used. The same goes for the tiny variant. @@ -97,7 +97,7 @@ The size of the switch depends on the other components appearing around it. If o
  • Whereas checkbox is just a selection of an option(s) and its execution requires another control, usually a button.
    • -##### Instant response +##### Instant Response The options that require an instant response are best selected using a switch. @@ -106,7 +106,7 @@ The options that require an instant response are best selected using a switch.
    -##### Multiple choices +##### Multiple Choices Checkboxes are preferred over switches when multiple options are available and the user has to select one or more options from them. Clicking multiple switches one by one and waiting to see results after each click takes extra time. diff --git a/docs/src/pages/components/table/interactions.mdx b/docs/src/pages/components/table/interactions.mdx index f30bc0d375..669152c4eb 100644 --- a/docs/src/pages/components/table/interactions.mdx +++ b/docs/src/pages/components/table/interactions.mdx @@ -15,7 +15,7 @@ Hover state doesn’t apply to a data table or a description list.

    -#### List item +#### List Item There can be instances when you want to show a specific action on hover when the table is used as a list. In that case, a button can be shown at the end. @@ -47,7 +47,7 @@ A Popover is used to show additional information about an exception.
    -#### Active state +#### Active State
    @@ -55,7 +55,7 @@ A Popover is used to show additional information about an exception.
    -#### Selected state +#### Selected State
    @@ -63,7 +63,7 @@ A Popover is used to show additional information about an exception.
    -#### Focused state +#### Focused State
    @@ -71,7 +71,7 @@ A Popover is used to show additional information about an exception.
    -#### Disabled state +#### Disabled State Disable items individually except the action icon button. *Not yet available in components.* diff --git a/docs/src/pages/components/table/usage.mdx b/docs/src/pages/components/table/usage.mdx index b854e39698..a7360360b1 100644 --- a/docs/src/pages/components/table/usage.mdx +++ b/docs/src/pages/components/table/usage.mdx @@ -9,7 +9,7 @@ keywords: ['Datagrid', 'Grid', 'List'] import table11 from './images/table-11.gif' ### Types -#### Resource table +#### Resource Table A table of resources where **a resource is an object in itself and has a detailed view linked to it.** @@ -18,27 +18,27 @@ Usually, there is only one resource table on a page. Think of a resource as - a To reduce noise, a resource table doesn’t have column dividers. -#### Data table +#### Data Table A data table is only meant for information consumption. It can occasionally contain minor actions such as copy, edit, remove, etc. Since the data can be dense, it can also have column dividers for subtle distinctions among columns. This way a data table also resembles spreadsheet-like tools which users are already familiar with. If in some rare cases the data in a cell needs to be edited, it is recommended to use inline editable fields in those cases. -#### Table as a list +#### Table as a List The table component can also be used to generate a list that has a simple structure than a table. A list is a subset of a table in a way that it does not contain the header row (and hence no columns). It comes in two options - -##### Option list +##### Option List A list of options where an option is an entity that a user can select/pick. -##### Description list +##### Description List A list of items containing simple information which is meant for consumption only. It can occasionally contain minor actions such as copy, edit, remove, etc. -### Sizes +### Sizes There are 3 types of sizes available for use which differ in the vertical padding and header row height -
    @@ -104,20 +104,20 @@ There are 3 types of sizes available for use which differ in the vertical paddin

    -#### Standard table +#### Standard Table -#### Compressed table +#### Compressed Table -#### Tight table +#### Tight Table This size is typically suited for information-dense data tables
    ### Usage -#### Table background +#### Table Background ##### Default Card The table is typically laid out on the default card, which helps in differentiating it from the background gray color. @@ -125,31 +125,31 @@ The table is typically laid out on the default card, which helps in differentiat Table on a default card
    -##### Flat card +##### Flat Card There can be cases when the table has to be used on a side sheet or a full-screen modal where the background is white. In that case, flat card should be used instead of the default card. ![Flat card should be used in case of table on a white background](./images/table-2.png) Flat card should be used in case of table on a white background
    -#### Nested table -##### With column extension +#### Nested Table +##### With Column Extension -##### With nested card +##### With Nested Card -#### Table header +#### Table Header The position of the header is fixed at the top so that the rows scroll between the header and footer. -##### Resource and Data table +##### Resource and Data Table The headers for these tables have a ‘Showing x items’ label and optional ‘Search’ input, filtering options. ![Table header in resource and data table](./images/table-3.png) Table header in resource and data table
    -##### Table as a list +##### Table as a List Checkbox precedes the 'Showing x items' label in the header row when using the table as a list since it doesn't have the column header row. As there are no columns, hence there is no option to Sort. In that case, use the Search + Sort variant of the header where there is a dropdown for sorting following the search input. @@ -157,7 +157,7 @@ As there are no columns, hence there is no option to Sort. In that case, use the Table header in table as a list
    -#### Disabled row in a table +#### Disabled Row in a Table To indicate a row is not interactive, the opacity of the row should be reduced to 40%. > Disabled state is kept at 40% opacity since it is closest to the disabled state of other components. @@ -169,7 +169,7 @@ To indicate a row is not interactive, the opacity of the row should be reduced t Disabled row in a table
    -#### Exception in a row +#### Exception in a Row An exception may be added to a specific row such as a failure or a warning. In that case, use the **Subtle badge component** and resize the list to have **8px** padding from the bottom. This behavior is not available out of the box and hence a custom cell should be used to design and build this. @@ -178,37 +178,37 @@ This behavior is not available out of the box and hence a custom cell should be Showing exception in a row using the badge component
    -#### Custom cell +#### Custom Cell Standard table cells cover the most frequent use cases. For the other use cases, a custom cell can be created by using the **Emply Cell component**. Minimum padding of **12px** from either side of the empty cell is maintained. ![Custom cell in the table](./images/table-6.png) Custom cell in the table
    -#### Alignment in table cells -##### Center aligned +#### Alignment in Table Cells +##### Center Aligned Content in table cells should be aligned to the center of the row in cases where the **height of content is similar** in cells across the same row. ![Content aligned centerally in a row](./images/table-7.png) Content aligned centerally in a row
    -##### Top aligned +##### Top Aligned Content in table cells should be aligned to the top of the row in cases where the **height of content is different** in cells across the same row. ![Content aligned to the top in a row](./images/table-8.png) Content aligned to the top in a row
    -#### Column actions -##### Show/Hide columns +#### Column Actions +##### Show/Hide Columns This action appears in the extreme right just above the header row. ![Show/hide and reorder options for columns](./images/table-9.png) Show/hide and reorder options for columns
    -##### Sorting a column +##### Sorting a Column ![Sorting and pinning options in a column](./images/table-10.png) Sorting and pinning options column @@ -262,42 +262,42 @@ Another way to offer column sorting is by clicking on the column name.

    -##### Filtering a column +##### Filtering a Column Although filters in a table are applied using dropdowns, there is a provision to apply filters in a specific column. ![Filtering a column](./images/table-12.png) Filtering a column
    -##### Reordering a column +##### Reordering a Column The cursor changes to Pointing Hand when hovering on a header cell indicating that the column can be picked and moved. ![Reordering a column](./images/table-13.png) Reordering a column
    -#### Pinned column(s) +#### Pinned Column(s) **Pinned column divider** is used to pin columns to the left so that they get fixed and do not scroll along with the rest of the columns. It is quite handy when the no. of columns is too many and all of them are not visible without scrolling. In that case, the pinning can help freeze the crucial columns in order to maintain the context. #### Selection On selection - Sort, Filters, and other actions disappear in lieu of Bulk Action(s). There can be different states and behaviors after selection is triggered - -##### No items selected - the default state +##### No Items Selected - the Default State
    ![When no item is selected](./images/table-14.png) When no item is selected
    -##### A few items selected +##### A Few Items Selected When a selection is triggered, there is an option to provide actions related to the selection at the top right. ![When a few items are selected](./images/table-15.png) When a few items are selected
    -##### All items on the page selected +##### All Items on the Page Selected An option to select all the items across all pages is presented in the header. @@ -305,7 +305,7 @@ An option to select all the items across all pages is presented in the header. When all items on a page are selected
    -##### All items selected +##### All Items Selected An option to clear selection is presented in the header. @@ -320,11 +320,11 @@ Table header remains fixed when scrolling so as to maintain the connection of th Table header should remain fixed while scrolling
    -#### Pagination vs. Infinite scroll +#### Pagination vs. Infinite Scroll Use pagination over infinite scroll so that the user can navigate to an item’s detail page and return back to the same page. Retaining the scroll position in a long list of items can be resource-intensive and hence infinite scroll is avoided and Pagination is used. #### Filtering -##### 1. When filters are frequently used +##### 1. When Filters Are Frequently Used Since the filters are frequently used, there is a dedicated fixed section alongside the table to apply those filters. The applied filters are added as chips just below the search bar to quickly enable/disable an already applied filter. Please note that there is no filtering option in the table itself. @@ -333,7 +333,7 @@ Please note that there is no filtering option in the table itself. When filters are frequently used
    -##### 2. When filters are sparingly used +##### 2. When Filters Are Sparingly Used In the case of 4 or fewer filters, all the filters are available in the table card for quick access. ![When filters are sparingly used](./images/table-20.png) @@ -348,17 +348,17 @@ The only difference is that this panel can be closed/opened on demand unlike cas Filter panel can be closed in this case
    -#### Data alignment +#### Data Alignment ![Data alignment in tables](./images/data-alignment.png) Data alignment in tables -##### Textual data +##### Textual Data Textual data is easier to read when aligned to the **left**. **Note:** For cases where the content can span across multiple lines( description, subtitle, etc.), align the content at the top for better readability.
    -##### Numerical data +##### Numerical Data **Right align**
    Numerical data indicating size or quantity of an entity (such as count, score, percent, etc) is easier to read and compare when aligned to the **right**. diff --git a/docs/src/pages/components/tabs/interactions.mdx b/docs/src/pages/components/tabs/interactions.mdx index 001ff681b3..d0836ddfc5 100644 --- a/docs/src/pages/components/tabs/interactions.mdx +++ b/docs/src/pages/components/tabs/interactions.mdx @@ -1,6 +1,6 @@ import tabsInteractions from './images/tabs-interactions.gif' -### Navigating to another tab +### Navigating to Another Tab
    @@ -8,7 +8,7 @@ import tabsInteractions from './images/tabs-interactions.gif'

    -#### Source tab +#### Source Tab
    @@ -98,7 +98,7 @@ import tabsInteractions from './images/tabs-interactions.gif'
    -#### Destination tab +#### Destination Tab
    @@ -196,7 +196,7 @@ import tabsInteractions from './images/tabs-interactions.gif'

    -#### Current content +#### Current Content
    @@ -286,7 +286,7 @@ import tabsInteractions from './images/tabs-interactions.gif'
    -#### Next content +#### Next Content
    diff --git a/docs/src/pages/components/tabs/usage.mdx b/docs/src/pages/components/tabs/usage.mdx index b8ba8876da..994ccb8d94 100644 --- a/docs/src/pages/components/tabs/usage.mdx +++ b/docs/src/pages/components/tabs/usage.mdx @@ -18,13 +18,13 @@ This variation consists of only a label. -#### Tabs with Count +#### Tabs With Count This variation uses the Pill component to display the count along with the label. -#### Tabs with Icon +#### Tabs With Icon This variant consists of an icon along with the label. Icons should only be used when they add additional value to the label. For example, with the help of icons, one can easily see the status without actually navigating to each and every tab. @@ -128,7 +128,7 @@ Tabs come in **2 sizes** - regular and small.
    -#### Tabs with Count +#### Tabs With Count ##### Regular @@ -194,7 +194,7 @@ Tabs come in **2 sizes** - regular and small.
    -#### Tabs with Icon +#### Tabs With Icon ##### Regular diff --git a/docs/src/pages/components/timePicker/usage.mdx b/docs/src/pages/components/timePicker/usage.mdx index 207ee41449..371e6164c9 100644 --- a/docs/src/pages/components/timePicker/usage.mdx +++ b/docs/src/pages/components/timePicker/usage.mdx @@ -25,7 +25,7 @@ This way users can directly enter the time they want. This method does not limit
    -#### Using date and time picker together +#### Using Date and Time Picker Together As soon as a date or date range is selected, time picker dropdown should be triggered so that users can select the time without any additional click. diff --git a/docs/src/pages/components/toast/interactions.mdx b/docs/src/pages/components/toast/interactions.mdx index 9846e204e1..fdd82c8971 100644 --- a/docs/src/pages/components/toast/interactions.mdx +++ b/docs/src/pages/components/toast/interactions.mdx @@ -2,7 +2,7 @@ import toast2 from './images/toast-2.gif' import toast3 from './images/toast-3.gif' import toast5 from './images/toast-5.gif' -### Showing the toast +### Showing the Toast *Interaction has been slowed down for display purpose only* @@ -102,7 +102,7 @@ import toast5 from './images/toast-5.gif'

    -### Closing the toast +### Closing the Toast *Interaction has been slowed down for display purpose only* @@ -197,7 +197,7 @@ import toast5 from './images/toast-5.gif'

    -### Multiple toasts +### Multiple Toasts
    diff --git a/docs/src/pages/components/toast/usage.mdx b/docs/src/pages/components/toast/usage.mdx index 7e74f35075..a63fb8850e 100644 --- a/docs/src/pages/components/toast/usage.mdx +++ b/docs/src/pages/components/toast/usage.mdx @@ -165,7 +165,7 @@ The warning may be generic like - ‘1 file could not be downloaded out of 50’
    -#### Positioning of toast +#### Positioning of Toast They appear at the bottom left of the screen and overlay any content. @@ -181,7 +181,7 @@ Toasts will close when the close button is clicked, or after a timeout – the d
    -#### Toasts with actions +#### Toasts With Actions Use toast with actions when you want the users to take an action after reading the message. Also, make sure the same actions are also available elsewhere on the page. @@ -192,7 +192,7 @@ Use toast with actions when you want the users to take an action after reading t they clone the toast. -#### Toast without description +#### Toast Without Description @@ -205,7 +205,7 @@ Only one toast is displayed at a time. Subsequent toasts get stacked with a **ma

    -#### Overuse of toasts +#### Overuse of Toasts It is recommended to not use toasts when the user interface is enough to provide feedback. diff --git a/docs/src/pages/components/tooltip/code.mdx b/docs/src/pages/components/tooltip/code.mdx index e87a2a6956..8106efa130 100644 --- a/docs/src/pages/components/tooltip/code.mdx +++ b/docs/src/pages/components/tooltip/code.mdx @@ -1,4 +1,4 @@ -#### Live demo +#### Live Demo diff --git a/docs/src/pages/components/tooltip/images/Tooltip-1.png b/docs/src/pages/components/tooltip/images/Tooltip-1.png index 481b833764..1442c360e2 100644 Binary files a/docs/src/pages/components/tooltip/images/Tooltip-1.png and b/docs/src/pages/components/tooltip/images/Tooltip-1.png differ diff --git a/docs/src/pages/components/tooltip/images/tooltip-overflow.png b/docs/src/pages/components/tooltip/images/tooltip-overflow.png index 58de522bd5..8f4928eaf6 100644 Binary files a/docs/src/pages/components/tooltip/images/tooltip-overflow.png and b/docs/src/pages/components/tooltip/images/tooltip-overflow.png differ diff --git a/docs/src/pages/components/tooltip/images/tooltip-structure.png b/docs/src/pages/components/tooltip/images/tooltip-structure.png index db7de8f73d..3090d34e62 100644 Binary files a/docs/src/pages/components/tooltip/images/tooltip-structure.png and b/docs/src/pages/components/tooltip/images/tooltip-structure.png differ diff --git a/docs/src/pages/components/tooltip/images/tooltip-vs-popover.png b/docs/src/pages/components/tooltip/images/tooltip-vs-popover.png index ea6fca5b1c..4856e1fd1c 100644 Binary files a/docs/src/pages/components/tooltip/images/tooltip-vs-popover.png and b/docs/src/pages/components/tooltip/images/tooltip-vs-popover.png differ diff --git a/docs/src/pages/components/tooltip/interactions.mdx b/docs/src/pages/components/tooltip/interactions.mdx index 0ecdcf0679..cff89d98e8 100644 --- a/docs/src/pages/components/tooltip/interactions.mdx +++ b/docs/src/pages/components/tooltip/interactions.mdx @@ -1,7 +1,7 @@ import tooltip2 from './images/tooltip-2.gif' import tooltip3 from './images/tooltip-3.gif' -### Showing the tooltip +### Showing the Tooltip
    @@ -111,7 +111,7 @@ import tooltip3 from './images/tooltip-3.gif'

    -### Hiding the tooltip +### Hiding the Tooltip
    diff --git a/docs/src/pages/components/tooltip/usage.mdx b/docs/src/pages/components/tooltip/usage.mdx index caf06370db..f9feeb7b37 100644 --- a/docs/src/pages/components/tooltip/usage.mdx +++ b/docs/src/pages/components/tooltip/usage.mdx @@ -76,7 +76,7 @@ showMobile: true
    -#### Default position +#### Default Position The preferred and default side of tooltip is the bottom of the trigger. @@ -85,7 +85,7 @@ The preferred and default side of tooltip is the bottom of the trigger. Default position
    -#### Tooltip overflow +#### Tooltip Overflow Tooltips should be as concise and clear as possible. Exceeding the max width will make it wrap to form another line. @@ -103,7 +103,7 @@ Tooltip is used to display concise information in relation to a target whereas p Tooltip vs Popover
    -#### Avoid errors in tooltips +#### Avoid Errors in Tooltips Tooltip should not be used to provide essential information and collective feedback like errors, warnings, etc that require the immediate attention of the users. diff --git a/docs/src/pages/content/button-guidelines/tabs/button-glossary.mdx b/docs/src/pages/content/button-guidelines/tabs/button-glossary.mdx index 703b392ebc..d9ed40a74a 100644 --- a/docs/src/pages/content/button-guidelines/tabs/button-glossary.mdx +++ b/docs/src/pages/content/button-guidelines/tabs/button-glossary.mdx @@ -1017,7 +1017,7 @@ Lets the user start something like an application or tour.
    -##### Leave +##### Leave Lets the user exit the current page, window, modal or group etc. See also: **Exit** @@ -1589,7 +1589,7 @@ Use it to reveal the information or details which was hidden before.
    -##### Sign in +##### Sign In Lets the user enter into a website or application by using their credentials. @@ -1614,7 +1614,7 @@ Lets the user enter into a website or application by using their credentials.
    -##### Sign out +##### Sign Out Lets the user exit from a website or application by using their credentials. @@ -1633,7 +1633,7 @@ Lets the user exit from a website or application by using their credentials.
    -##### Sign up +##### Sign Up Lets the user set up a new account by providing their details. diff --git a/docs/src/pages/content/button-guidelines/tabs/confusing-buttons.mdx b/docs/src/pages/content/button-guidelines/tabs/confusing-buttons.mdx index e67834c7eb..d4a6515d27 100644 --- a/docs/src/pages/content/button-guidelines/tabs/confusing-buttons.mdx +++ b/docs/src/pages/content/button-guidelines/tabs/confusing-buttons.mdx @@ -1,4 +1,4 @@ -#### Take the right Actions +#### Take the Right Actions Take the right actions in order to move towards your goals. Use them to make your labels predictable and consequential.
    @@ -625,7 +625,7 @@ Use it to shut the application and exit the page.
    -#### Remember to +#### Remember To
    • Use verbs for initiating an action
      • diff --git a/docs/src/pages/content/email-guidelines.mdx b/docs/src/pages/content/email-guidelines.mdx index 58e0e31cbc..01680aec06 100644 --- a/docs/src/pages/content/email-guidelines.mdx +++ b/docs/src/pages/content/email-guidelines.mdx @@ -3,7 +3,7 @@ title: Email Guidelines description: Use these guiding principles to make you emails authentic, relevant and focused. --- -#### Tone profile +#### Tone Profile

      @@ -25,7 +25,7 @@ description: Use these guiding principles to make you emails authentic, relevant

      -#### Writing subject lines +#### Writing Subject Lines Write a direct subject line to avoid confusion. @@ -59,7 +59,7 @@ Write a direct subject line to avoid confusion.
      -#### Writing salutations +#### Writing Salutations Greet your recipients appropriately. Make use of professional salutations. Use ‘Hi’ or ‘Hello’ instead of ‘Yo’ and ‘Hey’. @@ -143,7 +143,7 @@ Greet your recipients appropriately. Make use of professional salutations. Use
      -#### Email tone +#### Email Tone Use a friendly tone. @@ -184,7 +184,7 @@ Use a friendly tone. -#### Avoid acronyms +#### Avoid Acronyms Avoid using emoticons and acronyms. @@ -258,7 +258,7 @@ Don’t use ALL CAPS. -#### Be concise +#### Be Concise Keep the length of the content concise. @@ -307,7 +307,7 @@ Keep the length of the content concise. -#### Using punctuations +#### Using Punctuations Use exclamation points sparingly. @@ -354,7 +354,7 @@ Use exclamation points sparingly. -#### Humor in writing +#### Humor in Writing Don’t go overboard with humor. @@ -385,7 +385,7 @@ Don’t go overboard with humor. -#### Checklist to remember +#### Checklist to Remember
      * Mention what’s attached. diff --git a/docs/src/pages/content/empty-states.mdx b/docs/src/pages/content/empty-states.mdx index 382d98def5..8c5a081fd0 100644 --- a/docs/src/pages/content/empty-states.mdx +++ b/docs/src/pages/content/empty-states.mdx @@ -3,7 +3,7 @@ title: Empty States description: Never let your users go empty-handed. Turn the dead-end into a delightful experience. Use this guide to educate, direct, and amaze your users --- -#### Guiding principles +#### Guiding Principles

      @@ -25,7 +25,7 @@ description: Never let your users go empty-handed. Turn the dead-end into a deli

      -#### Give delightful experience +#### Give Delightful Experience Turn the dead-end into a delightful experience @@ -73,7 +73,7 @@ Turn the dead-end into a delightful experience
      -#### Educate users +#### Educate Users Educate your users whenever possible @@ -121,7 +121,7 @@ Educate your users whenever possible
      -#### Avoid jargons +#### Avoid Jargons Avoid using technical jargons @@ -147,7 +147,7 @@ Avoid using technical jargons
      -#### Avoid redundancy +#### Avoid Redundancy Avoid using repetitive words or phrases @@ -188,7 +188,7 @@ Avoid using repetitive words or phrases
      -#### Using punctuations +#### Using Punctuations Avoid overuse of punctuations @@ -224,7 +224,7 @@ Avoid overuse of punctuations
      -#### Humor in writing +#### Humor in Writing Keep the humor light never go overboard with it @@ -251,7 +251,7 @@ Keep the humor light never go overboard with it
      -#### Checklist to remember +#### Checklist to Remember
      • Remember to keep the humor light
        • diff --git a/docs/src/pages/content/error-messages.mdx b/docs/src/pages/content/error-messages.mdx index de0db6bc77..aeb3a33e65 100644 --- a/docs/src/pages/content/error-messages.mdx +++ b/docs/src/pages/content/error-messages.mdx @@ -3,7 +3,7 @@ title: Error Messages description: Your error messages could be the last straw for users to move forward or abort the process in the middle. Use this guide to help users navigate their way and turn their delay into an experience. --- -#### Tone profile +#### Tone Profile

        @@ -25,7 +25,7 @@ description: Your error messages could be the last straw for users to move forwa

        -#### Remember to +#### Remember To
        • Provide a solution to users
          • @@ -38,7 +38,7 @@ description: Your error messages could be the last straw for users to move forwa
        • Avoid sounding robotic to the user
        -#### Inline validation errors +#### Inline Validation Errors @@ -81,7 +81,7 @@ description: Your error messages could be the last straw for users to move forwa
        -#### Blocking errors +#### Blocking Errors @@ -126,7 +126,7 @@ description: Your error messages could be the last straw for users to move forwa
        -#### Warning errors +#### Warning Errors @@ -175,7 +175,7 @@ description: Your error messages could be the last straw for users to move forwa
        -#### Checklist to remember +#### Checklist to Remember
        • Be direct but never robotic
          • diff --git a/docs/src/pages/content/house-rules/tabs/basics.mdx b/docs/src/pages/content/house-rules/tabs/basics.mdx index ed3e300a34..2d6e9f7eb4 100644 --- a/docs/src/pages/content/house-rules/tabs/basics.mdx +++ b/docs/src/pages/content/house-rules/tabs/basics.mdx @@ -106,7 +106,7 @@ Going basic doesn't mean you start sounding bland and dull. You can of course ad
          -#### Stay with YOU +#### Stay With YOU Get more personal with your words. People love being spoken or written to. The word 'you' is both the subject and the object form. A single word like 'you' can refer to one or more than one person. @@ -139,7 +139,7 @@ Get more personal with your words. People love being spoken or written to. The w
          -#### Get more ACTIVE +#### Get More ACTIVE Users struggle with passive voice. It sounds very verbose, ambiguous and odd. They understand you better, when you use the active form. diff --git a/docs/src/pages/content/house-rules/tabs/date-&-time.mdx b/docs/src/pages/content/house-rules/tabs/date-&-time.mdx index 77ca287bce..37de049ae8 100644 --- a/docs/src/pages/content/house-rules/tabs/date-&-time.mdx +++ b/docs/src/pages/content/house-rules/tabs/date-&-time.mdx @@ -90,7 +90,7 @@ Avoid using abbreviations unless there are space constraints. Never use period o
          -#### Days of the week +#### Days of the Week Avoid using abbreviations unless there are space constraints. Never use period with the abbreviations and make sure you use sentence case for writing these days of the week. @@ -203,7 +203,7 @@ Always use 12-hour clock for writing time. Make use of AM and PM preceded by a s
          -#### Relative date and time +#### Relative Date and Time Mention relative timestamps when the exact dates are not important. @@ -294,7 +294,7 @@ Mention relative timestamps when the exact dates are not important.

          -#### Time zone +#### Time Zone Common time zones referred in U.S. Pacific standard time (PST), Mountain standard time (MST), Central daylight time (CDT), Eastern daylight time (EDT) etc. @@ -342,7 +342,7 @@ Common time zones referred in U.S. Pacific standard time (PST), Mountain standar
          -#### Abbreviation chart +#### Abbreviation Chart Abbreviation chart for units of time diff --git a/docs/src/pages/content/house-rules/tabs/grammer.mdx b/docs/src/pages/content/house-rules/tabs/grammer.mdx index eca0d90053..598943f9e7 100644 --- a/docs/src/pages/content/house-rules/tabs/grammer.mdx +++ b/docs/src/pages/content/house-rules/tabs/grammer.mdx @@ -69,7 +69,7 @@ Use it to end the sentence. Period always goes inside the quotation mark. -#### Capitalization chart +#### Capitalization Chart Capitalization chart for slippery words @@ -152,7 +152,7 @@ Capitalization chart for slippery words
          -#### Title case +#### Title Case In title case the first letters of the words are capitalized except conjunctions, prepositions and articles. Grammatically speaking the title case has some complex rules when it comes to writing. It generally needs a subjective point of view. @@ -180,7 +180,7 @@ In title case the first letters of the words are capitalized except conjunctions
          -#### Sentence case +#### Sentence Case It is simple, direct, and the quickest to read. Helps you easily differentiate between common nouns and proper nouns. @@ -238,7 +238,7 @@ Write all email addresses and website URLs in lower case.
          -#### All caps +#### All Caps Use all caps without putting period in the end. @@ -286,7 +286,7 @@ Use all caps without putting period in the end.
          -#### Spelt differently +#### Spelt Differently No need to scratch your head over British and American spellings, follow this list instead. @@ -478,7 +478,7 @@ No need to scratch your head over British and American spellings, follow this li
          -#### Slippery words +#### Slippery Words Slippery words and terms to keep in mind. @@ -562,11 +562,11 @@ Slippery words and terms to keep in mind.
          -#### Standardized spellings +#### Standardized Spellings Some major spelling differences in American English. American English is more obviously phonetic than British English. -##### -ae/-oe +##### -Ae/-Oe @@ -617,7 +617,7 @@ Some major spelling differences in American English. American English is more ob
          -##### -ce/-se +##### -Ce/-Se @@ -669,7 +669,7 @@ Some major spelling differences in American English. American English is more ob
          -##### -e/-ue +##### -E/-Ue @@ -691,7 +691,7 @@ Some major spelling differences in American English. American English is more ob
          -##### -able/-eable +##### -Able/-Eable @@ -715,7 +715,7 @@ Some major spelling differences in American English. American English is more ob
          -##### -ize/-ise +##### -Ize/-Ise diff --git a/docs/src/pages/content/house-rules/tabs/numbers.mdx b/docs/src/pages/content/house-rules/tabs/numbers.mdx index 1b4c2e0827..06032c226c 100644 --- a/docs/src/pages/content/house-rules/tabs/numbers.mdx +++ b/docs/src/pages/content/house-rules/tabs/numbers.mdx @@ -225,7 +225,7 @@ Put a dollar sign '$' before the amount when talking about US currency. Use deci
          -#### Phone numbers +#### Phone Numbers Use dashes without space between numbers. Use a country code if referring to people outside your country. diff --git a/docs/src/pages/content/house-rules/tabs/punctuations.mdx b/docs/src/pages/content/house-rules/tabs/punctuations.mdx index c540a34acf..54c07351cb 100644 --- a/docs/src/pages/content/house-rules/tabs/punctuations.mdx +++ b/docs/src/pages/content/house-rules/tabs/punctuations.mdx @@ -199,7 +199,7 @@ Use it to indicate omitted words. But remember not to get swayed away with it un
          -#### Exclamation point +#### Exclamation Point A well-timed one can make things feel alive. But try not to overuse it. @@ -321,7 +321,7 @@ Use a hyphen to link words or indicate range or span.
          -#### En dash +#### En Dash Use it for span or range of numbers. @@ -377,7 +377,7 @@ Use it for span or range of numbers.
          -#### Em dash +#### Em Dash A versatile punctuation that can take place of comma, parentheses or colon depending on the context.. @@ -411,7 +411,7 @@ A versatile punctuation that can take place of comma, parentheses or colon depen
          -#### Question mark +#### Question Mark Use it to ask questions, and not unnecessary ones. @@ -447,7 +447,7 @@ Use it to ask questions, and not unnecessary ones.
          -#### Quotation mark +#### Quotation Mark Use it to show someone else has said it and you can say it too. Single quotation mark is used for quotation within a quotation. Remember 'period' and 'comma' go inside the quotation marks. diff --git a/docs/src/pages/content/placeholder-text.mdx b/docs/src/pages/content/placeholder-text.mdx index e0246516a0..41a2eb4ed8 100644 --- a/docs/src/pages/content/placeholder-text.mdx +++ b/docs/src/pages/content/placeholder-text.mdx @@ -24,7 +24,7 @@ description: Use this guide to fill in your user's blanks. Navigate their way by
          -#### Remember to +#### Remember To
          • Avoid redundant text
            • @@ -34,7 +34,7 @@ description: Use this guide to fill in your user's blanks. Navigate their way by
          • Avoid lengthy text
          -#### Types of placeholder texts +#### Types of Placeholder Texts
          @@ -82,7 +82,7 @@ description: Use this guide to fill in your user's blanks. Navigate their way by
          -##### Text message +##### Text Message @@ -209,7 +209,7 @@ description: Use this guide to fill in your user's blanks. Navigate their way by
          -##### Form fields +##### Form Fields diff --git a/docs/src/pages/content/rules.mdx b/docs/src/pages/content/rules.mdx index 9aaae16113..1f2aaf485f 100644 --- a/docs/src/pages/content/rules.mdx +++ b/docs/src/pages/content/rules.mdx @@ -45,7 +45,7 @@ description: Use this guide to make DOs & DONTs components.
          -#### Multi-line +#### Multi-Line @@ -63,7 +63,7 @@ description: Use this guide to make DOs & DONTs components.
          -#### Multi-line with a heading +#### Multi-Line With a Heading @@ -85,7 +85,7 @@ description: Use this guide to make DOs & DONTs components.
          -#### Multi-line with a heading +#### Multi-Line With a Heading @@ -159,7 +159,7 @@ description: Use this guide to make DOs & DONTs components.
          -#### Image with caption +#### Image With Caption diff --git a/docs/src/pages/content/voice-and-tone-guidelines/tabs/usage.mdx b/docs/src/pages/content/voice-and-tone-guidelines/tabs/usage.mdx index 2ac89b7717..83b6243a68 100644 --- a/docs/src/pages/content/voice-and-tone-guidelines/tabs/usage.mdx +++ b/docs/src/pages/content/voice-and-tone-guidelines/tabs/usage.mdx @@ -1,4 +1,4 @@ -#### Daily tasks and activities +#### Daily Tasks and Activities @@ -64,7 +64,7 @@ -#### Progress and completion messages +#### Progress and Completion Messages @@ -119,7 +119,7 @@ -#### Features and updates +#### Features and Updates @@ -171,7 +171,7 @@ -#### Empty states +#### Empty States @@ -237,7 +237,7 @@ -#### Error messages +#### Error Messages diff --git a/docs/src/pages/content/voice-and-tone-guidelines/tabs/voice-and-tone.mdx b/docs/src/pages/content/voice-and-tone-guidelines/tabs/voice-and-tone.mdx index d44a413556..5304e97a77 100644 --- a/docs/src/pages/content/voice-and-tone-guidelines/tabs/voice-and-tone.mdx +++ b/docs/src/pages/content/voice-and-tone-guidelines/tabs/voice-and-tone.mdx @@ -26,7 +26,7 @@ Our tone varies according to our customers' needs. We are conversational, empath
          -#### Things to remember +#### Things to Remember
          • Be friendly but never cocky
            • diff --git a/docs/src/pages/data-visualizations/barChart/usage.mdx b/docs/src/pages/data-visualizations/barChart/usage.mdx index 6c5b4bd7b0..a89500a434 100644 --- a/docs/src/pages/data-visualizations/barChart/usage.mdx +++ b/docs/src/pages/data-visualizations/barChart/usage.mdx @@ -7,7 +7,7 @@ keywords: ['Bar charts'] A bar chart is a chart with rectangular bars with lengths proportional to the values that they represent. One axis of the chart shows the specific categories being compared, and the other axis represents a discrete value. -##### Used for +##### Used For
            • Compare discrete data
            • Show trends over time
              • @@ -17,7 +17,7 @@ A bar chart is a chart with rectangular bars with lengths proportional to the va ### Orientation -#### Horizontal bars +#### Horizontal Bars Horizontal bars are mostly used to show Nominal/Categorical datasets. These are generally datasets which can be arranged in any order. Sorting the data can be helpful to bring attention to lowest/highest values. @@ -25,7 +25,7 @@ Sorting the data can be helpful to bring attention to lowest/highest values.

              -#### Vertical bars +#### Vertical Bars Vertical bars are mostly used to show Ordinal/Sequential datasets. These are generally datasets which follow a natural progression or order. These show the change in values w.r.t. the progression/time. @@ -35,14 +35,14 @@ These show the change in values w.r.t. the progression/time. ### Type -#### Bar chart +#### Bar Chart It presents datasets with rectangular bars with heights or lengths proportional to the values that they represent. ![Bar chart](./images/barchart-3.png)

              -#### Clustered bar chart +#### Clustered Bar Chart It presents two or more data sets displayed side-by-side and grouped together under categories on the same axis. Note: Use Line chart to compare for trend analysis between categories. Guideline @@ -50,7 +50,7 @@ It presents two or more data sets displayed side-by-side and grouped together un

              -#### Stacked bar chart +#### Stacked Bar Chart It presents larger category divided into smaller categories and their relations to the total. ![Stacked bar chart](./images/barchart-5.png) @@ -68,21 +68,21 @@ It presents a grouped frequency distribution with continuous classes. It groups ### Usage -#### Use single color for single data set +#### Use Single Color for Single Data Set If all the bars measure the same variable, make them all the same color. Different shades have no relevance to the data. ![Use single color for single data set](./images/barchart-7.png)

              -#### Show nominal/categorical data in ascending or descending order +#### Show Nominal/categorical Data in Ascending or Descending Order Sort data sets to make it easier to understand and visualize. ![Show nominal/categorical data in ascending or descending order](./images/barchart-8.png)

              -#### Make the width of each bar about twice as wide as the space between them +#### Make the Width of Each Bar About Twice as Wide as the Space Between Them ![Width of each bar about twice as wide as the space between them](./images/barchart-9.png)
              diff --git a/docs/src/pages/data-visualizations/color/usage.mdx b/docs/src/pages/data-visualizations/color/usage.mdx index a0bde91b22..83a3415980 100644 --- a/docs/src/pages/data-visualizations/color/usage.mdx +++ b/docs/src/pages/data-visualizations/color/usage.mdx @@ -8,10 +8,10 @@ keywords: ['Colors'] Data visualization is the representation of information in pictorial or graphical format, such as charts, graphs, maps, and diagrams. Because color can affect our perception of information, the appropriate use of color is critical in making a data visualization successful. -### Assigning colors +### Assigning Colors Use color tokens according to the usage guidelines to achieve appropriate color contrasts. -#### Categorical palette +#### Categorical Palette Categorical palette consists of 10 colors shown below. The order of the colors should not be changed under any circumstance. Note: Follow the same sequence as the numbers in the token names. This ensures each color is visually distinct from its neighbors across all color deficiencies. @@ -29,9 +29,9 @@ Categorical palette consists of 10 colors shown below. The order of the colors s

              -#### Multi hue palette +#### Multi Hue Palette -##### Sequential palette +##### Sequential Palette Sequential palette is used to illustrate a continuous or sequential change in values from low to high. ![Sequential palette](./images/color-3.png) @@ -39,11 +39,11 @@ Sequential palette is used to illustrate a continuous or sequential change in va

              -##### Diverging palette +##### Diverging Palette Diverging palette is used when dealing with negative values or ranges that have two extremes with a baseline in the middle. Diverging colors are ordered. Use these for ordinal and ratio scales, especially when there is a meaningful middle value. These may also be used for interval scales. Do not use these for categorical scales. -###### Blue - Red palette +###### Blue - Red Palette Depending on the visual outcome of the chart, if the negative sentiment is to be highlighted then use Blue - Red palette. ![Blue - Red palette](./images/color-4.png) @@ -56,7 +56,7 @@ Depending on the visual outcome of the chart, if the negative sentiment is to be

              -###### Yellow - Green palette +###### Yellow - Green Palette Depending on the visual outcome of the chart, if the positive sentiment is to be highlighted then use Yellow - Green palette. ![Yellow - Green palette](./images/color-6.png) @@ -71,7 +71,7 @@ Depending on the visual outcome of the chart, if the positive sentiment is to be ### Usage -#### Apply a border or space between adjacent colors +#### Apply a Border or Space Between Adjacent Colors While the color tokens pass 3:1 contrast ratios against backgrounds, they might not against each other. To comply with WCAG 2.0, apply a space or border as a visual separator between data elements. ![White border between adjacent bars and slices](./images/color-8.png) @@ -79,7 +79,7 @@ While the color tokens pass 3:1 contrast ratios against backgrounds, they might

              -#### Be consistent with color +#### Be Consistent With Color If a color is used to represent a category in one chart, all other charts should use that color for the same category. This should only be done when the category has significant importance and repeats itself in two or more charts. Note: When a color is used to depict a specific category across charts, it should not be used in the categorical palette. @@ -89,28 +89,28 @@ This should only be done when the category has significant importance and repeat

              -#### Don't use sequential color with categorical data +#### Don't Use Sequential Color With Categorical Data Sequential colors are optimized for numeric meaning. Using these colors for dimensions can undermine the numeric association and lead users to misunderstand visualizations. ![Don't use sequential color with categorical data](./images/color-10.png)

              -#### Don’t use categorical with single data series or sequential data +#### Don’t Use Categorical With Single Data Series or Sequential Data Categorical colors are optimized for maximum differentiation. Using them for sequences (ordinal, interval, or ratio scales), even when arranged by hue, makes it more difficult for users to understand. ![Don’t use categorical with single data series or sequential data](./images/color-11.png)

              -#### Use upto 6 categorical colors +#### Use Upto 6 Categorical Colors Categorical colors become more difficult to comprehend starting at 6 colors, and extremely difficult to understand at 12. If you have a need for more than 6 colors, try alternative charts or table. ![Use upto 6 categorical colors](./images/color-12.png)

              -#### Don't place text on chart colors +#### Don't Place Text on Chart Colors All color tokens don’t support accessible pairings with text, i.e. 4.5:1 contrast. Consider placing text next to the chart element instead. ![Don't place text on chart colors](./images/color-13.png) diff --git a/docs/src/pages/data-visualizations/donutChart/usage.mdx b/docs/src/pages/data-visualizations/donutChart/usage.mdx index d6436fb591..7b65306ecf 100644 --- a/docs/src/pages/data-visualizations/donutChart/usage.mdx +++ b/docs/src/pages/data-visualizations/donutChart/usage.mdx @@ -7,7 +7,7 @@ keywords: ['Donut charts', 'Pie charts'] A donut chart is a variant of a pie chart with its center removed. The empty area in the centre of this chart is used to display a metric corresponding to the sum or net value of all metrics visualized in the chart. -##### Used for +##### Used For
              • Used to show percentage or proportional data
              • Show the relative relationship between two or three categories
                • @@ -16,14 +16,14 @@ A donut chart is a variant of a pie chart with its center removed. The empty are ### Usage -#### Sort data in descending order +#### Sort Data in Descending Order Show data in descending order, starting at the 12 o'clock point and moving clockwise. ![Sort data in descending order](./images/donutchart-1.png)

                -#### Don't use a donut chart to visualize time series. +#### Don't Use a Donut Chart to Visualize Time Series. Donut chart shows the relative relationship between two or more categories. Don’t use multiple pie charts to show changes over time. It’s difficult to compare the difference in size across each segment of the circle. Use a bar chart or line chart instead. @@ -31,7 +31,7 @@ Don’t use multiple pie charts to show changes over time. It’s difficult to c

                -#### Use upto 6 categories +#### Use Upto 6 Categories Categorical colors become more difficult to comprehend starting at 6 colors, and extremely difficult to understand at 12. If you have a need for more than 6 categories, try grouping categories beyond 5 under ‘Others’, or use alternative charts or table. @@ -39,5 +39,5 @@ If you have a need for more than 6 categories, try grouping categories beyond 5

                -#### Use Donut charts sparingly +#### Use Donut Charts Sparingly It is difficult to visually judge the size of circle segments. Use Bar chart instead. \ No newline at end of file diff --git a/docs/src/pages/data-visualizations/lineChart/usage.mdx b/docs/src/pages/data-visualizations/lineChart/usage.mdx index 401be47268..a89e18d8e4 100644 --- a/docs/src/pages/data-visualizations/lineChart/usage.mdx +++ b/docs/src/pages/data-visualizations/lineChart/usage.mdx @@ -7,7 +7,7 @@ keywords: ['Line charts'] A line chart is used to show information that changes over time. Line charts are created by plotting a series of several points and connecting them with a straight line. -##### Used for +##### Used For
                • Show trends over time and compare several continous data sets
                • Plot data at regular intervals connected by lines
                  • @@ -16,13 +16,13 @@ A line chart is used to show information that changes over time. Line charts are ### Type -#### Line chart +#### Line Chart ![Line chart](./images/linecharts-1.png)

                  -#### Line chart with forecast +#### Line Chart With Forecast It joins a line graph for observed past data, and a range area chart for future predictions. ![Line chart with forecast](./images/linecharts-2.png) @@ -31,21 +31,21 @@ It joins a line graph for observed past data, and a range area chart for future ### Usage -#### Avoid individual data markers with numbers +#### Avoid Individual Data Markers With Numbers Showing individual data markers can reduce the readability of the chart. ![Avoid individual data markers with numbers](./images/linecharts-3.png)

                  -#### Use maximum three categories +#### Use Maximum Three Categories Plotting too many lines on the same chart gives a confusing picture and defeats the purpose. ![Use maximum three categories](./images/linecharts-4.png)

                  -#### Using secondary Y-axis +#### Using Secondary Y-Axis Incase of secondary Y-axis, following guidelines should be followed:
                  • Secondary Y-axis should only be used if the type of values is different
                    • @@ -58,14 +58,14 @@ Incase of secondary Y-axis, following guidelines should be followed:

                    -#### Showing trend with sentiment +#### Showing Trend With Sentiment The trend line can have sentiment colors to show positive and negative values. ![howing trend with sentiment](./images/linecharts-6.png)

                    -#### Line chart vs. Bar chart +#### Line Chart vs. Bar Chart Line chart is preferred over bar chart to
                    • Compare changes over the same period of time for multiple categories
                      • diff --git a/docs/src/pages/foundations/colors.mdx b/docs/src/pages/foundations/colors.mdx index 62278cbaea..81354f1ced 100644 --- a/docs/src/pages/foundations/colors.mdx +++ b/docs/src/pages/foundations/colors.mdx @@ -381,7 +381,7 @@ export const NEUTRALS = [ }, ]; -#### Primary color +#### Primary Color
                      @@ -392,7 +392,7 @@ export const NEUTRALS = [ -#### Secondary colors +#### Secondary Colors
                      @@ -420,7 +420,7 @@ export const NEUTRALS = [
                      -#### Accent colors +#### Accent Colors
                      diff --git a/docs/src/pages/foundations/interactions.mdx b/docs/src/pages/foundations/interactions.mdx index 57cb02105c..96cda82a7f 100644 --- a/docs/src/pages/foundations/interactions.mdx +++ b/docs/src/pages/foundations/interactions.mdx @@ -17,13 +17,13 @@ Hence there are two styles of motion - Productive motion and Expressive motion.
                      -##### Productive motion +##### Productive Motion Productive motion is appropriate for moments when the user needs to focus on completing tasks. Micro-interactions such as button states, dropdowns, revealing additional information, or rendering data tables and visualisations can be designed with productive motion.
                      -##### Expressive motion +##### Expressive Motion Expressive motion is appropriate for moments such as opening a new page, clicking the primary action button, or when the movement itself conveys a meaning. System alerts and the appearance of notification boxes are great cases for expressive motion. @@ -36,19 +36,19 @@ Elements on the screen should speed up quickly and slow down smoothly, obeying t
                      -##### Standard easing +##### Standard Easing Use when an element is visible from the beginning to the end of a motion. Expanding card and the sorting of table rows are good examples.
                      -##### Entrance easing +##### Entrance Easing With this style, an element quickly appears and slows down to a stop. Use when adding elements to the view, such as a modal or toast appearing. Elements moving in response to the user’s input, such as a dropdown opening or toggle switching should also use this style.
                      -##### Exit easing +##### Exit Easing Use when removing elements from view, such as closing a modal or toaster. The element speeds up as it exits from view, implying that its departure from the screen is permanent. @@ -118,7 +118,7 @@ Duration is calculated based on the style and size of the motion. Among the two
                      -##### Duration values +##### Duration Values
                      diff --git a/docs/src/pages/foundations/layout/index.mdx b/docs/src/pages/foundations/layout/index.mdx index 7faa39a350..9ef17cf4a8 100644 --- a/docs/src/pages/foundations/layout/index.mdx +++ b/docs/src/pages/foundations/layout/index.mdx @@ -62,7 +62,7 @@ Using a baseline grid creates a consistent rhythm between the components and typ
                      -##### Grid with margin +##### Grid With Margin For the outermost grid, this component is used. This can also be nested subsequently if a 16px padding is required @@ -123,9 +123,9 @@ All typography aligns to a 4px baseline grid. This allows for readable line heig ![](./images/typography.png) -### Spacing guidelines +### Spacing Guidelines -#### 2 px token +#### 2 px Token Spacing between related elements. **e.g.** Spacing between heading and subheading. @@ -137,7 +137,7 @@ Spacing between related elements.

                      -#### 4 px token +#### 4 px Token Spacing between group of elements. **e.g.** Spacing between badges, buttons. @@ -148,7 +148,7 @@ Spacing between group of elements.

                      -#### 6 px token +#### 6 px Token Spacing between multiple element in a component. **e.g.** Button with icons on left or right. @@ -159,7 +159,7 @@ Spacing between multiple element in a component.

                      -#### 8 px token +#### 8 px Token Spacing between group of elements. **e.g.** Spacing within checkbox group, radio group. @@ -171,7 +171,7 @@ Spacing between group of elements.
                      -#### 12 px token +#### 12 px Token Spacing within a section. **e.g.** Spacing between sections within a modal, sections within a form. @@ -183,7 +183,7 @@ Spacing within a section.
                      -#### 16 px token +#### 16 px Token Spacing between different sections **e.g.** Spacing between cards. diff --git a/docs/src/pages/foundations/opacity/index.mdx b/docs/src/pages/foundations/opacity/index.mdx index c9547347f1..ec6a3b4af6 100644 --- a/docs/src/pages/foundations/opacity/index.mdx +++ b/docs/src/pages/foundations/opacity/index.mdx @@ -19,7 +19,7 @@ import opacity1 from "./images/opacity-1.png" Opacity is the degree to which an object or material allows light to pass through it. Use the following tokens to apply transparency to an element. -### Opacity tokens +### Opacity Tokens

                      diff --git a/docs/src/pages/foundations/principles.mdx b/docs/src/pages/foundations/principles.mdx index a597b67818..83038bd03b 100644 --- a/docs/src/pages/foundations/principles.mdx +++ b/docs/src/pages/foundations/principles.mdx @@ -5,7 +5,7 @@ showMobile: true parentTab: foundations --- -#### Our values +#### Our Values Values are like fingerprints, sticking to them will help us make better design decisions. @@ -36,7 +36,7 @@ Design for choices that are well thought out and based on best practices. Avoid

                      -#### Design principles +#### Design Principles Our design principles constantly help us remain authentic, relevant, and original. diff --git a/docs/src/pages/foundations/response-time.mdx b/docs/src/pages/foundations/response-time.mdx index ea3c6ff181..884239bd7f 100644 --- a/docs/src/pages/foundations/response-time.mdx +++ b/docs/src/pages/foundations/response-time.mdx @@ -9,7 +9,7 @@ showMobile: true
                      -#### Free navigation +#### Free Navigation **0.1 second** is the limit for having the user feel that the system is **reacting instantaneously**, meaning that no special feedback is necessary except to display the result. @@ -33,7 +33,7 @@ For example, this is the limit from the time the user selects a row in a table u

                      -#### Direct manipulation +#### Direct Manipulation **1.0 second** is about the limit for the **user's flow of thought to stay** uninterrupted, even though the user will notice the delay. @@ -63,7 +63,7 @@ For example, if sorting a table according to the selected column can't be done i

                      -#### Exports and processes +#### Exports and Processes **10 seconds** is the limit for **keeping the user's attention focused** on the dialogue. Anything slower than 10 seconds needs a percent-done indicator as well as a clearly signposted way for the user to interrupt the operation. Assume that users will need to reorient themselves when they return to the UI after a delay of more than 10 seconds. @@ -72,7 +72,7 @@ For example, exporting a report as PDF should happen under 10 seconds. A percent

                      -#### Long activities (or background tasks) +#### Long Activities (Or Background Tasks) For longer delays, users should be able to perform other tasks while waiting for the process to finish, so they should be given feedback indicating when it's expected to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect. diff --git a/docs/src/pages/foundations/states/index.mdx b/docs/src/pages/foundations/states/index.mdx index 0125d973e4..6e746229f7 100644 --- a/docs/src/pages/foundations/states/index.mdx +++ b/docs/src/pages/foundations/states/index.mdx @@ -7,12 +7,12 @@ showMobile: true **Note:** 'Component' used below implies 'interactive component'.
                      -### Types of states +### Types of States #### Default A component is in default state when it is not interacted with. -##### State logic +##### State Logic Consider it as 0 for reference point. ![Default state](./images/default-state.png) @@ -24,7 +24,7 @@ Consider it as 0 for reference point. #### Hover A component transitions into hover state when the cursor is placed over it. -##### State logic +##### State Logic +1 (slightly darker) for background color and content such as text (wherever applicable). @@ -37,7 +37,7 @@ A component transitions into hover state when the cursor is placed over it. #### Active A component transitions into active state when it is being pressed. -##### State logic +##### State Logic +2 (moderately darker) for background color. @@ -50,7 +50,7 @@ A component transitions into active state when it is being pressed. #### Focus A component transitions into focus state when it is highlighted by the user using a mouse, keyboard or voice input. This state indicates that the component is ready to interact with. -##### State logic +##### State Logic Focus ring of 3px border, outside. @@ -63,7 +63,7 @@ Focus ring of 3px border, outside. #### Disabled A component transitions into disabled state when it cannot be interacted with. -##### State logic +##### State Logic -2 (moderately lighter) for background. @@ -76,7 +76,7 @@ A component transitions into disabled state when it cannot be interacted with. #### Loading A component transitions into loading state if the action needs to be processed before proceeding. -##### State logic +##### State Logic -2 (moderately lighter) for background and spinner in place of content. @@ -89,7 +89,7 @@ A component transitions into loading state if the action needs to be processed b #### Selected A component transitions into selected state when it is selected as an option out of many. The selected state should have medium emphasis so that it’s noticeable but not distracting. -##### State logic +##### State Logic Jal/Lightest at 48% opacity for background color and Jal/Dark for text(wherever applicable) @@ -102,7 +102,7 @@ Jal/Lightest at 48% opacity for background color and Jal/Dark for text(wherever #### Activated A component transitions into activated state when a view associated with it is currently being viewed. -##### State logic +##### State Logic Jal/Lightest for background color and Jal/Dark for text(wherever applicable) diff --git a/docs/src/pages/foundations/typography/index.mdx b/docs/src/pages/foundations/typography/index.mdx index c9f7655df9..8f39cb644e 100644 --- a/docs/src/pages/foundations/typography/index.mdx +++ b/docs/src/pages/foundations/typography/index.mdx @@ -175,7 +175,7 @@ The design system has many built in tokens to easily solve most common use cases ### Usage -#### Type color +#### Type Color **Title, Body, Subheading** text styles can be combined with any color token to get the desired result. diff --git a/docs/src/pages/introduction/get-started/designers.mdx b/docs/src/pages/introduction/get-started/designers.mdx index 7bec608cd5..e7a00ba1ac 100644 --- a/docs/src/pages/introduction/get-started/designers.mdx +++ b/docs/src/pages/introduction/get-started/designers.mdx @@ -4,13 +4,13 @@ description: Welcome to the Masala Design System (or MDS as we call it). If you parentTab: introduction --- -### Enabling Figma libraries +### Enabling Figma Libraries
                      #### Sign in to Figma First and foremost, sign in to Figma using your organization account. -#### Getting the library files +#### Getting the Library Files Duplicate the files from the Figma community. 1. [Masala Design System - Branding](https://www.figma.com/community/file/1075022843491691382)
                      @@ -25,22 +25,22 @@ Duplicate the files from the Figma community. **Note:** You will not be able to get real-time updates as the duplicate instance of the library is not connected with the main library file available on the community. -#### Publishing the libraries +#### Publishing the Libraries Publish the duplicated files as libraries in Figma in order to make them available for use in your organization. ![Publishing the library in Figma](./images/designers-2.png) Publishing the library in Figma
                      -### Start designing +### Start Designing #### Foundations Masala Design System is a set of guidelines, components, and patterns to speed up product design and development. In order to design and build products on top of Innovaccer’s platform, go through the [Foundations](/foundations/principles/) section to get familiar with the design principles, colors, layouts, typography, etc. that are used throughout our products. -#### Components and patterns +#### Components and Patterns For any [component](/components/overview/all-components) or [pattern](/patterns/overview/all-patterns) that you want to use, there is a respective guideline page which includes its overview, types, variants, states, usage guidelines, etc. It is crucial that you get familiar with these when incorporating the components/patterns in your designs. #### Content There is a separate section for [voice and tone guidelines](/content/voice-and-tone-guidelines/tabs/voice-and-tone/) which should be referred for concise and consistent copywriting. -#### Reach out to us +#### Reach Out to Us If you have any question or feedback about any aspect of the Masala Design System, feel free to reach out to us via [email](mailto:designers@innovaccer.com) or on [twitter](https://twitter.com/innovaccerdsgn). \ No newline at end of file diff --git a/docs/src/pages/introduction/get-started/developers.mdx b/docs/src/pages/introduction/get-started/developers.mdx index 08802b82d6..f3d6a6529d 100644 --- a/docs/src/pages/introduction/get-started/developers.mdx +++ b/docs/src/pages/introduction/get-started/developers.mdx @@ -14,11 +14,11 @@ The Masala Design System provides front-end developers & engineers a collection

                      -#### Getting started +#### Getting Started
                      -##### Installing component library +##### Installing Component Library Run the following command using npm to add the component library to your project. @@ -29,7 +29,7 @@ npm install @innovaccer/design-system

                      -##### Adding style +##### Adding Style As this component library is part of a framework-agnostic design system used at Innovaccer the styling is done with CSS using CSS variables for theming and BEM methodology for reusable and modular styling. So it requires you to include CSS in your project by either importing or serving it as a static file. The complete stylesheet is published as part of the component library at path @innovaccer/design-system/css. @@ -42,7 +42,7 @@ import '@innovaccer/design-system/css';

                      -##### Using font +##### Using Font The css sets the font family as 'Nunito Sans' for the body. To add this font in your project you need to load this font. The recommended way to do it is by adding the following google font cdn link to your app's head. @@ -53,7 +53,7 @@ The css sets the font family as 'Nunito Sans' for the body. To add this font in

                      -##### Updating font +##### Updating Font If you don't add the font described above font family will not be affected by css. However, if you want to update the font family update it via the following css variable. @@ -64,7 +64,7 @@ If you don't add the font described above font family will not be affected by cs

                      -##### Updating font +##### Updating Font As BEM is used reset.css is not used and no style reset is done. @@ -86,7 +86,7 @@ For css variables to work on IE we use a polyfill at runtime to achieve dynamic

                      -#### Using components +#### Using Components Available components along with live code editor and API documentation can be found here. Components can be imported as mentioned below. @@ -105,24 +105,24 @@ Breadcrumb,

                      -#### How to run locally? +#### How to Run Locally?
                      ```shell -#clone repository +# Clone Repository git clone https://github.com/innovaccer/design-system.git -#install dependencies +# Install Dependencies npm install -#start development server +# Start Development Server npm run dev ```

                      -#### How to contribute? +#### How to Contribute? We are happy that you wish to contribute to this project. Please refer to the Contribution Guidelines for more information about setting up the project and contributing to it. diff --git a/docs/src/pages/introduction/what's-new.mdx b/docs/src/pages/introduction/what's-new.mdx index 8b8e63a0fe..62e9aaca05 100644 --- a/docs/src/pages/introduction/what's-new.mdx +++ b/docs/src/pages/introduction/what's-new.mdx @@ -21,11 +21,11 @@ We’re continually improving our Masala Design System. The following changes ar - feat(daterangepicker): add reverse date range selection support (15a7febb) - feat(tooltip): show tooltip on text overflow (04ebe60e) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -66,11 +66,11 @@ NA - feat(avatarSelection): add new avatar selection component (8c408a0a) - feat(select): add new component select (90d37dd9) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -105,11 +105,11 @@ NA - fix(avatar): remove redundant class implementation in avatar (4b63de6c) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -144,11 +144,11 @@ NA - fix(avatargroup): update border color and popper body dimensions (51c648f0) - fix(datepicker): datePicker popover not opening in fullscreenModal (5238f1e8) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -182,11 +182,11 @@ NA - feat(verticalNav): add expanded state in menu items (84635a2e) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -220,11 +220,11 @@ NA - feat(avatar): add square shape avatar support (09118a08) - feat(avatargroup): add images in avatar group stories (645bed48) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -263,11 +263,11 @@ NA - feat(avatar): add icon and image support (44c8b5ef) - feat(icon): add darker appearance support (b96e06c8 -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -303,11 +303,11 @@ NA - feat(tooltip): add support for conditional rendering to show tooltip (3737d2ac) - feat(table): embed codesandbox for table filter pattern in storybook (210bb99b) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -343,11 +343,11 @@ NA - fix(dropdown): update search input in empty option list (2cc73fe2) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -379,11 +379,11 @@ NA - feat(listbox): add new listbox component (6aca3733) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -415,11 +415,11 @@ NA - feat(docs): update SatisMeter configs (0706d874) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -452,11 +452,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -488,11 +488,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -527,11 +527,11 @@ NA - fix(datepicker): update today date chip's disabled state in datepicker component (6c3e7dc6) - fix(Icon): update material symbols classes and codesandbox link for migration from material icons to material symbols (99c20250) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -565,11 +565,11 @@ NA - feat(pageheader): add back button option and optimize spacing (cddc4250) - fix(icon): update mapping for outlined icon (f979c415) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -608,11 +608,11 @@ NA - feat: add iconType prop in components to switch between icon types (16c567a1) - feat(dropdown): add error and empty state template in dropdown component (3f84aa6b) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -657,11 +657,11 @@ NA - feat(dropdown): add icon variations property in dropdown component (bfcae4bd) - feat(metalist): add icon variations property in metalist component (ce7daba2) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -704,11 +704,11 @@ NA - feat(icon): migration to material symbols from material icons (b4677f51) - feat(card): add action card component (1f6f2a86) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide - feat(icon): material icons are migrated to material symbols. Need to update the test snapshots to update icon name (if used anywhere). (b4677f51) @@ -747,11 +747,11 @@ NA - style(text): add text alignment css classes (f64a919) - feat(timepicker): add error state support for timepicker (9b1078a5) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -786,11 +786,11 @@ NA - feat(chip): add label prefix prop for custom label (3bce8c32) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -832,11 +832,11 @@ NA - feat(stories): stories are grouped in storybook and mdx file (01477a4d) - feat(avatargroup): add tiny size in avatar group (459739fc) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -880,11 +880,11 @@ NA - feat(input): add subcomponent action button for right icon (7e42ddd5) - feat(metricinput): add onKeyDown prop (494fa050) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -954,11 +954,11 @@ NA - feat(tabs): add prop for tab header custom classname (fe54da87) - feat(label): add info icon in label component (8b39db3) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1051,11 +1051,11 @@ NA - fix(divider): update header divider background (4ccc7de5) - fix(pagination): update pagination to prevent decimal values for page (ad7cee98) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1089,11 +1089,11 @@ NA - fix(dropdown): fix option list for all selected options in fetch function (8399f2c5) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1126,11 +1126,11 @@ NA - fix(backdrop): update 80% opacity with 60% opacity in backdrop component (bc46072c) - fix(badge): update subtle text appearances of badge component (3c1c2b47) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1166,11 +1166,11 @@ NA - fix(card): add new shadows in card component (165740cd) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1205,11 +1205,11 @@ NA - feat(docs): add functionality to preview images using Light box on documentation site (970fe8bc) - fix(input): update copy-paste behavior of dates in Input for DatePicker and DateRangePicker component (925af578) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1246,11 +1246,11 @@ NA - feat(docs): add satismeter feedback form support (f880e6a8) - feat(checkbox): add error state in checkbox (f9677fd5) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1287,11 +1287,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1331,11 +1331,11 @@ NA - docs(stories): 50% of the stories containing a style tag in example code are refactored to use utility css or custom css. - fix(security): fixes done to achieve better secure packages in docs site. (ac4f6ccf) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1377,11 +1377,11 @@ NA - docs(site): tabs on page stick under top navigation bar while scrolling the page, which provides ability to switch tabs quickly. (f00e7669) (0a7bdafc) - docs(stories): 50% of the stories containing a style tag in example code are refactored to use utility css or custom css. - fix(security): fixes done to achieve better secure packages. -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1428,11 +1428,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1467,11 +1467,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1506,11 +1506,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1618,11 +1618,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1660,11 +1660,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1707,11 +1707,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1754,11 +1754,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1832,11 +1832,11 @@ NA - feat: adds docs site (44ab33d3) - feat(verticalNav): add custom item renderer option (810a099f) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1877,11 +1877,11 @@ NA ### Highlights -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1916,11 +1916,11 @@ NA ### Highlights -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -1973,11 +1973,11 @@ NA - New component Divider is added (7dc6034d) - Library is now compatible with Node version 14.x LTS (33c736fd) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2021,11 +2021,11 @@ NA - Calendar and DatePicker has new design and features for today date selection now. (7c3df346) - All existing contributors are added to Readme, an option to create request for getting added as contributor and documentation for the same is added. (07db26e9) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2076,11 +2076,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2122,11 +2122,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2163,11 +2163,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2207,11 +2207,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2244,11 +2244,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2281,11 +2281,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2317,11 +2317,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2366,11 +2366,11 @@ NA - New component EditableChipInput added. (18d702a7) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2423,11 +2423,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2459,11 +2459,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2496,11 +2496,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2533,11 +2533,11 @@ NA - New component for tag based input is added as `ChipInput`. (dddcefb0) - Atomic components support all native HTML attributes as props now. (917918b9) -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2588,11 +2588,11 @@ NA - New components added to library for metric values input and verification code input, namely `VerificationCodeInput` and `MetricInput`. - `Enzyme` testing library is removed from project, now our test cases are using react-testing-library and jest only. -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2640,11 +2640,11 @@ NA - Manual changelog creation and review process. - Separate library for charts, removed charts from components library. -### Breaking changes +### Breaking Changes - Recharts is removed from dependency and DonutChart component is removed from library. (adef7f46) -### Migration guide +### Migration Guide - For DonutChart (if you are using) install the library `@innovaccer/charts` and import the component from it like `import { DonutChart } from @innovaccer/charts`. @@ -2678,11 +2678,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2718,11 +2718,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2755,11 +2755,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2792,11 +2792,11 @@ NA - Calendar available in different sizes. -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2832,11 +2832,11 @@ NA - New component: Collapsible - Ability to edit and preview components directly in codeSandbox on single click. -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2877,11 +2877,11 @@ NA NA -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA @@ -2913,11 +2913,11 @@ NA - Support for storybook 6 added. -### Breaking changes +### Breaking Changes NA -### Migration guide +### Migration Guide NA diff --git a/docs/src/pages/mobile/components/actionSheet/usage.mdx b/docs/src/pages/mobile/components/actionSheet/usage.mdx index 46172d1180..f6bdf6dc63 100644 --- a/docs/src/pages/mobile/components/actionSheet/usage.mdx +++ b/docs/src/pages/mobile/components/actionSheet/usage.mdx @@ -16,7 +16,7 @@ In a way, an action sheet is a subset of a bottom sheet containing a list of act Actions in the action sheet can have two types - -#### Title only +#### Title Only An action here only consists of a title apart from the icon at the left. @@ -25,7 +25,7 @@ An action here only consists of a title apart from the icon at the left.

                      -#### Title + Secondary text +#### Title + Secondary Text Action here consists of a secondary helper text alongside the title and the icon at the left. @@ -112,7 +112,7 @@ This type should only be used in case the purpose of the action is unclear throu
                      -#### Height of action sheet +#### Height of Action Sheet The height of the action sheet depends on the number of actions it has. The more the actions, the higher the sheet would be. The height can go upto `93%` of the screen's height to accommodate the vast number of actions. @@ -122,7 +122,7 @@ In case the actions are not accommodated within `93%` of the screen's height, sh

                      -#### Number of actions +#### Number of Actions **At least two actions** should be present when using an action sheet. For a single action item, use a button instead. @@ -130,7 +130,7 @@ It is recommended to have a **maximum of 5-7 actions** in sheet to keep all the
                      -#### Dismissal of action sheet +#### Dismissal of Action Sheet Interacting with an action item closes the sheet. The sheet can be dismissed without interacting by tapping on the close icon button or tapping outside the sheet container. diff --git a/docs/src/pages/mobile/components/badges/usage.mdx b/docs/src/pages/mobile/components/badges/usage.mdx index 999e7dd3c2..e8598739b0 100644 --- a/docs/src/pages/mobile/components/badges/usage.mdx +++ b/docs/src/pages/mobile/components/badges/usage.mdx @@ -95,7 +95,7 @@ Badges are used for tagging entities while pills are very specifically used to d ![When to use badges vs pills](./images/badge-4.png)
                      -#### Badge vs. Status hint +#### Badge vs. Status Hint A badge is used to tag the entities whereas a status hint is used to indicate the status of an entity. ![When to use badges vs status hint](./images/badge-5.png) diff --git a/docs/src/pages/mobile/components/bottomNavigation/usage.mdx b/docs/src/pages/mobile/components/bottomNavigation/usage.mdx index 4e371ba02b..970c5bca91 100644 --- a/docs/src/pages/mobile/components/bottomNavigation/usage.mdx +++ b/docs/src/pages/mobile/components/bottomNavigation/usage.mdx @@ -21,7 +21,7 @@ Bottom navigation consists of at least 2 tabs with one of the tabs in the active
                      -#### Regular height +#### Regular Height It is used for **Mobile- Portrait orientation.** @@ -29,7 +29,7 @@ It is used for **Mobile- Portrait orientation.**
                      -#### Compact height +#### Compact Height To maximize screen utilization, Bottom Navigation with compact height is used for - @@ -117,7 +117,7 @@ To maximize screen utilization, Bottom Navigation with compact height is used fo
                      -#### Tab label +#### Tab Label Keep the label of the tab concise, typically limiting it to a single word. It should convey the purpose along with the icon. Refrain from truncating, shrinking, or wrapping text. @@ -125,7 +125,7 @@ Refrain from truncating, shrinking, or wrapping text. *Do and don't*
                      -#### Number of tabs +#### Number of Tabs Bottom Navigation consists of at least 2 tabs with one in the active state at any point in time. Too many tabs reduce the tappable area. For more than 5 tabs, add a 'More' tab. @@ -141,7 +141,7 @@ For more than 5 tabs, encapsulate the less prominant tabs in a 'More' tab

                      -#### Showing notifications +#### Showing Notifications Tabs can show notifications to indicate the availability of new information. There are two options available - @@ -154,7 +154,7 @@ Tabs can show notifications to indicate the availability of new information. The

                      -#### Scrolling behavior +#### Scrolling Behavior Bottom navigation consists of the same tabs throughout the app to reduce cognitive load. It stays visible by default while scrolling but can be configured to hide in order to offer maximum viewable content while scrolling. diff --git a/docs/src/pages/mobile/components/bottomSheet/interactions.mdx b/docs/src/pages/mobile/components/bottomSheet/interactions.mdx index bee9c143ca..0b0bb0a6fc 100644 --- a/docs/src/pages/mobile/components/bottomSheet/interactions.mdx +++ b/docs/src/pages/mobile/components/bottomSheet/interactions.mdx @@ -2,7 +2,7 @@ import bottomsheet6 from './images/bottomsheet-6.gif' import bottomsheet7 from './images/bottomsheet-7.gif' import bottomsheet5 from './images/bottomsheet-5.gif' -### Opening a Modal Bottom sheet +### Opening a Modal Bottom Sheet
                      @@ -246,7 +246,7 @@ import bottomsheet5 from './images/bottomsheet-5.gif'
                      -### Closing a Bottom sheet +### Closing a Bottom Sheet
                      @@ -489,7 +489,7 @@ import bottomsheet5 from './images/bottomsheet-5.gif'

                      -### Scrolling within a Sheet +### Scrolling Within a Sheet
                      diff --git a/docs/src/pages/mobile/components/bottomSheet/usage.mdx b/docs/src/pages/mobile/components/bottomSheet/usage.mdx index ffc7a88efb..f36ed6bee7 100644 --- a/docs/src/pages/mobile/components/bottomSheet/usage.mdx +++ b/docs/src/pages/mobile/components/bottomSheet/usage.mdx @@ -16,7 +16,7 @@ These sheets display as a result of a user-initiated action. They slide up from
                      -#### Modal bottom sheet +#### Modal Bottom Sheet A sheet of this type appears above other UI elements and must be dismissed in order to interact with the underlying content. As indicated by the @@ -28,7 +28,7 @@ focus to the bottom sheet. Such sheets are dismissible in nature and hence conta

                      -#### Non-Modal bottom sheet +#### Non-Modal Bottom Sheet This sheet displays in-app content that supplements the main view and co-exists with the main UI. It remains visible even when not actively in use, resting at the same elevation as an app. @@ -242,13 +242,13 @@ Bottom sheets can be dismissed in the following ways: Sheets can be closed by clicking the close affordance in the header of the bottom sheets. -##### Tapping the overlay +##### Tapping the Overlay Modal Sheets can also be closed by clicking on the overlay behind sheets.
                      -#### Resizing a sheet with drag handle +#### Resizing a Sheet With Drag Handle A non-modal sheet can be dismissible or not. In case it is not, the users can drag or flick the sheet from the handle bar area to resize and snap it to different heights. diff --git a/docs/src/pages/mobile/components/button/content.mdx b/docs/src/pages/mobile/components/button/content.mdx index 01bd36aa69..859dd81757 100644 --- a/docs/src/pages/mobile/components/button/content.mdx +++ b/docs/src/pages/mobile/components/button/content.mdx @@ -1,4 +1,4 @@ -### Take the right actions +### Take the Right Actions Take the right actions in order to move towards the goal. Use them to make your labels predictable and consequential.
                      @@ -632,7 +632,7 @@ Use it to shut the application and exit the page. -### Remember to +### Remember To * Use verbs for initiating an action. * Use consistent words for labels throughout the product. * Use sentence case for labels and buttons even if the text is long. diff --git a/docs/src/pages/mobile/components/button/usage.mdx b/docs/src/pages/mobile/components/button/usage.mdx index ef2e038e48..1cc676ccdf 100644 --- a/docs/src/pages/mobile/components/button/usage.mdx +++ b/docs/src/pages/mobile/components/button/usage.mdx @@ -36,7 +36,7 @@ Alert buttons are used to highlight a high-impact destructive action.
                      -#### Label button +#### Label Button Label buttons have low emphasis and are generally used for less important actions. Give label buttons a negative offset equal to the left/right padding of the button to align them with the content they're used with. @@ -44,23 +44,23 @@ Label buttons have low emphasis and are generally used for less important action
                      -#### Icon with label +#### Icon With Label Icon with label adds additional visual cues in buttons. The icon can either precede the label or succeed it. -##### Icon left +##### Icon Left ![Icon left button](./images/mbuttons-5.png)
                      -##### Icon right +##### Icon Right ![Icon right button](./images/mbuttons-6.png)
                      -#### Icon button +#### Icon Button Icon button is used to optimize space, especially when the meaning of the icon is very clear. diff --git a/docs/src/pages/mobile/components/card/usage.mdx b/docs/src/pages/mobile/components/card/usage.mdx index 1d6d2c56ea..81204e86d8 100644 --- a/docs/src/pages/mobile/components/card/usage.mdx +++ b/docs/src/pages/mobile/components/card/usage.mdx @@ -12,17 +12,17 @@ Cards act as containers to group related information and actions together. Eleme
                      -#### Default card +#### Default Card Default card is the most used type of card. It consists of a shadow, Shadow 10 by default. ![Default card](./images/mcard-1.png) -#### Flat card +#### Flat Card Flat card is used to either create sections within a default card i.e. card inside a card or use cards on screens with white background. ![Default card](./images/mcard-2.png) -#### High shadow +#### High Shadow High shadow cards are recommended to use when the screen consists of only card type entities. It consists of a shadow, Shadow 40. ![Default card](./images/mcard-3.png) @@ -83,7 +83,7 @@ All the elements(except the card header) are optional and can be omitted accordi
                      -#### Card with Sections +#### Card With Sections A card can have multiple sections to show related but distinct information. A divider can be used to separate different sections in a card. @@ -93,7 +93,7 @@ A divider can be used to separate different sections in a card.

                      -#### Usage of high shadow cards +#### Usage of High Shadow Cards High shadow cards are recommended to use when the screen consists of only card type entities. diff --git a/docs/src/pages/mobile/components/checkbox/usage.mdx b/docs/src/pages/mobile/components/checkbox/usage.mdx index 5ea276b869..bede7e3384 100644 --- a/docs/src/pages/mobile/components/checkbox/usage.mdx +++ b/docs/src/pages/mobile/components/checkbox/usage.mdx @@ -17,7 +17,7 @@ The default variant comes with a label along with the checkbox control. This ent
                      -#### With help text +#### With Help Text The checkbox can have a help text below the label to provide additional information about that particular option. The help text will always be aligned with the label. @@ -66,7 +66,7 @@ Checkboxes can be checked, unchecked, or indeterminate. Each of the selections h ### Usage -#### Checkbox group +#### Checkbox Group The checkbox group consists of a list of multiple options, with a label on the top. The label should clearly state the grouping category or the action to perform. @@ -78,11 +78,11 @@ The checkbox group consists of a list of multiple options, with a label on the t
                      -#### Options alignment +#### Options Alignment The options in a radio group can be aligned either vertically or horizontally. -##### Vertical +##### Vertical For vertical alignment, all the options of the checkbox group align vertically with one option in a line. This type of arrangement should be preferred over the horizontal arrangement for easier reading and scanning. @@ -110,7 +110,7 @@ The indeterminate state of the parent shows a partially checked state when there
                      -#### Overflow behavior +#### Overflow Behavior If the label or the help text with the checkbox component overflows, wrap it to the next line but make sure that the control and the label are top aligned. @@ -118,7 +118,7 @@ If the label or the help text with the checkbox component overflows, wrap it to
                      -#### Checkbox vs radio +#### Checkbox vs Radio Checkboxes allow users to select multiple options whereas radio allows only one selection from a list of mutually exclusive options. @@ -134,7 +134,7 @@ Consider using a checkbox instead of a switch when a confirmation action is requ
                      -#### Checkbox vs dropdown +#### Checkbox vs Dropdown The checkbox is recommended to use when there are fewer than 5-7 options as it is easier for users to compare and select the appropriate option and save an additional tap. diff --git a/docs/src/pages/mobile/components/chips/usage.mdx b/docs/src/pages/mobile/components/chips/usage.mdx index be27e0b063..8c9b59c4ce 100644 --- a/docs/src/pages/mobile/components/chips/usage.mdx +++ b/docs/src/pages/mobile/components/chips/usage.mdx @@ -45,7 +45,7 @@ Action chips are used when there is a group of related actions to perform. These
                      -#### With icon on left +#### With Icon on Left Chips can have an optional icon on the left preceding the label. @@ -53,7 +53,7 @@ Chips can have an optional icon on the left preceding the label.
                      -#### With remove button +#### With Remove Button Selection and input chips can have a remove button on the right of the label to remove them from the view. @@ -147,7 +147,7 @@ Chips have the **default**, **disabled**, and **active** states. In addition to
                      -#### Selection vs action vs input chips +#### Selection vs Action vs Input Chips
                      @@ -204,7 +204,7 @@ Chips have the **default**, **disabled**, and **active** states. In addition to
                      -#### Chips group +#### Chips Group Chips are compact elements and hence are best suitable to be used in groups with the horizontal spacing of `8px` and vertical spacing of `0px` between chips as the tappable area already goes beyond the visible vertical boundaries. @@ -213,11 +213,11 @@ Chips are compact elements and hence are best suitable to be used in groups with

                      -#### Overflow behavior +#### Overflow Behavior
                      -##### Wrapped to next line +##### Wrapped to Next Line Chips in a chip group can wrap to a new row if all the chips need to be visible. However, if there are more than two rows, consider using horizontal scrolling to save the vertical space. @@ -243,7 +243,7 @@ The chips group can scroll horizontally if the width exceeds the viewport. A lin
                      -#### Action chips vs buttons +#### Action Chips vs Buttons The number and label of action chips are contextual to the content and appear dynamically as a group of multiple interactive elements, while buttons are expected to appear consistently and with a familiar call to action. @@ -257,7 +257,7 @@ The number and label of action chips are contextual to the content and appear dy
                      -#### Selection chips vs radio/checkbox +#### Selection Chips vs Radio/checkbox Selection chips generally provide an immediate response but in forms where there is a space crunch, they can replace radio and checkboxes in order to display all the available options in a compact area. diff --git a/docs/src/pages/mobile/components/dialogs/interactions.mdx b/docs/src/pages/mobile/components/dialogs/interactions.mdx index a7d252129d..97c19ca599 100644 --- a/docs/src/pages/mobile/components/dialogs/interactions.mdx +++ b/docs/src/pages/mobile/components/dialogs/interactions.mdx @@ -8,7 +8,7 @@ import dialogs14 from './images/dialogs-14.gif'
                      -#### Opening a Modal Bottom sheet +#### Opening a Modal Bottom Sheet
                      @@ -251,11 +251,11 @@ import dialogs14 from './images/dialogs-14.gif'
                      -#### Closing a Bottom sheet +#### Closing a Bottom Sheet
                      -##### When the action takes the users back +##### When the Action Takes the Users Back
                      @@ -497,7 +497,7 @@ import dialogs14 from './images/dialogs-14.gif'

                      -##### When the action takes the users forward +##### When the Action Takes the Users Forward
                      @@ -744,7 +744,7 @@ import dialogs14 from './images/dialogs-14.gif'
                      -#### Single step +#### Single Step
                      @@ -753,7 +753,7 @@ import dialogs14 from './images/dialogs-14.gif'

                      -##### Opening the dialog +##### Opening the Dialog
                      @@ -835,7 +835,7 @@ import dialogs14 from './images/dialogs-14.gif'

                      -##### Closing the dialog +##### Closing the Dialog
                      @@ -917,7 +917,7 @@ import dialogs14 from './images/dialogs-14.gif'

                      -#### Multi-step +#### Multi-Step
                      @@ -926,7 +926,7 @@ import dialogs14 from './images/dialogs-14.gif'

                      -##### Opening the dialog +##### Opening the Dialog
                      @@ -1008,7 +1008,7 @@ import dialogs14 from './images/dialogs-14.gif'

                      -##### Navigating to the next steps +##### Navigating to the Next Steps
                      @@ -1090,7 +1090,7 @@ import dialogs14 from './images/dialogs-14.gif'

                      -##### Navigating back to the previous steps +##### Navigating Back to the Previous Steps
                      @@ -1172,7 +1172,7 @@ import dialogs14 from './images/dialogs-14.gif'

                      -##### Closing the dialog +##### Closing the Dialog
                      diff --git a/docs/src/pages/mobile/components/dialogs/usage.mdx b/docs/src/pages/mobile/components/dialogs/usage.mdx index bf97bc5320..41a9a76167 100644 --- a/docs/src/pages/mobile/components/dialogs/usage.mdx +++ b/docs/src/pages/mobile/components/dialogs/usage.mdx @@ -45,7 +45,7 @@ Informational dialogs are used to convey information to users where interaction

                      -#### Full screen dialogs (Mobile only) +#### Full Screen Dialogs (Mobile Only) As the name suggests, such dialogs take up the entire screen and are suitable for end-to-end self-contained transactions _(which have a clear start and endpoint)_ such as creating, editing, or deleting an entity. @@ -110,7 +110,7 @@ The **Cancel button ( X )** present at the top left is used to return to the mai
                      -##### Single step +##### Single Step These are the most basic type of full-screen dialogs, where there is only one step in the flow.  @@ -119,7 +119,7 @@ These are the most basic type of full-screen dialogs, where there is only one st

                      -##### Multi step +##### Multi Step For cases where the transactions such as creating an entity take more than one step, stacking of the subpages is done. The users can navigate back through the steps using the Back button(←) which takes place of the Cancel button(X) from the 2nd step onwards. @@ -204,7 +204,7 @@ For cases where the transactions such as creating an entity take more than one s
                      -#### Position and alignment +#### Position and Alignment A dialog is a type of modal and hence has the highest elevation in an app. They are positioned centrally and appear with overlays to dim the background giving focus to the dialog. @@ -226,7 +226,7 @@ A dialog is a type of modal and hence has the highest elevation in an app. They
                      -##### Appearance & count +##### Appearance & Count Dialogs present a focused and limited set of actions. The number of actions **must not exceed two** which are primary and secondary. In case of an informational dialog, a single action is enough. @@ -248,24 +248,24 @@ However, if the label of the action is too long to fit horizontally then for tho

                      -#### Dismissing behavior +#### Dismissing Behavior Dialogs may be dismissed in the following ways:
                      -##### Tapping the secondary/dismissive action +##### Tapping the Secondary/dismissive Action The dialog always consists of a secondary(dismissive) action, tapping on which will dismiss the dialog.
                      -##### Tapping the system's back button +##### Tapping the System's Back Button Dialogs can also be dismissed by tapping the back button of the system (applicable only to Android).
                      -##### Tapping the overlay +##### Tapping the Overlay Dialogs can also be dismissed by tapping outside the dialog. However, this behavior is set to be inactive by default. \ No newline at end of file diff --git a/docs/src/pages/mobile/components/dropdowns/usage.mdx b/docs/src/pages/mobile/components/dropdowns/usage.mdx index 13deebf051..894f4afc4d 100644 --- a/docs/src/pages/mobile/components/dropdowns/usage.mdx +++ b/docs/src/pages/mobile/components/dropdowns/usage.mdx @@ -18,7 +18,7 @@ Dropdown is made up of 2 key components - a custom **button** which acts as a tr ### Variants
                      -#### Button variants +#### Button Variants The custom button for dropdowns comes with a few variants - ##### Standard @@ -27,13 +27,13 @@ The standard variant consists of just text which changes its state when one or m ![Standard button variant](./images/dropdown-2.png) -##### With icon +##### With Icon This variant comes with an icon in the left preceding the text to provide additional cues regarding the type of the options. ![With icon button variant](./images/dropdown-3.png) -##### Inline label +##### Inline Label This variant comes with a label preceding the text and can be used at places where there is a space crunch. ![Inline label button variant](./images/dropdown-4.png) @@ -47,7 +47,7 @@ Dropdowns come in **2 sizes** - regular and small. ### States
                      -#### Button states +#### Button States The custom button comes in **3 states** - default, active and disabled. ![States of the dropdown button](./images/dropdown-6.png) @@ -58,18 +58,18 @@ The custom button comes in **3 states** - default, active and disabled. ### Usage
                      -#### Label position +#### Label Position The label provides a better understanding of what kind of selection is expected. Labels can be placed either on the top of the dropdown or can be placed inline with the value or placeholder of the dropdown. ![[Left] Label on top, [Right] Inline label](./images/dropdown-7.png) -#### Help text +#### Help Text Help text can be provided beneath a dropdown to add context regarding the type of input required just like the input fields. ![Dropdown with help text](./images/dropdown-8.png) -#### For multi-select +#### For Multi-Select Native picker supports single-select from a list of options. To provide multi-select, use a list in a bottom sheet or a full screen dialog. ![Use lists for multi-select](./images/dropdown-9.png) diff --git a/docs/src/pages/mobile/components/inputs/usage.mdx b/docs/src/pages/mobile/components/inputs/usage.mdx index 756494e18b..fabffa57aa 100644 --- a/docs/src/pages/mobile/components/inputs/usage.mdx +++ b/docs/src/pages/mobile/components/inputs/usage.mdx @@ -23,7 +23,7 @@ Basic input contains the input box, text, an optional help text, or an optional

                      -#### Icon left +#### Icon Left This type of input contains an icon on the left of the text along with an optional icon on the right. @@ -32,7 +32,7 @@ This type of input contains an icon on the left of the text along with an option

                      -#### With label +#### With Label Label helps the users understand what sort of information is required. It should be concise. Effective labeling improves usability. @@ -49,13 +49,13 @@ This variant of input comes with a label on top, an optional required indicator

                      -#### Metric input +#### Metric Input Metric input takes numbers as input. It can have increment/decrement actions, prefixes, or suffixes according to the requirements. Tapping this type of input will display a number pad on mobile/tablet devices. -##### Basic metric +##### Basic Metric This type of metric input has optional **increment/decrement** actions on the left and right sides of the input text respectively. Additionally, the user can tap on the input text and enter the desired value directly. @@ -73,7 +73,7 @@ Basic metric comes in two sizes:

                      -##### With prefix/suffix +##### With Prefix/suffix Metric inputs can either have **prefixes** like the currency symbols($, €, ₹, etc) or **suffixes** like the units of measures(kg, mm, in, lbs, etc) to provide additional information about the data being input. @@ -86,7 +86,7 @@ Metric inputs can either have **prefixes** like the currency symbols($, €, ₹

                      -#### Free text area +#### Free Text Area Free text area lets users enter data much longer than a basic input. It can also have a scrollbar. @@ -177,7 +177,7 @@ Verification code input allows users to enter the code sent to their systems to
                      -#### Required vs optional +#### Required vs Optional Inputs can be marked as optional or required depending upon the context. To avoid unnecessary clutter, mark only the minority fields as optional or required. @@ -192,7 +192,7 @@ Inputs can be marked as optional or required depending upon the context. To avoi

                      -#### Help text +#### Help Text Help text provides users additional information regarding the input. It appears just below the input box. @@ -207,7 +207,7 @@ It should be preferred over the info icon on the right of the text as that icon

                      -#### Using an icon on right +#### Using an Icon on Right The icon on right should be used when interacting with that icon manipulates the input text directly. diff --git a/docs/src/pages/mobile/components/list/usage.mdx b/docs/src/pages/mobile/components/list/usage.mdx index bfcd9aa5db..f637c38b5a 100644 --- a/docs/src/pages/mobile/components/list/usage.mdx +++ b/docs/src/pages/mobile/components/list/usage.mdx @@ -34,21 +34,21 @@ The default list item variant consists of just a single line of text, in order t

                      -#### With secondary text +#### With Secondary Text This variant comes with a secondary text just below the primary one. ![List with secondary text](./images/list-2.png)

                      -#### With tertiary text +#### With Tertiary Text This variant comes with a tertiary text along with the secondary & primary text. ![List with tertiary text](./images/list-3.png)

                      -#### With a supporting visual +#### With a Supporting Visual This variant gives an option to have an icon, image, avatar or checkbox in the left just before the text starts. ![List with a supporting visual](./images/list-4.png) diff --git a/docs/src/pages/mobile/components/message/usage.mdx b/docs/src/pages/mobile/components/message/usage.mdx index a8199c0426..b227b0d448 100644 --- a/docs/src/pages/mobile/components/message/usage.mdx +++ b/docs/src/pages/mobile/components/message/usage.mdx @@ -16,7 +16,7 @@ This is the default variant when it comes to messages. It has a significant visu ![Standard message](./images/messages-1.png) -#### Inline message +#### Inline Message It is the less attention-grabbing counterpart and hence can be used in between components or patterns. ![Inline message](./images/messages-2.png) @@ -24,12 +24,12 @@ It is the less attention-grabbing counterpart and hence can be used in between c ### Variants Standard message comes with a few variants - -#### With title +#### With Title A title can be shown at the top of the messages. It is typically used to summarize the description in case it's long. ![Standard message with title](./images/messages-3.png) -#### With actions +#### With Actions Actions can be a part of messages and are typically used to directly or indirectly dismiss them. ![Standard message with actions](./images/messages-4.png) @@ -62,7 +62,7 @@ The success variant is used when the inline message needs to notify the successf ### Properties -#### Standard message +#### Standard Message @@ -106,7 +106,7 @@ The success variant is used when the inline message needs to notify the successf

                      -#### Inline message +#### Inline Message @@ -138,10 +138,10 @@ The success variant is used when the inline message needs to notify the successf ### Usage
                      -#### Non-dismissive +#### Non-Dismissive Messages are non-dismissive in nature. They appear with the rest of the components and cannot be dismissed directly. -#### Position & width of the message component +#### Position & Width of the Message Component ##### Standard Message component always appears at the top of a section but just below the header. The width of the message component always spans the width of its container (leaving the appropriate padding) or as per the content appearing below it. @@ -149,7 +149,7 @@ Message component always appears at the top of a section but just below the head ![Position of standard message](./images/messages-9.png)
                      -##### Inline message +##### Inline Message Inline message component appears inline or below the component it is related to, with a 4px margin at the top and spans the width of the component. ![Position of inline message](./images/messages-10.png) @@ -157,14 +157,14 @@ Inline message component appears inline or below the component it is related to,

                      -#### Standard vs. Inline message +#### Standard vs. Inline Message Inline message variant should be used when feedback relative to some specific content has to be provided to the users. Whereas, the standard message variant should be used when collective feedback for a section or an entire page has to be provided to the users. ![Standard vs. inline message](./images/messages-11.png)

                      -#### Inline message vs Help text +#### Inline Message vs Help Text Inline message is used to provide inline feedback regarding a state or action and hence it is reactive (only appears after something has happened, to provide feedback). Whereas help text is used to provide additional information typically appearing just below a component e.g. input, dropdown, etc. ![Inline message vs. help text](./images/messages-12.png) diff --git a/docs/src/pages/mobile/components/metaList/usage.mdx b/docs/src/pages/mobile/components/metaList/usage.mdx index 019f72fa85..ad9af27096 100644 --- a/docs/src/pages/mobile/components/metaList/usage.mdx +++ b/docs/src/pages/mobile/components/metaList/usage.mdx @@ -14,7 +14,7 @@ The default variant includes just text. ![Default meta list](./images/metaList-1.png)
                      -#### With icon +#### With Icon This variant comes with an icon in the left preceding the text to provide additional cues regarding the meta/secondary information. ![Meta list with icon in the left](./images/metaList-2.png) @@ -64,7 +64,7 @@ Meta list comes in two sizes - regular and small.
                      ### Usage -#### In list item +#### In List Item List items can use meta list to display secondary/meta information. ![Meta list in the page header](./images/metaList-4.png) diff --git a/docs/src/pages/mobile/components/pageHeaders/usage.mdx b/docs/src/pages/mobile/components/pageHeaders/usage.mdx index ca06aa9c61..7f4b7c3ba3 100644 --- a/docs/src/pages/mobile/components/pageHeaders/usage.mdx +++ b/docs/src/pages/mobile/components/pageHeaders/usage.mdx @@ -41,7 +41,7 @@ Default variant consists of just the heading. In level 1, it also comes with a b ![Default level 1 header](./images/pageHeaders-4.png)
                      -#### With subheading +#### With Subheading This variant comes with a subheading just below the heading. **Level 0** @@ -54,7 +54,7 @@ This variant comes with a subheading just below the heading. ![Level 1 header with subheading](./images/pageHeaders-6.png)
                      -#### With icon buttons +#### With Icon Buttons This variant comes with an option to have up to **2 icon buttons** in the top right of the header. **Level 0** @@ -67,7 +67,7 @@ This variant comes with an option to have up to **2 icon buttons** in the top ri ![Level 1 header with 1 icon button](./images/pageHeaders-2.png)
                      -#### With label button +#### With Label Button This variant comes with an option to have a label button in the top right of the header. **Level 0** @@ -80,7 +80,7 @@ This variant comes with an option to have a label button in the top right of the ![Level 1 header with a label button](./images/pageHeaders-8.png)
                      -#### With tabs +#### With Tabs This variant comes with an option to have tabs just below the heading. **Level 0** @@ -122,7 +122,7 @@ Page headers come in **2 sizes** - prominent and compact.
                      ### Usage -#### Scrolling behavior +#### Scrolling Behavior As user scrolls the page content, the prominent header transitions to the compact header to maximize the space available for content consumption. On scroll, the background of the header becomes white with a divider appearing in the bottom, to create a sense of visual separation. @@ -130,7 +130,7 @@ On scroll, the background of the header becomes white with a divider appearing i ![Before Scrolling (Left) vs After Scrolling (Right)](./images/pageHeaders-13.png)
                      -#### Actions combination +#### Actions Combination The actions on the extreme left and the extreme right of the header are purely optional. However, the number of actions should not exceed 2 for any side. **Actions on Left** @@ -151,7 +151,7 @@ On the right side, either a label button or a maximum of two icon buttons can be ![Either a label button or a maximum of two icon buttons can be used on the right side.](./images/pageHeaders-15.png)
                      -#### Modal vs non-modal page header +#### Modal vs Non-Modal Page Header Non-modal pages are pages that can stack on top of one another. Users can navigate back through the previous levels using the back arrow (**←**) placed at the top left of the header. While modal pages are those which the users can dismiss or cancel using the close button (**X**) placed at the top left of the header. diff --git a/docs/src/pages/mobile/components/radio/usage.mdx b/docs/src/pages/mobile/components/radio/usage.mdx index 5abb0c2531..b3de3dcd10 100644 --- a/docs/src/pages/mobile/components/radio/usage.mdx +++ b/docs/src/pages/mobile/components/radio/usage.mdx @@ -16,7 +16,7 @@ The default variant comes with a label along with the radio control.

                      -#### With help text +#### With Help Text Radio can have a help text below the label to provide additional information about that particular option. The help text will always be aligned with the label. Tapping over the help text does not change the state of the radio. @@ -40,7 +40,7 @@ Radio comes in **2 selection states** - selected and unselected. And each of the
                      ### Usage -#### Radio group +#### Radio Group The radio group consists of a list of multiple options, with a label on the top. The label should clearly state the grouping category or the action to perform. **Note**: Minimum spacing between multiple options as well as the 1st option and group label should be `0px`. @@ -49,7 +49,7 @@ The radio group consists of a list of multiple options, with a label on the top.

                      -#### Options alignment +#### Options Alignment The options in a radio group can be aligned either verticallyorhorizontally. ##### Horizontal @@ -68,21 +68,21 @@ For vertical alignment, all the options of the radio group align vertically with

                      -#### Overflow behavior +#### Overflow Behavior If the label or the help text with the radio component overflows, wrap it to the next line but make sure that the control and the label are top aligned. ![Overflow behaviour in radio](./images/radio-8.png)

                      -#### Radio vs. checkbox +#### Radio vs. Checkbox Checkboxes allow users to select multiple options whereas radio allows only one selection from a list of mutually exclusive options. ![(Left) Radio vs (Right) Checkbox](./images/radio-9.png)

                      -#### Radio vs. dropdown +#### Radio vs. Dropdown Radio is recommended to use when there are fewer than 5-7 options as it is easier for users to compare and select the appropriate option and save an additional tap. However, if the number of options exceeds 5-7 or if the space is limited and the options can be collapsed then it is recommended to use dropdowns to utilize the space. @@ -91,6 +91,6 @@ However, if the number of options exceeds 5-7 or if the space is limited and the

                      -#### Default selection +#### Default Selection * If a radio group is optional to fill, no option from the list should be selected by default. * Even if the radio group is mandatory to fill, it is recommended not to have a default option selected in order to avoid submitting that option by mistake. However, if the need arises you have the choice to make an option selected by default. In that case, make sure to select the safest and most likely option. \ No newline at end of file diff --git a/docs/src/pages/mobile/components/slider/usage.mdx b/docs/src/pages/mobile/components/slider/usage.mdx index 6a2cf6b844..9632b6a079 100644 --- a/docs/src/pages/mobile/components/slider/usage.mdx +++ b/docs/src/pages/mobile/components/slider/usage.mdx @@ -10,13 +10,13 @@ keywords: ['Range', 'Rangeinput'] Based on usage, sliders are of two types - -#### Default slider +#### Default Slider The default slider can be used whenever selection of a single value is required out of a range. ![Default slider](./images/slider-1.png) -#### Range slider +#### Range Slider Range slider is used if the user wants to select a range instead of a single value. @@ -26,14 +26,14 @@ Range slider is used if the user wants to select a range instead of a single val Based on selection, sliders have two variants - -#### Discrete slider +#### Discrete Slider In the case of discrete slier, while dragging slider knob will snap from one tick mark to the other. No values between two tick marks can be selected. ![Discrete slider](./images/slider-3.png) -#### Free slider +#### Free Slider In the case of free slider, while dragging slider knob can move to each and every intermediate value possible. Values between tick marks can also be selected. @@ -74,7 +74,7 @@ Values between tick marks can also be selected. ### Usage -#### Pairing with metric inputs +#### Pairing With Metric Inputs Use slider with metric inputs for better accessibility in the case where **choosing a specific value** is important. diff --git a/docs/src/pages/mobile/components/statusHint/usage.mdx b/docs/src/pages/mobile/components/statusHint/usage.mdx index e5dbd03d08..5cb073bc81 100644 --- a/docs/src/pages/mobile/components/statusHint/usage.mdx +++ b/docs/src/pages/mobile/components/statusHint/usage.mdx @@ -21,7 +21,7 @@ Status hint comes in 5 Appearances -
                      -#### Warning +#### Warning

                      @@ -85,11 +85,11 @@ Status hint comes in 5 Appearances -

                      -### Usage +### Usage
                      -#### Overflow behavior +#### Overflow Behavior When the label is too long to fit the horizontal space available, it wraps to form another line. @@ -98,7 +98,7 @@ When the label is too long to fit the horizontal space available, it wraps to fo

                      -#### Status hint vs. Badge +#### Status Hint vs. Badge A status hint is used to indicate the status of an entity whereas a badge is used to tag the entities. diff --git a/docs/src/pages/mobile/components/steppers/usage.mdx b/docs/src/pages/mobile/components/steppers/usage.mdx index 2293b281b9..39ba744e32 100644 --- a/docs/src/pages/mobile/components/steppers/usage.mdx +++ b/docs/src/pages/mobile/components/steppers/usage.mdx @@ -52,20 +52,20 @@ Stepper is used to help users keep track of their progress in a multi-step workf
                      -#### Actions placement +#### Actions Placement
                      -##### Back and Next actions +##### Back and Next Actions Back and Next actions are placed at the bottom of the screen. -##### Cancel action +##### Cancel Action To cancel or close the entire process, the close button is present in the header. -##### Skip action +##### Skip Action To skip a specific step, a label button is used in the header. @@ -75,7 +75,7 @@ To skip a specific step, a label button is used in the header.
                      -#### Skipping a step +#### Skipping a Step A stepper can also have a skippable/optional step. Users can skip the step for the time being and can navigate back to it, to fill it again before completing the progress. @@ -86,7 +86,7 @@ In case of an optional step, an additional step-specific action “Skip step”

                      -##### Skipping the last step +##### Skipping the Last Step In case the last step is supposed to be optional, relabel the Skip button to **Skip** and **Finish**. @@ -95,7 +95,7 @@ In case the last step is supposed to be optional, relabel the Skip button to **S

                      -#### Mandatory vs. Optional step +#### Mandatory vs. Optional Step In case of a mandatory step, the 'Next' button is disabled until and unless all the required fields are completed. @@ -105,7 +105,7 @@ In case of an optional step, the entire step can be skipped using the **"Skip st ![Skipping a step](./images/stepper-5.png) -#### Closing the process +#### Closing the Process An action sheet can be used to present additional closing actions such as 'Save as draft' before closing the process using the stepper. diff --git a/docs/src/pages/mobile/components/tabs/usage.mdx b/docs/src/pages/mobile/components/tabs/usage.mdx index 9742a456b1..39fd3f2e22 100644 --- a/docs/src/pages/mobile/components/tabs/usage.mdx +++ b/docs/src/pages/mobile/components/tabs/usage.mdx @@ -17,13 +17,13 @@ Default variant consists of just a label. ![Default tabs](./images/tabs-1.png)
                      -#### With icon +#### With Icon This variant consists of an icon along with the label. Icons should only be used when they add additional value to the label. ![Tabs with icons](./images/tabs-2.png)
                      -#### With count +#### With Count This variant displays the count along with the label. ![Tabs with count](./images/tabs-3.png) @@ -38,7 +38,7 @@ Tabs come in **4 states** - default, selected, active, and disabled.
                      ### Usage -#### Tabs vs bottom navigation +#### Tabs vs Bottom Navigation Tabs are used to group related content and act as filters. While bottom navigation on the other hand is used to navigate between independent pages. ![Related content segregated using - (Left) Tabs vs (Right) Bottom navigation](./images/tabs-5.png) @@ -52,7 +52,7 @@ Notifications can be shown with a red dot alongside the label to indicate the av

                      -#### Overflow behavior +#### Overflow Behavior Tabs can scroll horizontally if the width of the tab group exceeds the viewport. A linear gradient shows up on either edge to indicate the overflowed tabs. **Note**: Whenever possible, the selected tab should be at the center of the screen in case of an overflow. @@ -61,8 +61,8 @@ Tabs can scroll horizontally if the width of the tab group exceeds the viewport.

                      -#### Tab label +#### Tab Label Tabs should have short and scannable labels, generally limited to a single word. -#### Maximum tabs +#### Maximum Tabs Too many tabs can unnecessarily clutter the UI. Hence it is recommended to **not use more than 5 tabs** at once. However, it is possible to use more than 5 tabs if the need arises. \ No newline at end of file diff --git a/docs/src/pages/mobile/components/toast/interactions.mdx b/docs/src/pages/mobile/components/toast/interactions.mdx index cb2efc8828..cf5cc0926c 100644 --- a/docs/src/pages/mobile/components/toast/interactions.mdx +++ b/docs/src/pages/mobile/components/toast/interactions.mdx @@ -1,4 +1,4 @@ -### Showing the toast +### Showing the Toast ![Showing the toast](./images/toast-interactions-1.gif)
                      @@ -53,7 +53,7 @@
                      -### Hiding the toast +### Hiding the Toast ![Hiding the toast](./images/toast-interactions-2.gif)
                      diff --git a/docs/src/pages/mobile/components/toast/usage.mdx b/docs/src/pages/mobile/components/toast/usage.mdx index 3f8f195e42..04edc249e4 100644 --- a/docs/src/pages/mobile/components/toast/usage.mdx +++ b/docs/src/pages/mobile/components/toast/usage.mdx @@ -54,7 +54,7 @@ Note that in both the cases, it is vertically center aligned. ![(Left) Toasts in smaller screens vs (Right) Toasts in wide UIs](./images/toast-5.png)
                      -#### When to use toasts +#### When to Use Toasts If the UI changes as a result of the action that users took, then the UI itself is enough to convey the feedback. There is no need to show a toast for such cases. But if the actions do not have a direct impact on the UI then toasts should be considered. **Note**: In the example below the state of the icon is enough to give feedback to the users, and hence there is no need to show a toast. @@ -68,7 +68,7 @@ Toasts appear at the bottom of the screen (aligned centrally) in front of any co ![(Left) Devices with safe area vs (Right) Devices without safe area](./images/toast-7.png)
                      -#### Toast with Actions +#### Toast With Actions Use toast with actions when you want the users to take an action after reading the message. ![A toast with actions](./images/toast-8.png) diff --git a/docs/src/pages/mobile/foundations/layout/index.mdx b/docs/src/pages/mobile/foundations/layout/index.mdx index 7d2c921e25..dbdc7b2cd2 100644 --- a/docs/src/pages/mobile/foundations/layout/index.mdx +++ b/docs/src/pages/mobile/foundations/layout/index.mdx @@ -4,7 +4,7 @@ description: Layout guidelines for designing mobile apps. showMobile: true --- -### Screen size +### Screen Size iOS devices offer a variety of screen sizes and resolutions to work with. Each and every device has different values of pixel density, size in points, etc. Refer to the following table to see all the specifications for iPhone 11 Pro: @@ -31,7 +31,7 @@ Refer to the following table to see all the specifications for iPhone 11 Pro: **Note:** In Figma, design on 1x scale where 1pt = 1px. Refer to this [article](https://medium.com/@peternowell/pixel-density-demystified-a4db63ba2922) to know more. -### Safe area & margins +### Safe Area & Margins Safe area helps you place your content within the visible portion of the overall interface i.e. positioning of your content so that they are not obstructed by other content. A standard margin of 16 px is applied around the content to restrict the width of the content for optimal readability. @@ -41,12 +41,12 @@ A standard margin of 16 px is applied around the content to restrict the width o ![Safe area in iPhone](./images/layout-1.png)
                      -### Touch targets +### Touch Targets While designing the app interfaces, it's recommended to make the touch targets for interactive components bigger rather than smaller so that it's easier for users to tap. According to the [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/accessibility#Buttons-and-controls), the minimum size for the interactive components should be **44px x 44px**. Along with the size, make sure that the touch targets are separated well enough so that the users don't end up clicking on the wrong component. -### Background color +### Background Color To keep the experience uniform across all the devices, the background color on a mobile app is the same as web i.e. Stone Lightest (#F4F4F4). Sheets and modals have a white background (#FFFFFF). ![Safe area in iPhone](./images/layout-2.png) \ No newline at end of file diff --git a/docs/src/pages/mobile/foundations/page-types/index.mdx b/docs/src/pages/mobile/foundations/page-types/index.mdx index 3e93f1b33f..7d5143a331 100644 --- a/docs/src/pages/mobile/foundations/page-types/index.mdx +++ b/docs/src/pages/mobile/foundations/page-types/index.mdx @@ -14,7 +14,7 @@ Such a page consists of a header at the top followed by the content in the body. ![Default page](./images/pageTypes-1.png)
                      -#### Page with primary navigation +#### Page With Primary Navigation Such pages generally have a header at the top and primary navigation tabs at the bottom. This type of page is ideal when there multiple screens at the L0 level. ![ Page with primary navigation](./images/pageTypes-2.png) diff --git a/docs/src/pages/patterns/email/usage.mdx b/docs/src/pages/patterns/email/usage.mdx index 1c8eb433a9..7e3f5fe2f9 100644 --- a/docs/src/pages/patterns/email/usage.mdx +++ b/docs/src/pages/patterns/email/usage.mdx @@ -18,7 +18,7 @@ keywords: ['Email'] ### Usage
                      -#### Dynamic content +#### Dynamic Content The body of email can be composed of text, images or more. For e.g. Button, list, etc. diff --git a/docs/src/pages/patterns/fileUploader/usage.mdx b/docs/src/pages/patterns/fileUploader/usage.mdx index 60b1277b5c..fb7a1eb524 100644 --- a/docs/src/pages/patterns/fileUploader/usage.mdx +++ b/docs/src/pages/patterns/fileUploader/usage.mdx @@ -45,14 +45,14 @@ Dropzone component comes in **4 states** - default, active, error and disabled. ### Usage
                      -#### Uploading to the server +#### Uploading to the Server Basis on the requirement, file uploader can either - - Upload the file directly to the server the moment a user picks/drops a file **OR** - Upload the file only when an Upload, Submit, or similar action is triggered by the user. It is suggested to use the latter so as to minimize the resource load (network calls). -#### Status of file uploading +#### Status of File Uploading To show the status of a file being uploaded, a file uploader item is used which contains information such as the file name, upload progress, any error, etc. Progress ring is used to indicate the progress. ![States of file uploading](./images/fileUploader-5.png) @@ -70,7 +70,7 @@ Here the height of the card remains the same and it can accommodate a maximum of
                      #### Errors -##### Before dropping files +##### Before Dropping Files File uploader provides the option to indicate that a file format is not accepted or the file size exceeds the limit through different visual cues. **Note**: Users can still drop the file. In that case, a file uploader item will be used to show the error as illustrated in the next section. @@ -79,14 +79,14 @@ File uploader provides the option to indicate that a file format is not accepted

                      -##### While uploading +##### While Uploading File uploader also provides the option to indicate that there was an error while uploading the file. These types of errors are shown using the file uploader item. ![Error while uploading a file](./images/fileUploader-8.jpg)

                      -#### File processing required +#### File Processing Required File uploader is a simple component and it does not involve processing or analyzing file(s) as a part of it. But there can be cases when you need to process or analyze the uploaded file to check whether the content of the file matches your requirement(s). If the case arises, always process or analyze the file after an Upload, Submit, or similar action has been triggered by the users. @@ -95,7 +95,7 @@ If the case arises, always process or analyze the file after an Upload, Submit,

                      -#### File uploader in a form +#### File Uploader in a Form The state of the submit button in a form depends on whether the file will be uploaded right away on the server or if it will be uploaded after the users click on submit. 1. If the file has been uploaded to the server already then the submit button becomes enabled only when the file has been uploaded successfully. diff --git a/docs/src/pages/patterns/form/usage.mdx b/docs/src/pages/patterns/form/usage.mdx index 5f0a1ba6a1..ec1ae7f9cc 100644 --- a/docs/src/pages/patterns/form/usage.mdx +++ b/docs/src/pages/patterns/form/usage.mdx @@ -18,21 +18,21 @@ While using a multi-column form, make sure that the fields that are placed adjac ### Types Forms can come in various types such as - -#### Single step forms +#### Single Step Forms These are the most basic forms that can be completed in a single step. Clicking the primary action submits the form. ![A single step form](./images/form-2.png) A single step form -#### Multi-step forms +#### Multi-Step Forms -##### Two steps +##### Two Steps Instead of using a stepper for two step forms, it is recommended to have a way to go back to the previous step such as a back button in the header or a ‘Previous’ button in the footer. ![A two step form](./images/form-3.png) A two step form -##### More than two steps +##### More Than Two Steps Multi step forms generally have three or more steps. These forms should be created using [Steppers](/components/steppers/usage/). Actions in such forms: @@ -49,7 +49,7 @@ Actions in such forms: ### Usage -#### Layout of the form fields +#### Layout of the Form Fields Form fields can be aligned in various ways depending upon the space available. ##### Vertical @@ -70,7 +70,7 @@ In these forms, inputs fields are horizontally stacked in order to save vertical ![Inline arrangement of form fields](./images/form-32.png) Inline arrangement of form fields -#### Position and order of actions +#### Position and Order of Actions Number of actions in a form should be limited i.e. 2 or 3 at max. If there is a requirement of tertiary action right where the primary and secondary actions are, consider using the transparent button. Primary actions should be disabled until all of the required fields have been filled. A tooltip showing appropriate text should appear while hovering over that disabled action. @@ -102,7 +102,7 @@ Content here takes space that is less than 75% of the height. Hence, the actions ![When content takes less than 75% of the height](./images/form-35.png) When content takes less than 75% of the height -##### In page forms +##### In Page Forms In a page-long form, users scans through F pattern, hence the actions should be on the bottom left. Primary action would be the leftmost action followed by other actions (if any). One can use inline labels as well, because plenty of vertical space is available. **Note:** It is recommended to use large size of buttons in the case of such forms. @@ -112,7 +112,7 @@ In a page-long form, users scans through F pattern, hence the actions should be ![Form in a full screen modal](./images/form-17.png) Form in a full screen modal -#### Required vs. Optional fields +#### Required vs. Optional Fields Form fields can be marked as optional or required depending upon the context. To avoid unnecessary clutter, mark only the minority fields as optional or required. It is recommended to keep the notations of required and optional fields consistent throughout the app as different notations can confuse users. @@ -132,7 +132,7 @@ It is recommended to keep the notations of required and optional fields consiste ![Using “(optional)” tag](./images/form-19.png) Using “(optional)” tag -#### Validation and feedback +#### Validation and Feedback Forms can be validated either while typing or after clicking the primary action to submit the form depending upon the field type. For example: password field while creating an account should be verified while typing whereas password field while signing in to an account can be verified after clicking on primary action. @@ -141,31 +141,31 @@ After validating, proper feedback should be conveyed to the users in order to he Feedback in a form can be shown in multiple ways. Some of them are: -##### Inline feedback +##### Inline Feedback Errors in form fields are shown using the [Inline message](/components/message/usage/#inline-message-1) component and should be persistent until the error gets resolved. ![Inline feedback for input field](./images/form-11.png) Inline feedback for input field -##### Collective form feedback +##### Collective Form Feedback In case of errors in the overall form submission such as required fields are not filled, etc., use a [standard message](/components/message/usage/#standard) component. These kinds of errors generally occur after clicking on the primary action to submit the form. ![Collective form feedback after clicking the “Login” button](./images/form-12.png) Collective form feedback after clicking the “Login” button -#### Auto-complete +#### Auto-Complete Users can accept the autocomplete suggestion by pressing the tab key or the right arrow key. ![An auto-complete field](./images/form-20.png) An auto-complete field -#### Auto-suggestion +#### Auto-Suggestion Suggestions can be shown in a form just below the input field. ![An auto-suggestion field](./images/form-21.png) An auto-suggestion field -#### Auto-saving +#### Auto-Saving Forms data can be auto saved based on an event or a pre defined time interval. In such cases, users should also be given an option to manually save the data. Doing so can be helpful in cases when autosave fails due to some reason. The status of auto-saving the data should appear just under the heading where the form is being used e.g. just under the title in page header, just under the heading in a modal or a side sheet. diff --git a/docs/src/pages/patterns/layouts/code.mdx b/docs/src/pages/patterns/layouts/code.mdx index 3367d73899..135e830a05 100644 --- a/docs/src/pages/patterns/layouts/code.mdx +++ b/docs/src/pages/patterns/layouts/code.mdx @@ -1,18 +1,18 @@ -#### Blank template +#### Blank Template -#### Resource table template +#### Resource Table Template -#### Level 1 header template +#### Level 1 Header Template -#### Sidebar template +#### Sidebar Template -#### Mini sidebar template +#### Mini Sidebar Template -#### Content division -##### Narrow width content +#### Content Division +##### Narrow Width Content \ No newline at end of file diff --git a/docs/src/pages/patterns/layouts/usage.mdx b/docs/src/pages/patterns/layouts/usage.mdx index 3921eff8ba..7e322318c9 100644 --- a/docs/src/pages/patterns/layouts/usage.mdx +++ b/docs/src/pages/patterns/layouts/usage.mdx @@ -9,7 +9,7 @@ Layouts can be used to quickly setup and design a page. These are the patterns t ### Templates Following templates are available for use to quickly setup and design a page. -#### Blank template +#### Blank Template

                      @@ -22,7 +22,7 @@ Following templates are available for use to quickly setup and design a page.

                      -#### Resource table template +#### Resource Table Template

                      @@ -35,7 +35,7 @@ Following templates are available for use to quickly setup and design a page.

                      -#### Level 1 header template +#### Level 1 Header Template

                      @@ -54,7 +54,7 @@ Following templates are available for use to quickly setup and design a page.

                      -#### Sidebar template +#### Sidebar Template

                      @@ -67,7 +67,7 @@ Following templates are available for use to quickly setup and design a page.

                      -#### Patient bar template +#### Patient Bar Template

                      @@ -80,7 +80,7 @@ Following templates are available for use to quickly setup and design a page.

                      -#### Mini sidebar template +#### Mini Sidebar Template

                      @@ -93,7 +93,7 @@ Following templates are available for use to quickly setup and design a page.

                      -#### Settings template +#### Settings Template

                      diff --git a/docs/src/pages/patterns/tableFilters/interactions.mdx b/docs/src/pages/patterns/tableFilters/interactions.mdx index d27b1aabb9..37c2d82fe9 100644 --- a/docs/src/pages/patterns/tableFilters/interactions.mdx +++ b/docs/src/pages/patterns/tableFilters/interactions.mdx @@ -12,10 +12,10 @@ import tableFilters6 from './images/tableFilters-6.gif' import tableFilters7 from './images/tableFilters-7.gif' import tableFilters8 from './images/tableFilters-8.gif' -### Filter panel +### Filter Panel -#### Opening the panel +#### Opening the Panel @@ -59,7 +59,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Table card +##### Table Card @@ -94,7 +94,7 @@ import tableFilters8 from './images/tableFilters-8.gif'

                      -##### Quick filters strip +##### Quick Filters Strip @@ -128,7 +128,7 @@ import tableFilters8 from './images/tableFilters-8.gif'

                      -##### Filter views button +##### Filter Views Button @@ -164,7 +164,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -#### Closing the panel +#### Closing the Panel @@ -208,7 +208,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Table card +##### Table Card
                      @@ -243,7 +243,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Quick filters strip +##### Quick Filters Strip
                      @@ -278,7 +278,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Filter views button +##### Filter Views Button
                      @@ -314,10 +314,10 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -### Filter chips +### Filter Chips -#### Adding first filter chip +#### Adding First Filter Chip @@ -325,7 +325,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Table header & body rows +##### Table Header & Body Rows
                      @@ -361,14 +361,14 @@ import tableFilters8 from './images/tableFilters-8.gif'

                      -#### Adding other filter chips +#### Adding Other Filter Chips

                      -##### Filter chips to be added +##### Filter Chips to Be Added @@ -408,7 +408,7 @@ import tableFilters8 from './images/tableFilters-8.gif' -##### Separator and the group actions +##### Separator and the Group Actions
                      @@ -445,14 +445,14 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -#### Removing a filter chip +#### Removing a Filter Chip

                      -##### Filter chips to be removed +##### Filter Chips to Be Removed
                      @@ -488,7 +488,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Separator and the group actions +##### Separator and the Group Actions
                      @@ -526,14 +526,14 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -#### Expanding the chips group +#### Expanding the Chips Group

                      -##### Chips group +##### Chips Group
                      @@ -571,7 +571,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Hidden chips rows +##### Hidden Chips Rows
                      @@ -609,7 +609,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Filter chip that fills up the space +##### Filter Chip That Fills Up the Space
                      @@ -647,7 +647,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Separator and the group actions +##### Separator and the Group Actions
                      @@ -683,7 +683,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Table header & body rows +##### Table Header & Body Rows
                      @@ -721,14 +721,14 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -#### Collapsing the chips group +#### Collapsing the Chips Group

                      -##### Chips group +##### Chips Group
                      @@ -766,7 +766,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Hidden chips rows +##### Hidden Chips Rows
                      @@ -802,7 +802,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Filter chip that fills up the space +##### Filter Chip That Fills Up the Space
                      @@ -838,7 +838,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Separator and the group actions +##### Separator and the Group Actions
                      @@ -876,7 +876,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Table header & body rows +##### Table Header & Body Rows
                      @@ -921,7 +921,7 @@ import tableFilters8 from './images/tableFilters-8.gif'

                      -##### Filter to be pinned +##### Filter to Be Pinned
                      @@ -959,7 +959,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Remaining filters +##### Remaining Filters
                      @@ -997,7 +997,7 @@ import tableFilters8 from './images/tableFilters-8.gif'
                      -##### Pin icon +##### Pin Icon
                      diff --git a/docs/src/pages/patterns/tableFilters/usage.mdx b/docs/src/pages/patterns/tableFilters/usage.mdx index 6fe2eaa853..d9a2a06e01 100644 --- a/docs/src/pages/patterns/tableFilters/usage.mdx +++ b/docs/src/pages/patterns/tableFilters/usage.mdx @@ -19,10 +19,10 @@ Filtering enables users to view the subset of the available data as per their ne ### Usage -#### Position of filters +#### Position of Filters Filters can be placed either in the right side of the table or in the table header itself as quick filters. -##### When filters are frequently used +##### When Filters Are Frequently Used Since the filters are frequently used, they are shown upfront in a panel. This panel appears on the right and cannot be closed. Note: In this case, there is no filtering option in the table itself. @@ -37,7 +37,7 @@ Since the filters are frequently used, they are shown upfront in a panel. This p
                      -##### When filters are sparingly used +##### When Filters Are Sparingly Used In case of 3 or fewer filters, all the filters are available in the table header for quick access. ![3 or fewer filters available](./images/tableFilters-2.png) @@ -63,9 +63,9 @@ In case the need arises to use more than 3 filters, an additional button- “+ M
                      -#### Applying filters +#### Applying Filters -##### Instant application +##### Instant Application In this approach, a filter is applied immediately as soon as a value is selected. This approach consumes too many API calls, so it is best to use when filters are used sparingly. ![Applying filters instantly without using an explicit “Apply filters” button.](./images/tableFilters-3.png) @@ -76,7 +76,7 @@ In this approach, a filter is applied immediately as soon as a value is selected
                      -##### Batch application +##### Batch Application In this approach, all the filters are applied at the end collectively, using an “Apply filters” button. The data set only refreshes at the user action, making it suitable for cases when:
                        @@ -91,7 +91,7 @@ In this approach, all the filters are applied at the end collectively, using an

                        -#### Visibility of applied filters +#### Visibility of Applied Filters The applied filters are shown using chips just below the search bar in the table header. Those chips can be used to quickly enable/disable an already applied filter. There is only one chip per column with its label highlighting the value as well as the name of the column. @@ -122,7 +122,7 @@ The applied filters are shown using chips just below the search bar in the table

                        -#### Resetting filters +#### Resetting Filters The applied filters can be removed using the “Clear filters” or “Reset values” action present in the table header and the filters panel respectively. The only difference is that the “Reset values” button will reset the filter values to their original values but the “Clear filters” button will clear all the filter values(including the default values if any). @@ -145,7 +145,7 @@ The only difference is that the “Reset values” button will reset the filter

                        -#### Adding new filters +#### Adding New Filters In case of too many filters, not all columns are available to filter by default. In such cases, users can directly add filter(s) available on the data. Note: Add new filters functionality can only be handled from the filters panel. @@ -161,10 +161,10 @@ In case of too many filters, not all columns are available to filter by default.
                        -#### Filter views +#### Filter Views Applied filters can be saved as filter views so that the users can use the same set of filters in future. -##### Saving filter views +##### Saving Filter Views Applied filters can be saved as filter views using the “Save as filter view” action present at the end of the applied filters in the table header. @@ -175,7 +175,7 @@ Applied filters can be saved as filter views using the “Save as filter view”

                        -##### Applying filter views +##### Applying Filter Views Users can pick and apply a previously saved filter view using the “Filter views” action present in the table header. Note: Users can make changes to the applied filter view and save it as a new one but they cannot update the existing filter view. diff --git a/docs/src/pages/patterns/uiStates/code.mdx b/docs/src/pages/patterns/uiStates/code.mdx index 27bec5db8a..4cb5a5e140 100644 --- a/docs/src/pages/patterns/uiStates/code.mdx +++ b/docs/src/pages/patterns/uiStates/code.mdx @@ -1,8 +1,9 @@ #### Live Demo -
                        +
                        - + #### Props - + + diff --git a/docs/src/pages/patterns/uiStates/usage.mdx b/docs/src/pages/patterns/uiStates/usage.mdx index a97d784948..3e730c1f7b 100644 --- a/docs/src/pages/patterns/uiStates/usage.mdx +++ b/docs/src/pages/patterns/uiStates/usage.mdx @@ -23,7 +23,7 @@ UI states are used to inform users about the various states a page or container * Avoid flicker (showing an element and then removing it).
                        -### Loading state +### Loading State A typical process starts with loading the app first. If we go step by step -
                      @@ -70,37 +70,37 @@ A typical process starts with loading the app first. If we go step by step -
                      ### Examples -#### Loading the app +#### Loading the App ![Loading the app](./images/uiStates-1.jpg)

                      -#### Loading the page template +#### Loading the Page Template ![Loading the page template](./images/uiStates-2.jpg)

                      -#### Making API calls - Data can be empty +#### Making API Calls - Data Can Be Empty ![Making API calls where data can be empty](./images/uiStates-3.jpg)

                      -#### Making API calls - Data cannot be empty +#### Making API Calls - Data Cannot Be Empty ![Making API calls where data cannot be empty](./images/uiStates-4.jpg)

                      -#### Searching - Data can be empty +#### Searching - Data Can Be Empty ![Searching where data can be empty](./images/uiStates-5.jpg)

                      -#### Pagination - Data cannot be empty +#### Pagination - Data Cannot Be Empty ![Pagination where data cannot be empty](./images/uiStates-6.jpg)
                      @@ -113,7 +113,7 @@ Empty state shows that there is no data to display. Such states can be utilized **Note:** Please refer these comprehensive guidelines about empty states. -#### No data state +#### No Data State This state occurs when the page is accessed for the first time, hence has no data to display. It should convey what users can expect once data is available, while providing constructive guidance about next steps. @@ -122,18 +122,18 @@ This state occurs when the page is accessed for the first time, hence has no dat ![No Data State](./images/NoDataState.png) -#### Empty state based on user action +#### Empty State Based on User Action These empty states occur as consequences of user-initiated actions: -##### No search results +##### No Search Results This state indicates that there are no search results and provides guidance on modifying search terms to proceed with the search. ![No search results](./images/NoSearchResults.png) -##### No filter results +##### No Filter Results This state indicates the absence of results based on applied filter values and guides users on adjusting the filters to continue. @@ -148,25 +148,25 @@ Users should be provided with a succinct yet descriptive message along with an a Following are some of the common error types: -#### Failed to fetch data +#### Failed to Fetch Data This state shows up when there are problems in fetching data from the system. ![No to fetch data](./images/FailedToFetchData.png) -#### Page doesn’t exist +#### Page Doesn’t Exist This state shows up when the requested page does not exist anymore. ![Page doesn’t exist](./images/PageDoesnotExist.png) -#### Connectivity issues +#### Connectivity Issues Error state to convey the lost internet connection. -##### Opening/navigating to a new page +##### Opening/navigating to a New Page Error state while opening a new page or navigating to some other links. @@ -175,7 +175,7 @@ Error state while opening a new page or navigating to some other links. ![Error while opening a new page with no internet connection](./images/ConnectivityIssue-1.png) -##### Taking actions on the same page +##### Taking Actions on the Same Page For cases when users try to perform any action on the page having no internet, a prompt should be given stating the reason of the failure. @@ -184,21 +184,21 @@ For cases when users try to perform any action on the page having no internet, a ![Error while taking action on the page with no internet connection](./images/ConnectivityIssue-2.png) -#### Server unavailable +#### Server Unavailable This state shows up when the server is unable to handle the request due to temporary overload. ![UI state when server is unavailable](./images/ServerDown.png) -#### Permission issue +#### Permission Issue This state shows up when the user does not have the access to view the requested content. ![Error while viewing the restricted content](./images/AccessIssue.png) -#### Request timeout +#### Request Timeout System throws this error whenever there is a lot of delay in the response of a particular request. diff --git a/figma/AIButton.figma.tsx b/figma/AIButton.figma.tsx new file mode 100644 index 0000000000..895aab9d7d --- /dev/null +++ b/figma/AIButton.figma.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { AIButton } from '@/index'; +import figma from '@figma/code-connect'; + +figma.connect(AIButton, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=48860-174575', { + imports: ["import { AIButton } from '@innovaccer/design-system'"], + props: { + appearance: figma.enum('Appearance', { + Primary: 'primary', + Basic: 'basic', + }), + disabled: figma.enum('State', { + Disabled: true, + Default: false, + }), + }, + example: (props) => Button, +}); diff --git a/figma/AIChip.figma.tsx b/figma/AIChip.figma.tsx new file mode 100644 index 0000000000..b9203d3885 --- /dev/null +++ b/figma/AIChip.figma.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { AIChip } from '@/index'; +import figma from '@figma/code-connect'; + +figma.connect(AIChip, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=48860-176255', { + imports: ["import { AIChip } from '@innovaccer/design-system'"], + props: { + disabled: figma.enum('State', { + Disabled: true, + Default: false, + }), + }, + example: (props) => , +}); diff --git a/figma/AIIconButton.figma.tsx b/figma/AIIconButton.figma.tsx new file mode 100644 index 0000000000..65c4d88f7f --- /dev/null +++ b/figma/AIIconButton.figma.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { AIIconButton } from '@/index'; +import figma from '@figma/code-connect'; + +figma.connect(AIIconButton, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=48860-174507', { + imports: ["import { AIIconButton } from '@innovaccer/design-system'"], + props: { + disabled: figma.enum('State', { + Disabled: true, + Default: false, + }), + size: figma.enum('Icon size', { + Regular: 'regular', + Large: 'large', + }), + position: figma.enum('Icon position', { + Top: 'top', + Bottom: 'bottom', + }), + }, + example: (props) => , +}); diff --git a/figma/AIResponse.figma.tsx b/figma/AIResponse.figma.tsx new file mode 100644 index 0000000000..0d27dd40e9 --- /dev/null +++ b/figma/AIResponse.figma.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { AIResponse, Text, Sara } from '@/index'; +import figma from '@figma/code-connect'; + +figma.connect(AIResponse, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=49482-18194', { + imports: ["import { AIResponse } from '@innovaccer/design-system'"], + props: {}, + example: () => { + return ( +
                      + +
                      + + + Hello, would you like to book an appointment with your cardiologist? + + + + AI Response Button + + + + 1:00 PM + +
                      +
                      + ); + }, +}); diff --git a/figma/Sara.figma.tsx b/figma/Sara.figma.tsx new file mode 100644 index 0000000000..04562ed847 --- /dev/null +++ b/figma/Sara.figma.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { Sara } from '@/index'; +import figma from '@figma/code-connect'; + +figma.connect(Sara, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=48860-181639', { + imports: ["import { Sara } from '@innovaccer/design-system'"], + props: { + size: figma.enum('Size', { + '32': 32, + '48': 48, + '64': 64, + 'Custom': 64, + }), + state: figma.enum('States', { + Default: 'default', + Resting: 'resting', + }), + }, + example: (props) => , +}); diff --git a/figma/SaraSparkle.figma.tsx b/figma/SaraSparkle.figma.tsx new file mode 100644 index 0000000000..f61e357585 --- /dev/null +++ b/figma/SaraSparkle.figma.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { SaraSparkle } from '@/index'; +import figma from '@figma/code-connect'; + +figma.connect(SaraSparkle, 'https://www.figma.com/design/w8sqBtJpvq86D06UE7gN0T/MDS---Web?node-id=48860-181690', { + imports: ["import { SaraSparkle } from '@innovaccer/design-system'"], + props: { + size: figma.enum('Size', { + '16': 16, + '24': 24, + '32': 32, + '48': 48, + '64': 64, + 'Custom': 48, + }), + state: figma.enum('State', { + 'Default': 'default', + 'Listening': 'listening', + 'Short-Processing': 'short-processing', + 'Long-Processing': 'long-processing', + }), + }, + example: (props) => , +});
                      UI state for no dataUI State for no search resultsError while fetching dataPage doesn’t existError while opening a new page with no internet connectionError while taking action on the page with no internet connectionUI state when server is unavailableError while viewing the restricted content