Fluent UI Insights is a series that describes the design and decisions behind the Fluent UI design system.
In the fourth episode, members of the Fluent UI team explain implementation details and context behind APIs in Fluent UI React v9: slots, JSX children and triggers.
In this video the team covers a ton of history around slots and their evolution to what they are in Fluent UI React.
Timestamps:
00:00 – Bloopers
00:22 – Intention and motivation for slots
01:53 – Slots v1 in Semantic UI React
03:33 – Slots v2 in Stardust UI React
04:42 – Slots v3 in Fluent UI React v9
06:04 – Component groups: collections and elements
06:50 – Collections API in Semantic UI React
07:45 – JSX children to define components
08:11 – Issues with React Context and useContextSelector
09:03 – Limitations of JSX approach
10:43 – Connection between a host component and children
11:33 – Why triggers API is needed?
12:35 – Triggers API journey
13:24 – Triggers API in Fluent UI React v9
14:36 – Limitations of Triggers API
14:56 – Summary of the episode
15:27 – Bloopers
Enjoy!
Check out slots in action with this simple post on how to use them:
As always let us know what kind of content you want see from Fluent - UI React by visiting us on:
- GitHub: https://github.com/microsoft/fluentui
- Docs: https://react.fluentui.dev
- Twitter: https://twitter.com/fluentui
Top comments (0)