chore: sync v11 branch with main (#2399)

* status indicator pattern * Update index.mdx Full copy edit and revision. * copy edits, finalizing names for indicators * chore: temporarily remove status indicator from sidenav * Copy edit: Added “be” to “they can be used” (#2349) Added “be” to “they can be used” in the “Overview” paragraph Co-authored-by: TJ Egan <[email protected]> * fix: minor updates to vue tutorial (#2352) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Update index.mdx (#2361) typo to fix anchor link from "Actions: The main actions needed to complete or cancel the dialog task. Button groupings change based on modal variant. Use descriptive words for the actions like Add, Delete, Save and avoid vague words like Done or OK." original line 60: "[Button groupings](/patterns/dialog-pattern#buttons-groups) change based on" fixed line 60: "[Button groupings](/patterns/dialog-pattern#button-groups) change based on" * Audit avt1 component demo label text area (#2335) * testing * fix(componeent-demo): audit-avt1-component-demo-label-text-area * fix(componeent-demo): updated label title * fix: undo change * fix: remove console log * Update src/components/ComponentDemo/ComponentDemo.js Co-authored-by: TJ Egan <[email protected]> * fix: add label variable Co-authored-by: Josefina Mancilla <[email protected]> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore(release): update to v10.36.0 (#2365) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * chore: remove references to #carbon-elements channel (#2371) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Update link for github tutorials (#2362) Previous link gives 404 Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> * Compressed Images (#2392) Co-authored-by: kodiakhq <[email protected]> * chore: format * update to steering committee (#2400) * chore: format Co-authored-by: Jean Servaas <[email protected]> Co-authored-by: Jan Child <[email protected]> Co-authored-by: Jan Child <[email protected]> Co-authored-by: Vince Picone <[email protected]> Co-authored-by: Mike Abbink <[email protected]> Co-authored-by: TJ Egan <[email protected]> Co-authored-by: Lee Chase <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Chris Connors <[email protected]> Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: Josefina Mancilla <[email protected]> Co-authored-by: Josh Black <[email protected]> Co-authored-by: Mariusz Mickiewicz <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: kodiakhq <[email protected]>
carbon-design-system · Jun 10, 2021 · 204684c · 204684c
1 parent af78de9
commit 204684c
Show file tree

Hide file tree

Showing 40 changed files with 782 additions and 195 deletions.
diff --git a/package.json b/package.json
@@ -37,24 +37,24 @@
     "/node_modules/*"
   ],
   "resolutions": {
-    "carbon-components": "^10.35.0",
-    "carbon-components-react": "^7.35.0",
-    "@carbon/elements": "^10.34.0",
-    "@carbon/icons": "^10.32.0",
-    "@carbon/icons-react": "^10.32.0",
+    "carbon-components": "^10.36.0",
+    "carbon-components-react": "^7.36.0",
+    "@carbon/elements": "^10.35.0",
+    "@carbon/icons": "^10.33.0",
+    "@carbon/icons-react": "^10.33.0",
     "gatsby-remark-images": "^3.3.33"
   },
   "dependencies": {
     "@carbon/charts-react": "0.41.62",
-    "@carbon/elements": "^10.34.0",
-    "@carbon/icons": "^10.32.0",
-    "@carbon/icons-react": "^10.32.0",
-    "@carbon/pictograms": "^11.10.0",
-    "@carbon/pictograms-react": "^11.10.0",
+    "@carbon/elements": "^10.35.0",
+    "@carbon/icons": "^10.33.0",
+    "@carbon/icons-react": "^10.33.0",
+    "@carbon/pictograms": "^11.11.0",
+    "@carbon/pictograms-react": "^11.11.0",
     "@loadable/component": "^5.12.0",
     "@slack/web-api": "^5.11.0",
-    "carbon-components": "^10.35.0",
-    "carbon-components-react": "^7.35.0",
+    "carbon-components": "^10.36.0",
+    "carbon-components-react": "^7.36.0",
     "change-case": "^4.1.1",
     "classnames": "^2.2.6",
     "codesandbox": "^2.1.10",

diff --git a/src/components/ComponentDemo/ComponentDemo.js b/src/components/ComponentDemo/ComponentDemo.js
@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable import/no-extraneous-dependencies */
 import React, { useState, useContext } from 'react';
 import getTheme from 'gatsby-theme-carbon/src/components/Code/getTheme';
@@ -85,6 +86,8 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
     });
   };
 
