Allow to customise form-switch colors #35004

flohw · 2021-09-17T14:23:32Z

Hi

I ~~create~~ updated this PR to fix issue #35001 ~~I would like to submit this PR for any comments before taking it further~~. Hopefully it's the good thing to do. Feel free to add any feedback.

~~For example at the moment, contrast with other colors than white, not checked switch misses some contrast.~~
Fixed with another variable $form-switch-bg-off-image which has an inverted color than the default one. (white instead of black basically)

Before updating the PR:

After PR update:

~~I also not make any changes for disabled input too.~~
I didn't make any changes for disabled input but results looks good to me.

~~I only create this PR to know if I am in the good direction and if it has any chance to be merged.~~

I updated the documentation too. Let me know if some example needs to be removed and if the line 105 should not be wrapped. It has been done automatically by my IDE and leave as is as I didn't feel comfortable to horizontally scroll to read when editing.

Thanks

~~PS: my commit is not signed properly, I will sign it properly if I am allowed to go further.~~

closes #35001

The text was updated successfully, but these errors were encountered:

flohw · 2021-09-24T08:34:27Z

@GeoSot I just seen the tags you added. Is that something you may consider merging at some point ? I only made the PR as a POC but I can go further if this is a feature that would be merged.

Also if it's a feature that could be merged, am I on the right path with this little change or am I wrong and should take another path for this changes?

Thanks

flohw · 2021-10-06T13:08:41Z

Hello here (maybe @GeoSot ?)

I updated my PR with the complete implementation. Hopefully this can be merged soon.

Thank you

GeoSot · 2021-10-06T13:20:38Z

Hey @flohw . Sorry for my late answer, I missed that message.

Your MR is css scoped, and I am more to the Js section of the team. I tagged it to help our guys give the proper attention
I guess, they will prioritize it and evaluate it eventually 😃

flohw · 2021-10-20T07:12:25Z

Hello there,
One month after opening this pr for review and then completing it with the hope to have more interest I still have no clue on what this PR will become.

Hopefully this time I will have some feedback.

Thanks.

flohw · 2021-11-19T14:58:37Z

Hello,

Two months have past. Anyone would give me some feedback?

🙁

ffoodd · 2021-11-20T09:19:18Z

site/content/docs/5.1/forms/checks-radios.md

+`disabled` attribute. They also can be theme-colored when they are checked
+and another when they are not checked.


The sentence sounds weird to me, some native english speaking friend might reword this. :)

Maybe "The checked and not checked colors are customizable separately"?

ffoodd · 2021-11-20T09:22:57Z

We're kinda busy out of Bootstrap, sorry for the delay.

Could you please check focus and active states for colored switched? They still use the standard light blue, which is a bit awkward IMHO. Using the according theme color and lightning it would be more accurate, wouldn't it?

flohw · 2021-11-22T08:31:47Z

@ffoodd Thank you for your feed back. I can understand you are busy, no problem. I only hoped to have some feedback. Hopefully we can work on this now :-)

I updated the PR with focus and active state. The only last thing I can see it the knob remains blue with .swtich-<theme-color> only. I think we can make a function to colorize it properly but not sure how to implement it properly.

Maybe

// Where to put this function ?
@function form-switch-bg-off-swtich($color) {
  background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$color}'/></svg>"));
}

// In_form-check.scss
.switch-off-#{state} {
  // ...
  @form-switch-bg-off-switch($value)
}

Let me know if it could be ok for you.

Thanks again for your review.

ffoodd · 2021-11-22T12:22:57Z

You might use the existing str-replace() function instead, to replace the color used in the main SVG variable with the theme color.

Just be aware that escape-svg() replaces # with %23.

flohw · 2021-11-22T14:32:13Z

I updated locally to have the knob matching the color when the check box in not checked.

Is this what you had in mind? (note that the offset are due to firefox screenshot and everything is perfectly aligned on my screen 😉 )

I also tried to rephrase the documentation above. Is it clearer than my previous attempt? ^^

Thanks again for your time.

