Skip to content

Commit 0230180

Browse files
SisIvanovaSisIvanova
committed
feat(DRP): styling updates
1 parent bdebb1f commit 0230180

18 files changed

+426
-28
lines changed

‎package-lock.json‎

Lines changed: 4 additions & 5 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
@@ -77,7 +77,7 @@
7777
"globby": "^14.1.0",
7878
"husky": "^9.1.7",
7979
"ig-typedoc-theme": "^6.0.0",
80-
"igniteui-theming": "^18.0.1",
80+
"igniteui-theming": "^18.1.0",
8181
"keep-a-changelog": "^2.6.2",
8282
"lint-staged": "^16.0.0",
8383
"lit-analyzer": "^2.0.3",

‎src/components/date-range-picker/date-range-picker.base.scss‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,43 @@
11
@use 'styles/common/component';
22
@use 'styles/utilities' as *;
3-
@use '../date-picker/themes/date-picker.base';
43

54
:host {
65
display: flex;
76
flex-direction: column;
7+
8+
igc-focus-trap {
9+
--min-width: #{sizable(rem(290px), rem(314px), rem(360px))};
10+
11+
display: flex;
12+
flex: 1 0 0;
13+
flex-direction: column;
14+
min-width: var(--min-width);
15+
max-width: calc(var(--min-width) * 2);
16+
overflow: auto hidden;
17+
18+
igc-calendar {
19+
border: none;
20+
box-shadow: none;
21+
}
22+
}
23+
24+
igc-calendar[header-orientation='vertical'] {
25+
border-bottom-left-radius: 0;
26+
border-bottom-right-radius: 0;
27+
}
28+
}
29+
30+
:host([required]) {
31+
::part(label)::after {
32+
content: '*';
33+
}
34+
}
35+
36+
[part='label'] {
37+
display: inline-block;
38+
white-space: nowrap;
39+
text-overflow: ellipsis;
40+
overflow: hidden;
841
}
942

1043
[part='inputs'] {
@@ -13,3 +46,15 @@
1346
align-items: center;
1447
gap: rem(8px)
1548
}
49+
50+
[part='actions'] {
51+
display: flex;
52+
justify-content: flex-end;
53+
padding: rem(8px);
54+
gap: rem(8px);
55+
56+
::slotted(*) {
57+
display: flex;
58+
gap: rem(8px);
59+
}
60+
}

