diff --git a/packages/components/core/option/_option-theme.scss b/packages/components/core/option/_option-theme.scss index ba3b6c137c..4c1d10b5c7 100644 --- a/packages/components/core/option/_option-theme.scss +++ b/packages/components/core/option/_option-theme.scss @@ -36,6 +36,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; @@ -55,6 +59,10 @@ @include kbq-option(multiple-states-selected-hover); } } + + &.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 0000000000..143294eca2 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 4541d07562..78cd3219c3 100644 --- a/packages/components/list/_list-theme.scss +++ b/packages/components/list/_list-theme.scss @@ -54,6 +54,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 { @@ -70,6 +76,12 @@ @include _kbq-list-item(multiple-states-selected-active); } } + + &.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 0f7ae3f8ee..11819baa7c 100644 --- a/packages/components/list/e2e.playwright-spec.ts +++ b/packages/components/list/e2e.playwright-spec.ts @@ -15,4 +15,15 @@ test.describe('KbqListModule', () => { await expect(getScreenshotTarget(locator)).toHaveScreenshot('01-dark.png'); }); }); + + 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'); + }); + }); }); diff --git a/packages/components/list/e2e.ts b/packages/components/list/e2e.ts index 8e084c992c..b5590b3c36 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 { KbqIconModule } from '@koobiq/components/icon'; import { KbqListModule } from '@koobiq/components/list'; @@ -218,3 +219,29 @@ 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]; +} diff --git a/packages/components/select/__screenshots__/05-light.png b/packages/components/select/__screenshots__/05-light.png new file mode 100644 index 0000000000..01ea1b77f7 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 936b4c4ffc..0277e2e5ab 100644 --- a/packages/components/select/e2e.playwright-spec.ts +++ b/packages/components/select/e2e.playwright-spec.ts @@ -102,6 +102,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 e92ba921c8..d182d55748 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'; @@ -128,6 +129,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 ff059a5e7d..1700b8b783 100644 --- a/packages/e2e/routes.ts +++ b/packages/e2e/routes.ts @@ -36,7 +36,7 @@ import { E2eIconStateAndStyle, E2eIconSvg } from '../components/icon/e2e'; import { E2eInlineEditMenuButton, E2eInlineEditStates, E2eInlineEditTruncation } from '../components/inline-edit/e2e'; import { E2eInputStateAndStyle } from '../components/input/e2e'; import { E2eLinkStates } from '../components/link/e2e'; -import { E2eListStates } from '../components/list/e2e'; +import { 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'; @@ -64,6 +64,7 @@ import { E2eSelectLongOptionText, E2eSelectPositioning, E2eSelectRtlPositioning, + E2eSelectSelectionState, E2eSelectStates, E2eSelectWithGroupsPositioning, E2eSelectWithGroupsRtlPositioning, @@ -155,6 +156,7 @@ const components = [ E2eModalStates, E2eModalFullCustom, E2eListStates, + E2eListSelectionState, E2eLoaderOverlayStates, E2eLoaderOverlayCard, E2eAutocompleteStates, @@ -189,6 +191,7 @@ const components = [ E2eSelectStates, E2eMultiSelectStates, E2eMultilineSelectStates, + E2eSelectSelectionState, E2eTreeStates, E2eTreeSelectStates, E2eMultiTreeSelectStates,