v4.2: switch custom form control #23004

gijsbotje · 2017-07-06T09:25:31Z

This adds a neat styling feature for the custom form controls.
Markup stays the same as the checkbox but displays it as a toggle switch.

https://codepen.io/gijsbotje/pen/rwKMmy

https://deploy-preview-23004--twbs-bootstrap4.netlify.com/docs/4.1/components/forms/#switches

docs/4.0/components/forms.md

gijsbotje · 2017-07-06T19:50:54Z

fixes a part of #22090

mdo · 2017-07-06T20:54:21Z

Dope! Thank you for jumping in on this. I'll take a look at it for our v4.1 ship :).

gijsbotje · 2017-12-31T03:00:23Z

@mdo @XhmikosR @andresgalante I messed up here :( and cant figure out how to revert it, any suggestions?
Sorry for this... don't understand what wen't wrong

-----edit-----
restored most of it, just the bootstrap-reboot.css file that's not working out

XhmikosR · 2017-12-31T12:44:28Z

@gijsbotje: you can just do git rebase -i upstream/v4-dev and clean up your local branch.

gijsbotje · 2017-12-31T13:51:17Z

maybe i did something wrong, but it didn't work...

XhmikosR · 2017-12-31T14:42:43Z

@gijsbotje: you had messed up your branch. Do not merge from upstream. Just rebase it, if needed.

Now, I cleaned it up and force pushed it. So, make sure you do git fetch origin && git reset --hard origin/custom-switch-form-control before anything else otherwise you will overwrite the cleanup.

gijsbotje · 2017-12-31T14:45:43Z

@XhmikosR thanks dude, will do
i tried to make a pr for a different issue and my forked v4-dev branch is messed up i think
i'll see if i can fix it all

docs/4.0/components/forms.md

m5o · 2018-02-27T22:22:03Z

@gijsbotje / @mdo the solution to modifying the custom-checkbox with .custom-checkbox-switch is super handy.
http://wingman.mediumra.re/components-bootstrap.html#forms

docs/4.0/components/forms.md

ayoubkhan558-zz

I think it should be added to bootstrap, so that we don't need any external library for this purpose.

ayoubkhan558-zz

Its a good option to have

claudioalmeiida · 2018-10-19T20:40:25Z

"mdo removed this from Inbox in v4.2" :(

XhmikosR · 2018-11-28T21:20:39Z

Yeah, that was the issue I noticed too when I said I didn't think this was ready along with transitioning costly properties.

I'll try to have a look tomorrow, but @MartijnCuppens will probably beat me to it.

gijsbotje · 2018-11-28T21:53:45Z

@XhmikosR @MartijnCuppens would this be ok? i used the color of the border for the indicator

rafalp · 2018-11-28T22:01:30Z

Can you include screenshot of other special control (eg. checkbox) being on/off/disabled, for comparison?

Also, is there "disabled + on" state?

gijsbotje · 2018-11-28T22:20:27Z

@rafalp i've paired the switch with its checkbox equivalent

thanks for reminding me about the :checked:disabled state, forgot about that

- changed the indicator to not use the an svg - changed animation to use transform - tweaked height and with calculations of the indicator - added disabled+checked support - tweaked scss markup so it's the same as customo radio and checkbox

… custom-switch-form-control

gijsbotje · 2018-11-28T22:36:59Z

@MartijnCuppens fixed your comments as best as I could think of.
main question to resolve is if the color for the circle when it's unchecked is ok

rafalp · 2018-11-28T23:14:06Z

Those are looking very good, thanks 👍

Changes applied

scss/_custom-forms.scss

MartijnCuppens · 2018-11-30T18:05:06Z

@gijsbotje, the color of the circle looks ok.
~~IMO the switch looks a bit small, maybe we should try to increase the size a bit?~~ (see #23004 (comment))
It would also be nice to have total control over the track width and height and the spacing between the switch and the label text. With 'the track', I mean this element:

Maybe it's possible to tweak this a bit to so that it's possible to set the following variables:

The track width
The track height
Margin between the switch and the label text
The size of the circle

If we have control over this in _variables.scss, it would be easier to control the look of the switch and it would also be possible to make them look like in this PR:
#26691

rafalp · 2018-11-30T18:12:45Z

I would be careful with making switch too big - you'll potentially end with component being too big to use "inline", requiring special positioning or, worse, custom form layout altogether.

addressed

MartijnCuppens · 2018-12-01T12:52:59Z

Good point, @rafalp. Forget about size increment than.

rafalp · 2018-12-01T16:37:01Z

Yeah, I am thinking now how this component should be sized. Right now its sized same way checkbox is, meaning its interchangeable with it. Perhaps it should also support .form-control-lg and .form-control-sm for extra variety?

Just dropping ideas - it may be too late for this, or material for new PR bumping extra sizing to custom controls?

m5o · 2018-12-02T17:24:37Z

💡 Support for contextual classes could be interesting, too.

gijsbotje · 2018-12-03T21:18:52Z

💡 Support for contextual classes could be interesting, too.

@m5o I would do that as a seperate PR as it also affects the other controls

Yeah, I am thinking now how this component should be sized. Right now its sized same way checkbox is, meaning its interchangeable with it. Perhaps it should also support .form-control-lg and .form-control-sm for extra variety?

Just dropping ideas - it may be too late for this, or material for new PR bumping extra sizing to custom controls?

@rafalp Indeed as you said yourself material for new PR 😄

Maybe it's possible to tweak this a bit to so that it's possible to set the following variables:

The track width

The track height

Margin between the switch and the label text

The size of the circle
If we have control over this in _variables.scss, it would be easier to control the look of the switch and it would also be possible to make them look like in this PR:
One more custom checkbox switch, but more flexible #26691

@MartijnCuppens I was fiddling around with the variable custom-control-gutter, but this isn't really the gutter, right? It doesn't define the space between the indicator and the label, but rather defines the space that the label is pushed over. Then the indicator is pulled back the same amount.
So by default the gutter is set to 1.5rem. This gives the checkbox and radio a breathing room of .5rem. Therefore shouldn't gutter be .5rem? And the left properties set to $custom-control-indicator-size + $custom-control-gutter which would result in 1.5rem?

If we implement this change, controlling the track width and space between switch and the label would be much easier. to get it to be accurate in the current setup i would need to do something like:
$custom-switch-width + ($custom-control-gutter - $custom-control-indicator-size)
So if you guys agree with the change to $custom-control-gutter I will make a separate PR with those changes. I can imagine this would have some impact on people that make use of the sass, so that would be your call.

What i'm really struggling with and get wrap my head around is making the height and circle size customizable. I'm currently using the calc css function to get the height and with like this:
calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4})
First the 1rem indicator-size then subtracting the border width * 4 to create space between the circle and the track. This can not be done in sass math as $custom-control-indicator-border-width is a pixel value and $custom-control-indicator-size is a rem value, which are incompatible in sass.

i'm also struggling with the positioning of the circle when you increase or decrease the size of the circle. currently this calc function is taking care of the vertical positioning:
calc(#{(($font-size-base * $line-height-base - $custom-control-indicator-size) / 2)} + #{$custom-control-indicator-border-width * 2})

I'm far from a math guy so if so if someone could assist me in these issues that would be much appreciated.

- improved gutter calculation

MartijnCuppens

LGTM, more control over sizing is something we can look into later

gijsbotje changed the title ~~switch custom form contrl~~ switch custom form control Jul 6, 2017

Johann-S added css feature v4 labels Jul 6, 2017

skmedix suggested changes Jul 6, 2017

View reviewed changes

docs/4.0/components/forms.md Outdated Show resolved Hide resolved

alecpl mentioned this pull request Jul 6, 2017

Checkbox on lists potentially confusing roundcube/elastic#22

Closed

gijsbotje changed the title ~~switch custom form control~~ v4.1: switch custom form control Jul 11, 2017

gijsbotje mentioned this pull request Aug 15, 2017

Add Slider and toggle components #22090

Closed

XhmikosR force-pushed the custom-switch-form-control branch from 3f3fd85 to 0814b27 Compare December 31, 2017 14:41

patrickhlauke reviewed Dec 31, 2017

View reviewed changes

docs/4.0/components/forms.md Outdated Show resolved Hide resolved

m5o reviewed Feb 27, 2018

View reviewed changes

docs/4.0/components/forms.md Outdated Show resolved Hide resolved

gijsbotje changed the title ~~v4.1: switch custom form control~~ v4.2: switch custom form control Apr 12, 2018

alecpl mentioned this pull request May 12, 2018

Add toggle switch #26497

Closed

ayoubkhan558-zz approved these changes May 12, 2018

View reviewed changes

ayoubkhan558-zz suggested changes May 12, 2018

View reviewed changes

alecpl mentioned this pull request May 13, 2018

New checkbox switch component as part of forms component #26508

Closed

vchebotarev mentioned this pull request Jun 9, 2018

One more custom checkbox switch, but more flexible #26691

Closed

claudioalmeiida mentioned this pull request Oct 20, 2018

switch custom form control #27487

Closed

Switch custom form control.

3c05394

gijsbotje added 2 commits November 28, 2018 23:33

Merge remote-tracking branch 'origin/custom-switch-form-control' into…

25615b5

… custom-switch-form-control

Merge branch 'v4-dev' into custom-switch-form-control

1d5b0eb

MartijnCuppens previously requested changes Nov 30, 2018

View reviewed changes

scss/_custom-forms.scss Show resolved Hide resolved

scss/_custom-forms.scss Outdated Show resolved Hide resolved

Update _custom-forms.scss

6746799

gijsbotje and others added 3 commits December 3, 2018 22:27

- improved width sizing

4024ea8

- improved gutter calculation

Merge branch 'v4-dev' into custom-switch-form-control

53b738e

Merge branch 'v4-dev' into custom-switch-form-control

6371760

gijsbotje mentioned this pull request Dec 7, 2018

Custom control gutter fix #27797

Merged

Merge branch 'v4-dev' into custom-switch-form-control

f346da8

MartijnCuppens approved these changes Dec 12, 2018

View reviewed changes

Merge branch 'v4-dev' into custom-switch-form-control

75a58b3

mdo mentioned this pull request Dec 12, 2018

v4.2.0 shiplist #26952

Closed

XhmikosR merged commit 180a06e into twbs:v4-dev Dec 12, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v4.2: switch custom form control #23004

v4.2: switch custom form control #23004

gijsbotje commented Jul 6, 2017 •

edited by XhmikosR

Loading

gijsbotje commented Jul 6, 2017 •

edited

Loading

mdo commented Jul 6, 2017

gijsbotje commented Dec 31, 2017 •

edited

Loading

XhmikosR commented Dec 31, 2017

gijsbotje commented Dec 31, 2017

XhmikosR commented Dec 31, 2017

gijsbotje commented Dec 31, 2017

m5o commented Feb 27, 2018

ayoubkhan558-zz left a comment

ayoubkhan558-zz left a comment

claudioalmeiida commented Oct 19, 2018 •

edited

Loading

XhmikosR commented Nov 28, 2018

gijsbotje commented Nov 28, 2018 •

edited

Loading

rafalp commented Nov 28, 2018 •

edited

Loading

gijsbotje commented Nov 28, 2018

gijsbotje commented Nov 28, 2018

rafalp commented Nov 28, 2018

MartijnCuppens commented Nov 30, 2018 •

edited

Loading

rafalp commented Nov 30, 2018

MartijnCuppens commented Dec 1, 2018

rafalp commented Dec 1, 2018

m5o commented Dec 2, 2018

gijsbotje commented Dec 3, 2018 •

edited

Loading

MartijnCuppens left a comment

v4.2: switch custom form control #23004

v4.2: switch custom form control #23004

Conversation

gijsbotje commented Jul 6, 2017 • edited by XhmikosR Loading

gijsbotje commented Jul 6, 2017 • edited Loading

mdo commented Jul 6, 2017

gijsbotje commented Dec 31, 2017 • edited Loading

XhmikosR commented Dec 31, 2017

gijsbotje commented Dec 31, 2017

XhmikosR commented Dec 31, 2017

gijsbotje commented Dec 31, 2017

m5o commented Feb 27, 2018

ayoubkhan558-zz left a comment

Choose a reason for hiding this comment

ayoubkhan558-zz left a comment

Choose a reason for hiding this comment

claudioalmeiida commented Oct 19, 2018 • edited Loading

XhmikosR commented Nov 28, 2018

gijsbotje commented Nov 28, 2018 • edited Loading

rafalp commented Nov 28, 2018 • edited Loading

gijsbotje commented Nov 28, 2018

gijsbotje commented Nov 28, 2018

rafalp commented Nov 28, 2018

MartijnCuppens commented Nov 30, 2018 • edited Loading

rafalp commented Nov 30, 2018

MartijnCuppens commented Dec 1, 2018

rafalp commented Dec 1, 2018

m5o commented Dec 2, 2018

gijsbotje commented Dec 3, 2018 • edited Loading

MartijnCuppens left a comment

Choose a reason for hiding this comment

gijsbotje commented Jul 6, 2017 •

edited by XhmikosR

Loading

gijsbotje commented Jul 6, 2017 •

edited

Loading

gijsbotje commented Dec 31, 2017 •

edited

Loading

claudioalmeiida commented Oct 19, 2018 •

edited

Loading

gijsbotje commented Nov 28, 2018 •

edited

Loading

rafalp commented Nov 28, 2018 •

edited

Loading

MartijnCuppens commented Nov 30, 2018 •

edited

Loading

gijsbotje commented Dec 3, 2018 •

edited

Loading