Skip to content

Commit db4a4cd

Browse files
SisIvanovaSisIvanova
authored
refactor(drop-down): bundle styles with component (#15630)
1 parent b077410 commit db4a4cd

32 files changed

+345
-75
lines changed

‎projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
88
import { IgxIconComponent } from '../icon/icon.component';
99

1010
const ACTION_STRIP_CONTAINER_CSS = 'igx-action-strip__actions';
11-
const DROP_DOWN_LIST = 'igx-drop-down__list';
11+
const DROP_DOWN_LIST = 'igx-drop-down';
1212

1313
describe('igxActionStrip', () => {
1414
let fixture;

‎projects/igniteui-angular/src/lib/carousel/carousel.component.ts

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,6 @@ export class CarouselHammerConfig extends HammerGestureConfig {
8080
],
8181
selector: 'igx-carousel',
8282
templateUrl: 'carousel.component.html',
83-
styles: [`
84-
:host {
85-
display: block;
86-
outline-style: none;
87-
}`],
8883
styleUrl: 'carousel.component.css',
8984
encapsulation: ViewEncapsulation.None,
9085
imports: [IgxButtonDirective, IgxIconComponent, NgClass, NgTemplateOutlet]

‎projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import {
2-
ChangeDetectorRef, Component, ElementRef, Inject, QueryList, OnDestroy, AfterViewInit, ContentChildren, Input, booleanAttribute
2+
ChangeDetectorRef, Component, ElementRef, Inject, QueryList, OnDestroy, AfterViewInit, ContentChildren, Input, booleanAttribute,
3+
ViewEncapsulation,
4+
HostBinding
35
} from '@angular/core';
46
import { IgxComboBase, IGX_COMBO_COMPONENT } from './combo.common';
57
import { IDropDownBase, IGX_DROPDOWN_BASE } from '../drop-down/drop-down.common';
@@ -17,6 +19,8 @@ import { IgxToggleDirective } from '../directives/toggle/toggle.directive';
1719
@Component({
1820
selector: 'igx-combo-drop-down',
1921
templateUrl: '../drop-down/drop-down.component.html',
22+
styleUrl: '../drop-down/drop-down.component.css',
23+
encapsulation: ViewEncapsulation.None,
2024
providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }],
2125
imports: [IgxToggleDirective]
2226
})

‎projects/igniteui-angular/src/lib/combo/combo.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common';
22
import {
33
AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnInit, OnDestroy,
4-
Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter, HostListener, DoCheck, booleanAttribute
4+
Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter, HostListener, DoCheck, booleanAttribute,
5+
ViewEncapsulation
56
} from '@angular/core';
67

78
import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -95,6 +96,7 @@ const diffInSets = (set1: Set<any>, set2: Set<any>): any[] => {
9596
@Component({
9697
selector: 'igx-combo',
9798
templateUrl: 'combo.component.html',
99+
encapsulation: ViewEncapsulation.None,
98100
providers: [
99101
IgxComboAPIService,
100102
{ provide: IGX_COMBO_COMPONENT, useExisting: IgxComboComponent },

‎projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
$size: null
8282
) {
8383
$name: 'igx-drop-down';
84-
$selector: '.igx-drop-down__list, .igx-grid-toolbar__dd-list';
84+
$selector: '.igx-drop-down, .igx-grid-toolbar__dd-list';
8585
$drop-down-schema: ();
8686

8787
@if map.has-key($schema, 'drop-down') {

‎projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -408,13 +408,13 @@
408408
@include rating($rating-theme-map);
409409
}
410410

411-
@if is-used('igx-drop-down', $exclude) {
412-
$drop-down-theme-map: drop-down-theme(
413-
$schema: $schema,
414-
);
415-
$drop-down-theme-map: meta.call($theme-handler, $drop-down-theme-map);
416-
@include drop-down($drop-down-theme-map);
417-
}
411+
// @if is-used('igx-drop-down', $exclude) {
412+
// $drop-down-theme-map: drop-down-theme(
413+
// $schema: $schema,
414+
// );
415+
// $drop-down-theme-map: meta.call($theme-handler, $drop-down-theme-map);
416+
// @include drop-down($drop-down-theme-map);
417+
// }
418418

419419
// @if is-used('igx-expansion-panel', $exclude) {
420420
// $expansion-panel-theme-map: expansion-panel-theme(

‎projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,11 @@
6464
content: 'body-1'
6565
));
6666
@include dock-manager-typography();
67-
@include drop-down-typography($categories: (
68-
header: 'overline',
69-
item: 'body-2',
70-
select-item: 'body-2'
71-
));
67+
// @include drop-down-typography($categories: (
68+
// header: 'overline',
69+
// item: 'body-2',
70+
// select-item: 'body-2'
71+
// ));
7272
// @include expansion-panel-typography($categories: (
7373
// title: 'h5',
7474
// description: 'subtitle-2',

‎projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,11 @@
6767
content: 'body-2'
6868
));
6969
@include dock-manager-typography();
70-
@include drop-down-typography($categories: (
71-
header: 'subtitle-2',
72-
item: 'body-2',
73-
select-item: 'body-2'
74-
));
70+
// @include drop-down-typography($categories: (
71+
// header: 'subtitle-2',
72+
// item: 'body-2',
73+
// select-item: 'body-2'
74+
// ));
7575
// @include expansion-panel-typography($categories: (
7676
// title: 'subtitle-1',
7777
// description: 'body-2',

‎projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
content: 'body-1',
6767
));
6868
@include dock-manager-typography();
69-
@include drop-down-typography();
69+
// @include drop-down-typography();
7070
// @include expansion-panel-typography($categories: (
7171
// title: 'body-2',
7272
// body: 'body-2',

