From df6e98af8ebb6afd580b30e3a5e87f3e0e495583 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Wed, 13 Mar 2024 17:09:07 -0400
Subject: [PATCH] refactor(tag): add sdsSize to tag and fix Dialog close button
 styles

---
 .../__snapshots__/index.test.tsx.snap         |  8 +-
 .../components/CloseButton/style.ts           |  3 +-
 .../core/MenuItem/__storybook__/constants.tsx |  2 +-
 .../MenuItem/__storybook__/index.stories.tsx  | 10 +-
 .../__snapshots__/index.test.tsx.snap         |  6 +-
 .../__snapshots__/index.test.tsx.snap         | 16 ++--
 .../src/core/Tag/__storybook__/constants.tsx  | 20 +++-
 .../core/Tag/__storybook__/index.stories.tsx  | 14 +--
 .../Tag/__storybook__/stories/default.tsx     | 19 +++-
 .../Tag/__storybook__/stories/livePreview.tsx | 96 +++++++++++++++++--
 .../__snapshots__/index.test.tsx.snap         |  2 +-
 packages/components/src/core/Tag/style.ts     | 54 ++++++++---
 .../__snapshots__/index.test.tsx.snap         |  2 +-
 13 files changed, 193 insertions(+), 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
index b2865c5a3..9580b237c 100644
--- 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
index dc50c4073..f729e6a82 100644
--- 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
index 7ece2b942..677e4dca7 100644
--- 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
index 0d5e6a911..545a965a8 100644
--- 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
index 3bb0c0490..66e594c14 100644
--- 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
index c3e5dc7d1..ce5bbd613 100644
--- 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
index ce347c7f6..57baf24bf 100644
--- a/packages/components/src/core/Tag/__storybook__/constants.tsx
+++ b/packages/components/src/core/Tag/__storybook__/constants.tsx
@@ -1,11 +1,12 @@
 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",
@@ -13,10 +14,21 @@ export const TAG_EXCLUDED_CONTROLS = [
 
 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
index e12465b40..b3ae9ce65 100644
--- 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
index d4915006d..b5a0fae45 100644
--- 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} />;
 };
