diff --git a/.github/workflows/issue-triage.yml b/.github/workflows/issue-triage.yml index 56994a72569..41d7bc8b32b 100644 --- a/.github/workflows/issue-triage.yml +++ b/.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 }} diff --git a/package.json b/package.json index 312b31f987d..295f62b8f73 100644 --- a/package.json +++ b/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", diff --git a/src/components/A11yStatus/A11yStatus.js b/src/components/A11yStatus/A11yStatus.js index 14ae613508d..6f4d81cc91a 100644 --- a/src/components/A11yStatus/A11yStatus.js +++ b/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 diff --git a/src/pages/all-about-carbon/who-uses-carbon.mdx b/src/pages/all-about-carbon/who-uses-carbon.mdx index 14228923bbd..3bb9614b0b2 100755 --- a/src/pages/all-about-carbon/who-uses-carbon.mdx +++ b/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/). diff --git a/src/pages/components/button/usage.mdx b/src/pages/components/button/usage.mdx index 6b7b07694fb..74de66c1451 100755 --- a/src/pages/components/button/usage.mdx +++ b/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._ diff --git a/src/pages/components/dropdown/usage.mdx b/src/pages/components/dropdown/usage.mdx index c4d3dfdc558..398ea698aab 100755 --- a/src/pages/components/dropdown/usage.mdx +++ b/src/pages/components/dropdown/usage.mdx @@ -826,11 +826,11 @@ boxes are useful when the data populating the list may come from a database. -- 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. diff --git a/src/pages/components/number-input/style.mdx b/src/pages/components/number-input/style.mdx index b37d13f4435..aa42b131847 100755 --- a/src/pages/components/number-input/style.mdx +++ b/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 | | --------------- | --------------------------- | -------- | ------------- | diff --git a/src/pages/components/overflow-menu/style.mdx b/src/pages/components/overflow-menu/style.mdx index 544717ab3ab..a953ee234c7 100755 --- a/src/pages/components/overflow-menu/style.mdx +++ b/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 | | ----------- | --------------------------- | --------- | ------------- | diff --git a/src/pages/components/pagination/images/pagination-a11y-3.png b/src/pages/components/pagination/images/pagination-a11y-3.png index 3e02598158a..8b3c72b00a7 100644 Binary files a/src/pages/components/pagination/images/pagination-a11y-3.png and b/src/pages/components/pagination/images/pagination-a11y-3.png differ diff --git a/src/pages/components/pagination/images/pagination-a11y-4.png b/src/pages/components/pagination/images/pagination-a11y-4.png index 4a516c9e82d..b0186cf15e1 100644 Binary files a/src/pages/components/pagination/images/pagination-a11y-4.png and b/src/pages/components/pagination/images/pagination-a11y-4.png differ diff --git a/src/pages/components/pagination/images/pagination-a11y-5.png b/src/pages/components/pagination/images/pagination-a11y-5.png index 7064ba46bd9..6d1b28e06ca 100644 Binary files a/src/pages/components/pagination/images/pagination-a11y-5.png and b/src/pages/components/pagination/images/pagination-a11y-5.png differ diff --git a/src/pages/components/progress-indicator/style.mdx b/src/pages/components/progress-indicator/style.mdx index 5cde063df76..7345a665324 100755 --- a/src/pages/components/progress-indicator/style.mdx +++ b/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 | | ------- | ------------------------ | -------- | ------------- | diff --git a/src/pages/components/tabs/usage.mdx b/src/pages/components/tabs/usage.mdx index bd8c805f44f..ca6588955d4 100755 --- a/src/pages/components/tabs/usage.mdx +++ b/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. diff --git a/src/pages/components/tag/usage.mdx b/src/pages/components/tag/usage.mdx index e87983bff32..d7d6464d72e 100755 --- a/src/pages/components/tag/usage.mdx +++ b/src/pages/components/tag/usage.mdx @@ -17,17 +17,6 @@ them. -**Tag now offers multiple new features.** - -
{' '} - -[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. - -
- [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. diff --git a/src/pages/components/tile/usage.mdx b/src/pages/components/tile/usage.mdx index 7135245c0b9..829cb34fed9 100755 --- a/src/pages/components/tile/usage.mdx +++ b/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 diff --git a/src/pages/components/tooltip/code.mdx b/src/pages/components/tooltip/code.mdx index d5a9457ecea..f9b869499cf 100755 --- a/src/pages/components/tooltip/code.mdx +++ b/src/pages/components/tooltip/code.mdx @@ -19,7 +19,7 @@ documentation, see the Storybooks for each framework below. diff --git a/src/pages/contributing/get-started/images/carbon-labs.png b/src/pages/contributing/get-started/images/carbon-labs.png index 5614ac07dee..c388c5b9b51 100644 Binary files a/src/pages/contributing/get-started/images/carbon-labs.png and b/src/pages/contributing/get-started/images/carbon-labs.png differ diff --git a/src/pages/data-visualization/color-palettes/index.mdx b/src/pages/data-visualization/color-palettes/index.mdx index b08ac599444..234bbcea87d 100644 --- a/src/pages/data-visualization/color-palettes/index.mdx +++ b/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). diff --git a/src/pages/designing/kits/sketch.mdx b/src/pages/designing/kits/sketch.mdx index 880bb11c288..e88e3b81409 100755 --- a/src/pages/designing/kits/sketch.mdx +++ b/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 diff --git a/src/pages/developing/angular-tutorial/step-2.mdx b/src/pages/developing/angular-tutorial/step-2.mdx index bc06bae8dc5..7717dbaa735 100644 --- a/src/pages/developing/angular-tutorial/step-2.mdx +++ b/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,13 +492,12 @@ 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 @@ -506,9 +505,9 @@ 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 */} diff --git a/src/pages/developing/frameworks/react.mdx b/src/pages/developing/frameworks/react.mdx index c7ffcf8f038..5156490955c 100755 --- a/src/pages/developing/frameworks/react.mdx +++ b/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/). diff --git a/src/pages/developing/react-tutorial/step-2.mdx b/src/pages/developing/react-tutorial/step-2.mdx index a122ef31665..cabc2e03c08 100644 --- a/src/pages/developing/react-tutorial/step-2.mdx +++ b/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 diff --git a/src/pages/developing/vue-tutorial/step-2.mdx b/src/pages/developing/vue-tutorial/step-2.mdx index 8a6459b9904..6789ccd5a6b 100644 --- a/src/pages/developing/vue-tutorial/step-2.mdx +++ b/src/pages/developing/vue-tutorial/step-2.mdx @@ -387,7 +387,7 @@ for now. We've added basic layout styles in `LandingPage.vue`, so now let's add type, color and spacing styles to match the design. We'll be using our -[spacing tokens](/guidelines/spacing/overview#spacing-scale). In a new file +[spacing tokens](/elements/spacing/overview#spacing-scale). In a new file `src/styles/_carbon-utils.scss`, add these imports at the **top** of the file so we can use Carbon breakpoints, tokens, and typography Sass mixins and functions: @@ -435,13 +435,12 @@ with the other imports and } ``` -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 @@ -451,9 +450,9 @@ 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 `$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/views/LandingPage/_mixins.scss @@ -512,7 +511,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/views/LandingPage/LandingPage.vue diff --git a/src/pages/elements/2x-grid/usage.mdx b/src/pages/elements/2x-grid/usage.mdx index 576e27ae1f3..1fd5eb3845a 100644 --- a/src/pages/elements/2x-grid/usage.mdx +++ b/src/pages/elements/2x-grid/usage.mdx @@ -122,8 +122,8 @@ pattern also remains the same, giving users a familiar anchor. However the content has become a lot denser as other column configurations begin to emerge on the fluid 2x grid. The fixed grid also comes into play here in the data visualizations, where content is so dense that fixed spacers (i.e. the -[mini unit grid](/guidelines/2x-grid/overview/#mini-unit)) need to be used -rather than fluid columns. +[mini unit grid](/elements/2x-grid/overview/#mini-unit)) need to be used rather +than fluid columns. ![denser layout example](images/usage/03_denser_layout_UI.png) @@ -220,7 +220,7 @@ changes. When a commonly used aspect ratio is not appropriate for the layout, it’s also fine to choose a less common aspect ratio or a{' '} - scaling multiple. + scaling multiple. ### Contrast @@ -306,7 +306,7 @@ _(IBMers only)_. Style models help designers by simplifying decisions around how foundational design elements should be used. For example, all pages on IBM.com and all -screens within IBM product use the [2x Grid](/guidelines/2x-grid/overview/), but +screens within IBM product use the [2x Grid](/elements/2x-grid/overview/), but the 2x Grid supports a wide range of behaviors and usage. The 2x Grid can be left aligned, centered or it can span the maximum width of the browser. @@ -317,7 +317,7 @@ serve. In our models, the design elements included are: - Grid -- [Screen regions](/guidelines/2x-grid/overview#screen-regions) +- [Screen regions](/elements/2x-grid/overview#screen-regions) - Key components (Masthead, Footer, and Product UI Shell) The biggest differentiator between the style models is the grid. Specifically in diff --git a/src/pages/elements/icons/code.mdx b/src/pages/elements/icons/code.mdx index 7ea65db4a9a..6019fc3f46a 100644 --- a/src/pages/elements/icons/code.mdx +++ b/src/pages/elements/icons/code.mdx @@ -59,7 +59,7 @@ size `16`. You can change the size of the icon by adding the `size` prop: ``` _Note: if you would like to find the import path for an icon, you can reference -our [Icon Library](https://www.carbondesignsystem.com/guidelines/icons/library)_ +our [Icon Library](https://www.carbondesignsystem.com/elements/icons/library)_ ### Icon fill diff --git a/src/pages/elements/icons/usage.mdx b/src/pages/elements/icons/usage.mdx index 26e29188177..34181082991 100644 --- a/src/pages/elements/icons/usage.mdx +++ b/src/pages/elements/icons/usage.mdx @@ -101,8 +101,7 @@ can add padding to a touch target with CSS to meet the 44px requirement. Icons are always a solid, monochromatic color and need to pass the same color contrast ratio as typography (4.5:1). The color of the icon should reflect the importance of the icon’s action which should always be to help guide a user. For -more information on color, see the -[Color guidelines](/guidelines/color/overview). +more information on color, see the [Color guidelines](/elements/color/overview). It's also important to note that Carbon v10 icons themselves do not have interaction states, only their backgrounds do. diff --git a/src/pages/elements/pictograms/code.mdx b/src/pages/elements/pictograms/code.mdx index 8766abccbe5..1da3c65aafc 100644 --- a/src/pages/elements/pictograms/code.mdx +++ b/src/pages/elements/pictograms/code.mdx @@ -57,7 +57,7 @@ const { Airplane } = require('@carbon/pictograms-react'); _Note: if you would like to find the import path for a pictogram, you can reference our -[Pictogram Library](https://www.carbondesignsystem.com/guidelines/pictograms/library)_ +[Pictogram Library](https://www.carbondesignsystem.com/elements/pictograms/library)_ ### Icon fill diff --git a/src/pages/elements/themes/code.mdx b/src/pages/elements/themes/code.mdx index 97f3af3d721..01dbe9bae56 100644 --- a/src/pages/elements/themes/code.mdx +++ b/src/pages/elements/themes/code.mdx @@ -31,7 +31,7 @@ are pre-defined for a specific theme. Currently, we offer the following color themes: white, gray 10, gray 90, gray 100. You can preview all of the token values for this on the -[color guidelines](/guidelines/color/usage) page. +[color guidelines](/elements/color/usage) page. ### Sass diff --git a/src/pages/elements/themes/overview.mdx b/src/pages/elements/themes/overview.mdx index 5f4e3d29861..54cfee3dcf5 100755 --- a/src/pages/elements/themes/overview.mdx +++ b/src/pages/elements/themes/overview.mdx @@ -44,9 +44,9 @@ individual components. ### Default theme -Carbon provides four themes as shown in the -[color usage](/guidelines/color/usage) page. When `@carbon/react` is downloaded -and installed, the components are preset to use the default (White) theme. +Carbon provides four themes as shown in the [color usage](/elements/color/usage) +page. When `@carbon/react` is downloaded and installed, the components are +preset to use the default (White) theme. To use the Gray 10, Gray 90, or Gray 100 theme as your default instead of White, configure the sass module using `with`. @@ -108,13 +108,13 @@ and Each theme is assigned universal color variables, which are determined by common roles and usage. This allows for uniform color application across themes while maintaining full styling flexibility. For more information, see the -[color](/guidelines/color/overview) page. +[color](/elements/color/overview) page. ### Spacing Use the spacing scale when building individual components. It includes small increments needed to create appropriate spatial relationships for detail-level -designs. For more information, see the [spacing](/guidelines/spacing/overview/) +designs. For more information, see the [spacing](/elements/spacing/overview/) page. ### Typography @@ -123,7 +123,7 @@ Typography has four categories of type styles (universal, productive, editorial, and additional) that can be customized through tokens. These tokens are used both within components and across layouts. Type tokens are determined by their role across the system. For more information, see the -[typography](/guidelines/typography/overview/) page. +[typography](/elements/typography/overview/) page. ### Global diff --git a/src/pages/elements/typography/code.mdx b/src/pages/elements/typography/code.mdx index 0d2e4795f71..cb66b16c816 100644 --- a/src/pages/elements/typography/code.mdx +++ b/src/pages/elements/typography/code.mdx @@ -77,16 +77,16 @@ what we call type styles. These tokens have a variety of properties for styling how text is rendered on a page. You can find a full reference of the type styles that are available on the -[Carbon Design System website](https://carbondesignsystem.com/guidelines/typography/type-sets) +[Carbon Design System website](https://carbondesignsystem.com/elements/typography/type-sets) . You can include a token in your Sass file by writing: -````scss +```scss @use '@carbon/type'; @include type.type-style('productive-heading-01'); -``` | +``` ### Reset @@ -97,7 +97,7 @@ include this mixin by writing the following in your Sass file: @use '@carbon/type'; @include type.reset(); -```` +``` This reset sets some top-level properties on `html` and `body`, namely `font-size`, `font-family`, and some `text-rendering` options. We also map the diff --git a/src/pages/elements/typography/overview.mdx b/src/pages/elements/typography/overview.mdx index e5d294fc164..2a8ebd3fe07 100644 --- a/src/pages/elements/typography/overview.mdx +++ b/src/pages/elements/typography/overview.mdx @@ -62,9 +62,8 @@ are implemented in code. The productive type set uses fixed headings. Expressive headings are responsive and the type styles change size at different breakpoints. -For more detail, see -[Style strategies](/guidelines/typography/style-strategies/) and -[Type sets](/guidelines/typography/type-sets/). +For more detail, see [Style strategies](/elements/typography/style-strategies/) +and [Type sets](/elements/typography/type-sets/). ## Typeface: IBM Plex diff --git a/src/pages/elements/typography/type-sets.mdx b/src/pages/elements/typography/type-sets.mdx index 2772d77285e..a7f224a72c1 100644 --- a/src/pages/elements/typography/type-sets.mdx +++ b/src/pages/elements/typography/type-sets.mdx @@ -39,7 +39,7 @@ Carbon uses type tokens to manage typography, and these tokens sit within two type sets. The productive and expressive type sets support designers creating for a full range of user needs and activities across product and web pages. To understand when to use styles from each set, see -[Style strategies](/guidelines/typography/style-strategies). +[Style strategies](/elements/typography/style-strategies). #### Base type sizes @@ -105,7 +105,7 @@ different breakpoints — hence the name "fluid." Do not use these styles inside a container. They may be used in product pages where text sits outside of a container, and a blend of expressive and productive type styles is desired for hierarchy and distinction. For more information, see -[Style strategies](/guidelines/typography/style-strategies). +[Style strategies](/elements/typography/style-strategies). _Note: the slider below shows the type sizes jumping abruptly between breakpoints, which is not a good representation of the actual behavior._ @@ -117,7 +117,7 @@ breakpoints, which is not a good representation of the actual behavior._ The callout and display styles are part of the expressive set and being fluid, they will adjust at different breakpoints. Do not use these styles inside a container. For guidance about using display styles, see -[Style strategies](/guidelines/typography/style-strategies#expressive-use-cases). +[Style strategies](/elements/typography/style-strategies#expressive-use-cases). diff --git a/src/pages/migrating/guide/overview.mdx b/src/pages/migrating/guide/overview.mdx index e94b494d137..d79d498b5f7 100644 --- a/src/pages/migrating/guide/overview.mdx +++ b/src/pages/migrating/guide/overview.mdx @@ -127,9 +127,9 @@ approach that makes it easier to understand and apply tokens based on their usage. To learn more about the new color tokens, check out our -[Color Guidelines](https://carbondesignsystem.com/guidelines/color/usage). You -can also learn more about concepts like layering -[here](https://carbondesignsystem.com/guidelines/color/implementation). +[Color Guidelines](https://carbondesignsystem.com/elements/color/usage). You can +also learn more about concepts like layering +[here](https://carbondesignsystem.com/elements/color/implementation). #### Light & Dark mode @@ -150,7 +150,7 @@ These changes involve mostly name changes. The values and roles of these tokens remain the same between v10 and v11. To learn more about the new type tokens in v11, check out our -[Typography Guidelines](https://www.carbondesignsystem.com/guidelines/typography/productive/). +[Typography Guidelines](https://www.carbondesignsystem.com/elements/typography/productive/). If you're curious about specific changes to tokens, take a look at our [v11 Migration Docs](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#type-tokens). diff --git a/src/pages/patterns/fluid-styles/index.mdx b/src/pages/patterns/fluid-styles/index.mdx index 5fe52a02930..920c4b765e6 100644 --- a/src/pages/patterns/fluid-styles/index.mdx +++ b/src/pages/patterns/fluid-styles/index.mdx @@ -151,7 +151,7 @@ existing components. Fluid containers, like a modal, calculate their width based on column spans or percentages and will fluctuate in size. Fixed containers, like a side panel, maintain a static width, cannot be collapsed and can exist outside the responsive grid. For more information on grid responsive containers, -see [2x Grid](/guidelines/2x-grid/overview/). +see [2x Grid](/elements/2x-grid/overview/). @@ -281,9 +281,9 @@ guidance on default versus fluid forms, see the #### Guidelines -- [2x Grid](/guidelines/2x-grid/overview/) -- [Motion](/guidelines/motion/overview/) -- [Typography](/guidelines/typography/style-strategies) +- [2x Grid](/elements/2x-grid/overview/) +- [Motion](/elements/motion/overview/) +- [Typography](/elements/typography/style-strategies) diff --git a/src/pages/patterns/forms-pattern/index.mdx b/src/pages/patterns/forms-pattern/index.mdx index dedc601e8a9..4eb7c37ac27 100644 --- a/src/pages/patterns/forms-pattern/index.mdx +++ b/src/pages/patterns/forms-pattern/index.mdx @@ -748,7 +748,7 @@ precise, but, you can add a short description of the group if necessary. Users will be confused if inputs are too close together. To ensure sufficient spacing between single form elements as well as groups of inputs, use margins, spacers, gutters, and key alignments to guide you. See the -[2x Grid](/guidelines/2x-grid/overview) for more information. +[2x Grid](/elements/2x-grid/overview) for more information. #### Form context diff --git a/yarn.lock b/yarn.lock index bc96d8197f2..28d753b9951 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3257,15 +3257,15 @@ __metadata: languageName: node linkType: hard -"@carbon/react@npm:^1.71.0": - version: 1.71.0 - resolution: "@carbon/react@npm:1.71.0" +"@carbon/react@npm:^1.72.0": + version: 1.72.0 + resolution: "@carbon/react@npm:1.72.0" dependencies: "@babel/runtime": "npm:^7.24.7" "@carbon/feature-flags": "npm:^0.24.0" "@carbon/icons-react": "npm:^11.53.0" "@carbon/layout": "npm:^11.28.0" - "@carbon/styles": "npm:^1.70.0" + "@carbon/styles": "npm:^1.71.0" "@floating-ui/react": "npm:^0.26.0" "@ibm/telemetry-js": "npm:^1.5.0" classnames: "npm:2.5.1" @@ -3274,7 +3274,6 @@ __metadata: flatpickr: "npm:4.6.13" invariant: "npm:^2.2.3" lodash.debounce: "npm:^4.0.8" - lodash.findlast: "npm:^4.5.0" lodash.omit: "npm:^4.5.0" lodash.throttle: "npm:^4.1.1" prop-types: "npm:^15.7.2" @@ -3287,13 +3286,13 @@ __metadata: react: ^16.8.6 || ^17.0.1 || ^18.2.0 react-dom: ^16.8.6 || ^17.0.1 || ^18.2.0 sass: ^1.33.0 - checksum: 397e80b40b396dcb5e5b161c5c520555bdcf3808482a9a9ca0f2ac819f69b29f5f70157cceca2f032f637d93d02c0ef1ee17e9e504be2801e73ef7bb315e0ffc + checksum: f08b7261ff792e95c6226f8c72280d8111996ba710a9e88bdb2bfe9828ebb9410fc427492b89a2f5b07afc42f9e66ed1f6fa3f666af87005a278572cdbadc499 languageName: node linkType: hard -"@carbon/styles@npm:^1.70.0": - version: 1.70.0 - resolution: "@carbon/styles@npm:1.70.0" +"@carbon/styles@npm:^1.71.0": + version: 1.71.0 + resolution: "@carbon/styles@npm:1.71.0" dependencies: "@carbon/colors": "npm:^11.28.0" "@carbon/feature-flags": "npm:^0.24.0" @@ -3317,7 +3316,7 @@ __metadata: peerDependenciesMeta: sass: optional: true - checksum: 020d94f3c34d95695b05e26556648ee5e155fe796c862048e6c8db3d5529dab4a079d050c03962ab20243161b542bc42389ffebd23f6ca0e11baf0308c867974 + checksum: a057da72de5cfb49b23973d928ef33f412cfe64c4ede341a281349e5ab42232b7cc5e78a13e85d3615bddd7c548afd29bd15a635e9361fbe4497390f23f870a6 languageName: node linkType: hard @@ -7409,7 +7408,7 @@ __metadata: gatsby-plugin-sharp: "npm:^5.13.1" gatsby-plugin-sitemap: "npm:^6.13.1" gatsby-source-filesystem: "npm:^5.13.1" - gatsby-theme-carbon: "npm:^4.1.14" + gatsby-theme-carbon: "npm:^4.1.21" gatsby-transformer-sharp: "npm:^5.13.1" html-loader: "npm:^5.1.0" husky: "npm:^9.0.11" @@ -12224,9 +12223,9 @@ __metadata: languageName: node linkType: hard -"gatsby-theme-carbon@npm:^4.1.14": - version: 4.1.14 - resolution: "gatsby-theme-carbon@npm:4.1.14" +"gatsby-theme-carbon@npm:^4.1.21": + version: 4.1.21 + resolution: "gatsby-theme-carbon@npm:4.1.21" dependencies: "@babel/core": "npm:^7.24.7" "@babel/plugin-proposal-class-properties": "npm:^7.18.6" @@ -12234,7 +12233,7 @@ __metadata: "@carbon/elements": "npm:^11.57.0" "@carbon/grid": "npm:^11.29.0" "@carbon/pictograms-react": "npm:^11.69.0" - "@carbon/react": "npm:^1.71.0" + "@carbon/react": "npm:^1.72.0" "@carbon/themes": "npm:^11.43.0" "@garcia-enterprise/gatsby-plugin-sass-resources": "npm:^4.0.2" "@mdx-js/mdx": "npm:^3.0.1" @@ -12280,7 +12279,7 @@ __metadata: gatsby: ^5.13.3 react: ^18.2.0 react-dom: ^18.2.0 - checksum: ce25fbb209032267cf70c7d8d07ee87979bfde1b92fee14c99b66208274f3d553a69d0544ce406ef2b6a27331b11c03a52640317e36d62876fbda5823b168d8e + checksum: a6c5c679db8efebc63558f9e6efcfacf912230e7935f8b0dc3de6e400a3245bbe80b6831709f2cd01e4e13e1fe9697499cc724bf7ee3f4c0801eb6fcee628240 languageName: node linkType: hard @@ -15127,13 +15126,6 @@ __metadata: languageName: node linkType: hard -"lodash.findlast@npm:^4.5.0": - version: 4.6.0 - resolution: "lodash.findlast@npm:4.6.0" - checksum: 1b3f084694c19348d78eaf05399ad5f464024af864bfb6514654cfd22e3a6709402505ca04645a99461faadfedf7e2b347c52b18989621b0aeec631aaf00ce74 - languageName: node - linkType: hard - "lodash.flattendeep@npm:^4.4.0": version: 4.4.0 resolution: "lodash.flattendeep@npm:4.4.0"