Radio e Checkbox Groups

[lafray]

Problem

Acredito que tenha uma questão de diferença entre o comportamento desses campos e os outros campos da lib (como Input, TextArea, etc.) que não deveria existir. Na evolução de admin-ui para shoreline, o elementos passaram a ser mais composible e no caso de elementos de formulário, foi criado o Field e seus subcomponentes para poder desvincular o label error message e etc do componente de input em sim. Porém isso não ocorreu com com o CheckboxGroup e RaidoGroup. Olhando o código eles internamente, eles utilizam so componente Field. Acredito que para uniformidade do comportamente dos componentes de formulário, ele não deveria instacializar eles esses elementos de Field, e que usar que deveria fazer isso externamente.

Solution

before

export const RadioGroup = forwardRef<HTMLInputElement, RadioGroupProps>(
  function Radio(props, ref) {
    const {
      error,
      description,
      errorText,
      label,
      children,
      className,
      horizontal = false,
      state,
      id: defaultId,
      ...otherProps
    } = props

    const id = useId(defaultId)

    return (
      <RadioProvider store={state}>
        <Field
          space="large"
          data-sl-radio-group
          error={error}
          className={className}
        >
          <Label htmlFor={id}>{label}</Label>
          <BaseRadioGroup data-sl-group id={id} ref={ref} {...otherProps}>
            <Stack
              horizontal={horizontal}
              space={horizontal ? '$space-5' : '$space-4'}
            >
              {children}
            </Stack>
          </BaseRadioGroup>
          {description && <FieldDescription>{description}</FieldDescription>}
          <FieldError>{errorText}</FieldError>
        </Field>
      </RadioProvider>
    )
  }
)

After

export const RadioGroup = forwardRef<HTMLInputElement, RadioGroupProps>(
  function Radio(props, ref) {
    const {
      error,
      description,
      errorText,
      label,
      children,
      className,
      horizontal = false,
      state,
      id: defaultId,
      ...otherProps
    } = props

    const store = useFieldContext()
    const { id: contextId } = useStore(store, (s) => s)
    const id = defaultId ?? contextId

    return (
      <RadioProvider store={state}>
          <BaseRadioGroup data-sl-group id={id} ref={ref} {...otherProps}>
            <Stack
              horizontal={horizontal}
              space={horizontal ? '$space-5' : '$space-4'}
            >
              {children}
            </Stack>
          </BaseRadioGroup>
      </RadioProvider>
    )
  }
)

Note

Aplicar o mesmo para o CheckboxGroup

Important

Entendo que é uma breakchange, então teria que fazer algo intermediario enquanto não for lançar uma nova major

Usage examples

before:

<RadioGroup label="Label" description="Short description">
      <Radio value="opt1">Pen</Radio>
      <Radio value="opt2">Pineapple</Radio>
      <Radio value="opt3">Apple</Radio>
      <Radio value="opt4">Another pen</Radio>
</RadioGroup>

after

<Field>
      <Label>Label</Label>
      <RadioGroup>
            <Radio value="opt1">Pen</Radio>
            <Radio value="opt2">Pineapple</Radio>
            <Radio value="opt3">Apple</Radio>
            <Radio value="opt4">Another pen</Radio>
      </RadioGroup>
      <FieldDescription>Short description</FieldDescription>
</Field>

That is more similare with Input use

<Field>
      <Label>Label</Label>
      <Input />
      <FieldDescription>Short description</FieldDescription>
</Field>

Dependencies

No response

References

• https://shoreline.vtex.com/components/field
• https://shoreline.vtex.com/components/input
• https://shoreline.vtex.com/components/radio
• https://shoreline.vtex.com/components/checkbox/checkbox-group