Merge branch 'main' into button_pr

.github/workflows/issue-triage.yml

@@ -5,9 +5,7 @@ on:
   issue_comment:
     types: [created]
 env:
-  ISSUE_NUMBER: ${{ github.event.issue.number }}
   OWNER: ${{ github.repository_owner }}
-  REPOSITORY: ${{ github.repository }}
 
   PROJECT_NUMBER: 39
   PROJECT_ID: PVT_kwDOAYA3Ss1Nvw
@@ -28,19 +26,17 @@ jobs:
       - name: Get issue ID
         id: get_issue_id
         run: |
-            ISSUE_ID=$(gh project item-list $PROJECT_NUMBER --owner=$OWNER --limit=$ITEM_FETCH_LIMIT --format=json --jq ".items[] | select(.content.number == $ISSUE_NUMBER and .content.repository == $REPOSITORY) | .id")
-            if [ -z "$ISSUE_ID" ]; then
-              echo "Issue ID not found for issue number $ISSUE_NUMBER"
-              exit 1
-            fi
-            echo "Issue ID is $ISSUE_ID"
-            echo "issue_id=$ISSUE_ID" >> "$GITHUB_OUTPUT"
+          ISSUE_ID=$(gh project item-list $PROJECT_NUMBER --owner=$OWNER --limit=$ITEM_FETCH_LIMIT --format=json --jq '.items[] | select(.content.number == '"${{ github.event.issue.number }}"' and .content.repository == "carbon-design-system/carbon-website") | .id')
+          if [ -z "$ISSUE_ID" ]; then
+            echo "Issue ID not found for issue number ${{ github.event.issue.number }}"
+            exit 1
+          fi
+          echo "Issue ID is $ISSUE_ID"
+          echo "issue_id=$ISSUE_ID" >> "$GITHUB_OUTPUT"
         env:
           GH_TOKEN: ${{ secrets.ADD_TO_PROJECT_PAT }}
       - name: Update issue with website area field
-        run:
-          gh project item-edit --project-id $PROJECT_ID --id $ISSUE_ID
-          --field-id $AREA_FIELD_ID --single-select-option-id $AREA_WEBSITE
+        run: |
+          gh project item-edit --project-id $PROJECT_ID --id ${{ steps.get_issue_id.outputs.issue_id }} --field-id $AREA_FIELD_ID --single-select-option-id $AREA_WEBSITE
         env:
           GH_TOKEN: ${{ secrets.ADD_TO_PROJECT_PAT }}
-          $ISSUE_ID: ${{ steps.get_issue_id.outputs.issue_id }}

package.json

@@ -47,7 +47,7 @@
     "d3": "^7.9.0",
     "gatsby": "^5.13.5",
     "gatsby-plugin-sharp": "^5.13.1",
-    "gatsby-theme-carbon": "^4.1.14",
+    "gatsby-theme-carbon": "^4.1.21",
     "markdown-it": "^14.1.0",
     "prettier-config-carbon": "^0.11.0",
     "react": "^18.2.0",

src/components/A11yStatus/A11yStatus.js

