From b8412d7af6d119d8a576cc2bc9e8fa183a14a09c Mon Sep 17 00:00:00 2001 From: leagrdv Date: Tue, 31 Dec 2024 10:49:06 +0100 Subject: [PATCH 1/2] fix(styles): update valid/invalid icons in form fields --- .changeset/neat-jars-destroy.md | 5 +++++ packages/styles/src/variables/components/_forms.scss | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/neat-jars-destroy.md diff --git a/.changeset/neat-jars-destroy.md b/.changeset/neat-jars-destroy.md new file mode 100644 index 0000000000..c001356046 --- /dev/null +++ b/.changeset/neat-jars-destroy.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': patch +--- + +Updated invalid and valid icons in form fields for consistency. diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss index d6832822f4..54cd7c9d9e 100644 --- a/packages/styles/src/variables/components/_forms.scss +++ b/packages/styles/src/variables/components/_forms.scss @@ -77,5 +77,5 @@ $form-range-input-height-ie: 6rem !default; $form-floating-height: $input-height-lg * $input-line-height-lg; -$valid-icon: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5647)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM25.05 9.01L14.4 25.15L7.04 17.27C6.66 16.87 6.68 16.23 7.09 15.86C7.49 15.48 8.13 15.5 8.5 15.91L14.13 21.94L23.38 7.92C23.68 7.46 24.3 7.33 24.77 7.64C25.23 7.94 25.36 8.56 25.05 9.03V9.01Z' fill='%23107800'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5647'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); -$invalid-icon: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1266_5583)'%3E%3Cpath d='M16 0C7.16 0 0 7.16 0 16C0 24.84 7.16 32 16 32C24.84 32 32 24.84 32 16C32 7.16 24.84 0 16 0ZM14.49 6.28H17.53V10.76L16.93 17.11H15.09L14.49 10.76V6.28ZM16.01 22.33C14.93 22.33 14.08 21.48 14.08 20.42C14.08 19.36 14.93 18.53 16.01 18.53C17.09 18.53 17.94 19.38 17.94 20.42C17.94 21.46 17.09 22.33 16.01 22.33Z' fill='%23B20000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1266_5583'%3E%3Crect width='32' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); +$valid-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23107800' d='M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM23.52 10.18L15.26 23.19L8.21 17.27C7.79 16.92 7.73 16.28 8.09 15.86C8.44 15.44 9.07 15.38 9.5 15.74L14.8 20.19L21.84 9.1C22.14 8.63 22.76 8.49 23.22 8.79C23.69 9.09 23.82 9.7 23.53 10.17L23.52 10.18Z'%3E%3C/path%3E%3C/svg%3E"); +$invalid-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23B20000' d='M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM14.11 6.96H18.25V11.47L17.47 17.49H14.87L14.11 11.47V6.96ZM16.18 23.63C14.73 23.63 13.79 22.62 13.79 21.4C13.79 20.18 14.73 19.19 16.18 19.19C17.63 19.19 18.57 20.23 18.57 21.4C18.57 22.57 17.63 23.63 16.18 23.63Z'%3E%3C/path%3E%3C/svg%3E"); From 97bddf870dd4e6bf0cf9f1b01925c881504a09b9 Mon Sep 17 00:00:00 2001 From: leagrdv Date: Fri, 3 Jan 2025 13:46:46 +0100 Subject: [PATCH 2/2] use common icon for valid and invalid icons --- .changeset/neat-jars-destroy.md | 2 +- .../styles/src/components/form-select.scss | 50 ++++++++++++------- packages/styles/src/functions/_forms.scss | 16 ------ packages/styles/src/mixins/_forms.scss | 13 +++-- .../src/variables/components/_forms.scss | 3 -- 5 files changed, 40 insertions(+), 44 deletions(-) diff --git a/.changeset/neat-jars-destroy.md b/.changeset/neat-jars-destroy.md index c001356046..31abea4fd0 100644 --- a/.changeset/neat-jars-destroy.md +++ b/.changeset/neat-jars-destroy.md @@ -2,4 +2,4 @@ '@swisspost/design-system-styles': patch --- -Updated invalid and valid icons in form fields for consistency. +Uniformized valid and invalid icons throughout form elements for consistency. diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss index 050c60efc5..8527c2159b 100644 --- a/packages/styles/src/components/form-select.scss +++ b/packages/styles/src/components/form-select.scss @@ -2,11 +2,11 @@ @use './../mixins/utilities'; @use './../functions/forms' as forms-fx; +@use './../functions/icons'; @use './../mixins/forms' as forms-mx; @use './../functions/tokens'; @use './../tokens/components'; @use './../tokens/elements'; -@use './../variables/components/forms'; tokens.$default-map: components.$post-select; @@ -92,15 +92,18 @@ tokens.$default-map: components.$post-select; } &.is-valid:not(:disabled) { - background-image: forms-fx.select-arrow-icon('enabled'), forms.$valid-icon; + background-image: forms-fx.select-arrow-icon('enabled'), + url('#{icons.get-colored-svg-url('success', #107800)}'); &:focus { - background-image: forms-fx.select-arrow-icon('selected'), forms.$valid-icon; + background-image: forms-fx.select-arrow-icon('selected'), + url('#{icons.get-colored-svg-url('success', #107800)}'); } &:hover { &:not([multiple]) { - background-image: forms-fx.select-arrow-icon('hover'), forms.$valid-icon; + background-image: forms-fx.select-arrow-icon('hover'), + url('#{icons.get-colored-svg-url('success', #107800)}'); } } @@ -108,25 +111,30 @@ tokens.$default-map: components.$post-select; &:hover:not([multiple]), &:focus { @include utilities.high-contrast-mode-dark() { - background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#e0e0e0'); + background-image: forms-fx.select-arrow-icon('enabled'), + url('#{icons.get-colored-svg-url('success', #e0e0e0)}'); } @include utilities.high-contrast-mode-light() { - background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#333333'); + background-image: forms-fx.select-arrow-icon('enabled'), + url('#{icons.get-colored-svg-url('success', #333333)}'); } } } &.is-invalid:not(:disabled) { - background-image: forms-fx.select-arrow-icon('enabled'), forms.$invalid-icon; + background-image: forms-fx.select-arrow-icon('enabled'), + url('#{icons.get-colored-svg-url('warning', #b20000)}'); &:focus { - background-image: forms-fx.select-arrow-icon('selected'), forms.$invalid-icon; + background-image: forms-fx.select-arrow-icon('selected'), + url('#{icons.get-colored-svg-url('warning', #b20000)}'); } &:hover { &:not([multiple]) { - background-image: forms-fx.select-arrow-icon('hover'), forms.$invalid-icon; + background-image: forms-fx.select-arrow-icon('hover'), + url('#{icons.get-colored-svg-url('warning', #b20000)}'); } } @@ -134,11 +142,13 @@ tokens.$default-map: components.$post-select; &:hover:not([multiple]), &:focus { @include utilities.high-contrast-mode-dark() { - background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#e0e0e0'); + background-image: forms-fx.select-arrow-icon('enabled'), + url('#{icons.get-colored-svg-url('warning', #e0e0e0)}'); } @include utilities.high-contrast-mode-light() { - background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#333333'); + background-image: forms-fx.select-arrow-icon('enabled'), + url('#{icons.get-colored-svg-url('warning', #333333)}'); } } } @@ -261,26 +271,32 @@ tokens.$default-map: components.$post-select; } &.is-valid:not(:disabled) { - background-image: forms-fx.select-arrow-icon('enabled', 'dark'), forms.$valid-icon; + background-image: forms-fx.select-arrow-icon('enabled', 'dark'), + url('#{icons.get-colored-svg-url('success', #107800)}'); &:focus { - background-image: forms-fx.select-arrow-icon('selected', 'dark'), forms.$valid-icon; + background-image: forms-fx.select-arrow-icon('selected', 'dark'), + url('#{icons.get-colored-svg-url('success', #107800)}'); } &:hover { - background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms.$valid-icon; + background-image: forms-fx.select-arrow-icon('hover', 'dark'), + url('#{icons.get-colored-svg-url('success', #107800)}'); } } &.is-invalid:not(:disabled) { - background-image: forms-fx.select-arrow-icon('enabled', 'dark'), forms.$invalid-icon; + background-image: forms-fx.select-arrow-icon('enabled', 'dark'), + url('#{icons.get-colored-svg-url('warning', #b20000)}'); &:focus { - background-image: forms-fx.select-arrow-icon('selected', 'dark'), forms.$invalid-icon; + background-image: forms-fx.select-arrow-icon('selected', 'dark'), + url('#{icons.get-colored-svg-url('warning', #b20000)}'); } &:hover { - background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms.$invalid-icon; + background-image: forms-fx.select-arrow-icon('hover', 'dark'), + url('#{icons.get-colored-svg-url('warning', #b20000)}'); } } } diff --git a/packages/styles/src/functions/_forms.scss b/packages/styles/src/functions/_forms.scss index 376831a38a..82178f5cbd 100644 --- a/packages/styles/src/functions/_forms.scss +++ b/packages/styles/src/functions/_forms.scss @@ -50,19 +50,3 @@ @return $state; } - -@function encode-color($color) { - @return utilities.replace($color, '#', '%23'); -} - -@function valid-icon($color) { - $encoded-color: encode-color($color); - $icon: utilities.replace(forms.$valid-icon, '%23107800', $encoded-color); - @return $icon; -} - -@function invalid-icon($color) { - $encoded-color: encode-color($color); - $icon: utilities.replace(forms.$invalid-icon, '%23B20000', $encoded-color); - @return $icon; -} diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss index e22b4d2d62..e579ccc6c8 100644 --- a/packages/styles/src/mixins/_forms.scss +++ b/packages/styles/src/mixins/_forms.scss @@ -2,7 +2,6 @@ @use './../variables/components/forms'; @use './../mixins/utilities'; @use './../functions/icons'; -@use './../functions/forms' as forms-fx; @use './../functions/utilities' as utilities-fx; // Placeholder in input fields @@ -34,26 +33,26 @@ // Used on form elements to set the correct colored validation icon @mixin validation-icons() { &.is-valid:not(:disabled) { - background-image: forms.$valid-icon; + background-image: url('#{icons.get-colored-svg-url('success', #107800)}'); @include utilities.high-contrast-mode-dark() { - background-image: forms-fx.valid-icon('#e0e0e0'); + background-image: url('#{icons.get-colored-svg-url('success', #e0e0e0)}'); } @include utilities.high-contrast-mode-light() { - background-image: forms-fx.valid-icon('#333333'); + background-image: url('#{icons.get-colored-svg-url('success', #333333)}'); } } &.is-invalid:not(:disabled) { - background-image: forms.$invalid-icon; + background-image: url('#{icons.get-colored-svg-url('warning', #b20000)}'); @include utilities.high-contrast-mode-dark() { - background-image: forms-fx.invalid-icon('#e0e0e0'); + background-image: url('#{icons.get-colored-svg-url('warning', #e0e0e0)}'); } @include utilities.high-contrast-mode-light() { - background-image: forms-fx.invalid-icon('#333333'); + background-image: url('#{icons.get-colored-svg-url('warning', #333333)}'); } } } diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss index 54cd7c9d9e..344296d172 100644 --- a/packages/styles/src/variables/components/_forms.scss +++ b/packages/styles/src/variables/components/_forms.scss @@ -76,6 +76,3 @@ $form-range-height: $form-range-thumb-height + $form-range-thumb-focus-box-shado $form-range-input-height-ie: 6rem !default; $form-floating-height: $input-height-lg * $input-line-height-lg; - -$valid-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23107800' d='M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM23.52 10.18L15.26 23.19L8.21 17.27C7.79 16.92 7.73 16.28 8.09 15.86C8.44 15.44 9.07 15.38 9.5 15.74L14.8 20.19L21.84 9.1C22.14 8.63 22.76 8.49 23.22 8.79C23.69 9.09 23.82 9.7 23.53 10.17L23.52 10.18Z'%3E%3C/path%3E%3C/svg%3E"); -$invalid-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23B20000' d='M16 0C7.18 0 0 7.18 0 16C0 24.82 7.18 32 16 32C24.82 32 32 24.82 32 16C32 7.18 24.82 0 16 0ZM14.11 6.96H18.25V11.47L17.47 17.49H14.87L14.11 11.47V6.96ZM16.18 23.63C14.73 23.63 13.79 22.62 13.79 21.4C13.79 20.18 14.73 19.19 16.18 19.19C17.63 19.19 18.57 20.23 18.57 21.4C18.57 22.57 17.63 23.63 16.18 23.63Z'%3E%3C/path%3E%3C/svg%3E");