From 44654742f31b4ecff5a7847b709e118107ef8853 Mon Sep 17 00:00:00 2001 From: aagonzales Date: Wed, 15 Feb 2023 14:50:14 -0600 Subject: [PATCH 1/2] removed-fixed-updates --- src/pages/components/button/usage.mdx | 2 +- src/pages/components/date-picker/usage.mdx | 44 +++++----- src/pages/components/dropdown/usage.mdx | 74 ++++++++--------- src/pages/components/form/usage.mdx | 69 ++++++++-------- src/pages/components/number-input/usage.mdx | 34 ++++---- src/pages/components/search/usage.mdx | 46 +++++------ src/pages/components/select/usage.mdx | 44 +++++----- src/pages/components/text-input/usage.mdx | 48 +++++------ src/pages/guidelines/motion/overview.mdx | 11 +-- src/pages/patterns/login-pattern/index.mdx | 82 +++++++++---------- .../read-only-states-pattern/index.mdx | 21 ++--- 11 files changed, 235 insertions(+), 240 deletions(-) diff --git a/src/pages/components/button/usage.mdx b/src/pages/components/button/usage.mdx index 3883aa63e21..dad2d2a9dd3 100755 --- a/src/pages/components/button/usage.mdx +++ b/src/pages/components/button/usage.mdx @@ -338,7 +338,7 @@ width of the container. Fluid components like button never exist in isolation. As you can see in the examples above, they are always part of another component, like modal or form. -Other fluid components include tiles and most recently, +Other fluid components include tiles and most recently, form inputs such as [text inputs](/components/text-input/usage). diff --git a/src/pages/components/date-picker/usage.mdx b/src/pages/components/date-picker/usage.mdx index 3f02c82a5cc..1bdd17e71cf 100755 --- a/src/pages/components/date-picker/usage.mdx +++ b/src/pages/components/date-picker/usage.mdx @@ -197,9 +197,9 @@ You can customize the time picker's format depending on location or need. - + -![Fixed date picker anatomy](images/date-picker-anatomy.png) +![Default date picker anatomy](images/date-picker-anatomy.png) @@ -241,9 +241,9 @@ You can customize the time picker's format depending on location or need. - + -![Fixed time picker anatomy](images/time-picker-anatomy.png) +![Default time picker anatomy](images/time-picker-anatomy.png) @@ -268,47 +268,47 @@ You can customize the time picker's format depending on location or need. ### Styling -There are two styles of date picker inputs, fixed and fluid. They share the same -functionality but look visually different, influencing where to use them. +There are two styles of date picker inputs, default and fluid. They share the +same functionality but look visually different, influencing where to use them. -| Style | Appearance | Use case | -| ----- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| Fixed | A traditional style where the label is positioned outside and above the input field. | Use when white space is needed between input components or in productive moments where space is at a premium, and smaller components are needed. | -| Fluid | An alternative style where the label is placed inside of the input field and is stacked inline with the user input text. | Use in expressive moments, fluid forms, contained spaces, or attached to complex components, like a toolbar. | +| Style | Appearance | Use case | +| ------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | +| Default | A traditional style where the label is positioned outside and above the input field. | Use when white space is needed between input components or in productive moments where space is at a premium, and smaller components are needed. | +| Fluid | An alternative style where the label is placed inside of the input field and is stacked inline with the user input text. | Use in expressive moments, fluid forms, contained spaces, or attached to complex components, like a toolbar. | -![An example of a fixed and fluid date picker input](images/date-picker-formatting-styling.png) +![An example of a default and fluid date picker input](images/date-picker-formatting-styling.png) ### Sizes -#### Fixed input heights +#### Default input heights -The fixed input fields for date and time picker come in three height sizes: +The default input fields for date and time picker come in three height sizes: small (32px), medium (40px), and large (48px). The calendar menu in the date picker is a fixed height and width and does not change with the input size. -| Fixed size | Height (px/rem) | Use case | -| ----------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Small (sm) | 32 / 2 | Use when space is constricted or when placing a dropdown in a form that is long and complex. | -| Medium (md) | 40 / 2.5 | This is the default size and the most commonly used size. When in doubt, use the medium size. | -| Large (lg) | 48 / 3 | Use when there is a lot of space to work with. This size is typically used in simple forms or when a dropdown is placed by itself on a page, for example as a filter. | +| Default size | Height (px/rem) | Use case | +| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Small (sm) | 32 / 2 | Use when space is constricted or when placing a dropdown in a form that is long and complex. | +| Medium (md) | 40 / 2.5 | This is the default size and the most commonly used size. When in doubt, use the medium size. | +| Large (lg) | 48 / 3 | Use when there is a lot of space to work with. This size is typically used in simple forms or when a dropdown is placed by itself on a page, for example as a filter. | -![Fixed input size example](images/date-picker-sizes.png) +![Default input size example](images/date-picker-sizes.png) #### Fluid input heights -There is only one fluid input height and it is visually larger than the fixed +There is only one fluid input height and it is visually larger than the default heights. The input is a set height of 64px except when a warning or error message has been added to the bottom. @@ -410,9 +410,9 @@ states, see the - + -![Fixed date picker states](images/date-picker-usage-states.png) +![Default date picker states](images/date-picker-usage-states.png) diff --git a/src/pages/components/dropdown/usage.mdx b/src/pages/components/dropdown/usage.mdx index dde259decf1..1c070286d4a 100755 --- a/src/pages/components/dropdown/usage.mdx +++ b/src/pages/components/dropdown/usage.mdx @@ -212,15 +212,15 @@ selection. - + -![Dropdown anatomy](images/dropdown-usage-1.png) +![Default style dropdown anatomy](images/dropdown-usage-1.png) -![Dropdown anatomy](images/dropdown-usage-1-fluid.png) +![Fluid style dropdown anatomy](images/dropdown-usage-1-fluid.png) @@ -238,43 +238,43 @@ selection. ### Styling -There are two styles of dropdown inputs, fixed and fluid. They share the same +There are two styles of dropdown inputs, default and fluid. They share the same functionality but look visually different, influencing where to use them. -| Style | Appearance | Use case | -| ----- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| Fixed | A traditional style where the label is positioned outside and above the input field. | Use when white space is needed between input components or in productive moments where space is at a premium, and smaller components are needed. | -| Fluid | An alternative style where the label is placed inside of the input field and is stacked inline with the user input text. | Use in expressive moments, fluid forms, contained spaces, or attached to complex components, like a toolbar. | +| Style | Appearance | Use case | +| ------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | +| Default | A traditional style where the label is positioned outside and above the input field. | Use when white space is needed between input components or in productive moments where space is at a premium, and smaller components are needed. | +| Fluid | An alternative style where the label is placed inside of the input field and is stacked inline with the user input text. | Use in expressive moments, fluid forms, contained spaces, or attached to complex components, like a toolbar. | -![Fixed and fluid dropdown styles](images/dropdown-usage-formatting-1.png) +![Default and fluid dropdown styles](images/dropdown-usage-formatting-1.png) ### Sizing -#### Fixed input heights +#### Default input heights -There are three fixed dropdown height sizes: small, medium, and large. +There are three Default dropdown height sizes: small, medium, and large. Supporting three different dropdown sizes gives you more flexibility when structuring layouts. However, use a consistent size for all form components on the same page. For example, if you are using a medium size dropdown also use the same size text inputs, buttons, and so on. When in doubt, use the default medium size height. -| Fixed size | Height (px/rem) | Use case | -| ----------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Small (sm) | 32 / 2 | Use when space is constricted or when placing a dropdown in a form that is long and complex. | -| Medium (md) | 40 / 2.5 | This is the default size and the most commonly used size. When in doubt, use the medium size. | -| Large (lg) | 48 / 3 | Choose this size when there is a lot of space to work with. This size is typically used in simple forms or when a dropdown is placed by itself on a page, for example as a filter. | +| Default size | Height (px/rem) | Use case | +| ------------ | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Small (sm) | 32 / 2 | Use when space is constricted or when placing a dropdown in a form that is long and complex. | +| Medium (md) | 40 / 2.5 | This is the default size and the most commonly used size. When in doubt, use the medium size. | +| Large (lg) | 48 / 3 | Choose this size when there is a lot of space to work with. This size is typically used in simple forms or when a dropdown is placed by itself on a page, for example as a filter. | -![Dropdown sizes in the fixed style](images/dropdown-usage-2.png) +![Dropdown sizes in the defauult style](images/dropdown-usage-2.png) @@ -320,14 +320,14 @@ Whether it aligns flush to grid columns or hangs in the gutters depends on the style of dropdown you are using. - + -![Do align fixed input dropdowns to the grid so the input label aligns with other type on the page.](images/dropdown-usage-4-do.png) +![Do align default style input dropdowns to the grid so the input label aligns with other type on the page.](images/dropdown-usage-4-do.png) - + -![Don't hang fixed dropdowns into the grid gutters.](images/dropdown-usage-4-dont.png) +![Don't hang default style dropdowns into the grid gutters.](images/dropdown-usage-4-dont.png) @@ -493,9 +493,9 @@ or clicking outside of the menu. - + -![Fixed dropdown closed and open state click targets.](images/dropdown-usage-8a.png) +![Default dropdown closed and open state click targets.](images/dropdown-usage-8a.png) @@ -517,9 +517,9 @@ or clicking outside of the menu. - + -![Fixed dropdown menu option click target.](images/dropdown-usage-8b.png) +![Default dropdown menu option click target.](images/dropdown-usage-8b.png) @@ -598,9 +598,9 @@ Use when you can select only one option from a list at a time. - + -![Fixed dropdown closed and open state.](images/dropdown-usage-9a.png) +![Default dropdown closed and open state.](images/dropdown-usage-9a.png) @@ -644,9 +644,9 @@ Use when you can select multiple options from a list or to filter information. - + -![Fixed multiselect dropdown closed and open states.](images/dropdown-usage-10a.png) +![Default multiselect dropdown closed and open states.](images/dropdown-usage-10a.png) @@ -674,9 +674,9 @@ Use when you can select multiple options from a list or to filter information. - + -![Fixed multiselect dropdown selected state.](images/dropdown-usage-10b.png) +![Default multiselect dropdown selected state.](images/dropdown-usage-10b.png) @@ -721,9 +721,9 @@ to select. - + -![Fixed filterable dropdown closed and open state.](images/dropdown-usage-10d.png) +![Default filterable dropdown closed and open state.](images/dropdown-usage-10d.png) @@ -764,9 +764,9 @@ to select. - + -![Fixed filterable dropdown selected state.](images/dropdown-usage-10f.png) +![Default filterable dropdown selected state.](images/dropdown-usage-10f.png) @@ -819,9 +819,9 @@ typically used when there are a large amount of options to choose from. - + -![Fixed combo box selected state.](images/dropdown-usage-11c.png) +![Default combo box selected state.](images/dropdown-usage-11c.png) diff --git a/src/pages/components/form/usage.mdx b/src/pages/components/form/usage.mdx index d62b798acbd..b943e3587ba 100755 --- a/src/pages/components/form/usage.mdx +++ b/src/pages/components/form/usage.mdx @@ -122,9 +122,9 @@ configure and extend a form, see the - + -![Anatomy of a fixed form](images/form-usage-1.png) +![Anatomy of a default form](images/form-usage-1.png) @@ -150,18 +150,18 @@ configure and extend a form, see the ### Styling -Forms can use two styles of inputs: fixed and fluid. They share the same +Forms can use two styles of inputs: default and fluid. They share the same functionality but look visually different and have different alignment rules. -| Style | Appearance | Alignment | Use case | -| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -| Fixed | Uses a traditional style of input where the label is positioned outside and above the input field. Fixed forms can use any of the three fixed input field sizes: small (32px), medium (40px), or large (48px). | Form inputs are equally stacked with 32px/2rem padding separating each component. | Use when white space is needed between input components, if smaller components are required, or in productive moments like in complex forms. | -| Fluid form | An alternative input style where the label is placed inside the input field and aligned with the user input text. Fluid inputs only have one size at the height of 64px. | Form inputs are stacked flush to one another with 0px of padding between them. | Use in expressive moments or where larger form components can aid in emphasizing the featured form. | +| Style | Appearance | Alignment | Use case | +| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | +| Default | Uses a traditional style of input where the label is positioned outside and above the input field. Default forms can use any of the three default input field sizes: small (32px), medium (40px), or large (48px). | Form inputs are equally stacked with 32px/2rem padding separating each component. | Use when white space is needed between input components, if smaller components are required, or in productive moments like in complex forms. | +| Fluid | An alternative input style where the label is placed inside the input field and aligned with the user input text. Fluid inputs only have one size at the height of 64px. | Form inputs are stacked flush to one another with 0px of padding between them. | Use in expressive moments or where larger form components can aid in emphasizing the featured form. | -![Examples of a fixed and fluid form styles](images/form-usage-2.png) +![Examples of a default and fluid form styles](images/form-usage-2.png) @@ -170,22 +170,22 @@ functionality but look visually different and have different alignment rules. In a form, input components should vertically align with all other form components. Whether a form aligns flush to grid columns or hangs in the gutters -depends on the style of form input you are using as well as the grid mode. Fixed -forms typically use a wide grid mode and align flush to the grid columns +depends on the style of form input you are using as well as the grid mode. +Default forms typically use a wide grid mode and align flush to the grid columns prioritizing vertical label alignment. Fluid forms use the condensed grid and can hang into the gutter without causing label misalignment. Fluid forms are architectural and remain cohesive by never allowing vertical or horizontal space between inputs. - + -![An example showing a properly aligned fixed inputs](images/form-usage-3-do.png) +![An example showing a properly aligned default inputs](images/form-usage-3-do.png) - + -![An example showing incorrectly aligned fixed inputs](images/form-usage-3-dont.png) +![An example showing incorrectly aligned default inputs](images/form-usage-3-dont.png) @@ -207,7 +207,7 @@ between inputs. If a form has more than one column, then the columns should be proportional and align to grid columns when possible. The space between form columns is -determined by the grid mode you are using; fixed forms use the wide grid mode +determined by the grid mode you are using; default forms use the wide grid mode with 32px padding between form columns, versus fluid forms use the condensed grid mode with 1px padding. The narrow grid mode (16px) is typically not used in forms as it often places the text in the gutter. @@ -267,9 +267,9 @@ default values, detected values, and auto-completion text. Optional helper text is pertinent information that assists the user in correctly completing a field. Helper text should always be available when the input is focused. It is often used to explain the correct data format. Helper text -appears as persistent text under a fixed input (helper text is not available in -fluid input, which uses tooltips instead). Helper text is the preferred method -of assisting users because it is always visible for the user to reference +appears as persistent text under a default input (helper text is not available +in fluid input, which uses tooltips instead). Helper text is the preferred +method of assisting users because it is always visible for the user to reference without additional effort. #### Best practices for helper text @@ -282,14 +282,15 @@ without additional effort. ### Tooltip help Tooltips can be added inline with a form label if additional non-pertinent -information is needed to assist the user in correctly completing a field, such as -context setting. Tooltip content may include more in-depth information about the -field or the options the user is choosing from. Links to additional information -or references may also be included if needed. In certain situations where complex -instructions or additional context would be appropriate, tooltips can be used in -addition to the helper text. However, it is recommended that all pertinent -assistive information to form completion—such as format content—be presented -simply and directly as helper text under the field and not be in a tooltip. +information is needed to assist the user in correctly completing a field, such +as context setting. Tooltip content may include more in-depth information about +the field or the options the user is choosing from. Links to additional +information or references may also be included if needed. In certain situations +where complex instructions or additional context would be appropriate, tooltips +can be used in addition to the helper text. However, it is recommended that all +pertinent assistive information to form completion—such as format content—be +presented simply and directly as helper text under the field and not be in a +tooltip. @@ -397,13 +398,13 @@ minimum, consistent between all of the same types of form within your product. ### Form controls -Carbon provides a variety of data input components that enable a user to -enter or select data. The components are divided into three different -interaction types. +Carbon provides a variety of data input components that enable a user to enter +or select data. The components are divided into three different interaction +types. | Type | Overview | | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Free form inputs](/patterns/forms-pattern/#text-inputs) | Free-form text inputs are the most commonly used components in forms. They allow a user to enter any configuration of letters or numbers. Common free-form inputs include: text input and text area. | +| [Free form inputs](/patterns/forms-pattern/#text-inputs) | Free-form text inputs are the most commonly used components in forms. They allow a user to enter any configuration of letters or numbers. Common free-form inputs include: text input and text area. | | [Selection controls](/patterns/forms-pattern/#data-inputs) | Selection controls offer users a selection from pre-determined options. Common selection controls include: checkboxes, radio buttons, file uploaders, toggles, and select lists (combo box and multiselect). | | [Bound entry controls](/patterns/forms-pattern/#data-inputs) | Bound entry controls allow users to input numeric data, like dates and times and may restrict user input to a certain range. Common bound entry controls include: number input, date picker, and slider components. | @@ -428,9 +429,9 @@ form. - + -![Examples of fixed input states](images/form-usage-states-fixed.png) +![Examples of default input states](images/form-usage-states-fixed.png) @@ -453,9 +454,9 @@ pattern. | Topic | Overview | | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | -| [Buttons in forms](/patterns/forms-pattern/#buttons]) | Provides guidance on button alignment, emphasis, placement, and naming in relation to a form. | +| [Buttons in forms](/patterns/forms-pattern/#buttons]) | Provides guidance on button alignment, emphasis, placement, and naming in relation to a form. | | [Errors and validation](/forms-pattern/#errors-and-validation) | Effective and immediate error messaging can help the user to understand the problem and how to fix it. | -| [Form layout](/patterns/forms-pattern/#designing-a-form) | Additional guidance around layout, spacing, and columns in a form. | +| [Form layout](/patterns/forms-pattern/#designing-a-form) | Additional guidance around layout, spacing, and columns in a form. | | [Designing for longer forms](/patterns/forms-pattern/#designing-for-longer-forms) | Techniques to help make longer forms less overwhelming, including guidance for accordion and multistep forms. | | [Form variants](/patterns/forms-pattern/#variants) | Forms may be presented as dedicated pages, side panels, or dialogs depending on the use case and the situation. | diff --git a/src/pages/components/number-input/usage.mdx b/src/pages/components/number-input/usage.mdx index 479cf85c90a..b7e0025de56 100755 --- a/src/pages/components/number-input/usage.mdx +++ b/src/pages/components/number-input/usage.mdx @@ -138,15 +138,15 @@ values. - + -![Anatomy of a fixed number input](images/number-input-usage-2.png) +![Anatomy of a default number input](images/number-input-usage-2.png) -![Anatomy of a fixed number input](images/number-input-usage-2-fluid.png) +![Anatomy of a fluid number input](images/number-input-usage-2-fluid.png) @@ -171,27 +171,27 @@ values. ### Styling -There are two styles of number inputs, fixed and fluid. They share the same +There are two styles of number inputs, default and fluid. They share the same functionality but look visually different, influencing where to use them. -| Style | Appearance | Use case | -| ----- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| Fixed | A traditional style where the label is positioned outside and above the input field. | Use when white space is needed between input components or in productive moments where space is at a premium, and smaller components are needed. | -| Fluid | An alternative style where the label is placed inside of the input field and is stacked inline with the user input text. | Use in expressive moments, fluid forms, contained spaces, or attached to complex components, like a toolbar. | +| Style | Appearance | Use case | +| ------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | +| Default | A traditional style where the label is positioned outside and above the input field. | Use when white space is needed between input components or in productive moments where space is at a premium, and smaller components are needed. | +| Fluid | An alternative style where the label is placed inside of the input field and is stacked inline with the user input text. | Use in expressive moments, fluid forms, contained spaces, or attached to complex components, like a toolbar. | -![An example of a fixed and fluid number input](images/number-input-usage-11.png) +![An example of a default and fluid number input](images/number-input-usage-11.png) ### Sizing -#### Fixed input heights +#### Default input heights -Number input has three sizes fixed input heights: **small**, **medium**, and +Number input has three sizes default input heights: **small**, **medium**, and **large**. The width varies in size based on content, layout, and design. | Size | Height (px/rem) | Use case | @@ -203,14 +203,14 @@ Number input has three sizes fixed input heights: **small**, **medium**, and -![Fixed number input sizes](images/number-input-usage-3.png) +![Default number input sizes](images/number-input-usage-3.png) #### Fluid input heights -There is only one fluid input height and it is visually larger than the fixed +There is only one fluid input height and it is visually larger than the default heights. The input is a set height of 64px except when a warning or error message has been added to the bottom. @@ -278,9 +278,9 @@ The number input has a series of states for both field and controls elements: - + -![Fixed number input interactive states](images/number-input-usage-6.png) +![Default number input interactive states](images/number-input-usage-6.png) @@ -308,9 +308,9 @@ add or subtract icon controls. - + -![Fixed number input mouse and keyboard interactions](images/number-input-usage-7.png) +![Default number input mouse and keyboard interactions](images/number-input-usage-7.png) diff --git a/src/pages/components/search/usage.mdx b/src/pages/components/search/usage.mdx index 866f7f4fdbc..c7c2ec63e52 100755 --- a/src/pages/components/search/usage.mdx +++ b/src/pages/components/search/usage.mdx @@ -94,15 +94,15 @@ aid the user in finding content. - + -![Search anatomy](images/search-anatomy-fixed.png) +![Default search anatomy](images/search-anatomy-fixed.png) -![Search anatomy](images/search-anatomy-fluid.png) +![Fluid search anatomy](images/search-anatomy-fluid.png) @@ -113,27 +113,27 @@ aid the user in finding content. ### Styling -There are two styles of search, fixed and fluid. They share the same +There are two styles of search, default and fluid. They share the same functionality but look visually different, influencing where to use them. -| Style | Appearance | Use case | -| ----- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -| Fixed | A traditional style where there is no label indicated. | Use when white space is needed between components. For example, a fixed search style is typically used at a global or page level. | -| Fluid | An alternative style where a label is placed inside of the search field and is stacked inline with the user input field text. | Use in expressive moments, fluid forms, and contained spaces. | +| Style | Appearance | Use case | +| ------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | +| Default | A traditional style where there is no label indicated. | Use when white space is needed between components. For example, a default search style is typically used at a global or page level. | +| Fluid | An alternative style where a label is placed inside of the search field and is stacked inline with the user input field text. | Use in expressive moments, fluid forms, and contained spaces. | -![Fixed and fluid search styles](images/search styles.png) +![Default and fluid search styles](images/search styles.png) ### Sizing -#### Fixed input heights +#### Default input heights -There are three fixed search height sizes: small, medium, and large. The width +There are three default search height sizes: small, medium, and large. The width varies in size based on content, layout, and design. Supporting three different search sizes gives you more flexibility when structuring layouts. @@ -146,15 +146,15 @@ search sizes gives you more flexibility when structuring layouts. -![Fixed search sizes](images/search-sizes-fixed.png) +![Default search sizes](images/search-sizes-fixed.png) #### Fluid input height -There is only one input height at 64px and it is visually larger than the fixed -heights. +There is only one input height at 64px and it is visually larger than the +default heights. @@ -170,14 +170,14 @@ Place the search component within a user interface where users expect to find it and where it is appropriate for how it is being used in context, whether at a global level, page-specific level, or within a component. -The fixed search can be arranged on the grid to align the container with other +The default search can be arranged on the grid to align the container with other components containers. Search can also hang to align with other hanging component containers on the same page, depending on the use case. - + -![Do align the fixed search container vertically with other text on the page.](images/search-do-fixed.png) +![Do align the default search container vertically with other text on the page.](images/search-do-fixed.png) @@ -221,15 +221,15 @@ The search component has four states: enabled, focus, filled, and disabled. - + -![Search states](images/search-states-fixed.png) +![Default search states](images/search-states-fixed.png) -![Search states](images/search-states-fluid.png) +![Fluid search states](images/search-states-fluid.png) @@ -257,15 +257,15 @@ provides a way to clear the input field by pressing the `Space`or `Enter` keys. - + -![Search click areas](images/search-click-area-fixed.png) +![Default search click areas](images/search-click-area-fixed.png) -![Search click areas](images/search-click-area-fluid.png) +![Fluid search click areas](images/search-click-area-fluid.png) diff --git a/src/pages/components/select/usage.mdx b/src/pages/components/select/usage.mdx index cc5d65641ca..53634a5d466 100755 --- a/src/pages/components/select/usage.mdx +++ b/src/pages/components/select/usage.mdx @@ -92,7 +92,8 @@ while the dropdown component can be styled as needed. id: 'select', label: 'Select', }, - ]}> + ]} +> + }} + > {`