How would you implement this convert this React code?

[sbadisa]

Hey, another question around converting from the react tailwind ui samples to svelte. Specifically these few lines:

{({ active, checked }) => (
                      <>
                        <span
                          className={classNames(
                            checked ? 'bg-sky-600 border-transparent' : 'bg-white border-gray-300',
                            active ? 'ring-2 ring-offset-2 ring-sky-500' : '',
                            'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center'
                          )}
                          aria-hidden="true"
                        >
                          <span className="rounded-full bg-white w-1.5 h-1.5" />
                        </span>

I have tried the following (with and without slot props let:active let:checked) with no luck...

<span
										class={({ checked, active }) =>
											classNames(
												checked ? 'bg-sky-600 border-transparent' : 'bg-white border-gray-300',
												active ? 'ring-2 ring-offset-2 ring-sky-500' : '',
												'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center'
											)}
										aria-hidden="true"
									>
										<span class="rounded-full bg-white w-1.5 h-1.5" />
									</span>

Full React code:

<RadioGroup value={selected} onChange={setSelected}>
              <RadioGroup.Label className="text-sm font-medium text-gray-900">Privacy</RadioGroup.Label>

              <div className="mt-1 bg-white rounded-md shadow-sm -space-y-px">
                {settings.map((setting, settingIdx) => (
                  <RadioGroup.Option
                    key={setting.name}
                    value={setting}
                    className={({ checked }) =>
                      classNames(
                        settingIdx === 0 ? 'rounded-tl-md rounded-tr-md' : '',
                        settingIdx === settings.length - 1 ? 'rounded-bl-md rounded-br-md' : '',
                        checked ? 'bg-sky-50 border-sky-200 z-10' : 'border-gray-200',
                        'relative border p-4 flex cursor-pointer focus:outline-none'
                      )
                    }
                  >
                    {({ active, checked }) => (
                      <>
                        <span
                          className={classNames(
                            checked ? 'bg-sky-600 border-transparent' : 'bg-white border-gray-300',
                            active ? 'ring-2 ring-offset-2 ring-sky-500' : '',
                            'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center'
                          )}
                          aria-hidden="true"
                        >
                          <span className="rounded-full bg-white w-1.5 h-1.5" />
                        </span>
                        <div className="ml-3 flex flex-col">
                          <RadioGroup.Label
                            as="span"
                            className={classNames(
                              checked ? 'text-sky-900' : 'text-gray-900',
                              'block text-sm font-medium'
                            )}
                          >
                            {setting.name}
                          </RadioGroup.Label>
                          <RadioGroup.Description
                            as="span"
                            className={classNames(checked ? 'text-sky-700' : 'text-gray-500', 'block text-sm')}
                          >
                            {setting.description}
                          </RadioGroup.Description>
                        </div>
                      </>
                    )}
                  </RadioGroup.Option>
                ))}
              </div>
            </RadioGroup>

Any help is greatly appreciated :)

[rgossiaux]

You need the let: active and let: checked on the surrounding <RadioGroupOption> component. Then you can use those variables inside that tag.

For your snippet, you've actually changed too much. That <span> just needs to have className renamed to class and that's it. You've additionally turned class into a function, but it should just be a string like in the original code: this snippet

classNames(
                            checked ? 'bg-sky-600 border-transparent' : 'bg-white border-gray-300',
                            active ? 'ring-2 ring-offset-2 ring-sky-500' : '',
                            'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center'
                          )

evaluates to a string.

[vhscom]

I'd do it like this:

<RadioGroup value={selected} on:change={handleSelectChange}>
  <RadioGroupLabel class="text-sm font-medium text-gray-900">Privacy</RadioGroupLabel>

  <div class="mt-1 bg-white rounded-md shadow-sm -space-y-px">
    {#each settings as setting, index (setting.name)}
      <RadioGroupOption
        let:checked
        let:active
        key={setting.name}
        value={setting}
        class={({ checked }) => {
          return classNames(
            index === 0 ? 'rounded-tl-md rounded-tr-md' : '',
            index === settings.length - 1 ? 'rounded-bl-md rounded-br-md' : '',
            checked ? 'bg-sky-50 border-sky-200' : 'border-gray-200',
            'relative border p-4 flex cursor-pointer focus:outline-none'
          );
        }}
      >
        <span
          class={classNames(
            checked ? 'bg-sky-600 border-transparent' : 'bg-white border-gray-300',
            active ? 'ring-2 ring-offset-2 ring-sky-500' : '',
            'h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center'
          )}
          aria-hidden="true"
        >
          <span class="rounded-full bg-white w-1.5 h-1.5" />
        </span>
        <div class="ml-3 flex flex-col">
          <RadioGroupLabel
            as="span"
            class={classNames(checked ? 'text-sky-900' : 'text-gray-900', 'block text-sm font-medium')}
          >
            {setting.name}
          </RadioGroupLabel>
          <RadioGroupDescription
            as="span"
            class={classNames(checked ? 'text-sky-700' : 'text-gray-500', 'block text-sm')}
          >
            {setting.description}
          </RadioGroupDescription>
        </div>
      </RadioGroupOption>
    {/each}
  </div>
</RadioGroup>

[sbadisa]

Ok looks like the slot props are not working on the child components (e.g. the span, RadioGroupLabel and RadioGroupGroupDescription). The conditional classes are not being applied on them when I toggle through radio options. @rgossiaux @vhscom does this work for you when you run the above code?

[rgossiaux]

Ah yeah, sorry you ran into this. This is a bug that I fixed not long ago, but I hadn't released the fix yet.

I just released a new version (1.0.0-beta.9) which should fix this issue. Give it a try and let me know if you're still having problems.

[vhscom]

It seems to work fine. Try a live example and let me know if that's what you'd expect.

[sbadisa]

Thanks - that seems to have fixed it. Will update on my end and give it a try too.

[sbadisa]

Thanks both for the help. Everything now works except the radio buttons aren't actually appearing to toggle on/off. Think this might be a bug in the actual Tailwind classes, so will do some more debugging.