Merge branch 'main' into radio-button-usage-updates

package.json

@@ -37,25 +37,25 @@
     "/node_modules/*"
   ],
   "resolutions": {
-    "carbon-components": "^10.29.0",
-    "carbon-components-react": "^7.29.0",
-    "@carbon/elements": "^10.28.0",
-    "@carbon/icons": "^10.26.0",
-    "@carbon/icons-react": "^10.26.0",
+    "carbon-components": "^10.30.0-rc.0",
+    "carbon-components-react": "^7.30.0-rc.0",
+    "@carbon/elements": "^10.29.0-rc.0",
+    "@carbon/icons": "^10.27.0-rc.0",
+    "@carbon/icons-react": "^10.27.0-rc.0",
     "gatsby-remark-images": "^3.3.33"
   },
   "dependencies": {
     "@carbon/charts": "0.34.11",
     "@carbon/charts-react": "0.34.11",
-    "@carbon/elements": "^10.28.0",
-    "@carbon/icons": "^10.26.0",
-    "@carbon/icons-react": "^10.26.0",
-    "@carbon/pictograms": "^11.4.0",
-    "@carbon/pictograms-react": "^11.4.0",
+    "@carbon/elements": "^10.29.0-rc.0",
+    "@carbon/icons": "^10.27.0-rc.0",
+    "@carbon/icons-react": "^10.27.0-rc.0",
+    "@carbon/pictograms": "^11.5.0-rc.0",
+    "@carbon/pictograms-react": "^11.5.0-rc.0",
     "@loadable/component": "^5.12.0",
     "@slack/web-api": "^5.11.0",
-    "carbon-components": "^10.29.0",
-    "carbon-components-react": "^7.29.0",
+    "carbon-components": "^10.30.0-rc.0",
+    "carbon-components-react": "^7.30.0-rc.0",
     "change-case": "^4.1.1",
     "classnames": "^2.2.6",
     "codesandbox": "^2.1.10",

src/components/ComponentDemo/ComponentDemo.module.scss

@@ -292,6 +292,10 @@ fieldset.form-group:last-of-type {
   align-items: center;
 }
 
+.preview-container :global .bx--snippet {
+  justify-content: normal;
+}
+
 .editor-container {
   margin-top: 0;
   font-size: 14px;

src/components/SVGLibraries/IconLibrary/IconLibrary.js

@@ -105,7 +105,7 @@ const IconLibrary = () => {
           setSelectedCategory={setSelectedCategory}
           allIconResults={filteredIcons.length}
           pageName="icon"
-          pageUrl="https://github.com/carbon-design-system/carbon/blob/master/packages/icons/master/ui-icon-master.ai"
+          pageUrl="https://github.com/carbon-design-system/carbon/blob/main/packages/icons/master/ui-icon-master.ai"
         />
       ) : (
         <div className={svgLibrary}>

src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js

@@ -105,7 +105,7 @@ const IconLibrary = () => {
           setSelectedCategory={setSelectedCategory}
           allIconResults={filteredPictograms.length}
           pageName="pictogram"
-          pageUrl="https://github.com/carbon-design-system/carbon/blob/master/packages/pictograms/master/pictogram-master.ai"
+          pageUrl="https://github.com/carbon-design-system/carbon/blob/main/packages/pictograms/master/pictogram-master.ai"
         />
       ) : (
         <div className={svgLibrary}>

src/data/components/code-snippet.js

@@ -15,8 +15,8 @@ $z-indexes: (
   dropdown : 7000,
   header : 6000,
   footer : 5000,
-  hidden : - 1,
-  overflowHidden: - 1,
+  hidden : -1,
+  overflowHidden: -1,
   floating: 10000
 );`;
 

src/data/docgen/react-docgen.json

@@ -1359,7 +1359,7 @@
         "defaultValue": { "value": "'expand'", "computed": false },
         "type": { "name": "string" },
         "required": false,
-        "description": "The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43"
+        "description": "The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/requirements/requirements/#1_3_1 and https://www.w3.org/TR/WCAG20-TECHS/H43"
       },
       "ariaLabel": {
         "type": { "name": "string" },

src/pages/all-about-carbon/the-team.mdx

@@ -32,11 +32,6 @@ and successful in designing digital experiences and products.
 
 ![Josh Black headshot](/images/team/black_josh.png)
 
-</Profile>
-<Profile name="Robin Cannon" title="Program Director">
-
-![Robin Cannon headshot](/images/team/cannon_robin.png)
-
 </Profile>
 <Profile name="Andrea Cardona" title="Front-end Developer">
 

src/pages/case-studies/overview.mdx

@@ -7,8 +7,8 @@ description:
 
 <PageDescription>
 
-We’re developing case studies to explore the adoption and
-implementation of Carbon in products and digital experiences.
+We’re developing case studies to explore the adoption and implementation of
+Carbon in products and digital experiences.
 
 </PageDescription>
 

src/pages/community/contribute-a-chart.mdx

@@ -17,7 +17,7 @@ short pull request in GitHub to add a chart to the index.
 ## Add a chart using the GitHub UI
 
 1. In the
-   [index folder](https://github.com/carbon-design-system/carbon-website/tree/master/src/data/chart-index)
+   [index folder](https://github.com/carbon-design-system/carbon-website/tree/main/src/data/chart-index)
    of the carbon-website GitHub repo, open your team folder. Create a folder if
    your team doesn’t have one yet.
 2. Click `Add file` (top right), then `Create new file`.
@@ -48,7 +48,7 @@ short pull request in GitHub to add a chart to the index.
 After submitting the PR for the data, you should upload a thumbnail image.
 
 1. Go back to your team folder in the
-   [index](https://github.com/carbon-design-system/carbon-website/tree/master/src/data/chart-index).
+   [index](https://github.com/carbon-design-system/carbon-website/tree/main/src/data/chart-index).
 2. Inside your team folder, open the `images` folder.
 3. In the top right, click `Add file` then `Upload files` to upload your image
    to that page then submit the PR. Note: name your image file with the same

src/pages/community/contribute-a-component.mdx

@@ -17,7 +17,7 @@ short pull request in GitHub to add components to the index.
 ## Add a component using the GitHub UI
 
 1. In the
-   [index folder](https://github.com/carbon-design-system/carbon-website/tree/master/src/data/index)
+   [index folder](https://github.com/carbon-design-system/carbon-website/tree/main/src/data/index)
    of the carbon-website GitHub repo, open your team folder. Create a folder if
    your team doesn’t have one yet.
 2. Click `Add file` (top right), then `Create new file`.
@@ -48,7 +48,7 @@ short pull request in GitHub to add components to the index.
 After submitting the PR for the data, you should upload a thumbnail image.
 
 1. Go back to your team folder in the
-   [index](https://github.com/carbon-design-system/carbon-website/tree/master/src/data/index).
+   [index](https://github.com/carbon-design-system/carbon-website/tree/main/src/data/index).
 2. Inside your team folder, open the `images` folder.
 3. In the top right, click `Add file` then `Upload files` to upload your image
    to that page then submit the PR. Note: name your image file with the same

src/pages/community/how-to-contribute.mdx

@@ -17,7 +17,7 @@ short pull request in GitHub to add components to the index.
 ## Add a component using the GitHub UI
 
 1. In the
-   [index folder](https://github.com/carbon-design-system/carbon-website/tree/master/src/data/index)
+   [index folder](https://github.com/carbon-design-system/carbon-website/tree/main/src/data/index)
    of the carbon-website GitHub repo, open your team folder. Create a folder if
    your team doesn’t have one yet).
 2. On the next page, click `Add file` (top right) then `Create new file`.
@@ -47,7 +47,7 @@ short pull request in GitHub to add components to the index.
 
 After submitting the PR for the data, you should upload a thumbnail image. Go
 back to your team folder in the
-[index](https://github.com/carbon-design-system/carbon-website/tree/master/src/data/index).
+[index](https://github.com/carbon-design-system/carbon-website/tree/main/src/data/index).
 
 1. Inside your team folder click the `images` folder.
 2. In the top right, click `Add file` then `Upload files` to upload your image

src/pages/community/patterns/create-flows/index.mdx

@@ -36,8 +36,8 @@ Wide tearsheet, and Full page.
 
 ## Overview
 
-Users often need to create different types of assets, and they can have simple or
-complex requirements.
+Users often need to create different types of assets, and they can have simple
+or complex requirements.
 
 To create is to generate a new resource. Creating is distinct from adding, but
 the two are often confused. To add a resource is to include a resource that
@@ -59,13 +59,15 @@ Do not use this pattern for [adding or editing a resource](#Related-use-cases).
 ## Inline creation
 
 #### When to use
+
 With quick, simple creations like that of an item, it is usually preferred to
 keep the flow inline. This is especially true when the user could benefit from
 seeing context in the page while creating. The inline create pattern is under
 construction, as it needs to account for many different use cases. Below is an
 example of an inline creation.
 
 #### When not to use
+
 Another factor to consider with quick, simple creations is whether or not the
 flow is transitional. Use a Modal if the user is being taken to a different page
 than the one where they initiated the create. For example, if the newly created
@@ -89,7 +91,6 @@ respectively.
 </Column>
 </Row>
 
-
 ## Modal
 
 #### When to use
@@ -123,12 +124,12 @@ respectively.
 4. **Buttons:** The primary and secondary buttons are "Create" and "Cancel",
    respectively.
 
-
 ## Side panel
 
 #### When to use
 
-- Use a side panel when the user needs to have page context while populating the side panel.
+- Use a side panel when the user needs to have page context while populating the
+  side panel.
 
 #### When not to use
 
@@ -164,18 +165,18 @@ respectively.
 </Column>
 </Row>
 
-
 ## Narrow tearsheet
 
 #### When to use
 
 - Use a narrow tearsheet as an alternative to a modal when there is scrolling.
-- Use when the form fields can be broken down into sections using section headers.
+- Use when the form fields can be broken down into sections using section
+  headers.
 
 #### When not to use
 
-- Don't use if the flow has high complexity and the user would
-  benefit from having a visible progress indicator.
+- Don't use if the flow has high complexity and the user would benefit from
+  having a visible progress indicator.
 
 ### Anatomy of a tearsheet
 
@@ -205,7 +206,6 @@ respectively.
 </Column>
 </Row>
 
-
 ## Wide tearsheet
 
 #### When to use
@@ -336,7 +336,6 @@ consequences, show a modal alerting them that the changes won't be saved.
 </Column>
 </Row>
 
-
 ## Full page
 
 <InlineNotification>
@@ -421,8 +420,8 @@ links.
 
 Full page create flows can be exited not only by clicking on "Cancel", but also
 by navigating away by clicking on breadcrumbs or other page navigation. When the
-user tries to exit the Create flow by any means other than explicitly clicking on
-the word "Cancel", we must show a confirmation modal.
+user tries to exit the Create flow by any means other than explicitly clicking
+on the word "Cancel", we must show a confirmation modal.
 
 <Row>
 <Column colLg={8}>

src/pages/community/patterns/import-pattern/index.mdx

@@ -207,8 +207,9 @@ press.
    & drop area.
 2. On `Tab`, focus is applied to the second field that accepts user input. If
    the URL field option is present, focus is applied to this.
-3. If enabled, on `Tab`, focus is applied to the primary button (for example Save or
-   Next). An Import button should not be enabled until a file is selected.
+3. If enabled, on `Tab`, focus is applied to the primary button (for example
+   Save or Next). An Import button should not be enabled until a file is
+   selected.
 4. On `Tab`, focus is applied to the Cancel button.
 
 The user cycles input methods using `Tab` and hits `Return` to activate their
@@ -269,14 +270,15 @@ adding more files and removing the selected files.
   to add another.
 - If the method used was the file uploader, on `Tab`, apply focus to the URL
   field.
-- On `Tab`, apply focus to the remove icon on the added file(s), moving
-  through each using `Tab`.
+- On `Tab`, apply focus to the remove icon on the added file(s), moving through
+  each using `Tab`.
 
 #### On reaching the maximum number of added files
 
-In some use cases, there are a maximum number of allowed files. In this situation,
-the file selection methods are in disabled state. Focus cycles between the
-selected files remove actions, and moving to the next section of the page.
+In some use cases, there are a maximum number of allowed files. In this
+situation, the file selection methods are in disabled state. Focus cycles
+between the selected files remove actions, and moving to the next section of the
+page.
 
 1. On returning to the page/panel from the final file uploader/add file
    interaction, (after any optional loading state) focus is applied to the
@@ -285,7 +287,6 @@ selected files remove actions, and moving to the next section of the page.
 3. On continued use of `Tab`, focus is applied to the next section or
    interaction in the page.
 
-
 ## Feedback
 
 Please help us improve by raising an issue on Carbon.

src/pages/community/patterns/remove-pattern/index.mdx

@@ -31,13 +31,13 @@ common type of removal and is destructive.
 
 ### Delete / Remove variations
 
-| Action | Variation       | Description                                                                                                               |
-| ------ | --------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| Action | Variation       | Description                                                                                                                |
+| ------ | --------------- | -------------------------------------------------------------------------------------------------------------------------- |
 | Delete | _High impact_   | Action can't be reversed and causes significant loss. The user types the resource name into the modal to confirm deletion. |
-|        | _Medium impact_ | Action can't be reversed and causes some loss. The user sees a modal and confirms the consequence of deletion.            |
-|        | _Low impact_    | Action is reversible or very low impact. A confirmation modal may not be required.                                        |
-| Remove | _Medium impact_ | Action can't be reversed and causes some loss. The user sees a modal and confirms the consequence of removal.             |
-|        | _Low impact_    | Action is reversible or very low impact. A confirmation modal may not be required.                                        |
+|        | _Medium impact_ | Action can't be reversed and causes some loss. The user sees a modal and confirms the consequence of deletion.             |
+|        | _Low impact_    | Action is reversible or very low impact. A confirmation modal may not be required.                                         |
+| Remove | _Medium impact_ | Action can't be reversed and causes some loss. The user sees a modal and confirms the consequence of removal.              |
+|        | _Low impact_    | Action is reversible or very low impact. A confirmation modal may not be required.                                         |
 
 ## High-impact deletion
 

src/pages/components/UI-shell-header/accessibility.mdx

@@ -45,26 +45,26 @@ be updated when these accessibility issues are resolved.
 
 ## Resources
 
-- [IBM Accessibility Checklist Checkpoint](https://www.ibm.com/able/guidelines/ci162/accessibility_checklist.html):
-  - [1.3.1 Info and Relationships](https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html)
+- [IBM Accessibility Requirements](https://www.ibm.com/able/requirements/requirements/):
+  - [1.3.1 Info and Relationships](https://www.ibm.com/able/requirements/requirements/#1_3_1)
     (WCAG Success Criteria
     [1.3.1](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships))
-  - [1.3.2 Meaningful Sequence](https://www.ibm.com/able/guidelines/ci162/meaningful_sequence.html)
+  - [1.3.2 Meaningful Sequence](https://www.ibm.com/able/requirements/requirements/#1_3_2)
     (WCAG Success Criteria
     [1.3.2](https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence))
-  - [2.1.1 Keyboard](https://www.ibm.com/able/guidelines/ci162/keyboard.html)
+  - [2.1.1 Keyboard](https://www.ibm.com/able/requirements/requirements/#2_1_1)
     (WCAG Success Criteria
     [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard))
-  - [2.4.3 Focus Order](https://www.ibm.com/able/guidelines/ci162/focus_order.html)
+  - [2.4.3 Focus Order](https://www.ibm.com/able/requirements/requirements/#2_4_3)
     (WCAG Success Criteria
     [2.4.3](https://www.w3.org/WAI/WCAG21/Understanding/focus-order))
-  - [2.4.6 Headings and Labels](https://www.ibm.com/able/guidelines/ci162/headings_and_labels.html)
+  - [2.4.6 Headings and Labels](https://www.ibm.com/able/requirements/requirements/#2_4_6)
     (WCAG Success Criteria
     [2.4.6](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels))
-  - [2.4.7 Focus Visible](https://www.ibm.com/able/guidelines/ci162/focus_visible.html)
+  - [2.4.7 Focus Visible](https://www.ibm.com/able/requirements/requirements/#2_4_7)
     (WCAG Success Criteria
     [2.4.7](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible))
-  - [4.1.2 Name, Role, Value](https://www.ibm.com/able/guidelines/ci162/name_role_value.html)
+  - [4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
     (WCAG Success Criteria
     [4.1.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html))
 

src/pages/components/UI-shell-header/style.mdx

@@ -84,17 +84,17 @@ Shell is from the
 
 ### Action
 
-| Class                        | Property         | Color value    |
-| ---------------------------- | ---------------- | -------------- |
-| `.bx--header__action`        | fill             | Gray 10        |
-| `.bx--header__action:hover`  | background color | Gray 100-hover |
-| `.bx--header__action:hover`  | fill             | White          |
-| `.bx--header__action:focus`  | border           | White          |
-| `.bx--header__action:active` | background color | Gray 80        |
-| `.bx--header__action:active` | fill             | White          |
-| `.bx--header__action:selected` | background color | Gray 100     |
-| `.bx--header__action:selected` | border         | Gray 80        |
-| `.bx--header__action:selected` | fill            | White          |
+| Class                          | Property         | Color value    |
+| ------------------------------ | ---------------- | -------------- |
+| `.bx--header__action`          | fill             | Gray 10        |
+| `.bx--header__action:hover`    | background color | Gray 100-hover |
+| `.bx--header__action:hover`    | fill             | White          |
+| `.bx--header__action:focus`    | border           | White          |
+| `.bx--header__action:active`   | background color | Gray 80        |
+| `.bx--header__action:active`   | fill             | White          |
+| `.bx--header__action:selected` | background color | Gray 100       |
+| `.bx--header__action:selected` | border           | Gray 80        |
+| `.bx--header__action:selected` | fill             | White          |
 
 <Row>
 <Column colLg={8}>