Merge branch 'main' into docs-status-indicator

package.json

@@ -37,24 +37,24 @@
     "/node_modules/*"
   ],
   "resolutions": {
-    "carbon-components": "^10.34.0",
-    "carbon-components-react": "^7.34.0",
-    "@carbon/elements": "^10.33.0",
-    "@carbon/icons": "^10.31.0",
-    "@carbon/icons-react": "^10.31.0",
+    "carbon-components": "^10.35.0",
+    "carbon-components-react": "^7.35.0",
+    "@carbon/elements": "^10.34.0",
+    "@carbon/icons": "^10.32.0",
+    "@carbon/icons-react": "^10.32.0",
     "gatsby-remark-images": "^3.3.33"
   },
   "dependencies": {
     "@carbon/charts-react": "0.41.62",
-    "@carbon/elements": "^10.33.0",
-    "@carbon/icons": "^10.31.0",
-    "@carbon/icons-react": "^10.31.0",
-    "@carbon/pictograms": "^11.9.0",
-    "@carbon/pictograms-react": "^11.9.0",
+    "@carbon/elements": "^10.34.0",
+    "@carbon/icons": "^10.32.0",
+    "@carbon/icons-react": "^10.32.0",
+    "@carbon/pictograms": "^11.10.0",
+    "@carbon/pictograms-react": "^11.10.0",
     "@loadable/component": "^5.12.0",
     "@slack/web-api": "^5.11.0",
-    "carbon-components": "^10.34.0",
-    "carbon-components-react": "^7.34.0",
+    "carbon-components": "^10.35.0",
+    "carbon-components-react": "^7.35.0",
     "change-case": "^4.1.1",
     "classnames": "^2.2.6",
     "codesandbox": "^2.1.10",

src/components/ColorPalette/ColorPalette.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { ContentSwitcher, Switch, Dropdown } from 'carbon-components-react';
 import cx from 'classnames';
 import {
@@ -85,37 +85,40 @@ const ColorPalette = ({ type, isMono, isDiverging }) => {
     },
   ];
 
-  const onDropdownChange = (e) => {
-    const id = e.selectedItem ? e.selectedItem.id : e;
-
-    // update selected option
-    setGroupNumber(id);
-
-    // update colors rendered
-    switch (id) {
-      case 1:
-        setColorGroup(oneColor);
-        break;
-      case 2:
-        setColorGroup(twoColor);
-        break;
-      case 3:
-        setColorGroup(threeColor);
-        break;
-      case 4:
-        setColorGroup(fourColor);
-        break;
-      case 5:
-        setColorGroup(fiveColor);
-        break;
-      default:
-    }
-  };
+  const onDropdownChange = useCallback(
+    (e) => {
+      const id = e.selectedItem ? e.selectedItem.id : e;
+
+      // update selected option
+      setGroupNumber(id);
+
+      // update colors rendered
+      switch (id) {
+        case 1:
+          setColorGroup(oneColor);
+          break;
+        case 2:
+          setColorGroup(twoColor);
+          break;
+        case 3:
+          setColorGroup(threeColor);
+          break;
+        case 4:
+          setColorGroup(fourColor);
+          break;
+        case 5:
+          setColorGroup(fiveColor);
+          break;
+        default:
+      }
+    },
+    [oneColor, twoColor, threeColor, fourColor, fiveColor]
+  );
 
   // Rerender color group values when theme is toggled
   useEffect(() => {
     onDropdownChange(groupNumber);
-  }, [dark]);
+  }, [groupNumber, onDropdownChange]);
 
   // SWITCHER STUFF
   const activateFirstSwitcher = () => {

src/components/ComponentDemo/ComponentDemo.module.scss

@@ -407,7 +407,11 @@ body[data-live-preview-theme='Gray 100'] ul[class^='bx--overflow-menu-options'],
   }
 
   [class*='--content-switcher-btn'] {
-    height: 2.5rem;
+    height: 100%;
+  }
+
+  [class*='--loading-overlay'] {
+    position: static;
   }
 
   [class*='--overflow-menu__icon'] {
@@ -435,7 +439,7 @@ body[data-live-preview-theme='Gray 100'] ul[class^='bx--overflow-menu-options'],
 }
 
 body {
-  [class$='--tooltip'] {
+  [class$='bx--tooltip'] {
     background-color: var(--cds-inverse-02, #393939);
   }
 

src/components/ComponentDemo/KnobContainer.js

@@ -135,6 +135,7 @@ const Knob = ({
   // eslint-disable-next-line no-useless-escape
   const pattern = `<${component}(\\s?>|\\s[\\s\\S]*?>)`;
   const componentPropsRegex = new RegExp(pattern);
+  const globalComponentPropsRegex = new RegExp(componentPropsRegex.source, 'g');
 
   // stores whatever props are provided in the inital code
   const defaultKnobProps = useDefaultProps(
@@ -176,10 +177,12 @@ const Knob = ({
     setKnobs(newKnobs);
     if (isSelfClosingTag) {
       setCode(
-        code.replace(componentPropsRegex, `<${component}${propString} />`)
+        code.replace(globalComponentPropsRegex, `<${component}${propString} />`)
       );
     } else {
-      setCode(code.replace(componentPropsRegex, `<${component}${propString}>`));
+      setCode(
+        code.replace(globalComponentPropsRegex, `<${component}${propString}>`)
+      );
     }
   };
 

src/components/ComponentIndexPage/index.js

@@ -58,8 +58,8 @@ const sortOptions = ['A to Z', 'Maintainer', 'Newest'];
 const initialSortOption = 'A to Z';
 const sortBy = {
   'A to Z': sortByName,
-  'Maintainer': sortByMaintainer,
-  'Newest': sortByNewest,
+  Maintainer: sortByMaintainer,
+  Newest: sortByNewest,
 };
 
 const filterLabels = [

src/components/data-visualization/ChartDemoGroup.js

@@ -4,13 +4,8 @@ import * as ChartComponents from '@carbon/charts-react';
 
 import H2 from 'gatsby-theme-carbon/src/components/markdown/H2';
 import P from 'gatsby-theme-carbon/src/components/markdown/P';
+import { MiniCard } from 'gatsby-theme-carbon/src/components/MiniCard';
 import CodeBar from '../ComponentDemo/Code/CodeBar.js';
-
-import {
-  CardGroup,
-  MiniCard,
-} from 'gatsby-theme-carbon/src/components/MiniCard';
-
 import STORYBOOK_LOGO from '../../images/storybook-icon.svg';
 
 const generateHeadingID = (title) =>
@@ -22,7 +17,7 @@ const generateHeadingID = (title) =>
 const ChartDemoGroup = ({ demoGroup, light }) => {
   let demo = demoGroup.demos.find((d) => d.mainDemo === true);
   if (!demo) {
-    demo = demoGroup.demos[0];
+    [demo] = demoGroup.demos;
   }
 
   const DemoComponent = ChartComponents[demo.chartType.vanilla];
@@ -84,7 +79,7 @@ const ChartDemoGroup = ({ demoGroup, light }) => {
               numberOfRemainingDemos > 1 ? 's' : ''
             }`}
             href={`https://carbon-design-system.github.io/carbon-charts/?path=/story/${demoGroupClassification}-charts-${demo.id}`}>
-            <img src={STORYBOOK_LOGO} style={{ height: 20 }} />
+            <img src={STORYBOOK_LOGO} alt="" style={{ height: 20 }} />
           </MiniCard>
         )}
       </>

src/data/docgen/react-docgen.json

@@ -916,7 +916,8 @@
           "name": "enum",
           "value": [
             { "value": "'sm'", "computed": false },
-            { "value": "'xl'", "computed": false }
+            { "value": "'md'", "computed": false },
+            { "value": "'lg'", "computed": false }
           ]
         },
         "required": false,
@@ -2021,11 +2022,12 @@
           "name": "enum",
           "value": [
             { "value": "'sm'", "computed": false },
+            { "value": "'md'", "computed": false },
             { "value": "'xl'", "computed": false }
           ]
         },
         "required": false,
-        "description": "Specify the size of the Date Picker Input. Currently supports either `sm` or `xl` as an option."
+        "description": "Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `xl` as an option."
       }
     }
   },
@@ -3014,7 +3016,7 @@
         "description": "Specify whether you want the loading indicator to be spinning or not"
       },
       "withOverlay": {
-        "defaultValue": { "value": "true", "computed": false },
+        "defaultValue": { "value": "false", "computed": false },
         "type": { "name": "bool" },
         "required": false,
         "description": "Specify whether you want the loader to be applied with an overlay"

src/data/nav-items.yaml

@@ -16,6 +16,19 @@
       path: /case-studies/consistency-in-the-cloud
     - title: IBM Commerce Platform
       path: /case-studies/ibm-commerce-platform
+- title: What’s happening
+  pages:
+    - title: Releases
+      path: /whats-happening/releases/
+    - title: The v11 release
+      path: /whats-happening/v11-release/
+    - title: News and articles
+      path: /whats-happening/news-and-articles/
+    - title: Meetups
+      path: /whats-happening/meetups/
+    - title: Work in progress
+      path: /whats-happening/work-in-progress/
+  hasDivider: true
 - title: Designing
   pages:
     - title: Get started
@@ -58,18 +71,6 @@
       path: /contributing/contribute-pictograms/
     - title: Add ons
       path: /contributing/add-ons/
-- title: What’s happening
-  pages:
-    - title: Releases
-      path: /whats-happening/releases/
-    - title: The v11 release
-      path: /whats-happening/v11-release/
-    - title: News and articles
-      path: /whats-happening/news-and-articles/
-    - title: Meetups
-      path: /whats-happening/meetups/
-    - title: Work in progress
-      path: /whats-happening/work-in-progress/
   hasDivider: true
 - title: Guidelines
   pages:

src/pages/all-about-carbon/the-team.mdx

@@ -1,20 +1,20 @@
 ---
 title: The Carbon team
 description:
-  Carbon is funded and built by IBM. That means we build for the company’s
-  business needs. Carbon is also an open source community-driven project. It is
-  available for anyone to use and everyone is encouraged to contribute.
+  Carbon’s designers, developers, and writers provide teams with universal
+  assets—elements, components, patterns, and code—and the guidance for how to
+  design and build with them.
 ---
 
 <PageDescription>
 
-Carbon supports its users with a dedicated team of designers, developers, and
-writers working closely to support teams across the business to be productive
-and successful in designing digital experiences and products.
+Carbon’s designers, developers, and writers provide teams with universal
+assets—elements, components, patterns, and code—and the guidance for how to
+design and build with them.
 
 </PageDescription>
 
-## The people
+## Design system
 
 <Row>
 
@@ -113,6 +113,7 @@ and successful in designing digital experiences and products.
 ![Jeannie Servaas headshot](/images/team/servaas_jean.png)
 
 </Profile>
+
 <Profile name="Scott Strubberg" title="Front-end Developer">
 
 ![Scott Strubberg headshot](/images/team/strubberg_scott.png)
@@ -124,3 +125,39 @@ and successful in designing digital experiences and products.
 
 </Profile>
 </Row>
+
+## Data visualization
+
+<Row>
+
+<Profile name="Natasha Decoste" title="Software Developer">
+
+![Natasha Decoste headshot](/images/team/decoste_natasha.png)
+
+</Profile>
+<Profile name="Zvonimir Fras" title="Software Developer">
+
+![Zvonimir Fras headshot](/images/team/fras_zvonimir.png)
+
+</Profile>
+<Profile name="Nina Li" title="Project Manager">
+
+![Nina Li headshot](/images/team/li_nina.png)
+
+</Profile>
+<Profile name="Eliad Moosavi" title="Senior Software Developer, Technical Lead">
+
+![Eliad Moosavi headshot](/images/team/moosavi_eliad.png)
+
+</Profile>
+<Profile name="Cal Smith" title="Angular Technical Lead">
+
+![Cal Smith headshot](/images/team/smith_cal.png)
+
+</Profile>
+<Profile name="Dean Williams" title="Senior Development Manager">
+
+![Dean Williams headshot](/images/team/williams_dean.png)
+
+</Profile>
+</Row>

src/pages/community/domain-guidance.mdx

@@ -1,15 +1,16 @@
 ---
 title: Domain guidance
 description:
-  These sites within the Carbon community include guidance, assets, and resources for all of IBM's digital
-  experiences from product to website. Some guidance is accessible to IBMers
-  only.
+  These sites within the Carbon community include guidance, assets, and
+  resources for all of IBM's digital experiences from product to website. Some
+  guidance is accessible to IBMers only.
 ---
 
 <PageDescription>
 
-These sites within the Carbon community include guidance, assets, and resources for all of IBM's digital
-experiences from product to website. Some guidance is accessible to IBMers only.
+These sites within the Carbon community include guidance, assets, and resources
+for all of IBM's digital experiences from product to website. Some guidance is
+accessible to IBMers only.
 
 </PageDescription>