From a8efd9f3e340cbcb1bf6a7e9808d4c7d8b5e0166 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Thu, 24 Aug 2023 11:13:37 +0200 Subject: [PATCH 1/2] Add validation icon --- scss/_root.scss | 4 ++++ scss/_variables-dark.scss | 5 +++++ scss/_variables.scss | 12 ++++++------ 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/scss/_root.scss b/scss/_root.scss index ab720a38e403..566c8b45a964 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -123,8 +123,10 @@ // scss-docs-start root-form-validation-variables --#{$prefix}form-valid-color: #{$form-valid-color}; --#{$prefix}form-valid-border-color: #{$form-valid-border-color}; + --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid}; --#{$prefix}form-invalid-color: #{$form-invalid-color}; --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color}; + --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid}; // scss-docs-end root-form-validation-variables } @@ -177,8 +179,10 @@ --#{$prefix}form-valid-color: #{$form-valid-color-dark}; --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark}; + --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid-dark}; --#{$prefix}form-invalid-color: #{$form-invalid-color-dark}; --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark}; + --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid-dark}; // scss-docs-end root-dark-mode-vars } } diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index 79f29a305853..3651acfc5f4d 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -72,6 +72,11 @@ $form-invalid-color-dark: $red-300 !default; $form-invalid-border-color-dark: $red-300 !default; // scss-docs-end form-validation-colors-dark +$form-feedback-icon-valid-color-dark: $form-valid-color-dark !default; +$form-feedback-icon-valid-dark: escape-svg(url("data:image/svg+xml,")) !default; +$form-feedback-icon-invalid-color-dark: $form-invalid-color-dark !default; +$form-feedback-icon-invalid-dark: escape-svg(url("data:image/svg+xml,")) !default; + // // Accordion diff --git a/scss/_variables.scss b/scss/_variables.scss index 7706c0f6a5e0..e170c3c63254 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1088,10 +1088,10 @@ $form-feedback-font-style: $form-text-font-style !default; $form-feedback-valid-color: $success !default; $form-feedback-invalid-color: $danger !default; -$form-feedback-icon-valid-color: $form-feedback-valid-color !default; -$form-feedback-icon-valid: url("data:image/svg+xml,") !default; -$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; -$form-feedback-icon-invalid: url("data:image/svg+xml,") !default; +$form-feedback-icon-valid-color: $form-feedback-valid-color !default; +$form-feedback-icon-valid: escape-svg(url("data:image/svg+xml,")) !default; +$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; +$form-feedback-icon-invalid: escape-svg(url("data:image/svg+xml,")) !default; // scss-docs-end form-feedback-variables // scss-docs-start form-validation-colors @@ -1105,7 +1105,7 @@ $form-invalid-border-color: $form-feedback-invalid-color !default; $form-validation-states: ( "valid": ( "color": var(--#{$prefix}form-valid-color), - "icon": $form-feedback-icon-valid, + "icon": var(--#{$prefix}form-valid-icon), "tooltip-color": #fff, "tooltip-bg-color": var(--#{$prefix}success), "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity), @@ -1113,7 +1113,7 @@ $form-validation-states: ( ), "invalid": ( "color": var(--#{$prefix}form-invalid-color), - "icon": $form-feedback-icon-invalid, + "icon": var(--#{$prefix}form-invalid-icon), "tooltip-color": #fff, "tooltip-bg-color": var(--#{$prefix}danger), "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity), From eac8f88c4ec38028b1ea38b7a935c238f77205a8 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Thu, 24 Aug 2023 11:41:15 +0200 Subject: [PATCH 2/2] Reduce bundle size by importing variables in _forms.scss directly --- scss/_forms.scss | 22 ++++++++++++++++++++++ scss/_root.scss | 16 ---------------- site/content/docs/5.3/forms/validation.md | 2 +- 3 files changed, 23 insertions(+), 17 deletions(-) diff --git a/scss/_forms.scss b/scss/_forms.scss index 7b17d849ac0f..bd8a2c5124d6 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -1,3 +1,25 @@ +:root { + // scss-docs-start root-form-validation-variables + --#{$prefix}form-valid-color: #{$form-valid-color}; + --#{$prefix}form-valid-border-color: #{$form-valid-border-color}; + --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid}; + --#{$prefix}form-invalid-color: #{$form-invalid-color}; + --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color}; + --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid}; + // scss-docs-end root-form-validation-variables +} + +@if $enable-dark-mode { + @include color-mode(dark, true) { + --#{$prefix}form-valid-color: #{$form-valid-color-dark}; + --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark}; + --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid-dark}; + --#{$prefix}form-invalid-color: #{$form-invalid-color-dark}; + --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark}; + --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid-dark}; + } +} + @import "forms/labels"; @import "forms/form-text"; @import "forms/form-control"; diff --git a/scss/_root.scss b/scss/_root.scss index 566c8b45a964..6c3f52ddd501 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -119,15 +119,6 @@ --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity}; --#{$prefix}focus-ring-color: #{$focus-ring-color}; // scss-docs-end root-focus-variables - - // scss-docs-start root-form-validation-variables - --#{$prefix}form-valid-color: #{$form-valid-color}; - --#{$prefix}form-valid-border-color: #{$form-valid-border-color}; - --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid}; - --#{$prefix}form-invalid-color: #{$form-invalid-color}; - --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color}; - --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid}; - // scss-docs-end root-form-validation-variables } @if $enable-dark-mode { @@ -176,13 +167,6 @@ --#{$prefix}border-color: #{$border-color-dark}; --#{$prefix}border-color-translucent: #{$border-color-translucent-dark}; - - --#{$prefix}form-valid-color: #{$form-valid-color-dark}; - --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark}; - --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid-dark}; - --#{$prefix}form-invalid-color: #{$form-invalid-color-dark}; - --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark}; - --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid-dark}; // scss-docs-end root-dark-mode-vars } } diff --git a/site/content/docs/5.3/forms/validation.md b/site/content/docs/5.3/forms/validation.md index c66bbaf87c82..a0e0979f7d31 100644 --- a/site/content/docs/5.3/forms/validation.md +++ b/site/content/docs/5.3/forms/validation.md @@ -357,7 +357,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas As part of Bootstrap's evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. -{{< scss-docs name="root-form-validation-variables" file="scss/_root.scss" >}} +{{< scss-docs name="root-form-validation-variables" file="scss/_forms.scss" >}} These variables are also color mode adaptive, meaning they change color while in dark mode.