+  const labelText = `Live editor for the ${components[0].label} component`;
+
   // TODO max width editor handle multiple clicks use regex for individual props?
   // allow for write-in props
   // Tests/cleanup context
@@ -162,11 +165,15 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
               )}
 
               <Code links={links} code={code} src={src} className={codeRow}>
+                <label htmlFor="live-editor-label">
+                  <span className="live-editor-label">{labelText}</span>
+                </label>
                 <LiveEditor
                   padding={16}
                   style={{ overflowX: 'auto', whiteSpace: 'pre' }}
                   onChange={(updatedCode) => setCode(updatedCode)}
                   className={editorContainer}
+                  textareaId="live-editor-label"
                 />
               </Code>
               {knobs && (

diff --git a/src/components/ComponentDemo/ComponentDemo.module.scss b/src/components/ComponentDemo/ComponentDemo.module.scss
@@ -477,3 +477,16 @@ body {
     }
   }
 }
+
+:global(.live-editor-label) {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+  visibility: inherit;
+  white-space: nowrap;
+}
diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml
@@ -198,6 +198,8 @@
       path: /patterns/overflow-content/
     - title: Search
       path: /patterns/search-pattern/
+    #    - title: Status indicators
+    #      path: /patterns/status-indicator-pattern/
     - title: Text toolbar
       path: /patterns/text-toolbar-pattern/
 - title: Community assets

diff --git a/src/pages/all-about-carbon/partners.mdx b/src/pages/all-about-carbon/partners.mdx
@@ -133,11 +133,6 @@ increases the internal and external eminence of Carbon Design System and IBM.
 
 ![Linda Carotenuto headshot](/images/team/carotenuto_linda.png)
 
-</Profile>
-<Profile name="Jan Child" title="Content Design and Strategy Lead, Carbon">
-
-![Jan Child headshot](/images/team/child_jan.png)
-
 </Profile>
 <Profile name="David Levinson" title="IBM Design Principal, IBM Cloud and Cognitive Software">
 

diff --git a/src/pages/all-about-carbon/the-carbon-ecosystem.mdx b/src/pages/all-about-carbon/the-carbon-ecosystem.mdx
@@ -27,7 +27,7 @@ assets and guidance but Carbon is more than one website.
 
 At its core, Carbon has universal assets–elements, components, patterns, and
 code–and guidance for how to design and build with them. These assets are
-considered universal or fundamental in nature, which means they can used as a
+considered universal or fundamental in nature, which means they can be used as a
 base for the widest variety of situations, and extended or adapted for the
 specific business use cases.
 

diff --git a/src/pages/components/accordion/style.mdx b/src/pages/components/accordion/style.mdx
@@ -101,11 +101,8 @@ of the accordion panel.
 
 ## Sizes
 
-| Element         | Size         | Height (px/rem) |
-| --------------- | ------------ | ------------ |
-| Header          | Small (sm)   | 32 / 2         |
-|                 | Medium (md)  | 40 / 2.5       |
-|                 | Large (lg)   | 48 / 3         |
-
-
-
+| Element | Size        | Height (px/rem) |
+| ------- | ----------- | --------------- |
+| Header  | Small (sm)  | 32 / 2          |
+|         | Medium (md) | 40 / 2.5        |
+|         | Large (lg)  | 48 / 3          |
diff --git a/src/pages/components/dropdown/usage.mdx b/src/pages/components/dropdown/usage.mdx
@@ -218,13 +218,12 @@ height.
 </Column>
 </Row>
 
-| Dropdown size | Height (px/rem) | Use case          |
-| ------------- | --------------- | ----------------- |
-| Small (sm)    | 32  / 2         | Use when space is constricted or when placing a dropdown in a form that is long and complex. |
-| Medium (md)   | 40 / 2.5        | This is our default size and should be used whenever possible. | 
+| Dropdown size | Height (px/rem) | Use case                                                                                                                                                                           |
+| ------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Small (sm)    | 32 / 2          | Use when space is constricted or when placing a dropdown in a form that is long and complex.                                                                                       |
+| Medium (md)   | 40 / 2.5        | This is our default size and should be used whenever possible.                                                                                                                     |
 | Large (lg)    | 48 / 3          | Choose this size when there is a lot of space to work with. This size is typically used in simple forms or when a dropdown is placed by itself on a page, for example as a filter. |
 