flohw · 2021-11-22T14:41:07Z

Here is another update for the off colored case when the checkbox is not checked.
I alse added the colored borders.

WDYT?

flohw · 2021-11-24T09:02:51Z

Hi @ffoodd,

I updated the knob color and active/focus outline too.
After some other check, I didn't apply what I did on .switch-off-* yesterday because it breaks the possibility to have .switch-<color>.switch-off-<another color>. So .switch-off-* are colored when the checkbox is not checked and default main color when checked.

Is it good for you? Maybe you have a solution to improve mine which I don't know?

flohw · 2021-12-06T15:19:40Z

Hi @ffoodd,

Any update on this?

Thanks

ffoodd · 2021-12-07T15:10:57Z

Sorry for the delay.

Regarding the docs, I think it should be made clearer: maybe use a grid or something to show each variant and its states beside each other, as we do for buttons examples?

On the Sass / CSS side, I think we'll need to align with our current progress using CSS custom properties. Your suggestion is a perfect candidate for such approach.

I think your suggestion is valuable, but it may have to wait that we moved our forms to CSS custom properties.

flohw · 2021-12-23T15:00:28Z

Thanks @ffoodd
I subscribed to the issue to know when I can rework this PR.

I made some updates to be more logic with the colors and when they are applied to better distinguish the status depending if we want to highlight the checked (.switch-on-*) or not checked (.switch-off-*).

I am not sure on my selector line 127 which is a bit complex at first glance but is only here to revert some inheritance. Maybe there is a technique I don't know. I more a Symfony developer with some css knowledge and open to learn.

I updated the documentation, this is how it's displayed now. Is it ok?

But the html needed for this is a bit long/messy. Again, maybe there is a way I don't know to reduce the code?

Thanks again for any advice you can give me.

Have a merry Christmas a bit in advance too! 🎅

ffoodd

Still things to improve but this is a really neat idea, thanks a lot for your work!

ffoodd · 2022-02-08T12:18:44Z

site/content/docs/5.1/forms/checks-radios.md

+<div class="row">
+  <div class="col fw-bold">Checked status</div>
+  <div class="col fw-bold">Not checked status</div>
+</div>


In fact I'd go for a much simpler presentation, like buttons examples: a single row of example, prededed with a heading (eg. "Themed switch" then switch-on and switch-off).

Would this look accurate to you?

Yes I tried but due to longer labels I find this solution more elegant to display. And the special case where swich-on and switch-off can be applied at the same time is a bit harder to display.

I will try again your solution.

Here is another attempt but I am not super convinced: by reading/seeing this I don't really know which use cases could be covered. But this might not what the documentation is meant for, isn't it?

ffoodd · 2022-02-08T12:18:44Z

scss/forms/_form-check.scss

