fix: restore icons for FilterToolbar

jpmorganchase · Jul 20, 2023 · 0c0dc44 · 0c0dc44
1 parent 22a1cb9
commit 0c0dc44
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 16 deletions.
diff --git a/packages/components/src/FilterToolbar/FilterDropdown/index.tsx b/packages/components/src/FilterToolbar/FilterDropdown/index.tsx
@@ -22,8 +22,6 @@ export interface FilterDropdownProps extends DropdownProps<string, 'multiple'> {
 
 const CLEAR_ALL = 'Clear all';
 
-const DropdownIcon = () => <Icon name="chevronDown" />;
-
 export function FilterDropdown({
   className,
   itemToString,
@@ -50,10 +48,12 @@ export function FilterDropdown({
       selectionStrategy="multiple"
       source={listItems}
       triggerComponent={
-        <DropdownButton
-          IconComponent={DropdownIcon}
-          label={labelButton ? labelButton(filters) : defaultButtonLabel(filters)}
-        />
+        <span className={styles.triggerRoot}>
+          <Icon name="filter" size="small" />
+          <DropdownButton
+            label={labelButton ? labelButton(filters) : defaultButtonLabel(filters)}
+          />
+        </span>
       }
       width={200}
       {...rest}

diff --git a/packages/components/src/FilterToolbar/FilterDropdown/styles.css.ts b/packages/components/src/FilterToolbar/FilterDropdown/styles.css.ts
@@ -1,9 +1,16 @@
-import { style } from '@vanilla-extract/css';
+import { style, globalStyle } from '@vanilla-extract/css';
+
+const triggerRoot = style({ display: 'inline-flex', alignItems: 'center' });
 
 export default {
   root: style({
     display: 'flex !important',
     alignSelf: 'stretch',
     alignItems: 'center'
-  })
+  }),
+  triggerRoot
 };
+
+globalStyle(`${triggerRoot} svg.saltIcon`, {
+  vars: { '--saltIcon-size-multiplier': '1.2!important' }
+});
diff --git a/packages/components/src/FilterToolbar/SortDropdown/index.tsx b/packages/components/src/FilterToolbar/SortDropdown/index.tsx
@@ -15,8 +15,6 @@ export interface FilterSortDropdownProps extends PartialDropdownProps {
   source?: string[];
 }
 
-const DropdownIcon = () => <Icon name="chevronDown" />;
-
 export function FilterSortDropdown({
   className,
   itemToString = defaultItemToLabel,
@@ -43,10 +41,10 @@ export function FilterSortDropdown({
       selected={sort}
       source={source}
       triggerComponent={
-        <DropdownButton
-          IconComponent={DropdownIcon}
-          label={labelButton ? labelButton(sort) : sort}
-        />
+        <span className={styles.triggerRoot}>
+          <Icon name="swap" size="small" />
+          <DropdownButton label={labelButton ? labelButton(sort) : sort} />
+        </span>
       }
       width={150}
       {...rest}

diff --git a/packages/components/src/FilterToolbar/SortDropdown/styles.css.ts b/packages/components/src/FilterToolbar/SortDropdown/styles.css.ts
@@ -1,9 +1,15 @@
-import { style } from '@vanilla-extract/css';
+import { style, globalStyle } from '@vanilla-extract/css';
+const triggerRoot = style({ display: 'inline-flex', alignItems: 'center' });
 
 export default {
   root: style({
     display: 'flex !important',
     alignSelf: 'stretch',
     alignItems: 'center'
-  })
+  }),
+  triggerRoot
 };
+
+globalStyle(`${triggerRoot} svg.saltIcon`, {
+  vars: { '--saltIcon-size-multiplier': '1.2!important' }
+});