-
 When the menu is open, each option in the menu should be the same height as the
 field. Use a consistent size of form components on the same page. For example,
 if you are using a medium size dropdown also use the same size text inputs,

diff --git a/src/pages/components/file-uploader/style.mdx b/src/pages/components/file-uploader/style.mdx
@@ -122,8 +122,8 @@ The file and button heights should always match.
 | Element | Size        | Height px / rem |
 | ------- | ----------- | --------------- |
 | File    | Small (sm)  | 32 / 2          |
-|         | Medium (md) | 40 / 2.5        | 
-|         | Large  (lg) | 48 / 3          |
+|         | Medium (md) | 40 / 2.5        |
+|         | Large (lg)  | 48 / 3          |
 | Button  | Small (sm)  | 32 / 2          |
 |         | Medium (md) | 40 / 2.5        |
 |         | Large (lg)  | 48 / 3          |

diff --git a/src/pages/components/modal/style.mdx b/src/pages/components/modal/style.mdx
@@ -95,11 +95,11 @@ other components may still expand to the full width of a modal window.
 
 ## Sizes
 
-There are four modal sizes: extra small, small, medium, and large. Each modal size has a
-responsive width that changes based on the browser size. As the browser
-decreases, the modal width percentage increases thus maintaining a proper ratio
-between the modal and browser. Modal widths are defined as percentages of the
-browser but will still align to columns on the 2x grid.
+There are four modal sizes: extra small, small, medium, and large. Each modal
+size has a responsive width that changes based on the browser size. As the
+browser decreases, the modal width percentage increases thus maintaining a
+proper ratio between the modal and browser. Modal widths are defined as
+percentages of the browser but will still align to columns on the 2x grid.
 
 <Row>
 <Column colLg={8}>

diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx
@@ -243,11 +243,11 @@ of the modal.
 
 ### Sizing
 
