Card - decide which approach to take with Figma, slots vs. more formal?

[vavalos5]

Scott and I ended met on 11/28 to discuss the study I had created. We decided that we will not be conducting the study since we’ve been talking about Slots for some time and have gotten validation that they’re the most flexible from Figma. As a next step, i'll be cleaning out Card component and publishing the slot component direction. After it has been published, we’ll wait out a few months and look at Figma analytics + feedback received on how flexible the component really is/ how it's working for others.

• [x] Clean up Figma file
• [x] Create dark mode version
• [x] Review with Kenny + Taylor - [ ] Publish Card slot component
• [x] Create ticket on next steps: provide visuals to show how slot components work + provide content on what a slot component is and why we've decided to move in this direction

[vavalos5]

Will be using this FigJam template to analyze study results

[ericsoderberghp]

Is it better to be more flexible with slots or is it better to be easier to handle common cases without slots?

[ericsoderberghp]

Trading off designers not being familiar with slot components so much today but maybe they are the way to go down the road and we just need to train?

[vavalos5]

ignore this. Github doesn't let me delete my comment

[vavalos5]

@taysea Take a peek and lmk if you see any funkyness happening.

[vavalos5]

Think i found a solution for Card's header. The problem we were having within Figma is that the Avatar and the Icon weren't sizing properly if we replaced the instance with either one of them. They wouldn't basically size properly.

Another example I had previously done was that I had created booleans for both the icon and the Avatar, however, we came to the realization that we don't have the option to show either one or the other if we have booleans for both the avatar and icon.

A third option was to create the avatar and the icon as local components with the 12px padding below, but that also wasn't working since the container holding them within Figma wouldn't hide the container after turning off both the icon and the Avatar.

Finally, I decided to create instances instead to the header. I've created a local component and it seems to be working properly.

@KennyAtHPE and @taysea take a peek at the test example i've created here. Lmk what you think.

[KennyAtHPE]

The heading section worked well when I was testing it. Awesome job on finding a solution for that!

[vavalos5]

Taylor and I got on a quick call to discuss a simple version of card. I've created a test example here with detailed steps on how to replace the body section with a custom made local component.

@KennyAtHPE take a peek and test it out. Would love your input. Thanks! Please close ticket when completed or mention if we need to add additional tickets. Thanks!

[KennyAtHPE]

@vavalos5 @SOjaHPE @ericsoderberghp

Taylor and I believe that the next steps for this component are to conduct user testing with other designers and then incorporate that feedback for a v2 of the component.

@vavalos5 left some additional feedback comments on the current component here

Next steps, closing out this ticket.