diff --git a/package.json b/package.json index b7717744eec..4de5bbbeff1 100644 --- a/package.json +++ b/package.json @@ -40,10 +40,11 @@ "dependencies": { "@babel/core": "^7.15.8", "@carbon/charts-react": "0.55.0", - "@carbon/elements": "^10.55.0", - "@carbon/pictograms": "^11.24.0", - "@carbon/pictograms-react": "^11.25.0", - "@carbon/react": "^0.17.0", + "@carbon/elements": "^11.0.0", + "@carbon/icons-react": "^11.0.0", + "@carbon/pictograms": "^12.0.0", + "@carbon/pictograms-react": "^11.26.0", + "@carbon/react": "^1.0.0", "@loadable/component": "^5.15.2", "@slack/web-api": "^5.11.0", "babel-preset-env": "^1.7.0", @@ -56,9 +57,9 @@ "gatsby": "^4.9.2", "gatsby-image": "^3.7.1", "gatsby-plugin-image": "^2.9.0", - "gatsby-theme-carbon": "^3.0.0-next.7", + "gatsby-theme-carbon": "^3.0.0-next.9", "lodash-es": "^4.17.15", - "markdown-it": "^9.0.1", + "markdown-it": "^12.3.2", "nanoid": "^2.1.11", "prettier-config-carbon": "^0.4.0", "prop-types": "^15.7.2", diff --git a/src/components/ColorPalette/ColorPalette.js b/src/components/ColorPalette/ColorPalette.js index 875a6b338c7..46aeba19f9b 100644 --- a/src/components/ColorPalette/ColorPalette.js +++ b/src/components/ColorPalette/ColorPalette.js @@ -204,7 +204,7 @@ const ColorPalette = ({
Option {index + 1}
{i.map((j, jIndex) => ( {colors.map((i, index) => ( Option {index + 1} {i.data.map((j, jIndex) => ( ( - {framework} + {framework} ); @@ -26,7 +26,7 @@ const CodeBar = ({ src, code, links }) => {
{sandboxUrl && ( - CodeSandbox + CodeSandbox )} {storybookLinks.map(([framework, url]) => ( @@ -42,7 +42,7 @@ const CodeBar = ({ src, code, links }) => { className={button} href={src} style={{ position: 'relative', zIndex: 200 }}> - + )} diff --git a/src/components/ComponentDemo/Code/Sidebar.js b/src/components/ComponentDemo/Code/Sidebar.js index fcf9d1a0bb5..1f3b6d364b8 100644 --- a/src/components/ComponentDemo/Code/Sidebar.js +++ b/src/components/ComponentDemo/Code/Sidebar.js @@ -2,7 +2,7 @@ import copy from 'copy-to-clipboard'; import React from 'react'; import { CopyButton } from '@carbon/react'; -import { Launch16 } from '@carbon/icons-react'; +import { Launch } from '@carbon/icons-react'; import { withLive } from 'react-live'; import cx from 'classnames'; import { button, sidebar, copyButton } from './Code.module.scss'; @@ -29,7 +29,7 @@ const Sidebar = ({ src, path, live }) => { className={button} href={src} style={{ zIndex: 200 }}> - + )}
diff --git a/src/components/ComponentDemo/ComponentDemo.js b/src/components/ComponentDemo/ComponentDemo.js index 5b9aff9807b..e636a035de1 100644 --- a/src/components/ComponentDemo/ComponentDemo.js +++ b/src/components/ComponentDemo/ComponentDemo.js @@ -5,10 +5,10 @@ import * as CarbonComponents from '@carbon/react'; import { LiveProvider, LiveEditor, LivePreview, LiveError } from 'react-live'; import { Row } from 'gatsby-theme-carbon'; import { - TableOfContents20, - Maximize16, - Minimize16, - Close16, + TableOfContents, + Maximize, + Minimize, + Close, } from '@carbon/icons-react'; import cx from 'classnames'; @@ -127,7 +127,7 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => { onClick={() => { setFullscreen(false); }}> - + )} @@ -147,7 +147,7 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => { onClick={() => { setFullscreen(!isFullscreen); }}> - {isFullscreen ? : } + {isFullscreen ? : } {isMobile && ( @@ -159,7 +159,7 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => { - + )} diff --git a/src/components/ComponentDemo/KnobContainer.js b/src/components/ComponentDemo/KnobContainer.js index 6946cb7c11f..23040d22df3 100644 --- a/src/components/ComponentDemo/KnobContainer.js +++ b/src/components/ComponentDemo/KnobContainer.js @@ -1,6 +1,6 @@ /* eslint-disable no-console */ import React, { useContext, useRef } from 'react'; -import { Close20 } from '@carbon/icons-react'; +import { Close } from '@carbon/icons-react'; import nanoid from 'nanoid'; import { @@ -162,7 +162,6 @@ const Knob = ({ const propString = parsedKnobProps.concat( Object.entries(newKnobs[component]).reduce( (accumulator, [prop, value]) => { - if (!value || value === `'default'`) { return accumulator; } @@ -175,7 +174,6 @@ const Knob = ({ ) ); - setKnobs(newKnobs); if (isSelfClosingTag) { setCode( @@ -259,7 +257,6 @@ const KnobContainer = ({ knobs, code, setCode, initialCode, variantId }) => { return [component, []]; } - knobs[component].forEach((knob) => { const prop = fullComponent.props[knob]; if (prop && prop.type) { @@ -285,7 +282,7 @@ const KnobContainer = ({ knobs, code, setCode, initialCode, variantId }) => { className={iconButton} type="button" onClick={() => setIsKnobContainerCollapsed(true)}> - + )} diff --git a/src/components/ComponentIndexPage/component-index.scss b/src/components/ComponentIndexPage/component-index.scss index 4a733813e05..9bdd0eed4e2 100644 --- a/src/components/ComponentIndexPage/component-index.scss +++ b/src/components/ComponentIndexPage/component-index.scss @@ -169,6 +169,9 @@ color: $text-01; } } +.component-index-item__tag--maintainer span.cds--tooltip { + background: none; +} //---------------------------------------------------------------------------- // Component Index Not Found diff --git a/src/components/ComponentOverview/component-overview.scss b/src/components/ComponentOverview/component-overview.scss index 1e54dc3f466..3b337c6b4d8 100644 --- a/src/components/ComponentOverview/component-overview.scss +++ b/src/components/ComponentOverview/component-overview.scss @@ -111,7 +111,7 @@ $hover-ui: #e5e5e5; } .component-name { - @include type-style('caption-01'); + @include type-style('label-01'); color: $text-01; text-decoration: none; text-align: left; diff --git a/src/components/Homepage/Carbon-V11-Release-Image.jpg b/src/components/Homepage/Carbon-V11-Release-Image.jpg new file mode 100644 index 00000000000..a9f6f1726e4 Binary files /dev/null and b/src/components/Homepage/Carbon-V11-Release-Image.jpg differ diff --git a/src/components/HomepageVideo/ToggleIcon.js b/src/components/HomepageVideo/ToggleIcon.js index f6d4e8bd09c..3162931ff29 100644 --- a/src/components/HomepageVideo/ToggleIcon.js +++ b/src/components/HomepageVideo/ToggleIcon.js @@ -1,16 +1,16 @@ import React from 'react'; import { - PlayOutline24, - PlayOutlineFilled24, - PauseOutline24, - PauseOutlineFilled24, + PlayOutline, + PlayOutlineFilled, + PauseOutline, + PauseOutlineFilled, } from '@carbon/icons-react'; const Pause = ({ hovering }) => - hovering ? : ; + hovering ? : ; const Play = ({ hovering }) => - hovering ? : ; + hovering ? : ; const ToggleIcon = ({ paused, hovering }) => paused ? : ; diff --git a/src/components/MdxIcon/index.js b/src/components/MdxIcon/index.js index 51bed760f9d..c9deec4f059 100644 --- a/src/components/MdxIcon/index.js +++ b/src/components/MdxIcon/index.js @@ -1,6 +1,6 @@ import React from 'react'; import cx from 'classnames'; -import { LogoGithub32, Bee32 } from '@carbon/icons-react'; +import { LogoGithub, Bee } from '@carbon/icons-react'; import { mdxIcon, iconInverse } from './MdxIcon.module.scss'; import sketch from './icons/sketch.svg'; @@ -36,8 +36,8 @@ const localIcons = { }; const carbonIcons = { - github: LogoGithub32, - bee: Bee32, + github: LogoGithub, + bee: Bee, }; const iconColor = { @@ -53,7 +53,7 @@ const MdxIcon = ({ name, color }) => { if (carbonIcons[name]) { const Icon = carbonIcons[name]; - return ; + return ; } return null; diff --git a/src/components/OverviewCard/overview-card.scss b/src/components/OverviewCard/overview-card.scss index 1164b90877b..d7fc08505fe 100644 --- a/src/components/OverviewCard/overview-card.scss +++ b/src/components/OverviewCard/overview-card.scss @@ -29,7 +29,7 @@ } .overview-card__title { - @include type-style('caption-01'); + @include type-style('label-01'); text-decoration: none; color: $text-01; position: relative; diff --git a/src/components/SVGLibraries/IconLibrary/IconLibrary.js b/src/components/SVGLibraries/IconLibrary/IconLibrary.js index c3926c8098b..a62a34ddb3b 100644 --- a/src/components/SVGLibraries/IconLibrary/IconLibrary.js +++ b/src/components/SVGLibraries/IconLibrary/IconLibrary.js @@ -27,9 +27,11 @@ const IconLibrary = () => { useEffect(() => { const iconArray = iconMetaData.reduce((accumulator, icon) => { - if (icon.deprecated) {return accumulator;} + if (icon.deprecated) { + return accumulator; + } - const path = [...icon.namespace, icon.name].join('/'); + const path = icon.moduleInfo.filepath; if (icon.sizes.length === 1 && icon.sizes[0] === 'glyph') { return [ @@ -46,9 +48,7 @@ const IconLibrary = () => { ...accumulator, { ...icon, - Component: loadable(() => - import(`@carbon/icons-react/lib/${path}/32`) - ), + Component: loadable(() => import(`@carbon/icons-react/lib/${path}`)), }, ]; }, []); @@ -118,7 +118,7 @@ const IconLibrary = () => { setSelectedCategory={setSelectedCategory} allIconResults={filteredIcons.length} pageName="icon" - pageUrl="https://github.com/carbon-design-system/carbon/blob/main/packages/icons/master/ui-icon-master.ai" + pageUrl="https://github.com/carbon-design-system/carbon/blob/v10/packages/icons/master/ui-icon-master.ai" /> ) : (
diff --git a/src/components/SVGLibraries/PictogramLibrary/PictogramCategory.js b/src/components/SVGLibraries/PictogramLibrary/PictogramCategory.js index c460a773334..85f9ff6a70a 100644 --- a/src/components/SVGLibraries/PictogramLibrary/PictogramCategory.js +++ b/src/components/SVGLibraries/PictogramLibrary/PictogramCategory.js @@ -16,20 +16,31 @@ import { const IconCategory = ({ category, pictograms, columnCount }) => { const [sectionRef, containerIsVisible] = useIntersectionObserver(); + return (

{category}

    - {pictograms.map((pictogram, i) => ( - - ))} + {pictograms + .filter((pictogram) => { + if ( + pictogram.name === 'ibm--z' || + pictogram.name === 'ibm--z--partition' + ) { + return false; + } + return true; + }) + .map((pictogram, i) => ( + + ))}
); diff --git a/src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js b/src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js index a6cc36f8bc0..16bf82c1a03 100644 --- a/src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js +++ b/src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js @@ -13,10 +13,8 @@ import { svgPage, svgLibrary } from '../shared/SvgLibrary.module.scss'; import PictogramCategory from './PictogramCategory'; import NoResult from '../shared/NoResult'; -const { - icons: pictogramMetaData, - categories: pictogramCategoryMetadata, -} = metaData; +const { icons: pictogramMetaData, categories: pictogramCategoryMetadata } = + metaData; const IconLibrary = () => { const [pictogramComponents, setPictogramComponents] = useState([]); @@ -31,7 +29,9 @@ const IconLibrary = () => { useEffect(() => { const pictogramArray = pictogramMetaData.reduce( (accumulator, pictogram) => { - if (pictogram.deprecated) {return accumulator;} + if (pictogram.deprecated) { + return accumulator; + } const path = [...pictogram.namespace, pictogram.name].join('/'); @@ -109,7 +109,7 @@ const IconLibrary = () => { setSelectedCategory={setSelectedCategory} allIconResults={filteredPictograms.length} pageName="pictogram" - pageUrl="https://github.com/carbon-design-system/carbon/raw/main/packages/pictograms/master/productive-pictogram-master.ai" + pageUrl="https://github.com/carbon-design-system/carbon/raw/v10/packages/pictograms/master/productive-pictogram-master.ai" /> ) : (
diff --git a/src/components/SVGLibraries/shared/ActionBar.js b/src/components/SVGLibraries/shared/ActionBar.js index be7c75d4fab..ba32cda8cc1 100644 --- a/src/components/SVGLibraries/shared/ActionBar.js +++ b/src/components/SVGLibraries/shared/ActionBar.js @@ -1,6 +1,6 @@ import React, { useRef, useContext, useState } from 'react'; import { pascalCase } from 'change-case'; -import { Code16, Download16 } from '@carbon/icons-react'; +import { Code, Download } from '@carbon/icons-react'; import { Button } from '@carbon/react'; import copy from 'copy-to-clipboard'; import cx from 'classnames'; @@ -65,17 +65,6 @@ const ActionBar = ({ className={cx(container, { [hidden]: !isActionBarVisible, })}> - {/* Refactor to use IconButton once popover styles are included in gatsby-theme-carbon */} - {/* setIsActionBarVisible(true)} - onClick={handleDownload} - className={tooltip}> - - */}
); diff --git a/src/components/SVGLibraries/shared/FilterRow.js b/src/components/SVGLibraries/shared/FilterRow.js index 5bb6c6b24d8..3b8e9af81eb 100644 --- a/src/components/SVGLibraries/shared/FilterRow.js +++ b/src/components/SVGLibraries/shared/FilterRow.js @@ -32,7 +32,7 @@ const FilterRow = ({ ( @@ -18,4 +18,4 @@ export const Illustrator = () => ( ); -export const Github = () => ; +export const Github = () => ; diff --git a/src/components/SVGLibraries/shared/SvgCard.js b/src/components/SVGLibraries/shared/SvgCard.js index 48f6fe26986..2952e06fa11 100644 --- a/src/components/SVGLibraries/shared/SvgCard.js +++ b/src/components/SVGLibraries/shared/SvgCard.js @@ -36,7 +36,7 @@ const SvgCard = ({ icon, containerIsVisible, isLastCard, ...rest }) => { <>
{Component ? ( - + {friendlyName} ) : ( diff --git a/src/components/TypeScaleTable/type-scale-table.scss b/src/components/TypeScaleTable/type-scale-table.scss index ec0f4b6c017..31da087e42f 100644 --- a/src/components/TypeScaleTable/type-scale-table.scss +++ b/src/components/TypeScaleTable/type-scale-table.scss @@ -25,7 +25,7 @@ $type-scale: 0.75rem, 0.875rem, 1rem, 1.125rem, 1.25rem, 1.5rem, 1.75rem, 2rem, } table thead th { - @include type-style('caption-01'); + @include type-style('label-01'); border: none; color: $text-02; padding: $spacing-05 0; diff --git a/src/components/TypeWeight/TypeWeight.js b/src/components/TypeWeight/TypeWeight.js index dc412373ef5..6b8bfa3a9a3 100644 --- a/src/components/TypeWeight/TypeWeight.js +++ b/src/components/TypeWeight/TypeWeight.js @@ -14,7 +14,7 @@ export default class TypeWeight extends React.Component { return (
-
+
); @@ -24,7 +24,9 @@ export default class TypeWeight extends React.Component { return (
-
+
); @@ -33,7 +35,7 @@ export default class TypeWeight extends React.Component { return (
-
+
); diff --git a/src/components/TypesetStyle/typeset-example.scss b/src/components/TypesetStyle/typeset-example.scss index 646f9453c52..00591f03549 100644 --- a/src/components/TypesetStyle/typeset-example.scss +++ b/src/components/TypesetStyle/typeset-example.scss @@ -52,7 +52,7 @@ .cds--typeset-example-specs { padding: $spacing-05 $spacing-06; - + @include breakpoint('md') { width: 33.3%; border-left: 1px solid $gray-20; diff --git a/src/data/nav-items.yaml b/src/data/nav-items.yaml index 821c286df80..87f2a108203 100644 --- a/src/data/nav-items.yaml +++ b/src/data/nav-items.yaml @@ -146,6 +146,8 @@ path: /components/pagination/usage/ - title: Popover path: /components/popover/usage/ + - title: Progress bar + path: /components/progress-bar/usage/ - title: Progress indicator path: /components/progress-indicator/usage/ - title: Radio button diff --git a/src/gatsby-theme-carbon/templates/Homepage.js b/src/gatsby-theme-carbon/templates/Homepage.js index 609d2bd0c11..660cac2eedb 100644 --- a/src/gatsby-theme-carbon/templates/Homepage.js +++ b/src/gatsby-theme-carbon/templates/Homepage.js @@ -3,7 +3,8 @@ import { HomepageCallout, ResourceCard } from 'gatsby-theme-carbon'; import HomepageTemplate from 'gatsby-theme-carbon/src/templates/Homepage'; import { blue20, purple20, gray100 } from '@carbon/elements'; import { calloutLink, callToAction } from './Homepage.module.scss'; -import HomepageVideo from '../../components/HomepageVideo/HomepageVideo'; +// import HomepageVideo from '../../components/HomepageVideo/HomepageVideo'; +import ImageV11 from '../../components/Homepage/Carbon-V11-Release-Image.jpg'; const FirstLeftText = () =>

Carbon Design System

; @@ -38,9 +39,16 @@ const SecondRightText = () => ( const customProps = { Banner: ( <> - + {/* Remove the dots for now since we're using a static image for v11 */} + {/* */}
-
+
- + {/* */}
diff --git a/src/pages/components/accordion/accessibility.mdx b/src/pages/components/accordion/accessibility.mdx index 165201c7c90..94846b22c6c 100755 --- a/src/pages/components/accordion/accessibility.mdx +++ b/src/pages/components/accordion/accessibility.mdx @@ -7,423 +7,117 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- -import { - StructuredListWrapper, - StructuredListHead, - StructuredListBody, - StructuredListRow, - StructuredListInput, - StructuredListCell, - OrderedList, - ListItem, -} from '@carbon/react'; + + +Design annotations are needed for specific instances shown below, but for the +standard accordion component, Carbon already incorporates accessibility. + + - How it works - Accessibility considerations - Resources - Accessibility testing + What Carbon provides + Design recommendations + Development considerations -## How it works - -The accordion Carbon component provides a vertically stacked layout for web -content, commonly used to reduce scrolling. The accordion header is a button -that is used to expand and collapse each accordion panel. Buttons are used so -that the accordions are tab-able by keyboard users and accessible to screen -readers. `Tab` and `Shift-Tab` are used to navigate through each accordion -header and all focusable elements in the accordion should be included in the -page `Tab` sequence. `Enter` or `Space` expand and collapse each accordion -panel. - -When an accordion panel is collapsed the content is hidden, therefore the ARIA -state `aria-expanded="false"` advises users of assistive technologies that the -accordion panel is not visible. When the accordion header is expanded the ARIA -state changes to `aria-expanded="true"` and the accordion panel content is -displayed. Each accordion header contains an ARIA label, and the header buttons -have an ARIA-control property set that points to the unique id of the panel it -controls. When focus is on the accordion header there is a prominent style -change to the border as well as background of the accordion header. - -## Accessibility considerations - -This component has been validated to meet the -[WCAG 2.0 AA](https://www.w3.org/TR/WCAG20/) and -[Section 508](http://www.section508.gov/) accessibility guidelines, however -changes made by the content owner can affect accessibility compliance. Be sure -to review and follow the guidance in this section when updating or adding new -content to this component. - -1. Each accordion header must have a unique title (implemented via the label for - the button) that clearly describes the accordion panel content. This is - particularly helpful for users of assistive technologies so they have the - necessary information to efficiently navigate the content without having to - expand every section. -1. Carbon components should be used to create the content that displays within - each accordion panel. -1. Avoid keyboard traps when adding components to the accordion panel. For - example, the user expands an accordion, but is unable to tab to the next - focusable element. -1. Although the accordion component passes accessibility testing, content - authors need to ensure the content that is added to the accordion is - accessible. For example, if you add an image to the accordion header or panel - you need to include alternative text to pass accessibility testing. - -## Resources - -- [W3C WAI-ARIA Authoring Practices Accordion Design Pattern](https://www.w3.org/TR/wai-aria-practices/#accordion) - covers the usage of ARIA names, state and roles, as well as the expected - keyboard interactions. -- [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/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/requirements/requirements/#2_1_1) - (WCAG Success Criteria - [2.1.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard)) - - [2.1.2 No Keyboard Trap](https://www.ibm.com/able/requirements/requirements/#2_1_2) - (WCAG Success Criteria - [2.1.2](https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap)) - - [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/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/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/requirements/requirements/#4_1_2) - (WCAG Success Criteria - [4.1.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html)) - -## Accessibility testing - -Accessibility issues are tracked in the -[Carbon Component GitHub repository](https://github.com/carbon-design-system/carbon/issues?q=is%3Aopen+label%3A%22type%3A+a11y+%E2%99%BF%22+label%3A%22component%3A+accordion%22+). - -### Automated test +## What Carbon provides - - - - - - - Automated test environment - - Results - - - - - - - macOS Mojave version 10.14.2 with VoiceOver -
- - Chrome version 77.0.3865.90 -
- - Dynamic Assessment Plugin (DAP) version 1.8.0.0 - IBM - Accessibility WCAG 2.1 Sept. 2019 Ruleset -
- Carbon React version 7.7.1 - - - DAP test: -
- Violations - - - - - - +Carbon bakes keyboard operation into its components, improving the experience of +blind users and others who operate via the keyboard. Carbon incorporates many +other accessibility considerations, some of which are described below. + +### Keyboard interactions -### macOS screen reader tests +Each accordion is a tab stop. `Space` or `Enter` keys expand or collapse +accordions, which are collapsed by default. Interactive elements within expanded +accordions integrate into the tab order automatically. - - - - - Environment - Results - - - - - - - macOS Mojave version 10.14.6 with VoiceOver -
- - Chrome version 77.0.3865.90 -
- Carbon React version 7.7.1 - - - VoiceOver(VO) Test: - - - The Tab key and Shift-Tab navigate between accordion headers. VO - announces, expand/collapse, title, collapsed, button, the - button's state (expanded or collapsed), list, 1 item. You are - currently on a button... - - - Press Control-Option-Space (or Space) to expand or collapse the - accordion panel. VO announces expand/collapse title, the - button's state (expanded or collapsed). - - - With the second or third accordion header expanded, Press - Control-Option-Right Arrow. VO announces, the accordion panel - content and the line number in the list. - - - Press Control-Option-Left Arrow - VO announces reads the - accordion header again. - - - - - - - - macOS Mojave version 10.14.6 with VoiceOver -
- - Safari version 13.0.2 -
- Carbon React version 7.7.1 - - - VoiceOver(VO) test: - - - The Tab key and Shift-Tab navigate between accordion headers. VO - announces, expand/collapse, title, collapsed, button, the - button's state (expanded or collapsed), group. - - - Press Control-Option-Space (or Space) to expand or collapse the - accordion panel. VO announces expand/collapse title, the - button's state (expanded or collapsed). - - - With the second or third accordion header expanded, Press - Control-Option-Right Arrow. VO announces, the accordion panel - content and the line number in the list. Your are currently on a - text area. - - - Press Control-Option-Left Arrow - VO announces reads the - accordion header again. - - - - - - - + + +![example of accordion keyboard interaction](images/accordion-accessibility-1.png) + + + Accordions and interactive elements in the expanded content are in the tab + order and keyboard operable. + + + -### Windows screen reader tests +### Labeling and states + +The collapsed or expanded state of the accordions is +[programmatically set](https://www.ibm.com/able/requirements/requirements/#4_1_2) +by default, eliminating the need for designers to provide +[text equivalents](https://www.ibm.com/able/toolkit/design/content/text-equivalents/) +for the chevron icons. - - - - - Environment - Results - - - - - - - Microsoft Windows 10 -
- - JAWS 19.1903.47 -
- - Firefox version 67 -
- Carbon React version 7.7.1 - - - JAWS test: - - - The Tab key and Shift-Tab navigate between accordion headers. - JAWS announces, title, and expand/collapse status. - - - Press the Enter or Space key on the title. JAWS announces expand - or collapsed. - - - Navigate the text using the Up and Down Arrow keys, when JAWS - read the headers and associated text if expanded in a linear - order. - - - Please note that sometimes it takes a second for the text to - update after a title is expanded. When pressing the down arrow - key immediately after JAWS announces "expanded", JAWS jumps past - the text and reads the next title. - - - - - - - - Microsoft Windows 10 -
- - JAWS 19.1903.47 -
- - Chrome version 71.0.3578.98 (Official Build) (64-bit) -
- Carbon React version 7.7.1 - - - JAWS test: - - - The Tab key and Shift-Tab navigate between accordion headers. - JAWS announces, title, and expand/collapse status. - - - Press the Enter or Space key on the title. JAWS announces expand - or collapsed. - - - Navigate the text using the Up and Down Arrow keys, when JAWS - read the headers and associated text if expanded in a linear - order. - - - Please note that sometimes it takes a second for the text to - update after a title is expanded. When pressing the down arrow - key immediately after JAWS announces "expanded", JAWS jumps past - the text and reads the next title. - - - - - - - - Microsoft Windows 10 -
- - NVDA version 2018.4.1 -
- - Chrome version 72.0.3626.96 (Official Build) (64-bit) -
- Carbon React version 7.7.1 - - - NVDA test: - - - The Tab key and Shift-Tab navigate between accordion headers. - NVDA announces, title, and expand/collapse status. - - - Press the Enter or Space key on the title. NVDA announces expand - or collapsed. - - - Navigate the text using the Up and Down Arrow keys, when JAWS - read the headers and associated text if expanded in a linear - order. - - - - - - - + + +![expanded and collapsed accordions](images/accordion-accessibility-2.png) + +Carbon handles the accessibility of the chevron indicators. + + -### iOS screen reader tests +## Design recommendations + +Design annotations are needed for the following instances. + +### Headings + +Carbon accordions are not set as headings by default. For improved +accessibility, annotate accordions as headings on the first occurrence in a +product. Annotate the heading level of accordions as needed. See +[Indicate heading levels](https://www.ibm.com/able/toolkit/design/content/text-meaning/#heading-levels). - - - - Environment - Results - - - - - - iOS version 13.1.3 with VoiceOver -
- - Safari version 13.1.3 -
- Carbon React version 7.7.1 - - - VoiceOver test: - - - To navigate the accordion, swipe left or right, or use the Left - or Right Arrow keys when quick nav mode is on. On each header, - VoiceOver announces the header, and expanded/collapsed status. - - - To expand or collapse the accordion, doubletap on the header, or - press Control+Option+Space. VoiceOver announces, expanded or - collapses. - - - In some cases, VoiceOver also reads out the entire header, it - seems to happen randomly, possibly have to do with the speed of - the phone. - - - Navigate the text by swiping left or right, or by pressing the - Left or Right Arrow keys when quick navigation mode is on. After - each title, when moving to the left or right, VoiceOver will - read the text if it is expanded. - - - - - - - + + +![H1 and H2 annotations for headings, plus direction to ‘include accordion titles as headings'](images/accordion-accessibility-3.png) + + + If accordion titles act as headings, annotate for development. + + + -### Android screen reader tests +### Alignment + +Carbon chevrons are right-aligned by default, but left-aligned chevrons are more +accessible for users with low vision, as the expanded/collapsed indicator is +closer to the accordion title. - - - - - Environment - Results - - - - - - - Android version 9 with Talkback -
- - Chrome version 72.0.3626.96 (Official Build) (64-bit) -
- Carbon React version 7.7.1 - - - Talkback test: - - - To navigate the accordion, swipe left or right, or use the - Alt+Left or Right Arrow keys. On each header, TalkBack announces - the header, and expanded/collapsed status. - - - To expand or collapse the accordion, doubletap on the header, or - press Alt+Enter. Talkback announces expanded or collapses. - - - Navigate the text by swiping left or right, or by pressing the - Left or Right Arrow keys. After each title, when moving to the - left or right, Talkback will read the text if it is expanded. - - - - - - - + + +![annotation stating ‘position chevrons on the left of accordion titles'](images/accordion-accessibility-4.png) + +Annotate if the accordion chevrons should be left-aligned. + + + +## Development considerations + +Keep these considerations in mind if you are modifying Carbon or creating a +custom component: + +- The accordion header has a role of `
-Spacing and measurements for structured list | px / rem + + The width of structured list varies based on content and layout. +
@@ -67,5 +69,17 @@ set in sentence case. All typography is left aligned.
- Spacing and measurements for structured list with selection | px / rem + Spacing and measurements for default spacing with hang alignment and flush + alignment| px / rem + + +
+ +![Spacing and measurements for structured list with selection](images/structured-list-style-3.png) + +
+ + + Spacing and measurements for condensed spacing with hang alignment and flush + alignment | px / rem diff --git a/src/pages/components/structured-list/usage.mdx b/src/pages/components/structured-list/usage.mdx index f34e4147430..df76267755b 100755 --- a/src/pages/components/structured-list/usage.mdx +++ b/src/pages/components/structured-list/usage.mdx @@ -15,13 +15,47 @@ definitions. +Overview +Live demo +Formatting Content -Interactions +Related Feedback -import { CheckmarkFilled16 } from '@carbon/icons-react'; +## Overview + +Structured list displays a simple list with a considerable amount of items of +read-only values. It helps organize and present grouped information into logical +and scannable patterns. The content within a list can be stacked to create +hierarchy within the data. + +#### When to use + +- To browse information or select certain information within the group in the + simplest form +- To view description and detailed information, present features, or compare + pricing plans + +#### When not to use + +Nesting items is not recommended, as structured lists are used to present simple +data. If you have more than 25 items or additional content that needs to be +shown, consider using a +[data table](https://www.carbondesignsystem.com/components/data-table/usage/), +which supports nesting items and presents a larger set of content. + +### Variants + +| Variant | Purpose | +| ------------ | ----------------------------------------------------------------------------- | +| _Default_ | Allows the user to quickly browse and view information within a group of data | +| _Selectable_ | Allows the user to mark or select a desired option within a group of data | + +## Live demo + +import { CheckmarkFilled } from '@carbon/icons-react'; -## Content +## Formatting + +### Anatomy + +Structured list is composed of two sections—column header and data row. + + + + +![Structured list anatomy](images/structured-list-usage-1.png) + + + + +1. **Column header**: Shows titles for the row header description. +2. **Data row**: Shows different types of data. Rows can be selectable and + modified to show alternating zebra stripe background colors -- Row height varies based on content and can expand to fit multiple lines. -- In a single list, all rows do not have to be the same height. -- Column widths can either be equally proportional or proportioned based on - content. -- If a list extends past 25 items, consider using a - [data table](/components/data-table/usage) to present this larger set of - content. -- A maximum of one paragraph of text is recommended per row. -- Nesting items is not recommended, as structured lists are used to present - simple data. If you have additional content that needs to be shown, consider - using a [data table](/components/data-table/usage), which supports nesting - items. +### Sizing + +The structured list is available in two different sizes in height: default and +condensed. The structure list's width varies based on content and layout. -![Structured list to present definitions.](images/structured-list-usage-2.png) +![data table anatomy](images/structured-list-usage-2.png) -## Interactions +### Alignment + +The structured list is available in two alignment styles: hang and flush +alignment. + + + -Structured lists can be single-select if a user is choosing between a set of -options. +![data table anatomy](images/structured-list-usage-3.png) -#### Guidelines: + + + +## Content + +- A maximum of three paragraphs of text is recommended per row. +- A structured list’s title and row information should use sentence-case + capitalization. + +#### Column header titles + +- Column header titles should be short and clear, sticking to one or two words + that describe the data in that column. +- In cases where a column header title is too long, wrap the text to two lines + and then truncate the rest of the text. The full text should be shown in a + tooltip on hover. +- Column header titles should use sentence-case capitalization. + +## Interactions + +#### Selectable structured list - Only one item can be selected from the list. - By default, one option should be selected. @@ -239,6 +306,14 @@ options. - When the user selects an item from the list, the selected row will appear with the `checkmark--filled` icon. +## Related + +These following components are additional ways to organize a group of data. + +- [Accordion](https://www.carbondesignsystem.com/components/accordion/usage/) +- [Data table](https://www.carbondesignsystem.com/components/data-table/usage/) +- [List](https://www.carbondesignsystem.com/components/list/usage/) + ## Feedback Help us improve this component by providing feedback, asking questions, and diff --git a/src/pages/components/tooltip/code.mdx b/src/pages/components/tooltip/code.mdx index 522a0638b41..7ffa3c9857e 100755 --- a/src/pages/components/tooltip/code.mdx +++ b/src/pages/components/tooltip/code.mdx @@ -6,7 +6,7 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- -import { Filter16 } from '@carbon/icons-react'; +import { Filter } from '@carbon/icons-react'; diff --git a/src/pages/components/tooltip/usage.mdx b/src/pages/components/tooltip/usage.mdx index 80c00175652..5c481ca2592 100755 --- a/src/pages/components/tooltip/usage.mdx +++ b/src/pages/components/tooltip/usage.mdx @@ -155,7 +155,7 @@ The exception here is that definition tooltip can be invoked on `hover` or ## Live demo -import { Filter16 } from '@carbon/icons-react'; +import { Filter } from '@carbon/icons-react'; + scope={{ Filter16 }} +> {` + }} + >{` {` + }} + >{` @@ -236,7 +239,8 @@ import { Filter16 } from '@carbon/icons-react'; Vanilla: 'https://the-carbon-components.netlify.com/?nav=tooltip', 'Web Components': 'https://web-components.carbondesignsystem.com/?path=/story/components-tooltip--definition', - }}>{` + }} + >{` diff --git a/src/pages/contributing/add-ons.mdx b/src/pages/contributing/add-ons.mdx index 3cbd01edea4..493e6347aca 100644 --- a/src/pages/contributing/add-ons.mdx +++ b/src/pages/contributing/add-ons.mdx @@ -5,7 +5,7 @@ description: a specific product or experience. --- -import { CheckmarkFilled16 } from '@carbon/icons-react'; +import { CheckmarkFilled } from '@carbon/icons-react'; diff --git a/src/pages/contributing/component/index.mdx b/src/pages/contributing/component/index.mdx index 152d0a9819e..733a4eaf482 100644 --- a/src/pages/contributing/component/index.mdx +++ b/src/pages/contributing/component/index.mdx @@ -691,7 +691,7 @@ specific repo you intend to contribute to. diff --git a/src/pages/contributing/contribute-icons.mdx b/src/pages/contributing/contribute-icons.mdx index 1bf7cff64ff..d2fc9a3a601 100644 --- a/src/pages/contributing/contribute-icons.mdx +++ b/src/pages/contributing/contribute-icons.mdx @@ -52,7 +52,7 @@ guidelines to ensure visual consistency and proper formatting. - Make sure to properly name layers and artboards _(these names will also be exported into the code)_. - Review the - [icon master file](https://github.com/carbon-design-system/carbon/tree/main/packages/icons/master) + [icon master file](https://github.com/carbon-design-system/carbon/tree/v10/packages/icons/master) to see these guidelines in practice. ### Production-ready @@ -124,7 +124,7 @@ for approval. Before submitting artwork, first review our [icons library](https://www.carbondesignsystem.com/guidelines/icons/library/) or download the -[Carbon icon master .ai file](https://github.com/carbon-design-system/carbon/tree/main/packages/icons/master) +[Carbon icon master .ai file](https://github.com/carbon-design-system/carbon/tree/v10/packages/icons/master) to check your design for duplication against existing icons. ### Approval process diff --git a/src/pages/designing/design-resources/index.mdx b/src/pages/designing/design-resources/index.mdx index 9f446daf391..ae13251e308 100755 --- a/src/pages/designing/design-resources/index.mdx +++ b/src/pages/designing/design-resources/index.mdx @@ -59,7 +59,7 @@ You'll find even more guidance and assets in this file than on the site. ![](/images/ase.png) @@ -189,8 +189,8 @@ to help designers with every aspect of image creation and component specs. + href="https://www.sketch.com/s/240226b0-f455-484d-b412-cfd13fb1bb39" + actionIcon="launch"> diff --git a/src/pages/designing/tutorials.mdx b/src/pages/designing/tutorials.mdx index 6e065830b50..f4b788efb91 100644 --- a/src/pages/designing/tutorials.mdx +++ b/src/pages/designing/tutorials.mdx @@ -6,7 +6,7 @@ description: --- import { Button } from '@carbon/react'; -import { ArrowRight16 } from '@carbon/icons-react'; +import { ArrowRight } from '@carbon/icons-react'; diff --git a/src/pages/developing/dev-resources/index.mdx b/src/pages/developing/dev-resources/index.mdx index 05a0fb8bf8f..beb1179bbe4 100644 --- a/src/pages/developing/dev-resources/index.mdx +++ b/src/pages/developing/dev-resources/index.mdx @@ -37,7 +37,7 @@ your framework of choice. diff --git a/src/pages/developing/frameworks/react.mdx b/src/pages/developing/frameworks/react.mdx index 8faee2d5e75..a91aab4e135 100755 --- a/src/pages/developing/frameworks/react.mdx +++ b/src/pages/developing/frameworks/react.mdx @@ -76,7 +76,7 @@ yarn add @carbon/react 1. These components require the use of [webpack](https://webpack.js.org/guides/getting-started/) in your project. See our - [webpack.config.js](https://github.com/carbon-design-system/carbon/blob/main/packages/react/.storybook/webpack.config.js) + [webpack.config.js](https://github.com/carbon-design-system/carbon/blob/v10/packages/react/.storybook/webpack.config.js) for an example configuration. 2. Components do not import any of the styles themselves, use the SCSS or CSS @@ -92,7 +92,7 @@ yarn add @carbon/react ## Development Please refer to the -[Contribution Guidelines](https://github.com/carbon-design-system/carbon/blob/main/.github/CONTRIBUTING.md) +[Contribution Guidelines](https://github.com/carbon-design-system/carbon/blob/v10/.github/CONTRIBUTING.md) before starting any work. ### Using the server @@ -124,7 +124,7 @@ top right corner of the selected component. If you experience any issues while getting set up with Carbon Components React, please head over to the -[GitHub repo](https://github.com/carbon-design-system/carbon/tree/main/packages/react) +[GitHub repo](https://github.com/carbon-design-system/carbon/tree/v10/packages/react) for more guidelines and support. Please [create an issue](https://github.com/carbon-design-system/carbon/issues) if your issue does not already exist. diff --git a/src/pages/developing/frameworks/vanilla.mdx b/src/pages/developing/frameworks/vanilla.mdx index 9d9128fcb9c..552748a86b0 100755 --- a/src/pages/developing/frameworks/vanilla.mdx +++ b/src/pages/developing/frameworks/vanilla.mdx @@ -123,7 +123,7 @@ prefixes are automatically added to your output CSS. #### Default body styles CSS is automatically applied to `` element, which comes from -[\_css--body.scss](https://github.com/carbon-design-system/carbon/blob/main/packages/components/src/globals/scss/_css--body.scss). +[\_css--body.scss](https://github.com/carbon-design-system/carbon/blob/v10/packages/components/src/globals/scss/_css--body.scss). These styles are meant to cascade down to everything in `` to set common styles shared across all components. @@ -153,7 +153,7 @@ to `true` by default. For example: - When you set `$css--reset: true`, then the contents of - [\_css--reset.scss](https://github.com/carbon-design-system/carbon/blob/main/packages/components/src/globals/scss/_css--reset.scss) + [\_css--reset.scss](https://github.com/carbon-design-system/carbon/blob/v10/packages/components/src/globals/scss/_css--reset.scss) will be part of your output CSS. - When you set `$css--reset: false`, then nothing gets included from that SCSS file. @@ -336,7 +336,7 @@ customElements.define('bx-loading', BXLoading); carbon-components requires some polyfills for older browsers, in addition to carbon-components.js (or carbon-components.min.js). The latest list of polyfills is maintained in -[carbon-components/blob/main/packages/components/demo/polyfills/index.js](https://github.com/carbon-design-system/carbon/blob/main/packages/components/demo/polyfills/index.js). +[carbon-components/blob/main/packages/components/demo/polyfills/index.js](https://github.com/carbon-design-system/carbon/blob/v10/packages/components/demo/polyfills/index.js). You can easily find the polyfills in NPM, etc. The current list is below: - [Array.from()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) diff --git a/src/pages/developing/react-tutorial/step-1.mdx b/src/pages/developing/react-tutorial/step-1.mdx index 50d9c7a4c01..041cee622ca 100644 --- a/src/pages/developing/react-tutorial/step-1.mdx +++ b/src/pages/developing/react-tutorial/step-1.mdx @@ -331,7 +331,7 @@ export default TutorialHeader; **Note:** you can find a description of the different components used UI Shell in our -[carbon-components-react](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/UIShell) +[carbon-components-react](https://github.com/carbon-design-system/carbon/tree/v10/packages/react/src/components/UIShell) package. diff --git a/src/pages/developing/react-tutorial/step-2.mdx b/src/pages/developing/react-tutorial/step-2.mdx index e14ec5e2bb0..b700dc66af6 100644 --- a/src/pages/developing/react-tutorial/step-2.mdx +++ b/src/pages/developing/react-tutorial/step-2.mdx @@ -102,7 +102,7 @@ You should see something similar to where the Before we get started with this step, we'll be adding some components that require IE11 polyfills. As shown in the -[Carbon React documentation](https://github.com/carbon-design-system/carbon/blob/main/packages/react/.storybook/polyfills.js), +[Carbon React documentation](https://github.com/carbon-design-system/carbon/blob/v10/packages/react/.storybook/polyfills.js), go ahead and add these imports to the top of the root `index.js`. They aren't all needed, but we'll add them all to play it safe for the duration of the tutorial. diff --git a/src/pages/developing/react-tutorial/step-4.mdx b/src/pages/developing/react-tutorial/step-4.mdx index 51a06a9970c..8e09c11328c 100644 --- a/src/pages/developing/react-tutorial/step-4.mdx +++ b/src/pages/developing/react-tutorial/step-4.mdx @@ -253,7 +253,7 @@ While we're at the top of `LandingPage.js`, import the icons that we'll need as well. ```javascript path=src/content/LandingPage/LandingPage.js -import { Application32, Globe32, PersonFavorite32 } from '@carbon/icons-react'; +import { Application, Globe, PersonFavorite } from '@carbon/icons-react'; ``` @@ -422,26 +422,70 @@ styles and to bottom-align the icons. ## Check accessibility We've added new markup and styles, so it's a good practice to check -[DAP](https://www.ibm.com/able/dynamic-assessment-plug-in.html) and make sure +[Equal Access Checker](https://www.ibm.com/able/toolkit/tools/) and make sure our rendered markup is on the right track for accessibility. With the browser extension installed, Chrome in this example, open Dev Tools and -run DAP. +run Accessibility Assessment. -![DAP violations](../shared/step-4/images/DAP-violations.png) +![Equal Access Checker violations](../shared/step-4/images/EqualAccessChecker-violations.png) -DAP violations +Equal Access Checker violations -That first violation is for the off-screen "skip to content" link. This link -isn't shown and is used to assist screen reading, so the color contrast -violation can be ignored. +All these violations came from the `` element used in `LandingPage`. +`` element expects a unique value for the ARIA properties `aria-controls` +and `aria-labelledby`. Setting a unique `id` attribute for all the three tabs +will solve the problem. -But, those three other violations came from the `
` element used in new -`InfoCard`. Since the `
` element requires a label, it seems like we may -be using the wrong semantic element. A humble `
` will suffice. +In `LandingPage.js`, replace the `` element with: -In `Info.js`, replace the `
` opening and closing tags with `
` -tags. +```javascript path=src/content/LandingPage/LandingPage.js + + +
+
+
+

What is Carbon?

+

+ Carbon is IBM’s open-source design system for digital products and + experiences. With the IBM Design Language as its foundation, the + system consists of working code, design tools and resources, human + interface guidelines, and a vibrant community of contributors. +

+ +
+
+ Carbon illustration +
+
+
+ + +
+
+
+ Rapidly build beautiful and accessible experiences. The Carbon kit + contains all resources you need to get started. +
+
+
+ + +
+
+
+ Carbon provides styles and components in Vanilla, React, Angular, and + Vue for anyone building on the web. +
+
+
+ + +``` ## Submit pull request diff --git a/src/pages/developing/shared/step-4/images/DAP-violations.png b/src/pages/developing/shared/step-4/images/DAP-violations.png deleted file mode 100644 index a0a90d1b3cc..00000000000 Binary files a/src/pages/developing/shared/step-4/images/DAP-violations.png and /dev/null differ diff --git a/src/pages/developing/shared/step-4/images/EqualAccessChecker-violations.png b/src/pages/developing/shared/step-4/images/EqualAccessChecker-violations.png new file mode 100644 index 00000000000..d6fe7e70a8c Binary files /dev/null and b/src/pages/developing/shared/step-4/images/EqualAccessChecker-violations.png differ diff --git a/src/pages/guidelines/2x-grid/implementation.mdx b/src/pages/guidelines/2x-grid/implementation.mdx index 5c007e414e4..52f9cf45eba 100644 --- a/src/pages/guidelines/2x-grid/implementation.mdx +++ b/src/pages/guidelines/2x-grid/implementation.mdx @@ -1369,7 +1369,7 @@ Image size can change ratios when the breakpoint changes. diff --git a/src/pages/guidelines/2x-grid/overview.mdx b/src/pages/guidelines/2x-grid/overview.mdx index 6034a786e66..8766fb17c69 100644 --- a/src/pages/guidelines/2x-grid/overview.mdx +++ b/src/pages/guidelines/2x-grid/overview.mdx @@ -41,7 +41,7 @@ creative decision-making. @@ -108,16 +108,16 @@ fluid grid, or by tiling fixed boxes in multiples. #### Fluid grid -A [fluid grid](#fluid-grid) divides space by twos. This division is immediately -evident in the 2x column structure. Within a breakpoint, the column count is -constant, and unit size scales with screen size. Choose a column count by -starting with one, then divide by two as needed. +A fluid grid divides space by twos. This division is immediately evident in the +2x column structure. Within a breakpoint, the column count is constant, and unit +size scales with screen size. Choose a column count by starting with one, then +divide by two as needed. #### Fixed grid -A [fixed grid](#fixed-grid) starts with a fixed unit size from the sizing scale, -then tiles and wraps as needed, like text. To employ the 2x concept, multiply -box sizes by two and mix them together. +A fixed grid starts with a fixed unit size from the sizing scale, then tiles and +wraps as needed, like text. To employ the 2x concept, multiply box sizes by two +and mix them together. When tiling fixed boxes, the column count is not known in advance, but a grid emerges visually due to the use of a consistent sizing scale. On breakpoint @@ -181,7 +181,7 @@ breakpoints. Create custom breakpoints to accommodate special needs, by writing your own media queries and CSS rules. Refer to the -[grid code package](https://github.com/carbon-design-system/carbon/tree/main/packages/grid) +[grid code package](https://github.com/carbon-design-system/carbon/tree/v10/packages/grid) for more information. | Breakpoint | Value (px/rem) | Columns | Size (%) | Size | Padding | Margin | diff --git a/src/pages/guidelines/color/code.mdx b/src/pages/guidelines/color/code.mdx index e963b319aa1..f8dff8e2621 100644 --- a/src/pages/guidelines/color/code.mdx +++ b/src/pages/guidelines/color/code.mdx @@ -126,7 +126,7 @@ warmGray100; // Using the `warmGray100` variable. diff --git a/src/pages/guidelines/color/overview.mdx b/src/pages/guidelines/color/overview.mdx index cec196c86b7..b868988247f 100755 --- a/src/pages/guidelines/color/overview.mdx +++ b/src/pages/guidelines/color/overview.mdx @@ -641,7 +641,7 @@ to achieve commonly used contrast ratios between any two colors. @@ -651,7 +651,7 @@ to achieve commonly used contrast ratios between any two colors. diff --git a/src/pages/guidelines/icons/code.mdx b/src/pages/guidelines/icons/code.mdx index e7afeabca41..1d7273f2968 100644 --- a/src/pages/guidelines/icons/code.mdx +++ b/src/pages/guidelines/icons/code.mdx @@ -163,7 +163,7 @@ browsers like Internet Explorer 11 by setting `focusable` to `true`. @@ -173,7 +173,7 @@ browsers like Internet Explorer 11 by setting `focusable` to `true`. diff --git a/src/pages/guidelines/icons/contribute.mdx b/src/pages/guidelines/icons/contribute.mdx index fd7793e2ece..f1019718a48 100644 --- a/src/pages/guidelines/icons/contribute.mdx +++ b/src/pages/guidelines/icons/contribute.mdx @@ -53,7 +53,7 @@ guidelines to ensure visual consistency and proper formatting. - Make sure to properly name layers and artboards _(these names will also be exported into the code)_. - Review the - [icon master file](https://github.com/carbon-design-system/carbon/tree/main/packages/icons/master) + [icon master file](https://github.com/carbon-design-system/carbon/tree/v10/packages/icons/master) to see these guidelines in practice. ### Production-ready @@ -100,7 +100,7 @@ for approval. Before submitting artwork, first review our [icons library](https://www.carbondesignsystem.com/guidelines/icons/library/) or download the -[Carbon icon master .ai file](https://github.com/carbon-design-system/carbon/tree/main/packages/icons/master) +[Carbon icon master .ai file](https://github.com/carbon-design-system/carbon/tree/v10/packages/icons/master) to check your design for duplication against existing icons. ### Approval process diff --git a/src/pages/guidelines/icons/usage.mdx b/src/pages/guidelines/icons/usage.mdx index 9fdc716cbd1..d1001d49e75 100644 --- a/src/pages/guidelines/icons/usage.mdx +++ b/src/pages/guidelines/icons/usage.mdx @@ -25,7 +25,7 @@ important information. @@ -35,7 +35,7 @@ important information. diff --git a/src/pages/guidelines/motion/overview.mdx b/src/pages/guidelines/motion/overview.mdx index 9448c1cd2d7..95163300ae3 100644 --- a/src/pages/guidelines/motion/overview.mdx +++ b/src/pages/guidelines/motion/overview.mdx @@ -227,7 +227,7 @@ that it would come to rest just outside the view, and ready to be recalled. ### Summary on easing The -[IBM motion package](https://github.com/carbon-design-system/carbon/tree/main/packages/motion) +[IBM motion package](https://github.com/carbon-design-system/carbon/tree/v10/packages/motion) has the easing curves stored for fast access. This is the recommended method to call an easing curve and stay connected to receive any future updates. @@ -363,7 +363,7 @@ statically. diff --git a/src/pages/guidelines/pictograms/code.mdx b/src/pages/guidelines/pictograms/code.mdx index 84e7930420c..0e422e37281 100644 --- a/src/pages/guidelines/pictograms/code.mdx +++ b/src/pages/guidelines/pictograms/code.mdx @@ -128,7 +128,7 @@ browsers like Internet Explorer 11 by setting `focusable` to `true`. diff --git a/src/pages/guidelines/pictograms/usage.mdx b/src/pages/guidelines/pictograms/usage.mdx index 16ef73c4462..f8dcc20233b 100644 --- a/src/pages/guidelines/pictograms/usage.mdx +++ b/src/pages/guidelines/pictograms/usage.mdx @@ -6,7 +6,7 @@ description: tabs: ['Library', 'Usage', 'Code', 'Contribute'] --- -import { Bee32 } from '@carbon/icons-react'; +import { Bee } from '@carbon/icons-react'; @@ -44,7 +44,7 @@ become an elegant addition to the IBM experience. ![Github Icon](../../../images/resource-cards/github.png) @@ -55,7 +55,7 @@ become an elegant addition to the IBM experience. @@ -67,7 +67,7 @@ become an elegant addition to the IBM experience. diff --git a/src/pages/guidelines/spacing/code.mdx b/src/pages/guidelines/spacing/code.mdx index ec6b0a312ab..e23dbc98b50 100644 --- a/src/pages/guidelines/spacing/code.mdx +++ b/src/pages/guidelines/spacing/code.mdx @@ -68,8 +68,7 @@ the following: #### API -
-| Export | Description | !default | | :------------------ | :---------- | :------- +
| Export | Description | !default | | :------------------ | :---------- | :------- | | `$spacing-01` | | ✅ | | `$spacing-02` | | ✅ | | `$spacing-03` | | ✅ | | `$spacing-04` | | ✅ | | `$spacing-05` | | ✅ | | `$spacing-06` | | ✅ | | `$spacing-07` | | ✅ | | `$spacing-08` | | ✅ | | `$spacing-09` | | ✅ | | `$spacing-10` | | ✅ | | `$spacing-11` @@ -94,7 +93,7 @@ following: diff --git a/src/pages/guidelines/themes/code.mdx b/src/pages/guidelines/themes/code.mdx index eb49902c1a6..5aada190809 100644 --- a/src/pages/guidelines/themes/code.mdx +++ b/src/pages/guidelines/themes/code.mdx @@ -143,7 +143,7 @@ import { diff --git a/src/pages/guidelines/themes/overview.mdx b/src/pages/guidelines/themes/overview.mdx index ccd91f67b42..8e176a205f6 100755 --- a/src/pages/guidelines/themes/overview.mdx +++ b/src/pages/guidelines/themes/overview.mdx @@ -867,7 +867,7 @@ changing for each individual theme. diff --git a/src/pages/guidelines/typography/code.mdx b/src/pages/guidelines/typography/code.mdx index 2702b52942e..07583ca8f03 100644 --- a/src/pages/guidelines/typography/code.mdx +++ b/src/pages/guidelines/typography/code.mdx @@ -267,7 +267,7 @@ There is also a `type-scale` mixin that will set `font-size` for your directly: diff --git a/src/pages/guidelines/typography/overview.mdx b/src/pages/guidelines/typography/overview.mdx index 3764fe8655d..767a6057d92 100644 --- a/src/pages/guidelines/typography/overview.mdx +++ b/src/pages/guidelines/typography/overview.mdx @@ -221,7 +221,7 @@ for primary actions. @@ -231,7 +231,7 @@ for primary actions. diff --git a/src/pages/help/migration-guide/design.mdx b/src/pages/help/migration-guide/design.mdx new file mode 100644 index 00000000000..97097adf512 --- /dev/null +++ b/src/pages/help/migration-guide/design.mdx @@ -0,0 +1,188 @@ +--- +title: Migration guide +description: + This guide includes everything you need to migrate your offering from an + earlier version of Carbon to v10. +tabs: ['Overview', 'Design', 'Develop'] +--- + + + +The transition from v9 to v10 is primarily visual. The IBM color palette was +updated between versions and a 16-column grid was introduced. + + + + + +IBM Design Language +Design kit +Elements +Design migration strategy + + + +## IBM Design Language + +Carbon v10 delivers the +[IBM Design Language](https://www.ibm.com/design/language/) to product teams. It +represents a complete visual refresh of the system, delivering the ethos of IBM +Design. Carbon v10 is a modern, open-source framework for building digital +products and experiences, with tooling and guidance on color, layout, +typography, iconography, motion, patterns, and content. + +## Design kit + +All components, colors, icons, typography, motion, and grid elements in the kit +align with the IBM Design Language. + +### What changed + +- Sketch kit delivered with Sketch Cloud +- New color tokens +- Updated text styles +- Updated spacing +- Icon updates +- Updated layer styles + +#### Sketch libraries + +Designers can subscribe to the design kit library via Sketch Cloud, and updates +to the contents of the kit will be pushed to subscribers as they become +available. + +#### Icons, pictograms, and the full IBM color palette + +To access the IBM Design Language icons, pictograms, and colors, subscribe to +the +[IBM Design Language libraries](/designing/design-resources#color-grid-and-icons). + +#### Migrating to v10 + +Upgrading to the v10 kit will not automatically change any files created in +previous versions of the kit. Swapping v9 symbols for v10 symbols is a manual +process. + +Although libraries from multiple versions of Carbon can exist in Sketch at the +same time, you should avoid using v10 symbols in an app designed with v9. + +### Setting up the kit + +Head over to [Design kits](/designing/kits/sketch) to set up the new Sketch +libraries. + +## Elements + +### Themes and color + +Carbon offers four color themes. See the +[theming guidelines](/guidelines/color/overview#themes) to learn how to use the +themes, and visit the color migration guide to learn more about color tokens +added in v10. + + + + + + + + + + + +### Icons + +The [icon library](/guidelines/icons/library) was updated and expanded with v10. +The full library of icons and pictograms is available via the IBM Design +Language icon [Sketch library](/guidelines/icons/usage#resources). + +Any v9 icons should be reviewed against the new icons before publishing. +Wherever possible, replace old icons with an updated version. + + + + + + + + + + + +### Typography + +The typeface for Carbon remains +[IBM Plex](/guidelines/typography/overview/#typeface:-ibm-plex). The +[type token](/guidelines/typography/overview#type-tokens-and-sets) architecture +was redesigned for better clarity and flexibility, moving from a basic type +scale model to a more robust token-based architecture. Work with your +development team to discuss how this new architecture might affect your team's +workflow. + + + + + + + + + + + +### Motion + +Carbon v10 adheres to IBM Design Language +[motion standards](/guidelines/motion/overview), designed to bring unity and +cohesion to all motion in a user interface. All interactions that include motion +should abide by these standards. + +### Layout, grid, and spacing + +Carbon v10 uses the 16-column [2x Grid](/guidelines/2x-grid/overview). Carbon +v10 will default to the 12-column grid with an option to switch to the 16-column +grid. Designers starting on new layouts using v10 should use the 16-column grid. + +Layout and spacing token names were updated in v10 but the values remain the +same. + + + + + + + + + + + +## Design migration strategy + +The fastest approach to v10 migration starts with the front-end developer. +Developers should update the product's front end code to v10 and conduct a +visual review with team designers. The transition should not cause any major +breaks in the UI but there will likely be layout and color issues. Product teams +using v9 components in their code should see a mostly seamless code transition. + +Throughout visual review and iteration process, ask: + +- Are you using type tokens? +- Are you using the color tokens correctly? +- Is the spacing between components correct? +- Do animations in the UI match the new motion standards? +- Does the general layout still work, and does it express the IBM Design + Language accurately and effectively? + +Following this review, work any development and design issues into your team's +planning workflow. diff --git a/src/pages/help/migration-guide/develop.mdx b/src/pages/help/migration-guide/develop.mdx new file mode 100644 index 00000000000..ee208b6356d --- /dev/null +++ b/src/pages/help/migration-guide/develop.mdx @@ -0,0 +1,286 @@ +--- +title: Migration guide +description: + This guide includes everything you need to migrate your offering from an older + version of Carbon to v10. +tabs: ['Overview', 'Design', 'Develop'] +--- + + + +The repository structure was overhauled during the transition from v9 to v10. +Carbon code now lives in a monorepo. + + + + + +Repo architecture +Carbon components +Carbon elements + + + +## Repo architecture + +[Carbon-themes](https://github.com/carbon-design-system/carbon-themes) was +deprecated in v10, and the themes package +[@carbon/themes](https://github.com/carbon-design-system/carbon/tree/v10/packages/themes) +now lives in the [Carbon](https://github.com/carbon-design-system/carbon) +monorepo. + + + + + + + + + + + +## Carbon components + +Carbon components were reskinned in v10. The redesign was conducted with maximum +backwards compatibility in mind. Users of v9 should be able to upgrade to v10 +automatically with minimal breakage. + +Detailed technical migration docs for Carbon components are available in the +[carbon-components repo](https://github.com/carbon-design-system/carbon/blob/v10/packages/components/docs/migration/migrate-to-10.x.md). +Here you will find links to component-level migration information, as well as a +list of those components that have been removed or are under development. + +There is also a dedicated +[Sass migration guide](https://github.com/carbon-design-system/carbon/blob/v10/packages/components/src/globals/scss/migrate-to-10.x.md) +that covers changes to global styling. + + + + + + + + + + + + + + + + + + + + + + + + + +## Carbon elements + +All technical migration docs for Carbon elements are available in the `carbon` +monorepo +[docs folder](https://github.com/carbon-design-system/carbon/tree/v10/docs/migration). + + + + + + + + + + + +### Icons + +The `@carbon/icons` package can be now be found in the +[Carbon monorepo](https://github.com/carbon-design-system/carbon/tree/v10/packages/icons). + +The +[Carbon icons demo](https://carbon-elements.netlify.com/icons/examples/preview/) +contains a master table for all Carbon icons, including name, size, preview, +download links, quick links for filing issues, module name, and relative path. + + + + + + + + + + + + + + + + + + + + + + + + + +### Color + +The v10 color token architecture is based on the v9 architecture, with some +minor changes to align with the design language. Carbon v9 product teams will +see automatic, non-breaking color updates when they upgrade to v10. + + + + + + + + + + + + + + + + + + + + + + + + + +### Type + +The type token architecture was redesigned for better clarity and flexibility. +V10 moves from a basic type scale model to a more robust token-based +architecture. + + + + + + + + + + + + + + + + + + +### Layout, grid, and spacing + +Token names changed in v10 but spacing values did not. + + + + + + + + + + + + + + + + + + + + + + + + + +### Motion + +Carbon adheres to IBM Design Language motion standards. Motion updates should be +coordinated with your product's design team. + + + + + + + + + + + + + + + + + diff --git a/src/pages/index.mdx b/src/pages/index.mdx index 9b59c527954..86d055e6d21 100755 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -67,7 +67,7 @@ building websites and user interfaces. @@ -87,7 +87,7 @@ building websites and user interfaces. diff --git a/src/pages/migrating/guide/images/carbon_2021-beta-1.png b/src/pages/migrating/guide/images/carbon_2021-beta-1.png new file mode 100644 index 00000000000..4b24ea10f3a Binary files /dev/null and b/src/pages/migrating/guide/images/carbon_2021-beta-1.png differ diff --git a/src/pages/migrating/guide/images/carbon_2021-beta-2.png b/src/pages/migrating/guide/images/carbon_2021-beta-2.png new file mode 100644 index 00000000000..08107b0d023 Binary files /dev/null and b/src/pages/migrating/guide/images/carbon_2021-beta-2.png differ diff --git a/src/pages/migrating/guide/images/carbon_2021-beta-3.png b/src/pages/migrating/guide/images/carbon_2021-beta-3.png new file mode 100644 index 00000000000..39346635faa Binary files /dev/null and b/src/pages/migrating/guide/images/carbon_2021-beta-3.png differ diff --git a/src/pages/whats-happening/meetups/index.mdx b/src/pages/whats-happening/meetups/index.mdx index a2a0a9afa54..46fd971e9fe 100644 --- a/src/pages/whats-happening/meetups/index.mdx +++ b/src/pages/whats-happening/meetups/index.mdx @@ -7,7 +7,7 @@ description: --- import { Button } from '@carbon/react'; -import { ArrowRight16 } from '@carbon/icons-react'; +import { ArrowRight } from '@carbon/icons-react'; diff --git a/src/styles/_grid-demo.scss b/src/styles/_grid-demo.scss index ce34452035a..c98fe38e61f 100644 --- a/src/styles/_grid-demo.scss +++ b/src/styles/_grid-demo.scss @@ -1,4 +1,4 @@ -@use '@carbon/grid/scss/modules/flex-grid' as *; +@use '@carbon/grid/scss/flex-grid' as *; @use '@carbon/react/scss/breakpoint' as *; @use '@carbon/react/scss/compat/theme' as *; @use '@carbon/react/scss/colors' as *; @@ -106,7 +106,7 @@ } .grid-demo [class*='col'] { - @include type-style('caption-01'); + @include type-style('label-01'); padding-top: $spacing-05; min-height: 4rem; background-color: $blue-10; diff --git a/src/styles/_homepage.scss b/src/styles/_homepage.scss index bc6e256dc2c..437cded4e45 100644 --- a/src/styles/_homepage.scss +++ b/src/styles/_homepage.scss @@ -18,14 +18,14 @@ } .homepage--header { - height: 0; + height: 500px; overflow: hidden; - padding-top: 100%; + padding-top: 0; position: relative; - @include breakpoint('md') { - padding-top: 50%; - } + // @include breakpoint('lg') { + // padding-top: 50%; + // } // Match max height at lg breakpoint @include breakpoint('lg') { @@ -34,6 +34,19 @@ } } +.homepage--header .cds--grid { + background-size: cover; + background-position: center; + height: 50vh; + max-height: 560px; + width: 100%; + max-width: 100%; + + @include breakpoint('lg') { + background-position: 100px center; + } +} + .homepage--header .cds--grid, .homepage--header .cds--row { height: 100%; diff --git a/yarn.lock b/yarn.lock index 6cdf8d518f1..751500d2401 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1140,47 +1140,45 @@ resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.29.0.tgz#92b1f8822a0ca07d23daba12d360f90debcc3d26" integrity sha512-Ga20vVFGrhEgALIVZoWbcooWOVnx7Ox8GbRWlZDEAe6JUbz6ynDKiq3td7GtFVk0ELRCIV8gVu3F/PfssyhwQA== -"@carbon/colors@^10.37.0": - version "10.37.1" - resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.37.1.tgz#6e5a62fedb256bab56873f7b42985b515521b856" - integrity sha512-Bst1o2RGB0Fpdd2p9y+2fl2oxtXuI0RiVhxKBChKOPZkeBJZTWj1jNgQuNK1ZALHWGX9rL75i7tJmhlXbukfmA== - -"@carbon/elements@^10.55.0": - version "10.55.0" - resolved "https://registry.yarnpkg.com/@carbon/elements/-/elements-10.55.0.tgz#98363ef44ddfe19171e0f6d77ac0fb3d02417908" - integrity sha512-R6oXQtEwm6r+v64MsE6/vFCwVqijBg6rvzxq70KTYmLVpbn01TH9+oZg+BQ/dkUkWoURPmubMLocPYMOMqUxoQ== - dependencies: - "@carbon/colors" "^10.37.0" - "@carbon/grid" "^10.43.0" - "@carbon/icons" "^10.48.0" - "@carbon/import-once" "^10.7.0" - "@carbon/layout" "^10.37.0" - "@carbon/motion" "^10.29.0" - "@carbon/themes" "^10.54.0" - "@carbon/type" "^10.44.0" +"@carbon/colors@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-11.0.0.tgz#01e7bb7ca7d71deea5c6f20e2d6bf99e7f47b618" + integrity sha512-12zcB3Hf6kgxzvrhMEnGEMs4m8ferwEOqkcmeKYmCTr7G3uTozcCdwYGc7vEFIjKPbmKNpQ3BJ+19k/+kMViDg== + +"@carbon/elements@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@carbon/elements/-/elements-11.0.0.tgz#fd25b02d70667f1c4a7bde8ea779e32444cd4f13" + integrity sha512-V0sV1hbI1Yc8K8dVh88SpB5YMoERfs+QwIDmNbf3nCpi7MBVijXmX2nprZL27MaEDlIuKOtO1Da7mCKUBfkDmQ== + dependencies: + "@carbon/colors" "^11.0.0" + "@carbon/grid" "^11.0.0" + "@carbon/icons" "^11.0.0" + "@carbon/layout" "^11.0.0" + "@carbon/motion" "^11.0.0" + "@carbon/themes" "^11.0.0" + "@carbon/type" "^11.0.0" "@carbon/feature-flags@^0.7.0": version "0.7.0" resolved "https://registry.yarnpkg.com/@carbon/feature-flags/-/feature-flags-0.7.0.tgz#fe8068b482439ae7af519ccdbf627f31373bb646" integrity sha512-nxVvnSMC6Ia/xn0j02FHPATfB/Iv6nnkZAQ6GrEdPLivSF1T2oaTvgawUsXBO8RBX7wQBq5l7uW8qH/0WfjIFw== -"@carbon/grid@^10.43.0", "@carbon/grid@^10.43.1": - version "10.43.1" - resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-10.43.1.tgz#6332a9ab3a0730c7077e3b57fe88e140e13c1182" - integrity sha512-gBfAEIfso5GjYPB1+BHjpNIfzDzBHb8xz9GRBhdrTlDVw9RJ4KH4MfYDeObiFQ/I7/6YCOE+LjjLv/BTm9iWBQ== +"@carbon/grid@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@carbon/grid/-/grid-11.0.0.tgz#b3ead27a87883a78b6fca597306c1b0e13fce863" + integrity sha512-GFP5M4nH8tDEkOMgfKCV9ZA7I9SnDVgmg+L7vwlDHW6Kq1TS2jBoiLC7BBdeNE8RJZPk/lgDXn/56RV8hjrWVw== dependencies: - "@carbon/import-once" "^10.7.0" - "@carbon/layout" "^10.37.1" + "@carbon/layout" "^11.0.0" "@carbon/icon-helpers@^10.25.0": version "10.25.0" resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.25.0.tgz#bfe2465e165bb78477c77494610552064fcab09f" integrity sha512-jvDUKz3NLopiDf7BROLDAT4NoswMpeXg4+ulbkLlFHdgY3v7gaxT/MJ7f9DZeEIiYUBhQSjTmcB3agIIO1jOdw== -"@carbon/icon-helpers@^10.28.0": - version "10.28.0" - resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.28.0.tgz#702f1bb055c6c2bc203cdd44582ebd3d2801eaaf" - integrity sha512-hf4fjouzr3jCvh5lTWJt87ABWmoq+3ck0/OOLpxUZLfhumTLRW+8H1Ctz0ldQh5mhmFaPNQUifll6tGI5bkmTw== +"@carbon/icon-helpers@^10.29.0": + version "10.29.0" + resolved "https://registry.yarnpkg.com/@carbon/icon-helpers/-/icon-helpers-10.29.0.tgz#686bc5a337bec6d8fb482655f4564f3376452a35" + integrity sha512-QlYdeL97klhqahsayK6uEDPtr7imU4bdaudWPVZojg+7Uio3WNzb5iUNLkWA5zRLvP4xgcjSpbdDX2sT3CgL2A== "@carbon/icons-react@^10.32.0": version "10.42.0" @@ -1191,74 +1189,83 @@ "@carbon/telemetry" "0.0.0-alpha.6" prop-types "^15.7.2" -"@carbon/icons-react@^10.49.0": - version "10.49.0" - resolved "https://registry.yarnpkg.com/@carbon/icons-react/-/icons-react-10.49.0.tgz#178f62fe2f5b343fa2d2034fb14203b01d44b894" - integrity sha512-Lzz0A/DfR0fBye0pyxA/7+EPr1e0GeA5qYlxoOwOVJrp/L2vFuKPOe7QLBHkNgKly/BAdqN9Uo1IHKbp6Zljeg== +"@carbon/icons-react@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@carbon/icons-react/-/icons-react-11.0.0.tgz#23651a3f9abacb7994eb5cad9017aba4e72272b1" + integrity sha512-ZAbBzRD/gs+NOv5fsTMvNPyYook64plDA8qFb59ANDxQg4EA717RjuVMlHK8uOkj5+fK0OjJ/5bLmfKLaXogsQ== dependencies: - "@carbon/icon-helpers" "^10.28.0" + "@carbon/icon-helpers" "^10.29.0" "@carbon/telemetry" "0.1.0" prop-types "^15.7.2" -"@carbon/icons@^10.48.0": - version "10.48.0" - resolved "https://registry.yarnpkg.com/@carbon/icons/-/icons-10.48.0.tgz#a517812f42fc816ef9735409383111d8f23e7bff" - integrity sha512-wLvTfQy4k/vF8oVH2T/esISogdyjWJ34KdlfD//A0bKa6YViJStnvyoJA8Pmi7XolVyKm5Cw1ho7CjV1TFBJSg== - -"@carbon/import-once@^10.7.0": - version "10.7.0" - resolved "https://registry.yarnpkg.com/@carbon/import-once/-/import-once-10.7.0.tgz#3e66e1308cad78272e2d9d9ea3741dd073860263" - integrity sha512-KoqbfzGKjO89iUPabN6zNpXpcjxgQYgpHmesZ/DXc/zeV0PyHrnAOC8Q3J0cRPf1zYpGRHN2Tbw1ttTjonzbjg== +"@carbon/icons@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@carbon/icons/-/icons-11.0.0.tgz#58ca9255579fbe8d4377ead3bf9c7ca045ee58d6" + integrity sha512-3kmWrXEcGaj2kqcWVYHFPwMSs6L/07C3irQZPgSXI9wioZxft/saifO/s6Grs2JhmVfW/60GZsVohKIH68qyeQ== -"@carbon/layout@^10.37.0", "@carbon/layout@^10.37.1": - version "10.37.1" - resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-10.37.1.tgz#697ac4ba0500f55163cd84e0dc200d637fd41beb" - integrity sha512-iX8rWc2CkFB7W7wi5NLa3pVRVb/jRI2KrVDna3FO3X3DgNz3zoRCgN+r2c+8FEhpJWeUwds5aDzTWUuTtlOT3w== +"@carbon/layout@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@carbon/layout/-/layout-11.0.0.tgz#c77a171a5a8194088212295c2483a7003040d35d" + integrity sha512-F7Svd22CsvctkhgGksJf8sABdQWXmyOOH5EigrA6iq2fYRZFUryuiW95sQTOL7fhmc/VAA/vHneRtzJPHhPdow== -"@carbon/motion@^10.29.0": - version "10.29.0" - resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-10.29.0.tgz#1e78c70d396ad3b9363f7a0c7e36ce9bac3d5702" - integrity sha512-b8Cc9vgMlkQfLQAwq9Zt1/UfsrtGcWQpf0kK5gCamAuSmNSFWYJSwqbY9MeodxM2xNfXrxFcEFwqwy/E7egxUw== +"@carbon/motion@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@carbon/motion/-/motion-11.0.0.tgz#2a6e4175ac0a29e9b9a9a83750deae46a0eeedb3" + integrity sha512-3KYZJEALeYq99EF/LyIbfa8NvkWeZAeAjlqlYGmCCs8rDihaX97NQ4QgfMT9kwzjD/3sEjV5CTmvI2CJJw0RfA== -"@carbon/pictograms-react@^11.25.0": - version "11.25.0" - resolved "https://registry.yarnpkg.com/@carbon/pictograms-react/-/pictograms-react-11.25.0.tgz#816b43452f259bfa706f22bbeb15941447688ddc" - integrity sha512-ueKBVgjRoiM0x1wWeoBuFd6l201uiXQOgAUfPytjXq1I9NIhgsjjKsjavbT1LZFs0wUtn8Xp7eJEh4/VprJBgQ== +"@carbon/pictograms-react@^11.26.0": + version "11.26.0" + resolved "https://registry.yarnpkg.com/@carbon/pictograms-react/-/pictograms-react-11.26.0.tgz#ada43c23fbbf08281d7bf617541bf49804551226" + integrity sha512-mUIiYfwq4Q8NnAF8GOQiyAPx1+kHiCI5WO/Z9M4MPAWYQpTymeST123BvwT4yjwEETBb8+G2opAX3evRFmgpxw== dependencies: - "@carbon/icon-helpers" "^10.28.0" + "@carbon/icon-helpers" "^10.29.0" "@carbon/telemetry" "0.1.0" prop-types "^15.7.2" -"@carbon/pictograms@^11.24.0": - version "11.24.0" - resolved "https://registry.yarnpkg.com/@carbon/pictograms/-/pictograms-11.24.0.tgz#55d490b82ae39b5eac20a1687858e8465f8b9a66" - integrity sha512-dzlp7DIOYcuViFpQXHQKCH7cdfPmY3txc+SyzBXYyhWtwSjnjUOA/pv/wkvubR2gUQdxk9nCZK9CDl1HzahpiQ== +"@carbon/pictograms@^12.0.0": + version "12.0.0" + resolved "https://registry.yarnpkg.com/@carbon/pictograms/-/pictograms-12.0.0.tgz#1a8878228b8b0dfacfd734fa1c326fcbcefec71e" + integrity sha512-tT3tq0ALMr4AXm1gVoqRxqGtj6xOylSjcG7t4iw3XZBEKbXtvv5LQUQOSnwvbpj72g8XNba9lBldWdxVULd/eQ== -"@carbon/react@^0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@carbon/react/-/react-0.17.0.tgz#20e94f358488af2b972b1ed41df216adeb39a6e4" - integrity sha512-mJDis2sc0FuVyVasxpbVPgpbcWkxAriyi8YtGh2c+wTfjJ9us/h+titl83pPAcQ6F0KFe3q4IqVho5vuFoWUwA== +"@carbon/react@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@carbon/react/-/react-1.0.0.tgz#82fb9f0f4622591bff113267e11c23fb17eb556c" + integrity sha512-qlD6gpFHN2vSUxHUwDvn3n85PWK4M0rZeiTVGTLHWOG0k/V+dPs2kfl9BsXqtrv/U2RNQM4IqsP4Uw++v6WjTg== dependencies: + "@babel/runtime" "^7.16.7" "@carbon/feature-flags" "^0.7.0" - "@carbon/icons-react" "^10.49.0" - "@carbon/styles" "^0.17.0" + "@carbon/icons-react" "^11.0.0" + "@carbon/layout" "^11.0.0" + "@carbon/styles" "^1.0.0" "@carbon/telemetry" "0.1.0" - carbon-components "^10.56.0" - carbon-components-react "^7.56.0" - carbon-icons "^7.0.7" + classnames "2.3.1" + copy-to-clipboard "^3.3.1" + downshift "5.2.1" + flatpickr "4.6.9" + invariant "^2.2.3" + lodash.debounce "^4.0.8" + lodash.findlast "^4.5.0" + lodash.isequal "^4.5.0" + lodash.omit "^4.5.0" + lodash.throttle "^4.1.1" + prop-types "^15.7.2" + react-is "^17.0.2" + use-resize-observer "^6.0.0" + wicg-inert "^3.1.1" + window-or-global "^1.0.1" -"@carbon/styles@^0.17.0": - version "0.17.0" - resolved "https://registry.yarnpkg.com/@carbon/styles/-/styles-0.17.0.tgz#8e3f0ff9cefee71ba27b772bf96fee7492057c4d" - integrity sha512-L74nLSZyvmqVS+tWPbHKAbCstPJY2iJMTxw17ab1Ux0BPFp9M7ddkB486APRX9b1iQ15O4q8ibbjNaAEvv5/yg== +"@carbon/styles@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@carbon/styles/-/styles-1.0.0.tgz#16a7819e20702bd009528ab40b4b8c0c333f87fd" + integrity sha512-DA/LPGVPFfqwyKUYONgFpOUMyK+WGE6lOpvF3M2CPMllRDL+nHe9treA7zKDhAKT4X96x0r8OkadOFGcgV1isQ== dependencies: - "@carbon/colors" "^10.37.0" + "@carbon/colors" "^11.0.0" "@carbon/feature-flags" "^0.7.0" - "@carbon/grid" "^10.43.0" - "@carbon/layout" "^10.37.0" - "@carbon/motion" "^10.29.0" - "@carbon/themes" "^10.54.0" - "@carbon/type" "^10.44.0" + "@carbon/grid" "^11.0.0" + "@carbon/layout" "^11.0.0" + "@carbon/motion" "^11.0.0" + "@carbon/themes" "^11.0.0" + "@carbon/type" "^11.0.0" "@ibm/plex" "6.0.0-next.6" "@carbon/telemetry@0.0.0-alpha.6": @@ -1282,23 +1289,22 @@ resolved "https://registry.yarnpkg.com/@carbon/telemetry/-/telemetry-0.1.0.tgz#57b331cd5a855b4abbf55457456da8211624d879" integrity sha512-kNWt0bkgPwGW0i5h7HFuljbKRXPvIhsKbB+1tEURAYLXoJg9iJLF1eGvWN5iVoFCS2zje4GR3OGOsvvKVe7Hlg== -"@carbon/themes@^10.54.0": - version "10.54.0" - resolved "https://registry.yarnpkg.com/@carbon/themes/-/themes-10.54.0.tgz#2d310382298bf711eef18757acbab19f16b1b345" - integrity sha512-Q//XENDqFcgJbide0QbaAvAOKg/u3HIR3na0DsmoWtX4ZWrSz8zpUdvN8Yy9ybJBg1dT+IOfNCdjjhjbCVikKA== +"@carbon/themes@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@carbon/themes/-/themes-11.0.0.tgz#0f7a44df698a72fd774801a2b228c0d5ed578fef" + integrity sha512-iq1GE3AgfFXwUwtsV9dpNzNgTNr6Wd8RcXr36VcILPw251CUrn9RB53GWYTK8uMWTHXmnhg3BJnBac2GOq5X2Q== dependencies: - "@carbon/colors" "^10.37.0" - "@carbon/layout" "^10.37.0" - "@carbon/type" "^10.44.0" + "@carbon/colors" "^11.0.0" + "@carbon/layout" "^11.0.0" + "@carbon/type" "^11.0.0" color "^3.1.2" -"@carbon/type@^10.44.0": - version "10.44.0" - resolved "https://registry.yarnpkg.com/@carbon/type/-/type-10.44.0.tgz#f70944fe25b225d2dc44cea31fa2e7a400d4772c" - integrity sha512-sLe4e9gu2QuM8k6PrXWc9xWpH6W9Q/FJ+/IHNFpx+8zBLkBsM6dbf4o76Zw9OcV2HuAA+8K3JOpZJ4r76fw8kg== +"@carbon/type@^11.0.0": + version "11.0.0" + resolved "https://registry.yarnpkg.com/@carbon/type/-/type-11.0.0.tgz#0b263189fb60acfae496769143c5c71fed5d7101" + integrity sha512-D3ww1hrvfzXy2bnEmZTJoFDVZpB+78T1D2sOqXDjFaB+7A2+E/PAmla37Qzcz8ZMxF8kAorpG8wOTYAp2dg2kw== dependencies: - "@carbon/grid" "^10.43.0" - "@carbon/import-once" "^10.7.0" + "@carbon/grid" "^11.0.0" "@carbon/utils-position@1.1.1": version "1.1.1" @@ -3467,6 +3473,11 @@ argparse@^1.0.7: dependencies: sprintf-js "~1.0.2" +argparse@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38" + integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q== + aria-query@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b" @@ -4745,32 +4756,6 @@ capture-stack-trace@^1.0.0: resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d" integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw== -carbon-components-react@^7.56.0: - version "7.56.0" - resolved "https://registry.yarnpkg.com/carbon-components-react/-/carbon-components-react-7.56.0.tgz#62e9de3e5ea505f7ba56f192a8ecd4e0d9963b98" - integrity sha512-yO4+KhfG0Ujs9Eka0IsdIbB6U8ohtMXI4AWTaaBYqMgT4UNdcOUHqo6THgZpCRJfjYMyNnIh6Fi6d8NgyV6s4g== - dependencies: - "@babel/runtime" "^7.16.7" - "@carbon/feature-flags" "^0.7.0" - "@carbon/icons-react" "^10.49.0" - "@carbon/layout" "^10.37.0" - "@carbon/telemetry" "0.1.0" - classnames "2.3.1" - copy-to-clipboard "^3.3.1" - downshift "5.2.1" - flatpickr "4.6.9" - invariant "^2.2.3" - lodash.debounce "^4.0.8" - lodash.findlast "^4.5.0" - lodash.isequal "^4.5.0" - lodash.omit "^4.5.0" - lodash.throttle "^4.1.1" - prop-types "^15.7.2" - react-is "^17.0.2" - use-resize-observer "^6.0.0" - wicg-inert "^3.1.1" - window-or-global "^1.0.1" - carbon-components@10.40.0: version "10.40.0" resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.40.0.tgz#59c339dd964624cd07802dc695ceed6f32a07ef7" @@ -4781,21 +4766,6 @@ carbon-components@10.40.0: lodash.debounce "^4.0.8" warning "^3.0.0" -carbon-components@^10.56.0: - version "10.56.0" - resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.56.0.tgz#bb5890f00f81cebcddfa2dbae4794477deb539f4" - integrity sha512-GPLqHiu2SWvMxcQOi/CcgA/XA3aX/5HiEPSQjLwzjKAJsnkpzq043Jf7QwgLOVbTBzGSjFbFkJnE2lc73I2WBw== - dependencies: - "@carbon/telemetry" "0.1.0" - flatpickr "4.6.1" - lodash.debounce "^4.0.8" - warning "^3.0.0" - -carbon-icons@^7.0.7: - version "7.0.7" - resolved "https://registry.yarnpkg.com/carbon-icons/-/carbon-icons-7.0.7.tgz#ebafe3e9fa25df973796a8eca06d8a7c501cc610" - integrity sha512-3vgkdXJRgCViCrH3fLUdyAXo0I8wmohO6QETv7vWFx6yc7s+SirWFBSFL38zUx4MHtR8iTxIlLEzkeU6FlFtXg== - ccount@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.1.0.tgz#246687debb6014735131be8abab2d93898f8d043" @@ -6779,6 +6749,11 @@ entities@^2.0.0: resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55" integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A== +entities@~2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5" + integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w== + envinfo@^7.8.1: version "7.8.1" resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475" @@ -8491,17 +8466,17 @@ gatsby-telemetry@^3.9.0: lodash "^4.17.21" node-fetch "^2.6.7" -gatsby-theme-carbon@^3.0.0-next.7: - version "3.0.0-next.7" - resolved "https://registry.yarnpkg.com/gatsby-theme-carbon/-/gatsby-theme-carbon-3.0.0-next.7.tgz#b1e02fd2486bade7db8bf3787d9a1c878d6c02b4" - integrity sha512-+QR/YUhPIbaLcXPTj+0ColS3JBxaOilMokI89LPnIklqgya1Mn2tRb0UccrMK/WPhUvgiTtPuoRpB0g6OGn35A== +gatsby-theme-carbon@^3.0.0-next.9: + version "3.0.0-next.9" + resolved "https://registry.yarnpkg.com/gatsby-theme-carbon/-/gatsby-theme-carbon-3.0.0-next.9.tgz#77d1e5bd817b7e9657e982ac2b0ac0189123d2b3" + integrity sha512-aS5IOppmdJiWQ83A9RGF95zh/BIJLrYl6UP9sYBDZZlzUeLw69/NxwZeg0sYb1ylYr6TfTi9klzS5XHBLSjS/A== dependencies: "@babel/core" "^7.14.6" - "@carbon/elements" "^10.55.0" - "@carbon/grid" "^10.43.1" - "@carbon/pictograms-react" "^11.25.0" - "@carbon/react" "^0.17.0" - "@carbon/themes" "^10.54.0" + "@carbon/elements" "^11.0.0" + "@carbon/grid" "^11.0.0" + "@carbon/pictograms-react" "^11.26.0" + "@carbon/react" "^1.0.0" + "@carbon/themes" "^11.0.0" "@mdx-js/mdx" "^1.5.5" "@mdx-js/react" "^1.5.5" "@reach/router" "^1.2.1" @@ -10628,10 +10603,10 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== -linkify-it@^2.0.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf" - integrity sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw== +linkify-it@^3.0.1: + version "3.0.3" + resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.3.tgz#a98baf44ce45a550efb4d49c769d07524cc2fa2e" + integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ== dependencies: uc.micro "^1.0.1" @@ -11139,14 +11114,14 @@ markdown-escapes@^1.0.0: resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535" integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg== -markdown-it@^9.0.1: - version "9.1.0" - resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-9.1.0.tgz#df9601c168568704d554b1fff9af0c5b561168d9" - integrity sha512-xHKG4C8iPriyfu/jc2hsCC045fKrMQ0VexX2F1FGYiRxDxqMB2aAhF8WauJ3fltn2kb90moGBkiiEdooGIg55w== +markdown-it@^12.3.2: + version "12.3.2" + resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90" + integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg== dependencies: - argparse "^1.0.7" - entities "~1.1.1" - linkify-it "^2.0.0" + argparse "^2.0.1" + entities "~2.1.0" + linkify-it "^3.0.1" mdurl "^1.0.1" uc.micro "^1.0.5"