‎src/components/date-range-picker/date-range-picker.ts‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from 'lit/decorators.js';
99
import { ifDefined } from 'lit/directives/if-defined.js';
1010
import { live } from 'lit/directives/live.js';
11-
import { themes } from '../../theming/theming-decorator.js';
11+
import { getThemeController, themes } from '../../theming/theming-decorator.js';
1212
import IgcCalendarComponent, { focusActiveDate } from '../calendar/calendar.js';
1313
import {
1414
calendarRange,
@@ -183,7 +183,7 @@ export interface IgcDateRangePickerComponentEventMap {
183183
* @csspart current - The calendar current state for element(s). Applies to date, month and year elements.
184184
*/
185185

186-
@themes(all)
186+
@themes(all, { exposeController: true })
187187
@blazorAdditionalDependencies(
188188
'IgcCalendarComponent, IgcDateTimeInputComponent, IgcDialogComponent, IgcIconComponent, IgcChipComponent, IgcInputComponent'
189189
)
@@ -276,6 +276,10 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
276276
@queryAssignedElements({ slot: 'header-date' })
277277
private readonly _headerDateSlotItems!: HTMLElement[];
278278

279+
protected get _isIndigoTheme(): boolean {
280+
return getThemeController(this)?.theme === 'indigo';
281+
}
282+
279283
// #endregion
280284

281285
// #region General properties
@@ -1094,10 +1098,13 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
10941098
<igc-button
10951099
slot="footer"
10961100
@click=${this._dialogCancel}
1097-
variant="flat"
1101+
variant="${this._isIndigoTheme ? 'outlined' : 'flat'}"
10981102
>${this.resourceStrings.cancel}</igc-button
10991103
>
1100-
<igc-button slot="footer" @click=${this._dialogDone} variant="flat"
1104+
<igc-button
1105+
slot="footer"
1106+
@click=${this._dialogDone}
1107+
variant="${this._isIndigoTheme ? 'contained' : 'flat'}"
11011108
>${this.resourceStrings.done}</igc-button
11021109
>
11031110
</igc-dialog>

‎src/components/date-range-picker/predefined-ranges-area.base.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,6 @@
1313
flex-flow: wrap;
1414
padding: rem(4px);
1515
gap: rem(8px);
16+
max-height: #{sizable(rem(84px), rem(96px), rem(120px))};
17+
overflow-y: auto;
1618
}

‎src/components/date-range-picker/predefined-ranges-area.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import {
1111
} from '../common/i18n/date-range-picker.resources.js';
1212
import type { CustomDateRange, DateRangeValue } from './date-range-picker.js';
1313
import { styles } from './predefined-ranges-area.base.css.js';
14+
import { all } from './themes/ranges-themes.js';
1415
import { styles as shared } from './themes/shared/predefined-ranges-area.common.css.js';
15-
import { all } from './themes/themes.js';
1616

1717
/* blazorSuppress */
1818
/**

‎src/components/date-range-picker/themes/dark/_themes.scss‎

Lines changed: 55 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,58 @@
1+
@use 'sass:map';
12
@use 'styles/utilities' as *;
23
@use 'igniteui-theming/sass/themes/schemas/components/dark/date-range-picker' as *;
4+
@use 'components/calendar/themes/dark/themes' as calendar-theme;
5+
@use 'components/input/themes/dark/themes' as input-theme;
36

4-
$material: digest-schema($dark-material-date-range-picker);
5-
$bootstrap: digest-schema($dark-bootstrap-date-range-picker);
6-
$fluent: digest-schema($dark-fluent-date-range-picker);
7-
$indigo: digest-schema($dark-indigo-date-range-picker);
7+
$material: map.merge(digest-schema($dark-material-date-range-picker), (
8+
default-size: map.get(calendar-theme.$material, 'default-size'),
9+
border-radius: map.get(calendar-theme.$material, 'border-radius'),
10+
border-color: map.get(calendar-theme.$material, 'border-color'),
11+
content-background: map.get(calendar-theme.$material, 'content-background'),
12+
actions-divider-color: map.get(calendar-theme.$material, 'actions-divider-color'),
13+
input-prefix-color: map.get(input-theme.$material, 'input-prefix-color'),
14+
input-prefix-color--filled: map.get(input-theme.$material, 'input-prefix-color--filled'),
15+
input-prefix-color--focused: map.get(input-theme.$material, 'input-prefix-color--focused'),
16+
helper-text-color: map.get(input-theme.$material, 'helper-text-color'),
17+
disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'),
18+
error-secondary-color: map.get(input-theme.$material, 'error-secondary-color')
19+
));
20+
$bootstrap: map.merge(digest-schema($dark-bootstrap-date-range-picker), (
21+
default-size: map.get(calendar-theme.$bootstrap, 'default-size'),
22+
border-radius: map.get(calendar-theme.$bootstrap, 'border-radius'),
23+
border-color: map.get(calendar-theme.$bootstrap, 'border-color'),
24+
content-background: map.get(calendar-theme.$bootstrap, 'content-background'),
25+
actions-divider-color: map.get(calendar-theme.$bootstrap, 'actions-divider-color'),
26+
input-prefix-color: map.get(input-theme.$bootstrap, 'input-prefix-color'),
27+
input-prefix-color--filled: map.get(input-theme.$bootstrap, 'input-prefix-color--filled'),
28+
input-prefix-color--focused: map.get(input-theme.$bootstrap, 'input-prefix-color--focused'),
29+
helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'),
30+
disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'),
31+
error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color')
32+
));
33+
$fluent: map.merge(digest-schema($dark-fluent-date-range-picker), (
34+
default-size: map.get(calendar-theme.$fluent, 'default-size'),
35+
border-radius: map.get(calendar-theme.$fluent, 'border-radius'),
36+
border-color: map.get(calendar-theme.$fluent, 'border-color'),
37+
content-background: map.get(calendar-theme.$fluent, 'content-background'),
38+
actions-divider-color: map.get(calendar-theme.$fluent, 'actions-divider-color'),
39+
input-prefix-color: map.get(input-theme.$fluent, 'input-prefix-color'),
40+
input-prefix-color--filled: map.get(input-theme.$fluent, 'input-prefix-color--filled'),
41+
input-prefix-color--focused: map.get(input-theme.$fluent, 'input-prefix-color--focused'),
42+
helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'),
43+
disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'),
44+
error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color')
45+
));
46+
$indigo: map.merge(digest-schema($dark-indigo-date-range-picker), (
47+
default-size: map.get(calendar-theme.$indigo, 'default-size'),
48+
border-radius: map.get(calendar-theme.$indigo, 'border-radius'),
49+
border-color: map.get(calendar-theme.$indigo, 'border-color'),
50+
content-background: map.get(calendar-theme.$indigo, 'content-background'),
51+
actions-divider-color: map.get(calendar-theme.$indigo, 'actions-divider-color'),
52+
input-prefix-color: map.get(input-theme.$indigo, 'input-prefix-color'),
53+
input-prefix-color--filled: map.get(input-theme.$indigo, 'input-prefix-color--filled'),
54+
input-prefix-color--focused: map.get(input-theme.$indigo, 'input-prefix-color--focused'),
55+
helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'),
56+
disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'),
57+
error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color')
58+
));

‎src/components/date-range-picker/themes/light/_themes.scss‎

Lines changed: 55 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,59 @@
1+
@use 'sass:map';
12
@use 'styles/utilities' as *;
23
@use 'igniteui-theming/sass/themes/schemas/components/light/date-range-picker' as *;
4+
@use 'components/calendar/themes/light/themes' as calendar-theme;
5+
@use 'components/input/themes/light/themes' as input-theme;
36

47
$base: digest-schema($light-date-range-picker);
5-
$material: digest-schema($material-date-range-picker);
6-
$bootstrap: digest-schema($bootstrap-date-range-picker);
7-
$fluent: digest-schema($fluent-date-range-picker);
8-
$indigo: digest-schema($indigo-date-range-picker);
8+
$material: map.merge(digest-schema($material-date-range-picker), (
9+
default-size: map.get(calendar-theme.$material, 'default-size'),
10+
border-radius: map.get(calendar-theme.$material, 'border-radius'),
11+
border-color: map.get(calendar-theme.$material, 'border-color'),
12+
content-background: map.get(calendar-theme.$material, 'content-background'),
13+
actions-divider-color: map.get(calendar-theme.$material, 'actions-divider-color'),
14+
input-prefix-color: map.get(input-theme.$material, 'input-prefix-color'),
15+
input-prefix-color--filled: map.get(input-theme.$material, 'input-prefix-color--filled'),
16+
input-prefix-color--focused: map.get(input-theme.$material, 'input-prefix-color--focused'),
17+
helper-text-color: map.get(input-theme.$material, 'helper-text-color'),
18+
disabled-text-color: map.get(input-theme.$material, 'disabled-text-color'),
19+
error-secondary-color: map.get(input-theme.$material, 'error-secondary-color')
20+
));
21+
$bootstrap: map.merge(digest-schema($bootstrap-date-range-picker), (
22+
default-size: map.get(calendar-theme.$bootstrap, 'default-size'),
23+
border-radius: map.get(calendar-theme.$bootstrap, 'border-radius'),
24+
border-color: map.get(calendar-theme.$bootstrap, 'border-color'),
25+
content-background: map.get(calendar-theme.$bootstrap, 'content-background'),
26+
actions-divider-color: map.get(calendar-theme.$bootstrap, 'actions-divider-color'),
27+
input-prefix-color: map.get(input-theme.$bootstrap, 'input-prefix-color'),
28+
input-prefix-color--filled: map.get(input-theme.$bootstrap, 'input-prefix-color--filled'),
29+
input-prefix-color--focused: map.get(input-theme.$bootstrap, 'input-prefix-color--focused'),
30+
helper-text-color: map.get(input-theme.$bootstrap, 'helper-text-color'),
31+
disabled-text-color: map.get(input-theme.$bootstrap, 'disabled-text-color'),
32+
error-secondary-color: map.get(input-theme.$bootstrap, 'error-secondary-color')
33+
));
34+
$fluent: map.merge(digest-schema($fluent-date-range-picker), (
35+
default-size: map.get(calendar-theme.$fluent, 'default-size'),
36+
border-radius: map.get(calendar-theme.$fluent, 'border-radius'),
37+
border-color: map.get(calendar-theme.$fluent, 'border-color'),
38+
content-background: map.get(calendar-theme.$fluent, 'content-background'),
39+
actions-divider-color: map.get(calendar-theme.$fluent, 'actions-divider-color'),
40+
input-prefix-color: map.get(input-theme.$fluent, 'input-prefix-color'),
41+
input-prefix-color--filled: map.get(input-theme.$fluent, 'input-prefix-color--filled'),
42+
input-prefix-color--focused: map.get(input-theme.$fluent, 'input-prefix-color--focused'),
43+
helper-text-color: map.get(input-theme.$fluent, 'helper-text-color'),
44+
disabled-text-color: map.get(input-theme.$fluent, 'disabled-text-color'),
45+
error-secondary-color: map.get(input-theme.$fluent, 'error-secondary-color')
46+
));
47+
$indigo: map.merge(digest-schema($indigo-date-range-picker), (
48+
default-size: map.get(calendar-theme.$indigo, 'default-size'),
49+
border-radius: map.get(calendar-theme.$indigo, 'border-radius'),
50+
border-color: map.get(calendar-theme.$indigo, 'border-color'),
51+
content-background: map.get(calendar-theme.$indigo, 'content-background'),
52+
actions-divider-color: map.get(calendar-theme.$indigo, 'actions-divider-color'),
53+
input-prefix-color: map.get(input-theme.$indigo, 'input-prefix-color'),
54+
input-prefix-color--filled: map.get(input-theme.$indigo, 'input-prefix-color--filled'),
55+
input-prefix-color--focused: map.get(input-theme.$indigo, 'input-prefix-color--focused'),
56+
helper-text-color: map.get(input-theme.$indigo, 'helper-text-color'),
57+
disabled-text-color: map.get(input-theme.$indigo, 'disabled-text-color'),
58+
error-secondary-color: map.get(input-theme.$indigo, 'error-secondary-color')
59+
));

‎src/components/date-range-picker/themes/ranges-themes.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { css } from 'lit';
2+
3+
import type { Themes } from '../../../theming/types.js';
4+
// Shared Styles
5+
import { styles as indigo } from './shared/predefined-ranges-area.indigo.css.js';
6+
7+
const light = {
8+
indigo: css`
9+
${indigo}
10+
`,
11+
};
12+
13+
const dark = {
14+
indigo: css`
15+
${indigo}
16+
`,
17+
};
18+
19+
export const all: Themes = { light, dark };

‎src/components/date-range-picker/themes/shared/date-range-picker.bootstrap.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,37 @@
11
@use 'styles/utilities' as *;
2+
@use '../light/themes' as *;
3+
4+
$theme: $bootstrap;
5+
6+
:host {
7+
igc-dialog {
8+
igc-calendar {
9+
border: none;
10+
}
11+
}
12+
13+
igc-dialog::part(base) {
14+
border: rem(1px) solid var-get($theme, 'border-color');
15+
}
16+
17+
igc-focus-trap {
18+
box-shadow: 0 0 0 rem(1px) var-get($theme, 'border-color');
19+
}
20+
21+
::part(helper-text) {
22+
@include type-style('body-2');
23+
24+
color: var-get($theme, 'helper-text-color');
25+
grid-auto-rows: minmax(rem(20px), auto);
26+
padding-inline-start: 0;
27+
margin-block-start: rem(4px)
28+
}
29+
}
230

331
[part='separator'] {
432
@include type-style('body-1');
533
}
34+
35+
[part='actions'] {
36+
min-height: #{sizable(rem(47px), rem(54px), rem(64px))};
37+
}

0 commit comments

Comments
 (0)