Skip to content

Commit 5289220

Browse files
desig9steinsimeonoff
desig9stein
and
simeonoff
authored
feat(rating): adding theming for the rating component (#11439)
* feat(rating): adding themeing for the rating component Closes #11409 Co-authored-by: Simeon Simeonoff <[email protected]>
1 parent 9874a87 commit 5289220

File tree

10 files changed

+257
-1
lines changed

10 files changed

+257
-1
lines changed

‎projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -347,7 +347,7 @@
347347
$elevation: string.index($key, 'elevation');
348348

349349
@if not(list.index($ignore, $key) or $elevation) and meta.type-of($value) != 'map' {
350-
@if $prefix {
350+
@if $prefix and $prefix != ignore {
351351
--#{$prefix}-#{$key}: var(--#{$name}-#{$key}, #{$value});
352352
} @else {
353353
--#{$key}: var(--#{$name}-#{$key}, #{$value});

‎projects/igniteui-angular/src/lib/core/styles/components/_index.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
@forward 'dialog/dialog-theme';
1919
@forward 'divider/divider-theme';
2020
@forward 'dock-manager/dock-manager-theme';
21+
@forward 'rating/rating-theme';
2122
@forward 'drop-down/drop-down-theme';
2223
@forward 'expansion-panel/expansion-panel-theme';
2324
@forward 'grid/grid-theme';

‎projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-component.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@use '../../base' as *;
2+
@use 'sass:string';
3+
4+
////
5+
/// @group components
6+
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
7+
/// @requires {mixin} bem-block
8+
/// @requires {mixin} bem-elem
9+
/// @requires {mixin} bem-mod
10+
////
11+
12+
@mixin component() {
13+
igc-rating {
14+
// Register the component in the component registry
15+
@include register-component(
16+
$name: 'igc-rating',
17+
);
18+
}
19+
}

‎projects/igniteui-angular/src/lib/core/styles/components/rating/_rating-theme.scss

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
@use '../../base' as *;
2+
@use '../../themes/schemas' as *;
3+
@use '../../typography/base' as *;
4+
@use 'sass:map';
5+
6+
////
7+
/// @group themes
8+
/// @access public
9+
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
10+
////
11+
12+
/// @param {Map} $palette [null] - The palette used as basis for styling the component.
13+
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
14+
///
15+
/// @param {Color} $label-color [null] - sets the color for the label.
16+
/// @param {Color} $idle-symbol-color [null] - sets the idle color for the symbol when it is a plane text.
17+
/// @param {Color} $selected-symbol-color [null] - sets the color in selected state for the symbol when it is a plane text.
18+
/// @param {Color} $disabled-label-color [null] - sets the color for the label in disabled state.
19+
/// @param {Color} $disabled-idle-symbols-color [null] - sets the idle color for the symbol in disabled state when it is a plane text.
20+
/// @param {Color} $disabled-selected-symbols-color [null] - sets the color for the symbol in selected/disabled state when it is a plane text.
21+
///
22+
/// @requires $light-schema
23+
/// @requires extend
24+
///
25+
/// @example scss
26+
/// $my-rating-theme: rating-theme();
27+
/// @include rating($my-rating-theme);
28+
@function rating-theme(
29+
$palette: null,
30+
$schema: $light-schema,
31+
$rest...
32+
) {
33+
34+
$name: 'igc-rating';
35+
$rating-schema: ();
36+
37+
@if map.has-key($schema, $name) {
38+
$rating-schema: map.get($schema, $name);
39+
} @else {
40+
$rating-schema: $schema;
41+
}
42+
43+
$theme: apply-palette($rating-schema, $palette);
44+
45+
@return extend($theme, (name: $name), keywords($rest));
46+
}
47+
48+
/// @param {Map} $theme - The theme used to style the component.
49+
/// @requires {mixin} css-vars
50+
/// @requires var-get
51+
@mixin rating($theme) {
52+
@include css-vars($theme: $theme, $prefix: ignore);
53+
54+
igc-rating::part(symbol) {
55+
filter: none;
56+
}
57+
58+
igc-rating::part(label) {
59+
color: var-get($theme, 'label-color');
60+
}
61+
62+
igc-rating::part(symbols-wrapper) {
63+
color: var-get($theme, 'idle-symbol-color');
64+
}
65+
66+
igc-rating::part(symbols-wrapper selected) {
67+
color: var-get($theme, 'selected-symbols-color');
68+
}
69+
70+
igc-rating[disabled]::part(label) {
71+
color: var-get($theme, 'disabled-label-color');
72+
}
73+
74+
igc-rating[disabled]::part(symbols-wrapper) {
75+
color: var-get($theme, 'disabled-idle-symbols-color')
76+
}
77+
78+
igc-rating[disabled]::part(symbols-wrapper selected) {
79+
color: var-get($theme, 'disabled-selected-symbols-color');
80+
}
81+
}
82+

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
@use '../components/date-range-picker/date-range-picker-component' as date-range-picker;
4444
@use '../components/dialog/dialog-component' as dialog;
4545
@use '../components/dock-manager/dock-manager-component' as dock-manager;
46+
@use '../components/rating/rating-component' as rating;
4647
@use '../components/drop-down/drop-down-component' as drop-down;
4748
@use '../components/expansion-panel/expansion-panel-component' as expansion-panel;
4849
@use '../components/grid/grid-component' as grid;
@@ -136,6 +137,7 @@
136137
@include date-range-picker.component();
137138
@include dialog.component();
138139
@include dock-manager.component();
140+
@include rating.component();
139141
@include drop-down.component();
140142
@include expansion-panel.component();
141143
@include grid.component();

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,12 @@
272272
));
273273
}
274274

275+
@if is-used('igc-rating', $exclude) {
276+
@include rating(rating-theme(
277+
$schema: $schema
278+
));
279+
}
280+
275281
@if is-used('igx-drop-down', $exclude) {
276282
@include drop-down(drop-down-theme(
277283
$schema: $schema

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
@use './date-range-picker' as *;
2727
@use './divider' as *;
2828
@use './dock-manager' as *;
29+
@use './rating' as *;
2930
@use './drop-down' as *;
3031
@use './expansion-panel' as *;
3132
@use './gauge' as *;
@@ -88,6 +89,7 @@
8889
/// @property {Map} igx-date-range-picker [$dark-date-range-picker]
8990
/// @property {Map} igx-divider [$dark-divider]
9091
/// @property {Map} igc-dockmanager [$dark-dock-manager]
92+
/// @property {Map} igc-rating [$dark-rating]
9193
/// @property {Map} igx-drop-down [$dark-drop-down]
9294
/// @property {Map} igx-expansion-panel [$dark-expansion-panel]
9395
/// @property {Map} linear-gauge [$dark-linear-gauge]
@@ -149,6 +151,7 @@ $dark-schema: (
149151
igx-date-range: $dark-date-range-picker,
150152
igx-divider: $dark-divider,
151153
igc-dockmanager: $dark-dock-manager,
154+
igc-rating: $dark-rating,
152155
igx-drop-down: $dark-drop-down,
153156
igx-expansion-panel: $dark-expansion-panel,
154157
linear-gauge: $dark-linear-gauge,
@@ -220,6 +223,7 @@ $dark-material-schema: $dark-schema;
220223
/// @property {Map} igx-date-range-picker [$dark-fluent-date-range-picker],
221224
/// @property {Map} igx-divider [$dark-fluent-divider],
222225
/// @property {Map} igc-dockmanager [$dark-fluent-dock-manager],
226+
/// @property {Map} igc-rating [$dark-fluent-rating],
223227
/// @property {Map} igx-drop-down [$dark-fluent-drop-down],
224228
/// @property {Map} igx-expansion-panel [$dark-fluent-expansion-panel],
225229
/// @property {Map} linear-gauge [$dark-fluent-linear-gauge]
@@ -281,6 +285,7 @@ $dark-fluent-schema: (
281285
igx-date-range: $dark-fluent-date-range-picker,
282286
igx-divider: $dark-fluent-divider,
283287
igc-dockmanager: $dark-fluent-dock-manager,
288+
igc-rating: $dark-fluent-rating,
284289
igx-drop-down: $dark-fluent-drop-down,
285290
igx-expansion-panel: $dark-fluent-expansion-panel,
286291
linear-gauge: $dark-fluent-linear-gauge,
@@ -347,6 +352,7 @@ $dark-fluent-schema: (
347352
/// @property {Map} igx-date-range-picker [$dark-bootstrap-date-range-picker],
348353
/// @property {Map} igx-divider [$dark-bootstrap-divider],
349354
/// @property {Map} igc-dockmanager [$dark-bootstrap-dock-manager],
355+
/// @property {Map} igc-rating [$dark-bootstrap-rating],
350356
/// @property {Map} igx-drop-down [$dark-bootstrap-drop-down],
351357
/// @property {Map} igx-expansion-panel [$dark-bootstrap-expansion-panel],
352358
/// @property {Map} linear-gauge [$dark-bootstrap-linear-gauge]
@@ -408,6 +414,7 @@ $dark-bootstrap-schema: (
408414
igx-date-range: $dark-bootstrap-date-range-picker,
409415
igx-divider: $dark-bootstrap-divider,
410416
igc-dockmanager: $dark-bootstrap-dock-manager,
417+
igc-rating: $dark-bootstrap-rating,
411418
igx-drop-down: $dark-bootstrap-drop-down,
412419
igx-expansion-panel: $dark-bootstrap-expansion-panel,
413420
linear-gauge: $dark-bootstrap-linear-gauge,
@@ -475,6 +482,7 @@ $dark-bootstrap-schema: (
475482
/// @property {Map} igx-drop-down [$dark-indigo-drop-down]
476483
/// @property {Map} igx-divider [$dark-indigo-divider]
477484
/// @property {Map} igc-dockmanager [$dark-indigo-dock-manager]
485+
/// @property {Map} igc-rating [$dark-indigo-rating]
478486
/// @property {Map} igx-expansion-panel [$dark-indigo-expansion-panel]
479487
/// @property {Map} linear-gauge [$dark-indigo-linear-gauge]
480488
/// @property {Map} radial-gauge [$dark-indigo-radial-gauge]
@@ -536,6 +544,7 @@ $dark-indigo-schema: (
536544
igx-drop-down: $dark-indigo-drop-down,
537545
igx-divider: $dark-indigo-divider,
538546
igc-dockmanager: $dark-indigo-dock-manager,
547+
igc-rating: $dark-indigo-rating,
539548
igx-expansion-panel: $dark-indigo-expansion-panel,
540549
linear-gauge: $dark-indigo-linear-gauge,
541550
radial-gauge: $dark-indigo-radial-gauge,

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_rating.scss

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@use '../light/rating' as *;
2+
3+
////
4+
/// @group schemas
5+
/// @access public
6+
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
7+
////
8+
9+
/// Generates a dark rating schema.
10+
/// @type {Map}
11+
/// @requires $light-rating
12+
/// @see $default-palette
13+
$dark-rating: $light-rating;
14+
15+
/// Generates a dark fluent rating schema.
16+
/// @type {Map}
17+
/// @requires $fluent-rating
18+
$dark-fluent-rating: $fluent-rating;
19+
20+
/// Generates a dark bootstrap rating schema.
21+
/// @type {Map}
22+
/// @requires $bootstrap-rating
23+
$dark-bootstrap-rating: $bootstrap-rating;
24+
25+
/// Generates a dark indigo rating schema.
26+
/// @type {Map}
27+
/// @requires $indigo-rating
28+
$dark-indigo-rating: $indigo-rating;

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
@use './date-range-picker' as *;
2727
@use './divider' as *;
2828
@use './dock-manager' as *;
29+
@use './rating' as *;
2930
@use './drop-down' as *;
3031
@use './expansion-panel' as *;
3132
@use './gauge' as *;
@@ -89,6 +90,7 @@
8990
/// @property {Map} igx-date-range-picker [$light-date-range-picker ]
9091
/// @property {Map} igx-divider [$light-divider]
9192
/// @property {Map} igc-dockmanager [$light-dock-manager]
93+
/// @property {Map} igc-rating [$light-rating]
9294
/// @property {Map} igx-drop-down [$light-drop-down]
9395
/// @property {Map} igx-expansion-panel [$light-expansion-panel]
9496
/// @property {Map} linear-gauge [$light-linear-gauge]
@@ -150,6 +152,7 @@ $light-schema: (
150152
igx-date-range: $light-date-range-picker,
151153
igx-divider: $light-divider,
152154
igc-dockmanager: $light-dock-manager,
155+
igc-rating: $light-rating,
153156
igx-drop-down: $light-drop-down,
154157
igx-expansion-panel: $light-expansion-panel,
155158
linear-gauge: $light-linear-gauge,
@@ -222,6 +225,7 @@ $light-fluent-schema: (
222225
igx-date-range: $fluent-date-range-picker,
223226
igx-divider: $fluent-divider,
224227
igc-dockmanager: $fluent-dock-manager,
228+
igc-rating: $fluent-rating,
225229
igx-drop-down: $fluent-drop-down,
226230
igx-expansion-panel: $fluent-expansion-panel,
227231
linear-gauge: $fluent-linear-gauge,
@@ -289,6 +293,7 @@ $light-bootstrap-schema: (
289293
igx-date-range: $bootstrap-date-range-picker,
290294
igx-divider: $bootstrap-divider,
291295
igc-dockmanager: $bootstrap-dock-manager,
296+
igc-rating: $bootstrap-rating,
292297
igx-drop-down: $bootstrap-drop-down,
293298
igx-expansion-panel: $bootstrap-expansion-panel,
294299
linear-gauge: $bootstrap-linear-gauge,
@@ -357,6 +362,7 @@ $light-indigo-schema: (
357362
igx-drop-down: $indigo-drop-down,
358363
igx-divider: $indigo-divider,
359364
igc-dockmanager: $indigo-dock-manager,
365+
igc-rating: $indigo-rating,
360366
igx-expansion-panel: $indigo-expansion-panel,
361367
linear-gauge: $indigo-linear-gauge,
362368
radial-gauge: $indigo-radial-gauge,

0 commit comments

Comments
 (0)