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-278][CL-391] misc bit-item style fixes (#10758)

Browse Source 
* update stories to use small icon button

* update colors

* [CL-391] use pointer cursor on hover when link or button
This commit is contained in:
Will Martin
2024-08-29 15:18:41 -04:00
committed by GitHub
parent 39590767a8
commit 340c0e8c2b
2 changed files with 20 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
libs/components/src/item/item.component.html
View File

@@ -1,9 +1,8 @@
<!-- TODO: Colors will be finalized in the extension refresh feature branch -->
<div
class="tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-300/20 tw-text-main tw-border-solid tw-border-b tw-border-0 tw-rounded-lg tw-mb-1.5"
class="tw-box-border tw-overflow-auto tw-flex tw-bg-background [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-cursor-pointer [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-bg-primary-100 tw-text-main tw-border-solid tw-border-b tw-border-0 tw-rounded-lg tw-mb-1.5"
[ngClass]="
focusVisibleWithin()
? 'tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-primary-600 tw-border-transparent'
? 'tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-primary-700 tw-border-transparent'
: 'tw-border-b-secondary-300 [&:has(.item-main-content_button:hover,.item-main-content_a:hover)]:tw-border-b-transparent'
"
>

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

@@ -53,10 +53,10 @@ export const Default: Story = {
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone"></button>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v"></button>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
@@ -121,10 +121,10 @@ export const TextOverflow: Story = {
</bit-item-content>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitIconButton="bwi-clone"></button>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v"></button>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
@@ -149,10 +149,10 @@ export const MultipleActionList: Story = {
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone"></button>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v"></button>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
@@ -168,10 +168,10 @@ export const MultipleActionList: Story = {
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone"></button>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v"></button>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
@@ -187,10 +187,10 @@ export const MultipleActionList: Story = {
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone"></button>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v"></button>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
@@ -206,10 +206,10 @@ export const MultipleActionList: Story = {
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone"></button>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v"></button>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
@@ -225,10 +225,10 @@ export const MultipleActionList: Story = {
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone"></button>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v"></button>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
@@ -244,10 +244,10 @@ export const MultipleActionList: Story = {
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone"></button>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v"></button>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
@@ -321,10 +321,10 @@ export const VirtualScrolling: Story = {
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone"></button>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v"></button>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>