refactor(tag): add sdsSize to tag and fix Dialog close button styles

chanzuckerberg · Mar 13, 2024 · df6e98a · df6e98a
1 parent b8e0283
commit df6e98a
Show file tree

Hide file tree

Showing 13 changed files with 193 additions and 59 deletions.
diff --git a/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 1`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1sghtpe-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1t24kd3-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -109,7 +109,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 4`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-fre2k7-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-13e5vfk-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -196,7 +196,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 7`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1f22o7g-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-d61xrp-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"
@@ -283,7 +283,7 @@ exports[`<Dialog /> Dialog all sizes match the snapshots 10`] = `
 >
   <button
     aria-label="Close"
-    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1f22o7g-MuiButtonBase-root-MuiIconButton-root"
+    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-d61xrp-MuiButtonBase-root-MuiIconButton-root"
     icon="XMark"
     tabindex="0"
     type="button"

diff --git a/packages/components/src/core/Dialog/components/DialogTitle/components/CloseButton/style.ts b/packages/components/src/core/Dialog/components/DialogTitle/components/CloseButton/style.ts
@@ -9,8 +9,7 @@ export const StyledButtonIcon = styled(ButtonIcon)`
     const spaces = getSpaces(props);
 
     return `
-      top: ${spaces?.xl || 0}px;
-      right: ${spaces?.xl || 0}px;
+      right: ${spaces?.xxl}px;
     `;
   }}
 `;
