Skip to content

Commit

Permalink
chore: format
Browse files Browse the repository at this point in the history
  • Loading branch information
emyarod committed Jun 10, 2021
1 parent 17097ad commit 3a13f4a
Show file tree
Hide file tree
Showing 5 changed files with 22 additions and 23 deletions.
4 changes: 2 additions & 2 deletions src/data/nav-items.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
9 changes: 4 additions & 5 deletions src/pages/components/dropdown/usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -218,13 +218,12 @@ height.
</Column>
</Row>

| 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,
Expand Down
10 changes: 5 additions & 5 deletions src/pages/components/modal/style.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<Row>
<Column colLg={8}>
Expand Down
10 changes: 5 additions & 5 deletions src/pages/components/modal/usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<Row>
<Column colLg={8}>
Expand Down
12 changes: 6 additions & 6 deletions src/pages/components/text-input/style.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -99,10 +99,10 @@ should be three words or less.

<Caption>Structure and spacing measurements for text area | px / rem</Caption>

## 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 |

0 comments on commit 3a13f4a

Please sign in to comment.