From 4fe48fc913941e9476e298d6f329e19a22771e9f Mon Sep 17 00:00:00 2001
From: Victoria League <vleague@bitwarden.com>
Date: Fri, 25 Oct 2024 11:48:57 -0400
Subject: [PATCH] [CL-494] Wrap long words in toggle group (#11659)

---
 .../toggle-group/toggle-group.component.ts    |  2 +-
 .../src/toggle-group/toggle-group.mdx         | 16 ++--
 .../src/toggle-group/toggle-group.stories.ts  | 74 ++++++++++++-------
 .../src/toggle-group/toggle.component.html    |  2 +-
 .../src/toggle-group/toggle.component.ts      |  2 +-
 5 files changed, 57 insertions(+), 39 deletions(-)

diff --git a/libs/components/src/toggle-group/toggle-group.component.ts b/libs/components/src/toggle-group/toggle-group.component.ts
index b59b90e894f..7afe39e4cf6 100644
--- a/libs/components/src/toggle-group/toggle-group.component.ts
+++ b/libs/components/src/toggle-group/toggle-group.component.ts
@@ -25,7 +25,7 @@ export class ToggleGroupComponent<TValue = unknown> {
   @HostBinding("attr.role") role = "radiogroup";
   @HostBinding("class")
   get classList() {
-    return ["tw-flex"].concat(this.fullWidth ? ["tw-w-full", "[&>*]:tw-grow"] : []);
+    return ["tw-flex"].concat(this.fullWidth ? ["tw-w-full", "[&>*]:tw-flex-1"] : []);
   }
 
   onInputInteraction(value: TValue) {
diff --git a/libs/components/src/toggle-group/toggle-group.mdx b/libs/components/src/toggle-group/toggle-group.mdx
index 252627f3d32..d553ae11298 100644
--- a/libs/components/src/toggle-group/toggle-group.mdx
+++ b/libs/components/src/toggle-group/toggle-group.mdx
@@ -21,14 +21,6 @@ within that filter.
 
 <Controls />
 
-## Label wrap
-
-If the labels in a toggle group would overflow the width of the toggle group container, then the
-labels will wrap to 2 lines and truncate with an ellipsis past that. The full label text is
-accessible via the `title` prop (i.e. visible on hover).
-
-<Canvas of={stories.LabelWrap} />
-
 ## Full width
 
 If a toggle group should span the width of its container, pass the `fullWidth` input to the toggle
@@ -42,6 +34,14 @@ group.
 
 <Canvas of={stories.FullWidth} />
 
+## Label wrap
+
+If the labels in a toggle group would overflow the width of the toggle group container, then the
+labels will wrap to 2 lines and truncate with an ellipsis past that. The full label text is
+accessible via the `title` prop (i.e. visible on hover).
+
+<Canvas of={stories.LabelWrap} />
+
 # Accessibility
 
 - Since only 1 button can be selected at a time, the toggle group acts similarly to a radio group.
diff --git a/libs/components/src/toggle-group/toggle-group.stories.ts b/libs/components/src/toggle-group/toggle-group.stories.ts
index f6e10291e1d..edfa832d6ce 100644
--- a/libs/components/src/toggle-group/toggle-group.stories.ts
+++ b/libs/components/src/toggle-group/toggle-group.stories.ts
@@ -47,34 +47,6 @@ export const Default: Story = {
   },
 };
 
-export const LabelWrap: Story = {
-  render: (args) => ({
-    props: args,
-    template: /* HTML */ `
-      <bit-toggle-group
-        [(selected)]="selected"
-        aria-label="People list filter"
-        class="tw-max-w-[500px]"
-      >
-        <bit-toggle value="all">
-          All of the best things <span bitBadge variant="info">3</span>
-        </bit-toggle>
-
-        <bit-toggle value="invited"> Invited to a cool party </bit-toggle>
-
-        <bit-toggle value="accepted">
-          Accepted the invitation<span bitBadge variant="info">2</span>
-        </bit-toggle>
-
-        <bit-toggle value="deactivated"> Deactivated forever</bit-toggle>
-      </bit-toggle-group>
-    `,
-  }),
-  args: {
-    selected: "all",
-  },
-};
-
 export const FullWidth: Story = {
   render: (args) => ({
     props: args,
@@ -99,3 +71,49 @@ export const FullWidth: Story = {
     fullWidth: true,
   },
 };
+
+export const LabelWrap: Story = {
+  render: (args) => ({
+    props: args,
+    template: /* HTML */ `
+      <code>fullWidth=false</code>
+      <bit-toggle-group
+        [(selected)]="selected"
+        aria-label="People list filter"
+        class="tw-max-w-[500px] tw-overflow-hidden tw-border tw-border-solid tw-border-danger-600 tw-py-3"
+      >
+        <bit-toggle value="all"> All</bit-toggle>
+
+        <bit-toggle value="invited"> Invited to a cool party with cool people </bit-toggle>
+
+        <bit-toggle value="accepted">
+          Accepted the invitation<span bitBadge variant="info">2</span>
+        </bit-toggle>
+
+        <bit-toggle value="deactivated">Deactivatedinvitationswraplabel</bit-toggle>
+      </bit-toggle-group>
+      <br />
+      <code>fullWidth=true</code>
+      <bit-toggle-group
+        [(selected)]="selected"
+        aria-label="People list filter"
+        class="tw-max-w-[500px] tw-overflow-hidden tw-border tw-border-solid tw-border-danger-600 tw-py-3"
+        [fullWidth]="fullWidth"
+      >
+        <bit-toggle value="all"> All</bit-toggle>
+
+        <bit-toggle value="invited"> Invited to a cool party with cool people </bit-toggle>
+
+        <bit-toggle value="accepted">
+          Accepted the invitation<span bitBadge variant="info">2</span>
+        </bit-toggle>
+
+        <bit-toggle value="deactivated">Deactivatedinvitationswraplabel</bit-toggle>
+      </bit-toggle-group>
+    `,
+  }),
+  args: {
+    selected: "all",
+    fullWidth: true,
+  },
+};
diff --git a/libs/components/src/toggle-group/toggle.component.html b/libs/components/src/toggle-group/toggle.component.html
index 2d719d0bbf0..c245d2f462f 100644
--- a/libs/components/src/toggle-group/toggle.component.html
+++ b/libs/components/src/toggle-group/toggle.component.html
@@ -7,7 +7,7 @@
   (change)="onInputInteraction()"
 />
 <label for="bit-toggle-{{ id }}" [ngClass]="labelClasses" [title]="labelTextContent">
-  <span class="tw-line-clamp-2" #labelContent>
+  <span class="tw-line-clamp-2 tw-break-words" #labelContent>
     <ng-content></ng-content>
   </span>
   <span class="tw-shrink-0" #bitBadgeContainer [hidden]="!bitBadgeContainerHasChidlren()">
diff --git a/libs/components/src/toggle-group/toggle.component.ts b/libs/components/src/toggle-group/toggle.component.ts
index 1adfd6afe23..799e37b05df 100644
--- a/libs/components/src/toggle-group/toggle.component.ts
+++ b/libs/components/src/toggle-group/toggle.component.ts
@@ -27,7 +27,7 @@ export class ToggleComponent<TValue> implements AfterContentChecked {
   constructor(private groupComponent: ToggleGroupComponent<TValue>) {}
 
   @HostBinding("tabIndex") tabIndex = "-1";
-  @HostBinding("class") classList = ["tw-group/toggle", "tw-flex"];
+  @HostBinding("class") classList = ["tw-group/toggle", "tw-flex", "tw-min-w-16"];
 
   protected bitBadgeContainerHasChidlren = signal(false);