bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-12 22:44:11 +00:00
Code Issues Releases Wiki Activity

[CL-446] Update hover state for unselected chip selects (#11172)

Browse Source
This commit is contained in:
Victoria League
2024-09-24 12:27:27 -04:00
committed by GitHub
parent 02eb6dc978
commit 95de2feec3
2 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
libs/components/src/chip-select/chip-select.component.html
View File

@@ -1,10 +1,10 @@
<div
bitTypography="body2"
class="tw-inline-flex tw-items-center tw-rounded-full tw-w-full tw-border-solid tw-border tw-gap-1.5"
class="tw-inline-flex tw-items-center tw-rounded-full tw-w-full tw-border-solid tw-border tw-gap-1.5 tw-group/chip-select"
[ngClass]="{
'tw-bg-text-muted hover:tw-bg-secondary-700 tw-text-contrast hover:tw-border-secondary-700':
'tw-bg-text-muted hover:tw-bg-secondary-700 tw-text-contrast hover:!tw-border-secondary-700':
selectedOption && !disabled,
'tw-bg-transparent hover:tw-bg-background-alt !tw-text-muted': !selectedOption && !disabled,
'tw-bg-transparent hover:tw-border-secondary-700 !tw-text-muted': !selectedOption && !disabled,
'tw-bg-secondary-300 tw-text-muted tw-border-transparent': disabled,
'tw-border-text-muted': !disabled,
'tw-ring-2 tw-ring-primary-600 tw-ring-offset-1': focusVisibleWithin(),
@@ -16,6 +16,7 @@
class="fvw-target tw-inline-flex tw-gap-1.5 tw-items-center tw-justify-between tw-bg-transparent hover:tw-bg-transparent tw-border-none tw-outline-none tw-w-full tw-py-1 tw-pl-3 last:tw-pr-3 [&:not(:last-child)]:tw-pr-0 tw-truncate tw-text-[color:inherit] tw-text-[length:inherit]"
[ngClass]="{
'tw-cursor-not-allowed': disabled,
'group-hover/chip-select:tw-text-secondary-700': !selectedOption && !disabled,
}"
[bitMenuTriggerFor]="menu"
[disabled]="disabled"
@@ -24,7 +25,13 @@
>
<span class="tw-inline-flex tw-items-center tw-gap-1.5 tw-truncate">
<i class="bwi !tw-text-[inherit]" [ngClass]="icon"></i>
<span class="tw-truncate">{{ label }}</span>
<span
class="tw-truncate"
[ngClass]="{
'group-hover/chip-select:tw-underline': !selectedOption && !disabled,
}"
>{{ label }}</span
>
</span>
<i
*ngIf="!selectedOption"

7
libs/components/src/chip-select/chip-select.stories.ts
View File

@@ -211,12 +211,17 @@ export const TextOverflow: Story = {
};
export const Disabled: Story = {
...Default,
render: (args) => ({
props: {
...args,
},
template: /* html */ `
<bit-chip-select
placeholderText="Folder"
placeholderIcon="bwi-folder"
[options]="options"
disabled
></bit-chip-select>
<bit-chip-select
placeholderText="Folder"
placeholderIcon="bwi-folder"