‎projects/igniteui-angular/src/lib/core/styles/typography/_material.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
@include date-range-typography();
4848
@include dialog-typography();
4949
@include dock-manager-typography();
50-
@include drop-down-typography();
50+
// @include drop-down-typography();
5151
// @include expansion-panel-typography();
5252
@include excel-filtering-typography();
5353
@include icon-button-typography();

‎projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { ConnectedPositioningStrategy, VerticalAlignment, HorizontalAlignment }
1313
import { IgxRippleDirective } from '../ripple/ripple.directive';
1414
import { IgxIconComponent } from '../../icon/icon.component';
1515

16-
const CSS_CLASS_DROPDOWNLIST = 'igx-drop-down__list';
16+
const CSS_CLASS_DROPDOWNLIST = 'igx-drop-down';
1717
const CSS_CLASS_DROPDOWNLIST_SCROLL = 'igx-drop-down__list-scroll';
1818
const CSS_CLASS_DROP_DOWN_ITEM = 'igx-drop-down__item';
1919
const CSS_CLASS_DROP_DOWN_ITEM_FOCUSED = 'igx-drop-down__item--focused';

‎projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -98,12 +98,6 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit
9898
@HostBinding('style.maxHeight')
9999
public maxHeight = null;
100100

101-
/**
102-
* @hidden @internal
103-
*/
104-
@HostBinding('class.igx-drop-down')
105-
public cssClass = true;
106-
107101
/**
108102
* Get all non-header items
109103
*

‎projects/igniteui-angular/src/lib/drop-down/drop-down.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="igx-drop-down__list" [style.width]="width"
1+
<div class="igx-drop-down" [style.width]="width"
22
igxToggle
33
(appended)="onToggleContentAppended($event)"
44
(opening)="onToggleOpening($event)" (opened)="onToggleOpened()"

‎projects/igniteui-angular/src/lib/drop-down/drop-down.component.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@use 'themes/base';
2+
@use 'themes/shared';
3+
@use 'themes/light';
4+
@use 'themes/dark';

‎projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ import { IgxSelectionAPIService } from '../core/selection';
1818
import { IgxButtonDirective } from '../directives/button/button.directive';
1919
import { ConnectedPositioningStrategy, HorizontalAlignment, OverlaySettings, VerticalAlignment } from '../services/public_api';
2020

21-
const CSS_CLASS_DROP_DOWN_BASE = 'igx-drop-down';
22-
const CSS_CLASS_LIST = 'igx-drop-down__list';
21+
const CSS_CLASS_LIST = 'igx-drop-down';
2322
const CSS_CLASS_SCROLL = 'igx-drop-down__list-scroll';
2423
const CSS_CLASS_ITEM = 'igx-drop-down__item';
2524
const CSS_CLASS_INNER_SPAN = 'igx-drop-down__inner';
@@ -328,7 +327,7 @@ describe('IgxDropDown ', () => {
328327
expect(focusedItem.componentInstance.itemIndex).toEqual(0);
329328
expect(dropdown.collapsed).toEqual(false);
330329

331-
let dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
330+
let dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
332331
UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement);
333332
tick();
334333
fixture.detectChanges();
@@ -346,7 +345,7 @@ describe('IgxDropDown ', () => {
346345
dropdown.toggle();
347346
tick();
348347
fixture.detectChanges();
349-
dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
348+
dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
350349
focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`));
351350
UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement);
352351
tick();
@@ -376,7 +375,7 @@ describe('IgxDropDown ', () => {
376375
let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`));
377376
expect(focusedItem).toBeDefined();
378377

379-
const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
378+
const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
380379
UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement);
381380
fixture.detectChanges();
382381
focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`));
@@ -397,7 +396,7 @@ describe('IgxDropDown ', () => {
397396
dropdown.toggle();
398397
tick();
399398
fixture.detectChanges();
400-
const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
399+
const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
401400
dropdownElement.triggerEventHandler('keydown', UIInteractions.getKeyboardEvent('keydown', 'ArrowDown'));
402401
tick();
403402
fixture.detectChanges();
@@ -470,7 +469,7 @@ describe('IgxDropDown ', () => {
470469

471470
const selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_SELECTED}`));
472471
expect(selectedItem.componentInstance.itemIndex).toEqual(10);
473-
const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
472+
const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
474473
UIInteractions.triggerEventHandlerKeyDown('Home', dropdownElement);
475474
tick();
476475
fixture.detectChanges();
@@ -575,7 +574,7 @@ describe('IgxDropDown ', () => {
575574
}));
576575
it('should provide correct event argument when closing through keyboard', fakeAsync(() => {
577576
spyOn(dropdown.closing, 'emit').and.callThrough();
578-
const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
577+
const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
579578

580579
dropdown.toggle();
581580
tick();
@@ -739,7 +738,7 @@ describe('IgxDropDown ', () => {
739738
const selectedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_SELECTED}`));
740739
expect(selectedItem.componentInstance.itemIndex).toEqual(10);
741740

742-
const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
741+
const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
743742
UIInteractions.triggerEventHandlerKeyDown('End', dropdownElement);
744743
tick();
745744
fixture.detectChanges();
@@ -767,7 +766,7 @@ describe('IgxDropDown ', () => {
767766
tick();
768767
fixture.detectChanges();
769768

770-
const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
769+
const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
771770
UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement);
772771
tick();
773772
fixture.detectChanges();
@@ -820,7 +819,7 @@ describe('IgxDropDown ', () => {
820819
fixture.detectChanges();
821820
expect(dropdown.items[10].focused).toEqual(true);
822821

823-
const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
822+
const dropdownElement = fixture.debugElement.query(By.css('igx-drop-down'));
824823
UIInteractions.triggerEventHandlerKeyDown('ArrowDown', dropdownElement);
825824
fixture.detectChanges();
826825
expect(dropdown.items[11].focused).toEqual(true);

‎projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ import {
1515
EventEmitter,
1616
SimpleChanges,
1717
booleanAttribute,
18-
Inject
18+
Inject,
19+
ViewEncapsulation
1920
} from '@angular/core';
2021
import { IgxToggleDirective, ToggleViewEventArgs } from '../directives/toggle/toggle.directive';
2122
import { IgxDropDownItemComponent } from './drop-down-item.component';
@@ -53,6 +54,13 @@ import { ConnectedPositioningStrategy } from '../services/public_api';
5354
@Component({
5455
selector: 'igx-drop-down',
5556
templateUrl: './drop-down.component.html',
57+
styles: [`
58+
:host {
59+
position: absolute;
60+
}
61+
`],
62+
styleUrl: 'drop-down.component.css',
63+
encapsulation: ViewEncapsulation.None,
5664
providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }],
5765
imports: [IgxToggleDirective]
5866
})

0 commit comments

Comments
 (0)