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,