Merge branch 'main' into release/update-carbon-deps

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

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

@@ -412,7 +412,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/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/pagination/accessibility.mdx

@@ -45,11 +45,11 @@ other accessibility considerations, some of which are described below.
 #### Pagination
 
 The tab order goes from left to right through the controls in the pagination
-variant. On focus, the dropdowns are opened with `Space` or with up or down
+variant. On focus, the selects are opened with `Space` or with `Up` or `Down`
 arrows, which also cycle through the values. Both `Space` and `Enter` select a
-value and close the dropdown. The dropdown can also be closed by pressing `Esc`.
-The previous and next page arrow buttons are activated by `Space` or `Enter`
-keys.
+value and close the select. The select can also be closed by pressing `Esc`. The
+previous and next page arrow buttons are activated by pressing `Space` or
+`Enter`.
 
 <Row>
 <Column colLg={12}>
@@ -84,10 +84,10 @@ operable, like any other disabled control.
 #### Pagination nav
 
 The tab order goes left to right through the button controls in the pagination
-nav variant. When page buttons have focus, both `Space` and `Enter` activates
-the page button and change the current page to the button that currently has
-selection. When the previous and next page arrow buttons have focus, both
-`Space` and `Enter` activates them.
+nav variant. When page buttons have focus, `Space` or `Enter` activates the page
+button and changes the current page to the button that currently has selection.
+When the previous and next page arrow buttons have focus, `Space` or `Enter`
+activates them.
 
 <Row>
 <Column colLg={12}>
@@ -103,18 +103,19 @@ selection. When the previous and next page arrow buttons have focus, both
 </Row>
 
 If an overflow ellipsis is present in the pagination nav, once focused, pressing
-Space activates the menu to choose an available page to navigate to. Enter or
-Tab selects a value from the menu and closes it. The menu can also be closed by
-pressing Esc.
+`Space`, `Up` arrow, or `Down` arrow activates the select menu to choose an
+available page to navigate to. `Up` or `Down` arrows navigate between page
+options in the menu. `Space` or `Enter` selects a page from the menu and closes
+it. The menu can also be closed by pressing `Esc`.
 
 <Row>
 <Column colLg={12}>
 
-![The menu opens by pressing Space and pressing Tab or Enter selects a page from the menu and closes it.](images/pagination-a11y-4.png)
+![The menu opens by pressing Space, Up arrow, or Down arrow, and closes by pressing Space or Enter to select an item.](images/pagination-a11y-4.png)
 
 <Caption>
-  The menu opens by pressing Space and pressing Tab or Enter selects a page from
-  the menu and closes it.
+  The menu opens by pressing Space, Up arrow, or Down arrow, and closes by
+  pressing Space or Enter to select an item.
 </Caption>
 
 </Column>
@@ -125,18 +126,18 @@ pressing Esc.
 #### Pagination
 
 Not all the elements in pagination have static or visually isolated labels.
-Carbon constructs a programmatic name for the second dropdown by concatenating
+Carbon constructs a programmatic name for the second select by concatenating
 dynamically generated text on the screen. Carbon also provides accessible names
 for the icon-only buttons.
 
 <Row>
 <Column colLg={8}>
 
-![illustration showing labels for dropdown and icon-only buttons](images/pagination-a11y-5.png)
+![illustration showing labels for select and icon-only buttons](images/pagination-a11y-5.png)
 
 <Caption>
-  Carbon provides the accessible names "page number, of 40 pages", "previous",
-  and "next" for assistive technology.
+  Carbon provides the accessible names "Page", "Previous", and "Next" for
+  assistive technology.
 </Caption>
 
 </Column>
@@ -151,10 +152,10 @@ accessible names for the icon-only buttons.
 <Row>
 <Column colLg={8}>
 
-![Carbon provides the accessible names "page", "previous", and "next" for assistive technology.](images/pagination-a11y-6.png)
+![Carbon provides the accessible names "Page", "Previous", and "Next" for assistive technology.](images/pagination-a11y-6.png)
 
 <Caption>
