bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 22:33:35 +00:00
Code Issues Releases Wiki Activity

[CL-587] disabled item styles (#15822)

Browse Source 
* wip

* remove cursor not allowed

* add disabled button story

* add cursor not allowed
This commit is contained in:
Bryan Cunningham
2025-07-29 16:12:01 -04:00
committed by GitHub
parent ca48c964d2
commit f6e8df18c0
3 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,7 +24,7 @@ import { TypographyModule } from "../typography";
* y-axis padding should be kept in sync with `item-action.component.ts`'s `top` and `bottom` units. * y-axis padding should be kept in sync with `item-action.component.ts`'s `top` and `bottom` units.
* we want this to be the same height as the `item-action`'s `:after` element * we want this to be the same height as the `item-action`'s `:after` element
*/ */
"tw-outline-none tw-text-main hover:tw-text-main tw-no-underline hover:tw-no-underline tw-text-base tw-py-2 tw-px-4 bit-compact:tw-py-1.5 bit-compact:tw-px-2 tw-bg-transparent tw-w-full tw-border-none tw-flex tw-gap-4 tw-items-center tw-justify-between", "tw-outline-none tw-text-main hover:tw-text-main tw-no-underline hover:tw-no-underline tw-text-base tw-py-2 tw-px-4 bit-compact:tw-py-1.5 bit-compact:tw-px-2 tw-bg-transparent tw-w-full tw-border-none tw-flex tw-gap-4 tw-items-center tw-justify-between disabled:tw-cursor-not-allowed [&[disabled]_[bittypography]]:!tw-text-secondary-300 [&[disabled]_i]:!tw-text-secondary-300",
"data-fvw-target": "", "data-fvw-target": "",
}, },
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -15,7 +15,7 @@ import { ItemActionComponent } from "./item-action.component";
templateUrl: "item.component.html", templateUrl: "item.component.html",
host: { host: {
class: class:
"tw-block tw-box-border tw-overflow-hidden tw-flex tw-bg-background [&:has([data-item-main-content]_button:hover,[data-item-main-content]_a:hover)]:tw-cursor-pointer [&:has([data-item-main-content]_button:hover,[data-item-main-content]_a:hover)]:tw-bg-hover-default tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg bit-compact:[&:not(bit-layout_*)]:tw-rounded-none bit-compact:[&:not(bit-layout_*)]:last-of-type:tw-rounded-b-lg bit-compact:[&:not(bit-layout_*)]:first-of-type:tw-rounded-t-lg tw-min-h-9 tw-mb-1.5 bit-compact:tw-mb-0", "tw-block tw-box-border tw-overflow-hidden tw-flex tw-bg-background [&:has([data-item-main-content]_button:hover,[data-item-main-content]_a:hover)]:tw-cursor-pointer [&:has([data-item-main-content]_button:enabled:hover,[data-item-main-content]_a:hover)]:tw-bg-hover-default tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg bit-compact:[&:not(bit-layout_*)]:tw-rounded-none bit-compact:[&:not(bit-layout_*)]:last-of-type:tw-rounded-b-lg bit-compact:[&:not(bit-layout_*)]:first-of-type:tw-rounded-t-lg tw-min-h-9 tw-mb-1.5 bit-compact:tw-mb-0",
}, },
}) })
export class ItemComponent { export class ItemComponent {

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

@@ -124,6 +124,11 @@ export const ContentTypes: Story = {
And I am a button. And I am a button.
</button> </button>
</bit-item> </bit-item>
<bit-item>
<button bit-item-content disabled title="I'm a disabled button">
And I am a disabled button.
</button>
</bit-item>
<bit-item> <bit-item>
<bit-item-content> <bit-item-content>
I'm just static :( I'm just static :(