bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 08:13:42 +00:00
Code Issues Releases Wiki Activity

[CL-659] Replace CL non tw css classes with data attributes (#14421)

Browse Source 
The component library currently uses classes to determine fvw target, default content and main content. This replaces them with data attributes which avoids the css class linter from detecting them as invalid classes.
This commit is contained in:
Oscar Hinton
2025-05-14 20:14:27 +02:00
committed by GitHub
parent d10ca1923e
commit 13f97236f2
9 changed files with 27 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,7 +25,8 @@ import { TypographyModule } from "../typography";
* 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
*/
"fvw-target 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",
"data-fvw-target": "",
},
changeDetection: ChangeDetectionStrategy.OnPush,
})

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

@@ -1,4 +1,4 @@
<bit-item-action class="item-main-content tw-flex tw-flex-1 tw-overflow-hidden">
<bit-item-action class="tw-flex tw-flex-1 tw-overflow-hidden" data-item-main-content>
<ng-content></ng-content>
</bit-item-action>

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

@@ -19,7 +19,7 @@ import { ItemActionComponent } from "./item-action.component";
providers: [{ provide: A11yRowDirective, useExisting: ItemComponent }],
host: {
class:
"tw-block tw-box-border tw-overflow-hidden 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 [&: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:hover,[data-item-main-content]_a:hover)]:tw-bg-primary-100 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 extends A11yRowDirective {
@@ -29,7 +29,7 @@ export class ItemComponent extends A11yRowDirective {
protected focusVisibleWithin = signal(false);
@HostListener("focusin", ["$event.target"])
onFocusIn(target: HTMLElement) {
this.focusVisibleWithin.set(target.matches(".fvw-target:focus-visible"));
this.focusVisibleWithin.set(target.matches("[data-fvw-target]:focus-visible"));
}
@HostListener("focusout")
onFocusOut() {