@@ -183,19 +183,19 @@ const A11yStatus = ({ components, layout }) => {
       // link for component name in table
       let componentUrl;
       if (componentName === 'Aspect ratio') {
-        componentUrl = '/guidelines/2x-grid/overview/#aspect-ratio';
+        componentUrl = '/elements/2x-grid/overview/#aspect-ratio';
       } else if (componentName === 'Grid') {
-        componentUrl = '/guidelines/2x-grid/code#css-grid';
+        componentUrl = '/elements/2x-grid/code#css-grid';
       } else if (componentName === 'Flex grid') {
-        componentUrl = '/guidelines/2x-grid/code#flexbox-grid';
+        componentUrl = '/elements/2x-grid/code#flexbox-grid';
       } else if (componentName === 'UI Shell') {
         componentUrl = '/components/UI-shell-header/usage';
       } else if (componentName === 'Theme') {
-        componentUrl = '/guidelines/themes/overview/';
+        componentUrl = '/elements/themes/overview/';
       } else if (componentName === 'Skeleton') {
         componentUrl = '/patterns/loading-pattern/#skeleton-states';
       } else if (componentName === 'Layer') {
-        componentUrl = '/guidelines/color/usage#implementing-layering';
+        componentUrl = '/elements/color/usage#implementing-layering';
       }
 
       // if a parent component is set link to the parent component

src/pages/all-about-carbon/who-uses-carbon.mdx

@@ -51,7 +51,7 @@ Here are some ways designers can begin engaging with Carbon.
 #### Learn the system
 
 - Familiarize yourself with the Carbon
-  [foundational elements](/guidelines/2x-grid/overview), their usage
+  [foundational elements](/elements/2x-grid/overview), their usage
   documentation, and the system's
   [design principles](https://www.ibm.com/design/language/).
 
@@ -128,7 +128,7 @@ Here are some ways developers can begin engaging with Carbon.
 #### Learn the system
 
 - Familiarize yourself with the
-  [Carbon foundational elements](/guidelines/2x-grid/overview/), the usage
+  [Carbon foundational elements](/elements/2x-grid/overview/), the usage
   documentation, and the system's
   [design principles](https://www.ibm.com/design/language/).
 

src/pages/components/button/usage.mdx

@@ -407,7 +407,7 @@ or ghost buttons in layouts with more than three calls to action.
 Ideally, when using groups of related buttons (not including ghost buttons),
 they should all be the same width. This can be achieved in one of two ways, both
 of which are acceptable. The first approach involves using the
-[narrow gutter mode](/guidelines/2x-grid/implementation#gutter-modes). In this
+[narrow gutter mode](/elements/2x-grid/implementation#gutter-modes). In this
 situation each button would be set individually on the column grid. _Note:
 Carbon developers are working on the narrow gutter mode, currently left-hanging
 buttons can only be achieved with an override._

src/pages/components/dropdown/usage.mdx

@@ -826,11 +826,11 @@ boxes are useful when the data populating the list may come from a database.
 </Column>
 </Row>
 
-- The menu opens by clicking anywhere in the field and you can start typing to
-  sort through the list of options. The option that best matches the typed
-  characters is highlighted.
-- After typing text in the field, the close (x) icon appears to the right of the
-  text in the field. This clears any text that’s been entered in the field.
+- The menu opens by clicking anywhere in the field, allowing users to type and
+  sort through the list of options. The best-matching option is highlighted as
+  users type.
+- A close (x) icon clears the input, and autocomplete refines options as users
+  type.
 
 <Row>
 <Column colLg={8}>

src/pages/components/number-input/style.mdx

@@ -126,8 +126,8 @@ phrase and any proper nouns capitalized.
 
 ### Default input
 
-The add and subtract icons can be found in the
-[icons](/guidelines/icons/library) library.
+The add and subtract icons can be found in the [icons](/elements/icons/library)
+library.
 
 | Element         | Property                    | px / rem | Spacing token |
 | --------------- | --------------------------- | -------- | ------------- |

src/pages/components/overflow-menu/style.mdx

@@ -62,7 +62,7 @@ of the first word capitalized.
 
 The height of an overflow menu is determined by the amount of content in the
 menu. The overflow menu icon can be found in the
-[icons](/guidelines/icons/library) library.
+[icons](/elements/icons/library) library.
 
 | Element     | Property                    | px / rem  | Spacing token |
 | ----------- | --------------------------- | --------- | ------------- |

src/pages/components/progress-indicator/style.mdx

@@ -88,7 +88,7 @@ label. All labels should be set in sentence case.
 
 ## Structure
 
-All icons can be found in the [icons](/guidelines/icons/library) library.
+All icons can be found in the [icons](/elements/icons/library) library.
 
 | Element | Property                 | px / rem | Spacing token |
 | ------- | ------------------------ | -------- | ------------- |

src/pages/components/tabs/usage.mdx

@@ -291,7 +291,7 @@ edge. The tabs in between will flow accordingly and may or may not align to the
 grid but will always be the same size.
 
 Use the
-[2x grid](https://www.carbondesignsystem.com/guidelines/2x-grid/overview#2x-grid-fundamentals)
+[2x grid](https://www.carbondesignsystem.com/elements/2x-grid/overview#2x-grid-fundamentals)
 to drive visual rhythm by spacing content in multiples of two columns and
 aligning the beginning and ending of the tab elements with content below the
 tabs when possible.

src/pages/components/tag/usage.mdx

@@ -17,17 +17,6 @@ them.
 
 <InlineNotification>
 
-**Tag now offers multiple new features.**
-
-<br />{' '}
-
-[Experimental tags](https://react.carbondesignsystem.com/?path=/docs/experimental-unstable-interactivetag--overview)
-for dismissible, selectable, and operational functionality are now available as
-additional tag variants. Dismissible tag is the recommended alternative solution
-to the filter prop and will eventually replace the prop in v12.
-
-<br />
-
 [Tag with AI label](https://react.carbondesignsystem.com/?path=/story/components-tag--with-ai-label)
 is now stable. This addition changes the visual appearance of the component and
 introduces an AI explainability feature when AI is present in the component.

src/pages/components/tile/usage.mdx

@@ -803,15 +803,15 @@ For more information on designing for AI, see the
 #### Grid
 
 To learn more about how to build tiles correctly on the grid, see Carbon’s
-[2x grid](/guidelines/2x-grid/implementation).
+[2x grid](/elements/2x-grid/implementation).
 
 #### Aspect ratio
 
 The aspect ratio is important when building tiles and images. For further
 guidance, see Carbon’s
-[aspect ratio](https://www.carbondesignsystem.com/guidelines/2x-grid/overview/#aspect-ratio)
+[aspect ratio](https://www.carbondesignsystem.com/elements/2x-grid/overview/#aspect-ratio)
 and its
-[implementation](https://www.carbondesignsystem.com/guidelines/2x-grid/implementation#screen-regions).
+[implementation](https://www.carbondesignsystem.com/elements/2x-grid/implementation#screen-regions).
 
 #### Buttons
 
@@ -827,7 +827,7 @@ Link has variants depending on the context. For further guidance, see Carbon’s
 #### Spacing
 
 Spacing helps deliver clear and functional layouts. For further guidance, see
-Carbon’s [spacing](https://carbondesignsystem.com/guidelines/spacing/overview/).
+Carbon’s [spacing](https://carbondesignsystem.com/elements/spacing/overview/).
 
 ## References
 

src/pages/components/tooltip/code.mdx

@@ -19,7 +19,7 @@ documentation, see the Storybooks for each framework below.
 <Column colLg={4} colMd={4} noGutterSm>
   <ResourceCard
     subTitle="React"
-    href="https://react.carbondesignsystem.com/?path=/story/components-tooltip--default-bottom"
+    href="https://react.carbondesignsystem.com/?path=/story/components-tooltip--default"
     >
 
 <MdxIcon name="react" />

src/pages/data-visualization/color-palettes/index.mdx

@@ -98,7 +98,7 @@ be used to represent any meaningful progression or divergence. Never use a
 gradient in place of a sequential palette.
 
 For the full list of approved gradient options, see the IBM Design Language
-[Color page](https://www.ibm.com/design/language/elements/color#gradients).
+[Color page](https://www.ibm.com/design/language/color#gradients).
 
 <Row>
 <Column colLg={8} colMd={6} colSm={4}>

src/pages/designing/kits/sketch.mdx

@@ -40,7 +40,7 @@ To design with Carbon you must have the **most recent version** of
 
 #### 2. **Choose a theme**.
 
-There are [four Carbon themes](/guidelines/color/overview#themes), two light
+There are [four Carbon themes](/elements/color/overview#themes), two light
 (White and Gray 10) and two dark (Gray 90 and Gray 100). Each theme lives in its
 own Sketch library. You can subscribe to as many libraries as you'd like.
 
@@ -170,7 +170,7 @@ Sketch to begin designing.
 
 ### Grid
 
-The [IBM 2x Grid](/guidelines/2x-grid/overview/) is fundamental to everything we
+The [IBM 2x Grid](/elements/2x-grid/overview/) is fundamental to everything we
 design. It is the geometric foundation of all the visual elements in the IBM
 Design Language, from typography to columns, boxes, icons, and illustrations.
 The grid provides structure and guidance for all creative decision-making.
@@ -215,7 +215,7 @@ keyboard shortcut `Control+G`.
 
 The layout settings change depending on which size screen you are designing for.
 See
-[breakpoints](https://www.carbondesignsystem.com/guidelines/2x-grid/overview/#breakpoints).
+[breakpoints](https://www.carbondesignsystem.com/elements/2x-grid/overview/#breakpoints).
 
 ### Basic grid
 
@@ -227,7 +227,7 @@ template on the page labeled "Basic grid".
 
 An influencer is a component that affects the content on the page. It can either
 appears on a page as the result of a user action or be part of your product's
-page. These [influencers](/guidelines/2x-grid/overview/#grid-influencers) effect
+page. These [influencers](/elements/2x-grid/overview/#grid-influencers) effect
 the layout grid by scaling and resizing the columns and its content. You can
 find an assortment of examples of grids with an influences in the grid template
 file on the page labeled "Grid influencers".
@@ -247,7 +247,7 @@ specifications for panel combinations and how they impact the grid at all sizes.
 - Total panel width + Left margin = **Offset**
 
 \*Since we are following the Carbon Design responsive guidelines, we referenced
-[this table](https://www.carbondesignsystem.com/guidelines/2x-grid/implementation#responsive-options)
+[this table](https://www.carbondesignsystem.com/elements/2x-grid/implementation#responsive-options)
 to determine our common breakpoint widths and respective gutter specs.
 
 #### Example
@@ -270,7 +270,7 @@ Which also avoids columns that are smaller than 32.
 ### Symbols
 
 Carbon [components](/components/overview), [add-ons](/contributing/add-ons), and
-[icons](/guidelines/icons/library) live in the design kit as Sketch symbols.
+[icons](/elements/icons/library) live in the design kit as Sketch symbols.
 
 ![Carbon symbol menu navigation](/images/carbon-kit.png)
 
@@ -318,12 +318,12 @@ detaching the symbol to change default styles.
 
 Carbon text styles in Sketch are organized similarly to symbols.
 
-- The first text style level displays
-  [theme options](/guidelines/themes/overview) (i.e., white theme).
-- The second level shows the [Carbon type](/guidelines/typography/overview)
-  tokens (i.e., body-long-01).
+- The first text style level displays [theme options](/elements/themes/overview)
+  (i.e., white theme).
+- The second level shows the [Carbon type](/elements/typography/overview) tokens
+  (i.e., body-long-01).
 - The third level selects the type color, which is labeled with a
-  [Carbon color](/guidelines/color/overview) token name.
+  [Carbon color](/elements/color/overview) token name.
 
 ### Layer styles
 
@@ -335,7 +335,7 @@ Layer styles are color selections for any shape in Sketch.
 
 #### Library menu navigation
 
-[Color](/guidelines/color/overview) in Carbon is carefully considered, and we
+[Color](/elements/color/overview) in Carbon is carefully considered, and we
 discourage custom layer styles.
 
 The first layer is the theme selection (i.e., 01 White theme). The second layer

src/pages/developing/angular-tutorial/step-2.mdx

@@ -451,7 +451,7 @@ for now.
 
 We've added basic layout styles in `landing-page.component.scss` and
 `styles.scss`, so now let's add type, color and spacing styles to match the
-design. We'll be using our [spacing tokens](/guidelines/spacing/overview). In
+design. We'll be using our [spacing tokens](/elements/spacing/overview). In
 `landing-page.component.scss`, add these imports at the **top** of the file so
 we can use Carbon breakpoints, tokens, and typography Sass mixins and functions:
 
@@ -492,23 +492,22 @@ that, add:
 }
 ```
 
-Referencing the
-[spacing token table](/guidelines/spacing/overview#spacing-scale), `16px` can be
-set with the `$spacing-05` token. The design calls for `128px` of space below
-the heading and that's not in the spacing scale, we can achieve that in Sass by
-multiplying 32px (`$spacing-07`) by 4. We could use `128px` or `8rem` directly
-in our styling, but using our tokens preserves consistency should the token
-values get updated in the future.
+Referencing the [spacing token table](/elements/spacing/overview#spacing-scale),
+`16px` can be set with the `$spacing-05` token. The design calls for `128px` of
+space below the heading and that's not in the spacing scale, we can achieve that
+in Sass by multiplying 32px (`$spacing-07`) by 4. We could use `128px` or `8rem`
+directly in our styling, but using our tokens preserves consistency should the
+token values get updated in the future.
 
 Looking at the design, we need a wall-to-wall light gray background behind the
 banner and also behind the third row. This is a great opportunity to use a Sass
 mixin. We will put this at the top of `landing-page.component.scss`.
 
 Per the design we need to use Gray 10 for our banner background color, which can
 be set with the `$ui-01`
-[color token](https://www.carbondesignsystem.com/guidelines/color/usage). Also,
-we want the background to extend into the grid's outermost gutters to go the
-full width of the viewport, so given the DOM structure, we can achieve that by
+[color token](https://www.carbondesignsystem.com/elements/color/usage). Also, we
+want the background to extend into the grid's outermost gutters to go the full
+width of the viewport, so given the DOM structure, we can achieve that by
 setting the background in an absolutely positioned pseudo element.
 
 ```scss path=src/app/home/landing-page/landing-page.component.scss
@@ -554,7 +553,7 @@ Next, we can see that the `h1` is using the `heading-05` type token.
 
 The Sketch symbol naming is consistent with the development Sass tokens to help
 translate design to development. So, looking up the
-[type token](https://www.carbondesignsystem.com/guidelines/typography/productive),
+[type token](https://www.carbondesignsystem.com/elements/typography/productive),
 we know to use `productive-heading-05`:
 
 {/* prettier-ignore-start */}

src/pages/developing/frameworks/react.mdx

@@ -119,7 +119,7 @@ function MyComponent() {
 ```
 
 A full list of available icons is provided in the
-[icon library](/guidelines/icons/library/).
+[icon library](/elements/icons/library/).
 
 For a more in depth introduction to using `@carbon/react` in a webpack-based
 app, [check out our React tutorial](/developing/react-tutorial/overview/).

src/pages/developing/react-tutorial/step-2.mdx

@@ -439,7 +439,7 @@ for now.
 
 We've added basic layout styles in `_landing-page.scss`, so now let's add type,
 color, and spacing styles to match the design. We'll be using our
-[spacing tokens](https://www.carbondesignsystem.com/guidelines/spacing/overview).
+[spacing tokens](https://www.carbondesignsystem.com/elements/spacing/overview).
 In `_landing-page.scss`, add these imports at the **top** of the file (above our
 overrides import) so we can use Carbon breakpoints, tokens, and typography Sass
 mixins and functions:
@@ -481,7 +481,7 @@ below the heading. For that, add:
 ```
 
 Referencing the
-[spacing token table](https://www.carbondesignsystem.com/guidelines/spacing/overview#spacing-scale),
+[spacing token table](https://www.carbondesignsystem.com/elements/spacing/overview#spacing-scale),
 `16px` can be set with the `$spacing-05` token. The design calls for `128px` of
 space below the heading and that's not in the spacing scale. We can achieve this
 in Sass by multiplying 32px (`$spacing-07`) by 4. We could use `128px` or `8rem`
@@ -496,9 +496,9 @@ practice to place mixins in a dedicated file, so create a `_mixins.scss` file in
 
 Add the following in `_mixins.scss`. Per the design we need to use Gray 10 for
 our banner background color, which can be set with the `$layer-01`
-[color token](https://www.carbondesignsystem.com/guidelines/color/usage). Also,
-we want the background to extend into the grid's outermost gutters to go the
-full width of the viewport, so given the DOM structure, we can achieve that by
+[color token](https://www.carbondesignsystem.com/elements/color/usage). Also, we
+want the background to extend into the grid's outermost gutters to go the full
+width of the viewport, so given the DOM structure, we can achieve that by
 setting the background in an absolutely positioned pseudo element.
 
 ```scss path=src/app/home/_mixins.scss
@@ -549,7 +549,7 @@ Next, we can see that the `h1` is using the `heading-05` type token.
 
 The Sketch symbol naming is consistent with the development Sass tokens to help
 translate design to development. So, looking up the
-[type token](https://www.carbondesignsystem.com/guidelines/typography/productive),
+[type token](https://www.carbondesignsystem.com/elements/typography/productive),
 we know to use `productive-heading-05`:
 
 ```scss path=src/app/home/_landing-page.scss