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/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/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/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/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/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 30d8ccab1eb..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 @@ -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,13 @@ 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 }], 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..cc0d35ec862 --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/_base.scss @@ -0,0 +1,174 @@ +@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) { + igx-select, + igx-combo { + display: block; + position: relative; + } + + %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) { + @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..36c1e0d14e2 --- /dev/null +++ b/projects/igniteui-angular/src/lib/drop-down/themes/shared/_indigo.scss @@ -0,0 +1,45 @@ +@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}; + } + } + + padding: rem(3px); + + @include e(item) { + @extend %item; + + margin-block: rem(2px); + + &:first-of-type, + &:last-of-type { + margin-block: initial; + } + } + + @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; + + margin-block-end: rem(2px); + padding-block: pad-inline(rem(4px), rem(6px), rem(8px)); + } +} 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.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 @@ -
{ 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 {