Component: Radio Group

[patrickarlt]

Esri/calcite-web#1030

Also See: https://ionicframework.com/docs/api/radio-group, https://ionicframework.com/docs/api/radio

[jcfranco]

@julio8a @patrickarlt I started looking into this and wanted to ask if you had additional comps or examples of how this component would be used? Ionic's radio-group implementation depends on a user providing items where each item has a label and a radio component:

<ion-radio-group>
  <ion-item>
    <ion-label>Cord</ion-label>
    <ion-radio value="cord"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>Duesenberg</ion-label>
    <ion-radio value="duesenberg"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>Hudson</ion-label>
    <ion-radio value="hudson"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>Packard</ion-label>
    <ion-radio value="packard"></ion-radio>
  </ion-item>

  <ion-item>
    <ion-label>Studebaker</ion-label>
    <ion-radio value="studebaker"></ion-radio>
  </ion-item>
</ion-radio-group>

Not sure if we wanted something similar or something a little more simple like:

<calcite-radio-group>
  <calcite-radio-group-item value="cord">Cord</calcite-radio-group-item>
  <calcite-radio-group-item value="duesenberg">Duesenberg</calcite-radio-group-item>
  <calcite-radio-group-item value="hudson">Hudson</calcite-radio-group-item>
  <calcite-radio-group-item value="packard">Packard</calcite-radio-group-item>
  <calcite-radio-group-item value="studebaker">Studebaker</calcite-radio-group-item>
</calcite-radio-group>

[julio8a]

the calcite-radio-group definitely seems a lot simpler. Here are some comps of the Radio visual design (along with checkboxes #1 @paulcpederson is working on.):

[patrickarlt]

@jcfranco it might be good to follow what @kumarGayu did for <calcite-switch> for this. The big thing would be to wrap an existing form element for the reasons I gave in #24 (comment). We have to have some way for this to hook into default browser <form> behaviors and for frameworks to work with the input in a standardized way. This would probally look like:

<calcite-radio-group>
  <calcite-radio-group-item value="cord">
    Cord <!-- Optional Label-->
    <input slot="input" type="radio" name="foo"> <!-- Hidden element for <form> and frameworks to interact with. Can be hidden by the calcite component. -->
   </calcite-radio-group-item>
  <calcite-radio-group-item value="cord">
    Duesenberg <!-- Optional Label-->
    <input slot="input" type="radio" name="foo"> <!-- Hidden element for <form> and frameworks to interact with. Can be hidden by the calcite component. -->
   </calcite-radio-group-item>
</calcite-radio-group>

[jcfranco]

@julio8a Per our discussion, I will hold off on this until I get a more detailed spec.

[jcfranco]

Very belated update: Spoke w/ @julio8a and this will follow Calcite Web's radio group implementation.

[jcfranco]

@julio8a Could you help provide focus states? Currently, Calcite Web radio group styling does not have any, so there is no indicator on which is one is active when you tab between groups.

[julio8a]

@jcfranco, there's a conversation about that here: #20

For now, you can use the default browser default?

[jcfranco]

@julio8a 👌

[patrickarlt]

@julio8a @jcfranco There seems to be quite a bit of difference between the designs in #5 (comment) and the designs in #5 (comment). Do we need to reconcile those? I do really like the "pillbox" style design from @jcfranco. We use similar stuff all over Vector Tile Style Editor:

[jcfranco]

@patrickarlt @julio8a I'll leave it up to you. 😉

@patrickarlt On a related note, how are you labeling your radio groups? Wrapping in <label>s?

[paulcpederson]

I think @julio8a was showing the designs from radio button, not radio group. The pills-type UI is what we need/use in Online as well: http://esri.github.io/calcite-web/documentation/components/#radio-group

[julio8a]

Yes, I mean radio button, not radio group. 😊

[asangma]

📻

[julio8a]

Some styling updates to the radio-group:

[jcfranco]

@julio8a Awesome! Can you share which colors variables/values are being used?

[julio8a]

The active color is now: $blue
hover color is: $off-white

[paulcpederson]

Closing for now, any further work can be opened as new issues. Nice work @jcfranco 👍