Skip to content

Commit 6531e6d

Browse files
alionazherdetskaalionazherdetska
authored
chore(styles): update signal icons through the package (#6544)
## 📄 Description This PR updates validation signal icons across form components to use CSS custom properties instead of SCSS functions. **Changes** - Replaced warning-solid icon with error-solid - Updated form-input, form-select, and validation components to use var(--post-signal-icon-success) and var(--post-signal-icon-error) - Removed deprecated success-icon() and warning-icon() SCSS functions ## 🚀 Demo https://preview-6544--swisspost-design-system-next.netlify.app/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs --- ## 🔮 Design review - [ ] Design review done - [ ] No design review needed ## 📝 Checklist - ✅ My code follows the style guidelines of this project - 🛠️ I have performed a self-review of my own code - 📄 I have made corresponding changes to the documentation - ⚠️ My changes generate no new warnings or errors - 🧪 I have added tests that prove my fix is effective or that my feature works - ✔️ New and existing unit tests pass locally with my changes
1 parent 16a9f9e commit 6531e6d

File tree

11 files changed

+37
-102
lines changed

11 files changed

+37
-102
lines changed

‎packages/styles/src/components/card.scss‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
@use './../variables/commons';
22
@use './../mixins/icons' as icons-mx;
3-
@use './../variables/icons';
43
@use '../mixins/utilities' as utilities-mx;
54

65
@use './../functions/tokens';
@@ -107,8 +106,8 @@ tokens.$default-map: components.$post-cards;
107106
@include icons-mx.mask-image('arrowright');
108107
content: '';
109108
display: inline-block;
110-
width: icons.$icon-size-default;
111-
height: icons.$icon-size-default;
109+
width: 1.5rem;
110+
height: 1.5rem;
112111
}
113112
}
114113
}

‎packages/styles/src/components/form-input.scss‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,9 @@
11
@use './../functions/tokens';
22
@use './../tokens/components';
3-
@use './../tokens/elements';
4-
@use './../mixins/forms' as forms-mx;
53
@use './../mixins/utilities';
6-
@use './../mixins/icons' as icons-mx;
7-
@use './../variables/components/forms';
84

95
tokens.$default-map: components.$post-text-input;
106

