From b8e0283a676afae61b65b412bf18b36f3aee9142 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Tue, 12 Mar 2024 18:32:53 -0400
Subject: [PATCH] fix(autocomplete): fix Autocomplete section titles +
 tagFilter deleteIcon size

---
 .../Autocomplete/components/AutocompleteBase/style.ts  |  4 ++--
 .../__tests__/__snapshots__/index.test.tsx.snap        |  2 +-
 packages/components/src/core/TagFilter/index.tsx       |  2 +-
 packages/components/src/core/TagFilter/style.ts        | 10 +++++++++-
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts
index f3f7e5a00..54eb7a67f 100644
--- 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
index 459202a2d..f2dff9aea 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-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
index 4803cd8b0..8d6fb964d 100644
--- 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
index 59bd94110..d2164a7ea 100644
--- 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,