diff --git a/packages/components/core/option/_option-theme.scss b/packages/components/core/option/_option-theme.scss index 1306ed7f8..6890e5d97 100644 --- a/packages/components/core/option/_option-theme.scss +++ b/packages/components/core/option/_option-theme.scss @@ -47,6 +47,10 @@ @include kbq-option(states-disabled); } + &.kbq-selected.kbq-disabled { + background: var(--kbq-list-states-selected-container-background); + } + &:is(.kbq-selected, .kbq-active):has(+ :is(.kbq-selected, .kbq-active)) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; @@ -71,6 +75,10 @@ background: var(--kbq-list-multiple-states-selected-active-container-background); } } + + &.kbq-selected.kbq-disabled { + background: var(--kbq-list-multiple-states-selected-container-background); + } } } diff --git a/packages/components/list/__screenshots__/02-light.png b/packages/components/list/__screenshots__/02-light.png new file mode 100644 index 000000000..143294eca Binary files /dev/null and b/packages/components/list/__screenshots__/02-light.png differ diff --git a/packages/components/list/_list-theme.scss b/packages/components/list/_list-theme.scss index e694d7e26..bd23bdc67 100644 --- a/packages/components/list/_list-theme.scss +++ b/packages/components/list/_list-theme.scss @@ -59,6 +59,12 @@ &.kbq-disabled { @include _kbq-list-item(states-disabled); } + + &.kbq-selected.kbq-disabled { + --kbq-option-background: var(--kbq-list-states-selected-container-background); + + background: var(--kbq-list-states-selected-container-background); + } } .kbq-list-option.kbq-list-option_multiple { @@ -77,6 +83,12 @@ background: var(--kbq-list-multiple-states-selected-active-container-background); } } + + &.kbq-selected.kbq-disabled { + --kbq-option-background: var(--kbq-list-multiple-states-selected-container-background); + + background: var(--kbq-list-multiple-states-selected-container-background); + } } .kbq-list-selection.cdk-keyboard-focused { diff --git a/packages/components/list/e2e.playwright-spec.ts b/packages/components/list/e2e.playwright-spec.ts index 471d5cb7a..1f03e7de1 100644 --- a/packages/components/list/e2e.playwright-spec.ts +++ b/packages/components/list/e2e.playwright-spec.ts @@ -16,6 +16,17 @@ test.describe('KbqListModule', () => { }); }); + test.describe('E2eListSelectionState', () => { + const getComponent = (page: Page) => page.getByTestId('e2eListSelectionState'); + + test('selected disabled option', async ({ page }) => { + await page.goto('/E2eListSelectionState'); + const component = getComponent(page); + + await expect(component).toHaveScreenshot('02-light.png'); + }); + }); + test.describe('E2eListOptionActionVisibility', () => { const getOptionAction = (page: Page, option: string) => page.getByTestId(option).locator('.kbq-action-container'); diff --git a/packages/components/list/e2e.ts b/packages/components/list/e2e.ts index eee588193..26c3a6b66 100644 --- a/packages/components/list/e2e.ts +++ b/packages/components/list/e2e.ts @@ -1,4 +1,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { KbqBadgeModule } from '@koobiq/components/badge'; import { KbqOptionModule } from '@koobiq/components/core'; import { KbqDropdownModule } from '@koobiq/components/dropdown'; @@ -221,6 +222,32 @@ import { KbqListModule } from '@koobiq/components/list'; }) export class E2eListStates {} +@Component({ + selector: 'e2e-list-selection-state', + imports: [KbqListModule, FormsModule], + template: ` + + Selected + Selected + Disabled + Selected + + `, + styles: ` + :host { + display: block; + width: 400px; + padding: 8px; + } + `, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + 'data-testid': 'e2eListSelectionState' + } +}) +export class E2eListSelectionState { + protected readonly selected = [1, 2, 3]; +} + /** * Unlike `E2eListStates`, this fixture forces no state classes at all — the option action must be * revealed by real hover / real keyboard focus only. See `kbq-option-action-visibility` mixin. diff --git a/packages/components/select/__screenshots__/05-light.png b/packages/components/select/__screenshots__/05-light.png new file mode 100644 index 000000000..ba00ae71c Binary files /dev/null and b/packages/components/select/__screenshots__/05-light.png differ diff --git a/packages/components/select/e2e.playwright-spec.ts b/packages/components/select/e2e.playwright-spec.ts index 882222848..f675959e5 100644 --- a/packages/components/select/e2e.playwright-spec.ts +++ b/packages/components/select/e2e.playwright-spec.ts @@ -135,6 +135,19 @@ test.describe('KbqSelectModule', () => { }); }); + test.describe('E2eSelectSelectionState', () => { + const getComponent = (page: Page) => page.getByTestId('e2eSelectSelectionState'); + + test('selected disabled option', async ({ page }) => { + await page.goto('/E2eSelectSelectionState'); + const component = getComponent(page); + + await component.getByTestId('e2eSelect').click(); + + await expect(component).toHaveScreenshot('05-light.png'); + }); + }); + test.describe('E2eSelectWithSearchAndFooter', () => { const getComponent = (page: Page) => page.getByTestId('e2eSelectWithSearchAndFooter'); const getSelect = (locator: Locator) => locator.getByTestId('e2eSelect'); diff --git a/packages/components/select/e2e.ts b/packages/components/select/e2e.ts index 49028d4f7..83003e40b 100644 --- a/packages/components/select/e2e.ts +++ b/packages/components/select/e2e.ts @@ -2,6 +2,7 @@ import { Directionality } from '@angular/cdk/bidi'; import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling'; import { ChangeDetectionStrategy, Component, signal, viewChild } from '@angular/core'; import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'; +import { KbqFormFieldModule } from '@koobiq/components/form-field'; import { KbqIconModule } from '@koobiq/components/icon'; import { KbqInputModule } from '@koobiq/components/input'; import { KbqTagsModule } from '@koobiq/components/tags'; @@ -131,6 +132,44 @@ export class E2eMultiSelectStates {} }) export class E2eMultilineSelectStates {} +@Component({ + selector: 'e2e-select-selection-state', + imports: [KbqFormFieldModule, KbqSelectModule], + template: ` + + + Selected + Selected + Disabled + Selected + Option + + + + + `, + styles: ` + :host { + display: block; + width: 440px; + height: 180px; + padding: 8px; + } + `, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + 'data-testid': 'e2eSelectSelectionState' + } +}) +export class E2eSelectSelectionState { + protected readonly selected = [1, 2, 3]; +} + @Component({ selector: 'e2e-select-with-search-and-footer', imports: [ diff --git a/packages/e2e/routes.ts b/packages/e2e/routes.ts index 69fea1e67..3d2545787 100644 --- a/packages/e2e/routes.ts +++ b/packages/e2e/routes.ts @@ -52,7 +52,7 @@ import { } from '../components/inline-edit/e2e'; import { E2eInputStateAndStyle } from '../components/input/e2e'; import { E2eLinkStates, E2eLinkWithCaption } from '../components/link/e2e'; -import { E2eListOptionActionVisibility, E2eListStates } from '../components/list/e2e'; +import { E2eListOptionActionVisibility, E2eListSelectionState, E2eListStates } from '../components/list/e2e'; import { E2eLoaderOverlayCard, E2eLoaderOverlayStates } from '../components/loader-overlay/e2e'; import { E2eMarkdownStates } from '../components/markdown/e2e'; import { E2eModalFullCustom, E2eModalStates } from '../components/modal/e2e'; @@ -86,6 +86,7 @@ import { E2eSelectPanelMaxHeight, E2eSelectPositioning, E2eSelectRtlPositioning, + E2eSelectSelectionState, E2eSelectStates, E2eSelectWithGroupsPositioning, E2eSelectWithGroupsRtlPositioning, @@ -196,6 +197,7 @@ const components = [ E2eModalStates, E2eModalFullCustom, E2eListStates, + E2eListSelectionState, E2eListOptionActionVisibility, E2eLoaderOverlayStates, E2eLoaderOverlayCard, @@ -237,6 +239,7 @@ const components = [ E2eSelectStates, E2eMultiSelectStates, E2eMultilineSelectStates, + E2eSelectSelectionState, E2eTreeStates, E2eTreeSelectStates, E2eMultiTreeSelectStates,