From f44b7b361d257ee6884f6c113839e2245e0df31e Mon Sep 17 00:00:00 2001 From: Victoria League Date: Fri, 30 Aug 2024 09:25:16 -0400 Subject: [PATCH] [CL-442] Fix toggle group display in extension and add fullWidth input to main (#10803) --- .../src/toggle-group/toggle-group.component.ts | 15 +++++++++++++-- .../src/toggle-group/toggle.component.ts | 3 +++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/libs/components/src/toggle-group/toggle-group.component.ts b/libs/components/src/toggle-group/toggle-group.component.ts index 907b5c9c58..b59b90e894 100644 --- a/libs/components/src/toggle-group/toggle-group.component.ts +++ b/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 { private id = nextId++; name = `bit-toggle-group-${this.id}`; + @Input({ transform: booleanAttribute }) fullWidth?: boolean; @Input() selected?: TValue; @Output() selectedChange = new EventEmitter(); @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; diff --git a/libs/components/src/toggle-group/toggle.component.ts b/libs/components/src/toggle-group/toggle.component.ts index b07ecd82a8..e1f93ed367 100644 --- a/libs/components/src/toggle-group/toggle.component.ts +++ b/libs/components/src/toggle-group/toggle.component.ts @@ -33,7 +33,10 @@ export class ToggleComponent { get labelClasses() { return [ + "tw-w-full", + "tw-justify-center", "!tw-font-semibold", + "tw-inline-block", "tw-transition", "tw-text-center", "tw-border-text-muted",