Allow props to be passed through slots#263
Conversation
Added functionality to Divider so it can get props from slotProps other than className
# Conflicts: # packages/@react-spectrum/dialog/src/AlertDialog.tsx # packages/@react-spectrum/dialog/src/Dialog.tsx # packages/@react-spectrum/dialog/stories/Dialog.stories.tsx # packages/@react-spectrum/dialog/stories/DialogTrigger.stories.tsx
…just convert a css module to the slots api, made useSlotProps behave like useProviderProps, added a test helper function
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
| "@storybook/addon-knobs": "^5.2.1", | ||
| "@storybook/addon-links": "^5.2.1", | ||
| "@storybook/react": "^5.2.1", | ||
| "@testing-library/jest-dom": "^5.1.1", |
There was a problem hiding this comment.
noticed this was now the package while looking up API's
| import {ReactNode} from 'react'; | ||
|
|
||
| export type Slots = {[key: string]: string}; | ||
| export type Slots = {[key: string]: any}; |
There was a problem hiding this comment.
unsure the better typing for this
it's really an object with anything in it, though usually with UNSAFE_className at least (but not required)
|
|
||
| expect(result.current.toasts.length).toEqual(1); | ||
| expect(result.current.toasts[0].timer).toBe(undefined); | ||
| describe('timers', () => { |
There was a problem hiding this comment.
fixed this because jest was spitting out a terrible warning
this has influenced me to make a separate PR for others #265
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
LFDanLu
left a comment
LFDanLu
left a comment
There was a problem hiding this comment.
The code changes look fine to me, but I just wanna make sure I understand the reason behind the changes.
For us:
This allows us to pass what ever props we want to slotted children components. For instance, Dialog doesn't know what order or even what children will be provided to it, but if we wanted to attach a internal ref/tracking id to the element that occupies the "hero" slot we could do so by including it in the "slots" section like so:
In Dialog.tsx:
slots = {
container: {UNSAFE_className: styles['spectrum-Dialog-grid']},
hero: {UNSAFE_className: styles['spectrum-Dialog-hero'], id: 'SPECIFIC ID WE WANT', OTHER STUFF},
...
For the end user:
The end user can consume the slot stuff we pass via useSlotProps in their own custom component. This means they can still place their custom component in a slot by grabbing the returned classname, and potentially use/discard the other stuff passed through the slot. Like if we had a internal ref that a parent component passes to a specific slot component, they would be able to extract that to reuse/sync with their own ref?
|
@LFDanLu yes, correct, and after this PR I'll be passing an id down to the heading specifically so that we can aria-labelledby the dialog with the heading |
|
Build successful! 🎉 |
# Conflicts: # packages/@react-spectrum/actiongroup/src/ActionGroup.tsx
|
Build successful! 🎉 |
4 participants
Closes https://jira.corp.adobe.com/browse/RSP-1582
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Team: