...
` or `...
` element after the `select` element to explain what went wrong. This enables the user to correct the mistake.
From 8521bbf25ced3bfd52463bd48881ddc19888274a Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 13 Dec 2023 15:33:52 +0100
Subject: [PATCH 19/36] Improve date native icon centering
---
packages/styles/src/components/floating-label.scss | 12 ++++++++++++
1 file changed, 12 insertions(+)
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index d8acc96921..794882d94a 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -40,6 +40,18 @@
// disable stylelint here, because the classes are coming from bs5
@extend .form-control-lg; /* stylelint-disable-line */
+ &.form-control-sm {
+ &[type='date']::-webkit-calendar-picker-indicator {
+ margin-top: -(spacing.$size-small-regular);
+ }
+ }
+
+ &.form-control-lg {
+ &[type='date']::-webkit-calendar-picker-indicator {
+ margin-top: -(spacing.$size-small-large);
+ }
+ }
+
&:focus {
@include forms-mx.placeholder {
color: rgba(var(--post-contrast-color-rgb), 0.6);
From 95bb3c3c201185f5c5a35128cbc1c35f50defc2f Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 13 Dec 2023 15:40:15 +0100
Subject: [PATCH 20/36] Fix missing import
---
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 794882d94a..f29433817e 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -229,7 +229,7 @@
~ label {
width: calc(
100% - (#{forms.$input-border-width * 2}) - #{forms.$form-floating-padding-x} - #{form-validation.$form-feedback-icon-offset} -
- #{form-validation.$form-feedback-icon-size}
+ #{form-validation.$form-feedback-icon-size}
);
}
From 20546a8da8873c021453b0116df4f91dfd51b329 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 13 Dec 2023 15:46:39 +0100
Subject: [PATCH 21/36] Lint
---
packages/styles/src/components/form-select.scss | 16 +++++++++-------
.../variables/components/_form-validation.scss | 3 ++-
2 files changed, 11 insertions(+), 8 deletions(-)
diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
index e4a6f5d6b8..d08583b53b 100644
--- a/packages/styles/src/components/form-select.scss
+++ b/packages/styles/src/components/form-select.scss
@@ -32,28 +32,30 @@
&.is-valid,
&.is-invalid {
- background-position: right b.$form-select-padding-x * 2.5 center,
- b.$form-select-bg-position;
+ background-position:
+ right b.$form-select-padding-x * 2.5 center,
+ b.$form-select-bg-position;
&.form-select-lg {
- background-position: right b.$form-select-padding-x * 3 center,
- b.$form-select-bg-position;
+ background-position:
+ right b.$form-select-padding-x * 3 center,
+ b.$form-select-bg-position;
}
}
&:disabled {
background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
- var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+ var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
}
&.is-valid {
background-image: b.escape-svg(form-select.$form-select-indicator-success),
- var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+ var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
}
&.is-invalid {
background-image: b.escape-svg(form-select.$form-select-indicator-error),
- var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+ var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
}
@include utilities.high-contrast-mode() {
diff --git a/packages/styles/src/variables/components/_form-validation.scss b/packages/styles/src/variables/components/_form-validation.scss
index dd5b80534e..33084fb24a 100644
--- a/packages/styles/src/variables/components/_form-validation.scss
+++ b/packages/styles/src/variables/components/_form-validation.scss
@@ -23,6 +23,7 @@ $form-feedback-invalid-bg: color.$error !default;
$form-feedback-invalid-text: color.$white !default;
$form-feedback-custom-color: color.$success !default;
$form-feedback-custom-bg: color.$success !default;
-$form-feedback-invalid-box-shadow: 0 0 0 forms.$input-focus-width rgba($form-feedback-invalid-color, 0.25) !default;
+$form-feedback-invalid-box-shadow: 0 0 0 forms.$input-focus-width
+ rgba($form-feedback-invalid-color, 0.25) !default;
$form-feedback-custom-text: color.$white !default;
$form-feedback-custom-box-shadow: 0 0 0 0.2rem rgba($form-feedback-custom-color, 0.25) !default;
From f2306a016b0a9933823504b5d877eecb4cc6cad1 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 13 Dec 2023 15:51:47 +0100
Subject: [PATCH 22/36] Lint
---
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 f29433817e..794882d94a 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -229,7 +229,7 @@
~ label {
width: calc(
100% - (#{forms.$input-border-width * 2}) - #{forms.$form-floating-padding-x} - #{form-validation.$form-feedback-icon-offset} -
- #{form-validation.$form-feedback-icon-size}
+ #{form-validation.$form-feedback-icon-size}
);
}
From 5bb5e477152efe843edb908ee755efb8c9df2fb4 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Wed, 13 Dec 2023 15:53:04 +0100
Subject: [PATCH 23/36] Fix code smell
---
packages/styles/src/components/floating-label.scss | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index 794882d94a..dc2b41c52f 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -88,6 +88,10 @@
min-height: forms.$form-floating-label-height-sm;
padding-inline: forms.$form-floating-padding-x-sm;
+ &[type='date']::-webkit-calendar-picker-indicator {
+ margin-top: -(spacing.$size-small-regular);
+ }
+
~ label {
font-size: forms.$form-floating-label-font-size-placeholder-sm;
padding-top: forms.$form-floating-label-padding-t-sm;
@@ -104,6 +108,12 @@
}
}
}
+
+ &.form-control-lg {
+ &[type='date']::-webkit-calendar-picker-indicator {
+ margin-top: -(spacing.$size-small-large);
+ }
+ }
}
> .form-select {
From 09ec89eb8f5b637b753071998bac2f921e3ee7fc Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 8 Jan 2024 09:33:32 +0100
Subject: [PATCH 24/36] Change input story to display large variant by default
---
.../src/stories/components/forms/input/input.stories.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/documentation/src/stories/components/forms/input/input.stories.ts b/packages/documentation/src/stories/components/forms/input/input.stories.ts
index 126ea1f7bd..55d8fc7877 100644
--- a/packages/documentation/src/stories/components/forms/input/input.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input/input.stories.ts
@@ -20,7 +20,7 @@ const meta: Meta = {
hiddenLabel: false,
placeholder: 'Placeholder',
type: 'text',
- size: 'null',
+ size: 'form-control-lg',
hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.',
disabled: false,
validation: 'null',
From 80204c29e00a4b7cb0fc502b0eff847c886f5e80 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 8 Jan 2024 14:58:56 +0100
Subject: [PATCH 25/36] Fix line-height and padding
---
packages/styles/src/mixins/_forms.scss | 2 ++
packages/styles/src/variables/_type.scss | 1 +
packages/styles/src/variables/components/_button.scss | 2 +-
packages/styles/src/variables/components/_forms.scss | 2 +-
4 files changed, 5 insertions(+), 2 deletions(-)
diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
index 48e17d207a..640a227806 100644
--- a/packages/styles/src/mixins/_forms.scss
+++ b/packages/styles/src/mixins/_forms.scss
@@ -38,6 +38,8 @@
line-height: forms.$input-line-height-sm;
height: forms.$input-height-sm;
min-height: forms.$input-height-sm;
+ padding-block: forms.$input-padding-y-sm;
+ padding-inline: forms.$input-padding-x-sm;
}
@mixin form-lg {
diff --git a/packages/styles/src/variables/_type.scss b/packages/styles/src/variables/_type.scss
index c7dd2c2015..81f3a265dd 100644
--- a/packages/styles/src/variables/_type.scss
+++ b/packages/styles/src/variables/_type.scss
@@ -41,6 +41,7 @@ $font-size-40: sizing.px-to-rem(40px);
$font-size-48: sizing.px-to-rem(48px);
$font-size-56: sizing.px-to-rem(56px);
+$line-height-sm: 1;
$line-height-copy: 1.5;
$line-height-heading: 1.2;
diff --git a/packages/styles/src/variables/components/_button.scss b/packages/styles/src/variables/components/_button.scss
index 4770c034ef..85c8f7d824 100644
--- a/packages/styles/src/variables/components/_button.scss
+++ b/packages/styles/src/variables/components/_button.scss
@@ -19,7 +19,7 @@ $input-btn-padding-x: spacing.$size-small-large - $input-btn-border-width-rem !d
$input-btn-line-height: type.$line-height-copy !default;
$input-btn-padding-y-sm: spacing.$size-mini - $input-btn-border-width-rem !default;
-$input-btn-padding-x-sm: spacing.$size-regular - $input-btn-border-width-rem !default;
+$input-btn-padding-x-sm: spacing.$size-small-regular !default;
$input-btn-line-height-sm: type.$line-height-copy !default;
$input-btn-padding-y-rg: spacing.$size-small-regular - $input-btn-border-width-rem !default;
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index 67b821ed5f..d0e2b93bc7 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -24,7 +24,7 @@ $input-line-height: type.$line-height-copy !default;
$input-padding-y-sm: button.$input-btn-padding-y-sm !default;
$input-padding-x-sm: button.$input-btn-padding-x-sm !default;
-$input-line-height-sm: type.$line-height-copy !default;
+$input-line-height-sm: type.$line-height-sm !default;
$input-padding-y-rg: button.$input-btn-padding-y-rg !default;
$input-padding-x-rg: button.$input-btn-padding-x-rg !default;
From 018aacd1d63d032efc165f0747e874ae7ec56d07 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 8 Jan 2024 15:12:42 +0100
Subject: [PATCH 26/36] Remove duplication
---
packages/styles/src/components/floating-label.scss | 10 ----------
1 file changed, 10 deletions(-)
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index dc2b41c52f..794882d94a 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -88,10 +88,6 @@
min-height: forms.$form-floating-label-height-sm;
padding-inline: forms.$form-floating-padding-x-sm;
- &[type='date']::-webkit-calendar-picker-indicator {
- margin-top: -(spacing.$size-small-regular);
- }
-
~ label {
font-size: forms.$form-floating-label-font-size-placeholder-sm;
padding-top: forms.$form-floating-label-padding-t-sm;
@@ -108,12 +104,6 @@
}
}
}
-
- &.form-control-lg {
- &[type='date']::-webkit-calendar-picker-indicator {
- margin-top: -(spacing.$size-small-large);
- }
- }
}
> .form-select {
From f1012c373e22118748e71e8f3bcd2ab9805a77b9 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 8 Jan 2024 15:16:23 +0100
Subject: [PATCH 27/36] Improve structure
---
.../styles/src/components/floating-label.scss | 21 ++++++++-----------
1 file changed, 9 insertions(+), 12 deletions(-)
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index 794882d94a..ba5a70b215 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -40,18 +40,6 @@
// disable stylelint here, because the classes are coming from bs5
@extend .form-control-lg; /* stylelint-disable-line */
- &.form-control-sm {
- &[type='date']::-webkit-calendar-picker-indicator {
- margin-top: -(spacing.$size-small-regular);
- }
- }
-
- &.form-control-lg {
- &[type='date']::-webkit-calendar-picker-indicator {
- margin-top: -(spacing.$size-small-large);
- }
- }
-
&:focus {
@include forms-mx.placeholder {
color: rgba(var(--post-contrast-color-rgb), 0.6);
@@ -83,6 +71,9 @@
}
&.form-control-sm {
+ &[type='date']::-webkit-calendar-picker-indicator {
+ margin-top: -(spacing.$size-small-regular);
+ }
font-size: forms.$form-floating-label-font-size-placeholder-sm;
height: forms.$form-floating-label-height-sm;
min-height: forms.$form-floating-label-height-sm;
@@ -104,6 +95,12 @@
}
}
}
+
+ &.form-control-lg {
+ &[type='date']::-webkit-calendar-picker-indicator {
+ margin-top: -(spacing.$size-small-large);
+ }
+ }
}
> .form-select {
From 825c4f19b0cbb701fe115832b3ac7c5c8b759be4 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Tue, 9 Jan 2024 16:11:53 +0100
Subject: [PATCH 28/36] Fixes for input multiple and arrows
---
.../styles/src/components/floating-label.scss | 7 ++-
.../styles/src/components/form-select.scss | 52 +++++++++++++------
2 files changed, 42 insertions(+), 17 deletions(-)
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index ba5a70b215..ca06d01bc7 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -154,7 +154,12 @@
2} - #{forms.$form-floating-padding-x * forms.$form-floating-label-upscale}
);
height: auto;
- background: forms.$input-bg;
+ }
+
+ &:not(:disabled) {
+ ~ label {
+ background: forms.$input-bg;
+ }
}
&:empty {
diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
index d08583b53b..203e3c9fd4 100644
--- a/packages/styles/src/components/form-select.scss
+++ b/packages/styles/src/components/form-select.scss
@@ -9,8 +9,13 @@
@use './../variables/components/forms';
@use './../variables/components/form-select' as form-select;
+.form-select {
+ background-size: forms.$form-bg-size; // Support deprecated medium size
+}
+
.form-select-rg {
@include forms-mixins.form-rg;
+ background-size: forms.$form-bg-size;
}
.form-select-sm {
@@ -30,32 +35,47 @@
}
}
- &.is-valid,
- &.is-invalid {
- background-position:
- right b.$form-select-padding-x * 2.5 center,
+ &:not([multiple]) {
+ &:disabled {
+ background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
+ var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+ }
+
+ &.is-valid,
+ &.is-invalid {
+ background-position: right b.$form-select-padding-x * 2.5 center,
b.$form-select-bg-position;
- &.form-select-lg {
- background-position:
- right b.$form-select-padding-x * 3 center,
+ &.form-select-lg {
+ background-position: right b.$form-select-padding-x * 3 center,
b.$form-select-bg-position;
+ }
}
- }
- &:disabled {
- background-image: b.escape-svg(form-select.$form-select-indicator-disabled),
+ &.is-valid {
+ background-image: b.escape-svg(form-select.$form-select-indicator-success),
var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
- }
+ }
- &.is-valid {
- background-image: b.escape-svg(form-select.$form-select-indicator-success),
+ &.is-invalid {
+ background-image: b.escape-svg(form-select.$form-select-indicator-error),
var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+ }
}
- &.is-invalid {
- background-image: b.escape-svg(form-select.$form-select-indicator-error),
- var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+ &[multiple] {
+ &.is-valid,
+ &.is-invalid {
+ background-position: right b.$form-select-padding-x * 1.5 center;
+ }
+
+ &.is-valid {
+ background-image: b.escape-svg(form-select.$form-select-indicator-success), var(--bs-form-select-bg-icon, none);
+ }
+
+ &.is-invalid {
+ background-image: b.escape-svg(form-select.$form-select-indicator-error), var(--bs-form-select-bg-icon, none);
+ }
}
@include utilities.high-contrast-mode() {
From 465c19d3ad28b9a46561c142a672f37ac67f9097 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Tue, 9 Jan 2024 16:13:52 +0100
Subject: [PATCH 29/36] Lint
---
.../styles/src/components/form-select.scss | 20 +++++++++++--------
1 file changed, 12 insertions(+), 8 deletions(-)
diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
index 203e3c9fd4..53602c71fb 100644
--- a/packages/styles/src/components/form-select.scss
+++ b/packages/styles/src/components/form-select.scss
@@ -43,23 +43,25 @@
&.is-valid,
&.is-invalid {
- background-position: right b.$form-select-padding-x * 2.5 center,
- b.$form-select-bg-position;
+ background-position:
+ right b.$form-select-padding-x * 2.5 center,
+ b.$form-select-bg-position;
&.form-select-lg {
- background-position: right b.$form-select-padding-x * 3 center,
- b.$form-select-bg-position;
+ background-position:
+ right b.$form-select-padding-x * 3 center,
+ b.$form-select-bg-position;
}
}
&.is-valid {
background-image: b.escape-svg(form-select.$form-select-indicator-success),
- var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+ var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
}
&.is-invalid {
background-image: b.escape-svg(form-select.$form-select-indicator-error),
- var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
+ var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
}
}
@@ -70,11 +72,13 @@
}
&.is-valid {
- background-image: b.escape-svg(form-select.$form-select-indicator-success), var(--bs-form-select-bg-icon, none);
+ background-image: b.escape-svg(form-select.$form-select-indicator-success),
+ var(--bs-form-select-bg-icon, none);
}
&.is-invalid {
- background-image: b.escape-svg(form-select.$form-select-indicator-error), var(--bs-form-select-bg-icon, none);
+ background-image: b.escape-svg(form-select.$form-select-indicator-error),
+ var(--bs-form-select-bg-icon, none);
}
}
From 6846d5e9ba660bfb4cacfd5b9b36023645b16931 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Tue, 16 Jan 2024 12:00:35 +0100
Subject: [PATCH 30/36] Fix code smell
---
packages/styles/src/components/form-select.scss | 6 ++----
1 file changed, 2 insertions(+), 4 deletions(-)
diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
index 53602c71fb..9e02d2b2a3 100644
--- a/packages/styles/src/components/form-select.scss
+++ b/packages/styles/src/components/form-select.scss
@@ -9,10 +9,6 @@
@use './../variables/components/forms';
@use './../variables/components/form-select' as form-select;
-.form-select {
- background-size: forms.$form-bg-size; // Support deprecated medium size
-}
-
.form-select-rg {
@include forms-mixins.form-rg;
background-size: forms.$form-bg-size;
@@ -29,6 +25,8 @@
}
.form-select {
+ background-size: forms.$form-bg-size; // Support deprecated medium size
+
&:not(:disabled) {
&:hover {
border-color: var(--post-contrast-color);
From 12f2b1f8cd13bc0fe1a0ec3956aac2b55e7d4e60 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Tue, 30 Jan 2024 12:42:40 +0100
Subject: [PATCH 31/36] Hide deprecated sizes when using floating-label
---
.../components/forms/input/input.docs.mdx | 6 +--
.../components/forms/input/input.stories.ts | 25 ++++++++++
.../components/forms/select/select.docs.mdx | 2 +-
.../forms/select/select.snapshot.stories.ts | 6 +--
.../components/forms/select/select.stories.ts | 25 ++++++++++
.../styles/src/components/floating-label.scss | 50 ++++++++++---------
packages/styles/src/mixins/_forms.scss | 2 -
7 files changed, 82 insertions(+), 34 deletions(-)
diff --git a/packages/documentation/src/stories/components/forms/input/input.docs.mdx b/packages/documentation/src/stories/components/forms/input/input.docs.mdx
index af9ad338ec..7d0d221de8 100644
--- a/packages/documentation/src/stories/components/forms/input/input.docs.mdx
+++ b/packages/documentation/src/stories/components/forms/input/input.docs.mdx
@@ -48,11 +48,7 @@ The size can be changed by simply adding one of four classes:
- Large: `.form-control-lg`
-
Do not apply size classes on floating-label elements
-
- It is not intended to apply the size classes to `input` elements that are nested in a
- `.form-floating` container.
-
+ Regular and medium size classes are not available on floating-label elements
diff --git a/packages/documentation/src/stories/components/forms/input/input.stories.ts b/packages/documentation/src/stories/components/forms/input/input.stories.ts
index 3e03da8e17..b750710b8d 100644
--- a/packages/documentation/src/stories/components/forms/input/input.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input/input.stories.ts
@@ -21,6 +21,7 @@ const meta: Meta = {
placeholder: 'Placeholder',
type: 'text',
size: 'form-control-lg',
+ sizeFloatingLabel: 'form-control-lg',
hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.',
disabled: false,
validation: 'null',
@@ -103,6 +104,10 @@ const meta: Meta = {
size: {
name: 'Size',
description: "Sets the size of the component's appearance.",
+ if: {
+ arg: 'floatingLabel',
+ truthy: false,
+ },
control: {
type: 'select',
labels: {
@@ -117,6 +122,25 @@ const meta: Meta = {
category: 'General',
},
},
+ sizeFloatingLabel: {
+ name: 'Size',
+ description: "Sets the size of the component's appearance.",
+ if: {
+ arg: 'floatingLabel',
+ truthy: true,
+ },
+ control: {
+ type: 'select',
+ labels: {
+ 'form-control-sm': 'Small',
+ 'form-control-lg': 'Large',
+ },
+ },
+ options: ['form-control-sm', 'form-control-lg'],
+ table: {
+ category: 'General',
+ },
+ },
hint: {
name: 'Helper Text',
description: 'Text to place in the help text area of the component.',
@@ -167,6 +191,7 @@ function render(args: Args, context: StoryContext) {
'form-control',
args.type === 'color' && 'form-control-color',
args.size,
+ args.sizeFloatingLabel,
args.validation,
]
.filter(c => c && c !== 'null')
diff --git a/packages/documentation/src/stories/components/forms/select/select.docs.mdx b/packages/documentation/src/stories/components/forms/select/select.docs.mdx
index da4a05428f..0c2d063261 100644
--- a/packages/documentation/src/stories/components/forms/select/select.docs.mdx
+++ b/packages/documentation/src/stories/components/forms/select/select.docs.mdx
@@ -53,7 +53,7 @@ The size can be adjusted, by simply adding one of the following four classes:
- Large: `.form-select-lg`
- Do not use this classes on `select` elements wrapped within a `.form-floating` container.
+ Regular and medium size classes are not available on floating-label elements
diff --git a/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
index c79332a0ee..8c3791a873 100644
--- a/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
@@ -33,14 +33,14 @@ export const Select: Story = {
...bombArgs({
size: context.argTypes.size.options,
success: [false, true],
- validation: context.argTypes.validation.options.filter((option: string) => option !== 'is-invalid'),
+ validation: context.argTypes.validation.options.filter(
+ (option: string) => option !== 'is-invalid',
+ ),
}),
]
// remove disabled & validated examples
.filter((args: Args) => !(args.disabled && args.validation !== 'null'));
- console.log('bombArg', bombArgsGeneratedDefault);
-
//Arguments for Multiple Version
const bombArgsGeneratedMultiple = [
...bombArgs({
diff --git a/packages/documentation/src/stories/components/forms/select/select.stories.ts b/packages/documentation/src/stories/components/forms/select/select.stories.ts
index fa6249d803..16ee308f2d 100644
--- a/packages/documentation/src/stories/components/forms/select/select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.stories.ts
@@ -21,6 +21,7 @@ const meta: Meta = {
hiddenLabel: false,
value: undefined,
size: 'form-select-lg',
+ sizeFloatingLabel: 'form-select-lg',
options: 5,
multiple: false,
multipleSize: 4,
@@ -77,6 +78,10 @@ const meta: Meta = {
size: {
name: 'Size',
description: "Sets the size of the component's appearance.",
+ if: {
+ arg: 'floatingLabel',
+ truthy: false,
+ },
control: {
type: 'select',
labels: {
@@ -91,6 +96,25 @@ const meta: Meta = {
category: 'General',
},
},
+ sizeFloatingLabel: {
+ name: 'Size',
+ description: "Sets the size of the component's appearance.",
+ if: {
+ arg: 'floatingLabel',
+ truthy: true,
+ },
+ control: {
+ type: 'select',
+ labels: {
+ 'form-select-sm': 'Small',
+ 'form-select-lg': 'Large',
+ },
+ },
+ options: ['form-select-sm', 'form-select-lg'],
+ table: {
+ category: 'General',
+ },
+ },
options: {
name: 'Options',
description: 'Amount of `option` elements to render in the component.',
@@ -185,6 +209,7 @@ const Template: Story = {
const classes = [
'form-select',
args.size,
+ args.sizeFloatingLabel,
args.validation,
args.floatingLabelPlaceholder && !args.value ? 'form-select-empty' : null,
]
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index ca06d01bc7..3a8351868c 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -140,11 +140,38 @@
}
}
+ &.form-select-sm {
+ padding-inline: forms.$form-floating-padding-x-sm;
+ padding-top: forms.$form-floating-padding-y-sm * 2;
+ font-size: forms.$form-floating-label-font-size-placeholder-sm;
+ height: forms.$form-floating-label-height-sm;
+ min-height: forms.$form-floating-label-height-sm;
+
+ ~ label {
+ padding-top: forms.$form-floating-padding-y-sm;
+ font-size: forms.$form-floating-label-font-size-sm;
+ padding-inline: calc(#{forms.$form-floating-padding-x-sm} - #{forms.$input-border-width});
+ }
+
+ // TODO: replace with :has
+ &:empty,
+ &.form-select-empty {
+ ~ label {
+ padding-top: forms.$form-floating-label-padding-t-sm;
+ font-size: forms.$form-floating-label-font-size-placeholder-sm;
+ }
+ }
+ }
+
&[multiple] {
padding-top: forms.$form-floating-input-padding-t * 1.5;
padding-bottom: 0;
height: auto;
+ &.form-select-sm {
+ padding-top: forms.$form-floating-input-padding-t;
+ }
+
~ label {
padding-top: forms.$input-padding-y-lg * forms.$form-floating-label-scale;
padding-bottom: 0;
@@ -173,29 +200,6 @@
}
}
}
-
- &.form-select-sm {
- padding-inline: forms.$form-floating-padding-x-sm;
- padding-top: forms.$form-floating-padding-y-sm * 2;
- font-size: forms.$form-floating-label-font-size-placeholder-sm;
- height: forms.$form-floating-label-height-sm;
- min-height: forms.$form-floating-label-height-sm;
-
- ~ label {
- padding-top: forms.$form-floating-padding-y-sm;
- font-size: forms.$form-floating-label-font-size-sm;
- padding-inline: calc(#{forms.$form-floating-padding-x-sm} - #{forms.$input-border-width});
- }
-
- // TODO: replace with :has
- &:empty,
- &.form-select-empty {
- ~ label {
- padding-top: forms.$form-floating-label-padding-t-sm;
- font-size: forms.$form-floating-label-font-size-placeholder-sm;
- }
- }
- }
}
> textarea.form-control {
diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
index 640a227806..48445dfba5 100644
--- a/packages/styles/src/mixins/_forms.scss
+++ b/packages/styles/src/mixins/_forms.scss
@@ -36,7 +36,6 @@
@mixin form-sm {
font-size: type.$font-size-14;
line-height: forms.$input-line-height-sm;
- height: forms.$input-height-sm;
min-height: forms.$input-height-sm;
padding-block: forms.$input-padding-y-sm;
padding-inline: forms.$input-padding-x-sm;
@@ -45,7 +44,6 @@
@mixin form-lg {
font-size: type.$font-size-16;
line-height: forms.$input-line-height-lg;
- height: forms.$input-height-lg;
min-height: forms.$input-height-lg;
}
From 3d12da277a775c4789155dcb528b341e13991f00 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Tue, 30 Jan 2024 13:06:51 +0100
Subject: [PATCH 32/36] Remove success from snapshots
---
.../components/forms/select/select.snapshot.stories.ts | 1 -
.../src/utils/inputComponentsGetCombinations.ts | 9 ---------
2 files changed, 10 deletions(-)
diff --git a/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
index 8c3791a873..ed877711f8 100644
--- a/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
@@ -32,7 +32,6 @@ export const Select: Story = {
}),
...bombArgs({
size: context.argTypes.size.options,
- success: [false, true],
validation: context.argTypes.validation.options.filter(
(option: string) => option !== 'is-invalid',
),
diff --git a/packages/documentation/src/utils/inputComponentsGetCombinations.ts b/packages/documentation/src/utils/inputComponentsGetCombinations.ts
index 0086a91b2e..c8d8a8b9e6 100644
--- a/packages/documentation/src/utils/inputComponentsGetCombinations.ts
+++ b/packages/documentation/src/utils/inputComponentsGetCombinations.ts
@@ -24,19 +24,10 @@ export const COMBINATIONS = [
label: `${SHORT_LABEL} - Disabled`,
disabled: true,
},
- {
- label: `${SHORT_LABEL} - Success`,
- success: true,
- },
{
label: `${SHORT_LABEL} - Valid`,
validation: 'is-valid',
},
- {
- label: `${SHORT_LABEL} - Valid with success`,
- validation: 'is-valid',
- success: true,
- },
{
label: `${SHORT_LABEL} - Invalid`,
validation: 'is-invalid',
From ba75717a120e520bd0775971fd0d3927edfa5dd7 Mon Sep 17 00:00:00 2001
From: "Debray Alize, IT16.12"
Date: Tue, 30 Jan 2024 13:29:10 +0100
Subject: [PATCH 33/36] fix(docs): update select snapshot tests
---
.../snapshots/components/select.snapshot.ts | 15 ++++-----------
1 file changed, 4 insertions(+), 11 deletions(-)
diff --git a/packages/documentation/cypress/snapshots/components/select.snapshot.ts b/packages/documentation/cypress/snapshots/components/select.snapshot.ts
index f0995c7ce2..107354d6e7 100644
--- a/packages/documentation/cypress/snapshots/components/select.snapshot.ts
+++ b/packages/documentation/cypress/snapshots/components/select.snapshot.ts
@@ -1,14 +1,7 @@
-const SELECTBASEURL = '/iframe.html?id=snapshots--select';
-const multiple = ['default', 'multiple'];
-
describe('Select', () => {
- describe('multiple', () => {
- multiple.forEach(multiple => {
- it(multiple, () => {
- cy.visit(`${SELECTBASEURL}${multiple}`);
- cy.get('.form-select', { timeout: 30000 }).should('be.visible');
- cy.percySnapshot(`Selects-${multiple}`, { widths: [400] });
- });
- });
+ it('default', () => {
+ cy.visit('/iframe.html?id=snapshots--select');
+ cy.get('.form-select', { timeout: 30000 }).should('be.visible');
+ cy.percySnapshot('Selects', { widths: [400] });
});
});
From f58875bf9ac057ef44d3ed12f9c3956eb10add4d Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Tue, 30 Jan 2024 15:09:17 +0100
Subject: [PATCH 34/36] Slight improvement for select multiple
---
.../styles/src/components/floating-label.scss | 17 +++++++++++------
.../styles/src/variables/components/_forms.scss | 2 +-
2 files changed, 12 insertions(+), 7 deletions(-)
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index 3a8351868c..8188d7b8c5 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -150,7 +150,7 @@
~ label {
padding-top: forms.$form-floating-padding-y-sm;
font-size: forms.$form-floating-label-font-size-sm;
- padding-inline: calc(#{forms.$form-floating-padding-x-sm} - #{forms.$input-border-width});
+ padding-inline: forms.$form-floating-padding-x-sm;
}
// TODO: replace with :has
@@ -164,14 +164,10 @@
}
&[multiple] {
- padding-top: forms.$form-floating-input-padding-t * 1.5;
+ padding-top: spacing.$size-big;
padding-bottom: 0;
height: auto;
- &.form-select-sm {
- padding-top: forms.$form-floating-input-padding-t;
- }
-
~ label {
padding-top: forms.$input-padding-y-lg * forms.$form-floating-label-scale;
padding-bottom: 0;
@@ -181,6 +177,15 @@
2} - #{forms.$form-floating-padding-x * forms.$form-floating-label-upscale}
);
height: auto;
+ left: forms.$input-border-width * 3;
+ }
+
+ &.form-select-sm {
+ padding-top: forms.$form-floating-input-padding-t;
+
+ ~ label {
+ left: forms.$input-border-width * 2;
+ }
}
&:not(:disabled) {
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index a8da0275cb..2610e272af 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -149,7 +149,7 @@ $form-floating-select-bg-size: 32px 32px;
$form-floating-label-font-size-sm: type.$font-size-12;
$form-floating-label-font-size-placeholder-sm: type.$font-size-14;
-$form-floating-padding-x-sm: $input-padding-x-sm;
+$form-floating-padding-x-sm: spacing.$size-regular;
$form-floating-padding-y-sm: $input-padding-y-sm;
$form-floating-label-height-sm: $form-floating-input-height-sm;
$form-floating-label-padding-t-sm: $form-floating-label-height-sm * 0.5 -
From 0231a08e4766f8192495c6aa81bb02ad1e4c2be0 Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Tue, 30 Jan 2024 15:42:10 +0100
Subject: [PATCH 35/36] Improvement position of validation icon for date and
time input and try to remove duplication.
---
.../styles/src/components/floating-label.scss | 12 ++---
.../styles/src/components/form-select.scss | 32 ++++++------
.../src/components/form-validation.scss | 49 ++++++++++++-------
.../components/_form-validation.scss | 2 +
4 files changed, 54 insertions(+), 41 deletions(-)
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index 8188d7b8c5..f84f1be399 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -4,6 +4,7 @@
@forward './../variables/options';
@use './../lic/bootstrap-license';
+@use './../themes/bootstrap/core' as b;
@use './../themes/bootstrap/forms/floating-labels' as bffl;
@use './../themes/bootstrap/forms/form-control' as bffc;
@use './../mixins/forms' as forms-mx;
@@ -70,6 +71,11 @@
}
}
+ &[type='date'],
+ &[type='time'] {
+ background-position: right b.$input-height-inner-quarter bottom 0.5rem;
+ }
+
&.form-control-sm {
&[type='date']::-webkit-calendar-picker-indicator {
margin-top: -(spacing.$size-small-regular);
@@ -95,12 +101,6 @@
}
}
}
-
- &.form-control-lg {
- &[type='date']::-webkit-calendar-picker-indicator {
- margin-top: -(spacing.$size-small-large);
- }
- }
}
> .form-select {
diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
index 9e02d2b2a3..26235abfee 100644
--- a/packages/styles/src/components/form-select.scss
+++ b/packages/styles/src/components/form-select.scss
@@ -9,24 +9,7 @@
@use './../variables/components/forms';
@use './../variables/components/form-select' as form-select;
-.form-select-rg {
- @include forms-mixins.form-rg;
- background-size: forms.$form-bg-size;
-}
-
-.form-select-sm {
- @include forms-mixins.form-sm;
- background-size: forms.$form-bg-size-sm;
-}
-
-.form-select-lg {
- @include forms-mixins.form-lg;
- background-size: forms.$form-bg-size;
-}
-
.form-select {
- background-size: forms.$form-bg-size; // Support deprecated medium size
-
&:not(:disabled) {
&:hover {
border-color: var(--post-contrast-color);
@@ -96,3 +79,18 @@
}
}
}
+
+.form-select-rg {
+ @include forms-mixins.form-rg;
+ background-size: forms.$form-bg-size; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+}
+
+.form-select-sm {
+ @include forms-mixins.form-sm;
+ background-size: forms.$form-bg-size-sm; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+}
+
+.form-select-lg {
+ @include forms-mixins.form-lg;
+ background-size: forms.$form-bg-size; // Set arrow size. Duplicated rule in form-validation for is-valid/is-invalid icon.
+}
diff --git a/packages/styles/src/components/form-validation.scss b/packages/styles/src/components/form-validation.scss
index fd1cfa3b52..010fb06350 100644
--- a/packages/styles/src/components/form-validation.scss
+++ b/packages/styles/src/components/form-validation.scss
@@ -101,30 +101,43 @@
.form-control,
.form-select {
- @include form-validation-mx.form-validation-state-selector(invalid) {
+ &.is-invalid {
border-color: form-validation.$form-feedback-invalid-color;
+ background-image: b.escape-svg(form-validation.$form-feedback-icon-invalid);
- &.is-valid {
- padding-right: spacing.$size-small-huge; // For deprecated form-control-rg
- border-color: var(--post-success-green);
- background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
- background-repeat: no-repeat;
- background-position: right b.$input-height-inner-quarter center;
+ &:focus {
+ border-color: form-validation.$form-feedback-invalid-color;
+ box-shadow: form-validation.$form-feedback-invalid-box-shadow;
+ }
+ }
- &.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)
- }
+ &.is-valid {
+ border-color: var(--post-success-green);
+ background-image: b.escape-svg(form-validation.$form-feedback-icon-valid);
- &.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)
- }
+ &:focus {
+ border-color: form-validation.$form-feedback-valid-color;
+ box-shadow: form-validation.$form-feedback-valid-box-shadow;
}
+ }
- &:focus {
- border-color: form-validation.$form-feedback-invalid-color;
- box-shadow: form-validation.$form-feedback-invalid-box-shadow;
+ &.is-invalid,
+ &.is-valid {
+ padding-right: spacing.$size-small-huge; // For deprecated form-control-rg
+ 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;
+
+ &.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.
+ }
+
+ &.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.
}
}
}
diff --git a/packages/styles/src/variables/components/_form-validation.scss b/packages/styles/src/variables/components/_form-validation.scss
index 33084fb24a..2f66876809 100644
--- a/packages/styles/src/variables/components/_form-validation.scss
+++ b/packages/styles/src/variables/components/_form-validation.scss
@@ -25,5 +25,7 @@ $form-feedback-custom-color: color.$success !default;
$form-feedback-custom-bg: color.$success !default;
$form-feedback-invalid-box-shadow: 0 0 0 forms.$input-focus-width
rgba($form-feedback-invalid-color, 0.25) !default;
+$form-feedback-valid-box-shadow: 0 0 0 forms.$input-focus-width
+rgba($form-feedback-valid-color, 0.25) !default;
$form-feedback-custom-text: color.$white !default;
$form-feedback-custom-box-shadow: 0 0 0 0.2rem rgba($form-feedback-custom-color, 0.25) !default;
From 179a9a78f976117e6e25dd6d9960875c792a9e5a Mon Sep 17 00:00:00 2001
From: imagoiq <12294151+imagoiq@users.noreply.github.com>
Date: Tue, 30 Jan 2024 16:05:24 +0100
Subject: [PATCH 36/36] Support week and month input type
---
packages/styles/src/components/floating-label.scss | 2 ++
1 file changed, 2 insertions(+)
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
index f84f1be399..c0ea34fc5b 100644
--- a/packages/styles/src/components/floating-label.scss
+++ b/packages/styles/src/components/floating-label.scss
@@ -71,6 +71,8 @@
}
}
+ &[type='week'],
+ &[type='month'],
&[type='date'],
&[type='time'] {
background-position: right b.$input-height-inner-quarter bottom 0.5rem;