Ability to Specify RadioButton Check Size

[halocline]

Expected Behavior

Would like to be able to specify the check size of a RadioButton in my theme.

Actual Behavior

My design calls for a 16x16 check (r=8), but the default icon is 12x12 (r=6).

Related Issue: grommet/hpe-design-system#851

Proposal for something like radioButton.check.size

URL, screen shot, or Codepen exhibiting the issue

Steps to Reproduce

Your Environment

• Grommet version: 2.15.0 / Stable
• Browser Name and version:
• Operating System and version (desktop or mobile):

[netochaves]

I open a PR for this #4505

[ShimiSun]

Can we try leveraging the existing theme prop theme.radioButton.icons.circle instead of adjusting the radius on the code?

[halocline]

Can we try leveraging the existing theme prop theme.radioButton.icons.circle instead of adjusting the radius on the code?

@ShimiSun Ah, I remember why I abandoned this path initially. Initially, I had wanted to add

icons: {
  circle: () => (
    <Blank color="selected-background">
      <circle cx="12" cy="12" r="8" />
    </Blank>
  ),
}

to the theme file. That worked great in a local theme, but did not translate well to grommet-theme-hpe. When trying to apply to that project, the following changes would need to be made to enable this:

• import React to the theme file
• 'react' then must be added as a dependency, most likely a peer dependency in this case.
• Additionally, we would then need to update our Babel configs, adding @babel/preset-react as a preset, so that Babel knows how to parse index.js as JSX.
• And then there was something else, that I can't remember.

At the time, this felt like a lot of overhead to get at what we needed to accomplish. Plus, felt that others might like this ability as well.

Thoughts on whether we want to pursue these types of changes on grommet-theme-hpe?

Another approach would be to add a larger circle to grommet-icons, but that seemed like a pretty acute need.

[ShimiSun]

@halocline why not simply using SVG instead of the Blank react component?

[halocline]

@halocline why not simply using SVG instead of the Blank react component?

We'd still be relying on JSX to define the <svg> in this case as well, correct? If so, I think we run into the same issues.

[ShimiSun]

@halocline I think we'll be OK adding a peer dependency and use the JSX solution, can you file a PR on grommet-theme-hpe to start the discussion?

[halocline]

@halocline I think we'll be OK adding a peer dependency and use the JSX solution, can you file a PR on grommet-theme-hpe to start the discussion?

👍 Will do.

[halocline]

Closing this. Used the property theme.radioButton.icons.circle to provide a custom-sized SVG.

[netochaves]

Sorry for not providing the necessary support on this. Thanks @halocline, great solution btw,

[halocline]

Sorry for not providing the necessary support on this. Thanks @halocline, great solution btw,

@netochaves, no, thank you! @ShimiSun was able to point out that Grommet already had support for this, but the property had been undocumented. So it made sense to use the functionality which already existed and document it (which it is now). Very much appreciate all of your contributions!

[ShimiSun]

@netochaves Your PR had definitely helped us move the discussion forward and help us find the best solution, Thanks again!! Regardless, your overall contributions to grommet are highly appreciated!! Looking forward to seeing more of your work ❤️