@kaizen/components 0.0.0-canary-codemod-tsx-20241030002309 → 0.0.0-canary-icon-cdn-css-20241108011645

package/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef, useEffect } from "react"
+import classnames from "classnames"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { useFilterBarContext } from "~components/Filter/FilterBar/context/FilterBarContext"
 import {
@@ -7,6 +8,7 @@ import {
   FilterButtonRemovable,
 } from "~components/Filter/FilterButton"
 import { isRefObject } from "~components/utils/isRefObject"
+import styles from "./FilterBarButton.module.css"
 
 export type FilterBarButtonProps = FilterButtonProps & {
   filterId: string
@@ -16,25 +18,41 @@ export type FilterBarButtonProps = FilterButtonProps & {
 export const FilterBarButton = forwardRef<
   FilterTriggerRef,
   FilterBarButtonProps
->(({ filterId, isRemovable = false, ...props }, ref): JSX.Element => {
-  const { hideFilter, focusId, setFocus } = useFilterBarContext()
+>(
+  (
+    { filterId, isRemovable = false, classNameOverride, ...props },
+    ref
+  ): JSX.Element => {
+    const { hideFilter, focusId, setFocus } = useFilterBarContext()
 
-  useEffect(() => {
-    if (focusId === filterId && isRefObject(ref)) {
-      ref?.current?.triggerRef?.current?.focus()
-      setFocus(undefined)
-    }
-  }, [focusId])
+    useEffect(() => {
+      if (focusId === filterId && isRefObject(ref)) {
+        ref?.current?.triggerRef?.current?.focus()
+        setFocus(undefined)
+      }
+    }, [focusId])
 
-  return isRemovable ? (
-    <FilterButtonRemovable
-      ref={ref}
-      triggerButtonProps={props}
-      removeButtonProps={{ onClick: () => hideFilter(filterId) }}
-    />
-  ) : (
-    <FilterButton ref={ref} {...props} />
-  )
-})
+    return isRemovable ? (
+      <FilterButtonRemovable
+        ref={ref}
+        triggerButtonProps={props}
+        removeButtonProps={{ onClick: () => hideFilter(filterId) }}
+        classNameOverride={classnames(
+          classNameOverride,
+          styles.filterBarButton
+        )}
+      />
+    ) : (
+      <FilterButton
+        ref={ref}
+        classNameOverride={classnames(
+          classNameOverride,
+          styles.filterBarButton
+        )}
+        {...props}
+      />
+    )
+  }
+)
 
 FilterBarButton.displayName = "FilterBar.Button"

package/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.module.css

@@ -0,0 +1,5 @@
+@media (width < 768px) {
+  .filterMultiSelect {
+    flex-basis: 100%;
+  }
+}

package/src/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.tsx

@@ -8,6 +8,7 @@ import {
 } from "~components/Filter/FilterMultiSelect"
 import { useFilterBarContext } from "../../context/FilterBarContext"
 import { checkArraysMatch } from "../../utils/checkArraysMatch"
+import styles from "./FilterBarMultiSelect.module.css"
 
 export type FilterBarMultiSelectProps = Omit<
   FilterMultiSelectProps,
@@ -97,6 +98,7 @@ export const FilterBarMultiSelect = ({
       items={items}
       isOpen={filterState.isOpen}
       onOpenChange={(open): void => setFilterOpenState(id, open)}
+      className={styles.filterMultiSelect}
       trigger={(): JSX.Element => {
         const triggerProps = {
           selectedOptionLabels: filterState.value
@@ -112,9 +114,13 @@ export const FilterBarMultiSelect = ({
           <FilterMultiSelect.RemovableTrigger
             {...triggerProps}
             onRemove={() => hideFilter(id)}
+            classNameOverride={styles.triggerButton}
           />
         ) : (
-          <FilterMultiSelect.TriggerButton {...triggerProps} />
+          <FilterMultiSelect.TriggerButton
+            classNameOverride={styles.triggerButton}
+            {...triggerProps}
+          />
         )
       }}
       triggerRef={buttonRef}

package/src/Filter/FilterButton/FilterButton/FilterButton.module.css

@@ -0,0 +1,23 @@
+.filterButton {
+  gap: var(--spacing-6);
+  justify-content: space-between;
+}
+
+@media (width < 768px) {
+  .filterButton {
+    flex-grow: 1;
+  }
+}
+
+.labelContainer {
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+
+.hasSelectedValues {
+  font-weight: bold;
+}
+
+.labelSeparator {
+  margin-inline-end: var(--spacing-6);
+}

package/src/Filter/FilterButton/FilterButton/FilterButton.tsx

@@ -7,7 +7,7 @@ import {
   FilterButtonBase,
   FilterButtonBaseProps,
 } from "../subcomponents/FilterButtonBase"
-import styles from "./FilterButton.module.scss"
+import styles from "./FilterButton.module.css"
 
 export type FilterButtonProps = {
   label: string

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.module.css

@@ -0,0 +1,3 @@
+.filterButtonBase {
+  height: 100%;
+}

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react"
 import { useIntl } from "@cultureamp/i18n-react-intl"
+import classnames from "classnames"
 import { ButtonGroup, ButtonGroupProps } from "~components/ButtonGroup"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { Icon } from "~components/__future__/Icon"
@@ -11,6 +12,7 @@ import {
   FilterButtonBase,
   FilterButtonBaseProps,
 } from "../subcomponents/FilterButtonBase"
+import styles from "./FilterButtonRemovable.module.css"
 
 export type FilterButtonRemovableProps = {
   triggerButtonProps: FilterButtonProps & DataAttributes
@@ -49,7 +51,14 @@ export const FilterButtonRemovable = forwardRef<
     <ButtonGroup {...restProps}>
       <FilterButton ref={ref} {...triggerButtonProps} />
       <Tooltip text={removeButtonLabel} display="inline-block" position="below">
-        <FilterButtonBase ref={removeButtonRef} {...removeButtonProps}>
+        <FilterButtonBase
+          ref={removeButtonRef}
+          classNameOverride={classnames(
+            styles.filterButtonBase,
+            restProps.classNameOverride
+          )}
+          {...removeButtonProps}
+        >
           <Icon name="cancel" alt={removeButtonLabel} isFilled />
         </FilterButtonBase>
       </Tooltip>

package/src/Filter/FilterButton/subcomponents/FilterButtonBase/FilterButtonBase.module.scss

@@ -13,7 +13,7 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  height: 3rem; // 48px
+  min-height: 3rem; // 48px
   padding: $spacing-sm;
   border-width: 0;
   border-radius: $border-solid-border-radius;
@@ -24,7 +24,7 @@
   line-height: $typography-button-secondary-line-height;
   letter-spacing: $typography-button-secondary-letter-spacing;
   color: $color-blue-500;
-  white-space: nowrap;
+  text-align: start;
 
   &:hover,
   &:active {

package/src/Filter/FilterMultiSelect/FilterMultiSelect.tsx

@@ -42,6 +42,7 @@ export type FilterMultiSelectProps = {
   trigger: (value?: MenuTriggerProviderContextType) => React.ReactNode
   children: (value?: SelectionProviderContextType) => React.ReactNode // the content of the menu
   triggerRef?: React.RefObject<HTMLButtonElement>
+  className?: string
 } & Omit<MenuPopupProps, "children"> &
   Omit<MenuTriggerProviderProps, "children"> &
   SelectionProps
@@ -62,6 +63,7 @@ export const FilterMultiSelect = ({
   selectionMode = "multiple",
   onSearchInputChange,
   triggerRef,
+  className,
 }: FilterMultiSelectProps): JSX.Element => {
   const menuTriggerProps = { isOpen, defaultOpen, onOpenChange, triggerRef }
   const menuPopupProps = { isLoading, loadingSkeleton }
@@ -83,7 +85,7 @@ export const FilterMultiSelect = ({
 
   return (
     <MenuTriggerProvider {...menuTriggerProps}>
-      <div>
+      <div className={className}>
         <MenuTriggerConsumer>{trigger}</MenuTriggerConsumer>
         <MenuPopup {...menuPopupProps}>
           <SelectionProvider {...selectionProps}>

package/src/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.module.css

@@ -0,0 +1,3 @@
+.filterButtonRemovable {
+  width: 100%;
+}

package/src/Filter/FilterMultiSelect/subcomponents/Trigger/RemovableFilterTrigger/RemovableFilterTrigger.tsx

@@ -1,9 +1,11 @@
 import React, { useRef } from "react"
+import classnames from "classnames"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { FilterButtonRemovable } from "~components/Filter/FilterButton"
 import { useMenuTriggerContext } from "../../../context"
 import { getTruncatedLabels } from "../../../utils"
 import { FilterTriggerButtonProps } from "../FilterTriggerButton"
+import styles from "./RemovableFilterTrigger.module.css"
 
 export type RemovableFilterTriggerProps = FilterTriggerButtonProps & {
   onRemove: () => void
@@ -22,7 +24,10 @@ export const RemovableFilterTrigger = ({
   return (
     <FilterButtonRemovable
       ref={ref}
-      classNameOverride={classNameOverride}
+      classNameOverride={classnames(
+        styles.filterButtonRemovable,
+        classNameOverride
+      )}
       triggerButtonProps={{
         ...buttonProps,
         label,

package/dist/cjs/Filter/FilterBar/FilterBar.module.scss.cjs

@@ -1,7 +0,0 @@
-'use strict';
-
-var styles = {
-  "filterBar": "FilterBar-module_filterBar__ZhQLn",
-  "filtersContainer": "FilterBar-module_filtersContainer__v6OJn"
-};
-module.exports = styles;

package/dist/cjs/Filter/FilterButton/FilterButton/FilterButton.module.scss.cjs

@@ -1,9 +0,0 @@
-'use strict';
-
-var styles = {
-  "filterButton": "FilterButton-module_filterButton__PEcAs",
-  "labelContainer": "FilterButton-module_labelContainer__kJlE8",
-  "hasSelectedValues": "FilterButton-module_hasSelectedValues__tc-XE",
-  "labelSeparator": "FilterButton-module_labelSeparator__CmSqS"
-};
-module.exports = styles;

package/dist/esm/Filter/FilterBar/FilterBar.module.scss.mjs

@@ -1,5 +0,0 @@
-var styles = {
-  "filterBar": "FilterBar-module_filterBar__ZhQLn",
-  "filtersContainer": "FilterBar-module_filtersContainer__v6OJn"
-};
-export { styles as default };

package/dist/esm/Filter/FilterButton/FilterButton/FilterButton.module.scss.mjs

@@ -1,7 +0,0 @@
-var styles = {
-  "filterButton": "FilterButton-module_filterButton__PEcAs",
-  "labelContainer": "FilterButton-module_labelContainer__kJlE8",
-  "hasSelectedValues": "FilterButton-module_hasSelectedValues__tc-XE",
-  "labelSeparator": "FilterButton-module_labelSeparator__CmSqS"
-};
-export { styles as default };

package/src/Filter/FilterBar/FilterBar.module.scss

@@ -1,19 +0,0 @@
-@import "~@kaizen/design-tokens/sass/border";
-@import "~@kaizen/design-tokens/sass/color";
-@import "~@kaizen/design-tokens/sass/shadow";
-@import "~@kaizen/design-tokens/sass/spacing";
-
-.filterBar {
-  display: flex;
-  padding: $spacing-8;
-  box-shadow: $shadow-small-box-shadow;
-  border-radius: $border-solid-border-radius;
-  background-color: $color-white;
-}
-
-.filtersContainer {
-  display: flex;
-  flex-grow: 1;
-  flex-wrap: wrap;
-  gap: $spacing-8;
-}

package/src/Filter/FilterButton/FilterButton/FilterButton.module.scss

@@ -1,22 +0,0 @@
-@import "~@kaizen/design-tokens/sass/spacing";
-@import "~@kaizen/design-tokens/sass/typography";
-
-.filterButton {
-  gap: $spacing-xs;
-}
-
-.labelContainer {
-  display: inline-flex;
-}
-
-.hasSelectedValues {
-  font-weight: bold;
-}
-
-.labelSeparator {
-  margin-inline-end: $spacing-xs;
-
-  [dir="ltr"] [dir="rtl"] & {
-    margin-right: 0;
-  }
-}