11-
@include icons-mx.custom-property(('success-solid', 'warning-solid'));
12-
137
input.form-control {
148
display: block;
159
width: 100%;
@@ -223,8 +217,7 @@ input.form-control {
223217
right: tokens.get('input-validation-icon-position-inline-end');
224218
z-index: 2;
225219
pointer-events: none;
226-
@include icons-mx.mask-image('success-solid');
227-
color: tokens.get('post-validation-success', components.$post-validation);
220+
background-image: var(--post-signal-icon-success);
228221
}
229222

230223
&:has(> input.form-control.is-invalid:not(:disabled))::after,
@@ -236,8 +229,7 @@ input.form-control {
236229
right: tokens.get('input-validation-icon-position-inline-end');
237230
z-index: 1;
238231
pointer-events: none;
239-
@include icons-mx.mask-image('warning-solid');
240-
color: tokens.get('post-validation-error', components.$post-validation);
232+
background-image: var(--post-signal-icon-error);
241233
}
242234

243235
> input.form-control ~ label {

‎packages/styles/src/components/form-select.scss‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -109,53 +109,53 @@ tokens.$default-map: components.$post-select;
109109
}
110110

111111
&.is-valid:not(:disabled) {
112-
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.success-icon();
112+
background-image: forms-fx.select-arrow-icon('enabled'), var(--post-signal-icon-success);
113113

114114
&:focus {
115-
background-image: forms-fx.select-arrow-icon('selected'), forms-fx.success-icon();
115+
background-image: forms-fx.select-arrow-icon('selected'), var(--post-signal-icon-success);
116116
}
117117

118118
&:hover {
119119
&:not([multiple]) {
120-
background-image: forms-fx.select-arrow-icon('hover'), forms-fx.success-icon();
120+
background-image: forms-fx.select-arrow-icon('hover'), var(--post-signal-icon-success);
121121
}
122122
}
123123

124124
&,
125125
&:hover:not([multiple]),
126126
&:focus {
127127
@include utilities.high-contrast-mode-dark() {
128-
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.success-icon(#e0e0e0);
128+
background-image: forms-fx.select-arrow-icon('enabled'), var(--post-signal-icon-success);
129129
}
130130

131131
@include utilities.high-contrast-mode-light() {
132-
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.success-icon(#333);
132+
background-image: forms-fx.select-arrow-icon('enabled'), var(--post-signal-icon-success);
133133
}
134134
}
135135
}
136136

137137
&.is-invalid:not(:disabled) {
138-
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.warning-icon();
138+
background-image: forms-fx.select-arrow-icon('enabled'), var(--post-signal-icon-error);
139139

140140
&:focus {
141-
background-image: forms-fx.select-arrow-icon('selected'), forms-fx.warning-icon();
141+
background-image: forms-fx.select-arrow-icon('selected'), var(--post-signal-icon-error);
142142
}
143143

144144
&:hover {
145145
&:not([multiple]) {
146-
background-image: forms-fx.select-arrow-icon('hover'), forms-fx.warning-icon();
146+
background-image: forms-fx.select-arrow-icon('hover'), var(--post-signal-icon-error);
147147
}
148148
}
149149

150150
&,
151151
&:hover:not([multiple]),
152152
&:focus {
153153
@include utilities.high-contrast-mode-dark() {
154-
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.warning-icon(#e0e0e0);
154+
background-image: forms-fx.select-arrow-icon('enabled'), var(--post-signal-icon-error);
155155
}
156156

157157
@include utilities.high-contrast-mode-light() {
158-
background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.warning-icon(#333);
158+
background-image: forms-fx.select-arrow-icon('enabled'), var(--post-signal-icon-error);
159159
}
160160
}
161161
}
@@ -278,26 +278,30 @@ tokens.$default-map: components.$post-select;
278278
}
279279

280280
&.is-valid:not(:disabled) {
281-
background-image: forms-fx.select-arrow-icon('enabled', 'dark'), forms-fx.success-icon();
281+
background-image: forms-fx.select-arrow-icon('enabled', 'dark'),
282+
var(--post-signal-icon-success);
282283

283284
&:focus {
284-
background-image: forms-fx.select-arrow-icon('selected', 'dark'), forms-fx.success-icon();
285+
background-image: forms-fx.select-arrow-icon('selected', 'dark'),
286+
var(--post-signal-icon-success);
285287
}
286288

287289
&:hover {
288-
background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms-fx.success-icon();
290+
background-image: forms-fx.select-arrow-icon('hover', 'dark'),
291+
var(--post-signal-icon-success);
289292
}
290293
}
291294

292295
&.is-invalid:not(:disabled) {
293-
background-image: forms-fx.select-arrow-icon('enabled', 'dark'), forms-fx.warning-icon();
296+
background-image: forms-fx.select-arrow-icon('enabled', 'dark'), var(--post-signal-icon-error);
294297

295298
&:focus {
296-
background-image: forms-fx.select-arrow-icon('selected', 'dark'), forms-fx.warning-icon();
299+
background-image: forms-fx.select-arrow-icon('selected', 'dark'),
300+
var(--post-signal-icon-error);
297301
}
298302

299303
&:hover {
300-
background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms-fx.warning-icon();
304+
background-image: forms-fx.select-arrow-icon('hover', 'dark'), var(--post-signal-icon-error);
301305
}
302306
}
303307
}

‎packages/styles/src/components/form-textarea.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ textarea.form-control {
7676
&.is-valid,
7777
&.is-invalid {
7878
&:not(:disabled) {
79-
background-size: tokens.get('textarea-sizing-icon');
79+
background-size: tokens.get('textarea-sizing-icon') tokens.get('textarea-sizing-icon');
8080
background-position: top tokens.get('textarea-position-block-start-validation') right
8181
tokens.get('textarea-position-inline-end-validation');
8282
background-repeat: no-repeat;

‎packages/styles/src/components/validation.scss‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
@use 'sass:map';
22
@use '../functions/tokens';
3-
@use '../functions/icons';
4-
@use './../mixins/icons' as icons-mx;
53
@use '../tokens/components';
64

75
tokens.$default-map: components.$post-validation;
86

9-
@include icons-mx.custom-property(('warning-solid', 'success-solid'));
10-
117
/*
128
Default feedback message classes
139
*/
@@ -113,10 +109,10 @@ input[type='radio'],
113109
}
114110

115111
~ .invalid-feedback::before {
116-
@include icons-mx.mask-image('warning-solid');
112+
background-image: var(--post-signal-icon-error);
117113
}
118114

119115
~ .valid-feedback::before {
120-
@include icons-mx.mask-image('success-solid');
116+
background-image: var(--post-signal-icon-success);
121117
}
122118
}

‎packages/styles/src/functions/_forms.scss‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -56,13 +56,3 @@
5656

5757
@return $state;
5858
}
59-
60-
@function success-icon($color: #107800) {
61-
$icon: icons.get-colored-svg-url('success', $color);
62-
@return url('#{$icon}');
63-
}
64-
65-
@function warning-icon($color: #b20000) {
66-
$icon: icons.get-colored-svg-url('warning', $color);
67-
@return url('#{$icon}');
68-
}

‎packages/styles/src/functions/_icons.scss‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
@use './color';
55
@use './utilities';
6-
@use './../variables/icons';
6+
@use '../svg-icon-map' as icon-vars;
77

88
@function add-fill-color($svg, $color) {
99
@if (meta.type-of($color) == string) {
@@ -59,12 +59,8 @@
5959
@function get-svg-url($icon-name) {
6060
$svg-url: '';
6161

62-
@if (map.has-key(icons.$svg-icon-map, #{$icon-name})) {
63-
$svg-url: map.get(icons.$svg-icon-map, #{$icon-name});
64-
} @else if(map.has-key(icons.$other-icons, #{$icon-name})) {
65-
$svg-url: icons.$svg-pre-path +
66-
map.get(icons.$other-icons, #{$icon-name}) +
67-
icons.$svg-post-path;
62+
@if (map.has-key(icon-vars.$svg-icon-map, #{$icon-name})) {
63+
$svg-url: map.get(icon-vars.$svg-icon-map, #{$icon-name});
6864
} @else {
6965
@error "Icon '#{$icon-name}' does not exist.";
7066
}

‎packages/styles/src/mixins/_forms.scss‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@use './../variables/components/forms';
33
@use './../mixins/utilities';
44
@use './../functions/icons';
5-
@use './../functions/forms' as forms-fx;
65
@use './../functions/utilities' as utilities-fx;
76
@use './../variables/color';
87

@@ -21,26 +20,26 @@
2120
// Used on form elements to set the correct colored validation icon
2221
@mixin validation-icons() {
2322
&.is-valid:not(:disabled) {
24-
background-image: forms-fx.success-icon();
23+
background-image: var(--post-signal-icon-success);
2524

2625
@include utilities.high-contrast-mode-dark() {
27-
background-image: forms-fx.success-icon(#e0e0e0);
26+
background-image: var(--post-signal-icon-success);
2827
}
2928

3029
@include utilities.high-contrast-mode-light() {
31-
background-image: forms-fx.success-icon(#333);
30+
background-image: var(--post-signal-icon-success);
3231
}
3332
}
3433

3534
&.is-invalid:not(:disabled) {
36-
background-image: forms-fx.warning-icon();
35+
background-image: var(--post-signal-icon-error);
3736

3837
@include utilities.high-contrast-mode-dark() {
39-
background-image: forms-fx.warning-icon(#e0e0e0);
38+
background-image: var(--post-signal-icon-error);
4039
}
4140

4241
@include utilities.high-contrast-mode-light() {
43-
background-image: forms-fx.warning-icon(#333);
42+
background-image: var(--post-signal-icon-error);
4443
}
4544
}
4645
}

‎packages/styles/src/variables/_icons.scss‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎packages/styles/src/variables/_index.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
@forward 'commons';
99
@forward 'elevation';
1010
@forward 'grid';
11-
@forward 'icons';
1211
@forward 'spacing';
1312
@forward 'sizing';
1413
@forward 'type';

0 commit comments

Comments
 (0)