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

[CL-445] Fix small sizing and spacing issues (#10962)

Browse Source
This commit is contained in:
Victoria League
2024-09-10 14:16:55 -04:00
committed by GitHub
parent 71f19398d1
commit b3ebe370d2
4 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
libs/components/src/item/item.component.ts
View File

@@ -8,16 +8,16 @@ import { ItemActionComponent } from "./item-action.component";
/**
* The class used to set the height of a bit item's inner content.
*/
export const BitItemHeightClass = `tw-h-[60px]`;
export const BitItemHeightClass = `tw-h-[52px]`;
/**
* The height of a bit item in pixels. Includes any margin, padding, or border. Used by the virtual scroll
* to estimate how many items can be displayed at once and how large the virtual container should be.
* Needs to be updated if the item height or spacing changes.
*
* 60px + 6px bottom margin + 1px border = 67px
* 52px + 6px bottom margin + 1px border = 59px
*/
export const BitItemHeight = 67; //
export const BitItemHeight = 59;
@Component({
selector: "bit-item",

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

@@ -16,7 +16,7 @@ import { I18nMockService } from "../utils/i18n-mock.service";
import { ItemActionComponent } from "./item-action.component";
import { ItemContentComponent } from "./item-content.component";
import { ItemGroupComponent } from "./item-group.component";
import { ItemComponent } from "./item.component";
import { ItemComponent, BitItemHeight, BitItemHeightClass } from "./item.component";
export default {
title: "Component Library/Item",
@@ -326,12 +326,14 @@ export const VirtualScrolling: Story = {
render: (_args) => ({
props: {
data: Array.from(Array(100000).keys()),
itemSize: BitItemHeight,
itemClass: BitItemHeightClass,
},
template: /*html*/ `
<cdk-virtual-scroll-viewport [itemSize]="46" class="tw-h-[500px]">
<cdk-virtual-scroll-viewport [itemSize]="itemSize" class="tw-h-[500px]">
<bit-item-group aria-label="Single Action List">
<bit-item *cdkVirtualFor="let item of data">
<button bit-item-content>
<button bit-item-content [ngClass]="itemClass">
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
{{ item }}
</button>