vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[CL-170] Fix size of radio group legend (#8154)

This commit is contained in:
Victoria League 2024-02-29 15:21:39 -05:00 committed by GitHub
parent 323d86850a
commit 8d528c2d4a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,19 +45,19 @@ export const Inline: Story = {
radio: new FormControl(0), radio: new FormControl(0),
}), }),
}, },
template: ` template: /* HTML */ `
<form [formGroup]="formObj"> <form [formGroup]="formObj">
<bit-radio-group formControlName="radio" aria-label="Example radio group"> <bit-radio-group formControlName="radio" aria-label="Example radio group">
<bit-label>Group of radio buttons</bit-label> <bit-label>Group of radio buttons</bit-label>
<bit-radio-button id="radio-first" [value]="0"> <bit-radio-button id="radio-first" [value]="0">
<bit-label>First</bit-label> <bit-label>First</bit-label>
</bit-radio-button> </bit-radio-button>
<bit-radio-button id="radio-second" [value]="1"> <bit-radio-button id="radio-second" [value]="1">
<bit-label>Second</bit-label> <bit-label>Second</bit-label>
</bit-radio-button> </bit-radio-button>
<bit-radio-button id="radio-third" [value]="2"> <bit-radio-button id="radio-third" [value]="2">
<bit-label>Third</bit-label> <bit-label>Third</bit-label>
</bit-radio-button> </bit-radio-button>
@ -74,26 +74,26 @@ export const InlineHint: Story = {
radio: new FormControl(0), radio: new FormControl(0),
}), }),
}, },
template: ` template: /* HTML */ `
<form [formGroup]="formObj"> <form [formGroup]="formObj">
<bit-radio-group formControlName="radio" aria-label="Example radio group"> <bit-radio-group formControlName="radio" aria-label="Example radio group">
<bit-label>Group of radio buttons</bit-label> <bit-label>Group of radio buttons</bit-label>
<bit-radio-button id="radio-first" [value]="0"> <bit-radio-button id="radio-first" [value]="0">
<bit-label>First</bit-label> <bit-label>First</bit-label>
</bit-radio-button> </bit-radio-button>
<bit-radio-button id="radio-second" [value]="1"> <bit-radio-button id="radio-second" [value]="1">
<bit-label>Second</bit-label> <bit-label>Second</bit-label>
</bit-radio-button> </bit-radio-button>
<bit-radio-button id="radio-third" [value]="2"> <bit-radio-button id="radio-third" [value]="2">
<bit-label>Third</bit-label> <bit-label>Third</bit-label>
</bit-radio-button> </bit-radio-button>
<bit-hint>This is a hint for the radio group</bit-hint> <bit-hint>This is a hint for the radio group</bit-hint>
</bit-radio-group> </bit-radio-group>
</form> </form>
`, `,
}), }),
}; };
@ -105,21 +105,22 @@ export const Block: Story = {
radio: new FormControl(0), radio: new FormControl(0),
}), }),
}, },
template: `
template: /* HTML */ `
<form [formGroup]="formObj"> <form [formGroup]="formObj">
<bit-radio-group formControlName="radio" aria-label="Example radio group" [block]="true"> <bit-radio-group formControlName="radio" aria-label="Example radio group" [block]="true">
<bit-label>Group of radio buttons</bit-label> <bit-label>Group of radio buttons</bit-label>
<bit-radio-button id="radio-first" [value]="0"> <bit-radio-button id="radio-first" [value]="0">
<bit-label>First</bit-label> <bit-label>First</bit-label>
<bit-hint>This is a hint for the first option</bit-hint> <bit-hint>This is a hint for the first option</bit-hint>
</bit-radio-button> </bit-radio-button>
<bit-radio-button id="radio-second" [value]="1"> <bit-radio-button id="radio-second" [value]="1">
<bit-label>Second</bit-label> <bit-label>Second</bit-label>
<bit-hint>This is a hint for the second option</bit-hint> <bit-hint>This is a hint for the second option</bit-hint>
</bit-radio-button> </bit-radio-button>
<bit-radio-button id="radio-third" [value]="2"> <bit-radio-button id="radio-third" [value]="2">
<bit-label>Third</bit-label> <bit-label>Third</bit-label>
<bit-hint>This is a hint for the third option</bit-hint> <bit-hint>This is a hint for the third option</bit-hint>
@ -137,7 +138,7 @@ export const BlockHint: Story = {
radio: new FormControl(0), radio: new FormControl(0),
}), }),
}, },
template: ` template: /* HTML */ `
<form [formGroup]="formObj"> <form [formGroup]="formObj">
<bit-radio-group formControlName="radio" aria-label="Example radio group" [block]="true"> <bit-radio-group formControlName="radio" aria-label="Example radio group" [block]="true">
<bit-label>Group of radio buttons</bit-label> <bit-label>Group of radio buttons</bit-label>

2
libs/components/src/radio-button/radio-group.component.html
View File

@ -1,6 +1,6 @@
<ng-container *ngIf="label"> <ng-container *ngIf="label">
<fieldset> <fieldset>
<legend class="tw-mb-1 tw-block tw-text-sm tw-font-semibold tw-text-main"> <legend class="tw-mb-1 tw-block tw-text-base tw-font-semibold tw-text-main">
<ng-content select="bit-label"></ng-content> <ng-content select="bit-label"></ng-content>
<span *ngIf="required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span> <span *ngIf="required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
</legend> </legend>