[CL-451] Add option for full width chip select (#11135)

bitwarden · Sep 20, 2024 · 1262623 · 1262623
1 parent c13131a
commit 1262623
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 4 deletions.
diff --git a/libs/components/src/chip-select/chip-select.component.html b/libs/components/src/chip-select/chip-select.component.html
@@ -1,17 +1,18 @@
 <div
   bitTypography="body2"
-  class="tw-inline-flex tw-items-center tw-rounded-full tw-max-w-52 tw-border-solid tw-border tw-border-text-muted"
+  class="tw-inline-flex tw-items-center tw-rounded-full tw-border-solid tw-border tw-border-text-muted"
   [ngClass]="[
     selectedOption
       ? 'tw-bg-text-muted tw-text-contrast tw-gap-1'
       : 'tw-bg-transparent tw-text-muted tw-gap-1.5',
     focusVisibleWithin() ? 'tw-ring-2 tw-ring-primary-500 tw-ring-offset-1' : '',
+    fullWidth ? 'tw-w-full' : 'tw-max-w-52',
   ]"
 >
   <!-- Primary button -->
   <button
     type="button"
-    class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-max-w-full tw-py-1 tw-pl-3 last:tw-pr-3 tw-truncate tw-text-[inherit]"
+    class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-justify-between tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-w-full tw-py-1 tw-pl-3 last:tw-pr-3 tw-truncate tw-text-[inherit]"
     [ngClass]="{
       'tw-cursor-not-allowed': disabled,
     }"
@@ -20,8 +21,10 @@
     [title]="label"
     #menuTrigger="menuTrigger"
   >
-    <i class="bwi !tw-text-[inherit]" [ngClass]="icon"></i>
-    <span class="tw-truncate">{{ label }}</span>
+    <span class="tw-inline-flex tw-items-center tw-gap-1.5 tw-truncate">
+      <i class="bwi !tw-text-[inherit]" [ngClass]="icon"></i>
+      <span class="tw-truncate">{{ label }}</span>
+    </span>
     <i
       *ngIf="!selectedOption"
       class="bwi"

diff --git a/libs/components/src/chip-select/chip-select.component.ts b/libs/components/src/chip-select/chip-select.component.ts
@@ -65,6 +65,9 @@ export class ChipSelectComponent<T = unknown> implements ControlValueAccessor, A
   /** Disables the entire chip */
   @Input({ transform: booleanAttribute }) disabled = false;
 
+  /** Chip will stretch to full width of its container */
+  @Input({ transform: booleanAttribute }) fullWidth?: boolean;
+
   /**
    * We have `:focus-within` and `:focus-visible` but no `:focus-visible-within`
    */

diff --git a/libs/components/src/chip-select/chip-select.stories.ts b/libs/components/src/chip-select/chip-select.stories.ts
@@ -74,6 +74,44 @@ export const Default: Story = {
   },
 };
 
+export const FullWidth: Story = {
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: /* html */ `
+    <div class="tw-w-40">
+      <bit-chip-select
+        placeholderText="Folder"
+        placeholderIcon="bwi-folder"
+        [options]="options"
+        [ngModel]="value"
+        fullWidth
+      ></bit-chip-select>
+    </div>
+    `,
+  }),
+  args: {
+    options: [
+      {
+        label: "Foo",
+        value: "foo",
+        icon: "bwi-folder",
+      },
+      {
+        label: "Bar",
+        value: "bar",
+        icon: "bwi-exclamation-triangle tw-text-danger",
+      },
+      {
+        label: "Baz",
+        value: "baz",
+        disabled: true,
+      },
+    ],
+  },
+};
+
 export const NestedOptions: Story = {
   ...Default,
   args: {