Proposing updates to the Toggle theme API

Hi! This isn’t a bug report but rather a forum to get some feedback on some expansions I’d like to make to the Toggle component’s theming capability. I’m a new contributor but I’d be more than happy to take on these changes if they seem sound, as they would overlap well with stuff I’m working on at my company, which is a Grommet consumer. I read in the contribution guide that opening an issue is a good way to discuss plans, so here I am 😃

Problem

The current Checkbox Toggle styles are coupled in a few ways (but not in all ways) to the checkbox style - e.g. the width of the toggle is determined by theme.checkBox.toggle.size, but the height is determined by theme.checkBox.size; the size of the knob and style of the border are also coupled to the checkBox theme in similar ways. We’ve found it difficult to implement a toggle to design specifications without extensive use of the extend properties, sometimes to overwrite styles being applied because of what we put in the theme to style our checkboxes.

Proposed Changes

Given that the checkbox and toggle are visually very different components, I think it would be nice for Grommet to expose more toggle-specific theming options, and to use those options for styling (while falling back to checkbox styles where necessary to preserve backward compatibility). Specifically, I think I’d like to add the following to theme.checkBox.toggle (this all in addition to the existing theming API):

height?: string // height of the toggle background
// border for the toggle background
border?: {
  color?: ColorType;
  width?: string;
};
knob: {
  size?: string // size of the knob
}

I believe these additions would be sufficient to completely decouple the toggle styles from the checkbox styles. That said, as I mentioned above, we could coalesce back to the checkbox styles being used before, so this would not have to be a breaking change. My hope is that this would give a lot more clarity and ease for apps that use both a checkbox and a toggle while expecting them to look quite different.

Please let me know any thoughts that you have on this! Like I said, I haven’t contributed before, so I hope I’ve gone about this in the right way and am open to feedback of any sort 😃 Looking forward to hearing from you all.

[phinch]

got it, sounds good 😃 thanks @halocline. i’ll plan to start implementing a first pass at this tomorrow, taking all of the feedback into account! (will still be watching here for any other comments too)

[phinch]

@halocline thanks for the feedback 😃 here are some screenshots of each! The toggle height is 24px whereas the checkbox size is 20px; and the knob size is 16px. There’s also some atypical stuff in the toggle with the active/inactive color: it’s the background rather than the knob that changes color when active. I was also wondering about the checked state, which would definitely be used by us! it seems like the prevailing pattern in the Grommet checkbox is to use extend: ({ checked }) => ... to incorporate checked styles, which is definitely workable - but I think a checked section would be cool too if that sounds kosher.

our checkbox design:

toggle design: