diff --git a/package.json b/package.json index 48e2be0c1d3..1a0800619fe 100644 --- 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 index 08de0099403..6c4e4f65d53 100644 --- 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 }) => { )} + setCode(updatedCode)} className={editorContainer} + textareaId="live-editor-label" /> {knobs && ( diff --git a/src/components/ComponentDemo/ComponentDemo.module.scss b/src/components/ComponentDemo/ComponentDemo.module.scss index 0850c96d789..880254773ab 100644 --- 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 index 2983bded0c6..4d00441184a 100644 --- 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 index 996a6bd5429..89498d392f3 100644 --- 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) - - - -![Jan Child headshot](/images/team/child_jan.png) - diff --git a/src/pages/all-about-carbon/the-carbon-ecosystem.mdx b/src/pages/all-about-carbon/the-carbon-ecosystem.mdx index 3d7a036a087..2753e17f1f8 100755 --- 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 index 177c4741c09..2dc220dcc35 100755 --- 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 index 4a0aa4359da..6e5c6ca075a 100755 --- a/src/pages/components/dropdown/usage.mdx +++ b/src/pages/components/dropdown/usage.mdx @@ -218,13 +218,12 @@ height. -| 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 index 90ab5e95c7b..4e8ecaab421 100644 --- 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 index 3ef8199d648..179baeb9a28 100755 --- 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. diff --git a/src/pages/components/modal/usage.mdx b/src/pages/components/modal/usage.mdx index 1412dff925e..1531edb24e7 100755 --- 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. diff --git a/src/pages/components/text-input/style.mdx b/src/pages/components/text-input/style.mdx index 22b4a771a34..a1d0bd9b3bb 100755 --- 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. Structure and spacing measurements for text area | px / rem -## 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 index e5dc01cff77..de64d6053b2 100755 --- 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` |
@@ -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` |
@@ -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` |
@@ -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` |
diff --git a/src/pages/contributing/overview.mdx b/src/pages/contributing/overview.mdx index 955d5ff9b83..79852db8be7 100644 --- 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 index 6e6c7674815..d07173c1643 100644 --- 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 index 638a19f3969..7a3a3626990 100644 --- 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 index aecd512bfa2..8b5af5d0a5c 100644 --- 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. ```javascript path=src/components/TutorialHeader/TutorialHeader.vue