[CL-405] Allow toggle group input to be full width (#10658)

libs/components/src/toggle-group/toggle-group.component.ts

@@ -1,4 +1,11 @@
-import { Component, EventEmitter, HostBinding, Input, Output } from "@angular/core";
+import {
+  booleanAttribute,
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  Output,
+} from "@angular/core";
 
 let nextId = 0;
 
@@ -11,11 +18,15 @@ export class ToggleGroupComponent<TValue = unknown> {
   private id = nextId++;
   name = `bit-toggle-group-${this.id}`;
 
+  @Input({ transform: booleanAttribute }) fullWidth?: boolean;
   @Input() selected?: TValue;
   @Output() selectedChange = new EventEmitter<TValue>();
 
   @HostBinding("attr.role") role = "radiogroup";
-  @HostBinding("class") classList = ["tw-flex"];
+  @HostBinding("class")
+  get classList() {
+    return ["tw-flex"].concat(this.fullWidth ? ["tw-w-full", "[&>*]:tw-grow"] : []);
+  }
 
   onInputInteraction(value: TValue) {
     this.selected = value;

libs/components/src/toggle-group/toggle-group.mdx

@@ -15,21 +15,34 @@ Toggle groups function as radio buttons and a radio group under the hood.
 A button in a toggle group can have a badge counter added to show the number of items existing
 within that filter.
 
+## Default
+
+<Canvas of={stories.Default} />
+
+<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>
-  <Story of={stories.Default} />
-</Canvas>
+<Canvas of={stories.LabelWrap} />
 
-<Canvas>
-  <Story of={stories.LabelWrap} />
-</Canvas>
+## Full width
 
-<Controls />
+If a toggle group should span the width of its container, pass the `fullWidth` input to the toggle
+group.
 
-## Accessibility
+```
+<bit-toggle-group fullWidth>
+...toggle components here...
+</bit-toggle-group>
+```
+
+<Canvas of={stories.FullWidth} />
+
+# Accessibility
 
 - Since only 1 button can be selected at a time, the toggle group acts similarly to a radio group.
 - The user may navigate the options via left/right arrow keys.

libs/components/src/toggle-group/toggle-group.stories.ts

@@ -74,3 +74,28 @@ export const LabelWrap: Story = {
     selected: "all",
   },
 };
+
+export const FullWidth: Story = {
+  render: (args) => ({
+    props: args,
+    template: /* HTML */ `
+      <bit-toggle-group
+        [(selected)]="selected"
+        aria-label="People list filter"
+        [fullWidth]="fullWidth"
+      >
+        <bit-toggle value="all"> All <span bitBadge variant="info">3</span> </bit-toggle>
+
+        <bit-toggle value="invited"> Invited </bit-toggle>
+
+        <bit-toggle value="accepted"> Accepted <span bitBadge variant="info">2</span> </bit-toggle>
+
+        <bit-toggle value="deactivated"> Deactivated </bit-toggle>
+      </bit-toggle-group>
+    `,
+  }),
+  args: {
+    selected: "all",
+    fullWidth: true,
+  },
+};

libs/components/src/toggle-group/toggle.component.ts

@@ -50,8 +50,10 @@ export class ToggleComponent<TValue> implements AfterContentChecked {
   get labelClasses() {
     return [
       "tw-h-full",
+      "tw-w-full",
       "tw-flex",
       "tw-items-center",
+      "tw-justify-center",
       "tw-gap-1.5",
       "!tw-font-semibold",
       "tw-leading-5",