fix(autocomplete): fix Autocomplete section titles + tagFilter delete…

…Icon size
chanzuckerberg · Mar 12, 2024 · b8e0283 · b8e0283
1 parent cffb970
commit b8e0283
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts
@@ -5,7 +5,7 @@ import InputSearch from "src/core/InputSearch";
 import {
   CommonThemeProps,
   fontBodyXxs,
-  fontCapsXxxs,
+  fontCapsXxxxs,
   getBorders,
   getCorners,
   getSemanticComponentColors,
@@ -35,7 +35,7 @@ export const StyledAutocompleteBase = styled(Autocomplete, {
   + .${autocompleteClasses.popper}
     > .${autocompleteClasses.paper}
     .${autocompleteClasses.groupLabel} {
-    ${fontCapsXxxs}
+    ${fontCapsXxxxs}
   }
 
   ${(props: StyleProps) => {

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-1dgyg9r-MuiButtonBase-root-MuiChip-root"
+      class="MuiButtonBase-root MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorPrimary MuiChip-deletable MuiChip-deletableColorPrimary MuiChip-filledPrimary css-1nerdtd-MuiButtonBase-root-MuiChip-root"
       role="button"
       tabindex="0"
     >

diff --git a/packages/components/src/core/TagFilter/index.tsx b/packages/components/src/core/TagFilter/index.tsx
@@ -19,8 +19,8 @@ export type TagFilterProps = SdsTagFilterProps;
 const TagFilter = (props: SdsTagFilterProps): JSX.Element => {
   return (
     <StyledTag
-      deleteIcon={<Icon sdsIcon="XMark" sdsSize="xs" sdsType="static" />}
       {...props}
+      deleteIcon={<Icon sdsIcon="XMark" sdsSize="xs" sdsType="static" />}
       color="info"
     />
   );

diff --git a/packages/components/src/core/TagFilter/style.ts b/packages/components/src/core/TagFilter/style.ts
@@ -1,7 +1,12 @@
 import { css } from "@emotion/react";
 import { styled } from "@mui/material/styles";
 import React from "react";
-import { CommonThemeProps, fontHeaderXs, getSpaces } from "src/core/styles";
+import {
+  CommonThemeProps,
+  fontHeaderXs,
+  getIconSizes,
+  getSpaces,
+} from "src/core/styles";
 import Tag from "src/core/Tag";
 
 export interface TagFilterExtraProps extends CommonThemeProps {
@@ -13,6 +18,7 @@ export interface TagFilterExtraProps extends CommonThemeProps {
 export const StyledTag = styled(Tag)`
   ${(props: TagFilterExtraProps) => {
     const spaces = getSpaces(props);
+    const iconSizes = getIconSizes(props);
 
     return css`
       padding: ${spaces?.xxs}px ${(spaces?.s ?? 0) - 2}px ${spaces?.xxs}px
@@ -29,6 +35,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;
       }
 
       .MuiChip-label,