Adding viewport width to Chromatic stories #2980
Conversation
|
Build successful! 🎉 |
|
Build successful! 🎉 |
| 'tray', | ||
| () => renderTriggerProps({type: 'tray'}), { | ||
| chromatic: {viewports: [320, 1200]}, | ||
| chromaticProvider: {colorSchemes: ['light'], locales: ['ar-AE'], scales: ['large'], disableAnimations: true} |
There was a problem hiding this comment.
Just wanna make sure, but were these meant to be in ar-AE? It's fine it they are, just curious that they differ from the other chromatic stories in this file
There was a problem hiding this comment.
Also any idea why the text seems to smaller than expected? Maybe something on Chromatic's end?
Never mind, its because of the locale
There was a problem hiding this comment.
I thought it would be useful to add some RTL (ar-AE) stories to dialog in Chromatic since we didn't have any.
Menu has a separate RTL file allowing all the stories to have the change if you'd rather see that approach. This change started as a focus on scale: large for the 320 viewport and I added RTL to it.
|
Build successful! 🎉 |
|
Build successful! 🎉 |
4 participants
Tech innovation project
Looked at existing components to determine which would benefit from stories with viewport width adjustments. These would be things like pickers and dialogs and usage of trays.
Components with new or adjusted stories:
Some components like ComboBox, SearchField, SearchWithin, and SearchAutcomplete do not have
isOpento make useful stories in Chromatic. There are components like ActionMenu that don't have Chromatic stories so relevant viewport stories were not added.✅ Pull Request Checklist:
📝 Test Instructions:
Test the new stories in this run of chromatic https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=228
🧢 Your Project:
RSP