fix(filter-ms): move classNameOverride to removable button container (#…

…3934) * fix(kaio/filter-ms): move classNameOverride to button container * fix(select/filter-ms): move classNameOverride to button container
cultureamp · Aug 1, 2023 · 32fc863 · 32fc863
1 parent 4d9f0c1
commit 32fc863
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/.changeset/shaggy-carrots-rest.md b/.changeset/shaggy-carrots-rest.md
@@ -0,0 +1,6 @@
+---
+"@kaizen/components": patch
+"@kaizen/select": patch
+---
+
+Move `classNameOverride` to outer container of FilterMultiSelect removable trigger button.
diff --git a/...FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.tsx b/...FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.tsx
@@ -22,6 +22,7 @@ export const RemovableFilterTrigger = ({
   return (
     <FilterButtonRemovable
       ref={ref}
+      classNameOverride={classNameOverride}
       triggerButtonProps={{
         ...buttonProps,
         label,
@@ -30,7 +31,6 @@ export const RemovableFilterTrigger = ({
           labelCharacterLimitBeforeTruncate
         ),
         isOpen: menuTriggerState.isOpen,
-        classNameOverride,
       }}
       removeButtonProps={{
         onClick: onRemove,

diff --git a/...rc/FilterMultiSelect/components/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.tsx b/...rc/FilterMultiSelect/components/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.tsx
@@ -14,11 +14,12 @@ export type RemovableFilterTriggerProps = {
 
 export const RemovableFilterTrigger = ({
   onRemove,
+  classNameOverride,
   ...filterTriggerProps
 }: RemovableFilterTriggerProps): JSX.Element => {
   const removeButtonLabel = `Remove filter - ${filterTriggerProps.label}`
   return (
-    <div className={styles.trigger}>
+    <div className={`${styles.trigger} ${classNameOverride}`}>
       <FilterTriggerButton
         classNameOverride={styles.triggerButton}
         {...filterTriggerProps}