Merge branch 'main' into feat/fluid-as-alternative

digdir · Mar 20, 2024 · 18e518d · 18e518d
2 parents 822cd9d + 6bbb3b7
commit 18e518d
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git a/packages/react/src/components/form/Combobox/Combobox.stories.tsx b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
@@ -96,6 +96,7 @@ Preview.args = {
  disabled: false,
  hideLabel: false,
  hideChips: false,
+ hideClearButton: false,
  virtual: false,
  description: 'Velg et sted',
  size: 'medium',

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -91,8 +91,19 @@ export type ComboboxProps = {
  /**
  * Label for the clear button
  * @default 'Fjern alt'
+ * @deprecated Use `clearButtonLabel` instead
  */
  cleanButtonLabel?: string;
+ /**
+ * Hides the clear button
+ * @default false
+ */
+ hideClearButton?: boolean;
+ /**
+ * Label for the clear button
+ * @default 'Fjern alt'
+ */
+ clearButtonLabel?: string;
  /**
  * Enables virtualizing of options list.
  * @see https://tanstack.com/virtual
@@ -150,6 +161,8 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
  readOnly = false,
  hideChips = false,
  cleanButtonLabel = 'Fjern alt',
+ clearButtonLabel = 'Fjern alt',
+ hideClearButton = false,
  error,
  errorId,
  id,
@@ -457,7 +470,8 @@ export const Combobox = forwardRef<HTMLInputElement, ComboboxProps>(
  htmlSize,
  optionValues,
  hideChips,
- cleanButtonLabel,
+ clearButtonLabel: cleanButtonLabel || clearButtonLabel,
+ hideClearButton,
  listId,
  setInputValue,
  setActiveIndex,
@@ -606,7 +620,8 @@ type ComboboxContextType = {
  error: ComboboxProps['error'];
  htmlSize: ComboboxProps['htmlSize'];
  hideChips: NonNullable<ComboboxProps['hideChips']>;
- cleanButtonLabel: NonNullable<ComboboxProps['cleanButtonLabel']>;
+ clearButtonLabel: NonNullable<ComboboxProps['clearButtonLabel']>;
+ hideClearButton: NonNullable<ComboboxProps['hideClearButton']>;
  options: Option[];
  selectedOptions: Option[];
  size: NonNullable<ComboboxProps['size']>;

diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx
@@ -17,7 +17,7 @@ export const ComboboxClearButton = () => {
  size,
  readOnly,
  disabled,
- cleanButtonLabel,
+ clearButtonLabel,
  inputRef,
  setSelectedOptions,
  setInputValue,
@@ -48,7 +48,7 @@ export const ComboboxClearButton = () => {
  }
  }}
  type='button'
- aria-label={cleanButtonLabel}
+ aria-label={clearButtonLabel}
  >
  <XMarkIcon
  fontSize='1.5em'

diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx
@@ -40,6 +40,7 @@ export const ComboboxInput = ({
  htmlSize,
  options,
  hideChips,
+ hideClearButton,
  setOpen,
  setActiveIndex,
  handleKeyDown,
@@ -107,6 +108,9 @@ export const ComboboxInput = ({
  }
  };
 
+ const showClearButton =
+ multiple && !hideClearButton && selectedOptions.length > 0;
+
  return (
  <Box
  /* Props from floating-ui */
@@ -168,7 +172,7 @@ export const ComboboxInput = ({
  />
  </div>
  {/* Clear button if we are in multiple mode and have at least one active value */}
- {multiple && selectedOptions.length > 0 && <ComboboxClearButton />}
+ {showClearButton && <ComboboxClearButton />}
  {/* Arrow for combobox. Click is handled by the wrapper */}
  <div className={classes.arrow}>
  {open ? (