diff --git a/packages/components/src/core/MenuItem/__storybook__/constants.tsx b/packages/components/src/core/MenuItem/__storybook__/constants.tsx
@@ -20,7 +20,7 @@ export const MENU_ITEM_ICON_OPTIONS = [
 
 export const MENU_ITEM_MULTI_SELECT_OPTIONS = [false, true];
 export const MENU_ITEM_SDS_STYLE_OPTIONS = ["determinate", "indeterminate"];
-export const MENU_ITEM_COLUMN_OPTIONS = [undefined, "Column"];
+export const MENU_ITEM_COLUMN_OPTIONS = [undefined, "123"];
 /**
  * (thuang): Add `as const` to make sure the type is not widened to `string`
  * and cause type error in <RawMenuItem />

diff --git a/packages/components/src/core/MenuItem/__storybook__/index.stories.tsx b/packages/components/src/core/MenuItem/__storybook__/index.stories.tsx
@@ -55,10 +55,10 @@ export default {
 
 export const Default = {
   args: {
-    column: "column value here",
+    column: "123,456",
     disabled: false,
     isMultiSelect: false,
-    name: "text here",
+    name: "Text here",
     sdsIconProps: {
       color: "blue",
     },
@@ -71,7 +71,7 @@ export const Default = {
 
 export const ScreenshotTest = {
   args: {
-    name: "text here",
+    name: "Text here",
   },
   parameters: {
     axe: {
@@ -91,8 +91,8 @@ export const ScreenshotTest = {
 
 export const Test = {
   args: {
-    column: "test column",
-    name: "test text",
+    column: "123",
+    name: "Test text",
   },
   parameters: {
     controls: {

diff --git a/packages/components/src/core/MenuItem/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/MenuItem/__tests__/__snapshots__/index.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<MenuItem /> Default story renders snapshot 1`] = `
   <li
     class="MuiButtonBase-root MuiMenuItem-root MuiMenuItem-gutters MuiMenuItem-root MuiMenuItem-gutters css-pelx1i-MuiButtonBase-root-MuiMenuItem-root"
     data-testid="MenuItem"
-    name="text here"
+    name="Text here"
     role="menuitem"
     tabindex="-1"
   >
@@ -17,12 +17,12 @@ exports[`<MenuItem /> Default story renders snapshot 1`] = `
       <span
         class="primary-text css-1k1xg99"
       >
-        text here
+        Text here
       </span>
       <span
         class="css-1o15svb"
       >
-        column value here
+        123,456
       </span>
     </span>
     <span

diff --git a/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Table/__tests__/__snapshots__/index.test.tsx.snap
@@ -123,7 +123,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
             />
           </div>
           <div
-            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-oy8gnb-MuiChip-root"
+            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
           >
             <span
               class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -195,7 +195,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
         class="cell-component css-4umyx6"
       >
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-oy8gnb-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -204,7 +204,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           </span>
         </div>
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-oy8gnb-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -213,7 +213,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           </span>
         </div>
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-oy8gnb-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -222,7 +222,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           </span>
         </div>
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-oy8gnb-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -231,7 +231,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
           </span>
         </div>
         <div
-          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-oy8gnb-MuiChip-root"
+          class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
         >
           <span
             class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -287,7 +287,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
             />
           </div>
           <div
-            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-oy8gnb-MuiChip-root"
+            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
           >
             <span
               class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
@@ -518,7 +518,7 @@ exports[`<Table /> Default story renders snapshot 1`] = `
             />
           </div>
           <div
-            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-oy8gnb-MuiChip-root"
+            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-1npxd44-MuiChip-root"
           >
             <span
               class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"

diff --git a/packages/components/src/core/Tag/__storybook__/constants.tsx b/packages/components/src/core/Tag/__storybook__/constants.tsx
@@ -1,22 +1,34 @@
 import Icon from "src/core/Icon";
 import { ExtraTagProps } from "../style";
-import { CheckCircleOutline, WbSunny } from "@mui/icons-material";
+import { WbSunny } from "@mui/icons-material";
 
 export const TAG_EXCLUDED_CONTROLS = [
   "color",
   "hover",
   "label",
+  "sdsSize",
   "sdsStyle",
   "sdsType",
   "icon",
 ];
 
 export const TAG_ICONS = [
   undefined,
-  <Icon sdsSize="l" sdsIcon="CheckCircle" key="CheckCircle" sdsType="button" />,
+  <Icon
+    sdsSize="xs"
+    sdsIcon="CheckCircle"
+    key="CheckCircle"
+    sdsType="button"
+  />,
   <Icon sdsSize="l" sdsIcon="Loading" key="loading" sdsType="button" />,
   <WbSunny key="WBSunny" />,
-  <CheckCircleOutline key="CheckCircleOutline" />,
+];
+
+export const TAG_ICONS_LABELS = [
+  "No Icon",
+  "SDS Check Circle",
+  "SDS Loading",
+  "MUI WbSunny",
 ];
 
 export const TAG_SDS_STYLES: ExtraTagProps["sdsStyle"][] = [
@@ -54,7 +66,7 @@ export const TAG_LIVE_PREVIEW_STYLES = {
   display: "inline-grid",
   gridColumnGap: 24,
   gridRowGap: 24,
-  gridTemplateColumns: "repeat(3, auto)",
+  gridTemplateColumns: "repeat(6, auto)",
   gridTemplateRows: "repeat(2, auto)",
 };
 

diff --git a/packages/components/src/core/Tag/__storybook__/index.stories.tsx b/packages/components/src/core/Tag/__storybook__/index.stories.tsx
@@ -6,6 +6,7 @@ import {
   TAG_EXCLUDED_CONTROLS,
   TAG_HOVER_OPTIONS,
   TAG_ICONS,
+  TAG_ICONS_LABELS,
   TAG_PANEL_COLORS,
   TAG_SDS_STYLES,
   TAG_SDS_TYPES,
@@ -40,13 +41,7 @@ export default {
     },
     icon: {
       control: {
-        labels: [
-          "No Icon",
-          "SDS Check Circle",
-          "SDS Loading",
-          "MUI WbSunny",
-          "MUI Check Circle",
-        ],
+        labels: TAG_ICONS_LABELS,
         type: "select",
       },
       mapping: TAG_ICONS,
@@ -56,6 +51,10 @@ export default {
       control: { type: "text" },
       required: true,
     },
+    sdsSize: {
+      control: { type: "radio" },
+      options: ["s", "l"],
+    },
     sdsStyle: {
       control: { type: "radio" },
       options: ["rounded", "square"],
@@ -81,6 +80,7 @@ export const Default = {
   args: {
     hover: true,
     label: "Label",
+    sdsSize: "s",
     sdsStyle: "square",
     sdsType: "primary",
   },

diff --git a/packages/components/src/core/Tag/__storybook__/stories/default.tsx b/packages/components/src/core/Tag/__storybook__/stories/default.tsx
@@ -1,7 +1,22 @@
 import { Args } from "@storybook/react";
+import Callout from "src/core/Callout";
+import CalloutTitle from "src/core/Callout/components/CalloutTitle";
 import RawTag from "src/core/Tag";
 
 export const Tag = (props: Args): JSX.Element => {
-  const { label } = props;
-  return <RawTag label={label} {...props} />;
+  const { label, sdsSize, icon } = props;
+
+  if (sdsSize === "l" && !icon) {
+    return (
+      <Callout intent="negative">
+        <CalloutTitle>Invalid Props!</CalloutTitle>
+        <p>
+          The large-size tag must include an icon. Please choose an icon from
+          the controls section or switch the Tag size to small.
+        </p>
+      </Callout>
+    );
+  }
+
+  return <RawTag label={label} {...props} sdsSize={sdsSize} icon={icon} />;
 };