1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 22:33:35 +00:00

[CL-50] Form controls (checkbox and radio) (#4066)

* [CL-50] feat: scaffold checkbox component

* [CL-50] feat: implement control value accessor for checbox

* [CL-50] feat: add form-field support to checkbox

* [CL-50] feat: implement non-selected checkbox styling

* [CL-50] feat: implement checkbox checked styles

* [CL-50] feat: improve checkbox form-field compat

* [CL-50] fix: checkbox border hover wrong color

* [CL-50] feat: use svg instead of bwi font

* [CL-50] feat: scaffold radio button

* [EC-50] feat: implement radio logic

* [CL-50] feat: add radio group tests

* [CL-50] feat: add radio-button tests

* [CL-50] feat: implement radio button styles

* [CL-50] fix: checkbox style tweaks

* [CL-50] feat: smooth radio button selection transition

* [CL-50] chore: various fixes and cleanups

* [CL-50] feat: add form field support

* [EC-50] feat-wip: simplify checkbox styling

* [EC-50] feat: extract checkbox into separate component

* [CL-50] feat: add standalone form control component

* [CL-50] feat: remove unnecessary checkbox-control
It wasn't really doing anything, might as well use form control directly

* [CL-50] chore: create separate folder with form examples

* [CL-50] feat: switch to common bit-label

* [CL-50] feat: let radio group act as form control

* [CL-50] chore: restore form-field component

* [CL-50] feat: add support for hint and error

* [CL-50] fix: storybook build issue

* [CL-50] fix: radio group label wrong text color

* [CL-50] fix: translation

* [CL-50] fix: put hint and errors outside label

* [CL-50] feat:

* [CL-50] feat: add custom checkbox example story

* [CL-50] chore: remove 1 from full example name

* [CL-50] chore: clean up unused icon

* [CL-50] chore: clean up unused tailwind plugin

* [CL-50] fix: ring offset color in custom example

* [CL-50] chore: clean up unused icon

* [CL-50] chore: add design link

* [CL-50] chore: remove unused import

* [CL-50] fix: pr review comments

* [CL-50] fix: improve id handling
This commit is contained in:
Andreas Coroiu
2022-12-05 08:49:03 +01:00
committed by GitHub
parent e9781b4214
commit d17d188534
26 changed files with 970 additions and 9 deletions

View File

@@ -12,7 +12,9 @@ import { Meta, moduleMetadata, Story } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
import { ButtonModule } from "../button";
import { CheckboxModule } from "../checkbox";
import { InputModule } from "../input/input.module";
import { RadioButtonModule } from "../radio-button";
import { I18nMockService } from "../utils/i18n-mock.service";
import { BitFormFieldComponent } from "./form-field.component";
@@ -23,7 +25,15 @@ export default {
component: BitFormFieldComponent,
decorators: [
moduleMetadata({
imports: [FormsModule, ReactiveFormsModule, FormFieldModule, InputModule, ButtonModule],
imports: [
FormsModule,
ReactiveFormsModule,
FormFieldModule,
InputModule,
ButtonModule,
CheckboxModule,
RadioButtonModule,
],
providers: [
{
provide: I18nService,
@@ -55,6 +65,8 @@ const formObj = fb.group({
const defaultFormObj = fb.group({
name: ["", [Validators.required]],
email: ["", [Validators.required, Validators.email, forbiddenNameValidator(/bit/i)]],
terms: [false, [Validators.requiredTrue]],
updates: ["yes"],
});
// Custom error message, `message` is shown as the error message