diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml index 4eb9998fa19..4d00441184a 100644 --- a/src/data/nav-items.yaml +++ b/src/data/nav-items.yaml @@ -198,8 +198,8 @@ path: /patterns/overflow-content/ - title: Search path: /patterns/search-pattern/ -# - title: Status indicators -# path: /patterns/status-indicator-pattern/ + # - title: Status indicators + # path: /patterns/status-indicator-pattern/ - title: Text toolbar path: /patterns/text-toolbar-pattern/ - title: Community assets diff --git a/src/pages/components/dropdown/usage.mdx b/src/pages/components/dropdown/usage.mdx index 4a0aa4359da..6e5c6ca075a 100755 --- a/src/pages/components/dropdown/usage.mdx +++ b/src/pages/components/dropdown/usage.mdx @@ -218,13 +218,12 @@ height. -| Dropdown 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 our default size and should be used whenever possible. | +| Dropdown 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 our default size and should be used whenever possible. | | 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. | - When the menu is open, each option in the menu should be the same height as the field. Use a consistent size of form components on the same page. For example, if you are using a medium size dropdown also use the same size text inputs, diff --git a/src/pages/components/modal/style.mdx b/src/pages/components/modal/style.mdx index 3ef8199d648..179baeb9a28 100755 --- a/src/pages/components/modal/style.mdx +++ b/src/pages/components/modal/style.mdx @@ -95,11 +95,11 @@ other components may still expand to the full width of a modal window. ## Sizes -There are four modal sizes: extra small, small, medium, and large. Each modal size has a -responsive width that changes based on the browser size. As the browser -decreases, the modal width percentage increases thus maintaining a proper ratio -between the modal and browser. Modal widths are defined as percentages of the -browser but will still align to columns on the 2x grid. +There are four modal sizes: extra small, small, medium, and large. Each modal +size has a responsive width that changes based on the browser size. As the +browser decreases, the modal width percentage increases thus maintaining a +proper ratio between the modal and browser. Modal widths are defined as +percentages of the browser but will still align to columns on the 2x grid. diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx index 1412dff925e..1531edb24e7 100755 --- a/src/pages/components/modal/usage.mdx +++ b/src/pages/components/modal/usage.mdx @@ -243,11 +243,11 @@ of the modal. ### Sizing -There are four responsive [modal sizes](/components/modal/style#sizes): extra small, -small, medium, and large. Choose a size that works best for the amount of modal -content you have. Modals with short messages should use a extra small or small modal to -avoid long single lines; for complex components, like data table the default or -large modal will be more accommodating. +There are four responsive [modal sizes](/components/modal/style#sizes): extra +small, small, medium, and large. Choose a size that works best for the amount of +modal content you have. Modals with short messages should use a extra small or +small modal to avoid long single lines; for complex components, like data table +the default or large modal will be more accommodating. diff --git a/src/pages/components/text-input/style.mdx b/src/pages/components/text-input/style.mdx index 22b4a771a34..a1d0bd9b3bb 100755 --- a/src/pages/components/text-input/style.mdx +++ b/src/pages/components/text-input/style.mdx @@ -99,10 +99,10 @@ should be three words or less. Structure and spacing measurements for text area | px / rem -## Sizes +## Sizes -| Element | Size | Height (px / rem) | -| ---------- | ----------- | ------------------ | -| Input | Small (sm) | 32 / 2 | -| | Medium (md) | 40 / 2.5 | -| | Large (lg) | 48 / 3 | +| Element | Size | Height (px / rem) | +| ------- | ----------- | ----------------- | +| Input | Small (sm) | 32 / 2 | +| | Medium (md) | 40 / 2.5 | +| | Large (lg) | 48 / 3 |