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 <[email protected]>

* update images

Co-authored-by: TJ Egan <[email protected]>
Co-authored-by: Anna Gonzales <[email protected]>

* Compressed Images (#3321)

Co-authored-by: kodiakhq <[email protected]>

* Compressed Images (#3323)

Co-authored-by: kodiakhq <[email protected]>

* typo fix (#3324)

* typo fix

unnecessary parenthesis

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

Co-authored-by: Scott Strubberg <[email protected]>
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 <[email protected]>
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 <[email protected]>
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 <[email protected]>

* 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 <[email protected]>

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

Co-authored-by: tw15egan <[email protected]>

* 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] <[email protected]>

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

* Compressed Images (#3340)

Co-authored-by: kodiakhq <[email protected]>

* 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 <[email protected]>

* Compressed Images (#3349)

Co-authored-by: kodiakhq <[email protected]>

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

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

Co-authored-by: tay1orjones <[email protected]>

* docs(fluid): form

* Update usage.mdx

* updated-style-tab

* Apply suggestions from design review

Co-authored-by: Lauren Rice <[email protected]>

* image-updates

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: Mike Gower <[email protected]>
Co-authored-by: TJ Egan <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: kodiakhq <[email protected]>
Co-authored-by: jeanservaas <[email protected]>
Co-authored-by: Scott Strubberg <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Alison Joseph <[email protected]>
Co-authored-by: Mike Gower <[email protected]>
Co-authored-by: Taylor Jones <[email protected]>
Co-authored-by: Lauren Rice <[email protected]>
Co-authored-by: carbon-automation[bot] <103539138+carbon-automation[bot]@users.noreply.github.com>
Co-authored-by: tw15egan <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: thyhmdo <[email protected]>
Co-authored-by: tay1orjones <[email protected]>

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>