Merge branch 'main' into 3805-add-labelledby

.github/workflows/issue-triage.yml

@@ -4,6 +4,15 @@ on:
     types: [opened]
   issue_comment:
     types: [created]
+  workflow_call:
+    secrets:
+      APP_ID:
+        required: true
+      APP_PRIVATE_KEY:
+        required: true
+      ADD_TO_PROJECT_PAT:
+        required: true
+
 jobs:
   comment:
     runs-on: ubuntu-latest
@@ -15,15 +24,15 @@ jobs:
         with:
           app_id: ${{ secrets.APP_ID }}
           private_key: ${{ secrets.APP_PRIVATE_KEY }}
-      - uses: ./actions/issues
+      - uses: carbon-design-system/carbon/actions/issues@main
         with:
           GITHUB_TOKEN: ${{ steps.generate_token.outputs.token }}
           enabled: true
   add-to-project:
     name: Add issue to Design System project
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/add-to-project@v0.0.5
+      - uses: actions/add-to-project@v0.1.0
         with:
           project-url: https://github.com/orgs/carbon-design-system/projects/39
           github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}

config/eslint-config-carbon/package.json

@@ -44,7 +44,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-storybook": "^0.5.7",
+    "eslint-plugin-storybook": "^0.6.0",
     "eslint-restricted-globals": "^0.2.0"
   },
   "devDependencies": {

docs/release.md

@@ -63,6 +63,7 @@ checkpoints:
 | [Prerelease](#prerelease)        | Publish a prerelease that will be used to test out the release candidate before becoming stabilized                      |
 | [Stable release](#stablerelease) | Graduate the prerelease into a stable release that is available through packages on NPM                                  |
 | [Post release](#postrelease)     | Support the latest stable release and address any issues that may come up as a result of promoting the release to stable |
+| [Previous release](#postrelease) | Determine if new changes to v10 are present and need published, and do so if needed.                                     |
 
 ### Prerelease
 

examples/codesandbox-styles/package.json

@@ -1,15 +1,15 @@
 {
   "name": "codesandbox-styles",
   "private": true,
-  "version": "0.9.0",
+  "version": "0.10.0",
   "scripts": {
     "develop": "vite"
   },
   "devDependencies": {
     "vite": "^2.8.0"
   },
   "dependencies": {
-    "@carbon/styles": "^1.6.0",
+    "@carbon/styles": "^1.7.0",
     "sass": "^1.51.0"
   }
 }

examples/codesandbox-with-sass-compilation/package.json

@@ -1,9 +1,9 @@
 {
   "name": "codesandbox-with-sass-compilation",
-  "version": "0.8.0-rc.0",
+  "version": "0.8.0",
   "private": true,
   "dependencies": {
-    "@carbon/react": "^1.7.0-rc.0",
+    "@carbon/react": "^1.7.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

examples/codesandbox/package.json

@@ -1,9 +1,9 @@
 {
   "name": "codesandbox",
-  "version": "0.8.0-rc.0",
+  "version": "0.8.0",
   "private": true,
   "dependencies": {
-    "@carbon/react": "^1.7.0-rc.0",
+    "@carbon/react": "^1.7.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

examples/light-dark-mode/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-light-dark",
   "private": true,
-  "version": "0.5.0-rc.0",
+  "version": "0.5.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.7.0-rc.0",
+    "@carbon/react": "^1.7.0",
     "next": "12.1.4",
     "react": "18.0.0",
     "react-dom": "18.0.0"

examples/nextjs/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-nextjs",
   "private": true,
-  "version": "0.7.0-rc.0",
+  "version": "0.7.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.7.0-rc.0",
+    "@carbon/react": "^1.7.0",
     "next": "12.1.4",
     "react": "18.0.0",
     "react-dom": "18.0.0"

examples/vite/package.json

@@ -1,14 +1,14 @@
 {
   "name": "vite",
   "private": true,
-  "version": "0.5.0-rc.0",
+  "version": "0.5.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.7.0-rc.0",
+    "@carbon/react": "^1.7.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

packages/carbon-components-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbon-components-react",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "8.7.0-rc.0",
+  "version": "8.7.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -39,8 +39,8 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/react": "^1.7.0-rc.0",
-    "@carbon/styles": "^1.6.0",
+    "@carbon/react": "^1.7.0",
+    "@carbon/styles": "^1.7.0",
     "@carbon/telemetry": "0.1.0"
   },
   "devDependencies": {

packages/carbon-components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbon-components",
   "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/styles": "^1.6.0",
+    "@carbon/styles": "^1.7.0",
     "@carbon/telemetry": "0.1.0"
   },
   "devDependencies": {

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.7.0-rc.0",
+  "version": "1.7.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,7 +46,7 @@
     "@carbon/feature-flags": "^0.8.0",
     "@carbon/icons-react": "^11.5.0",
     "@carbon/layout": "^11.3.0",
-    "@carbon/styles": "^1.6.0",
+    "@carbon/styles": "^1.7.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.1",
     "copy-to-clipboard": "^3.3.1",
@@ -111,7 +111,7 @@
     "rollup-plugin-strip-banner": "^2.0.0",
     "rtlcss": "^3.5.0",
     "sass": "^1.51.0",
-    "sass-loader": "^12.4.0",
+    "sass-loader": "^13.0.0",
     "storybook-readme": "^5.0.9",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",

packages/react/src/components/Breadcrumb/Breadcrumb.stories.js

@@ -47,7 +47,7 @@ export const BreadcrumbWithOverflowMenu = () => (
     </BreadcrumbItem>
     <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
     <BreadcrumbItem data-floating-menu-container>
-      <OverflowMenu>
+      <OverflowMenu ariaLabel="Overflow menu in a breadcrumb">
         <OverflowMenuItem itemText="Breadcrumb 3" />
         <OverflowMenuItem itemText="Breadcrumb 4" />
       </OverflowMenu>

packages/react/src/components/ContentSwitcher/ContentSwitcher.mdx

@@ -38,7 +38,7 @@ within the same space on screen. Only one content section is shown at a time.
 Create Switch components for each section in the content switcher.
 
 <Preview>
-  <Story id="components-contentswitcher--default" />
+  <Story id="components-contentswitcher--playground" />
 </Preview>
 
 ## Component API

packages/react/src/components/ContentSwitcher/next/ContentSwitcher.stories.js → packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js

@@ -6,10 +6,10 @@
  */
 
 import React from 'react';
-import ContentSwitcher from '../ContentSwitcher';
-import Switch from '../../Switch';
-import { Layer } from '../../Layer';
-import mdx from '../ContentSwitcher.mdx';
+import ContentSwitcher from './ContentSwitcher';
+import Switch from '../Switch';
+import { Layer } from '../Layer';
+import mdx from './ContentSwitcher.mdx';
 
 export default {
   title: 'Components/ContentSwitcher',
@@ -64,3 +64,30 @@ export const WithLayer = () => {
     </>
   );
 };
+
+export const Playground = (args) => (
+  <ContentSwitcher {...args}>
+    <Switch name="one" text="First section" />
+    <Switch name="two" text="Second section" />
+    <Switch name="three" text="Third section" />
+  </ContentSwitcher>
+);
+
+Playground.argTypes = {
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  onChange: {
+    action: 'onChange',
+  },
+  size: {
+    options: ['sm', 'md', 'lg'],
+  },
+};