[Cl-10] Button group (#3031)

* chore: setup initial bit-button-group using bitButton as template * feat: working radio group with preliminary styling * chore: cleanup * feat: implement proper basic styling * feat: implement focus handling and keyboard navigation * feat: implement size support * feat: add labeling support * feat: add input for button selection * feat: implement output handler on radio button interaction * feat: implement internal input/output seletion handling * feat: add external input support * feat: add external output support * chore: simplify storybook example a bit * fix: module imports * refactor: simplify both components * feat: remove size * chore: rename button-group to toggle-group * chore: rename toggle-group-element to toggle-group-button * chore: update story example * fix: compatibility with web vault * fix: imports in tests after rename * fix: remove unnecessary inject decorator * fix: clarify field names and html tags * feat: add badge centering fix * feat: set pointer cursor on label * chore: comment on special css rules * chore: remove focusable option from button * Update libs/components/src/toggle-group/toggle-group-button.component.ts Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> * chore: rename to `bit-toggle` * fix: remove unecessary aria label function Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
2025-12-11 13:53:34 +00:00 · 2022-07-18 14:25:37 +02:00
parent 5284072ff1
commit cd5aef1757
10 changed files with 327 additions and 0 deletions
--- a/libs/components/src/toggle-group/toggle.component.ts
+++ b/libs/components/src/toggle-group/toggle.component.ts
@@ -0,0 +1,80 @@
+import { HostBinding, Component, Input } from "@angular/core";
+
+import { ToggleGroupComponent } from "./toggle-group.component";
+
+let nextId = 0;
+
+@Component({
+  selector: "bit-toggle",
+  templateUrl: "./toggle.component.html",
+  preserveWhitespaces: false,
+})
+export class ToggleComponent {
+  id = nextId++;
+
+  @Input() value?: string;
+
+  constructor(private groupComponent: ToggleGroupComponent) {}
+
+  @HostBinding("tabIndex") tabIndex = "-1";
+  @HostBinding("class") classList = ["tw-group"];
+
+  get name() {
+    return this.groupComponent.name;
+  }
+
+  get selected() {
+    return this.groupComponent.selected === this.value;
+  }
+
+  get inputClasses() {
+    return ["tw-peer", "tw-appearance-none", "tw-outline-none"];
+  }
+
+  get labelClasses() {
+    return [
+      "!tw-font-semibold",
+      "tw-transition",
+      "tw-text-center",
+      "tw-border-text-muted",
+      "!tw-text-muted",
+      "tw-border-solid",
+      "tw-border-y",
+      "tw-border-r",
+      "tw-border-l-0",
+      "tw-cursor-pointer",
+      "group-first-of-type:tw-border-l",
+      "group-first-of-type:tw-rounded-l",
+      "group-last-of-type:tw-rounded-r",
+
+      "peer-focus:tw-outline-none",
+      "peer-focus:tw-ring",
+      "peer-focus:tw-ring-offset-2",
+      "peer-focus:tw-ring-primary-500",
+      "peer-focus:tw-z-10",
+      "peer-focus:tw-bg-primary-500",
+      "peer-focus:tw-border-primary-500",
+      "peer-focus:!tw-text-contrast",
+
+      "hover:tw-no-underline",
+      "hover:tw-bg-text-muted",
+      "hover:tw-border-text-muted",
+      "hover:!tw-text-contrast",
+
+      "peer-checked:tw-bg-primary-500",
+      "peer-checked:tw-border-primary-500",
+      "peer-checked:!tw-text-contrast",
+      "tw-py-1.5",
+      "tw-px-3",
+
+      // Fix for badge being pushed slightly lower when inside a button.
+      // Insipired by bootstrap, which does the same.
+      "[&>[bitBadge]]:tw-relative",
+      "[&>[bitBadge]]:-tw-top-[1px]",
+    ];
+  }
+
+  onInputInteraction() {
+    this.groupComponent.onInputInteraction(this.value);
+  }
+}