From 4223b93f34cd304af26bf409fbf97a5502aad7ff Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 2 Aug 2023 12:10:57 +0200 Subject: [PATCH 01/18] wip --- scss/forms/_star-rating.scss | 21 ++++++++++++++------ site/content/docs/5.3/forms/checks-radios.md | 2 +- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss index e41eb9801f..b5faa86058 100644 --- a/scss/forms/_star-rating.scss +++ b/scss/forms/_star-rating.scss @@ -3,6 +3,9 @@ // .star-rating { + --#{$prefix}star-rating-checked-icon: #{escape-svg(url("data:image/svg+xml,"))}; + --#{$prefix}star-rating-unchecked-icon: #{escape-svg(url("data:image/svg+xml,"))}; + &.disabled, &:disabled { pointer-events: none; @@ -15,7 +18,8 @@ height: 1em; font-size: $form-star-size; cursor: pointer; - @include form-star-rating($accessible-orange); + mask-image: var(--#{$prefix}star-rating-checked-icon); + background-color: var(--bs-link-hover-color); &:not(:first-of-type){ margin-left: $form-star-margin-between; @@ -23,11 +27,13 @@ } > input:checked ~ label { - @include form-star-rating($gray-500); + mask-image: var(--#{$prefix}star-rating-unchecked-icon); + background-color: var(--bs-code-color); } > input:checked + label { - @include form-star-rating($accessible-orange); + mask-image: var(--#{$prefix}star-rating-checked-icon); + background-color: var(--bs-link-hover-color); } > [data-focus-visible-added]:focus + label { @@ -37,15 +43,18 @@ } &:hover input + label { - @include form-star-rating($black); + mask-image: var(--#{$prefix}star-rating-checked-icon); + background-color: var(--bs-emphasis-color); } > input:hover ~ label { - @include form-star-rating($gray-500); + mask-image: var(--#{$prefix}star-rating-unchecked-icon); + background-color: var(--bs-code-color); } > input:hover + label { - @include form-star-rating($black); + mask-image: var(--#{$prefix}star-rating-checked-icon); + background-color: var(--bs-emphasis-color); } } diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md index 14f33fa961..20f30f82c1 100644 --- a/site/content/docs/5.3/forms/checks-radios.md +++ b/site/content/docs/5.3/forms/checks-radios.md @@ -418,7 +418,7 @@ Add `.star-rating-dark` to the `.star-rating` for a dark variant. {{< example class="bg-dark" >}}
-
+
From 847d6d76aefb7feaa6e10c3e95a1c003792744a3 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 2 Aug 2023 16:45:43 +0200 Subject: [PATCH 02/18] Finish the demo --- scss/_variables.scss | 7 ++++++ scss/forms/_star-rating.scss | 45 +++++++++--------------------------- 2 files changed, 18 insertions(+), 34 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 26e83578ff..83eef10992 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1183,6 +1183,13 @@ $form-check-inline-margin-end: 1rem !default; $form-star-size: 1.5625rem !default; $form-star-size-sm: 1.25rem !default; $form-star-margin-between: -.125rem !default; + +$form-star-rating-checked-color: var(--#{$prefix}link-hover-color) !default; +$form-star-rating-unchecked-color: var(--#{$prefix}code-color) !default; +$form-star-rating-hover-color: var(--#{$prefix}emphasis-color) !default; +$form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; +$form-star-rating-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; + //fusv-disable $form-star-focus-color: $black !default; // Deprecated in v5.2.3 $form-star-focus-outline: var(--#{$prefix}border-width) solid $form-star-focus-color !default; // Deprecated in v5.2.3 diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss index b5faa86058..91e3c1c486 100644 --- a/scss/forms/_star-rating.scss +++ b/scss/forms/_star-rating.scss @@ -3,8 +3,11 @@ // .star-rating { - --#{$prefix}star-rating-checked-icon: #{escape-svg(url("data:image/svg+xml,"))}; - --#{$prefix}star-rating-unchecked-icon: #{escape-svg(url("data:image/svg+xml,"))}; + --#{$prefix}star-rating-checked-color: #{$form-star-rating-checked-color}; + --#{$prefix}star-rating-unchecked-color: #{$form-star-rating-unchecked-color}; + --#{$prefix}star-rating-hover-color: #{$form-star-rating-hover-color}; + --#{$prefix}star-rating-checked-icon: #{$form-star-rating-checked-icon}; + --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-unchecked-icon}; &.disabled, &:disabled { @@ -19,7 +22,7 @@ font-size: $form-star-size; cursor: pointer; mask-image: var(--#{$prefix}star-rating-checked-icon); - background-color: var(--bs-link-hover-color); + background-color: var(--#{$prefix}star-rating-checked-color); &:not(:first-of-type){ margin-left: $form-star-margin-between; @@ -28,12 +31,12 @@ > input:checked ~ label { mask-image: var(--#{$prefix}star-rating-unchecked-icon); - background-color: var(--bs-code-color); + background-color: var(--#{$prefix}star-rating-unchecked-color); } > input:checked + label { mask-image: var(--#{$prefix}star-rating-checked-icon); - background-color: var(--bs-link-hover-color); + background-color: var(--#{$prefix}star-rating-checked-color); } > [data-focus-visible-added]:focus + label { @@ -44,43 +47,17 @@ &:hover input + label { mask-image: var(--#{$prefix}star-rating-checked-icon); - background-color: var(--bs-emphasis-color); + background-color: var(--#{$prefix}star-rating-hover-color); } > input:hover ~ label { mask-image: var(--#{$prefix}star-rating-unchecked-icon); - background-color: var(--bs-code-color); + background-color: var(--#{$prefix}star-rating-unchecked-color); } > input:hover + label { mask-image: var(--#{$prefix}star-rating-checked-icon); - background-color: var(--bs-emphasis-color); - } -} - -.star-rating-dark { - > label { - @include form-star-rating($brand-orange); - } - - > input:checked ~ label { - @include form-star-rating($gray-700); - } - - > input:checked + label { - @include form-star-rating($brand-orange); - } - - &:hover input + label { - @include form-star-rating($white); - } - - > input:hover ~ label { - @include form-star-rating($gray-700); - } - - > input:hover + label { - @include form-star-rating($white); + background-color: var(--#{$prefix}star-rating-hover-color); } } From e934173c554f2fd9a645f9daa84d03d46374bf02 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 2 Aug 2023 16:50:46 +0200 Subject: [PATCH 03/18] Bundlewatch add 10kb for the new svg --- .bundlewatch.config.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index e73322106a..18895b5003 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,11 +26,11 @@ }, { "path": "./dist/css/boosted.css", - "maxSize": "42.75 kB" + "maxSize": "43.0 kB" }, { "path": "./dist/css/boosted.min.css", - "maxSize": "39.75 kB" + "maxSize": "40.0 kB" }, { "path": "./dist/js/boosted.bundle.js", From 244b0f9f2c478532ba56ac32cf69b181b10331f4 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Thu, 10 Aug 2023 17:22:35 +0200 Subject: [PATCH 04/18] Add small, readonly disabled and remove unused mixins --- scss/_mixins.scss | 1 - scss/_variables.scss | 4 +-- scss/forms/_star-rating.scss | 18 +++++++--- scss/mixins/_star-rating.scss | 5 --- site/content/docs/5.3/forms/checks-radios.md | 37 ++++++++++++++------ 5 files changed, 41 insertions(+), 24 deletions(-) delete mode 100644 scss/mixins/_star-rating.scss diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 1362ff3e4b..2430089b1b 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -30,7 +30,6 @@ @import "mixins/lists"; @import "mixins/forms"; @import "mixins/table-variants"; -@import "mixins/star-rating"; // Boosted mod // Skins @import "mixins/border-radius"; diff --git a/scss/_variables.scss b/scss/_variables.scss index 83eef10992..68c53a1771 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1181,7 +1181,6 @@ $form-check-inline-margin-end: 1rem !default; // Boosted mod: Star rating $form-star-size: 1.5625rem !default; -$form-star-size-sm: 1.25rem !default; $form-star-margin-between: -.125rem !default; $form-star-rating-checked-color: var(--#{$prefix}link-hover-color) !default; @@ -1189,7 +1188,8 @@ $form-star-rating-unchecked-color: var(--#{$prefix}code-color) !default; $form-star-rating-hover-color: var(--#{$prefix}emphasis-color) !default; $form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; $form-star-rating-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; - +$form-star-rating-sm-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; +$form-star-rating-sm-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; //fusv-disable $form-star-focus-color: $black !default; // Deprecated in v5.2.3 $form-star-focus-outline: var(--#{$prefix}border-width) solid $form-star-focus-color !default; // Deprecated in v5.2.3 diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss index 91e3c1c486..427a38053b 100644 --- a/scss/forms/_star-rating.scss +++ b/scss/forms/_star-rating.scss @@ -9,18 +9,23 @@ --#{$prefix}star-rating-checked-icon: #{$form-star-rating-checked-icon}; --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-unchecked-icon}; - &.disabled, &:disabled { pointer-events: none; + --#{$prefix}star-rating-checked-color: var(--#{$prefix}border-color-translucent); + --#{$prefix}star-rating-unchecked-color: var(--#{$prefix}border-color-translucent); } > label { + cursor: pointer; + } + + > label, + span { display: block; float: left; width: 1em; height: 1em; font-size: $form-star-size; - cursor: pointer; mask-image: var(--#{$prefix}star-rating-checked-icon); background-color: var(--#{$prefix}star-rating-checked-color); @@ -29,12 +34,14 @@ } } - > input:checked ~ label { + > input:checked ~ label, + .checked ~ span { mask-image: var(--#{$prefix}star-rating-unchecked-icon); background-color: var(--#{$prefix}star-rating-unchecked-color); } - > input:checked + label { + > input:checked + label, + .checked { mask-image: var(--#{$prefix}star-rating-checked-icon); background-color: var(--#{$prefix}star-rating-checked-color); } @@ -62,5 +69,6 @@ } .star-rating-sm > label { - font-size: $form-star-size-sm; + --#{$prefix}star-rating-checked-icon: #{$form-star-rating-sm-checked-icon}; + --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-sm-unchecked-icon}; } diff --git a/scss/mixins/_star-rating.scss b/scss/mixins/_star-rating.scss deleted file mode 100644 index 4a040a9bc3..0000000000 --- a/scss/mixins/_star-rating.scss +++ /dev/null @@ -1,5 +0,0 @@ -// scss-docs-start form-star-rating-mixin -@mixin form-star-rating($color) { - background-image: escape-svg(url("data:image/svg+xml,")); -} -// scss-docs-end form-star-rating-mixin diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md index 20f30f82c1..13dba2fb2e 100644 --- a/site/content/docs/5.3/forms/checks-radios.md +++ b/site/content/docs/5.3/forms/checks-radios.md @@ -439,28 +439,47 @@ Add `.star-rating-dark` to the `.star-rating` for a dark variant. {{< /example >}} +### Readonly +Make star ratings readable but non editable by using `` instead of `` elements. + +{{< example >}} +
+ + + +
+{{< /example >}} + ### Disabled Make star ratings look inactive inside or outside a form by adding the `disabled` boolean attribute to the `
` element and the `checked` boolean attribute to any `` element. {{< example >}} -
+ - + {{< /example >}} @@ -476,7 +495,3 @@ Variables for checks: Variables for switches: {{< scss-docs name="form-switch-variables" file="scss/_variables.scss" >}} - -### Sass mixins - -{{< scss-docs name="form-star-rating-mixin" file="scss/mixins/_star-rating.scss" >}} From dac41170fee98339a6f382d3bf2803bac1a6a5d3 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Fri, 11 Aug 2023 10:56:37 +0200 Subject: [PATCH 05/18] FIx --- scss/_variables.scss | 5 +++-- scss/forms/_star-rating.scss | 1 + site/content/docs/5.3/forms/checks-radios.md | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 68c53a1771..8469977679 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1181,14 +1181,15 @@ $form-check-inline-margin-end: 1rem !default; // Boosted mod: Star rating $form-star-size: 1.5625rem !default; +$form-star-size-sm: 1.25rem !default; $form-star-margin-between: -.125rem !default; $form-star-rating-checked-color: var(--#{$prefix}link-hover-color) !default; $form-star-rating-unchecked-color: var(--#{$prefix}code-color) !default; $form-star-rating-hover-color: var(--#{$prefix}emphasis-color) !default; -$form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; +$form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; $form-star-rating-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; -$form-star-rating-sm-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; +$form-star-rating-sm-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; $form-star-rating-sm-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; //fusv-disable $form-star-focus-color: $black !default; // Deprecated in v5.2.3 diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss index 427a38053b..bac2e9e5e2 100644 --- a/scss/forms/_star-rating.scss +++ b/scss/forms/_star-rating.scss @@ -71,4 +71,5 @@ .star-rating-sm > label { --#{$prefix}star-rating-checked-icon: #{$form-star-rating-sm-checked-icon}; --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-sm-unchecked-icon}; + font-size: $form-star-size-sm; } diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md index 13dba2fb2e..f44cb0846f 100644 --- a/site/content/docs/5.3/forms/checks-radios.md +++ b/site/content/docs/5.3/forms/checks-radios.md @@ -414,7 +414,7 @@ Star ratings come with a smaller variant: `.star-rating-sm`. ### Dark variant -Add `.star-rating-dark` to the `.star-rating` for a dark variant. +Add `data-bs-theme="dark"` to the `.star-rating` for a dark variant. {{< example class="bg-dark" >}}
From d764162334acf53bbff8532c78ebb016d77c0ca4 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Fri, 11 Aug 2023 12:20:35 +0200 Subject: [PATCH 06/18] . --- scss/_variables.scss | 2 +- site/content/docs/5.3/forms/checks-radios.md | 60 ++++++++++---------- 2 files changed, 32 insertions(+), 30 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 8469977679..ef2061cee6 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1187,7 +1187,7 @@ $form-star-margin-between: -.125rem !default; $form-star-rating-checked-color: var(--#{$prefix}link-hover-color) !default; $form-star-rating-unchecked-color: var(--#{$prefix}code-color) !default; $form-star-rating-hover-color: var(--#{$prefix}emphasis-color) !default; -$form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; +$form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; $form-star-rating-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; $form-star-rating-sm-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; $form-star-rating-sm-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md index f44cb0846f..6c397e0668 100644 --- a/site/content/docs/5.3/forms/checks-radios.md +++ b/site/content/docs/5.3/forms/checks-radios.md @@ -368,19 +368,19 @@ Star rating system is built on top of radios. Simply add `.star-rating` to a `
{{< /example >}} @@ -395,19 +395,19 @@ Star ratings come with a smaller variant: `.star-rating-sm`. - + - + - + - + - +
{{< /example >}} @@ -422,19 +422,19 @@ Add `data-bs-theme="dark"` to the `.star-rating` for a dark variant. - + - + - + - + - +
{{< /example >}} @@ -461,25 +461,27 @@ Make star ratings readable but non editable by using `` instead of `` element and the `checked` boolean attribute to any `` element. {{< example >}} - + + {{< /example >}} From c097514699cf2f2aaf8ce3b49ee25d5bcabcb694 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Wed, 16 Aug 2023 11:20:59 +0200 Subject: [PATCH 07/18] . --- scss/_mixins.scss | 1 + scss/mixins/_star-rating.scss | 5 +++++ site/content/docs/5.3/forms/checks-radios.md | 4 ++++ 3 files changed, 10 insertions(+) create mode 100644 scss/mixins/_star-rating.scss diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 2430089b1b..1362ff3e4b 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -30,6 +30,7 @@ @import "mixins/lists"; @import "mixins/forms"; @import "mixins/table-variants"; +@import "mixins/star-rating"; // Boosted mod // Skins @import "mixins/border-radius"; diff --git a/scss/mixins/_star-rating.scss b/scss/mixins/_star-rating.scss new file mode 100644 index 0000000000..4a040a9bc3 --- /dev/null +++ b/scss/mixins/_star-rating.scss @@ -0,0 +1,5 @@ +// scss-docs-start form-star-rating-mixin +@mixin form-star-rating($color) { + background-image: escape-svg(url("data:image/svg+xml,")); +} +// scss-docs-end form-star-rating-mixin diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md index 6c397e0668..06b8e1b3c6 100644 --- a/site/content/docs/5.3/forms/checks-radios.md +++ b/site/content/docs/5.3/forms/checks-radios.md @@ -497,3 +497,7 @@ Variables for checks: Variables for switches: {{< scss-docs name="form-switch-variables" file="scss/_variables.scss" >}} + +### Sass mixins + +{{< scss-docs name="form-star-rating-mixin" file="scss/mixins/_star-rating.scss" >}} From 76bbdc1a8f4b300597bae923fef077b04cb751fb Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Wed, 16 Aug 2023 11:58:15 +0200 Subject: [PATCH 08/18] Deprecated mixin --- scss/_mixins.scss | 1 - scss/mixins/_star-rating.scss | 2 ++ site/content/docs/5.3/forms/checks-radios.md | 2 ++ 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 1362ff3e4b..2430089b1b 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -30,7 +30,6 @@ @import "mixins/lists"; @import "mixins/forms"; @import "mixins/table-variants"; -@import "mixins/star-rating"; // Boosted mod // Skins @import "mixins/border-radius"; diff --git a/scss/mixins/_star-rating.scss b/scss/mixins/_star-rating.scss index 4a040a9bc3..71e466faa7 100644 --- a/scss/mixins/_star-rating.scss +++ b/scss/mixins/_star-rating.scss @@ -1,3 +1,5 @@ +@include deprecate("`form-star-rating()`", "v5.3.2", "v6.0.0"); + // scss-docs-start form-star-rating-mixin @mixin form-star-rating($color) { background-image: escape-svg(url("data:image/svg+xml,")); diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md index 06b8e1b3c6..e29bb6e209 100644 --- a/site/content/docs/5.3/forms/checks-radios.md +++ b/site/content/docs/5.3/forms/checks-radios.md @@ -500,4 +500,6 @@ Variables for switches: ### Sass mixins +{{< deprecated-in "5.3.2" >}} + {{< scss-docs name="form-star-rating-mixin" file="scss/mixins/_star-rating.scss" >}} From 52e2e064ea8ce1775cae6166ee9831c66f1164ea Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Wed, 16 Aug 2023 15:19:01 +0200 Subject: [PATCH 09/18] . --- scss/_variables.scss | 4 ++-- scss/forms/_star-rating.scss | 7 +++---- site/content/docs/5.3/forms/checks-radios.md | 2 +- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index ef2061cee6..71ce00814d 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1188,9 +1188,9 @@ $form-star-rating-checked-color: var(--#{$prefix}link-hover-color) !defaul $form-star-rating-unchecked-color: var(--#{$prefix}code-color) !default; $form-star-rating-hover-color: var(--#{$prefix}emphasis-color) !default; $form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; -$form-star-rating-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; +$form-star-rating-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; $form-star-rating-sm-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; -$form-star-rating-sm-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; +$form-star-rating-sm-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; //fusv-disable $form-star-focus-color: $black !default; // Deprecated in v5.2.3 $form-star-focus-outline: var(--#{$prefix}border-width) solid $form-star-focus-color !default; // Deprecated in v5.2.3 diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss index bac2e9e5e2..f0c44610c9 100644 --- a/scss/forms/_star-rating.scss +++ b/scss/forms/_star-rating.scss @@ -8,6 +8,7 @@ --#{$prefix}star-rating-hover-color: #{$form-star-rating-hover-color}; --#{$prefix}star-rating-checked-icon: #{$form-star-rating-checked-icon}; --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-unchecked-icon}; + font-size: $form-star-size; &:disabled { pointer-events: none; @@ -25,7 +26,6 @@ float: left; width: 1em; height: 1em; - font-size: $form-star-size; mask-image: var(--#{$prefix}star-rating-checked-icon); background-color: var(--#{$prefix}star-rating-checked-color); @@ -40,8 +40,7 @@ background-color: var(--#{$prefix}star-rating-unchecked-color); } - > input:checked + label, - .checked { + > input:checked + label { mask-image: var(--#{$prefix}star-rating-checked-icon); background-color: var(--#{$prefix}star-rating-checked-color); } @@ -68,7 +67,7 @@ } } -.star-rating-sm > label { +.star-rating-sm { --#{$prefix}star-rating-checked-icon: #{$form-star-rating-sm-checked-icon}; --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-sm-unchecked-icon}; font-size: $form-star-size-sm; diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md index e29bb6e209..fb86a54476 100644 --- a/site/content/docs/5.3/forms/checks-radios.md +++ b/site/content/docs/5.3/forms/checks-radios.md @@ -414,7 +414,7 @@ Star ratings come with a smaller variant: `.star-rating-sm`. ### Dark variant -Add `data-bs-theme="dark"` to the `.star-rating` for a dark variant. +Add `data-bs-theme="dark"` to the `.star-rating` or any parent element for a dark variant. {{< example class="bg-dark" >}}
From a75acc568cea342da3c9266b74d4f1a1d76fc3ed Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 22 Aug 2023 09:18:26 +0200 Subject: [PATCH 10/18] Reintroduce outline by putting stars inside pseudo-elements --- scss/forms/_star-rating.scss | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss index f0c44610c9..e707d9aca2 100644 --- a/scss/forms/_star-rating.scss +++ b/scss/forms/_star-rating.scss @@ -22,25 +22,31 @@ > label, span { - display: block; float: left; width: 1em; height: 1em; - mask-image: var(--#{$prefix}star-rating-checked-icon); - background-color: var(--#{$prefix}star-rating-checked-color); + + &::before { + display: block; + width: 100%; + height: 100%; + mask-image: var(--#{$prefix}star-rating-checked-icon); + content: ""; + background-color: var(--#{$prefix}star-rating-checked-color); + } &:not(:first-of-type){ margin-left: $form-star-margin-between; } } - > input:checked ~ label, - .checked ~ span { + > input:checked ~ label::before, + .checked ~ span::before { mask-image: var(--#{$prefix}star-rating-unchecked-icon); background-color: var(--#{$prefix}star-rating-unchecked-color); } - > input:checked + label { + > input:checked + label::before { mask-image: var(--#{$prefix}star-rating-checked-icon); background-color: var(--#{$prefix}star-rating-checked-color); } @@ -51,17 +57,17 @@ box-shadow: inset 0 0 0 add(1px, $focus-visible-inner-width) var(--#{$prefix}focus-visible-inner-color); } - &:hover input + label { + &:hover input + label::before { mask-image: var(--#{$prefix}star-rating-checked-icon); background-color: var(--#{$prefix}star-rating-hover-color); } - > input:hover ~ label { + > input:hover ~ label::before { mask-image: var(--#{$prefix}star-rating-unchecked-icon); background-color: var(--#{$prefix}star-rating-unchecked-color); } - > input:hover + label { + > input:hover + label::before { mask-image: var(--#{$prefix}star-rating-checked-icon); background-color: var(--#{$prefix}star-rating-hover-color); } From 69cfea85f4bd3bea2675ac15a5f909374f9e265e Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 28 Aug 2023 11:30:24 +0200 Subject: [PATCH 11/18] Add migration note --- site/content/docs/5.3/migration.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 246e77d21e..31d7047294 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -29,6 +29,12 @@ If you need more details about the changes, please refer to the [v5.3.2 release] - New In order to improve accessibility for people suffering from any form of color blindness, we added a visual cue to form elements on error when focused so information does not rely exclusively on color anymore. Although is has no direct impact, you might want to apply this same modification within your custom form controls if you have any. +- New Star rating has been slightly changed for accessibility purpose; a visually hidden `span` matching the title attribute was added and color contrast of inactive stars has been updated. Please reflect this modification into your websites. Our documentation also includes a disabled and a readonly state for this form element. + ```diff + - + + + ``` + ### CSS and Sass variables -
From 9c1f18c09b0acc20f415e925dd7689da586df82d Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 28 Aug 2023 14:52:42 +0200 Subject: [PATCH 12/18] Reintroduce dark variant --- scss/_variables.scss | 37 +++++++++++--------- scss/forms/_star-rating.scss | 6 ++++ site/content/docs/5.3/forms/checks-radios.md | 4 +-- site/content/docs/5.3/migration.md | 3 ++ 4 files changed, 32 insertions(+), 18 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 71ce00814d..912e7c6b3a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1180,23 +1180,28 @@ $form-check-btn-check-disabled-opacity: null !default; $form-check-inline-margin-end: 1rem !default; // Boosted mod: Star rating -$form-star-size: 1.5625rem !default; -$form-star-size-sm: 1.25rem !default; -$form-star-margin-between: -.125rem !default; - -$form-star-rating-checked-color: var(--#{$prefix}link-hover-color) !default; -$form-star-rating-unchecked-color: var(--#{$prefix}code-color) !default; -$form-star-rating-hover-color: var(--#{$prefix}emphasis-color) !default; -$form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; -$form-star-rating-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; -$form-star-rating-sm-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; -$form-star-rating-sm-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; +$form-star-size: 1.5625rem !default; +$form-star-size-sm: 1.25rem !default; +$form-star-margin-between: -.125rem !default; + +$form-star-rating-checked-color: var(--#{$prefix}link-hover-color) !default; +$form-star-rating-unchecked-color: var(--#{$prefix}code-color) !default; +$form-star-rating-hover-color: var(--#{$prefix}emphasis-color) !default; + +$form-star-rating-dark-checked-color: $primary !default; +$form-star-rating-dark-unchecked-color: $gray-500 !default; +$form-star-rating-dark-hover-color: $white !default; + +$form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; +$form-star-rating-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; +$form-star-rating-sm-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; +$form-star-rating-sm-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; //fusv-disable -$form-star-focus-color: $black !default; // Deprecated in v5.2.3 -$form-star-focus-outline: var(--#{$prefix}border-width) solid $form-star-focus-color !default; // Deprecated in v5.2.3 -$form-star-focus-color-dark: $white !default; // Deprecated in v5.2.3 -$form-star-focus-outline-dark: var(--#{$prefix}border-width) solid $form-star-focus-color-dark !default; // Deprecated in v5.2.3 -$form-star-focus-box-shadow: $input-btn-focus-box-shadow !default; // Deprecated in v5.2.3 +$form-star-focus-color: $black !default; // Deprecated in v5.2.3 +$form-star-focus-outline: var(--#{$prefix}border-width) solid $form-star-focus-color !default; // Deprecated in v5.2.3 +$form-star-focus-color-dark: $white !default; // Deprecated in v5.2.3 +$form-star-focus-outline-dark: var(--#{$prefix}border-width) solid $form-star-focus-color-dark !default; // Deprecated in v5.2.3 +$form-star-focus-box-shadow: $input-btn-focus-box-shadow !default; // Deprecated in v5.2.3 //fusv-enable // End mod diff --git a/scss/forms/_star-rating.scss b/scss/forms/_star-rating.scss index e707d9aca2..f50faf0888 100644 --- a/scss/forms/_star-rating.scss +++ b/scss/forms/_star-rating.scss @@ -73,6 +73,12 @@ } } +.star-rating-dark { + --#{$prefix}star-rating-checked-color: #{$form-star-rating-dark-checked-color}; + --#{$prefix}star-rating-unchecked-color: #{$form-star-rating-dark-unchecked-color}; + --#{$prefix}star-rating-hover-color: #{$form-star-rating-dark-hover-color}; +} + .star-rating-sm { --#{$prefix}star-rating-checked-icon: #{$form-star-rating-sm-checked-icon}; --#{$prefix}star-rating-unchecked-icon: #{$form-star-rating-sm-unchecked-icon}; diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md index fb86a54476..21e235dc3b 100644 --- a/site/content/docs/5.3/forms/checks-radios.md +++ b/site/content/docs/5.3/forms/checks-radios.md @@ -414,11 +414,11 @@ Star ratings come with a smaller variant: `.star-rating-sm`. ### Dark variant -Add `data-bs-theme="dark"` to the `.star-rating` or any parent element for a dark variant. +Add `.star-rating-dark` to the `.star-rating` for a dark variant. {{< example class="bg-dark" >}} -
+
diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 31d7047294..984e9ab405 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -51,6 +51,9 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
  • $accordion-dark-button-hover-bg
  • $footer-accordion-active-color
  • $footer-accordion-btn-hover-bg
    • +
  • $form-star-rating-dark-checked-color
    • +
  • $form-star-rating-dark-unchecked-color
    • +
  • $form-star-rating-dark-hover-color
    • From 0d90c07f7ce4ca88fb61fc4f43d083a89a064889 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 4 Sep 2023 07:58:04 +0200 Subject: [PATCH 13/18] Fix bundlewatch values --- .bundlewatch.config.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 307a12b915..8632c5f9d6 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -26,11 +26,11 @@ }, { "path": "./dist/css/boosted.css", - "maxSize": "43.0 kB" + "maxSize": "43.5 kB" }, { "path": "./dist/css/boosted.min.css", - "maxSize": "40.0 kB" + "maxSize": "40.5 kB" }, { "path": "./dist/js/boosted.bundle.js", From e0c15b85e284958bd9554eca4951e4030c8c9f92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 4 Sep 2023 08:26:22 +0200 Subject: [PATCH 14/18] Wording --- site/content/docs/5.3/forms/checks-radios.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/site/content/docs/5.3/forms/checks-radios.md b/site/content/docs/5.3/forms/checks-radios.md index 21e235dc3b..78a3d3c86d 100644 --- a/site/content/docs/5.3/forms/checks-radios.md +++ b/site/content/docs/5.3/forms/checks-radios.md @@ -440,7 +440,8 @@ Add `.star-rating-dark` to the `.star-rating` for a dark variant. {{< /example >}} ### Readonly -Make star ratings readable but non editable by using `` instead of `` elements. + +Make star ratings readable but non-editable by using ``s instead of `` elements. {{< example >}}
    From fbae73e5a22c53dc6e2be0571186ba3f6676c923 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Mon, 4 Sep 2023 15:10:49 +0200 Subject: [PATCH 15/18] Fix after review --- scss/_variables.scss | 6 +++--- site/content/docs/5.3/migration.md | 14 +++++++++++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 46a97f454c..31ef29c686 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1184,9 +1184,9 @@ $form-star-size: 1.5625rem !default; $form-star-size-sm: 1.25rem !default; $form-star-margin-between: -.125rem !default; -$form-star-rating-checked-color: var(--#{$prefix}link-hover-color) !default; -$form-star-rating-unchecked-color: var(--#{$prefix}code-color) !default; -$form-star-rating-hover-color: var(--#{$prefix}emphasis-color) !default; +$form-star-rating-checked-color: $accessible-orange !default; +$form-star-rating-unchecked-color: $gray-700 !default; +$form-star-rating-hover-color: $black !default; $form-star-rating-dark-checked-color: $primary !default; $form-star-rating-dark-unchecked-color: $gray-500 !default; diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 1d39679117..573ac8daad 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -38,6 +38,7 @@ If you need more details about the changes, please refer to the [v5.3.2 release] - + ``` +- Deprecated The `form-star-rating()` mixin is now deprecated. We now use a `mask-image` CSS property to display the stars in this form element. ### CSS and Sass variables @@ -65,9 +66,16 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
  • $accordion-dark-button-hover-bg
  • $footer-accordion-active-color
  • $footer-accordion-btn-hover-bg
    • -
  • $form-star-rating-dark-checked-color
    • -
  • $form-star-rating-dark-hover-color
    • -
  • $form-star-rating-dark-unchecked-color
    • +     
  • $form-star-rating-checked-color
    • +     
  • $form-star-rating-checked-icon
    • +     
  • $form-star-rating-dark-checked-color
    • +     
  • $form-star-rating-dark-hover-color
    • +     
  • $form-star-rating-dark-unchecked-color
    • +     
  • $form-star-rating-hover-color
    • +     
  • $form-star-rating-sm-checked-icon
    • +     
  • $form-star-rating-sm-unchecked-icon
    • +     
  • $form-star-rating-unchecked-color
    • +     
  • $form-star-rating-unchecked-icon
  • $local-nav-active-bg
  • $local-nav-active-color
  • $local-nav-active-marker-width
    • From ce77924e8454c218f11a0c7ccfa074094c257dd9 Mon Sep 17 00:00:00 2001 From: MewenLeHo Date: Mon, 4 Sep 2023 15:17:41 +0200 Subject: [PATCH 16/18] . --- site/content/docs/5.3/migration.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 573ac8daad..a11b073a0d 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -66,16 +66,16 @@ If you need more details about the changes, please refer to the [v5.3.2 release]
  • $accordion-dark-button-hover-bg
  • $footer-accordion-active-color
  • $footer-accordion-btn-hover-bg
    • -     
  • $form-star-rating-checked-color
    • -     
  • $form-star-rating-checked-icon
    • -     
  • $form-star-rating-dark-checked-color
    • -     
  • $form-star-rating-dark-hover-color
    • -     
  • $form-star-rating-dark-unchecked-color
    • -     
  • $form-star-rating-hover-color
    • -     
  • $form-star-rating-sm-checked-icon
    • -     
  • $form-star-rating-sm-unchecked-icon
    • -     
  • $form-star-rating-unchecked-color
    • -     
  • $form-star-rating-unchecked-icon
    • +
  • $form-star-rating-checked-color
    • +
  • $form-star-rating-checked-icon
    • +
  • $form-star-rating-dark-checked-color
    • +
  • $form-star-rating-dark-hover-color
    • +
  • $form-star-rating-dark-unchecked-color
    • +
  • $form-star-rating-hover-color
    • +
  • $form-star-rating-sm-checked-icon
    • +
  • $form-star-rating-sm-unchecked-icon
    • +
  • $form-star-rating-unchecked-color
    • +
  • $form-star-rating-unchecked-icon
  • $local-nav-active-bg
  • $local-nav-active-color
  • $local-nav-active-marker-width
    • From 34f2e2771851c21032a50fc91f88f3089f86feda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 5 Sep 2023 07:52:31 +0200 Subject: [PATCH 17/18] Improve migration guide note --- site/content/docs/5.3/migration.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index a11b073a0d..981bd91541 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -33,12 +33,15 @@ If you need more details about the changes, please refer to the [v5.3.2 release] - New In order to improve accessibility for people suffering from any form of color blindness, we added a visual cue to form elements on error when focused so information does not rely exclusively on color anymore. Although is has no direct impact, you might want to apply this same modification within your custom form controls if you have any. - New Labels related to mandatory form fields have been improved for better accessibility. A `` element has been added to ensure correct restitution by assistive technologies like screen readers. Please reflect these modifications into your websites. -- New Star rating has been slightly changed for accessibility purpose; a visually hidden `span` matching the title attribute was added and color contrast of inactive stars has been updated. Please reflect this modification into your websites. Our documentation also includes a disabled and a readonly state for this form element. +- New Star rating now has a `readonly` state. + +- Warning Star rating has been slightly changed for accessibility purpose; a visually hidden `span` matching the title attribute was added and color contrast of inactive stars has been updated. Please reflect this modification into your websites. + ```diff - + ``` -- Deprecated The `form-star-rating()` mixin is now deprecated. We now use a `mask-image` CSS property to display the stars in this form element. +- Deprecated `form-star-rating()` mixin is now deprecated. We now use a `mask-image` CSS property to display the stars in this form element. ### CSS and Sass variables From 408d04cc1a78b9edd4b9f69ef1208f02c7b41ff0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 5 Sep 2023 07:53:31 +0200 Subject: [PATCH 18/18] Improve migration guide note --- site/content/docs/5.3/migration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index 981bd91541..3949b9cdc7 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -41,7 +41,7 @@ If you need more details about the changes, please refer to the [v5.3.2 release] - + ``` -- Deprecated `form-star-rating()` mixin is now deprecated. We now use a `mask-image` CSS property to display the stars in this form element. +- Deprecated The `form-star-rating()` mixin is now deprecated. We now use a `mask-image` CSS property to display the stars in this form element. ### CSS and Sass variables