From b8f99252a184261e359b7efa47977a63af22d02e Mon Sep 17 00:00:00 2001 From: sivanova Date: Mon, 31 Mar 2025 15:35:45 +0300 Subject: [PATCH 1/5] refactor(drop-down): bundle styles with component --- .../core/styles/themes/generators/_base.scss | 14 +- .../core/styles/typography/_bootstrap.scss | 10 +- .../lib/core/styles/typography/_fluent.scss | 10 +- .../lib/core/styles/typography/_indigo.scss | 2 +- .../lib/core/styles/typography/_material.scss | 2 +- .../lib/drop-down/drop-down.component.scss | 4 + .../src/lib/drop-down/drop-down.component.ts | 5 +- .../src/lib/drop-down/themes/_base.scss | 173 ++++++++++++++++++ .../src/lib/drop-down/themes/dark/_index.scss | 6 + .../lib/drop-down/themes/dark/_tokens.scss | 7 + .../lib/drop-down/themes/light/_index.scss | 6 + .../lib/drop-down/themes/light/_tokens.scss | 8 + .../lib/drop-down/themes/shared/_fluent.scss | 27 +++ .../lib/drop-down/themes/shared/_index.scss | 2 + .../lib/drop-down/themes/shared/_indigo.scss | 52 ++++++ 15 files changed, 308 insertions(+), 20 deletions(-) create mode 100644 projects/igniteui-angular/src/lib/drop-down/drop-down.component.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/_base.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/dark/_index.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/dark/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/light/_index.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/light/_tokens.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/shared/_fluent.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/shared/_index.scss create mode 100644 projects/igniteui-angular/src/lib/drop-down/themes/shared/_indigo.scss diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss index 933e40d9220..dba6bcfcfd4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss @@ -408,13 +408,13 @@ @include rating($rating-theme-map); } - @if is-used('igx-drop-down', $exclude) { - $drop-down-theme-map: drop-down-theme( - $schema: $schema, - ); - $drop-down-theme-map: meta.call($theme-handler, $drop-down-theme-map); - @include drop-down($drop-down-theme-map); - } + // @if is-used('igx-drop-down', $exclude) { + // $drop-down-theme-map: drop-down-theme( + // $schema: $schema, + // ); + // $drop-down-theme-map: meta.call($theme-handler, $drop-down-theme-map); + // @include drop-down($drop-down-theme-map); + // } // @if is-used('igx-expansion-panel', $exclude) { // $expansion-panel-theme-map: expansion-panel-theme( diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index c666d1f77af..a1398d57c8c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -64,11 +64,11 @@ content: 'body-1' )); @include dock-manager-typography(); - @include drop-down-typography($categories: ( - header: 'overline', - item: 'body-2', - select-item: 'body-2' - )); + // @include drop-down-typography($categories: ( + // header: 'overline', + // item: 'body-2', + // select-item: 'body-2' + // )); // @include expansion-panel-typography($categories: ( // title: 'h5', // description: 'subtitle-2', diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index adf97aee28b..10b516c9440 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -67,11 +67,11 @@ content: 'body-2' )); @include dock-manager-typography(); - @include drop-down-typography($categories: ( - header: 'subtitle-2', - item: 'body-2', - select-item: 'body-2' - )); + // @include drop-down-typography($categories: ( + // header: 'subtitle-2', + // item: 'body-2', + // select-item: 'body-2' + // )); // @include expansion-panel-typography($categories: ( // title: 'subtitle-1', // description: 'body-2', diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index 86de17897c6..adc3d9ac409 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -66,7 +66,7 @@ content: 'body-1', )); @include dock-manager-typography(); - @include drop-down-typography(); + // @include drop-down-typography(); // @include expansion-panel-typography($categories: ( // title: 'body-2', // body: 'body-2', diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index 0d98c4e3061..a2f78521098 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -47,7 +47,7 @@ @include date-range-typography(); @include dialog-typography(); @include dock-manager-typography(); - @include drop-down-typography(); + // @include drop-down-typography(); // @include expansion-panel-typography(); @include excel-filtering-typography(); @include icon-button-typography(); diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.scss b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.scss new file mode 100644 index 00000000000..dd684163cd7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.scss @@ -0,0 +1,4 @@ +@use 'themes/base'; +@use 'themes/shared'; +@use 'themes/light'; +@use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index 30d8ccab1eb..780cfaea10f 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -15,7 +15,8 @@ import { EventEmitter, SimpleChanges, booleanAttribute, - Inject + Inject, + ViewEncapsulation } from '@angular/core'; import { IgxToggleDirective, ToggleViewEventArgs } from '../directives/toggle/toggle.directive'; import { IgxDropDownItemComponent } from './drop-down-item.component'; @@ -53,6 +54,8 @@ import { ConnectedPositioningStrategy } from '../services/public_api'; @Component({ selector: 'igx-drop-down', templateUrl: './drop-down.component.html', + styleUrl: 'drop-down.component.css', + encapsulation: ViewEncapsulation.None, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }], imports: [IgxToggleDirective] }) diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss b/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss new file mode 100644 index 00000000000..a74d31ad2cc --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss @@ -0,0 +1,173 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use './light/tokens' as *; + +$_theme: $material; + +@include layer(base) { + %item { + display: flex; + justify-content: flex-start; + align-items: center; + width: 100%; + white-space: nowrap; + position: relative; + height: var-get($_theme, 'size'); + color: var-get($_theme, 'item-text-color'); + + igx-divider { + position: absolute; + width: 100%; + inset-inline-start: 0; + bottom: 0; + } + + igx-icon { + --component-size: 1; + + justify-content: center; + } + } + + %header { + @include type-style(overline); + + color: var-get($_theme, 'header-text-color'); + pointer-events: none; + padding-inline: pad-inline(rem(8px), rem(12px), rem(16px)); + } + + @include b(igx-drop-down) { + position: absolute; + + @include e(list) { + @include sizable(); + + --component-size: var(--ig-size, #{var-get($_theme, 'default-size')}); + --dropdown-size: var(--component-size); + + overflow: hidden; + border-radius: var-get($_theme, 'border-radius'); + background: var-get($_theme, 'background-color'); + box-shadow: var-get($_theme, 'elevation'); + min-width: rem(128px); + border: var-get($_theme, 'border-width') solid var-get($_theme, 'border-color'); + } + + @include e(list-scroll) { + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + position: relative; + } + + @include e(item) { + @include type-style(body-2); + @extend %item; + + @include sizable(); + --component-size: var(--dropdown-size); + + cursor: pointer; + padding-inline: pad-inline(rem(16px), rem(20px), rem(24px)); + border-radius: var-get($_theme, 'item-border-radius'); + + igx-icon { + color: var-get($_theme, 'item-icon-color'); + } + + &:hover { + background: var-get($_theme, 'hover-item-background'); + color: var-get($_theme, 'hover-item-text-color'); + + igx-icon { + color: var-get($_theme, 'hover-item-icon-color'); + } + } + + &:focus { + outline: 0; + outline-color: transparent; + background: var-get($_theme, 'focused-item-background'); + color: var-get($_theme, 'focused-item-text-color'); + } + } + + @include e(inner) { + @include ellipsis(); + + display: block; + margin-inline-end: auto; + } + + @include e(content) { + display: flex; + width: 100%; + align-items: center; + gap: rem(8px); + } + + @include e(item, $m: focused) { + background: var-get($_theme, 'focused-item-background'); + color: var-get($_theme, 'focused-item-text-color'); + } + + @include e(item, $m: selected) { + background: var-get($_theme, 'selected-item-background'); + color: var-get($_theme, 'selected-item-text-color'); + + igx-icon { + color: var-get($_theme, 'selected-item-icon-color'); + } + + &:hover { + background: var-get($_theme, 'selected-hover-item-background'); + color: var-get($_theme, 'selected-hover-item-text-color'); + + igx-icon { + color: var-get($_theme, 'selected-hover-item-icon-color'); + } + } + } + + @include e(item, $mods: (selected, focused)) { + background: var-get($_theme, 'selected-focus-item-background'); + color: var-get($_theme, 'selected-focus-item-text-color'); + + &:hover { + background: var-get($_theme, 'selected-hover-item-background'); + color: var-get($_theme, 'selected-hover-item-text-color'); + + igx-icon { + color: var-get($_theme, 'selected-hover-item-icon-color'); + } + } + } + + @include e(item, $m: disabled) { + background: var-get($_theme, 'disabled-item-background'); + color: var-get($_theme, 'disabled-item-text-color'); + cursor: default; + pointer-events: none; + + igx-icon { + color: var-get($_theme, 'disabled-item-text-color'); + } + } + + @include e(header) { + @extend %item; + @extend %header; + } + + @include e(group) { + pointer-events: auto; + + label { + @extend %header; + } + } + } +} diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/dark/_index.scss b/projects/igniteui-angular/src/lib/drop-down/themes/dark/_index.scss new file mode 100644 index 00000000000..90af1412e8f --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/dark/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-drop-down, $tokens, dark); diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/dark/_tokens.scss b/projects/igniteui-angular/src/lib/drop-down/themes/dark/_tokens.scss new file mode 100644 index 00000000000..9dd5a7008ea --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/dark/_tokens.scss @@ -0,0 +1,7 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/dark/drop-down' as *; + +$material: digest-schema($dark-material-drop-down); +$bootstrap: digest-schema($dark-bootstrap-drop-down); +$fluent: digest-schema($dark-fluent-drop-down); +$indigo: digest-schema($dark-indigo-drop-down); diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/light/_index.scss b/projects/igniteui-angular/src/lib/drop-down/themes/light/_index.scss new file mode 100644 index 00000000000..a4cca3b91e1 --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/light/_index.scss @@ -0,0 +1,6 @@ +@use 'sass:meta'; +@use 'tokens'; +@use 'styles/themes/standalone' as *; + +$tokens: meta.module-variables(tokens); +@include themes(igx-drop-down, $tokens, light); diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/light/_tokens.scss b/projects/igniteui-angular/src/lib/drop-down/themes/light/_tokens.scss new file mode 100644 index 00000000000..7c1b0b43597 --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/light/_tokens.scss @@ -0,0 +1,8 @@ +@use 'igniteui-theming/sass/themes' as *; +@use 'igniteui-theming/sass/themes/schemas/components/light/drop-down' as *; + +$base: digest-schema($light-drop-down); +$material: digest-schema($material-drop-down); +$bootstrap: digest-schema($bootstrap-drop-down); +$fluent: digest-schema($fluent-drop-down); +$indigo: digest-schema($indigo-drop-down); diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_fluent.scss new file mode 100644 index 00000000000..4ae1e3b9ab5 --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_fluent.scss @@ -0,0 +1,27 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $fluent; + +@include themed-block(igx-drop-down, fluent) { + @include e(item) { + igx-icon { + --component-size: 3; + } + } + + @include e(item, $m: focused) { + outline: rem(1px) solid var-get($_theme, 'border-color'); + outline-offset: rem(-1px); + } + + @include e(header) { + @include type-style(subtitle-2); + + igx-icon { + --component-size: 3; + } + } +} diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_index.scss new file mode 100644 index 00000000000..c0b99f867cc --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_index.scss @@ -0,0 +1,2 @@ +@forward 'indigo'; +@forward 'fluent'; diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_indigo.scss new file mode 100644 index 00000000000..b309afd5ca0 --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_indigo.scss @@ -0,0 +1,52 @@ +@use 'igniteui-theming/sass/bem' as *; +@use 'igniteui-theming/sass/typography' as *; +@use 'styles/themes/standalone' as *; +@use '../light/tokens' as *; + +$_theme: $indigo; + +@include themed-block(igx-drop-down, indigo) { + %item { + padding-inline: pad-inline(rem(8px), rem(12px), rem(12px)); + + igx-icon { + $icon-size: sizable(rem(14px), rem(16px), rem(16px)); + + --component-size: inherit; + --ig-icon-size: #{$icon-size}; + --igx-icon-size: #{$icon-size}; + } + } + + @include e(list) { + padding: rem(3px); + + igx-drop-down-item { + margin-block: rem(2px); + + &:first-of-type, + &:last-of-type { + margin-block: initial; + } + + &.igx-drop-down__header { + margin-block-end: rem(2px); + } + } + } + + @include e(item) { + @extend %item; + } + + @include e(item, $m: focused) { + outline: rem(2px) solid var-get($_theme, 'focused-item-border-color'); + outline-offset: rem(-2px); + } + + @include e(header) { + @extend %item; + + padding-block: pad-inline(rem(4px), rem(6px), rem(8px)); + } +} From 0e49a586c28eeb54db445d22552cccb36c9e62aa Mon Sep 17 00:00:00 2001 From: sivanova Date: Wed, 2 Apr 2025 11:37:33 +0300 Subject: [PATCH 2/5] refactor(drop-down): update class names --- .../drop-down/_drop-down-theme.scss | 2 +- .../src/lib/drop-down/drop-down.base.ts | 6 ----- .../lib/drop-down/drop-down.component.html | 2 +- .../lib/drop-down/drop-down.component.spec.ts | 21 ++++++++-------- .../src/lib/drop-down/drop-down.component.ts | 5 ++++ .../src/lib/drop-down/themes/_base.scss | 25 ++++++++----------- .../lib/drop-down/themes/shared/_indigo.scss | 23 ++++++----------- 7 files changed, 35 insertions(+), 49 deletions(-) diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss index f0cbccbc4a9..b01790b5c36 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss @@ -81,7 +81,7 @@ $size: null ) { $name: 'igx-drop-down'; - $selector: '.igx-drop-down__list, .igx-grid-toolbar__dd-list'; + $selector: '.igx-drop-down, .igx-grid-toolbar__dd-list'; $drop-down-schema: (); @if map.has-key($schema, 'drop-down') { diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts index 935c3b72f88..4963a517313 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts @@ -98,12 +98,6 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit @HostBinding('style.maxHeight') public maxHeight = null; - /** - * @hidden @internal - */ - @HostBinding('class.igx-drop-down') - public cssClass = true; - /** * Get all non-header items * diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html index ea1e07c9c46..38e35ada453 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html @@ -1,4 +1,4 @@ -
{ expect(focusedItem.componentInstance.itemIndex).toEqual(0); expect(dropdown.collapsed).toEqual(false); - let dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + let dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement); tick(); fixture.detectChanges(); @@ -346,7 +345,7 @@ describe('IgxDropDown ', () => { dropdown.toggle(); tick(); fixture.detectChanges(); - dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement); tick(); @@ -376,7 +375,7 @@ describe('IgxDropDown ', () => { let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); expect(focusedItem).toBeDefined(); - const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement); fixture.detectChanges(); focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)); @@ -397,7 +396,7 @@ describe('IgxDropDown ', () => { dropdown.toggle(); tick(); fixture.detectChanges(); - const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); dropdownElement.triggerEventHandler('keydown', UIInteractions.getKeyboardEvent('keydown', 'ArrowDown')); tick(); fixture.detectChanges(); @@ -470,7 +469,7 @@ describe('IgxDropDown ', () => { const selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_SELECTED}`)); expect(selectedItem.componentInstance.itemIndex).toEqual(10); - const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); UIInteractions.triggerEventHandlerKeyDown('Home', dropdownElement); tick(); fixture.detectChanges(); @@ -575,7 +574,7 @@ describe('IgxDropDown ', () => { })); it('should provide correct event argument when closing through keyboard', fakeAsync(() => { spyOn(dropdown.closing, 'emit').and.callThrough(); - const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); dropdown.toggle(); tick(); @@ -739,7 +738,7 @@ describe('IgxDropDown ', () => { const selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_SELECTED}`)); expect(selectedItem.componentInstance.itemIndex).toEqual(10); - const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); UIInteractions.triggerEventHandlerKeyDown('End', dropdownElement); tick(); fixture.detectChanges(); @@ -767,7 +766,7 @@ describe('IgxDropDown ', () => { tick(); fixture.detectChanges(); - const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement); tick(); fixture.detectChanges(); @@ -820,7 +819,7 @@ describe('IgxDropDown ', () => { fixture.detectChanges(); expect(dropdown.items[10].focused).toEqual(true); - const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)); + const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down')); UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement); fixture.detectChanges(); expect(dropdown.items[11].focused).toEqual(true); diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index 780cfaea10f..0dd200fa035 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -54,6 +54,11 @@ import { ConnectedPositioningStrategy } from '../services/public_api'; @Component({ selector: 'igx-drop-down', templateUrl: './drop-down.component.html', + styles: [` + :host { + position: absolute; + } + `], styleUrl: 'drop-down.component.css', encapsulation: ViewEncapsulation.None, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }], diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss b/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss index a74d31ad2cc..00d9cae4200 100644 --- a/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss @@ -40,21 +40,16 @@ $_theme: $material; } @include b(igx-drop-down) { - position: absolute; - - @include e(list) { - @include sizable(); - - --component-size: var(--ig-size, #{var-get($_theme, 'default-size')}); - --dropdown-size: var(--component-size); - - overflow: hidden; - border-radius: var-get($_theme, 'border-radius'); - background: var-get($_theme, 'background-color'); - box-shadow: var-get($_theme, 'elevation'); - min-width: rem(128px); - border: var-get($_theme, 'border-width') solid var-get($_theme, 'border-color'); - } + @include sizable(); + + --component-size: var(--ig-size, #{var-get($_theme, 'default-size')}); + --dropdown-size: var(--component-size); + overflow: hidden; + border-radius: var-get($_theme, 'border-radius'); + background: var-get($_theme, 'background-color'); + box-shadow: var-get($_theme, 'elevation'); + min-width: rem(128px); + border: var-get($_theme, 'border-width') solid var-get($_theme, 'border-color'); @include e(list-scroll) { overflow-y: auto; diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_indigo.scss index b309afd5ca0..36c1e0d14e2 100644 --- a/projects/igniteui-angular/src/lib/drop-down/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_indigo.scss @@ -18,27 +18,19 @@ $_theme: $indigo; } } - @include e(list) { - padding: rem(3px); + padding: rem(3px); - igx-drop-down-item { - margin-block: rem(2px); + @include e(item) { + @extend %item; - &:first-of-type, - &:last-of-type { - margin-block: initial; - } + margin-block: rem(2px); - &.igx-drop-down__header { - margin-block-end: rem(2px); - } + &:first-of-type, + &:last-of-type { + margin-block: initial; } } - @include e(item) { - @extend %item; - } - @include e(item, $m: focused) { outline: rem(2px) solid var-get($_theme, 'focused-item-border-color'); outline-offset: rem(-2px); @@ -47,6 +39,7 @@ $_theme: $indigo; @include e(header) { @extend %item; + margin-block-end: rem(2px); padding-block: pad-inline(rem(4px), rem(6px), rem(8px)); } } From 2ee900cb9bbd56104228902a2fbf4116ac326786 Mon Sep 17 00:00:00 2001 From: sivanova Date: Wed, 2 Apr 2025 11:49:49 +0300 Subject: [PATCH 3/5] fix(select): remove cssClass --- projects/igniteui-angular/src/lib/select/select.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts index 61acbc50df2..1fc182cb88b 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.ts @@ -265,8 +265,8 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec /** @hidden @internal */ public override width: string; - /** @hidden @internal do not use the drop-down container class */ - public override cssClass = false; + // /** @hidden @internal do not use the drop-down container class */ + // public override cssClass = false; /** @hidden @internal */ public override allowItemsFocus = false; From ca5c9c79cfe7a09ff1dc58741162ae14ad733012 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Wed, 2 Apr 2025 12:17:56 +0300 Subject: [PATCH 4/5] refactor(select, combo): bundle drop-down styles --- .../src/lib/carousel/carousel.component.ts | 5 ----- .../src/lib/combo/combo-dropdown.component.ts | 6 +++++- .../src/lib/combo/combo.component.ts | 4 +++- .../src/lib/drop-down/themes/_base.scss | 12 +++++++++--- .../src/lib/select/select.component.html | 2 +- .../src/lib/select/select.component.ts | 10 ++++------ 6 files changed, 22 insertions(+), 17 deletions(-) diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts index 37d30dc7bd1..118b888a3c3 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts @@ -80,11 +80,6 @@ export class CarouselHammerConfig extends HammerGestureConfig { ], selector: 'igx-carousel', templateUrl: 'carousel.component.html', - styles: [` - :host { - display: block; - outline-style: none; - }`], styleUrl: 'carousel.component.css', encapsulation: ViewEncapsulation.None, imports: [IgxButtonDirective, IgxIconComponent, NgClass, NgTemplateOutlet] diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts index 733995846f3..3dbf0ab0690 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts @@ -1,5 +1,7 @@ import { - ChangeDetectorRef, Component, ElementRef, Inject, QueryList, OnDestroy, AfterViewInit, ContentChildren, Input, booleanAttribute + ChangeDetectorRef, Component, ElementRef, Inject, QueryList, OnDestroy, AfterViewInit, ContentChildren, Input, booleanAttribute, + ViewEncapsulation, + HostBinding } from '@angular/core'; import { IgxComboBase, IGX_COMBO_COMPONENT } from './combo.common'; import { IDropDownBase, IGX_DROPDOWN_BASE } from '../drop-down/drop-down.common'; @@ -17,6 +19,8 @@ import { IgxToggleDirective } from '../directives/toggle/toggle.directive'; @Component({ selector: 'igx-combo-drop-down', templateUrl: '../drop-down/drop-down.component.html', + styleUrl: '../drop-down/drop-down.component.css', + encapsulation: ViewEncapsulation.None, providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], imports: [IgxToggleDirective] }) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index 92756f24369..ed357c56338 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts @@ -1,7 +1,8 @@ import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common'; import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnInit, OnDestroy, - Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter, HostListener, DoCheck, booleanAttribute + Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter, HostListener, DoCheck, booleanAttribute, + ViewEncapsulation } from '@angular/core'; import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms'; @@ -95,6 +96,7 @@ const diffInSets = (set1: Set, set2: Set): any[] => { @Component({ selector: 'igx-combo', templateUrl: 'combo.component.html', + encapsulation: ViewEncapsulation.None, providers: [ IgxComboAPIService, { provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent }, diff --git a/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss b/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss index 00d9cae4200..cc0d35ec862 100644 --- a/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss @@ -7,6 +7,12 @@ $_theme: $material; @include layer(base) { + igx-select, + igx-combo { + display: block; + position: relative; + } + %item { display: flex; justify-content: flex-start; @@ -120,7 +126,7 @@ $_theme: $material; &:hover { background: var-get($_theme, 'selected-hover-item-background'); color: var-get($_theme, 'selected-hover-item-text-color'); - + igx-icon { color: var-get($_theme, 'selected-hover-item-icon-color'); } @@ -134,7 +140,7 @@ $_theme: $material; &:hover { background: var-get($_theme, 'selected-hover-item-background'); color: var-get($_theme, 'selected-hover-item-text-color'); - + igx-icon { color: var-get($_theme, 'selected-hover-item-icon-color'); } @@ -146,7 +152,7 @@ $_theme: $material; color: var-get($_theme, 'disabled-item-text-color'); cursor: default; pointer-events: none; - + igx-icon { color: var-get($_theme, 'disabled-item-text-color'); } diff --git a/projects/igniteui-angular/src/lib/select/select.component.html b/projects/igniteui-angular/src/lib/select/select.component.html index db33612295a..74280ced105 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.html +++ b/projects/igniteui-angular/src/lib/select/select.component.html @@ -34,7 +34,7 @@ -
Date: Wed, 2 Apr 2025 14:55:35 +0300 Subject: [PATCH 5/5] test(*): update drop-down class names --- .../lib/action-strip/action-strip.component.spec.ts | 2 +- .../autocomplete/autocomplete.directive.spec.ts | 2 +- .../src/lib/grids/grid/grid-filtering-ui.spec.ts | 10 +++++----- .../src/lib/grids/pivot-grid/pivot-grid.spec.ts | 2 +- .../src/lib/select/select.component.spec.ts | 2 +- .../src/lib/select/select.component.ts | 3 --- .../lib/simple-combo/simple-combo.component.spec.ts | 9 ++------- .../src/lib/test-utils/grid-functions.spec.ts | 2 +- src/styles/hound/components/dropdown/_overwrites.scss | 3 +-- 9 files changed, 13 insertions(+), 22 deletions(-) diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts index 52e5cca1dbb..1de1d89109a 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts @@ -8,7 +8,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxIconComponent } from '../icon/icon.component'; const ACTION_STRIP_CONTAINER_CSS = 'igx-action-strip__actions'; -const DROP_DOWN_LIST = 'igx-drop-down__list'; +const DROP_DOWN_LIST = 'igx-drop-down'; describe('igxActionStrip', () => { let fixture; diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts index 5d4fac049d4..2f10951daab 100644 --- a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts @@ -13,7 +13,7 @@ import { ConnectedPositioningStrategy, VerticalAlignment, HorizontalAlignment } import { IgxRippleDirective } from '../ripple/ripple.directive'; import { IgxIconComponent } from '../../icon/icon.component'; -const CSS_CLASS_DROPDOWNLIST = 'igx-drop-down__list'; +const CSS_CLASS_DROPDOWNLIST = 'igx-drop-down'; const CSS_CLASS_DROPDOWNLIST_SCROLL = 'igx-drop-down__list-scroll'; const CSS_CLASS_DROP_DOWN_ITEM = 'igx-drop-down__item'; const CSS_CLASS_DROP_DOWN_ITEM_FOCUSED = 'igx-drop-down__item--focused'; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 1f10776b013..f9eb17d1093 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -2052,7 +2052,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { fix.detectChanges(); GridFunctions.openFilterDD(fix.debugElement); - const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle')); + const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down.igx-toggle')); GridFunctions.selectFilteringCondition('Empty', dropdownList); fix.detectChanges(); GridFunctions.openFilterDD(fix.debugElement); @@ -5495,7 +5495,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const cascadeButton = GridFunctions.getExcelFilterCascadeButton(fix); // Verify that custom filter dropdown (the submenu) is not visible. - let subMenu = fix.nativeElement.querySelector('.igx-drop-down__list.igx-toggle--hidden'); + let subMenu = fix.nativeElement.querySelector('.igx-drop-down.igx-toggle--hidden'); expect(subMenu).not.toBeNull(); cascadeButton.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })); @@ -5504,7 +5504,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { // Verify that custom filter dropdown (the submenu) is visible. - subMenu = fix.nativeElement.querySelector('.igx-drop-down__list.igx-toggle--hidden'); + subMenu = fix.nativeElement.querySelector('.igx-drop-down.igx-toggle--hidden'); expect(subMenu).toBeNull(); })); @@ -6285,7 +6285,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { (lastExpression.querySelector('igx-select').querySelector('igx-input-group') as HTMLElement).click(); tick(); fix.detectChanges(); - const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle')); + const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down.igx-toggle')); const todayItem = dropdownList.children[0].children.find(item => item.nativeElement?.innerText === 'Today'); todayItem.nativeElement.click(); @@ -7345,7 +7345,7 @@ const verifyExcelCustomFilterSize = (fix: ComponentFixture, expectedSize: S const verifyGridSubmenuSize = (gridNativeElement: HTMLElement, expectedSize: Size) => { const outlet = gridNativeElement.querySelector('.igx-grid__outlet'); - const dropdowns = Array.from(outlet.querySelectorAll('.igx-drop-down__list')); + const dropdowns = Array.from(outlet.querySelectorAll('.igx-drop-down')); const visibleDropdown: any = dropdowns.find((d) => !d.classList.contains('igx-toggle--hidden')); const dropdownItems = visibleDropdown.querySelectorAll('igx-drop-down-item'); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts index 21b047ebe44..fd33e43f966 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.spec.ts @@ -24,7 +24,7 @@ import { setElementSize } from '../../test-utils/helper-utils.spec'; import { IgxPivotRowDimensionMrlRowComponent } from './pivot-row-dimension-mrl-row.component'; import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component'; -const CSS_CLASS_LIST = 'igx-drop-down__list'; +const CSS_CLASS_LIST = 'igx-drop-down'; const CSS_CLASS_ITEM = 'igx-drop-down__item'; const ACTIVE_CELL_CSS_CLASS = '.igx-grid-th--active'; diff --git a/projects/igniteui-angular/src/lib/select/select.component.spec.ts b/projects/igniteui-angular/src/lib/select/select.component.spec.ts index dad83f3273b..d8f04e6b3d5 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.spec.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.spec.ts @@ -23,7 +23,7 @@ const CSS_CLASS_INPUT_GROUP = 'igx-input-group'; const CSS_CLASS_INPUT = 'igx-input-group__input'; const CSS_CLASS_TOGGLE_BUTTON = 'igx-icon'; const CSS_CLASS_DROPDOWN_LIST_SCROLL = 'igx-drop-down__list-scroll'; -const CSS_CLASS_DROPDOWN_LIST = 'igx-drop-down__list'; +const CSS_CLASS_DROPDOWN_LIST = 'igx-drop-down'; const CSS_CLASS_DROPDOWN_SELECT_HEADER = 'igx-drop-down__select-header'; const CSS_CLASS_DROPDOWN_SELECT_FOOTER = 'igx-drop-down__select-footer'; const CSS_CLASS_DROPDOWN_LIST_ITEM = 'igx-drop-down__item'; diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts index d3f6e116980..7c946187520 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.ts @@ -263,9 +263,6 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec /** @hidden @internal */ public override width: string; - // /** @hidden @internal do not use the drop-down container class */ - // public override cssClass = false; - /** @hidden @internal */ public override allowItemsFocus = false; diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts index d4071b847ed..2ead7944730 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts @@ -18,12 +18,10 @@ import { IgxSimpleComboComponent, ISimpleComboSelectionChangingEventArgs } from import { IgxGridComponent } from '../grids/grid/grid.component'; import { IGX_GRID_DIRECTIVES } from '../grids/grid/public_api'; - const CSS_CLASS_COMBO = 'igx-combo'; const SIMPLE_COMBO_ELEMENT = 'igx-simple-combo'; const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down'; const CSS_CLASS_DROPDOWN = 'igx-drop-down'; -const CSS_CLASS_DROPDOWNLIST = 'igx-drop-down__list'; const CSS_CLASS_DROPDOWNLIST_SCROLL = 'igx-drop-down__list-scroll'; const CSS_CLASS_CONTENT = 'igx-combo__content'; const CSS_CLASS_CONTAINER = 'igx-display-container'; @@ -37,8 +35,6 @@ const CSS_CLASS_COMBO_INPUTGROUP = 'igx-input-group__input'; const CSS_CLASS_INPUTGROUP_REQUIRED = 'igx-input-group--required'; const CSS_CLASS_HEADER = 'header-class'; const CSS_CLASS_FOOTER = 'footer-class'; -const CSS_CLASS_ITEM = 'igx-drop-down__item'; -const CSS_CLASS_HEADER_ITEM = 'igx-drop-down__header'; const CSS_CLASS_INPUT_GROUP_REQUIRED = 'igx-input-group--required'; const CSS_CLASS_INPUT_GROUP_INVALID = 'igx-input-group--invalid'; const defaultDropdownItemHeight = 40; @@ -601,12 +597,11 @@ describe('IgxSimpleCombo', () => { const dropDownElement = comboWrapper.children[1]; expect(dropDownElement.classList.contains(CSS_CLASS_COMBO_DROPDOWN)).toBeTruthy(); - expect(dropDownElement.classList.contains(CSS_CLASS_DROPDOWN)).toBeTruthy(); expect(dropDownElement.childElementCount).toEqual(1); const dropDownList = dropDownElement.children[0]; const dropDownScrollList = dropDownElement.children[0].children[0]; - expect(dropDownList.classList.contains(CSS_CLASS_DROPDOWNLIST)).toBeTruthy(); + expect(dropDownList.classList.contains(CSS_CLASS_DROPDOWN)).toBeTruthy(); expect(dropDownList.classList.contains('igx-toggle--hidden')).toBeTruthy(); expect(dropDownScrollList.childElementCount).toEqual(0); }); @@ -2850,7 +2845,7 @@ describe('IgxSimpleCombo', () => { UIInteractions.simulateClickEvent(comboToggleButton); fixture.detectChanges(); - const comboDropDownList = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROPDOWNLIST}`)); + const comboDropDownList = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROPDOWN}`)); const firstItem = comboDropDownList.nativeElement.querySelector(`.${CSS_CLASS_DROPDOWNLISTITEM}`); UIInteractions.simulateClickEvent(firstItem); diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts index bb2a6479394..88bfb4beb31 100644 --- a/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/test-utils/grid-functions.spec.ts @@ -597,7 +597,7 @@ export class GridFunctions { } public static verifyFilteringDropDownIsOpened(fix, opened = true) { - const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down__list.igx-toggle')); + const dropdownList = fix.debugElement.query(By.css('div.igx-drop-down.igx-toggle')); expect(dropdownList !== null).toEqual(opened); } diff --git a/src/styles/hound/components/dropdown/_overwrites.scss b/src/styles/hound/components/dropdown/_overwrites.scss index 0e6ece255e7..aea5770d971 100644 --- a/src/styles/hound/components/dropdown/_overwrites.scss +++ b/src/styles/hound/components/dropdown/_overwrites.scss @@ -1,7 +1,6 @@ @use '../../../../../projects/igniteui-angular/src/lib/core/styles/themes' as *; -.igx-drop-down__list { - +.igx-drop-down { padding: rem(4px); .igx-drop-down__item {