@kaizen/components 1.67.7 → 1.67.9

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;
-  }
-}