Default slot in RAC

[hosmelq]

Hello guys,

Is there a way to set a default slot within the context? I have two buttons - one with start and end icons and the other with only one icon. I currently use slots to pass props to these icons, but I would like to avoid passing a slot to the button with only an icon.

Examples.

<Button>
  <Icon icon={...} slot="start" />
  <Text>Label</Text>
  <Icon icon={...} slot="end" />
</Button>

<Button>
  <Icon icon={...} />
</Button>

I got an error here because a slot prop is required.

[snowystinger]

Our Buttons don't have any slots like start or end and we don't have an Icon component in RAC either, can you share a codesandbox with what you're trying to do?

Otherwise, my best guess for this would be you just need to provide a default for the slot prop inside the Icon component

[hosmelq]

As you suggested, I added a default slot to the Icon component. Thank You!

[devongovett]

There is a defaultSlot symbol in our implementation but looks like it's not currently exported from the package:

react-spectrum/packages/react-aria-components/src/utils.tsx

Line 27 in d40e4fa

export const defaultSlot = Symbol('default');

We could probably export that? We might wanna rename it or something though. We can discuss with the team.

[hosmelq]

I need to build the following component, but I have the same issue as the Icon because of the Button since the RAC Calendar only supports the next and previous slots. I can use a native button but would like to reuse the Button component. I think exporting the Symbol would help here, too.

[marbemac]

Running into the same issue - any chance defaultSlot could be exported from react-aria-components?

[snowystinger]

See #5671

[alexasselin008]

DEFAULT_SLOT is now exported from react-aria-components as of version 1.2 🎉!