Fluid input docs (#3396) · carbon-design-system/carbon-website@2b21e58

vercel · 2023-02-21T14:44:40Z

Successfully deployed to the following URLs:

carbondesignsystem – ./

carbondesignsystem-carbon-design-system.vercel.app
carbondesignsystem-git-main-carbon-design-system.vercel.app
carbondesignsystem.vercel.app

-Original file line number
+Diff line change
@@ Expand Up / @@ -198,6 +198,8 @@ @@
           path: /patterns/empty-states-pattern/
         - title: Filtering
           path: /patterns/filtering/
+        - title: Fluid styles
+          path: /patterns/fluid-styles/
         - title: Forms
           path: /patterns/forms-pattern/
         - title: Global header
@@ Expand Down @@

-Original file 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 @@
     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 @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -28,7 +28,21 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] @@
     <Row>
     <Column colLg={8}>
-    ![Date picker input states](images/date-picker-style-7.png)
+    <Tabs>
+    <Tab label="Default">
+    ![Default date picker input colors](images/date-picker-style-7.png)
+    </Tab>
+    <Tab label="Fluid">
+    ![Fluid date picker input colors](images/date-picker-style-7-fluid.png)
+    </Tab>
+    </Tabs>
     </Column>
     </Row>
@@ Expand Down Expand Up / @@ -56,7 +70,21 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility'] @@
     <Row>
     <Column colLg={12}>
-    ![Date picker input states](images/date-picker-style-6.png)
+    <Tabs>
+    <Tab label="Default">
+    ![Default date picker input states](images/date-picker-style-6.png)
+    </Tab>
+    <Tab label="Fluid">
+    ![Fluid date picker input states](images/date-picker-style-6-fluid.png)
+    </Tab>
+    </Tabs>
     </Column>
     </Row>
@@ Expand Down Expand Up / @@ -119,6 +147,8 @@ any proper nouns capitalized, and no more than three words. @@
     ### Date inputs
+    #### Default input
     The widths of the date inputs may vary based on the grid and layout.
     | Element       | Property                    | px / rem | Spacing token |
@@ Expand All @@
     </div>
-    <Caption>Structure and spacing for date picker inputs | px / rem</Caption>
+    <Caption>
+      Structure and spacing for default date picker inputs | px / rem
+    </Caption>
-    ### Sizes
+    #### Fluid input
-    | Element | Size        | Height px / rem |
-    | ------- | ----------- | --------------- |
-    | Field   | Small (sm)  | 32 / 2          |
-    |         | Medium (md) | 40 / 2.5        |
-    |         | Large (lg)  | 48 / 3          |
+    The widths of the date inputs may vary based on the grid and layout.
+    | Element       | Property                    | px / rem    | Spacing token |
+    | ------------- | --------------------------- | ----------- | ------------- |
+    | Label         | padding-bottom              | 4 / 0.25    | `$spacing-02` |
+    | Field         | height                      | 64 / 4      | `$spacing-10` |
+    |               | padding-left, padding-right | 16 / 1      | `$spacing-05` |
+    |               | padding-top, padding-bottom | 13 / 0.8125 | –             |
+    |               | border-bottom               | 1px         | –             |
+    | Calendar icon | height, width               | 16 / 1      | –             |
+    |               | padding-left                | 8 / 0.5     | `$spacing-03` |
+    | Focus         | border                      | 2px         | –             |
+    | Error         | border                      | 2px         | –             |
     <div className="image--fixed">
-    ![Sizes for simple and single date calendar sizes](images/date-picker-style-size.png)
+    ![Structure for date picker inputs](images/date-picker-style-4-fluid.png)
     </div>
-    <Caption>Sizes for simple and single date calendar sizes | px / rem</Caption>
+    <Caption>Structure and spacing for fluid date picker inputs | px / rem</Caption>
     ### Calendar menu
@@ Expand Down Expand Up @@
     ### Time picker
-    There are two types of time pickers; a 12-hour and 24-hour time picker. The
--hour Time Picker is accompanied by a time period (am/pm) input, while the
--hour clock is not. Refer to [select](/components/select/code) for inline
-    select styling.
+    The time picker is a combination of a
+    [text input](/components/text-input/style#structure) and
+    [select](/components/select/style#structure) component. Refer to each component
+    page for further details.
+    #### Default input
+    The widths of the time picker may vary based on the grid and layout.
     | Element | Property                    | px / rem | Spacing token |
     | ------- | --------------------------- | -------- | ------------- |
     | Label   | padding-bottom              | 8 / 0.5  | `$spacing-03` |
-    | Field   | height                      | 40 / 2.5 | -             |
+    | Field   | height                      | 40 / 2.5 | –             |
     |         | padding-right, padding-left | 16 / 1   | `$spacing-05` |
     | Select  | padding-right, padding-left | 16 / 1   | `$spacing-05` |
@@ Expand All / @@ -202,3 +246,55 @@ select styling. @@
     </div>
     <Caption>Structure and spacing for a time picker | px / rem</Caption>
+    #### Fluid input
+    The width of each component in the fluid time picker is a percentage of the
+    group. Time picker's total width will vary based on the grid and layout
+    | Element         | Property                    | px / rem   | Spacing token |
+    | --------------- | --------------------------- | ---------- | ------------- |
+    | Label           | padding-bottom              | 4 / 0.25   | `$spacing-02` |
+    | Field           | height                      | 64 / 4     | –             |
+    |                 | padding-right, padding-left | 16 / 1     | `$spacing-05` |
+    | Divider         | width                       | 1px        | –             |
+    | Time input      | width                       | 25% or 50% | –             |
+    | Clock select    | width                       | 25% or 50% | –             |
+    | Timezone select | width                       | 50%        | –             |
+    <div className="image--fixed">
+    ![Structure for a time picker](images/time-picker-style-1-fluid-a.png)
+    </div>
+    <Caption>Structure and spacing for a time picker | px / rem</Caption>
+    <div className="image--fixed">
+    ![Structure for a time picker](images/time-picker-style-1-fluid-b.png)
+    </div>
+    <Caption>
+      The width of each component in the fluid time picker is a percentage of the
+      group.
+    </Caption>
+    ## Sizes
+    ### Default inputs
+    | Element | Size        | Height px / rem |
+    | ------- | ----------- | --------------- |
+    | Field   | Small (sm)  | 32 / 2          |
+    |         | Medium (md) | 40 / 2.5        |
+    |         | Large (lg)  | 48 / 3          |
+    <div className="image--fixed">
+    ![Sizes for simple and single date calendar sizes](images/date-picker-style-size.png)
+    </div>
+    <Caption>Sizes for simple and single date calendar sizes | px / rem</Caption>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Commit

There are no files selected for viewing

1 comment on commit `2b21e58`

vercel bot commented on `2b21e58` Feb 21, 2023

Commit

There are no files selected for viewing

1 comment on commit 2b21e58

vercel bot commented on 2b21e58 Feb 21, 2023

Choose a reason for hiding this comment

carbondesignsystem – ./

1 comment on commit `2b21e58`

vercel bot commented on `2b21e58` Feb 21, 2023