Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Sep 24, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ec62eea
[CL-446] Update hover state for unselected chip selects
vleague2 Sep 20, 2024
6f64b41
fix selected chip hover
vleague2 Sep 23, 2024
c8ece88
Merge branch 'ps/extension-refresh' into ds/cl-446/chip-select-hover
vleague2 Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions libs/components/src/chip-select/chip-select.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(),
Expand All @@ -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"
Expand All @@ -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"
Expand Down
7 changes: 6 additions & 1 deletion libs/components/src/chip-select/chip-select.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading