Merge branch 'main' of https://github.com/chanzuckerberg/sci-components…

… into prod

.storybook/main.js

@@ -1,3 +1,4 @@
+import { dirname, join } from "path";
 const { plugins } = require("axe-core");
 
 module.exports = {
@@ -11,19 +12,19 @@ module.exports = {
   },
 
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-a11y",
-    "@storybook/react",
-    "storybook-addon-pseudo-states",
-    "@geometricpanda/storybook-addon-badges",
-    "@storybook/addon-webpack5-compiler-swc",
-    "@chromatic-com/storybook",
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/react"),
+    getAbsolutePath("storybook-addon-pseudo-states"),
+    getAbsolutePath("@geometricpanda/storybook-addon-badges"),
+    getAbsolutePath("@storybook/addon-webpack5-compiler-swc"),
+    getAbsolutePath("@chromatic-com/storybook"),
   ],
 
   framework: {
-    name: "@storybook/react-webpack5",
+    name: getAbsolutePath("@storybook/react-webpack5"),
     options: {
       builder: {
         useSWC: true,
@@ -57,4 +58,10 @@ module.exports = {
   typescript: {
     reactDocgen: "react-docgen",
   },
+
+  docs: {},
 };
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}

.storybook/preview.js

@@ -38,6 +38,7 @@ const preview = {
       },
     },
   },
+
   parameters: {
     // Removes the change background button since it's controlled by the theme toggle
     backgrounds: { disable: true },
@@ -95,5 +96,7 @@ const preview = {
       },
     },
   },
+
+  tags: ["!autodocs"],
 };
 export default preview;

package.json

