Create atomic slot component

[SeamusLeonardHPE]

Standardise how we are implementing slot components.

Create a component variant set that can be used in other designs for

• How a slot appears
• Language
• Links to supporting educational material

This will likely be an .unpublished component set that is available only to the DS team.

Experiment with the impact on current components that use slot (layer component + tabledata ) and upcoming components (selector + popover)

[SeamusLeonardHPE]

Initial research https://www.figma.com/file/KUfWwwcBkVsY9m9bntqEU9/%233826---Create-slot-component?type=design&node-id=0-1&mode=design

[KennyAtHPE]

Acceptance criteria for atomic slot component:

• Ease of use. The slot component should speed up a designer's workflow instead of being overly complex
• Flexibility. It should be created in a way that any component can be built using it
• Manageability. The single atomic slot component should be easy to manage and scalable for any future updates
• Naming. Aligned with Grommet and designers' mental models, is "Slot" the terminology we want to use?

Next Steps:

• [x] Explore different slot component approaches. Make a list of pros and cons
• [x] Prototype different slot component approaches using design system components. Make note of limitations if any.
• [x] Review w/ the team
• [x] Finalize approach, create ticket for next steps (finalizing component, swap them out with current slot components, merge + publish, create educational material)

Working file

[KennyAtHPE]

Update 5/1:

Presented approach to the team in sprint demo. Summarized notes:

• Concerned about having to create and manage multiple new components if we create a catalog for slots
  • How can we keep these components from being searchable within the assets? Do we want to prevent them from being searchable?
  • What naming conventions should these components follow?
  • Where would they live? Template library?
  • Would this be more maintenance on our end? Soft opinion, I don't think so since we would be componentizing templates/ideas that are all design system approved and are made up atomically with other design system components
  • How can other platforms and teams create their own components to be swapped with slots?
• Concerns about providing too many specific elements/layouts since they may be misused in other slot components
  • How can we organize in a way so that specific elements are discenerable from generic use cases? Should we only include generic use cases that can be used wherever?
  • Emphasize on having clear naming conventions
• When should a component use a variant vs using a slot component? Ex. If a layer's 80/20 use case calls for just a body of text, should we just make a variant that has the layer using a body of text or should it be a slot component with a preferred value pointing to a component that is just a body of text?
• Educational guides definitely needed
  • How to use
  • How to create them (design system + external teams)
  • How to navigate through the instance menu when utilizing instance swap
• Good time to share w/ stakeholders to test
  • Old vs new approach
  • Get a gauge on their general understanding on slot components
• If applicable, how do variables play a part in this? How can we build this in a way that it is future proof?
• General questions to define
  • What type of containers/components will house a slot?
  • What is a slot?
  • What the definition of a slot replacement?
  • How do slots behave and how should they be created? (min/max, constraints, auto layouts, padding, etc.)
  • Can we provide them with a sticker sheet for a quicker startup?
  • Should we rename slot components to something else? Does the term slot match the mental model of our designers? Would something like "empty container" make more sense?
    • Slot is pat of wider web terminology. slot --> dynamic content area --> you can inject any content you want into this area
• Speed and efficiency for the user is the main goal for these slots. On the other hand, we want to remove overhead and complexity on our end as well

---

Next Steps

• [x] Better define slots, processes, and terms
  • What are they?
  • When to use them? When to use slots over variants?
  • What should we call them?
  • TBD
• [ ] Flesh out prototypes and different approaches to send to stakeholders for testing + feedback
  • Stakeholders TBD
• [ ] Review w/ team on finalized proposal
• [ ] Create ticket on publishing + next steps