feature trio pattern example #134
Conversation
- Created pattern example in KitchenSink - Get feedback on CSS and the potential changes to components
|
🟢 No design token changes found |
🟢 No visual differences foundOur visual comparison tests did not find any differences in the UI. |
| <Stack direction="horizontal" padding="spacious" gap="spacious" style={{textAlign: 'center'}}> | ||
| <style> | ||
| {` | ||
| .FeatureTrio { |
There was a problem hiding this comment.
as this is just an example in this layout, can you inline this for now?
| /> | ||
| <Heading as="h6">24/7 support</Heading> | ||
| <Text size="300">Get help whenever you need it from out always-on team</Text> | ||
| <Link>See support options</Link> |
| } | ||
|
|
||
| .FeatureTrio a > span { | ||
| color: #A475F9 |
There was a problem hiding this comment.
The example that we provide for feature-trio doesn't need to apply the purple link color from the screenshot, as that was just an example. Can we remove this? If we did enable customisation, it should also be done through css variables rather than direct hex override.
There was a problem hiding this comment.
This was also to show the difficulty in changing the color for the link component. happy to remove in this example but this should be addressed I would think if the image for the FeatureTrio is an accurate representation of what we might need to create.
| } | ||
|
|
||
| .FeatureTrio img { | ||
| box-shadow: var(--brand-River-visual-shadow); |
There was a problem hiding this comment.
Don't think our example needs to have a box shadow. Recommend we remove this. cc. @danielguillan.
There was a problem hiding this comment.
I have a note for our meeting on this as well but without one the color is pretty light and hard to see on some monitors. (like mine)
Co-authored-by: Rez <[email protected]>
Summary
Creating a FeatureTrio example within the kitchen sink on Storybook. This example should show users how they can create a FeatureTrio using our components with ease.
List of notable changes:
What should reviewers focus on?
Steps to test:
Supporting resources (related issues, external links, etc):
Contributor checklist:
Reviewer checklist:
Screenshots: