chore(project): update to carbon v11.0.0

package.json

@@ -40,10 +40,10 @@
   "dependencies": {
     "@babel/core": "^7.15.8",
     "@carbon/charts-react": "0.55.0",
-    "@carbon/elements": "^10.55.0",
-    "@carbon/pictograms": "^11.24.0",
-    "@carbon/pictograms-react": "^11.25.0",
-    "@carbon/react": "^0.17.0",
+    "@carbon/elements": "^11.0.0-rc.0",
+    "@carbon/pictograms": "^12.0.0-rc.0",
+    "@carbon/pictograms-react": "^11.26.0-rc.0",
+    "@carbon/react": "^1.0.0-rc.0",
     "@loadable/component": "^5.15.2",
     "@slack/web-api": "^5.11.0",
     "babel-preset-env": "^1.7.0",
@@ -56,9 +56,9 @@
     "gatsby": "^4.9.2",
     "gatsby-image": "^3.7.1",
     "gatsby-plugin-image": "^2.9.0",
-    "gatsby-theme-carbon": "^3.0.0-next.7",
+    "gatsby-theme-carbon": "^3.0.0-next.8",
     "lodash-es": "^4.17.15",
-    "markdown-it": "^9.0.1",
+    "markdown-it": "^12.3.2",
     "nanoid": "^2.1.11",
     "prettier-config-carbon": "^0.4.0",
     "prop-types": "^15.7.2",

src/components/ChartIndexPage/index.js

@@ -148,11 +148,11 @@ function ChartIndexPage() {
         lg={9}
         className="component-index-container cds--no-gutter">
         <ChartIndexSearch value={searchValue} onChange={setSearchValue} />
-        <ChartIndexSort
+        {/* <ChartIndexSort
           initialSortOption={initialSortOption}
           options={sortOptions}
           onChange={setActiveSortOption}
-        />
+        /> */}
         {results}
       </Column>
       <Column sm={0} md={2} lg={3} className="component-index-filter-container">

src/components/ColorPalette/ColorPalette.js

@@ -183,7 +183,7 @@ const ColorPalette = ({
             <Switch text={switcherOne} onClick={activateFirstSwitcher} />
             <Switch text={switcherTwo} onClick={activateSecondSwitcher} />
           </ContentSwitcher>
-          {type === 'grouped' && (
+          {/* {type === 'grouped' && (
             <Dropdown
               label="Color group selection"
               id="color-group-dropdown"
@@ -193,7 +193,7 @@ const ColorPalette = ({
               selectedItem={dropdownItems[groupNumber - 1]}
               initialSelectedItem={dropdownItems[0]}
             />
-          )}
+          )} */}
         </div>
       )}
 
@@ -204,7 +204,7 @@ const ColorPalette = ({
               <div className={groupOption}>Option {index + 1}</div>
               {i.map((j, jIndex) => (
                 <ColorPaletteColor
-                  key={`${j.name}-${index}-${j.index}`}
+                  key={`${type}-${j.name}-${index}-${j.index}`}
                   index={jIndex}
                   lightText={j.light}
                   hex={j.hex}
@@ -220,7 +220,7 @@ const ColorPalette = ({
         <PalettesContainer dark={dark} type={type} twoColumn={twoColumn}>
           {colors.map((i, index) => (
             <ColorPaletteColor
-              key={`${i.name}-${index}-${i.index}`}
+              key={`${type}-${i.name}-${index}-${i.index}`}
               isNumbered
               index={index}
               lightText={i.light}
@@ -242,7 +242,7 @@ const ColorPalette = ({
               <div className={groupOption}>Option {index + 1}</div>
               {i.data.map((j, jIndex) => (
                 <ColorPaletteColor
-                  key={`${j.name - jIndex}`}
+                  key={`${type}-${i.color}-${index}-${jIndex}`}
                   index={jIndex}
                   lightText={j.light}
                   hex={j.hex}

src/components/ComponentDemo/ComponentDemo.js

@@ -96,7 +96,7 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
     <ErrorBoundary>
       <div className={cx({ [fullscreen]: isFullscreen })}>
         <Row className={dropdownRow}>
-          <Dropdown
+          {/* <Dropdown
             onChange={onThemeChange}
             itemToString={(item) =>
               isMobile ? item.replace('ray ', '') : item
@@ -119,7 +119,7 @@ const ComponentDemo = ({ children, src, scope, noInline, components }) => {
             className={cx(variantDropdown, {
               [hiddenDropdown]: childrenArray.length === 1,
             })}
-          />
+          /> */}
           {isFullscreen && (
             <button
               type="button"

src/components/ComponentDemo/KnobContainer.js

@@ -162,7 +162,6 @@ const Knob = ({
     const propString = parsedKnobProps.concat(
       Object.entries(newKnobs[component]).reduce(
         (accumulator, [prop, value]) => {
-
           if (!value || value === `'default'`) {
             return accumulator;
           }
@@ -175,7 +174,6 @@ const Knob = ({
       )
     );
 
-
     setKnobs(newKnobs);
     if (isSelfClosingTag) {
       setCode(
@@ -259,7 +257,6 @@ const KnobContainer = ({ knobs, code, setCode, initialCode, variantId }) => {
       return [component, []];
     }
 
-
     knobs[component].forEach((knob) => {
       const prop = fullComponent.props[knob];
       if (prop && prop.type) {

src/components/ComponentIndexPage/component-index.scss

@@ -169,6 +169,9 @@
     color: $text-01;
   }
 }
+.component-index-item__tag--maintainer span.cds--tooltip {
+  background: none;
+}
 
 //----------------------------------------------------------------------------
 // Component Index Not Found

src/components/ComponentIndexPage/index.js

@@ -149,11 +149,11 @@ function ComponentIndexPage() {
         lg={9}
         className="component-index-container cds--no-gutter">
         <ComponentIndexSearch value={searchValue} onChange={setSearchValue} />
-        <ComponentIndexSort
+        {/* <ComponentIndexSort
           initialSortOption={initialSortOption}
           options={sortOptions}
           onChange={setActiveSortOption}
-        />
+        /> */}
         {results}
       </Column>
       <Column sm={0} md={2} lg={3} className="component-index-filter-container">

src/components/ComponentOverview/component-overview.scss

@@ -111,7 +111,7 @@ $hover-ui: #e5e5e5;
 }
 
 .component-name {
-  @include type-style('caption-01');
+  @include type-style('label-01');
   color: $text-01;
   text-decoration: none;
   text-align: left;

src/components/OverviewCard/overview-card.scss

@@ -29,7 +29,7 @@
 }
 
 .overview-card__title {
-  @include type-style('caption-01');
+  @include type-style('label-01');
   text-decoration: none;
   color: $text-01;
   position: relative;

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"
         />
       ) : (
         <div className={svgLibrary}>

src/components/SVGLibraries/PictogramLibrary/PictogramCategory.js

@@ -16,20 +16,31 @@ import {
 
 const IconCategory = ({ category, pictograms, columnCount }) => {
   const [sectionRef, containerIsVisible] = useIntersectionObserver();
+
   return (
     <section ref={sectionRef} className={svgCategory}>
       <h2 className={cx(h2, categoryTitle)}>{category}</h2>
       <ul className={cx(svgGrid, pictogramList)}>
-        {pictograms.map((pictogram, i) => (
-          <SvgCard
-            isLastCard={(i + 1) % columnCount === 0}
-            containerIsVisible={containerIsVisible}
-            key={pictogram.name}
-            icon={pictogram}
-            height="23.5%"
-            width="23.5%"
-          />
-        ))}
+        {pictograms
+          .filter((pictogram) => {
+            if (
+              pictogram.name === 'ibm--z' ||
+              pictogram.name === 'ibm--z--partition'
+            ) {
+              return false;
+            }
+            return true;
+          })
+          .map((pictogram, i) => (
+            <SvgCard
+              isLastCard={(i + 1) % columnCount === 0}
+              containerIsVisible={containerIsVisible}
+              key={pictogram.name}
+              icon={pictogram}
+              height="23.5%"
+              width="23.5%"
+            />
+          ))}
       </ul>
     </section>
   );

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"
         />
       ) : (
         <div className={svgLibrary}>

src/components/SVGLibraries/shared/FilterRow.js

@@ -29,7 +29,7 @@ const FilterRow = ({
         placeHolderText={placeHolderText}
         size="lg"
       />
-      <Dropdown
+      {/* <Dropdown
         className={dropdown}
         id="category-filter"
         size="md"
@@ -38,7 +38,7 @@ const FilterRow = ({
         onChange={onDropdownChange}
         label={`Filter ${type}s by category`}
         items={[`All ${type}s`, ...categoryList]}
-      />
+      /> */}
     </div>
   );
 };

src/components/TypeScaleTable/type-scale-table.scss

@@ -25,7 +25,7 @@ $type-scale: 0.75rem, 0.875rem, 1rem, 1.125rem, 1.25rem, 1.5rem, 1.75rem, 2rem,
   }
 
   table thead th {
-    @include type-style('caption-01');
+    @include type-style('label-01');
     border: none;
     color: $text-02;
     padding: $spacing-05 0;

src/components/TypeWeight/TypeWeight.js

@@ -14,7 +14,7 @@ export default class TypeWeight extends React.Component {
       return (
         <div className="cds--row">
           <div className="cds--col-lg-8 cds--col-md-6 type-weight">
-            <div dangerouslySetInnerHTML={{ __html: typeTypes }} />
+            <div dangerouslySetInnerHTML={{ __html: typeTypes.default }} />
           </div>
         </div>
       );
@@ -24,7 +24,9 @@ export default class TypeWeight extends React.Component {
       return (
         <div className="cds--row">
           <div className="cds--col-lg-8 cds--col-md-6 type-weight">
-            <div dangerouslySetInnerHTML={{ __html: typeWeightItalic }} />
+            <div
+              dangerouslySetInnerHTML={{ __html: typeWeightItalic.default }}
+            />
           </div>
         </div>
       );
@@ -33,7 +35,7 @@ export default class TypeWeight extends React.Component {
     return (
       <div className="cds--row">
         <div className="cds--col-lg-8 cds--col-md-6 type-weight">
-          <div dangerouslySetInnerHTML={{ __html: typeWeight }} />
+          <div dangerouslySetInnerHTML={{ __html: typeWeight.default }} />
         </div>
       </div>
     );

src/components/TypesetStyle/typeset-example.scss

@@ -52,7 +52,7 @@
 
 .cds--typeset-example-specs {
   padding: $spacing-05 $spacing-06;
-  
+
   @include breakpoint('md') {
     width: 33.3%;
     border-left: 1px solid $gray-20;

src/data/nav-items.yaml

@@ -146,6 +146,8 @@
       path: /components/pagination/usage/
     - title: Popover
       path: /components/popover/usage/
+    - title: Progress bar
+      path: /components/progress-bar/usage/
     - title: Progress indicator
       path: /components/progress-indicator/usage/
     - title: Radio button