-There are four responsive [modal sizes](/components/modal/style#sizes): extra small, 
-small, medium, and large. Choose a size that works best for the amount of modal
-content you have. Modals with short messages should use a extra small or small modal to
-avoid long single lines; for complex components, like data table the default or
-large modal will be more accommodating.
+There are four responsive [modal sizes](/components/modal/style#sizes): extra
+small, small, medium, and large. Choose a size that works best for the amount of
+modal content you have. Modals with short messages should use a extra small or
+small modal to avoid long single lines; for complex components, like data table
+the default or large modal will be more accommodating.
 
 <Row>
 <Column colLg={8}>

diff --git a/src/pages/components/text-input/style.mdx b/src/pages/components/text-input/style.mdx
@@ -99,10 +99,10 @@ should be three words or less.
 
 <Caption>Structure and spacing measurements for text area | px / rem</Caption>
 
-## Sizes 
+## Sizes
 
-| Element     | Size        | Height (px / rem)  |
-| ----------  | ----------- | ------------------ | 
-| Input       | Small (sm)  | 32 / 2             |
-|             | Medium (md) | 40 / 2.5           |
-|             | Large (lg)  | 48 / 3             |
+| Element | Size        | Height (px / rem) |
+| ------- | ----------- | ----------------- |
+| Input   | Small (sm)  | 32 / 2            |
+|         | Medium (md) | 40 / 2.5          |
+|         | Large (lg)  | 48 / 3            |
diff --git a/src/pages/components/tooltip/style.mdx b/src/pages/components/tooltip/style.mdx
@@ -10,12 +10,12 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Interactive tooltip
 
-| Class                   | Property         | Color token   |
-| ----------------------- | ---------------- | ------------- |
-| Label                   | text color       | `$text-secondary`    |
-| Trigger icon            | svg              | `$icon-primary`    |
-| Container               | background-color | `$background-inverse` |
-| Text                    | color       | `$text-inverse` |
+| Class        | Property         | Color token           |
+| ------------ | ---------------- | --------------------- |
+| Label        | text color       | `$text-secondary`     |
+| Trigger icon | svg              | `$icon-primary`       |
+| Container    | background-color | `$background-inverse` |
+| Text         | color            | `$text-inverse`       |
 
 <div className="image--fixed">
 
@@ -27,29 +27,29 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 
 ### Icon tooltip
 
-| Class                       | Property         | Color token   |
-| --------------------------- | ---------------- | ------------- |
-| Trigger icon                | background-color | `$icon-primary` |
-| Container                   | background-color | `$background-inverse` |
-| Text                        | color       | `$text-inverse` |
+| Class        | Property         | Color token           |
+| ------------ | ---------------- | --------------------- |
+| Trigger icon | background-color | `$icon-primary`       |
+| Container    | background-color | `$background-inverse` |
+| Text         | color            | `$text-inverse`       |
 
 ### Definition tooltip
 
-| Class                      | Property         | Color token       |
-| -------------------------- | ---------------- | ----------------- |
-| Label                      | color       | `$text-secondary`        |
-| Dotted underline           | border-bottom    | `$interactive` |
-| Container                  | background-color | `$background-inverse`     |
-| Text                       | color       | `$text-inverse`     |
+| Class            | Property         | Color token           |
+| ---------------- | ---------------- | --------------------- |
+| Label            | color            | `$text-secondary`     |
+| Dotted underline | border-bottom    | `$interactive`        |
+| Container        | background-color | `$background-inverse` |
+| Text             | color            | `$text-inverse`       |
 
 ## Typography
 
 Tooltip labels and text should be set in sentence case.
 
-| Property              | Font-size (px/rem) | Font-weight   | Type token       |
-| --------------------- | ------------------ | ------------- | ---------------- |
-| Label                 | 12 / 0.75          | Regular / 400 | `$label-01`      |
-| Body copy             | 14 / 0.875         | Regular / 400 | `$body-short-01` |
+| Property  | Font-size (px/rem) | Font-weight   | Type token       |
+| --------- | ------------------ | ------------- | ---------------- |
+| Label     | 12 / 0.75          | Regular / 400 | `$label-01`      |
+| Body copy | 14 / 0.875         | Regular / 400 | `$body-short-01` |
 
 ## Structure
 
@@ -58,13 +58,13 @@ contain.
 
 ### Interactive tooltip
 
-| Element                     | Property      | px / rem | Spacing token |
-| --------------------------- | ------------- | -------- | ------------- |
-| Container                   | max-width     | 240 / 15 | –             |
-|                             | padding       | 16 / 1   | `$spacing-05` |
-|                             | margin-top    | 8 / 0.5  | `$spacing-03` |
-| Trigger icon                | height, width | 16 / 1   | –             |
-|                             | margin-left   | 8 / 0.5  | `$spacing-03` |
+| Element      | Property      | px / rem | Spacing token |
+| ------------ | ------------- | -------- | ------------- |
+| Container    | max-width     | 240 / 15 | –             |
+|              | padding       | 16 / 1   | `$spacing-05` |
+|              | margin-top    | 8 / 0.5  | `$spacing-03` |
+| Trigger icon | height, width | 16 / 1   | –             |
+|              | margin-left   | 8 / 0.5  | `$spacing-03` |
 
 <div className="image--fixed">
 
@@ -78,13 +78,13 @@ contain.
 
 ### Definition tooltip
 
-| Class        | Property                    | px / rem | Spacing token |
-| ------------ | --------------------------- | -------- | ------------- |
-| Container    | max-width                   | 176 / 11 | –             |
-|              | padding-top, padding bottom | 8 / 0.5  | `$spacing-03` |
-|              | padding-left, padding-right | 16 / 1   | `$spacing-05` |
-| Underline    | border-bottom               | 1px      | –             |
-| Caret        | margin-top                  | 4px      | `$spacing-02` |
+| Class     | Property                    | px / rem | Spacing token |
+| --------- | --------------------------- | -------- | ------------- |
+| Container | max-width                   | 176 / 11 | –             |
+|           | padding-top, padding bottom | 8 / 0.5  | `$spacing-03` |
+|           | padding-left, padding-right | 16 / 1   | `$spacing-05` |
+| Underline | border-bottom               | 1px      | –             |
+| Caret     | margin-top                  | 4px      | `$spacing-02` |
 
 <div className="image--fixed">
 
@@ -98,12 +98,12 @@ contain.
 
 ### Icon tooltip
 
-| Class      | Property                    | px / rem  | Spacing token |
-| ---------- | --------------------------- | --------- | ------------- |
-| Container  | max-width                   | 176 / 11  | –             |
-|            | padding-left, padding-right | 16 / 1    | `$spacing-05` |
-|            | padding-top, padding-bottom | 2 / 0.125 | `$spacing-01` |
-| Caret      | margin-top                  | 8 / 0.5   | `$spacing-03` |
+| Class     | Property                    | px / rem  | Spacing token |
+| --------- | --------------------------- | --------- | ------------- |
+| Container | max-width                   | 176 / 11  | –             |
+|           | padding-left, padding-right | 16 / 1    | `$spacing-05` |
+|           | padding-top, padding-bottom | 2 / 0.125 | `$spacing-01` |
+| Caret     | margin-top                  | 8 / 0.5   | `$spacing-03` |
 
 <div className="image--fixed">
 

diff --git a/src/pages/contributing/overview.mdx b/src/pages/contributing/overview.mdx
@@ -64,7 +64,7 @@ Regardless of how you choose to contribute, we encourage you to open an issue as
 early as possible in the process.
 
 If working with GitHub sounds like a lot, check out
-[this free video series](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
+[this free video series](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github).
 It's one of our favorite resources.
 
 ## The Carbon community

diff --git a/src/pages/designing/get-started.mdx b/src/pages/designing/get-started.mdx
@@ -99,7 +99,6 @@ jump in to help you out.
 
 - [#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/)
 - [#carbon-components](https://ibm-studios.slack.com/archives/C046Y0YUD)
-- [#carbon-elements](https://ibm-studios.slack.com/archives/CDHHNNZQR)
 - [#carbon-tutorial](https://ibm-studios.slack.com/archives/CJUGA7P6H)
 
 And be sure to sign up for the latest Carbon news at

diff --git a/src/pages/developing/get-started.mdx b/src/pages/developing/get-started.mdx
@@ -97,7 +97,6 @@ question to you and will jump in to help you out.
 
 - [#carbon-design-system](https://ibm-studios.slack.com/messages/C0M053VPT/)
 - [#carbon-components](https://ibm-studios.slack.com/archives/C046Y0YUD)
-- [#carbon-elements](https://ibm-studios.slack.com/archives/CDHHNNZQR)
 - [#carbon-react](https://ibm-studios.slack.com/archives/C2K6RFJ1G)
 - [#carbon-ng](https://ibm-studios.slack.com/archives/CBZC0LM2N)
 - [#carbon-vue](https://ibm-studios.slack.com/archives/CAM5P6NR1)

diff --git a/src/pages/developing/vue-tutorial/step-1.mdx b/src/pages/developing/vue-tutorial/step-1.mdx
@@ -156,7 +156,7 @@ using the Vue CLI. These include:
 - `@vue/cli-plugin-babel`: To ensure we produce well supported code.
 - `@vue/cli-plugin-eslint`: To allow us to catch potential errors.
 - `@vue/cli-plugin-unit-jest`: To allow us to unit test our code.
-- `node-sass`: To allow us to use the sass css precompiler.
+- `sass-loader`: To allow us to use the sass css precompiler.
 
 NOTE: We could have installed these separately but using the CLI to set this up
 for us ensures a good base config for these dependencies.
@@ -422,9 +422,7 @@ each individual icon we will use.
 <!-- prettier-ignore-start -->
 ```javascript path=src/components/TutorialHeader/TutorialHeader.vue
 <script>
-import Notification20 from "@carbon/icons-vue/es/notification/20";
-import UserAvatar20 from "@carbon/icons-vue/es/user--avatar/20";
-import AppSwitcher20 from "@carbon/icons-vue/es/app-switcher/20";
+import { Notification20, UserAvatar20, AppSwitcher20 } from '@carbon/icons-vue';
 
 export default {
   name: "TutorialHeader",