+    }
+
+    &.switch-off-#{$state} {
+      &:not([class*="switch-on-"]) .form-check-input:checked {


Is &:not([class*="switch-on-"]) needed? What's its purpose?

In case we want to customize both status, the switch-on- classes overrides the rules.

Maybe your solution will prevent this case.

I was wrong about this. (this PR and what I've done is a bit old 😅)
This is to invert how the interface would look like when there is no switch-on class for a better emphasis of the switch-off case.

When the switch-off class is applied, the chosen color is visible when the checkbox is not checked. But if the user enables (checks) it, the color is the default primary one and the status becomes unclear. By adding this rule, it inverts how the switch looks like to emphases the unchecked status.

When the user enables the checkbox (so the status is "checked", or "on", the value would be submitted in a form)

When the user disable the checkbox (so the status is "unchecked", or "off", the value would not be submitted in a form)

When this rule is not added, the "checked" status looks like this, which is confusing:

scss/forms/_form-check.scss

flohw · 2022-02-08T14:27:44Z

@ffoodd
I just pushed the refactor and marked as resolved the related comments while keeping open where I think the discussion should continue 🙂

The drawback of this refactor is that it requires more classes on the element. From a developer experience it's not very convenient. (the compiled css is also very important)

Maybe the solution would be to go for something like this:

[class*="switch-on"] {
  ...
  @each ... {
     &-#{$color} { ... }
   }
}

But I am not sure it exists (just tried but sass doesn't like it 😅) and I am also not sure frontend developers like this kind of selector a lot 😅.

Let me know if you have an idea about this.

flohw requested a review from as a code owner Sep 17, 2021

flohw marked this pull request as draft Sep 17, 2021

flohw changed the title ~~[Draft] Allow to customise form-switch colors~~ Allow to customise form-switch colors Sep 17, 2021

flohw force-pushed the feature/custom-switch-with-theme-colors branch from 4c4e81e to 4c5ff2f Sep 22, 2021

GeoSot added css v5 labels Sep 24, 2021

flohw force-pushed the feature/custom-switch-with-theme-colors branch 6 times, most recently from b63b325 to 142249c Oct 6, 2021

flohw marked this pull request as ready for review Oct 6, 2021

ffoodd reviewed Nov 20, 2021

View changes

flohw force-pushed the feature/custom-switch-with-theme-colors branch 3 times, most recently from dc6eee3 to 703dde3 Nov 24, 2021

flohw added 7 commits Dec 23, 2021

First draft to customise form-switch colors

42079b9

Complete documentation for form-switch colors capabilities

a5083dd

Fix background-image whith switch-off-color

075bd1c

Update documentation accordingly

f5822ad

Update label

5c46741

form check switch with desired color instead of active one

c981d79

Fix not checked switch active color

c0ce10c

flohw force-pushed the feature/custom-switch-with-theme-colors branch from 703dde3 to c0ce10c Dec 23, 2021

flohw added 2 commits Dec 23, 2021

Some UI improvements

5d9c99d

Improve documentation

118cb5c

ffoodd requested changes Feb 8, 2022

View changes

ffoodd and others added 2 commits Feb 8, 2022

Merge branch 'main' into feature/custom-switch-with-theme-colors

40d3bc9

Refactor switch colors

fa6f4d6

twbs / bootstrap Public

Allow to customise form-switch colors #35004

Allow to customise form-switch colors #35004

flohw commented Sep 17, 2021 •

edited

flohw commented Sep 24, 2021

flohw commented Oct 6, 2021

GeoSot commented Oct 6, 2021

flohw commented Oct 20, 2021

flohw commented Nov 19, 2021

ffoodd Nov 20, 2021

flohw Nov 22, 2021

ffoodd commented Nov 20, 2021

flohw commented Nov 22, 2021

ffoodd commented Nov 22, 2021

flohw commented Nov 22, 2021

flohw commented Nov 22, 2021

flohw commented Nov 24, 2021

flohw commented Dec 6, 2021

ffoodd commented Dec 7, 2021

flohw commented Dec 23, 2021

ffoodd left a comment

ffoodd Feb 8, 2022

flohw Feb 8, 2022

flohw Feb 8, 2022

ffoodd Feb 8, 2022

flohw Feb 8, 2022

flohw Feb 8, 2022

flohw commented Feb 8, 2022

		`disabled` attribute. They also can be theme-colored when they are checked
		and another when they are not checked.

twbs / bootstrap Public

Allow to customise form-switch colors #35004

Are you sure you want to change the base?

Allow to customise form-switch colors #35004

Conversation

flohw commented Sep 17, 2021 • edited

flohw commented Sep 24, 2021

flohw commented Oct 6, 2021

GeoSot commented Oct 6, 2021

flohw commented Oct 20, 2021

flohw commented Nov 19, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ffoodd commented Nov 20, 2021

flohw commented Nov 22, 2021

ffoodd commented Nov 22, 2021

flohw commented Nov 22, 2021

flohw commented Nov 22, 2021

flohw commented Nov 24, 2021

flohw commented Dec 6, 2021

ffoodd commented Dec 7, 2021

flohw commented Dec 23, 2021

ffoodd left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

flohw commented Feb 8, 2022

flohw commented Sep 17, 2021 •

edited