Skip to content

Commit e7fb41d

Browse files
simeonoffsimeonoff
authored
Merge branch 'master' into mpopov/calendar/refactoring
2 parents ab7f24a + d0a3e8b commit e7fb41d

File tree

11 files changed

+278
-75
lines changed

11 files changed

+278
-75
lines changed

‎package-lock.json‎

Lines changed: 57 additions & 36 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282
"husky": "^9.1.7",
8383
"ig-typedoc-theme": "^7.0.0",
8484
"igniteui-i18n-resources": "0.7.0-alpha.8",
85-
"igniteui-theming": "^23.1.0",
85+
"igniteui-theming": "^23.1.1",
8686
"keep-a-changelog": "^2.7.1",
8787
"lint-staged": "^16.2.6",
8888
"lit-analyzer": "^2.0.3",

‎src/components/button-group/themes/shared/button/button.material.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,11 @@ $theme: $material;
6161
:host([selected]) {
6262
[part~='toggle']:active {
6363
background: var-get($theme, 'item-selected-background');
64-
color: var-get($theme, 'item-selected-text-color');
64+
color: var-get($theme, 'item-selected-hover-text-color');
6565
border-color: var-get($theme, 'item-selected-border-color');
6666

6767
::slotted(igc-icon) {
68-
color: var-get($theme, 'item-selected-icon-color');
68+
color: var-get($theme, 'item-selected-hover-icon-color');
6969
}
7070

7171
&::before {

‎src/components/button/themes/button/shared/button.material.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,28 @@ $outlined-theme: $material-outlined;
2626
transition: all .1s ease-in-out;
2727
}
2828

29+
:host(:not([disabled])[variant='flat']) [part~='base'],
30+
:host(:not(:disabled)[variant='flat']) [part~='base'] {
31+
&:active {
32+
::slotted(igc-icon) {
33+
color: var-get($flat-theme, 'active-foreground');
34+
}
35+
}
36+
}
37+
38+
:host(:not([disabled])[variant='flat']) [part='base focused'],
39+
:host(:not(:disabled)[variant='flat']) [part='base focused'] {
40+
::slotted(igc-icon) {
41+
color: var-get($flat-theme, 'icon-color-hover');
42+
}
43+
44+
&:active {
45+
::slotted(igc-icon) {
46+
color: var-get($flat-theme, 'focus-foreground');
47+
}
48+
}
49+
}
50+
2951
:host(:not([disabled])[variant='outlined']) [part~='base'],
3052
:host(:not(:disabled)[variant='outlined']) [part~='base'] {
3153
&:hover {
@@ -34,12 +56,28 @@ $outlined-theme: $material-outlined;
3456

3557
&:active {
3658
border-color: var-get($outlined-theme, 'active-border-color');
59+
60+
::slotted(igc-icon) {
61+
color: var-get($outlined-theme, 'active-foreground');
62+
}
3763
}
3864
}
3965

4066
:host(:not([disabled])[variant='outlined']) [part='base focused'],
4167
:host(:not(:disabled)[variant='outlined']) [part='base focused'] {
4268
border-color: var-get($outlined-theme, 'focus-visible-border-color');
69+
70+
::slotted(igc-icon) {
71+
color: var-get($outlined-theme, 'focus-visible-foreground');
72+
}
73+
74+
&:active {
75+
border-color: var-get($outlined-theme, 'focus-border-color');
76+
77+
::slotted(igc-icon) {
78+
color: var-get($outlined-theme, 'focus-foreground');
79+
}
80+
}
4381
}
4482

4583
:host(:not([disabled])[variant='contained']) [part~='base'],

‎src/components/dialog/dialog.spec.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,17 @@ describe('Dialog', () => {
266266
await waitUntil(() => eventSpy.calledWith('igcClosed'));
267267
expect(dialog.open).to.be.false;
268268
});
269+
270+
it('issue 1983 - does not close the dialog when keepOpenOnEscape is true and a non-cancelable close event is fired', async () => {
271+
dialog.keepOpenOnEscape = true;
272+
await dialog.show();
273+
274+
nativeDialog.dispatchEvent(new Event('close'));
275+
await elementUpdated(dialog);
276+
277+
expect(dialog.open).to.be.true;
278+
expect(nativeDialog.open).to.be.true;
279+
});
269280
});
270281

271282
describe('Form', () => {

‎src/components/dialog/dialog.ts‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { registerComponent } from '../common/definitions/register.js';
1111
import type { Constructor } from '../common/mixins/constructor.js';
1212
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
1313
import { partMap } from '../common/part-map.js';
14-
import { numberInRangeInclusive } from '../common/util.js';
14+
import { bindIf, numberInRangeInclusive } from '../common/util.js';
1515
import { styles } from './themes/dialog.base.css.js';
1616
import { styles as shared } from './themes/shared/dialog.common.css.js';
1717
import { all } from './themes/themes.js';
@@ -163,6 +163,10 @@ export default class IgcDialogComponent extends EventEmitterMixin<
163163
return true;
164164
}
165165

166+
private _closeWithEvent(): void {
167+
this._hide(true);
168+
}
169+
166170
protected _handleFormSubmit(event: SubmitEvent): void {
167171
const form = event.target as HTMLFormElement;
168172

@@ -172,7 +176,7 @@ export default class IgcDialogComponent extends EventEmitterMixin<
172176
}
173177

174178
if (!event.defaultPrevented) {
175-
this._hide(true);
179+
this._closeWithEvent();
176180
}
177181
}
178182
}
@@ -181,7 +185,16 @@ export default class IgcDialogComponent extends EventEmitterMixin<
181185
event.preventDefault();
182186

