New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore: storybook context application #2696
Conversation
|
🚀 Deployed on https://pr-2696--spectrum-css.netlify.app |
File metricsSummaryTotal size: 4.57 MB* 🎉 No changes detected in any packages * Size determined by adding together the size of the main file for all packages in the library.* Results are not gzipped or minified. * An ASCII character in UTF-8 is 8 bits or 1 byte. |
ce4cefc
to
c9a4820
Compare
d080af5
to
ebd5957
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I tested these changes to contextsWrapper.js
in the S2 button branch and this does appear to fix the issue with first load of the custom MDX page, along with making sure that all the stories on that page have their gray layer 1 background color coming from the .spectrum
class 👍
One place I am not seeing the classes on are the auto "Docs" pages for the components. In particular the first story with controls does not show the background color. Changing the color theme to dark highlights this:
It looks like the container querying may need adjustment to include these auto docs stories? Inspecting, I see that it does still have a container with the .docs-story
class on it.
const roots = [...document.querySelectorAll(`#story--${id}`)]; | ||
if (viewMode === "docs" && roots.length > 0) { | ||
containers = roots.map(root => root.closest(".docs-story") ?? root); | ||
} | ||
|
||
for (const s of scales) { | ||
container.classList.toggle(`spectrum--${s}`, s === scale); | ||
} | ||
for (const container of containers) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work finding a better way to handle these different .docs-story
containers that we see on the Docs pages.
ebd5957
to
78ea356
Compare
Great catch @jawinn! Yes, the first container on the page adds a |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That worked! The auto docs pages have the right backgrounds now. There is just one leftover console.log to remove, then I think this is good to go.
Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com>
6064c09
to
c3a36e0
Compare
Description
Leveraging the story's id context in order to attempt to more accurately apply a story's individual contexts. In addition, this update uses querySelectors to determine if a context includes static(Black|White) or overBackground classes in it's content and applies the styles based on those settings.
How and where has this been tested?
Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.
Validation steps
Regression testing
Validate:
Screenshots
To-do list