[CL-442] Fix toggle group display in extension and add fullWidth input to main (#10803)

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.component.ts

@@ -33,7 +33,10 @@ export class ToggleComponent<TValue> {
 
   get labelClasses() {
     return [
+      "tw-w-full",
+      "tw-justify-center",
       "!tw-font-semibold",
+      "tw-inline-block",
       "tw-transition",
       "tw-text-center",
       "tw-border-text-muted",