Merge branch 'main' into type-error-boundary

.github/workflows/deploy-packages.yml

@@ -7,7 +7,7 @@ concurrency:
 on:
   workflow_dispatch:
   workflow_run:
-    workflows: [Release]
+    workflows: [Promote]
     types:
       - completed
 

docs/release.md

@@ -161,33 +161,9 @@ git push upstream v11.2.0
 
 - [ ] Verify that this triggers a run of the
       [Release Workflow](https://github.com/carbon-design-system/carbon/actions/workflows/release.yml)
-- [ ] Review and approve the Pull Request generated from this action in
-      [gatsby-theme-carbon](https://github.com/carbon-design-system/gatsby-theme-carbon/pulls)
-      to verify no breaking changes have occurred in this release. If the PR
-      from the previous release was not merged, the existing PR will be updated.
 
 **Friday**
 
-After the PR to the Carbon Gatsby theme is merged it will trigger an automated
-release of the theme. To then update the Carbon website to the latest version of
-Carbon and gatsby-theme-carbon you will need to:
-
-- [ ] Check that the
-      [chore(release): update carbon deps](https://github.com/carbon-design-system/gatsby-theme-carbon/pulls)
-      PR has been merged in the gatsby-theme-carbon repo.
-- [ ] Check that
-      [gatsby-theme-carbon](https://github.com/carbon-design-system/gatsby-theme-carbon)
-      has been released and is on the
-      [latest version](https://github.com/carbon-design-system/gatsby-theme-carbon/blob/main/packages/gatsby-theme-carbon/package.json)
-      of Carbon
-- [ ] Run the
-      [Update Carbon and gatsby-theme-carbon deps workflow](https://github.com/carbon-design-system/carbon-website/actions/workflows/update-carbon-gatsby-deps.yml)
-      to automatically open a PR in the Carbon website to update to latest
-      Carbon and gatsby-theme-carbon versions.
-- [ ] Review and approve the
-      [pull request](https://github.com/carbon-design-system/carbon-website/pulls)
-      generate by the workflow.
-
 The packages that have been published will be switched to latest on the first
 Friday of a sprint. To make the switch, you will need to:
 
@@ -210,6 +186,30 @@ Friday of a sprint. To make the switch, you will need to:
   - [ ] #carbon-design-system
   - [ ] #carbon-react
 
+### Update gatsby-theme-carbon and carbon-website
+
+After the promotion workflow is completed this will trigger the
+`deploy-packages` workflow to update both `design-language-website` and
+`gatsby-theme-carbon` to the latest version of the Carbon packages.
+
+- [ ] Review, approve and merge the Pull Request generated from this action in
+      [gatsby-theme-carbon](https://github.com/carbon-design-system/gatsby-theme-carbon/pulls)
+      to verify no breaking changes have occurred in this release. If the PR
+      from the previous release was not merged, the existing PR will be updated.
+      This should trigger an automatic release of `gatsby-theme-carbon`.
+- [ ] Check that
+      [gatsby-theme-carbon](https://github.com/carbon-design-system/gatsby-theme-carbon)
+      has been released and is on the
+      [latest version](https://github.com/carbon-design-system/gatsby-theme-carbon/blob/main/packages/gatsby-theme-carbon/package.json)
+      of Carbon
+- [ ] Run the
+      [Update Carbon and gatsby-theme-carbon deps workflow](https://github.com/carbon-design-system/carbon-website/actions/workflows/update-carbon-gatsby-deps.yml)
+      to automatically open a PR in the Carbon website to update to latest
+      Carbon and gatsby-theme-carbon versions.
+- [ ] Review and approve the
+      [pull request](https://github.com/carbon-design-system/carbon-website/pulls)
+      generate by the workflow.
+
 <details>
   <summary>Click to view slack announcement template</summary>
 
@@ -334,7 +334,7 @@ cases, follow these steps below to ensure a proper patch release:
 - [ ] for each package (replace <kbd>carbon-components-react</kbd> with the
       package name):
   ```bash
-  npm dist tag add [email protected] latest
+  npm dist-tag add [email protected] latest
   ```
 - [ ] Verify the packages have been promoted to latest on
       [NPM](https://www.npmjs.com)

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

@@ -5845,6 +5845,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "disableOverflow": Object {
+        "type": "bool",
+      },
       "itemsShown": Object {
         "type": "number",
       },

packages/react/src/components/Grid/Column.tsx

@@ -366,10 +366,12 @@ function getClassNameForBreakpoints(
       continue;
     }
 
-    // If our breakpoint is a string, the user has specified a percent
+    // If our breakpoint is a string, the user might have specified a percent
     // they'd like this column to span.
     if (typeof breakpoint === 'string') {
-      classNames.push(`${prefix}--${name}:col-span-${breakpoint.slice(0, -1)}`);
+      classNames.push(
+        `${prefix}--${name}:col-span-${breakpoint.replace('%', '')}`
+      );
       continue;
     }
 

packages/react/src/components/PaginationNav/PaginationNav.js

@@ -119,9 +119,32 @@ function PaginationOverflow({
   fromIndex,
   count,
   onSelect,
+  // eslint-disable-next-line react/prop-types
+  disableOverflow,
   translateWithId: t = translateWithId,
 }) {
   const prefix = usePrefix();
+
+  //If overflow is disabled, return a select tag with no select options
+  if (disableOverflow === true && count > 1) {
+    return (
+      <li className={`${prefix}--pagination-nav__list-item`}>
+        <div className={`${prefix}--pagination-nav__select`}>
+          {/* eslint-disable-next-line jsx-a11y/no-onchange */}
+          <select
+            className={`${prefix}--pagination-nav__page ${prefix}--pagination-nav__page--select`}
+            aria-label={`Select ${t('carbon.pagination-nav.item')} number`}
+            disabled></select>
+          <div className={`${prefix}--pagination-nav__select-icon-wrapper`}>
+            <OverflowMenuHorizontal
+              className={`${prefix}--pagination-nav__select-icon`}
+            />
+          </div>
+        </div>
+      </li>
+    );
+  }
+
   if (count > 1) {
     return (
       <li className={`${prefix}--pagination-nav__list-item`}>
@@ -175,6 +198,7 @@ const PaginationNav = React.forwardRef(function PaginationNav(
     className,
     onChange = () => {},
     totalItems,
+    disableOverflow,
     itemsShown = 10,
     page = 0,
     loop = false,
@@ -192,7 +216,7 @@ const PaginationNav = React.forwardRef(function PaginationNav(
   );
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix();
-
+  const [isOverflowDisabled, setIsOverFlowDisabled] = useState(disableOverflow);
   function jumpToItem(index) {
     if (index >= 0 && index < totalItems) {
       setCurrentPage(index);
@@ -260,6 +284,10 @@ const PaginationNav = React.forwardRef(function PaginationNav(
     }
   }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    setIsOverFlowDisabled(disableOverflow);
+  }, [disableOverflow]);
+
   const classNames = classnames(`${prefix}--pagination-nav`, className);
 
   const backwardButtonDisabled = !loop && currentPage === 0;
@@ -297,6 +325,7 @@ const PaginationNav = React.forwardRef(function PaginationNav(
           fromIndex={startOffset}
           count={cuts.front}
           onSelect={jumpToItem}
+          disableOverflow={isOverflowDisabled}
         />
 
         {
@@ -322,6 +351,7 @@ const PaginationNav = React.forwardRef(function PaginationNav(
           fromIndex={totalItems - cuts.back - 1}
           count={cuts.back}
           onSelect={jumpToItem}
+          disableOverflow={isOverflowDisabled}
         />
 
         {
@@ -432,6 +462,12 @@ PaginationNav.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.
+   * Set this to true if you are having performance problems with large data sets.
+   */
+  disableOverflow: PropTypes.bool, // eslint-disable-line react/prop-types
+
   /**
    * The number of items to be shown.
    */

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

@@ -32,6 +32,7 @@ Playground.args = {
   itemsShown: 10,
   page: 0,
   totalItems: 25,
+  disableOverflow: false,
 };
 
 Playground.argTypes = {
@@ -55,4 +56,9 @@ Playground.argTypes = {
       type: 'number',
     },
   },
+  disableOverflow: {
+    control: {
+      type: 'boolean',
+    },
+  },
 };

packages/styles/scss/components/accordion/_accordion.scss

@@ -200,6 +200,7 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
     .#{$prefix}--accordion__wrapper {
       // Properties for when the accordion opens
+      max-block-size: fit-content;
       opacity: 1;
       padding-block: $spacing-03;
       padding-block-end: $spacing-06;