Radios with more information

[katierik]

There are use cases to show additional descriptive information with a radio button.

It is likely that this would also be helpful as an option for checkboxes, but I do not have use cases for this as of writing.

Notes/screenshots:
https://docs.google.com/document/d/13NkTdfpH7ZD7gBsmhYgjlux9K2mKa5s9t5JNmFV_KpI/edit?usp=sharing

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

Final Designs:
marvel: https://marvelapp.com/50eh328/screen/64407412
raw file: https://sketch.cloud/s/l8Dk4

[mcarrano]

@mcoker can you take a look at this? Is there a way to create this using existing components or do we need to create a custom radio or check component that includes a block of descriptive text?

[mcoker]

@mcarrano currently you can build something similar using the content component's <small> element, which is used for "side comments, such as small print." You can read more about that here - https://www.w3.org/TR/2011/WD-html5-author-20110809/the-small-element.html

And here is a demo - https://codepen.io/mcoker/pen/yLLLYor

As for whether we want to build something to support this layout with radios/checks, we could build support for this in the radio and check components themselves, or this could be some sort of description text associated with a Form component's Form Group, and used with any sort of form group in a form.

[lboehling]

Hi all!
Here are my design proposals for solving the use cases listed in @katierik requirement docs.
https://marvelapp.com/50eh328/screen/64407412 (first page has all three use cases, next page has spacing/specs called out)

raw file: https://sketch.cloud/s/l8Dk4

@mcarrano I know there have been previous requests for tiles and their hover/selected states. I included design proposals in the mock above. Do you think this should be a separate component/issue?

cc: @mcoker @mcarrano

[mcarrano]

@lboehling these designs looks great. @mcoker do you see any issues? Also, how would we implement this? Do you see it as part of the radio and check components or some separate element that is added to the form?

Regarding the hover/select states for cards, there is another issue open for that here: patternfly/patternfly#2470 Can you add those mocks to this issue? Thanks.

[mcoker]

The stacked descriptions look like something that would be built into the radio component itself. The description would be placed in the layout underneath the radio label.

The horizontal descriptions are a bit different. It seems like there is an overall layout (in the designs) that these radio components are a part of, and the radio/label/description are positioned by that layout. In that case, the description would not be a part of the radio component itself, and instead text that is adjacent to a radio element. In Josh's mockup, the description in the horizontal/tabular radios is black. If we can use black text, I think that's as simple as using a radio in a table, and simply putting the description in the adjacent cell (as normal text). Would that be acceptable? If not, the radio descriptions in @lboehling's design looks like it would be "helper text" in a horizontal form layout.

As a side note, would we also add this for the check component? They have the same layout currently.

[lboehling]

I think this would be good to add to both checkbox and radio components.

[mcarrano]

I agree @mcoker The radio buttons with horizontal descriptions can be achieved with a layout the includes radios (or checkboxes) and text in a two column table. Therefore, I think that I would limit this issue to provide the vertically stacked description as part of the component. That was what I saw as the original ask. Does that make sense?

[mcoker]

@mcarrano sounds good to me!

[mcarrano]

@mcoker @lboehling can we consider this done? I revisited the designs and it seems like the first solution, Radios with stacked descriptions, addresses this issue. If you feel like you have everything you need, @mcoker , then I can open a new issue for core implementation and add to the prioritized backlog.

[mcoker]

@mcarrano Yep, go ahead and open an issue. Thanks @mcarrano and @lboehling

[mcarrano]

I've opened a new core issue here: patternfly/patternfly#2526

@lboehling can you just upload your original artwork to Sketch Cloud and add a link for future reference? Thanks.

[lboehling]

@mcarrano added to the first comment in this issue!

[mcarrano]

Thanks @lboehling . Will close this one out.

[gdoyle1]

Merged in symbol library!