From 2e8a667cc445398c6238ab81c27ea9bf4737307d Mon Sep 17 00:00:00 2001 From: davidritter-dotcom Date: Tue, 2 Jul 2024 16:04:41 +0200 Subject: [PATCH 1/9] feat(styles, documentation): disabled and animation --- .../components/forms/textarea/textarea.stories.ts | 2 +- packages/styles/src/components/floating-label.scss | 7 +++++++ packages/styles/src/components/forms.scss | 13 ++----------- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts index 74e3de53c5..2a6ff3e1fb 100644 --- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts +++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts @@ -201,7 +201,7 @@ function renderTextarea(args: Args, context: StoryContext) { id=${context.id} class=${classes} defaultValue=${args.value ?? nothing} - placeholder=${useAriaLabel ? args.label : ' '} + placeholder=${useAriaLabel ? args.label : ''} rows=${args.rows} ?disabled=${args.disabled} aria-label=${useAriaLabel ? args.label : nothing} diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss index 01f0e0f8ab..076a56edf5 100644 --- a/packages/styles/src/components/floating-label.scss +++ b/packages/styles/src/components/floating-label.scss @@ -16,6 +16,7 @@ @use './../variables/spacing'; @use './../variables/components/forms'; @use './../variables/components/form-validation'; +@use './../variables/animation'; .form-floating { > label { @@ -43,9 +44,15 @@ // disable stylelint here, because the classes are coming from bs5 @extend .form-control-lg; /* stylelint-disable-line */ + @include forms-mx.placeholder { + opacity: 0; + } + &:focus { @include forms-mx.placeholder { color: rgba(var(--post-contrast-color-rgb), 0.6); + opacity: 1; + transition: opacity animation.$transition-base-timing; } } diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss index c204699045..307f27b167 100644 --- a/packages/styles/src/components/forms.scss +++ b/packages/styles/src/components/forms.scss @@ -91,18 +91,9 @@ select.form-control-rg:not([size]):not([multiple]) { } } - &:disabled { - color: forms.$input-disabled-border-color; - border: forms.$input-disabled-border-style; - + @include utilities.disabled-style { ~ .form-text { - color: forms.$input-disabled-color; - } - - @include utilities.high-contrast-mode { - border-color: GrayText !important; - background-color: Field !important; - color: GrayText; + color: var(--post-gray-40); } } From 0aa6dd8991d53e67a0b754d61b909d4c2975bf84 Mon Sep 17 00:00:00 2001 From: davidritter-dotcom Date: Wed, 3 Jul 2024 11:12:41 +0200 Subject: [PATCH 2/9] feat(styles): input hover style --- packages/styles/src/components/floating-label.scss | 7 +++++++ packages/styles/src/components/forms.scss | 2 ++ 2 files changed, 9 insertions(+) diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss index 076a56edf5..7398347129 100644 --- a/packages/styles/src/components/floating-label.scss +++ b/packages/styles/src/components/floating-label.scss @@ -17,6 +17,7 @@ @use './../variables/components/forms'; @use './../variables/components/form-validation'; @use './../variables/animation'; +@use './../variables/color' as c; .form-floating { > label { @@ -79,6 +80,12 @@ } } + &:hover { + ~ label { + color: c.$black; + } + } + &[type='file'] { &:focus, &:not(:placeholder-shown) { diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss index 307f27b167..548be957d3 100644 --- a/packages/styles/src/components/forms.scss +++ b/packages/styles/src/components/forms.scss @@ -6,6 +6,7 @@ @use './../variables/components/forms'; @use './../variables/type'; @use './../variables/spacing'; +@use './../variables/color'; @use './../functions/sizing'; @@ -85,6 +86,7 @@ select.form-control-rg:not([size]):not([multiple]) { } &:hover { + border-color: color.$black; @include utilities.high-contrast-mode { border-color: Highlight; } From 8b1729f7a396eef4beacaf4f59cc42e10a96a4d5 Mon Sep 17 00:00:00 2001 From: davidritter-dotcom Date: Wed, 3 Jul 2024 15:21:44 +0200 Subject: [PATCH 3/9] feat(styles, documentation): removed valid success message on textarea and icons inside input --- .../forms/textarea/textarea.stories.ts | 3 --- .../src/components/form-validation.scss | 20 +------------------ 2 files changed, 1 insertion(+), 22 deletions(-) diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts index 2a6ff3e1fb..9c09663e16 100644 --- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts +++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts @@ -188,9 +188,6 @@ function renderTextarea(args: Args, context: StoryContext) { ? html` ` : null; const contextual = [ - args.validation === 'is-valid' - ? html`
Ggranda sukceso!
` - : null, args.validation === 'is-invalid' ? html`
Eraro okazis!
` : null, diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss index a059119704..2b858feb17 100644 --- a/packages/styles/src/components/form-validation.scss +++ b/packages/styles/src/components/form-validation.scss @@ -148,31 +148,13 @@ } textarea.form-control { - &.is-invalid, &.is-valid { + background-image: b.escape-svg(form-validation.$form-feedback-icon-valid); background-position: right spacing.$size-micro top spacing.$size-mini; &.form-control-sm { background-position: right spacing.$size-micro top spacing.$size-mini; } - } -} - -.form-control:not([type='file']) { - &.is-invalid { - background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid); - - @include utilities-mx.high-contrast-mode() { - background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-dark); - - @media (prefers-color-scheme: light) { - background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid-hcm-light); - } - } - } - - &.is-valid { - background-image: b.escape-svg(form-validation.$form-feedback-icon-valid); @include utilities-mx.high-contrast-mode() { background-image: b.escape-svg(form-validation.$form-feedback-icon-valid-hcm-dark); From f159c65584e09e5f0a381a0e3a35e1dfc16f5413 Mon Sep 17 00:00:00 2001 From: davidritter-dotcom Date: Wed, 10 Jul 2024 10:17:27 +0200 Subject: [PATCH 4/9] fix(styles): fix inline-padding floating label small --- packages/styles/src/components/floating-label.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss index 7398347129..24b5d746cc 100644 --- a/packages/styles/src/components/floating-label.scss +++ b/packages/styles/src/components/floating-label.scss @@ -112,7 +112,7 @@ ~ label { font-size: forms.$form-floating-label-font-size-placeholder-sm; padding-top: forms.$form-floating-label-padding-t-sm; - padding-inline: calc(#{forms.$form-floating-padding-x-sm} - #{forms.$input-border-width}); + padding-inline: forms.$form-floating-padding-x-sm; } &:focus, From 387384ea7dcaf25acdac4569bb21d5189c09cf42 Mon Sep 17 00:00:00 2001 From: davidritter-dotcom Date: Wed, 10 Jul 2024 11:44:34 +0200 Subject: [PATCH 5/9] fix(styles): fix paddings and valid icon inside --- .../src/components/form-validation.scss | 53 +++---------------- packages/styles/src/components/forms.scss | 2 +- 2 files changed, 9 insertions(+), 46 deletions(-) diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss index 2b858feb17..e7fb3b8452 100644 --- a/packages/styles/src/components/form-validation.scss +++ b/packages/styles/src/components/form-validation.scss @@ -52,30 +52,6 @@ } } - .form-control { - @include b.form-validation-state-selector($state) { - padding-right: b.$input-height-inner; - background-repeat: no-repeat; - background-position: right b.$input-height-inner-quarter center; - background-size: form-validation.$form-feedback-icon-size; - - &.form-control-sm { - background-size: forms.$form-bg-size-sm; - } - - &.form-control-lg { - background-size: forms.$form-bg-size; - } - } - } - - textarea.form-control { - @include b.form-validation-state-selector($state) { - padding-right: b.$input-height-inner; - background-position: top b.$input-height-inner-quarter right b.$input-height-inner-quarter; - } - } - .input-group { > .form-control:not(:focus), > .form-select:not(:focus), @@ -125,35 +101,22 @@ padding: form-validation.$form-feedback-padding-y-sm form-validation.$form-feedback-padding-x; } } +} - &.is-invalid, +textarea.form-control { &.is-valid { - padding-right: spacing.$size-small-huge; // For deprecated form-control-rg + padding-right: b.$input-height-inner; + background-image: b.escape-svg(form-validation.$form-feedback-icon-valid); + background-position: right spacing.$size-regular top spacing.$size-mini; background-repeat: no-repeat; - background-size: forms.$form-bg-size; // Duplicated rule in form-select for arrow size. - background-position: right b.$input-height-inner-quarter center; + background-size: form-validation.$form-feedback-icon-size; - &.form-select-sm, &.form-control-sm { - padding-right: spacing.$size-bigger-big; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon - background-size: forms.$form-bg-size-sm; // Add space between background icons (ours and the one from bootstrap). Duplicated rule in form-select for arrow size. + background-size: forms.$form-bg-size-sm; } - &.form-select-lg, &.form-control-lg { - padding-right: spacing.$size-small-huge; // Included in bootstrap and prevent native icon (e.g. with input[type=date]) to stack over success icon - background-size: forms.$form-bg-size; // Add space between background icons (ours and the one from bootstrap). Duplicated rule in form-select for arrow size. - } - } -} - -textarea.form-control { - &.is-valid { - background-image: b.escape-svg(form-validation.$form-feedback-icon-valid); - background-position: right spacing.$size-micro top spacing.$size-mini; - - &.form-control-sm { - background-position: right spacing.$size-micro top spacing.$size-mini; + background-size: forms.$form-bg-size; } @include utilities-mx.high-contrast-mode() { diff --git a/packages/styles/src/components/forms.scss b/packages/styles/src/components/forms.scss index 548be957d3..c6de0cba1a 100644 --- a/packages/styles/src/components/forms.scss +++ b/packages/styles/src/components/forms.scss @@ -95,7 +95,7 @@ select.form-control-rg:not([size]):not([multiple]) { @include utilities.disabled-style { ~ .form-text { - color: var(--post-gray-40); + color: forms.$input-disabled-color; } } From 03ee43db58b3a946238a4ad85f1b5543e0f0d627 Mon Sep 17 00:00:00 2001 From: davidritter-dotcom Date: Wed, 10 Jul 2024 12:30:44 +0200 Subject: [PATCH 6/9] feat(styles): add changeset --- .changeset/gold-rabbits-train.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/gold-rabbits-train.md diff --git a/.changeset/gold-rabbits-train.md b/.changeset/gold-rabbits-train.md new file mode 100644 index 0000000000..8dc13856b5 --- /dev/null +++ b/.changeset/gold-rabbits-train.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': patch +'@swisspost/design-system-styles': patch +--- + +removed the icon from inside the input and invalid textarea From cefb30ff55964d7433ba021a959cfc7f9153c27d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 23 Jul 2024 08:26:29 +0200 Subject: [PATCH 7/9] Update .changeset/gold-rabbits-train.md --- .changeset/gold-rabbits-train.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/gold-rabbits-train.md b/.changeset/gold-rabbits-train.md index 8dc13856b5..63cfc9b529 100644 --- a/.changeset/gold-rabbits-train.md +++ b/.changeset/gold-rabbits-train.md @@ -3,4 +3,4 @@ '@swisspost/design-system-styles': patch --- -removed the icon from inside the input and invalid textarea +Removed the icon from inside form-controls (`input`, `select`, `textarea`). From 69519aea843cee47daff151941d602bfa8678489 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 23 Jul 2024 08:27:25 +0200 Subject: [PATCH 8/9] chore(styles, docs): remove success icon on textarea elements and update docs --- .../forms/textarea/textarea.stories.ts | 7 +++-- .../src/components/form-validation.scss | 26 ------------------- 2 files changed, 5 insertions(+), 28 deletions(-) diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts index f8d1567083..d2ccae6656 100644 --- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts +++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts @@ -188,10 +188,13 @@ function renderTextarea(args: Args, context: StoryContext) { ? html` ` : null; const contextual = [ + args.validation === 'is-valid' + ? html`
Ggranda sukceso!
` + : null, args.validation === 'is-invalid' - ? html`
Eraro okazis!
` + ? html`
Eraro okazis!
` : null, - args.hint !== '' ? html`
${args.hint}
` : null, + args.hint !== '' ? html`
${args.hint}
` : null, ]; const control = html`