bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-01-02 00:23:35 +00:00
Code Issues Releases Wiki Activity

[CL-712] Update icon button, components using it, and affected virtual scroll heights (#15683)

Browse Source
This commit is contained in:
Vicki League
2025-08-05 10:58:49 -04:00
committed by GitHub
parent 40a1a0a2b7
commit 26c0176e2e
34 changed files with 90 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/browser/src/auth/popup/account-switching/current-account.component.html
View File

@@ -1,4 +1,4 @@
<div class="tw-mr-[5px] tw-mt-1">
<div class="tw-me-2 tw-mt-1">
<button
*ngIf="currentAccount$ | async as currentAccount; else defaultButton"
type="button"

9
apps/browser/src/platform/popup/layout/popup-header.component.html
View File

@@ -1,16 +1,21 @@
<!--
end padding is less than start padding to prioritize visual alignment when icon buttons are used at the end of the end slot.
other elements used at the end of the end slot may need to add their own margin/padding to achieve visual alignment.
-->
<header
class="tw-p-3 bit-compact:tw-p-2 tw-pl-4 bit-compact:tw-pl-3 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
class="tw-py-3 bit-compact:tw-py-2 tw-pe-1 bit-compact:tw-pe-0.5 tw-transition-colors tw-duration-200 tw-border-0 tw-border-b tw-border-solid"
[ngClass]="{
'tw-bg-background-alt tw-border-transparent':
this.background === 'alt' && !pageContentScrolled(),
'tw-bg-background tw-border-secondary-300':
(this.background === 'alt' && pageContentScrolled()) || this.background === 'default',
'tw-ps-4 bit-compact:tw-ps-3': !showBackButton,
'tw-ps-1 bit-compact:tw-ps-0': showBackButton,
}"
>
<div class="tw-max-w-screen-sm tw-mx-auto tw-flex tw-justify-between tw-w-full">
<div class="tw-inline-flex tw-items-center tw-gap-2 tw-h-9">
<button
class="-tw-ml-1"
bitIconButton="bwi-angle-left"
type="button"
*ngIf="showBackButton"

4
apps/browser/src/platform/popup/layout/popup-layout.stories.ts
View File

@@ -117,7 +117,7 @@ class MockPopoutButtonComponent {}
@Component({
selector: "mock-current-account",
template: `
<button class="tw-bg-transparent tw-border-none" type="button">
<button class="tw-bg-transparent tw-border-none tw-p-0 tw-me-1" type="button">
<bit-avatar text="Ash Ketchum" size="small"></bit-avatar>
</button>
`,
@@ -654,7 +654,7 @@ export const WithVirtualScrollChild: Story = {
<bit-section>
@defer (on immediate) {
<bit-item-group aria-label="Mock Vault Items">
<cdk-virtual-scroll-viewport itemSize="61" bitScrollLayout>
<cdk-virtual-scroll-viewport itemSize="59" bitScrollLayout>
<bit-item *cdkVirtualFor="let item of data; index as i">
<button type="button" bit-item-content>
<i