Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(fluid): remove "fixed" term #3391

Merged
merged 2 commits into from
Feb 20, 2023
Merged

docs(fluid): remove "fixed" term #3391

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4465474
removed-fixed-updates
aagonzales Feb 15, 2023
d4cffb8
updated button and style tabs
aagonzales Feb 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/pages/components/button/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).

<Row>
Expand Down
44 changes: 22 additions & 22 deletions src/pages/components/date-picker/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,9 +197,9 @@ You can customize the time picker's format depending on location or need.

<Tabs>

<Tab label="Fixed">
<Tab label="Default">

![Fixed date picker anatomy](images/date-picker-anatomy.png)
![Default date picker anatomy](images/date-picker-anatomy.png)

</Tab>

Expand Down Expand Up @@ -241,9 +241,9 @@ You can customize the time picker's format depending on location or need.

<Tabs>

<Tab label="Fixed">
<Tab label="Default">

![Fixed time picker anatomy](images/time-picker-anatomy.png)
![Default time picker anatomy](images/time-picker-anatomy.png)

</Tab>

Expand All @@ -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. |

<Row>
<Column colLg={8}>

![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)

</Column>
</Row>

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

<Row>
<Column colLg={8}>

![Fixed input size example](images/date-picker-sizes.png)
![Default input size example](images/date-picker-sizes.png)

</Column>
</Row>

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

Expand Down Expand Up @@ -410,9 +410,9 @@ states, see the

<Tabs>

<Tab label="Fixed">
<Tab label="Default">

![Fixed date picker states](images/date-picker-usage-states.png)
![Default date picker states](images/date-picker-usage-states.png)

</Tab>

Expand Down
74 changes: 37 additions & 37 deletions src/pages/components/dropdown/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,15 +212,15 @@ selection.

<Tabs>

<Tab label="Fixed">
<Tab label="Default">

![Dropdown anatomy](images/dropdown-usage-1.png)
![Default style dropdown anatomy](images/dropdown-usage-1.png)

</Tab>

<Tab label="Fluid">

![Dropdown anatomy](images/dropdown-usage-1-fluid.png)
![Fluid style dropdown anatomy](images/dropdown-usage-1-fluid.png)

</Tab>

Expand All @@ -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. |

<Row>
<Column colLg={8}>

![Fixed and fluid dropdown styles](images/dropdown-usage-formatting-1.png)
![Default and fluid dropdown styles](images/dropdown-usage-formatting-1.png)

</Column>
</Row>

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

<Row>
<Column colLg={8}>

![Dropdown sizes in the fixed style](images/dropdown-usage-2.png)
![Dropdown sizes in the defauult style](images/dropdown-usage-2.png)

</Column>
</Row>
Expand Down Expand Up @@ -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.

<DoDontRow>
<DoDont caption="Do align fixed dropdown containers flush to the grid so the input label aligns with other type on the page.">
<DoDont caption="Do align default style dropdown containers flush to the grid so the input label aligns with other type on the page.">

![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)

</DoDont>
<DoDont type="dont" caption="Don't hang fixed dropdowns into the grid gutters.">
<DoDont type="dont" caption="Don't hang default style dropdowns into the grid gutters.">

![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)

</DoDont>
</DoDontRow>
Expand Down Expand Up @@ -493,9 +493,9 @@ or clicking outside of the menu.

<Tabs>

<Tab label="Fixed">
<Tab label="Default">

![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)

</Tab>

Expand All @@ -517,9 +517,9 @@ or clicking outside of the menu.

<Tabs>

<Tab label="Fixed">
<Tab label="Default">

![Fixed dropdown menu option click target.](images/dropdown-usage-8b.png)
![Default dropdown menu option click target.](images/dropdown-usage-8b.png)

</Tab>

Expand Down Expand Up @@ -598,9 +598,9 @@ Use when you can select only one option from a list at a time.

<Tabs>

<Tab label="Fixed">
<Tab label="Default">

![Fixed dropdown closed and open state.](images/dropdown-usage-9a.png)
![Default dropdown closed and open state.](images/dropdown-usage-9a.png)

</Tab>

Expand Down Expand Up @@ -644,9 +644,9 @@ Use when you can select multiple options from a list or to filter information.

<Tabs>

<Tab label="Fixed">
<Tab label="Default">

![Fixed multiselect dropdown closed and open states.](images/dropdown-usage-10a.png)
![Default multiselect dropdown closed and open states.](images/dropdown-usage-10a.png)

</Tab>

Expand Down Expand Up @@ -674,9 +674,9 @@ Use when you can select multiple options from a list or to filter information.

<Tabs>

<Tab label="Fixed">
<Tab label="Default">

![Fixed multiselect dropdown selected state.](images/dropdown-usage-10b.png)
![Default multiselect dropdown selected state.](images/dropdown-usage-10b.png)

</Tab>

Expand Down Expand Up @@ -721,9 +721,9 @@ to select.

<Tabs>

<Tab label="Fixed">
<Tab label="Default">

![Fixed filterable dropdown closed and open state.](images/dropdown-usage-10d.png)
![Default filterable dropdown closed and open state.](images/dropdown-usage-10d.png)

</Tab>

Expand Down Expand Up @@ -764,9 +764,9 @@ to select.

<Tabs>

<Tab label="Fixed">
<Tab label="Default">

![Fixed filterable dropdown selected state.](images/dropdown-usage-10f.png)
![Default filterable dropdown selected state.](images/dropdown-usage-10f.png)

</Tab>

Expand Down Expand Up @@ -819,9 +819,9 @@ typically used when there are a large amount of options to choose from.

<Tabs>

<Tab label="Fixed">
<Tab label="Default">

![Fixed combo box selected state.](images/dropdown-usage-11c.png)
![Default combo box selected state.](images/dropdown-usage-11c.png)

</Tab>

Expand Down
Loading