bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-17 08:43:33 +00:00
Code Issues Releases Wiki Activity

[Cl-10] Button group (#3031)

Browse Source 
* 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>
This commit is contained in:
Andreas Coroiu
2022-07-18 14:25:37 +02:00
committed by GitHub
parent 5284072ff1
commit cd5aef1757
10 changed files with 327 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
libs/components/src/toggle-group/toggle-group.component.ts Normal file
View File

@@ -0,0 +1,24 @@
import { Component, EventEmitter, HostBinding, Input, Output } from "@angular/core";
let nextId = 0;
@Component({
selector: "bit-toggle-group",
templateUrl: "./toggle-group.component.html",
preserveWhitespaces: false,
})
export class ToggleGroupComponent {
private id = nextId++;
name = `bit-toggle-group-${this.id}`;
@Input() selected?: unknown;
@Output() selectedChange = new EventEmitter<unknown>();
@HostBinding("attr.role") role = "radiogroup";
@HostBinding("class") classList = ["tw-flex"];
onInputInteraction(value: unknown) {
this.selected = value;
this.selectedChange.emit(value);
}
}