Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-10 14:43:34 +01:00
Code Issues Projects Releases Wiki Activity

[CL-522] Reduce font size for checkbox and radio labels (#12251)

Browse Source
This commit is contained in:
Victoria League 2024-12-09 14:10:14 -05:00 committed by GitHub
parent f7b81231bc
commit 0906c503e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
libs/components/src/checkbox/checkbox.component.ts
View File

@ -22,10 +22,9 @@ export class CheckboxComponent implements BitFormControlAbstraction {
"tw-border",
"tw-border-solid",
"tw-border-secondary-500",
"tw-h-5",
"tw-w-5",
"tw-h-[1.12rem]",
"tw-w-[1.12rem]",
"tw-mr-1.5",
"tw-bottom-[-1px]", // Fix checkbox looking off-center
"tw-flex-none", // Flexbox fix for bit-form-control
"before:tw-content-['']",
@ -83,11 +82,11 @@ export class CheckboxComponent implements BitFormControlAbstraction {
@HostBinding("style.--mask-image")
protected maskImage =
`url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E')`;
`url('data:image/svg+xml,%3Csvg class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10" viewBox="0 0 10 10"%3E%3Cpath d="M0.5 6.2L2.9 8.6L9.5 1.4" fill="none" stroke="white" stroke-width="2"%3E%3C/path%3E%3C/svg%3E')`;
@HostBinding("style.--indeterminate-mask-image")
protected indeterminateImage =
`url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 13 13"%3E%3Cpath stroke="%23fff" stroke-width="2" d="M2.5 6.5h8"/%3E%3C/svg%3E%0A')`;
`url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 13 13"%3E%3Cpath stroke="%23fff" stroke-width="2" d="M2.5 6.5h8"/%3E%3C/svg%3E%0A')`;
@HostBinding()
@Input()

2
libs/components/src/form-control/form-control.component.html
View File

@ -7,7 +7,7 @@
class="tw-inline-flex tw-flex-col"
[ngClass]="formControl.disabled ? 'tw-text-muted' : 'tw-text-main'"
>
<span bitTypography="body1">
<span bitTypography="body2">
<ng-content select="bit-label"></ng-content>
<span *ngIf="required" class="tw-text-xs tw-font-normal"> ({{ "required" | i18n }})</span>
</span>

3
libs/components/src/form-control/form-control.module.ts
View File

@ -1,13 +1,14 @@
import { NgModule } from "@angular/core";
import { SharedModule } from "../shared";
import { TypographyModule } from "../typography";
import { FormControlComponent } from "./form-control.component";
import { BitHintComponent } from "./hint.component";
import { BitLabel } from "./label.component";
@NgModule({
imports: [SharedModule, BitLabel],
imports: [SharedModule, BitLabel, TypographyModule],
declarations: [FormControlComponent, BitHintComponent],
exports: [FormControlComponent, BitLabel, BitHintComponent],
})

7
libs/components/src/form/form.stories.ts
View File

@ -51,6 +51,10 @@ export default {
inputEmail: "Input is not an email-address.",
inputMinValue: (min) => `Input value must be at least ${min}.`,
inputMaxValue: (max) => `Input value must not exceed ${max}.`,
multiSelectPlaceholder: "-- Type to Filter --",
multiSelectLoading: "Retrieving options...",
multiSelectNotFound: "No items found",
multiSelectClearAll: "Clear all",
});
},
},
@ -70,6 +74,7 @@ const exampleFormObj = fb.group({
name: ["", [Validators.required]],
email: ["", [Validators.required, Validators.email, forbiddenNameValidator(/bit/i)]],
country: [undefined as string | undefined, [Validators.required]],
groups: [],
terms: [false, [Validators.requiredTrue]],
updates: ["yes"],
age: [null, [Validators.min(0), Validators.max(150)]],
@ -115,7 +120,7 @@ export const FullExample: Story = {
<bit-label>Groups</bit-label>
<bit-multi-select
class="tw-w-full"
formControlName="select"
formControlName="groups"
[baseItems]="baseItems"
[removeSelectedItems]="removeSelectedItems"
[loading]="false"

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

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

5
libs/components/src/radio-button/radio-input.component.ts
View File

@ -25,10 +25,9 @@ export class RadioInputComponent implements BitFormControlAbstraction {
"tw-border",
"tw-border-solid",
"tw-border-secondary-600",
"tw-w-5",
"tw-h-5",
"tw-w-[1.12rem]",
"tw-h-[1.12rem]",
"tw-mr-1.5",
"tw-bottom-[-1px]", // Fix checkbox looking off-center
"tw-flex-none", // Flexbox fix for bit-form-control
"hover:tw-border-2",