diff --git a/src/components/SVGLibraries/IconLibrary/IconLibrary.js b/src/components/SVGLibraries/IconLibrary/IconLibrary.js index c3926c8098b..221beda51cd 100644 --- a/src/components/SVGLibraries/IconLibrary/IconLibrary.js +++ b/src/components/SVGLibraries/IconLibrary/IconLibrary.js @@ -27,7 +27,9 @@ const IconLibrary = () => { useEffect(() => { const iconArray = iconMetaData.reduce((accumulator, icon) => { - if (icon.deprecated) {return accumulator;} + if (icon.deprecated) { + return accumulator; + } const path = [...icon.namespace, icon.name].join('/'); @@ -118,7 +120,7 @@ const IconLibrary = () => { setSelectedCategory={setSelectedCategory} allIconResults={filteredIcons.length} pageName="icon" - pageUrl="https://github.com/carbon-design-system/carbon/blob/main/packages/icons/master/ui-icon-master.ai" + pageUrl="https://github.com/carbon-design-system/carbon/blob/v10/packages/icons/master/ui-icon-master.ai" /> ) : (
diff --git a/src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js b/src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js index a6cc36f8bc0..16bf82c1a03 100644 --- a/src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js +++ b/src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js @@ -13,10 +13,8 @@ import { svgPage, svgLibrary } from '../shared/SvgLibrary.module.scss'; import PictogramCategory from './PictogramCategory'; import NoResult from '../shared/NoResult'; -const { - icons: pictogramMetaData, - categories: pictogramCategoryMetadata, -} = metaData; +const { icons: pictogramMetaData, categories: pictogramCategoryMetadata } = + metaData; const IconLibrary = () => { const [pictogramComponents, setPictogramComponents] = useState([]); @@ -31,7 +29,9 @@ const IconLibrary = () => { useEffect(() => { const pictogramArray = pictogramMetaData.reduce( (accumulator, pictogram) => { - if (pictogram.deprecated) {return accumulator;} + if (pictogram.deprecated) { + return accumulator; + } const path = [...pictogram.namespace, pictogram.name].join('/'); @@ -109,7 +109,7 @@ const IconLibrary = () => { setSelectedCategory={setSelectedCategory} allIconResults={filteredPictograms.length} pageName="pictogram" - pageUrl="https://github.com/carbon-design-system/carbon/raw/main/packages/pictograms/master/productive-pictogram-master.ai" + pageUrl="https://github.com/carbon-design-system/carbon/raw/v10/packages/pictograms/master/productive-pictogram-master.ai" /> ) : (
diff --git a/src/pages/contributing/component/index.mdx b/src/pages/contributing/component/index.mdx index 152d0a9819e..733a4eaf482 100644 --- a/src/pages/contributing/component/index.mdx +++ b/src/pages/contributing/component/index.mdx @@ -691,7 +691,7 @@ specific repo you intend to contribute to. diff --git a/src/pages/contributing/contribute-icons.mdx b/src/pages/contributing/contribute-icons.mdx index 1bf7cff64ff..d2fc9a3a601 100644 --- a/src/pages/contributing/contribute-icons.mdx +++ b/src/pages/contributing/contribute-icons.mdx @@ -52,7 +52,7 @@ guidelines to ensure visual consistency and proper formatting. - Make sure to properly name layers and artboards _(these names will also be exported into the code)_. - Review the - [icon master file](https://github.com/carbon-design-system/carbon/tree/main/packages/icons/master) + [icon master file](https://github.com/carbon-design-system/carbon/tree/v10/packages/icons/master) to see these guidelines in practice. ### Production-ready @@ -124,7 +124,7 @@ for approval. Before submitting artwork, first review our [icons library](https://www.carbondesignsystem.com/guidelines/icons/library/) or download the -[Carbon icon master .ai file](https://github.com/carbon-design-system/carbon/tree/main/packages/icons/master) +[Carbon icon master .ai file](https://github.com/carbon-design-system/carbon/tree/v10/packages/icons/master) to check your design for duplication against existing icons. ### Approval process diff --git a/src/pages/designing/design-resources/index.mdx b/src/pages/designing/design-resources/index.mdx index 820dfae2acf..ae13251e308 100755 --- a/src/pages/designing/design-resources/index.mdx +++ b/src/pages/designing/design-resources/index.mdx @@ -59,7 +59,7 @@ You'll find even more guidance and assets in this file than on the site. ![](/images/ase.png) @@ -125,7 +125,8 @@ You'll find even more guidance and assets in this file than on the site. + actionIcon="launch" + > @@ -134,7 +135,8 @@ You'll find even more guidance and assets in this file than on the site. + actionIcon="download" + > @@ -291,7 +293,8 @@ before committing to high-fidelity designs. + actionIcon="download" + > diff --git a/src/pages/developing/dev-resources/index.mdx b/src/pages/developing/dev-resources/index.mdx index 14ea35c7814..beb1179bbe4 100644 --- a/src/pages/developing/dev-resources/index.mdx +++ b/src/pages/developing/dev-resources/index.mdx @@ -37,7 +37,7 @@ your framework of choice. @@ -75,7 +75,8 @@ your framework of choice. + href="https://github.com/IBM/carbon-components-svelte" + > diff --git a/src/pages/developing/frameworks/react.mdx b/src/pages/developing/frameworks/react.mdx index 4994eba7d57..4d25dc31100 100755 --- a/src/pages/developing/frameworks/react.mdx +++ b/src/pages/developing/frameworks/react.mdx @@ -76,7 +76,7 @@ yarn add carbon-components-react carbon-components carbon-icons 1. These components require the use of [webpack](https://webpack.js.org/guides/getting-started/) in your project. See our - [webpack.config.js](https://github.com/carbon-design-system/carbon/blob/main/packages/react/.storybook/webpack.config.js) + [webpack.config.js](https://github.com/carbon-design-system/carbon/blob/v10/packages/react/.storybook/webpack.config.js) for an example configuration. 2. Components do not import any of the styles themselves, use the SCSS or CSS @@ -86,13 +86,13 @@ yarn add carbon-components-react carbon-components carbon-icons CSS file. 3. For older browsers (e.g. IE11), polyfills listed in the - [carbon-components-react/.storybook/polyfills.js file](https://github.com/carbon-design-system/carbon/blob/main/packages/react/.storybook/polyfills.js) + [carbon-components-react/.storybook/polyfills.js file](https://github.com/carbon-design-system/carbon/blob/v10/packages/react/.storybook/polyfills.js) are required. ## Development Please refer to the -[Contribution Guidelines](https://github.com/carbon-design-system/carbon/blob/main/.github/CONTRIBUTING.md) +[Contribution Guidelines](https://github.com/carbon-design-system/carbon/blob/v10/.github/CONTRIBUTING.md) before starting any work. ### Using the server @@ -124,7 +124,7 @@ top right corner of the selected component. If you experience any issues while getting set up with Carbon Components React, please head over to the -[GitHub repo](https://github.com/carbon-design-system/carbon/tree/main/packages/react) +[GitHub repo](https://github.com/carbon-design-system/carbon/tree/v10/packages/react) for more guidelines and support. Please [create an issue](https://github.com/carbon-design-system/carbon/issues) if your issue does not already exist. diff --git a/src/pages/developing/frameworks/vanilla.mdx b/src/pages/developing/frameworks/vanilla.mdx index b5202b81fec..645ceb6aa91 100755 --- a/src/pages/developing/frameworks/vanilla.mdx +++ b/src/pages/developing/frameworks/vanilla.mdx @@ -123,7 +123,7 @@ prefixes are automatically added to your output CSS. #### Default body styles CSS is automatically applied to `` element, which comes from -[\_css--body.scss](https://github.com/carbon-design-system/carbon/blob/main/packages/components/src/globals/scss/_css--body.scss). +[\_css--body.scss](https://github.com/carbon-design-system/carbon/blob/v10/packages/components/src/globals/scss/_css--body.scss). These styles are meant to cascade down to everything in `` to set common styles shared across all components. @@ -153,7 +153,7 @@ to `true` by default. For example: - When you set `$css--reset: true`, then the contents of - [\_css--reset.scss](https://github.com/carbon-design-system/carbon/blob/main/packages/components/src/globals/scss/_css--reset.scss) + [\_css--reset.scss](https://github.com/carbon-design-system/carbon/blob/v10/packages/components/src/globals/scss/_css--reset.scss) will be part of your output CSS. - When you set `$css--reset: false`, then nothing gets included from that SCSS file. @@ -336,7 +336,7 @@ customElements.define('bx-loading', BXLoading); carbon-components requires some polyfills for older browsers, in addition to carbon-components.js (or carbon-components.min.js). The latest list of polyfills is maintained in -[carbon-components/blob/main/packages/components/demo/polyfills/index.js](https://github.com/carbon-design-system/carbon/blob/main/packages/components/demo/polyfills/index.js). +[carbon-components/blob/main/packages/components/demo/polyfills/index.js](https://github.com/carbon-design-system/carbon/blob/v10/packages/components/demo/polyfills/index.js). You can easily find the polyfills in NPM, etc. The current list is below: - [Array.from()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) diff --git a/src/pages/developing/react-tutorial/step-1.mdx b/src/pages/developing/react-tutorial/step-1.mdx index 49ec592c3b8..3dad28ef049 100644 --- a/src/pages/developing/react-tutorial/step-1.mdx +++ b/src/pages/developing/react-tutorial/step-1.mdx @@ -79,6 +79,7 @@ git remote add upstream git@github.com:carbon-design-system/carbon-tutorial.git ``` #### HTTPS + ```bash git remote add upstream https://github.com/carbon-design-system/carbon-tutorial.git ``` @@ -302,7 +303,8 @@ const TutorialHeader = () => ( + isPersistent={false} + > Repositories @@ -322,7 +324,7 @@ export default TutorialHeader; **Note:** you can find a description of the different components used UI Shell in our -[carbon-components-react](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/UIShell) +[carbon-components-react](https://github.com/carbon-design-system/carbon/tree/v10/packages/react/src/components/UIShell) package. diff --git a/src/pages/developing/react-tutorial/step-2.mdx b/src/pages/developing/react-tutorial/step-2.mdx index 5c79214605b..440aac7cdc3 100644 --- a/src/pages/developing/react-tutorial/step-2.mdx +++ b/src/pages/developing/react-tutorial/step-2.mdx @@ -95,7 +95,7 @@ You should see something similar to where the Before we get started with this step, we'll be adding some components that require IE11 polyfills. As shown in the -[Carbon React documentation](https://github.com/carbon-design-system/carbon/blob/main/packages/react/.storybook/polyfills.js), +[Carbon React documentation](https://github.com/carbon-design-system/carbon/blob/v10/packages/react/.storybook/polyfills.js), go ahead and add these imports to the top of the root `index.js`. They aren't all needed, but we'll add them all to play it safe for the duration of the tutorial. @@ -260,8 +260,8 @@ import { Before we can render the tabs, we need to add some props for the component after the import. These example props came from the -[React Tabs Story](https://react.carbondesignsystem.com/?path=/story/components-tabs--default) in -Storybook. +[React Tabs Story](https://react.carbondesignsystem.com/?path=/story/components-tabs--default) +in Storybook. ```javascript path=src/content/LandingPage/LandingPage.js const props = { diff --git a/src/pages/guidelines/2x-grid/implementation.mdx b/src/pages/guidelines/2x-grid/implementation.mdx index 8e46c9f0b9b..c9de224ee9e 100644 --- a/src/pages/guidelines/2x-grid/implementation.mdx +++ b/src/pages/guidelines/2x-grid/implementation.mdx @@ -1369,7 +1369,7 @@ Image size can change ratios when the breakpoint changes. diff --git a/src/pages/guidelines/2x-grid/overview.mdx b/src/pages/guidelines/2x-grid/overview.mdx index a9d56ee0b9b..8766fb17c69 100644 --- a/src/pages/guidelines/2x-grid/overview.mdx +++ b/src/pages/guidelines/2x-grid/overview.mdx @@ -41,7 +41,7 @@ creative decision-making. @@ -108,16 +108,16 @@ fluid grid, or by tiling fixed boxes in multiples. #### Fluid grid -A fluid grid divides space by twos. This division is immediately -evident in the 2x column structure. Within a breakpoint, the column count is -constant, and unit size scales with screen size. Choose a column count by -starting with one, then divide by two as needed. +A fluid grid divides space by twos. This division is immediately evident in the +2x column structure. Within a breakpoint, the column count is constant, and unit +size scales with screen size. Choose a column count by starting with one, then +divide by two as needed. #### Fixed grid -A fixed grid starts with a fixed unit size from the sizing scale, -then tiles and wraps as needed, like text. To employ the 2x concept, multiply -box sizes by two and mix them together. +A fixed grid starts with a fixed unit size from the sizing scale, then tiles and +wraps as needed, like text. To employ the 2x concept, multiply box sizes by two +and mix them together. When tiling fixed boxes, the column count is not known in advance, but a grid emerges visually due to the use of a consistent sizing scale. On breakpoint @@ -181,7 +181,7 @@ breakpoints. Create custom breakpoints to accommodate special needs, by writing your own media queries and CSS rules. Refer to the -[grid code package](https://github.com/carbon-design-system/carbon/tree/main/packages/grid) +[grid code package](https://github.com/carbon-design-system/carbon/tree/v10/packages/grid) for more information. | Breakpoint | Value (px/rem) | Columns | Size (%) | Size | Padding | Margin | diff --git a/src/pages/guidelines/color/code.mdx b/src/pages/guidelines/color/code.mdx index 2e3b2049b3a..9a694e96173 100644 --- a/src/pages/guidelines/color/code.mdx +++ b/src/pages/guidelines/color/code.mdx @@ -170,7 +170,7 @@ warmGray100; // Using the `warmGray100` variable. diff --git a/src/pages/guidelines/color/overview.mdx b/src/pages/guidelines/color/overview.mdx index e3401fd9c68..6c9d7e7bacd 100755 --- a/src/pages/guidelines/color/overview.mdx +++ b/src/pages/guidelines/color/overview.mdx @@ -352,7 +352,7 @@ For a complete look at color-related accessibility topics in Carbon, visit the @@ -362,7 +362,7 @@ For a complete look at color-related accessibility topics in Carbon, visit the diff --git a/src/pages/guidelines/icons/code.mdx b/src/pages/guidelines/icons/code.mdx index e7afeabca41..1d7273f2968 100644 --- a/src/pages/guidelines/icons/code.mdx +++ b/src/pages/guidelines/icons/code.mdx @@ -163,7 +163,7 @@ browsers like Internet Explorer 11 by setting `focusable` to `true`. @@ -173,7 +173,7 @@ browsers like Internet Explorer 11 by setting `focusable` to `true`. diff --git a/src/pages/guidelines/icons/contribute.mdx b/src/pages/guidelines/icons/contribute.mdx index fd7793e2ece..f1019718a48 100644 --- a/src/pages/guidelines/icons/contribute.mdx +++ b/src/pages/guidelines/icons/contribute.mdx @@ -53,7 +53,7 @@ guidelines to ensure visual consistency and proper formatting. - Make sure to properly name layers and artboards _(these names will also be exported into the code)_. - Review the - [icon master file](https://github.com/carbon-design-system/carbon/tree/main/packages/icons/master) + [icon master file](https://github.com/carbon-design-system/carbon/tree/v10/packages/icons/master) to see these guidelines in practice. ### Production-ready @@ -100,7 +100,7 @@ for approval. Before submitting artwork, first review our [icons library](https://www.carbondesignsystem.com/guidelines/icons/library/) or download the -[Carbon icon master .ai file](https://github.com/carbon-design-system/carbon/tree/main/packages/icons/master) +[Carbon icon master .ai file](https://github.com/carbon-design-system/carbon/tree/v10/packages/icons/master) to check your design for duplication against existing icons. ### Approval process diff --git a/src/pages/guidelines/icons/usage.mdx b/src/pages/guidelines/icons/usage.mdx index 9fdc716cbd1..d1001d49e75 100644 --- a/src/pages/guidelines/icons/usage.mdx +++ b/src/pages/guidelines/icons/usage.mdx @@ -25,7 +25,7 @@ important information. @@ -35,7 +35,7 @@ important information. diff --git a/src/pages/guidelines/motion/overview.mdx b/src/pages/guidelines/motion/overview.mdx index b9fc573d704..f4e376beaa1 100644 --- a/src/pages/guidelines/motion/overview.mdx +++ b/src/pages/guidelines/motion/overview.mdx @@ -227,7 +227,7 @@ that it would come to rest just outside the view, and ready to be recalled. ### Summary on easing The -[IBM motion package](https://github.com/carbon-design-system/carbon/tree/main/packages/motion) +[IBM motion package](https://github.com/carbon-design-system/carbon/tree/v10/packages/motion) has the easing curves stored for fast access. This is the recommended method to call an easing curve and stay connected to receive any future updates. @@ -363,7 +363,7 @@ statically. diff --git a/src/pages/guidelines/pictograms/code.mdx b/src/pages/guidelines/pictograms/code.mdx index 84e7930420c..0e422e37281 100644 --- a/src/pages/guidelines/pictograms/code.mdx +++ b/src/pages/guidelines/pictograms/code.mdx @@ -128,7 +128,7 @@ browsers like Internet Explorer 11 by setting `focusable` to `true`. diff --git a/src/pages/guidelines/pictograms/usage.mdx b/src/pages/guidelines/pictograms/usage.mdx index 16ef73c4462..c8199086023 100644 --- a/src/pages/guidelines/pictograms/usage.mdx +++ b/src/pages/guidelines/pictograms/usage.mdx @@ -44,7 +44,7 @@ become an elegant addition to the IBM experience. ![Github Icon](../../../images/resource-cards/github.png) @@ -55,7 +55,7 @@ become an elegant addition to the IBM experience. @@ -67,7 +67,7 @@ become an elegant addition to the IBM experience. diff --git a/src/pages/guidelines/spacing/code.mdx b/src/pages/guidelines/spacing/code.mdx index 11374e62fa0..d61d6a5c025 100644 --- a/src/pages/guidelines/spacing/code.mdx +++ b/src/pages/guidelines/spacing/code.mdx @@ -78,7 +78,7 @@ proposing the new addition! diff --git a/src/pages/guidelines/themes/code.mdx b/src/pages/guidelines/themes/code.mdx index 3abdbbca0e7..fc228f0926c 100644 --- a/src/pages/guidelines/themes/code.mdx +++ b/src/pages/guidelines/themes/code.mdx @@ -143,7 +143,7 @@ import { diff --git a/src/pages/guidelines/themes/overview.mdx b/src/pages/guidelines/themes/overview.mdx index c1a7a091b1f..29e77c5b1d0 100755 --- a/src/pages/guidelines/themes/overview.mdx +++ b/src/pages/guidelines/themes/overview.mdx @@ -806,7 +806,7 @@ changing for each individual theme. diff --git a/src/pages/guidelines/typography/code.mdx b/src/pages/guidelines/typography/code.mdx index 93f71c1015e..0f12a8fc098 100644 --- a/src/pages/guidelines/typography/code.mdx +++ b/src/pages/guidelines/typography/code.mdx @@ -286,7 +286,7 @@ There is also a `type-scale` mixin that will set `font-size` for your directly: diff --git a/src/pages/guidelines/typography/overview.mdx b/src/pages/guidelines/typography/overview.mdx index 54b1d181d71..1cbe4231e77 100644 --- a/src/pages/guidelines/typography/overview.mdx +++ b/src/pages/guidelines/typography/overview.mdx @@ -206,7 +206,7 @@ for primary actions. @@ -216,7 +216,7 @@ for primary actions. diff --git a/src/pages/help/migration-guide/design.mdx b/src/pages/help/migration-guide/design.mdx index b96d923f640..97097adf512 100644 --- a/src/pages/help/migration-guide/design.mdx +++ b/src/pages/help/migration-guide/design.mdx @@ -84,7 +84,7 @@ added in v10. @@ -106,7 +106,7 @@ Wherever possible, replace old icons with an updated version. @@ -129,7 +129,7 @@ workflow. @@ -158,7 +158,7 @@ same. diff --git a/src/pages/help/migration-guide/develop.mdx b/src/pages/help/migration-guide/develop.mdx index eb192879866..ee208b6356d 100644 --- a/src/pages/help/migration-guide/develop.mdx +++ b/src/pages/help/migration-guide/develop.mdx @@ -25,7 +25,7 @@ Carbon code now lives in a monorepo. [Carbon-themes](https://github.com/carbon-design-system/carbon-themes) was deprecated in v10, and the themes package -[@carbon/themes](https://github.com/carbon-design-system/carbon/tree/main/packages/themes) +[@carbon/themes](https://github.com/carbon-design-system/carbon/tree/v10/packages/themes) now lives in the [Carbon](https://github.com/carbon-design-system/carbon) monorepo. @@ -33,7 +33,7 @@ monorepo. @@ -49,19 +49,19 @@ backwards compatibility in mind. Users of v9 should be able to upgrade to v10 automatically with minimal breakage. Detailed technical migration docs for Carbon components are available in the -[carbon-components repo](https://github.com/carbon-design-system/carbon/blob/main/packages/components/docs/migration/migrate-to-10.x.md). +[carbon-components repo](https://github.com/carbon-design-system/carbon/blob/v10/packages/components/docs/migration/migrate-to-10.x.md). Here you will find links to component-level migration information, as well as a list of those components that have been removed or are under development. There is also a dedicated -[Sass migration guide](https://github.com/carbon-design-system/carbon/blob/main/packages/components/src/globals/scss/migrate-to-10.x.md) +[Sass migration guide](https://github.com/carbon-design-system/carbon/blob/v10/packages/components/src/globals/scss/migrate-to-10.x.md) that covers changes to global styling. @@ -71,7 +71,7 @@ that covers changes to global styling. @@ -81,7 +81,7 @@ that covers changes to global styling. @@ -94,13 +94,13 @@ that covers changes to global styling. All technical migration docs for Carbon elements are available in the `carbon` monorepo -[docs folder](https://github.com/carbon-design-system/carbon/tree/main/docs/migration). +[docs folder](https://github.com/carbon-design-system/carbon/tree/v10/docs/migration). @@ -112,7 +112,7 @@ monorepo ### Icons The `@carbon/icons` package can be now be found in the -[Carbon monorepo](https://github.com/carbon-design-system/carbon/tree/main/packages/icons). +[Carbon monorepo](https://github.com/carbon-design-system/carbon/tree/v10/packages/icons). The [Carbon icons demo](https://carbon-elements.netlify.com/icons/examples/preview/) @@ -123,7 +123,7 @@ download links, quick links for filing issues, module name, and relative path. @@ -133,7 +133,7 @@ download links, quick links for filing issues, module name, and relative path. @@ -162,7 +162,7 @@ see automatic, non-breaking color updates when they upgrade to v10. @@ -201,7 +201,7 @@ architecture. @@ -228,7 +228,7 @@ Token names changed in v10 but spacing values did not. @@ -238,7 +238,7 @@ Token names changed in v10 but spacing values did not. @@ -266,7 +266,7 @@ coordinated with your product's design team. @@ -276,7 +276,7 @@ coordinated with your product's design team. diff --git a/src/pages/index.mdx b/src/pages/index.mdx index 5421beedf1b..f984fe85f7f 100755 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -63,7 +63,7 @@ building websites and user interfaces. @@ -85,7 +85,7 @@ building websites and user interfaces.