Adding Radio Input component

[ivyalin2015]

Adding Radio Input component

♻️ Current situation & Problem

Add Radio input component

⚙️ Release Notes

• Allows users to select one option from a dropdown list with as many items as desired
• Uses standardized coloring

📚 Documentation

Please ensure that you properly document any additions in conformance to Spezi Documentation Guide.

This RadioInput component provides a template to create a multiple choice question.

✅ Testing

Please ensure that the PR meets the testing requirements set by CodeCov and that new functionality is appropriately tested.
My tests mainly focus on rendering but do not include confirmation that different items can be selected.

📝 Code of Conduct & Contributing Guidelines

By submitting creating this pull request, you agree to follow our Code of Conduct and Contributing Guidelines:

• [ v ] I agree to follow the Code of Conduct and Contributing Guidelines.

[arkadiuszbachorski]

This is a bit too complex to be repeated each time. I'd love to have SideLabel component that renders correct input + label element for both Checkbox and Radio.

I imagine such usage:

<SideLabel label="Second choice">
  <Radio value="2" />
</SideLabel>

If <label> contains input, there is no need for htmlFor and id, it's implicit!

[arkadiuszbachorski]

Just a note, we already have SideLabel component.

[arkadiuszbachorski]

We should have a component that renders group of radios already styled. I.e. we want to make sure common need of rendering multiple radios does not need any additional styling. Something like this:

<RadioGroup>
  <SideLabel label="One">
   <Radio id="1" value="1">
  </SideLabel>
</RadioGroup>

[arkadiuszbachorski]

We have flex-center class that is a shorthand for flex items-center justify-center. Extremely often used.

h-6 w-6 can be represented as size-6. It's worth to indicate that both dimensions are meant to be the same.

We have focus-ring class for focus properties. It should do the trick as well here.

[ivyalin2015]

Hmm... I was having an issue of the focus-ring disappearing when I used focus-ring, like this:

Just to make sure, should the tailwind code look something like this?
className={cn( 'relative flex-center size-6 rounded-full border-2 border-secondary focus-ring', className, )}

[arkadiuszbachorski]

This would be an ideal implementation of Radio with indicator and styles.

export const Radio = forwardRef<
  ElementRef<typeof RadioPrimitive.Item>,
  ComponentPropsWithoutRef<typeof RadioPrimitive.Item>
>(({ className, ...props }, ref) => (
  <RadioPrimitive.Item
    ref={ref}
    className={cn(
      'focus-ring flex-center size-4 shrink-0 rounded-full border border-input disabled:cursor-not-allowed disabled:opacity-50',
      className,
    )}
    {...props}
  >
    <RadioPrimitive.Indicator className="flex-center size-2.5 rounded-full bg-primary" />
  </RadioPrimitive.Item>
))
Radio.displayName = RadioPrimitive.Item.displayName

Main aspects:

• focus is functional due to focus-ring
• size is exactly the same as Checkbox, but it's round, keeping the UI consistent and easy to match up together
• disabled state is handled

[arkadiuszbachorski]

Let's keep label separate from the Radio item itself. By relying on composition through separate components, it makes it easier to build reusable components. Labels can quite often require customization, so it's better just to keep it as separate component, using elements like SideLabel (mentioned in other comment)

[arkadiuszbachorski]

Every RadioItem is always going to have Indicator. Could we just put the indicator inside the RadioItem? If someone needs something custom on this matter, they usually are going to opt-out from this component anyway.

What I value here is simplicity of usage. With RadioIndicator baked into the Radio component, we'd just have simpler API usage.

[arkadiuszbachorski]

@ivyalin2015 Thank you for working on this! I left couple comments, could you please address them?

[arkadiuszbachorski]

We also need index.tsx file in the Radio directory that exports Radio components. This is necessary, because we want components/Radio to be a module itself.

Furthermore, we need Checkbox to be exported from src/index.tsx (to make it accessible from @stanfordspezi/spezi-web-design-system module) and from package.json (to make it accessible as @stanfordspezi/spezi-web-design-system/components/Radio).

Referencing this PR should help: https://github.com/StanfordSpezi/spezi-web-design-system/pull/36/files

[arkadiuszbachorski]

We don't need these dependencies.

[arkadiuszbachorski]

As I clarified on Slack, label should be removed from this component.