Skip to content

Commit dc51a26

Browse files
desig9steindesig9stein
authored
[input-group]: scope theme styles (#15782)
* refactor(input-group): initial themes structure, Also adding styles for material box(input,textarea,select and combo). * refactor(input-group): adding the rest of the material types styles - Removing the logic for themes inside the .ts file, removing all classes related to specific themes. - Updating the showcase sample - wrapping the label theme in base layer * refactor(input-group): adding styles for indigo - modify the input group template - disabled typography - fix some layout issues - move more styles to base - update wc version and add file type input in the sample * refactor(input-group): initial bootstrap styling * refactor(input-group): finalize input group styling * refactor(input-group): fix showcase sample error * refactor(combo): prepare combo theme * refactor(select): prepare select theme * refactor(input-group): fix some layout issues Add clear icon colors in file type input. * refactor(input-group): finalize the input-group styles also update the showcase sample to add remove the hint * refactor(combo): finalize styles * fix(input-group): use the correct color variable for focus background in indigo theme * fix(input-group): revert the variable until we have an agreement on this * fix(input-group): make sure the the upload button is using its own padding not the prefix/ suffix padding+ * fix(Combo): add display contents to the new wrapper around the combo search and content use it to only scope the variables * fix(input-group): Make sure that the search use the same shadow on focus as it uses on hover * chore(combo): cleanup commented code * fix(input-group): mace sure that the default size is working as before * fix(combo): dont remove the old class and fix the padding for the add container * fix(input-group): remove untalented import from the showcase sample * fix(combo): fix test for combo and simple combo * fix(input-group): fix native input padding in suffixed/prefixed variants * fix(combo): fix case sensitive icon color in fluent theme * fix(combo): fix case sensitive icon color/border in bootstrap theme * fix(combo): fix indigo caret color * fix(input-group): rever back to hardcoded dolor for case-icon (required by the design team)
1 parent 07908cf commit dc51a26

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+3133
-522
lines changed

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

Lines changed: 66 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<ng-content select="igx-suffix"></ng-content>
1919
</ng-container>
2020
@if (displayValue) {
21-
<igx-suffix [attr.aria-label]="resourceStrings.igx_combo_clearItems_placeholder" class="igx-combo__clear-button"
21+
<igx-suffix [attr.aria-label]="resourceStrings.igx_combo_clearItems_placeholder" class="igx-combo__clear-button igx-input-group__clear-button"
2222
(click)="handleClearItems($event)">
2323
@if (clearIconTemplate) {
2424
<ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>
@@ -28,7 +28,7 @@
2828
}
2929
</igx-suffix>
3030
}
31-
<igx-suffix class="igx-combo__toggle-button">
31+
<igx-suffix class="igx-combo__toggle-button igx-input-group__toggle-button">
3232
@if (toggleIconTemplate) {
3333
<ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: collapsed}"></ng-container>
3434
}
@@ -41,72 +41,79 @@
4141
[labelledBy]="ariaLabelledBy || label?.id || placeholder || ''"
4242
[width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)"
4343
(opened)="handleOpened()" (closed)="handleClosed()">
44-
@if (displaySearchInput) {
45-
<div class="igx-combo__search">
46-
<igx-input-group type="line">
47-
<input igxInput #searchInput name="searchInput" autocomplete="off" type="text"
48-
[(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
49-
(keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="getSearchPlaceholderText()"
50-
aria-autocomplete="list" role="searchbox" aria-label="search"/>
51-
@if (showSearchCaseIcon) {
52-
<igx-suffix (click)="toggleCaseSensitive()">
53-
<span [ngClass]="filteringOptions.caseSensitive? 'igx-combo__case-icon--active' : 'igx-combo__case-icon'">
44+
45+
<!-- The igx-combo class is needed here in order to scope the css variables -->
46+
<div class="igx-combo">
47+
@if (displaySearchInput) {
48+
<div class="igx-combo__search">
49+
<igx-input-group type="line">
50+
<input igxInput #searchInput name="searchInput" autocomplete="off" type="text"
51+
[(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
52+
(keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="getSearchPlaceholderText()"
53+
aria-autocomplete="list" role="searchbox" aria-label="search"/>
54+
@if (showSearchCaseIcon) {
55+
<igx-suffix
56+
class="igx-input-group__case-icon igx-combo__case-icon"
57+
[ngClass]="{ 'igx-combo__case-icon--active': filteringOptions.caseSensitive }"
58+
(click)="toggleCaseSensitive()"
59+
>
5460
<igx-icon
55-
family="default"
56-
name="case_sensitive"
57-
[active]="filteringOptions.caseSensitive">
61+
family="default"
62+
name="case_sensitive"
63+
[active]="filteringOptions.caseSensitive">
5864
</igx-icon>
59-
</span>
60-
</igx-suffix>
61-
}
62-
</igx-input-group>
63-
</div>
64-
}
65-
<ng-container *ngTemplateOutlet="headerTemplate">
66-
</ng-container>
67-
<div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
68-
[style.maxHeight.rem]="itemsMaxHeightInRem" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
69-
[tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id" aria-multiselectable="true"
70-
[attr.aria-activedescendant]="activeDescendant">
71-
<igx-combo-item [itemHeight]="itemHeight" *igxFor="let item of data
65+
</igx-suffix>
66+
}
67+
</igx-input-group>
68+
</div>
69+
}
70+
<ng-container *ngTemplateOutlet="headerTemplate">
71+
</ng-container>
72+
<div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
73+
[style.maxHeight.rem]="itemsMaxHeightInRem" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
74+
[tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id" aria-multiselectable="true"
75+
[attr.aria-activedescendant]="activeDescendant">
76+
<igx-combo-item [itemHeight]="itemHeight" *igxFor="let item of data
7277
| comboFiltering:filterValue:displayKey:filteringOptions:filterFunction:disableFiltering
7378
| comboGrouping:groupKey:valueKey:groupSortingDirection:compareCollator;
7479
index as rowIndex; initialChunkSize: 10; containerSize: itemsMaxHeight || containerSize; itemSize: itemHeight || itemSize, scrollOrientation: 'vertical';"
75-
[value]="item" [isHeader]="item?.isHeader" [index]="rowIndex" [role]="item?.isHeader? 'group' : 'option'">
76-
@if (item?.isHeader) {
77-
<ng-container
78-
*ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase;
80+
[value]="item" [isHeader]="item?.isHeader" [index]="rowIndex" [role]="item?.isHeader? 'group' : 'option'">
81+
@if (item?.isHeader) {
82+
<ng-container
83+
*ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase;
7984
context: {$implicit: item, data: data, valueKey: valueKey, groupKey: groupKey, displayKey: displayKey}">
80-
</ng-container>
81-
}
82-
<!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->
83-
@if (!item?.isHeader) {
84-
<ng-container #listItem
85-
*ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};">
86-
</ng-container>
87-
}
88-
</igx-combo-item>
89-
</div>
90-
@if (filteredData.length === 0 || isAddButtonVisible()) {
91-
<div class="igx-combo__add">
92-
@if (filteredData.length === 0) {
93-
<div class="igx-combo__empty">
94-
<ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty">
9585
</ng-container>
96-
</div>
97-
}
98-
@if (isAddButtonVisible()) {
99-
<igx-combo-add-item [itemHeight]="itemHeight"
100-
[tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1" class="igx-combo__add-item" role="button"
101-
[attr.aria-label]="resourceStrings.igx_combo_addCustomValues_placeholder" [index]="virtualScrollContainer.igxForOf.length">
102-
<ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault">
86+
}
87+
<!-- if item is 'null' it should be displayed and !!(item?.isHeader) would resolve it to 'false' and not display it -->
88+
@if (!item?.isHeader) {
89+
<ng-container #listItem
90+
*ngTemplateOutlet="template; context: {$implicit: item, data: data, valueKey: valueKey, displayKey: displayKey};">
10391
</ng-container>
104-
</igx-combo-add-item>
105-
}
92+
}
93+
</igx-combo-item>
10694
</div>
107-
}
108-
<ng-container *ngTemplateOutlet="footerTemplate">
109-
</ng-container>
95+
96+
@if (filteredData.length === 0 || isAddButtonVisible()) {
97+
<div class="igx-combo__add">
98+
@if (filteredData.length === 0) {
99+
<div class="igx-combo__empty">
100+
<ng-container *ngTemplateOutlet="emptyTemplate ? emptyTemplate : empty">
101+
</ng-container>
102+
</div>
103+
}
104+
@if (isAddButtonVisible()) {
105+
<igx-combo-add-item [itemHeight]="itemHeight"
106+
[tabindex]="dropdown.collapsed ? -1 : customValueFlag ? 1 : -1" class="igx-combo__add-item" role="button"
107+
[attr.aria-label]="resourceStrings.igx_combo_addCustomValues_placeholder" [index]="virtualScrollContainer.igxForOf.length">
108+
<ng-container *ngTemplateOutlet="addItemTemplate ? addItemTemplate : addItemDefault">
109+
</ng-container>
110+
</igx-combo-add-item>
111+
}
112+
</div>
113+
}
114+
<ng-container *ngTemplateOutlet="footerTemplate">
115+
</ng-container>
116+
</div>
110117
</igx-combo-drop-down>
111118
<ng-template #complex let-display let-data="data" let-key="displayKey">
112119
{{display[key]}}

‎projects/igniteui-angular/src/lib/combo/combo.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';

0 commit comments

Comments
 (0)