183187
if (!this.keepOpenOnEscape) {
184-
this._hide(true);
188+
this._closeWithEvent();
189+
}
190+
}
191+
192+
private _handleClose(): void {
193+
// When a non-cancelable close event is fired (e.g., from repeated Escape presses),
194+
// reopen the dialog to prevent the broken state with visible backdrop.
195+
// Note that this handler is invoked only when `keepOpenOnEscape` is true.
196+
if (this.open) {
197+
this._dialog.showModal();
185198
}
186199
}
187200

@@ -192,7 +205,7 @@ export default class IgcDialogComponent extends EventEmitterMixin<
192205
const inY = numberInRangeInclusive(clientY, rect.top, rect.bottom);
193206

194207
if (!(inX && inY)) {
195-
this._hide(true);
208+
this._closeWithEvent();
196209
}
197210
}
198211
}
@@ -262,7 +275,7 @@ export default class IgcDialogComponent extends EventEmitterMixin<
262275
${this.hideDefaultAction
263276
? nothing
264277
: html`
265-
<igc-button variant="flat" @click=${() => this._hide(true)}>
278+
<igc-button variant="flat" @click=${this._closeWithEvent}>
266279
OK
267280
</igc-button>
268281
`}
@@ -283,10 +296,11 @@ export default class IgcDialogComponent extends EventEmitterMixin<
283296
${ref(this._dialogRef)}
284297
part=${partMap({ base: true, titled: hasTitle, footed: hasFooter })}
285298
role="dialog"
286-
aria-label=${this.ariaLabel || nothing}
287-
aria-labelledby=${labelledBy || nothing}
299+
aria-label=${bindIf(this.ariaLabel, this.ariaLabel)}
300+
aria-labelledby=${bindIf(labelledBy, labelledBy)}
288301
@click=${this._handleClick}
289302
@cancel=${this._handleCancel}
303+
@close=${bindIf(this.keepOpenOnEscape, this._handleClose)}
290304
>
291305
${this._renderHeader()} ${this._renderContent()} ${this._renderFooter()}
292306
</dialog>

‎src/components/stepper/themes/step/shared/step.common.scss‎

Lines changed: 118 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,30 @@ $theme: $material;
2323

2424
&:hover {
2525
background: var-get($theme, 'step-hover-background');
26-
color: var-get($theme, 'title-hover-color')
26+
color: var-get($theme, 'title-hover-color');
27+
28+
[part~='title'] {
29+
color: var-get($theme, 'title-hover-color');
30+
}
31+
32+
[part~='subtitle'] {
33+
color: var-get($theme, 'subtitle-hover-color')
34+
}
2735
}
2836

2937
&:focus,
3038
&:focus-within,
3139
&:active {
3240
background: var-get($theme, 'step-focus-background');
3341
color: var-get($theme, 'title-focus-color');
42+
43+
[part~='title'] {
44+
color: var-get($theme, 'title-focus-color');
45+
}
46+
47+
[part~='subtitle'] {
48+
color: var-get($theme, 'subtitle-focus-color')
49+
}
3450
}
3551
}
3652

@@ -83,27 +99,6 @@ $theme: $material;
8399
}
84100
}
85101

