Fluid form (#3356)

* Modal accessibility content and images (#3303)

* Modal accessibility content and images

* Update accessibility.mdx

MIssed saving updates

* Update accessibility.mdx

updating bullets in dev section

* Update accessibility.mdx

updates to correct typos and and a subheading

* Update accessibility.mdx

Adjustments to dev considerations

* Update to Do Don't pair

* Update modal-accessibility-3.png

added 2-button example

* chore(format): fix format error

* update images

* Update src/pages/components/modal/accessibility.mdx

Co-authored-by: Anna Gonzales <anna.gonzales3@gmail.com>

* update images

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: Anna Gonzales <anna.gonzales3@gmail.com>

* Compressed Images (#3321)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>

* Compressed Images (#3323)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>

* typo fix (#3324)

* typo fix

unnecessary parenthesis

* fix(form-patterns): ran yarn format (#3326)

Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* typo fix (#3325)

* typo fix

There is an unnecessary period in the description under the default variant of data table.

* fix: format

Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* Update tooltip accessibility.mdx (#3318)

* Update accessibility.mdx

* added first images

* Update accessibility.mdx

removed flotsam from the copy and paste exercise

* Update accessibility.mdx

tweak spacing

* Update accessibility.mdx

* Update accessibility.mdx

modifications for better readability

* Update accessibility.mdx

corrected link target

* Update tooltip-accessibility-2.png

* Update accessibility.mdx

attempting to resolved error

* Update accessibility.mdx

* chore: format mdx

Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* Tooltip accessibility update (#3330)

* Update accessibility.mdx

* added first images

* Update accessibility.mdx

removed flotsam from the copy and paste exercise

* Update accessibility.mdx

tweak spacing

* Update accessibility.mdx

* Update accessibility.mdx

modifications for better readability

* Update accessibility.mdx

corrected link target

* Update tooltip-accessibility-2.png

* Update accessibility.mdx

attempting to resolved error

* Update accessibility.mdx

* text and image changes for design annotations

* chore(prettier): output of yarn:format

* chore(prettier): output of yarn:format

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>

* update usage image (#3331)

* added fourth accessibility tab to toggletip (#3319)

* added fourth tab

* Create accessibility.mdx

First draft of accessibility tab content

* Update accessibility.mdx

updated content

* Update accessibility.mdx

remove space

* Update accessibility.mdx

* Update accessibility.mdx

* images and accessibility content

* updates

update image; remove link to non-existing Design section

* Update accessibility.mdx

alter leading description and what carbon provides

* Update accessibility.mdx

add Oxford comma

* Update accessibility.mdx

updated alts for images

* update images

* chore(formatting): output of yarn format

* Update accessibility.mdx

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>

* chore(release): update carbon deps (#3335)

Co-authored-by: tw15egan <tw15egan@users.noreply.github.com>

* chore(deps): bump json5 from 1.0.1 to 1.0.2 (#3338)

Bumps [json5](https://github.com/json5/json5) from 1.0.1 to 1.0.2.
- [Release notes](https://github.com/json5/json5/releases)
- [Changelog](https://github.com/json5/json5/blob/main/CHANGELOG.md)
- [Commits](json5/json5@v1.0.1...v1.0.2)

---
updated-dependencies:
- dependency-name: json5
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Compressed Images (#3340)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>

* update .mdx (#3337)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

* docs: tooltip a11y tab update (#3336)

* update .mdx

* update images

* fix merge conflict

* update a11y tab

* fix(tooltip): remove unused images

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>

* Compressed Images (#3349)

Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>

* updating the color tokens on the color page (#3345)

* chore(release): update carbon deps (#3350)

Co-authored-by: tay1orjones <tay1orjones@users.noreply.github.com>

* docs(fluid): form

* Update usage.mdx

* updated-style-tab

* Apply suggestions from design review

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

* image-updates

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: Mike Gower <mikegower@gmail.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: kodiakhq <kodiakhq@users.noreply.github.com>
Co-authored-by: jeanservaas <43144260+jeanservaas@users.noreply.github.com>
Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
Co-authored-by: Mike Gower <michael.gower@ca.ibm.com>
Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
Co-authored-by: Lauren Rice <43969356+laurenmrice@users.noreply.github.com>
Co-authored-by: carbon-automation[bot] <103539138+carbon-automation[bot]@users.noreply.github.com>
Co-authored-by: tw15egan <tw15egan@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: thyhmdo <77697351+thyhmdo@users.noreply.github.com>
Co-authored-by: tay1orjones <tay1orjones@users.noreply.github.com>

package.json

@@ -40,11 +40,11 @@
   "dependencies": {
     "@babel/core": "^7.15.8",
     "@carbon/charts-react": "0.55.0",
-    "@carbon/elements": "^11.16.0",
-    "@carbon/icons-react": "^11.13.0",
-    "@carbon/pictograms": "^12.10.0",
-    "@carbon/pictograms-react": "^11.36.0",
-    "@carbon/react": "^1.19.0",
+    "@carbon/elements": "^11.18.0-rc.0",
+    "@carbon/icons-react": "^11.15.0-rc.0",
+    "@carbon/pictograms": "^12.11.0",
+    "@carbon/pictograms-react": "^11.37.0",
+    "@carbon/react": "^1.21.0-rc.0",
     "@loadable/component": "^5.15.2",
     "@slack/web-api": "^5.11.0",
     "babel-preset-env": "^1.7.0",

src/data/guidelines/color-tokens.js

@@ -242,19 +242,19 @@ const colorTokens = {
       value: {
         white: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g10: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g90: {
           name: 'Gray 80 hover',
-          hex: '#4c4c4c',
+          hex: '#474747',
         },
         g100: {
           name: 'Gray 90 hover',
-          hex: '#353535',
+          hex: '#333333',
         },
       },
     },
@@ -263,19 +263,19 @@ const colorTokens = {
       value: {
         white: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g10: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g90: {
           name: 'Gray 70 hover',
-          hex: '#656565',
+          hex: '#636363',
         },
         g100: {
           name: 'Gray 80 hover',
-          hex: '#4c4c4c',
+          hex: '#474747',
         },
       },
     },
@@ -284,19 +284,19 @@ const colorTokens = {
       value: {
         white: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g10: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g90: {
           name: 'Gray 60 hover',
           hex: '#5e5e5e',
         },
         g100: {
           name: 'Gray 70 hover',
-          hex: '#656565',
+          hex: '#636363',
         },
       },
     },
@@ -792,19 +792,19 @@ const colorTokens = {
       value: {
         white: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g10: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g90: {
           name: 'Gray 80 hover',
-          hex: '#4c4c4c',
+          hex: '#474747',
         },
         g100: {
           name: 'Gray 90 hover',
-          hex: '#353535',
+          hex: '#333333',
         },
       },
     },
@@ -813,11 +813,11 @@ const colorTokens = {
       value: {
         white: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g10: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g90: {
           name: 'Gray 70 hover',
@@ -834,11 +834,11 @@ const colorTokens = {
       value: {
         white: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g10: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g90: {
           name: 'Gray 60 hover',
@@ -2266,4 +2266,4 @@ const colorTokens = {
   },
 };
 
-export default colorTokens;
+export default colorTokens;

src/pages/components/form/style.mdx

@@ -20,11 +20,6 @@ for specific typography details on each component.
 
 </div>
 
-<Caption>
-  Example of light fields with $field-02 (left) and the default version with
-  $field-01 (right)
-</Caption>
-
 ## Typography
 
 Form headings and labels should be set in sentence case with the first letter of
@@ -47,20 +42,20 @@ for specific typography details on each component.
 
 Forms are made up of several different components. The order in which these
 elements are arranged is flexible and by default the vertical spacing between
-elements should follow the guidelines below. The vertical spacing in a form can
+elements follow the guidelines below. The vertical spacing in a fixed form can
 be adjusted to be smaller than the default depending on the use case or layout.
 
 Forms can be one column or two. The width of each column varies based on the
 content and layout of the design. On mobile, forms can only have one column.
 
-### Recommended
+### Recommended for fixed forms
 
 | Element              | Property      | px / rem | Spacing token |
 | -------------------- | ------------- | -------- | ------------- |
 | Form items           | margin-bottom | 32 / 2   | `$spacing-07` |
-| Title area           | margin-bottom | 32 / 2   | `$spacing-07` |
+| Title area           | margin-bottom | 40 / 2.5   | `$spacing-08` |
 | Gutter between items | –             | 32 / 2   | `$spacing-07` |
-| Buttons              | margin-top    | 32 / 2   | `$spacing-07` |
+| Buttons              | margin-top    | 48 / 3   | `$spacing-09` |
 
 <div className="image--fixed">
 
@@ -72,9 +67,18 @@ content and layout of the design. On mobile, forms can only have one column.
   Structure and spacing measurements for a double column form | px / rem
 </Caption>
 
+### Recommended for fluid forms
+
+| Element              | Property      | px / rem | Spacing token |
+| -------------------- | ------------- | -------- | ------------- |
+| Form items           | margin-bottom | 0 px     | –             |
+| Title area           | margin-bottom | 40 / 2.5   | `$spacing-08` |
+| Gutter between items | –             | 1 px     | –             |
+| Buttons              | margin-top    | 48 / 3   | `$spacing-09` |
+
 <div className="image--fixed">
 
-![Structure and spacing measurements for a single column form](images/form-style-2.png)
+![Structure and spacing measurements for a single column form](images/form-style-4.png)
 
 </div>