@@ -6,13 +6,13 @@
   "devDependencies": {
     "@chanzuckerberg/axe-storybook-testing": "^8.2.0",
     "@chanzuckerberg/story-utils": "^4.0.8",
-    "@chromatic-com/storybook": "^1",
+    "@chromatic-com/storybook": "^2.0.2",
     "@czi-sds/components": "workspace:^",
     "@czi-sds/data-viz": "workspace:^",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@geometricpanda/storybook-addon-badges": "^2.0.2",
+    "@geometricpanda/storybook-addon-badges": "^2.0.5",
     "@mui/base": "^5.0.0-beta.30",
     "@mui/icons-material": "^5.15.3",
     "@mui/lab": "^5.0.0-alpha.159",
@@ -22,21 +22,23 @@
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-url": "^8.0.2",
-    "@storybook/addon-a11y": "^8.2.9",
-    "@storybook/addon-actions": "^8.2.9",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-a11y": "^8.3.4",
+    "@storybook/addon-actions": "^8.3.4",
+    "@storybook/addon-essentials": "^8.3.4",
+    "@storybook/addon-interactions": "^8.3.4",
+    "@storybook/addon-links": "^8.3.4",
     "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
-    "@storybook/components": "^8.2.9",
-    "@storybook/core-events": "^8.2.9",
-    "@storybook/manager-api": "^8.2.9",
-    "@storybook/preview-api": "^8.2.9",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-webpack5": "^8.2.9",
-    "@storybook/test": "^8.2.9",
+    "@storybook/blocks": "^8.3.4",
+    "@storybook/components": "^8.3.4",
+    "@storybook/core-events": "^8.3.4",
+    "@storybook/manager-api": "^8.3.4",
+    "@storybook/preview-api": "^8.3.4",
+    "@storybook/react": "^8.3.4",
+    "@storybook/react-webpack5": "^8.3.4",
+    "@storybook/test": "^8.3.4",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.2.9",
+    "@storybook/theming": "^8.3.4",
+    "@storybook/types": "^8.3.4",
     "@svgr/rollup": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
     "@swc/plugin-emotion": "^4.0.1",
@@ -81,7 +83,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-sonarjs": "^0.23.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.9.0",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "lerna": "^8.0.1",
@@ -103,7 +105,7 @@
     "sass": "^1.70.0",
     "sass-loader": "^14.1.0",
     "simplex-noise": "^4.0.1",
-    "storybook": "^8.2.9",
+    "storybook": "^8.3.4",
     "storybook-addon-pseudo-states": "^4.0.2",
     "style-dictionary": "^4.1.0",
     "style-loader": "^3.3.4",

packages/components/src/common/warnings.ts

@@ -2,14 +2,15 @@ export enum SDSWarningTypes {
   ButtonMinimalIsAllCaps = "buttonMinimalIsAllCaps",
   ButtonMissingSDSProps = "buttonMissingProps",
   ButtonIconMissingIconProp = "buttonIconMissingIconProp",
+  ButtonToggleMissingIconProp = "buttonToggleMissingIconProp",
   ChipDeprecated = "chipDeprecated",
   MenuSelectDeprecated = "menuSelectDeprecated",
   TooltipSubtitle = "tooltipSubtitle",
   TooltipWidth = "tooltipWidth",
   TooltipInverted = "tooltipInverted",
 }
 
-const SDS_WARNINGS = {
+export const SDS_WARNINGS = {
   [SDSWarningTypes.ButtonMinimalIsAllCaps]: {
     hasWarned: false,
     message:
@@ -25,6 +26,10 @@ const SDS_WARNINGS = {
     message:
       "Warning: Buttons with an SDS type of icon require an icon prop to be provided.",
   },
+  [SDSWarningTypes.ButtonToggleMissingIconProp]: {
+    hasWarned: false,
+    message: "Warning: Button Toggles require an icon prop to be provided.",
+  },
   [SDSWarningTypes.ChipDeprecated]: {
     hasWarned: false,
     message: "Warning: <Chip /> will be deprecated and replaced with <Tag />",

packages/components/src/core/Accordion/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,18 +2,18 @@
 
 exports[`<Accordion /> Default story renders snapshot 1`] = `
 <div
-  class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-1b3fwwo-MuiPaper-root-MuiAccordion-root"
+  class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root MuiAccordion-gutters css-1z99gw-MuiPaper-root-MuiAccordion-root"
 >
   <div
     aria-controls="undefined-header-panel-content"
     aria-expanded="false"
-    class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters css-13li27m-MuiButtonBase-root-MuiAccordionSummary-root"
+    class="MuiButtonBase-root MuiAccordionSummary-root MuiAccordionSummary-gutters css-1q0jqld-MuiButtonBase-root-MuiAccordionSummary-root"
     id="undefined-header"
     role="button"
     tabindex="0"
   >
     <div
-      class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-o4b71y-MuiAccordionSummary-content"
+      class="MuiAccordionSummary-content MuiAccordionSummary-contentGutters css-eqpfi5-MuiAccordionSummary-content"
     >
       Accordion Header
     </div>

packages/components/src/core/Autocomplete/__storybook__/stories/singleColumn.tsx

@@ -48,7 +48,7 @@ export const AutocompleteSingleColumnDemo = <
   return (
     <>
       <div style={AUTOCOMPLETE_WRAPPER_STYLES}>
-        <AutocompleteBase
+        <AutocompleteBase<T, Multiple, FreeSolo, DisableClearable>
           id="autocomplete-base-demo"
           disableCloseOnSelect={multiple}
           label={label}

packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap

@@ -28,7 +28,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
           </span>
           <button
             aria-label="search-button"
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1b01nn3-MuiButtonBase-root-MuiIconButton-root"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-3px3eh-MuiButtonBase-root-MuiIconButton-root"
             icon="Search"
             tabindex="0"
             type="button"
@@ -86,7 +86,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
       </div>
     </div>
     <div
-      class="base-Popper-root css-v2msuu-MuiPopper-root"
+      class="MuiPopper-root css-v2msuu-MuiPopper-root"
       data-popper-escaped=""
       data-popper-placement="bottom-start"
       data-popper-reference-hidden=""
@@ -126,7 +126,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
           </p>
           <div
             aria-owns="autocomplete-demo-listbox"
-            class="MuiAutocomplete-root Mui-expanded MuiAutocomplete-hasPopupIcon css-1dvimkq-MuiAutocomplete-root"
+            class="MuiAutocomplete-root Mui-expanded MuiAutocomplete-hasPopupIcon css-1nl9kkd-MuiAutocomplete-root"
             label="Search by label"
           >
             <div
@@ -160,7 +160,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                     <button
                       aria-hidden="true"
                       aria-label="Search Button"
-                      class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-9z0etm-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-l19ret-MuiButtonBase-root-MuiIconButton-root"
                       disabled=""
                       icon="Search"
                       tabindex="-1"
@@ -225,7 +225,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
             </div>
           </div>
           <div
-            class="base-Popper-root MuiAutocomplete-popper MuiAutocomplete-popperDisablePortal css-1rndd9j-MuiPopper-root-MuiAutocomplete-popper"
+            class="MuiPopper-root MuiAutocomplete-popper MuiAutocomplete-popperDisablePortal css-1gsu57t-MuiPopper-root-MuiAutocomplete-popper"
             data-popper-escaped=""
             data-popper-placement="bottom"
             data-popper-reference-hidden=""
@@ -541,7 +541,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
           </p>
           <div
             aria-owns="autocomplete-demo-listbox"
-            class="MuiAutocomplete-root Mui-expanded MuiAutocomplete-hasPopupIcon css-1dvimkq-MuiAutocomplete-root"
+            class="MuiAutocomplete-root Mui-expanded MuiAutocomplete-hasPopupIcon css-1nl9kkd-MuiAutocomplete-root"
             label="Search by label"
           >
             <div
@@ -575,7 +575,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
                     <button
                       aria-hidden="true"
                       aria-label="Search Button"
-                      class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-9z0etm-MuiButtonBase-root-MuiIconButton-root"
+                      class="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeMedium css-l19ret-MuiButtonBase-root-MuiIconButton-root"
                       disabled=""
                       icon="Search"
                       tabindex="-1"
@@ -640,7 +640,7 @@ exports[`<Autocomplete /> ControlledOpen story renders snapshot 1`] = `
             </div>
           </div>
           <div
-            class="base-Popper-root MuiAutocomplete-popper MuiAutocomplete-popperDisablePortal css-1rndd9j-MuiPopper-root-MuiAutocomplete-popper"
+            class="MuiPopper-root MuiAutocomplete-popper MuiAutocomplete-popperDisablePortal css-1gsu57t-MuiPopper-root-MuiAutocomplete-popper"
             data-popper-escaped=""
             data-popper-placement="bottom"
             data-popper-reference-hidden=""
@@ -967,7 +967,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
   style="margin: 16px 0px 0px 24px; width: 274px;"
 >
   <div
-    class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-1os64xc-MuiAutocomplete-root"
+    class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-41z5h3-MuiAutocomplete-root"
     label="Search by label"
   >
     <div
@@ -1001,7 +1001,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
             <button
               aria-hidden="false"
               aria-label="Search Button"
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1b01nn3-MuiButtonBase-root-MuiIconButton-root"
+              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-3px3eh-MuiButtonBase-root-MuiIconButton-root"
               icon="Search"
               tabindex="0"
               type="button"

packages/components/src/core/Banner/__tests__/__snapshots__/banner.test.tsx.snap

@@ -31,7 +31,7 @@ exports[`<Banner /> Default story renders snapshot 1`] = `
   </div>
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-72jt6e-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-14btmof-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"

packages/components/src/core/Button/__storybook__/index.stories.tsx

@@ -73,7 +73,7 @@ export default {
   parameters: {
     badges: [BADGE.STABLE],
   },
-  title: "Components/Button",
+  title: "Components/Buttons/Button",
 } as Meta;
 
 // Default

packages/components/src/core/Button/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<button /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-19e712f-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-19e712f-MuiButtonBase-root-MuiButton-root"
   icon="Cube"
   tabindex="0"
   text="Label"

packages/components/src/core/ButtonDropdown/__storybook__/index.stories.tsx

@@ -45,7 +45,7 @@ export default {
   parameters: {
     badges: [BADGE.STABLE],
   },
-  title: "Components/ButtonDropdown",
+  title: "Components/Buttons/ButtonDropdown",
 } as Meta;
 
 // Default

packages/components/src/core/ButtonDropdown/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,13 +2,13 @@
 
 exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
 <button
-  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-cv2bs4-MuiButtonBase-root-MuiButton-root"
+  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-cv2bs4-MuiButtonBase-root-MuiButton-root"
   icon="Download"
   tabindex="0"
   type="button"
 >
   <span
-    class="MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
+    class="MuiButton-icon MuiButton-startIcon MuiButton-iconSizeMedium css-1d6wzja-MuiButton-startIcon"
   >
     <div
       class="css-1ft6wgl"
@@ -28,7 +28,7 @@ exports[`<ButtonDropdown /> Default story renders snapshot 1`] = `
   </span>
   Label
   <span
-    class="MuiButton-endIcon MuiButton-iconSizeMedium css-9tj150-MuiButton-endIcon"
+    class="MuiButton-icon MuiButton-endIcon MuiButton-iconSizeMedium css-9tj150-MuiButton-endIcon"
   >
     <div
       class="css-1ft6wgl"

packages/components/src/core/ButtonIcon/__tests__/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<ButtonIcon /> Default story renders snapshot 1`] = `
 <button
   aria-label="info"
-  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-zkd9l9-MuiButtonBase-root-MuiIconButton-root"
+  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1sh3t66-MuiButtonBase-root-MuiIconButton-root"
   icon="InfoCircle"
   tabindex="0"
   type="button"

packages/components/src/core/ButtonIcon/style.ts

@@ -123,6 +123,10 @@ const small = (props: ButtonIconExtraProps): SerializedStyles => {
   const spaces = getSpaces(props);
 
   return css`
+    ${sdsType !== "tertiary"
+      ? `margin: 0 ${spaces?.xxs}px ${spaces?.xxs}px 0;`
+      : ""}
+
     .MuiSvgIcon-root {
       height: ${iconSizes?.s.height}px;
       width: ${iconSizes?.s.width}px;
@@ -137,6 +141,10 @@ const medium = (props: ButtonIconExtraProps): SerializedStyles => {
   const spaces = getSpaces(props);
 
   return css`
+    ${sdsType !== "tertiary"
+      ? `margin: 0 ${spaces?.xxs}px ${spaces?.xxs}px 0;`
+      : ""}
+
     .MuiSvgIcon-root {
       height: ${iconSizes?.l.height}px;
       width: ${iconSizes?.l.width}px;
@@ -151,6 +159,10 @@ const large = (props: ButtonIconExtraProps): SerializedStyles => {
   const spaces = getSpaces(props);
 
   return css`
+    ${sdsType !== "tertiary"
+      ? `margin: 0 ${spaces?.s}px ${spaces?.s}px 0;`
+      : ""}
+
     .MuiSvgIcon-root {
       height: ${iconSizes?.xl.height}px;
       width: ${iconSizes?.xl.height}px;