86-
:host([complete]) {
87-
[part~='header'] {
88-
&:hover {
89-
background: var-get($theme, 'complete-step-hover-background');
90-
}
91-
92-
&:focus,
93-
&:focus-within,
94-
&:active {
95-
background: var-get($theme, 'complete-step-focus-background');
96-
}
97-
}
98-
99-
[part~='body'] {
100-
&::before {
101-
border-inline-start-style: var-get($theme, 'complete-step-separator-style');
102-
border-inline-start-color: var-get($theme, 'complete-step-separator-color');
103-
}
104-
}
105-
}
106-
107102
[part~='complete-end'] {
108103
&::before {
109104
border-block-start-style: var-get($theme, 'complete-step-separator-style');
@@ -132,18 +127,105 @@ $theme: $material;
132127
[part~='subtitle'] {
133128
color: var-get($theme, 'invalid-subtitle-color')
134129
}
130+
131+
[part~='header'] {
132+
background: var-get($theme, 'invalid-step-background');
133+
134+
&:hover {
135+
background: var-get($theme, 'invalid-step-hover-background');
136+
137+
[part~='title'] {
138+
color: var-get($theme, 'invalid-title-hover-color');
139+
}
140+
141+
[part~='subtitle'] {
142+
color: var-get($theme, 'invalid-subtitle-hover-color')
143+
}
144+
}
145+
146+
&:focus,
147+
&:focus-within,
148+
&:active {
149+
background: var-get($theme, 'invalid-step-focus-background');
150+
151+
[part~='title'] {
152+
color: var-get($theme, 'invalid-title-focus-color');
153+
}
154+
155+
[part~='subtitle'] {
156+
color: var-get($theme, 'invalid-subtitle-focus-color')
157+
}
158+
}
159+
}
160+
}
161+
162+
:host([complete]:not([active])) {
163+
[part~='header'] {
164+
background: var-get($theme, 'complete-step-background');
165+
166+
&:hover {
167+
background: var-get($theme, 'complete-step-hover-background');
168+
169+
[part~='title'] {
170+
color: var-get($theme, 'complete-title-hover-color');
171+
}
172+
173+
[part~='subtitle'] {
174+
color: var-get($theme, 'complete-subtitle-hover-color');
175+
}
176+
}
177+
178+
&:focus,
179+
&:focus-within,
180+
&:active {
181+
background: var-get($theme, 'complete-step-focus-background');
182+
183+
[part~='title'] {
184+
color: var-get($theme, 'complete-title-focus-color');
185+
}
186+
187+
[part~='subtitle'] {
188+
color: var-get($theme, 'complete-subtitle-focus-color');
189+
}
190+
}
191+
}
192+
193+
[part~='body'] {
194+
&::before {
195+
border-inline-start-style: var-get($theme, 'complete-step-separator-style');
196+
border-inline-start-color: var-get($theme, 'complete-step-separator-color');
197+
}
198+
}
135199
}
136200

137201
:host([active]) {
138202
[part~='header'] {
203+
background: var-get($theme, 'current-step-background');
204+
139205
&:hover {
140206
background: var-get($theme, 'current-step-hover-background');
207+
208+
[part~='title'] {
209+
color: var-get($theme, 'current-title-hover-color');
210+
}
211+
212+
[part~='subtitle'] {
213+
color: var-get($theme, 'current-subtitle-hover-color');
214+
}
141215
}
142216

143217
&:focus,
144218
&:focus-within,
145219
&:active {
146220
background: var-get($theme, 'current-step-focus-background');
221+
222+
[part~='title'] {
223+
color: var-get($theme, 'current-title-focus-color');
224+
}
225+
226+
[part~='subtitle'] {
227+
color: var-get($theme, 'current-subtitle-focus-color');
228+
}
147229
}
148230
}
149231

@@ -163,6 +245,12 @@ $theme: $material;
163245
}
164246
}
165247

248+
[part~='content'] {
249+
@include type-style('body-2');
250+
251+
color: var-get($theme, 'content-foreground');
252+
}
253+
166254
[part~='disabled'] {
167255
&:focus,
168256
&:focus-visible,
@@ -172,6 +260,14 @@ $theme: $material;
172260
[part='header'] {
173261
background: var-get($theme, 'step-background');
174262
}
263+
264+
[part~='title'] {
265+
color: var-get($theme, 'disabled-title-color');
266+
}
267+
268+
[part~='subtitle'] {
269+
color: var-get($theme, 'disabled-subtitle-color');
270+
}
175271
}
176272

177273
[part~='indicator'] {

‎src/components/stepper/themes/step/shared/step.indigo.scss‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,6 @@ $theme: $indigo;
2525
}
2626
}
2727

28-
[part~='content'] {
29-
@include type-style('body-2');
30-
31-
color: var-get($theme, 'content-foreground');
32-
}
33-
3428
[part~='disabled'] {
3529
[part~='indicator'] {
3630
box-shadow: inset 0 0 0 var(--indicator-box-shadow-size) var-get($theme, 'disabled-indicator-outline');

‎src/components/tabs/themes/shared/tab/tab.common.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@
44
$theme: $material;
55

66
[part='tab-header'] {
7+
--_border-width: #{rem(1px)};
8+
79
color: var-get($theme, 'item-text-color');
810
background: var-get($theme, 'item-background');
911
border-radius: var-get($theme, 'border-radius');
10-
border: rem(1px) solid var-get($theme, 'border-color');
12+
border: var(--_border-width) solid var-get($theme, 'border-color');
1113

1214
::slotted(igc-icon) {
1315
color: var-get($theme, 'item-icon-color');

0 commit comments

Comments
 (0)