diff --git a/packages/components/src/core/Tag/__storybook__/stories/livePreview.tsx b/packages/components/src/core/Tag/__storybook__/stories/livePreview.tsx
index de4cbfbd7..f867f93a3 100644
--- a/packages/components/src/core/Tag/__storybook__/stories/livePreview.tsx
+++ b/packages/components/src/core/Tag/__storybook__/stories/livePreview.tsx
@@ -4,10 +4,12 @@ import { TAG_LIVE_PREVIEW_STYLES } from "../constants";
 import Icon from "src/core/Icon";
 
 export const LivePreviewDemo = (props: Args): JSX.Element => {
-  const { color, icon, label } = props;
+  const { color, label } = props;
 
   return (
     <div style={TAG_LIVE_PREVIEW_STYLES as React.CSSProperties}>
+      {/* First Row Start */}
+      {/* Small - Square -Primary - No Icon */}
       <div>
         <RawTag
           {...props}
@@ -19,6 +21,7 @@ export const LivePreviewDemo = (props: Args): JSX.Element => {
         />
       </div>
 
+      {/* Small - Square - Secondary - No Icon */}
       <div>
         <RawTag
           {...props}
@@ -30,19 +33,59 @@ export const LivePreviewDemo = (props: Args): JSX.Element => {
         />
       </div>
 
+      {/* Small - Square - Primary - With Icon */}
       <div>
         <RawTag
           {...props}
           color={color}
-          icon={
-            icon || <Icon sdsSize="l" sdsIcon="CheckCircle" sdsType="button" />
-          }
+          icon={<Icon sdsSize="xs" sdsIcon="CheckCircle" sdsType="button" />}
+          label={label}
+          sdsStyle="square"
+          sdsType="primary"
+        />
+      </div>
+
+      {/* Small - Square - Secondary - With Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          icon={<Icon sdsSize="xs" sdsIcon="CheckCircle" sdsType="button" />}
+          label={label}
+          sdsStyle="square"
+          sdsType="secondary"
+        />
+      </div>
+
+      {/* Large - Square - Primary - With Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          label={label}
+          icon={<Icon sdsSize="l" sdsIcon="CheckCircle" sdsType="button" />}
+          sdsStyle="square"
+          sdsType="primary"
+          sdsSize="l"
+        />
+      </div>
+
+      {/* Large - Square - Secondary - With Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          icon={<Icon sdsSize="l" sdsIcon="CheckCircle" sdsType="button" />}
           label={label}
           sdsStyle="square"
           sdsType="secondary"
+          sdsSize="l"
         />
       </div>
+      {/* First Row End */}
 
+      {/* Second Row Start */}
+      {/* Small - Rounded -Primary - No Icon */}
       <div>
         <RawTag
           {...props}
@@ -54,6 +97,7 @@ export const LivePreviewDemo = (props: Args): JSX.Element => {
         />
       </div>
 
+      {/* Small - Rounded - Secondary - No Icon */}
       <div>
         <RawTag
           {...props}
@@ -65,18 +109,56 @@ export const LivePreviewDemo = (props: Args): JSX.Element => {
         />
       </div>
 
+      {/* Small - Rounded - Primary - With Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          icon={<Icon sdsSize="xs" sdsIcon="CheckCircle" sdsType="button" />}
+          label={label}
+          sdsStyle="rounded"
+          sdsType="primary"
+        />
+      </div>
+
+      {/* Small - Rounded - Secondary - With Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          icon={<Icon sdsSize="xs" sdsIcon="CheckCircle" sdsType="button" />}
+          label={label}
+          sdsStyle="rounded"
+          sdsType="secondary"
+        />
+      </div>
+
+      {/* Large - Rounded - Primary - With Icon */}
+      <div>
+        <RawTag
+          {...props}
+          color={color}
+          label={label}
+          icon={<Icon sdsSize="l" sdsIcon="CheckCircle" sdsType="button" />}
+          sdsStyle="rounded"
+          sdsType="primary"
+          sdsSize="l"
+        />
+      </div>
+
+      {/* Large - Rounded - Secondary - With Icon */}
       <div>
         <RawTag
           {...props}
           color={color}
-          icon={
-            icon || <Icon sdsSize="l" sdsIcon="CheckCircle" sdsType="button" />
-          }
+          icon={<Icon sdsSize="l" sdsIcon="CheckCircle" sdsType="button" />}
           label={label}
           sdsStyle="rounded"
           sdsType="secondary"
+          sdsSize="l"
         />
       </div>
+      {/* Second Row End */}
     </div>
   );
 };
diff --git a/packages/components/src/core/Tag/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Tag/__tests__/__snapshots__/index.test.tsx.snap
index 37348240f..0d3c25b4f 100644
--- a/packages/components/src/core/Tag/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/Tag/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<Tag /> Default story renders snapshot 1`] = `
 <div
-  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-rohzmt-MuiChip-root"
+  class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-filledPrimary css-9gm3k1-MuiChip-root"
 >
   <span
     class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
diff --git a/packages/components/src/core/Tag/style.ts b/packages/components/src/core/Tag/style.ts
index ab5c84fed..ac43ad0e9 100644
--- a/packages/components/src/core/Tag/style.ts
+++ b/packages/components/src/core/Tag/style.ts
@@ -24,15 +24,26 @@ export type SdsTagColorType =
   | "beta"
   | [string, string]
   | [string, string, string];
-export interface ExtraTagProps extends CommonThemeProps {
+
+interface ExtraSmallTagProps extends CommonThemeProps {
   hover?: boolean;
   sdsType?: "primary" | "secondary";
   sdsStyle?: "square" | "rounded";
+  sdsSize?: "s";
   tagColor?: SdsTagColorType;
   icon?: JSX.Element;
 }
+interface ExtraLargeTagProps extends CommonThemeProps {
+  hover?: boolean;
+  sdsType?: "primary" | "secondary";
+  sdsStyle?: "square" | "rounded";
+  sdsSize?: "l";
+  tagColor?: SdsTagColorType;
+  icon: JSX.Element;
+}
+export type ExtraTagProps = ExtraSmallTagProps | ExtraLargeTagProps;
 
-const withoutIcon = (props: ExtraTagProps): SerializedStyles => {
+const tagSizeS = (props: ExtraTagProps): SerializedStyles => {
   const spaces = getSpaces(props);
   const iconSizes = getIconSizes(props);
 
@@ -45,6 +56,13 @@ const withoutIcon = (props: ExtraTagProps): SerializedStyles => {
       padding: 0;
     }
 
+    .MuiSvgIcon-root {
+      height: ${iconSizes?.xs.height}px;
+      width: ${iconSizes?.xs.width}px;
+      padding-right: ${spaces?.xxs}px;
+      margin: 0 0 0 -${spaces?.xxxs}px;
+    }
+
     .MuiChip-deleteIcon {
       ${fontHeaderXs(props)}
       color: white;
@@ -55,7 +73,7 @@ const withoutIcon = (props: ExtraTagProps): SerializedStyles => {
   `;
 };
 
-const withIcon = (props: ExtraTagProps): SerializedStyles => {
+const tagSizeL = (props: ExtraTagProps): SerializedStyles => {
   const spaces = getSpaces(props);
   const iconSizes = getIconSizes(props);
 
@@ -89,13 +107,14 @@ const rounded = (props: ExtraTagProps): SerializedStyles => {
   const corners = getCorners(props);
   const spaces = getSpaces(props);
 
-  const { icon } = props;
+  const { sdsSize = "s", icon } = props;
+
+  const topBottomPadding =
+    sdsSize === "s" ? spaces?.xxxs : icon ? spaces?.xxs : spaces?.xs;
 
   return css`
     border-radius: ${corners?.l}px;
-    padding: ${icon
-      ? `${spaces?.xxs}px ${spaces?.s}px ${spaces?.xxs}px ${spaces?.xs}px`
-      : `${spaces?.xxxs}px ${spaces?.s}px`};
+    padding: ${topBottomPadding}px ${spaces?.s}px;
 
     &:after {
       border-radius: ${corners?.l}px;
@@ -107,13 +126,14 @@ const square = (props: ExtraTagProps): SerializedStyles => {
   const corners = getCorners(props);
   const spaces = getSpaces(props);
 
-  const { icon } = props;
+  const { sdsSize = "s", icon } = props;
+
+  const topBottomPadding =
+    sdsSize === "s" ? spaces?.xxxs : icon ? spaces?.xxs : spaces?.xs;
 
   return css`
     border-radius: ${corners?.m}px;
-    padding: ${icon
-      ? `${spaces?.xxs}px ${spaces?.s}px ${spaces?.xxs}px ${spaces?.xs}px`
-      : `${spaces?.xxxs}px ${spaces?.s}px`};
+    padding: ${topBottomPadding}px ${spaces?.s}px;
 
     &:after {
       border-radius: ${corners?.m}px;
@@ -274,7 +294,13 @@ const typeToCss = {
   secondary,
 };
 
-const doNotForwardProps = ["sdsType", "sdsStyle", "tagColor", "hover"];
+const doNotForwardProps = [
+  "sdsType",
+  "sdsStyle",
+  "sdsSize",
+  "tagColor",
+  "hover",
+];
 
 export const StyledTag = styled(Chip, {
   shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string),
@@ -282,13 +308,13 @@ export const StyledTag = styled(Chip, {
   border: none;
 
   ${(props: ExtraTagProps) => {
-    const { hover = true, sdsType, sdsStyle, icon } = props;
+    const { hover = true, sdsType, sdsStyle, sdsSize = "s" } = props;
 
     const isRounded = sdsStyle === "rounded";
     const type = sdsType || "primary";
 
     return css`
-      ${icon ? withIcon(props) : withoutIcon(props)}
+      ${sdsSize === "l" ? tagSizeL(props) : tagSizeS(props)}
       ${typeToCss[type](props)}
       ${isRounded ? rounded(props) : square(props)}
       ${hover ? withHover(props) : `pointer-events: none;`}
diff --git a/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
index f2dff9aea..6d3ada9bf 100644
--- a/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`<TagFilter /> Default story renders snapshot 1`] = `
   </div>
   <div>
     <div
-      class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-deletable MuiChip-deletableColorPrimary MuiChip-filledPrimary css-1nerdtd-MuiButtonBase-root-MuiChip-root"
+      class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-deletable MuiChip-deletableColorPrimary MuiChip-filledPrimary css-6vrjla-MuiButtonBase-root-MuiChip-root"
       role="button"
       tabindex="0"
     >