-  Carbon provides the accessible names "page", "previous", and "next" for
+  Carbon provides the accessible names "Page", "Previous", and "Next" for
   assistive technology.
 </Caption>
 

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/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/contributing/get-started/overview.mdx

@@ -19,6 +19,7 @@ designers and developers. Anyone can contribute code, design, and documentation.
 <AnchorLink>Get started</AnchorLink>
 <AnchorLink>Contribution gallery</AnchorLink>
 <AnchorLink>Carbon champions</AnchorLink>
+<AnchorLink>Carbon Labs</AnchorLink>
 <AnchorLink>Types of contribution</AnchorLink>
 <AnchorLink>The process</AnchorLink>
 
@@ -156,6 +157,38 @@ Figma<br /><br /> **Shankar Venkatachalam** <br /> Create React App<br /><br />
 </Column>
 </Row>
 
+## Carbon Labs
+
+While Carbon sets a high standard for asset stability, we do not want to stifle
+innovation. Previously, we housed unfinished explorations alongside stable
+components, which confused designers and developers about what was safe for use
+in production. To address this, we created Carbon Labs as a dedicated
+environment for explorations, separate from stable design system assets. It
+includes a separate GitHub repo and Storybook for code assets and a dedicated
+Figma space for design assets.
+
+The purpose of Carbon Labs is to highlight innovation work that’s being done in
+the ecosystem but has not yet met the
+[definition of done](/contributing/product-development-lifecycle/#definition-of-done)
+criteria. It is a community-organized incubation space for IBMers. The Carbon
+community within IBM can add assets to Labs while in the
+[Discovery phase](/contributing/product-development-lifecycle/#discovery). Types
+of projects included in Labs should be design system related such as components,
+patterns, shared utilities, or universal guidance.
+
+_For IBMer only_: For more information and a list of projects currently in
+Carbon Labs, go to
+[Carbon Labs](https://pages.github.ibm.com/carbon/ibm-products/contributing/carbon-labs/)
+under the contributing section on the Carbon for IBM Products website.
+
+<Row>
+<Column colLg={8}>
+
+![Carbon labs](images/carbon-labs.png)
+
+</Column>
+</Row>
+
 ## Types of contribution
 
 There are several ways you can contribute, depending on your interest and
@@ -172,11 +205,14 @@ in our enhancement backlog that need design or development work.
 ### New components
 
 New components are a large multidiscipline contribution and must be contributed
-in phases to insure quality and business value. To propose a net new component,
-follow the [phased contribution process](/contributing/contribution-process) and
-complete all requirements in the
+in phases to insure quality and business value. When making a net new component,
+follow the [Product Development Lifecycle](/contributing/contribution-process)
+and complete all requirements in the
 [component checklist](contributing/component-checklist). All requirement
-categories must be completed before a component can be considered done.
+categories must be completed before a component can be considered done. We
+recommend adding your component to
+[Carbon Labs](/get-started/overview/#carbon-labs) in the discovery phases of
+design and code development.
 
 ### Design kits
 

src/pages/contributing/product-development-lifecycle/index.mdx

@@ -104,6 +104,19 @@ considered for inclusion as a maintained asset in the system. Carbon is not the
 gatekeeper of the discovery phase; this phase is fully curated by the community
 and innovators.
 
+#### Add to Carbon Labs
+
+Carbon Labs is a dedicated environment for discovery, separate from stable
+design system assets. The purpose of Carbon Labs is to highlight innovation work
+that’s being done in the ecosystem but has not yet met the definition of done
+(stable) criteria. Both `draft` and `preview candidate` for design or code
+assets are welcomed in Labs.
+
+_For IBMer only_: Add your project to Labs to gain more visibility, buy-in, and
+support from the Carbon community. For more information and a list of projects
+currently in Carbon Labs, go to
+[Carbon for IBM Products](https://pages.github.ibm.com/carbon/ibm-products/contributing/carbon-labs/).
+
 #### Evaluation and next steps
 
 The Carbon team and partners will review the proposals and determine next steps.