Merge branch 'main' into 19228-controlled-tag

Author: tay1orjones

.all-contributorsrc

@@ -1857,6 +1857,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "Code-Suji",
+      "name": "SUJITH C S",
+      "avatar_url": "https://avatars.githubusercontent.com/u/43125517?v=4",
+      "profile": "https://www.linkedin.com/in/sujithcs",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "commitConvention": "none"

.github/workflows/codeql-analysis.yml

@@ -24,12 +24,12 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@28deaeda66b76a05916b6923827895f2b14ab387 # v3.28.16
+        uses: github/codeql-action/init@60168efe1c415ce0f5521ea06d5c2062adbeed1b # v3.28.17
         with:
           languages: javascript-typescript
           config: |
             paths-ignore:
               - 'packages/cli/src/component/templates/**'
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@28deaeda66b76a05916b6923827895f2b14ab387 # v3.28.16
+        uses: github/codeql-action/analyze@60168efe1c415ce0f5521ea06d5c2062adbeed1b # v3.28.17

README.md

@@ -337,6 +337,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/warrenmblood"><img src="https://avatars.githubusercontent.com/u/69060697?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Warren Blood</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=warrenmblood" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/vcherneny"><img src="https://avatars.githubusercontent.com/u/11604315?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Vlad Cherneny</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=vcherneny" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/murito"><img src="https://avatars.githubusercontent.com/u/2628140?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Francisco Alcalá</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=murito" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.linkedin.com/in/sujithcs"><img src="https://avatars.githubusercontent.com/u/43125517?v=4?s=100" width="100px;" alt=""/><br /><sub><b>SUJITH C S</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Code-Suji" title="Code">💻</a></td>
   </tr>
 </table>
 

docs/experimental-code.md

@@ -101,8 +101,8 @@ All breaking changes will be shipped as `enable-v12-*` flags within the current
 major release (v11). This enables projects to opt-in to breaking changes earlier
 and at their own pace avoiding one huge changeset when upgrading to the next
 major release. In theory, if all `enable-v12-*` flags are enabled within your
-project before the v12 release, no changes should need to be made when updating
-to v12.
+project before the v12 release, no changes should need to be made to the
+affected components when updating to v12.
 
 For a flag to be committed to a release and renamed to `enable-v#-*` it must:
 

docs/release-schedule.md

@@ -8,15 +8,32 @@ major versions of the Carbon Design System.
 | `main`  | unstable    | unstable        | unstable     | unstable          | unstable    |
 | v9      | End of life | 2018-06-04      | 2018-06-04   | 2019-03-29        | 2022-03-31  |
 | v10     | End of life | 2019-03-29      | 2019-03-29   | 2022-03-31        | 2024-09-30  |
-| v11     | Active      | 2021-08-06      | 2022-03-31   | 2026-03-31        | 2028-03-31  |
-| v12     | Unreleased  | 2025-08-01      | 2026-03-31   | 2028-03-31        | 2029-03-31  |
+| v11     | Active      | 2021-08-06      | 2022-03-31   | TBD               | TBD         |
+| v12     | Preview     | 2023-05-25      | TBD          | TBD               | TBD         |
 
 > Dates are subject to change
 
