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

[PM-2195] Adjust radio groups margin (#5410)

Browse Source 
* Adjust radio groups margin

* Move hint margin to input field

* Tweak field spacing

* Add story for hint, and fix hint display

* Fix label ssue

* Revert input margin

* Re-add margin to hint

* Change font weight

* Fix required placement

* Add support for required

* Change margin of radio group

* Remove unnecessary div

* Fix long inputs cutting off

* Fix radio story

* Remove newline

---------

Co-authored-by: Will Martin <contact@willmartian.com>
This commit is contained in:
Oscar Hinton
2023-11-21 04:59:03 +01:00
committed by GitHub
parent 651593bcd2
commit 50493ab6f7
12 changed files with 168 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
libs/components/src/radio-button/radio-button.stories.ts
View File

@@ -1,5 +1,5 @@
import { FormsModule, ReactiveFormsModule, FormControl, FormGroup } from "@angular/forms";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -67,6 +67,37 @@ export const Inline: Story = {
}),
};
export const InlineHint: Story = {
render: () => ({
props: {
formObj: new FormGroup({
radio: new FormControl(0),
}),
},
template: `
<form [formGroup]="formObj">
<bit-radio-group formControlName="radio" aria-label="Example radio group">
<bit-label>Group of radio buttons</bit-label>
<bit-radio-button id="radio-first" [value]="0">
<bit-label>First</bit-label>
</bit-radio-button>
<bit-radio-button id="radio-second" [value]="1">
<bit-label>Second</bit-label>
</bit-radio-button>
<bit-radio-button id="radio-third" [value]="2">
<bit-label>Third</bit-label>
</bit-radio-button>
<bit-hint>This is a hint for the radio group</bit-hint>
</bit-radio-group>
</form>
`,
}),
};
export const Block: Story = {
render: () => ({
props: {
@@ -76,20 +107,20 @@ export const Block: Story = {
},
template: `
<form [formGroup]="formObj">
<bit-radio-group formControlName="radio" aria-label="Example radio group">
<bit-radio-group formControlName="radio" aria-label="Example radio group" [block]="true">
<bit-label>Group of radio buttons</bit-label>
<bit-radio-button id="radio-first" class="tw-block" [value]="0">
<bit-radio-button id="radio-first" [value]="0">
<bit-label>First</bit-label>
<bit-hint>This is a hint for the first option</bit-hint>
</bit-radio-button>
<bit-radio-button id="radio-second" class="tw-block" [value]="1">
<bit-radio-button id="radio-second" [value]="1">
<bit-label>Second</bit-label>
<bit-hint>This is a hint for the second option</bit-hint>
</bit-radio-button>
<bit-radio-button id="radio-third" class="tw-block" [value]="2">
<bit-radio-button id="radio-third" [value]="2">
<bit-label>Third</bit-label>
<bit-hint>This is a hint for the third option</bit-hint>
</bit-radio-button>
@@ -98,3 +129,37 @@ export const Block: Story = {
`,
}),
};
export const BlockHint: Story = {
render: () => ({
props: {
formObj: new FormGroup({
radio: new FormControl(0),
}),
},
template: `
<form [formGroup]="formObj">
<bit-radio-group formControlName="radio" aria-label="Example radio group" [block]="true">
<bit-label>Group of radio buttons</bit-label>
<bit-radio-button id="radio-first" [value]="0">
<bit-label>First</bit-label>
<bit-hint>This is a hint for the first option</bit-hint>
</bit-radio-button>
<bit-radio-button id="radio-second" [value]="1">
<bit-label>Second</bit-label>
<bit-hint>This is a hint for the second option</bit-hint>
</bit-radio-button>
<bit-radio-button id="radio-third" [value]="2">
<bit-label>Third</bit-label>
<bit-hint>This is a hint for the third option</bit-hint>
</bit-radio-button>
<bit-hint>This is a hint for the radio group</bit-hint>
</bit-radio-group>
</form>
`,
}),
};