fix(filtertag): fix onDelete

chanzuckerberg · Apr 3, 2024 · fcac667 · fcac667
1 parent acaedf2
commit fcac667
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 20 deletions.
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
@@ -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-6vrjla-MuiButtonBase-root-MuiChip-root"
+      class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-deletable MuiChip-deletableColorPrimary MuiChip-filledPrimary css-18fqwks-MuiButtonBase-root-MuiChip-root"
       role="button"
       tabindex="0"
     >
@@ -25,21 +25,31 @@ exports[`<TagFilter /> Default story renders snapshot 1`] = `
       >
         TagFilter
       </span>
-      <div
-        class="css-1ft6wgl"
+      <button
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium MuiChip-deleteIcon MuiChip-deleteIconMedium MuiChip-deleteIconColorPrimary MuiChip-deleteIconFilledColorPrimary css-1wnv1p6-MuiButtonBase-root-MuiIconButton-root"
+        icon="XMark"
+        tabindex="0"
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiChip-deleteIcon MuiChip-deleteIconMedium MuiChip-deleteIconColorPrimary MuiChip-deleteIconFilledColorPrimary css-25m3b5-MuiSvgIcon-root"
-          data-file-name="IconXMarkSmall"
-          data-testid="IconXMarkSmall"
-          fillcontrast="white"
-          focusable="false"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
+        <div
+          class="css-1ft6wgl"
+        >
+          <svg
+            aria-hidden="true"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1q6hio5-MuiSvgIcon-root"
+            data-file-name="IconXMarkSmall"
+            data-testid="IconXMarkSmall"
+            fillcontrast="white"
+            focusable="false"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+          />
+        </div>
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
         />
-      </div>
+      </button>
     </div>
   </div>
 </div>

diff --git a/packages/components/src/core/TagFilter/index.tsx b/packages/components/src/core/TagFilter/index.tsx
@@ -1,7 +1,7 @@
 import { ChipProps } from "@mui/material";
 import React from "react";
 import { StyledTag } from "./style";
-import Icon from "../Icon";
+import ButtonIcon from "../ButtonIcon";
 
 export interface SdsTagFilterProps
   extends Omit<ChipProps, "color" | "variant"> {
@@ -20,7 +20,9 @@ const TagFilter = (props: SdsTagFilterProps): JSX.Element => {
   return (
     <StyledTag
       {...props}
-      deleteIcon={<Icon sdsIcon="XMark" sdsSize="xs" sdsType="static" />}
+      deleteIcon={
+        <ButtonIcon icon="XMark" sdsSize="small" sdsType="tertiary" />
+      }
       color="info"
     />
   );

diff --git a/packages/components/src/core/TagFilter/style.ts b/packages/components/src/core/TagFilter/style.ts
@@ -21,8 +21,7 @@ export const StyledTag = styled(Tag)`
     const iconSizes = getIconSizes(props);
 
     return css`
-      padding: ${spaces?.xxs}px ${(spaces?.s ?? 0) - 2}px ${spaces?.xxs}px
-        ${spaces?.s}px;
+      padding: ${spaces?.xxs}px ${spaces?.s}px;
 
       &:after {
         display: none;
@@ -35,8 +34,8 @@ export const StyledTag = styled(Tag)`
       .MuiChip-deleteIcon,
       .MuiSvgIcon-root {
         margin-left: ${spaces?.s}px;
-        width: ${iconSizes?.xs?.width}px;
-        height: ${iconSizes?.xs?.height}px;
+        width: ${iconSizes?.xs?.width}px !important;
+        height: ${iconSizes?.xs?.height}px !important;
       }
 
       .MuiChip-label,