-![schedule](https://github.com/carbon-design-system/carbon/assets/3360588/b8014b83-a743-4ace-83a3-ff1c96eef194)
+![schedule](https://github.com/user-attachments/assets/bc5ccd5a-8781-4ba5-9024-2aaaf0a53121)
 
 ## Release phases
 
+### Preview
+
+The preview phase allows consumers to incrementally opt in to changes that will
+be present in the next major, but through the current active release. This phase
+begins when the first feature flag is "committed" to be on-by-default in a
+future major version.
+
+Once committed, flag names contain the version they've been committed to with
+the prefix `enable-v#-*`. At this point the API or functionality behind this
+flag is now fixed and won't change. We intend to ship this flag as "on by
+default" in the major version indicated in the name. e.g.
+`enable-v12-tile-default-icons`
+
+In theory, if all `enable-v12-*` flags are enabled within your project before
+the v12 release, no changes should need to be made to the affected components
+when updating to v12.
+
 ### Prerelease
 
 The prerelease phase is intended to be the opportunity for early adopters,

packages/react/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,15 +1,14 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import PropTypes from 'prop-types';
-import React, { PropsWithChildren } from 'react';
+import React, { forwardRef } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
-import { ForwardRefReturn } from '../../types/common';
 
 export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
   /**
@@ -34,36 +33,33 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
   size?: 'sm' | 'md';
 }
 
-const Breadcrumb: ForwardRefReturn<HTMLElement, BreadcrumbProps> =
-  React.forwardRef(function Breadcrumb(
-    {
-      'aria-label': ariaLabel,
-      children,
-      className: customClassNameNav,
-      noTrailingSlash,
-      size,
-      ...rest
-    }: PropsWithChildren<BreadcrumbProps>,
-    ref: React.Ref<HTMLElement>
-  ) {
-    const prefix = usePrefix();
-    const className = cx({
-      [`${prefix}--breadcrumb`]: true,
-      [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,
-      [`${prefix}--breadcrumb--sm`]: size === 'sm',
-    });
-
-    return (
-      <nav
-        className={customClassNameNav}
-        aria-label={ariaLabel ? ariaLabel : 'Breadcrumb'}
-        ref={ref}
-        {...rest}>
-        <ol className={className}>{children}</ol>
-      </nav>
-    );
+const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>((props, ref) => {
+  const {
+    'aria-label': ariaLabel,
+    children,
+    className: customClassNameNav,
+    noTrailingSlash,
+    size,
+    ...rest
+  } = props;
+  const prefix = usePrefix();
+  const className = cx({
+    [`${prefix}--breadcrumb`]: true,
+    [`${prefix}--breadcrumb--no-trailing-slash`]: noTrailingSlash,
+    [`${prefix}--breadcrumb--sm`]: size === 'sm',
   });
 
+  return (
+    <nav
+      className={customClassNameNav}
+      aria-label={ariaLabel ? ariaLabel : 'Breadcrumb'}
+      ref={ref}
+      {...rest}>
+      <ol className={className}>{children}</ol>
+    </nav>
+  );
+});
+
 Breadcrumb.displayName = 'Breadcrumb';
 Breadcrumb.propTypes = {
   /**

packages/react/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,17 +1,16 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import PropTypes from 'prop-types';
-import React, { AriaAttributes, PropsWithChildren } from 'react';
+import React, { forwardRef, type AriaAttributes } from 'react';
 import cx from 'classnames';
 import Link from '../Link';
 import { OverflowMenuHorizontal } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix';
-import { ForwardRefReturn } from '../../types/common';
 import { Text } from '../Text';
 
 export interface BreadcrumbItemProps
@@ -34,75 +33,74 @@ export interface BreadcrumbItemProps
   isCurrentPage?: boolean;
 }
 
-const BreadcrumbItem: ForwardRefReturn<HTMLLIElement, BreadcrumbItemProps> =
-  React.forwardRef(function BreadcrumbItem(
-    {
-      'aria-current': ariaCurrent,
-      children,
-      className: customClassName = '',
-      href,
-      isCurrentPage,
-      ...rest
-    }: PropsWithChildren<BreadcrumbItemProps>,
-    ref: React.Ref<HTMLLIElement>
-  ) {
-    const prefix = usePrefix();
-    const className = cx({
-      [`${prefix}--breadcrumb-item`]: true,
-      // We set the current class only if `isCurrentPage` is passed in and we do
-      // not have an `aria-current="page"` set for the breadcrumb item
-      [`${prefix}--breadcrumb-item--current`]:
-        isCurrentPage && ariaCurrent !== 'page',
-      [customClassName]: !!customClassName,
-    });
-
-    const child = children as React.FunctionComponentElement<any>;
-    if (
-      child.type &&
-      child.type.displayName !== undefined &&
-      child.type.displayName.includes('OverflowMenu')
-    ) {
-      const horizontalOverflowIcon = (
-        <OverflowMenuHorizontal className={`${prefix}--overflow-menu__icon`} />
-      );
-      return (
-        <li className={className} {...rest}>
-          {React.cloneElement(child, {
-            menuOptionsClass: `${prefix}--breadcrumb-menu-options`,
-            menuOffset: { top: 10, left: 59 },
-            renderIcon: () => horizontalOverflowIcon,
-          })}
-        </li>
-      );
-    }
-
-    if (typeof children === 'string') {
-      return (
-        <li className={className} ref={ref} {...rest}>
-          {href ? (
-            <Link href={href} aria-current={ariaCurrent || isCurrentPage}>
-              {children}
-            </Link>
-          ) : (
-            <Text
-              aria-current={ariaCurrent || isCurrentPage}
-              className={`${prefix}--link`}>
-              {children}
-            </Text>
-          )}
-        </li>
-      );
-    }
+const frFn = forwardRef<HTMLLIElement, BreadcrumbItemProps>;
+
+const BreadcrumbItem = frFn((props, ref) => {
+  const {
+    'aria-current': ariaCurrent,
+    children,
+    className: customClassName = '',
+    href,
+    isCurrentPage,
+    ...rest
+  } = props;
+  const prefix = usePrefix();
+  const className = cx({
+    [`${prefix}--breadcrumb-item`]: true,
+    // We set the current class only if `isCurrentPage` is passed in and we do
+    // not have an `aria-current="page"` set for the breadcrumb item
+    [`${prefix}--breadcrumb-item--current`]:
+      isCurrentPage && ariaCurrent !== 'page',
+    [customClassName]: !!customClassName,
+  });
 
+  const child = children as React.FunctionComponentElement<any>;
+  if (
+    child.type &&
+    child.type.displayName !== undefined &&
+    child.type.displayName.includes('OverflowMenu')
+  ) {
+    const horizontalOverflowIcon = (
+      <OverflowMenuHorizontal className={`${prefix}--overflow-menu__icon`} />
+    );
     return (
-      <li className={className} ref={ref} {...rest}>
+      <li className={className} {...rest}>
         {React.cloneElement(child, {
-          'aria-current': ariaCurrent,
-          className: cx(`${prefix}--link`, child.props.className),
+          menuOptionsClass: `${prefix}--breadcrumb-menu-options`,
+          menuOffset: { top: 10, left: 59 },
+          renderIcon: () => horizontalOverflowIcon,
         })}
       </li>
     );
-  });
+  }
+
+  if (typeof children === 'string') {
+    return (
+      <li className={className} ref={ref} {...rest}>
+        {href ? (
+          <Link href={href} aria-current={ariaCurrent || isCurrentPage}>
+            {children}
+          </Link>
+        ) : (
+          <Text
+            aria-current={ariaCurrent || isCurrentPage}
+            className={`${prefix}--link`}>
+            {children}
+          </Text>
+        )}
+      </li>
+    );
+  }
+
+  return (
+    <li className={className} ref={ref} {...rest}>
+      {React.cloneElement(child, {
+        'aria-current': ariaCurrent,
+        className: cx(`${prefix}--link`, child.props.className),
+      })}
+    </li>
+  );
+});
 
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 

packages/react/src/components/ButtonSet/ButtonSet.tsx

@@ -1,15 +1,14 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
-import { ForwardRefReturn } from '../../types/common';
 
 export interface ButtonSetProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -19,21 +18,18 @@ export interface ButtonSetProps extends React.HTMLAttributes<HTMLDivElement> {
   stacked?: boolean;
 }
 
-const ButtonSet: ForwardRefReturn<HTMLDivElement, ButtonSetProps> =
-  React.forwardRef(function ButtonSet(
-    { children, className, stacked, ...rest }: ButtonSetProps,
-    ref: React.Ref<HTMLDivElement>
-  ) {
-    const prefix = usePrefix();
-    const buttonSetClasses = classNames(className, `${prefix}--btn-set`, {
-      [`${prefix}--btn-set--stacked`]: stacked,
-    });
-    return (
-      <div {...rest} className={buttonSetClasses} ref={ref}>
-        {children}
-      </div>
-    );
+const ButtonSet = forwardRef<HTMLDivElement, ButtonSetProps>((props, ref) => {
+  const { children, className, stacked, ...rest } = props;
+  const prefix = usePrefix();
+  const buttonSetClasses = classNames(className, `${prefix}--btn-set`, {
+    [`${prefix}--btn-set--stacked`]: stacked,
   });
+  return (
+    <div {...rest} className={buttonSetClasses} ref={ref}>
+      {children}
+    </div>
+  );
+});
 
 ButtonSet.displayName = 'ButtonSet';
 ButtonSet.propTypes = {

packages/react/src/components/CodeSnippet/CodeSnippet.tsx

@@ -19,7 +19,7 @@ import { ChevronDown } from '@carbon/icons-react';
 import Copy from '../Copy';
 import Button from '../Button';
 import CopyButton from '../CopyButton';
-import getUniqueId from '../../tools/uniqueId';
+import { uniqueId } from '../../tools/uniqueId';
 import copy from 'copy-to-clipboard';
 import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
@@ -202,7 +202,7 @@ function CodeSnippet({
 }: PropsWithChildren<CodeSnippetProps>) {
   const [expandedCode, setExpandedCode] = useState(false);
   const [shouldShowMoreLessBtn, setShouldShowMoreLessBtn] = useState(false);
-  const { current: uid } = useRef(getUniqueId());
+  const { current: uid } = useRef(uniqueId());
   const codeContentRef = useRef<HTMLPreElement>(null);
   const codeContainerRef = useRef<HTMLDivElement>(null);
   const innerCodeRef = useRef<HTMLElement>(null);