Storybook: Add required styles for @automattic/components
#98289
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
matticbot
added
the
[Status] Needs Review
|
This PR does not affect the size of JS and CSS bundles shipped to the user's browser. Generated by performance advisor bot at iscalypsofastyet.com. |
ciampo
reviewed
Jan 14, 2025
Comment on lines
+31
to
+33
| Some components require CSS styles from `@wordpress/components`, which you will need to load in order for them to appear correctly. Within WordPress, add the `wp-components` stylesheet as a dependency of your plugin's stylesheet. See [wp_enqueue_style documentation](https://developer.wordpress.org/reference/functions/wp_enqueue_style/#parameters) for how to specify dependencies. | ||
|
|
||
| In non-WordPress projects, import the `build-style/style.css` file directly, located at `node_modules/@wordpress/components/build-style/style.css`. |
There was a problem hiding this comment.
Thank you for adding this explanation, very much needed IMO
ciampo
approved these changes
Jan 14, 2025
github-actions
bot
removed
the
[Status] Needs Review
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related to #76007 #75167
Proposed Changes
Add required stylesheets for the isolated
@automattic/componentsStorybook.Why are these changes being made?
@automattic/componentsneeds to be usable in other A8C applications, not just in thiswp-calypsorepo. That means we need to ensure that component styles are sufficiently encapsulated for a non-Calypso consumer.The current root-level Storybook loads a lot of stylesheets, including styles for the Calypso client and others that are not documented as required in the
@automattic/componentsREADME. This makes it impossible to verify that@automattic/componentsis shipping with sufficient styles/instructions to render reliably in other environments.Testing Instructions
yarn workspace @automattic/components run storybookand see that some components (e.g.ButtonorSearchableDropdown) and see that they are rendering closer to how they are intended.Note that some styles are still missing — we'll need to start identifying them and filling the gaps. We'll need to figure out how to design our Storybook tooling so we can test that they render reliably in different environments.
Pre-merge Checklist