bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-13 06:54:07 +00:00
Code Issues Releases Wiki Activity

[CL-443] Fix sizing issues (#10893)

Browse Source
This commit is contained in:
Victoria League
2024-09-05 16:34:08 -04:00
committed by GitHub
parent 67394f79e1
commit 1c582b7bee
8 changed files with 32 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/browser/src/popup/scss/base.scss
View File

@@ -95,7 +95,7 @@ textarea:not(bit-form-field textarea) {
input,
select,
textarea,
button {
button:not(bit-chip-select button) {
font-size: $font-size-base;
font-family: $font-family-sans-serif;
}

11
libs/components/src/chip-select/chip-select.component.html
View File

@@ -1,6 +1,6 @@
<div
bitTypography="body2"
class="tw-inline-flex tw-items-center tw-rounded-full tw-max-w-52 tw-border-solid tw-border tw-gap-1.5 tw-min-h-[2.225rem]"
class="tw-inline-flex tw-items-center tw-rounded-full tw-max-w-52 tw-border-solid tw-border tw-gap-1.5"
[ngClass]="{
'tw-bg-text-muted hover:tw-bg-secondary-700 tw-text-contrast hover:tw-border-secondary-700':
selectedOption && !disabled,
@@ -13,7 +13,7 @@
<!-- Primary button -->
<button
type="button"
class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-max-w-full tw-py-1 tw-pl-3 last:tw-pr-3 [&:not(:last-child)]:tw-pr-0 tw-truncate tw-text-[inherit]"
class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-max-w-full tw-py-1 tw-pl-3 last:tw-pr-3 [&:not(:last-child)]:tw-pr-0 tw-truncate tw-text-[color:inherit] tw-text-[length:inherit]"
[ngClass]="{
'tw-cursor-not-allowed': disabled,
}"
@@ -26,7 +26,7 @@
<span class="tw-truncate">{{ label }}</span>
<i
*ngIf="!selectedOption"
class="bwi tw-p-1 tw-mt-0.5"
class="bwi tw-mt-0.5"
[ngClass]="menuTrigger.isOpen ? 'bwi-angle-up' : 'bwi-angle-down'"
></i>
</button>
@@ -37,7 +37,7 @@
type="button"
[attr.aria-label]="'removeItem' | i18n: label"
[disabled]="disabled"
class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-p-1 tw-px-1.5 tw-my-[0.175rem] tw-mr-2 tw-text-[inherit] tw-border-solid tw-border tw-border-transparent hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-flex tw-items-center tw-justify-center focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
class="tw-bg-transparent hover:tw-bg-transparent tw-outline-none tw-rounded-full tw-py-0.5 tw-px-1 tw-mr-1 tw-text-[color:inherit] tw-text-[length:inherit] tw-border-solid tw-border tw-border-transparent hover:tw-border-text-contrast hover:disabled:tw-border-transparent tw-flex tw-items-center tw-justify-center focus-visible:tw-ring-2 tw-ring-text-contrast focus-visible:hover:tw-border-transparent"
[ngClass]="{
'tw-cursor-not-allowed': disabled,
}"
@@ -55,6 +55,7 @@
bitMenuItem
(click)="viewOption(parent, $event)"
[title]="parent.label ? ('backTo' | i18n: parent.label) : ('back' | i18n)"
class="tw-text-[length:inherit]"
>
<i slot="start" class="bwi bwi-angle-left" aria-hidden="true"></i>
{{ parent.label ? ("backTo" | i18n: parent.label) : ("back" | i18n) }}
@@ -65,6 +66,7 @@
bitMenuItem
(click)="selectOption(renderedOptions, $event)"
[title]="'viewItemsIn' | i18n: renderedOptions.label"
class="tw-text-[length:inherit]"
>
<i slot="start" class="bwi bwi-list" aria-hidden="true"></i>
{{ "viewItemsIn" | i18n: renderedOptions.label }}
@@ -78,6 +80,7 @@
(click)="option.children?.length ? viewOption(option, $event) : selectOption(option, $event)"
[disabled]="option.disabled"
[title]="option.label"
class="tw-text-[length:inherit]"
>
<i
*ngIf="option.icon"

6
libs/components/src/form-field/form-field.component.html
View File

@@ -83,7 +83,7 @@
<ng-container *ngTemplateOutlet="labelContent"></ng-container>
</label>
<div
class="tw-gap-1 tw-flex tw-min-h-11 tw-border-0 tw-border-solid"
class="tw-gap-1 tw-flex tw-min-h-[1.85rem] tw-pb-0.5 tw-border-0 tw-border-solid"
[ngClass]="{
'tw-border-secondary-300/50 tw-border-b':
!disableReadOnlyBorder && !defaultContentIsFocused(),
@@ -94,7 +94,7 @@
<div
#prefixContainer
[hidden]="!prefixHasChildren()"
class="tw-flex tw-items-center tw-gap-1 tw-pl-3 tw-py-2"
class="tw-flex tw-items-center tw-gap-1 tw-pl-1"
>
<ng-container *ngTemplateOutlet="prefixContent"></ng-container>
</div>
@@ -104,7 +104,7 @@
<div
#suffixContainer
[hidden]="!suffixHasChildren()"
class="tw-flex tw-items-center tw-gap-1 tw-pr-3 tw-py-2"
class="tw-flex tw-items-center tw-gap-1 tw-pr-1"
>
<ng-container *ngTemplateOutlet="suffixContent"></ng-container>
</div>

4
libs/components/src/form-field/form-field.component.ts
View File

@@ -69,7 +69,9 @@ export class BitFormFieldComponent implements AfterContentChecked {
@HostBinding("class")
get classList() {
return ["tw-block", "tw-pt-2"].concat(this.disableMargin ? [] : ["tw-mb-4"]);
return ["tw-block"]
.concat(this.disableMargin ? [] : ["tw-mb-4"])
.concat(this.readOnly ? [] : "tw-pt-2");
}
/**

4
libs/components/src/item/item-content.component.html
View File

@@ -2,10 +2,10 @@
<ng-content select="[slot=start]"></ng-content>
<div class="tw-flex tw-flex-col tw-items-start tw-text-start tw-w-full tw-truncate [&_p]:tw-mb-0">
<div class="tw-text-main tw-text-base tw-w-full tw-truncate">
<div bitTypography="body2" class="tw-text-main tw-w-full tw-truncate">
<ng-content></ng-content>
</div>
<div class="tw-text-muted tw-text-sm tw-w-full tw-truncate">
<div bitTypography="helper" class="tw-text-muted tw-w-full tw-truncate">
<ng-content select="[slot=secondary]"></ng-content>
</div>
</div>

4
libs/components/src/item/item-content.component.ts
View File

@@ -8,10 +8,12 @@ import {
ViewChild,
} from "@angular/core";
import { TypographyModule } from "../typography";
@Component({
selector: "bit-item-content, [bit-item-content]",
standalone: true,
imports: [CommonModule],
imports: [CommonModule, TypographyModule],
templateUrl: `item-content.component.html`,
host: {
class:

18
libs/components/src/item/item.stories.ts
View File

@@ -43,7 +43,7 @@ export const Default: Story = {
template: /*html*/ `
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
@@ -115,7 +115,7 @@ export const TextOverflow: Story = {
template: /*html*/ `
<bit-item>
<bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo!
<ng-container slot="secondary">Worlddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd!</ng-container>
</bit-item-content>
@@ -139,7 +139,7 @@ export const MultipleActionList: Story = {
<bit-item-group aria-label="Multiple Action List">
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
@@ -158,7 +158,7 @@ export const MultipleActionList: Story = {
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
@@ -177,7 +177,7 @@ export const MultipleActionList: Story = {
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
@@ -196,7 +196,7 @@ export const MultipleActionList: Story = {
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
@@ -215,7 +215,7 @@ export const MultipleActionList: Story = {
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
@@ -234,7 +234,7 @@ export const MultipleActionList: Story = {
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
@@ -312,7 +312,7 @@ export const VirtualScrolling: Story = {
<bit-item-group aria-label="Single Action List">
<bit-item *cdkVirtualFor="let item of data">
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-3xl tw-text-muted" aria-hidden="true"></i>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
{{ item }}
</button>

8
libs/vault/src/components/totp-countdown/totp-countdown.component.html
View File

@@ -12,8 +12,8 @@
class="tw-fill-none"
[ngClass]="{ 'tw-stroke-text-main': !totpLow, 'tw-stroke-danger-600': totpLow }"
r="9.5"
cy="11.8"
cx="11.8"
cy="14"
cx="14"
stroke-width="2"
stroke-dasharray="60"
[ngStyle]="{ 'stroke-dashoffset.px': totpDash }"
@@ -22,8 +22,8 @@
class="tw-fill-none"
[ngClass]="{ 'tw-stroke-text-main': !totpLow, 'tw-stroke-danger-600': totpLow }"
r="11"
cy="11.8"
cx="11.8"
cy="14"
cx="14"
stroke-width="1"
stroke-dasharray="71"
stroke-dashoffset="0"