docs(Fluid inputs): text input and text area (#3158)

* docs(main): Fluid inputs

* Update src/pages/components/text-input/usage.mdx

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* Apply suggestions from design review

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

* fixed-image-names

* update image

* update-placeholder-images

* Update usage.mdx

* remove italic headings

* manually fixed typos from lauren

Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>

src/pages/components/text-input/style.mdx

@@ -25,35 +25,65 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 <Row>
 <Column colLg={8}>
 
-![text input states](images/text-input-style-1.png)
+<Tabs>
+
+<Tab label="Fixed">
+
+![Example of an enabled text input in the fixed style](images/text-input-style-color-fixed.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Example of an enabled text input in the fluid style](images/text-input-style-color-fluid.png)
+
+</Tab>
+
+</Tabs>
 
 </Column>
 </Row>
 
 ### Interactive states
 
-| State    | Element       | Property      | Color token      |
-| -------- | ------------- | ------------- | ---------------- |
-| Focus    | Field         | outline       | `$focus`         |
-| Invalid  | Field         | outline       | `$support-error` |
-|          | Error message | text color    | `$text-error`    |
-|          | Warning icon  | svg           | `$support-error` |
-| Disabled | Field         | background    | `$field` \*      |
-|          | Field         | border-bottom | transparent      |
-|          | Field text    | text color    | `$text-disabled` |
+| State    | Element         | Property      | Color token        |
+| -------- | --------------- | ------------- | ------------------ |
+| Focus    | Field           | border        | `$focus`           |
+| Invalid  | Field           | border        | `$support-error`   |
+|          | Error message   | text color    | `$text-error`      |
+|          | Error icon      | svg           | `$support-error`   |
+| Warning  | Warning message | text color    | `$text-primary`    |
+|          | Warning icon    | svg           | `$support-warning` |
+| Disabled | Field           | background    | `$field` \*        |
+|          | Field           | border-bottom | transparent        |
+|          | Field text      | text color    | `$text-disabled`   |
 
 <Row>
-<Column colLg={8}>
+<Column colLg={12}>
+
+<Tabs>
+
+<Tab label="Fixed">
+
+![Examples of text input states in the fixed style](images/text-input-style-states-fixed.png)
+
+</Tab>
+
+<Tab label="Fluid">
 
-![text input interactive states](images/text-input-style-3.png)
+![Examples of text input states in the fluid style](images/text-input-style-states-fluid.png)
+
+</Tab>
+
+</Tabs>
 
 </Column>
 </Row>
 
 ## Typography
 
-Text input labels and placeholder text should be set in sentence case, with only
-the first word in a phrase and any proper nouns capitalized. Text input labels
+Text input labels and field text should be set in sentence case, with only the
+first word in a phrase and any proper nouns capitalized. Text input labels
 should be three words or less.
 
 | Element       | Font-size (px/rem) | Font-weight   | Type token         |
@@ -65,27 +95,54 @@ should be three words or less.
 
 ## Structure
 
-### Text input
+### Text input – Fixed
 
-| Element      | Property                    | px / rem | Spacing token |
-| ------------ | --------------------------- | -------- | ------------- |
-| Label        | margin-bottom               | 8 / 0.5  | `$spacing-03` |
-| Helper text  | margin-top                  | 4 / 0.25 | `$spacing-02` |
-| Field text   | padding-left, padding-right | 16 / 1   | `$spacing-05` |
-| Field        | border-bottom               | 1px      | –             |
-| Field: focus | border                      | 2px      | –             |
+| Element     | Property                    | px / rem | Spacing token |
+| ----------- | --------------------------- | -------- | ------------- |
+| Label       | margin-bottom               | 8 / 0.5  | `$spacing-03` |
+| Helper text | margin-top                  | 4 / 0.25 | `$spacing-02` |
+| Input text  | padding-left, padding-right | 16 / 1   | `$spacing-05` |
+| Field       | border-bottom               | 1px      | –             |
+| Focus       | border                      | 2px      | –             |
+| Error       | border                      | 2px      | –             |
 
 <br />
 
 <div className="image--fixed">
 
-![Structure and spacing measurements for text input](images/text-input-style-2.png)
+![Structure and spacing measurements for fixed text input](images/text-input-style-structure-fixed.png)
 
 </div>
 
-<Caption>Structure and spacing measurements for text input | px / rem</Caption>
+<Caption>
+  Structure and spacing measurements for fixed text input | px / rem
+</Caption>
+
+### Text input – Fluid
+
+| 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         | –             |
+| Focus   | border                      | 2px         | –             |
+| Error   | border                      | 2px         | –             |
 
-### Text area
+<br />
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for fluid text input](images/text-input-style-structure-fluid.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for fluid text input | px / rem
+</Caption>
+
+### Text area – Fixed
 
 | Element      | Property                    | px / rem    | Spacing token |
 | ------------ | --------------------------- | ----------- | ------------- |
@@ -99,14 +156,39 @@ should be three words or less.
 
 <div className="image--fixed">
 
-![Structure and spacing measurements for text area](images/text-area-style-1.png)
+![Structure and spacing measurements for fixed text area](images/text-area-style-structure-fixed.png)
+
+</div>
+
+<Caption>
+  Structure and spacing measurements for fixed text area | px / rem
+</Caption>
+
+### Text area – Fluid
+
+| Element      | Property                    | px / rem    | Spacing token |
+| ------------ | --------------------------- | ----------- | ------------- |
+| Label        | margin-bottom               | 4 / 0.25    | `$spacing-02` |
+| Field        | height                      | varies      | –             |
+|              | padding-left, padding-right | 16 / 1      | `$spacing-05` |
+|              | padding-top, padding-bottom | 11 / 0.6875 | –             |
+|              | border-bottom               | 1px         | –             |
+| Field: focus | border                      | 2px         | –             |
+
+<div className="image--fixed">
+
+![Structure and spacing measurements for fluid text area](images/text-area-style-structure-fluid.png)
 
 </div>
 
-<Caption>Structure and spacing measurements for text area | px / rem</Caption>
+<Caption>
+  Structure and spacing measurements for fluid text area | px / rem
+</Caption>
 
 ## Sizes
 
+These sizes apply only to the fixed style of text input.
+
 | Element | Size        | Height (px / rem) |
 | ------- | ----------- | ----------------- |
 | Input   | Small (sm)  | 32 / 2            |