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/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 a9c02059912..2112795737e 100755 --- a/src/pages/components/button/usage.mdx +++ b/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._ 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/accessibility.mdx b/src/pages/components/pagination/accessibility.mdx index 84d215cced5..2756b13bb54 100644 --- a/src/pages/components/pagination/accessibility.mdx +++ b/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`. @@ -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. @@ -103,18 +103,19 @@ selection. When the previous and next page arrow buttons have focus, both 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`. -![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) - 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. @@ -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. -![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) - 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. @@ -151,10 +152,10 @@ accessible names for the icon-only buttons. -![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) - Carbon provides the accessible names "page", "previous", and "next" for + Carbon provides the accessible names "Page", "Previous", and "Next" for assistive technology. diff --git a/src/pages/components/pagination/images/pagination-a11y-3.png b/src/pages/components/pagination/images/pagination-a11y-3.png index 06cc3a1b4dc..3e02598158a 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 fe5ffd8b0f2..4a516c9e82d 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 1bef6830d66..7064ba46bd9 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/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/contributing/get-started/images/carbon-labs.png b/src/pages/contributing/get-started/images/carbon-labs.png new file mode 100644 index 00000000000..5614ac07dee Binary files /dev/null and b/src/pages/contributing/get-started/images/carbon-labs.png differ diff --git a/src/pages/contributing/get-started/overview.mdx b/src/pages/contributing/get-started/overview.mdx index 5f564adb252..94ae9c55756 100644 --- a/src/pages/contributing/get-started/overview.mdx +++ b/src/pages/contributing/get-started/overview.mdx @@ -19,6 +19,7 @@ designers and developers. Anyone can contribute code, design, and documentation. Get started Contribution gallery Carbon champions +Carbon Labs Types of contribution The process @@ -156,6 +157,38 @@ Figma

**Shankar Venkatachalam**
Create React App

+## 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. + + + + +![Carbon labs](images/carbon-labs.png) + + + + ## 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 diff --git a/src/pages/contributing/product-development-lifecycle/index.mdx b/src/pages/contributing/product-development-lifecycle/index.mdx index 976f15fc986..be0b1756007 100644 --- a/src/pages/contributing/product-development-lifecycle/index.mdx +++ b/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. 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..08b0de10f1c 100644 --- a/src/pages/elements/typography/code.mdx +++ b/src/pages/elements/typography/code.mdx @@ -77,7 +77,7 @@ 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: 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