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 all commits
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
47 changes: 26 additions & 21 deletions src/pages/components/button/usage.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,20 +325,20 @@ button locations include:
| _Right-justified_ | Inline notifications, inline field buttons and data tables, progressive forms, wizards, and single-button dialogs |
| _Full-span_ | Dialogs, side panels, and small tiles; currently Carbon does not offer a way to implement full-span buttons in code, without an override, they max out at 320px |

#### Fluid versus fixed buttons
#### Fluid versus default buttons

Button alignment is also closely related to whether the button is treated as a
fixed or a fluid element within a layout. When we say “fluid”, we mean that the
button becomes a part of a larger, compound component by bleeding to two or more
edges of its container. Rather than defining the a fluid button’s width in
default or a fluid element within a layout. When we say “fluid”, we mean that
the button becomes a part of a larger, compound component by bleeding to two or
more edges of its container. Rather than defining the a fluid button’s width in
columns or mini units, its width is defined as a percentage (often 50%) of the
container’s width. Also, as a general rule, fluid buttons are never left-aligned
in a layout or a container—they’re always either right-aligned, or span the full
width of the container.
container’s width. Also, as a general rule, fluid primary buttons are never
left-aligned in a layout or a container—they’re always either right-aligned, or
span the full 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 Expand Up @@ -386,15 +386,20 @@ recommended feature to improve accessibility.
</Column>
</Row>

#### Using the grid
#### Fluid-width default buttons

By default the container’s width is set to the size of the text label with 64px
fixed padding on the right side and 16px fixed padding on the left. However,
when possible set the button container’s relative position to the responsive
layout grid and match button width to the other elements on the page. Ideally,
when using groups of related buttons (not including ghost buttons), they should
all be the same width. See [button groups](#Button-groups) below for more
detailed information.
The default button’s width is set to the size of the text label with 64px fixed
padding on the right side and 16px fixed padding on the left. However, there is
a hybrid scenario where a floating default-style button can span a designated
number of columns on the responsive column grid, giving it a fluid width. These
are called "fluid-width default buttons."

Fluid-width default buttons are always preferable to fixed-width default buttons
in a layout. When possible set the default button container’s relative position
to the responsive layout grid and match button width to the width of other
elements on the page. Ideally, when using groups of related buttons (not
including ghost buttons), they should all be the same width. See button groups
below for more detailed information.

<Row>
<Column colLg={8}>
Expand Down Expand Up @@ -525,15 +530,15 @@ button groups are also common in products, to save real estate in narrow columns
and occasionally side panels. In these instances, the primary button is always
on top and the secondary or tertiary button is below.

Generally, when designers stack buttons, they tend to use the fixed buttons.
However, stacked fluid buttons are also an option in desktop side panels with
especially long calls to action. _Note: experimenting with stacked fluid buttons
would require an override to the existing code._
Generally, when designers stack buttons, they tend to use the hybrid fluid
buttons. However, stacked fluid buttons are also an option in desktop side
panels with especially long calls to action. Note: experimenting with stacked
fluid buttons would require an override to the existing code.

<Row>
<Column colLg={12}>

![Fluid and fixed stacked button group examples](images/button_usage_24.png)
![Fluid and default stacked button group examples](images/button_usage_24.png)

</Column>
</Row>
Expand Down
18 changes: 10 additions & 8 deletions src/pages/components/date-picker/style.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

<Tabs>

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

![Fixed date picker input colors](images/date-picker-style-7.png)
![Default date picker input colors](images/date-picker-style-7.png)

</Tab>

Expand Down Expand Up @@ -72,9 +72,9 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

<Tabs>

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

![Fixed date picker input states](images/date-picker-style-6.png)
![Default date picker input states](images/date-picker-style-6.png)

</Tab>

Expand Down Expand Up @@ -147,7 +147,7 @@ any proper nouns capitalized, and no more than three words.

### Date inputs

#### Fixed input
#### Default input

The widths of the date inputs may vary based on the grid and layout.

Expand All @@ -166,7 +166,9 @@ The widths of the date inputs may vary based on the grid and layout.

</div>

<Caption>Structure and spacing for fixed date picker inputs | px / rem</Caption>
<Caption>
Structure and spacing for default date picker inputs | px / rem
</Caption>

#### Fluid input

Expand Down Expand Up @@ -226,7 +228,7 @@ The time picker is a combination of a
[select](/components/select/style#structure) component. Refer to each component
page for further details.

#### Fixed input
#### Default input

The widths of the time picker may vary based on the grid and layout.

Expand Down Expand Up @@ -281,7 +283,7 @@ group. Time picker's total width will vary based on the grid and layout

## Sizes

### Fixed inputs
### Default inputs

| Element | Size | Height px / rem |
| ------- | ----------- | --------------- |
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
22 changes: 11 additions & 11 deletions src/pages/components/dropdown/style.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,9 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

<Tabs>

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

![Fixed dropdown variant examples](images/dropdown-style-1.png)
![Default dropdown variant examples](images/dropdown-style-1.png)

</Tab>

Expand Down Expand Up @@ -90,9 +90,9 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

<Tabs>

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

![Fixed dropdown and combo-box states](images/dropdown-style-2.png)
![Default dropdown and combo-box states](images/dropdown-style-2.png)

</Tab>

Expand All @@ -114,9 +114,9 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']

<Tabs>

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

![Fixed multi-select dropdown states](images/dropdown-style-3.png)
![Default multi-select dropdown states](images/dropdown-style-3.png)

</Tab>

Expand Down Expand Up @@ -186,7 +186,7 @@ exceed three words.
Dropdowns have two states, open and closed. An open and closed dropdown should
be the same width and appropriately fit the design, layout, and content.

### Fixed dropdown
### Default dropdown

| Element | Property | px / rem | Spacing token |
| ------------ | --------------------------- | -------- | ------------- |
Expand All @@ -200,12 +200,12 @@ be the same width and appropriately fit the design, layout, and content.

<div className="image--fixed">

![Structure and spacing for a fixed dropdown](images/dropdown-style-5.png)
![Structure and spacing for a default dropdown](images/dropdown-style-5.png)

</div>

<Caption>
Structure and spacing measurements for fixed dropdown | px / rem
Structure and spacing measurements for default dropdown | px / rem
</Caption>

### Fluid dropdown
Expand Down Expand Up @@ -289,7 +289,7 @@ be the same width and appropriately fit the design, layout, and content.

## Sizes

### Fixed inputs
### Default inputs

The field height and menu option height should always match. These size options
can be applied to all variants of dropdown.
Expand All @@ -311,7 +311,7 @@ can be applied to all variants of dropdown.
</Column>
</Row>

<Caption>Fixed dropdown sizes | px / rem</Caption>
<Caption>Default dropdown sizes | px / rem</Caption>

### Fluid inputs

Expand Down
Loading