Skip to content
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.

Sign up for GitHub

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

Jump to bottom

fix(storybook): body classes for story and docs pages #2617

Merged
merged 1 commit into from
Apr 1, 2024
Merged

fix(storybook): body classes for story and docs pages #2617

merged 1 commit into from
Apr 1, 2024

Conversation

mdt2
Copy link
Collaborator

@mdt2 mdt2 commented Mar 29, 2024 •
edited by jawinn
Loading

Description

With this fix, Foundation documentation pages will receive the global classes required for styles to show correctly. The fix was to exclude foundation pages from the contextsWrapper. This allows the existing code in manager.js to add the spectrum spectrum--light spectrum--medium class stack to the <body> tag inside the foundations page iframe instead of adding it to only the first <div id="root-inner> (it works to add it here for our Story pages because we only have one Story instance on those pages, but in the docs pages we have 1+ story instances so we need the classes to be higher up on the iframe body).

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

  • When you navigate to storybook, open a Foundations page first before clicking to any component stories. All styles should look correct on the Foundations pages
  • Click around to a component or two and then back to a Foundations page, the styles should look correct on all pages

To-do list

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Mar 29, 2024 •
edited
Loading

🚀 Deployed on https://pr-2617--spectrum-css.netlify.app

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Mar 29, 2024 •
edited
Loading

File metrics

Summary

Total size: 4.48 MB*
Total change (Δ): ⬇ 24.78 KB (-0.54%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package Size Δ
actionbutton 41.24 KB ⬆ 0.28 KB
actiongroup 5.73 KB ⬇ 2.79 KB
assetcard 16.53 KB ⬇ < 0.01 KB
button 83.15 KB ⬆ 0.09 KB
buttongroup 1.38 KB ⬇ 0.53 KB
checkbox 25.10 KB ⬆ 0.17 KB
closebutton 11.79 KB ⬇ 4.35 KB
dial 11.56 KB ⬇ < 0.01 KB
fieldlabel 6.42 KB ⬇ 0.24 KB
logicbutton 9.00 KB ⬇ 0.38 KB
modal 5.23 KB ⬇ < 0.01 KB
page 0.72 KB ⬇ < 0.01 KB
picker 30.67 KB ⬇ 0.20 KB
slider 33.18 KB ⬇ 0.01 KB
splitview 11.42 KB ⬇ < 0.01 KB
table 47.17 KB ⬇ < 0.01 KB
tokens 201.36 KB ⬆ 1.63 KB

Details

actionbutton

File Head Base Δ
index-base.css 30.17 KB 29.90 KB ⬆ 0.28 KB (0.90%)
index-theme.css 11.65 KB 11.65 KB -
index-vars.css 41.24 KB 40.97 KB ⬆ 0.28 KB (0.66%)
index.css 41.24 KB 40.97 KB ⬆ 0.28 KB (0.66%)
metadata.json 17.55 KB 17.43 KB ⬆ 0.13 KB (0.71%)
themes/express.css 8.92 KB 8.92 KB -
themes/spectrum.css 9.11 KB 9.11 KB -

actiongroup

File Head Base Δ
index-base.css 5.73 KB 8.04 KB ⬇ 2.31 KB (-28.75%)
index-theme.css 0.59 KB 1.06 KB ⬇ 0.49 KB (-45.10%)
index-vars.css 5.73 KB 8.52 KB ⬇ 2.79 KB (-32.74%)
index.css 5.73 KB 8.52 KB ⬇ 2.79 KB (-32.74%)
metadata.json 2.61 KB 3.41 KB ⬇ 0.82 KB (-23.54%)
themes/express.css 0.59 KB 0.89 KB ⬇ 0.29 KB (-33.11%)
themes/spectrum.css 0.59 KB 0.79 KB ⬇ 0.19 KB (-24.62%)

assetcard

File Head Base Δ
index-base.css 16.34 KB 16.34 KB ⬇ < 0.01 KB (-0.02%)
index-theme.css 0.79 KB 0.79 KB -
index-vars.css 16.53 KB 16.53 KB ⬇ < 0.01 KB (-0.02%)
index.css 16.53 KB 16.53 KB ⬇ < 0.01 KB (-0.02%)
metadata.json 8.86 KB 8.86 KB -
themes/express.css 0.70 KB 0.70 KB -
themes/spectrum.css 0.69 KB 0.69 KB -

button

File Head Base Δ
index-base.css 53.20 KB 53.11 KB ⬆ 0.09 KB (0.16%)
index-theme.css 30.53 KB 30.53 KB -
index-vars.css 83.15 KB 83.06 KB ⬆ 0.09 KB (0.10%)
index.css 83.15 KB 83.06 KB ⬆ 0.09 KB (0.10%)
metadata.json 33.77 KB 33.56 KB ⬆ 0.22 KB (0.65%)
themes/express.css 29.33 KB 29.33 KB -
themes/spectrum.css 29.40 KB 29.40 KB -

buttongroup

File Head Base Δ
index-base.css 1.38 KB 1.90 KB ⬇ 0.53 KB (-27.32%)
index-vars.css 1.38 KB 1.90 KB ⬇ 0.53 KB (-27.32%)
index.css 1.38 KB 1.90 KB ⬇ 0.53 KB (-27.32%)
metadata.json 0.53 KB 0.64 KB ⬇ 0.11 KB (-16.98%)

checkbox

File Head Base Δ
index-base.css 24.48 KB 24.32 KB ⬆ 0.17 KB (0.67%)
index-theme.css 1.20 KB 1.20 KB -
index-vars.css 25.10 KB 24.94 KB ⬆ 0.17 KB (0.65%)
index.css 25.10 KB 24.94 KB ⬆ 0.17 KB (0.65%)
metadata.json 13.50 KB 13.16 KB ⬆ 0.36 KB (2.66%)
themes/express.css 0.92 KB 0.92 KB -
themes/spectrum.css 0.91 KB 0.91 KB -

closebutton

File Head Base Δ
index-base.css 11.46 KB 15.50 KB ⬇ 4.03 KB (-26.01%)
index-theme.css 0.93 KB 1.22 KB ⬇ 0.33 KB (-26.00%)
index-vars.css 11.79 KB 16.14 KB ⬇ 4.35 KB (-26.95%)
index.css 11.79 KB 16.14 KB ⬇ 4.35 KB (-26.95%)
metadata.json 4.99 KB 8.09 KB ⬇ 3.10 KB (-38.32%)
themes/express.css 0.93 KB 0.93 KB -
themes/spectrum.css 0.92 KB 0.92 KB -

dial

File Head Base Δ
index-base.css 11.56 KB 11.56 KB ⬇ < 0.01 KB (-0.01%)
index-vars.css 11.56 KB 11.56 KB ⬇ < 0.01 KB (-0.01%)
index.css 11.56 KB 11.56 KB ⬇ < 0.01 KB (-0.01%)
metadata.json 4.85 KB 4.85 KB ⬇ < 0.01 KB (-0.02%)

fieldlabel

File Head Base Δ
index-base.css 6.42 KB 6.65 KB ⬇ 0.24 KB (-3.48%)
index-vars.css 6.42 KB 6.65 KB ⬇ 0.24 KB (-3.48%)
index.css 6.42 KB 6.65 KB ⬇ 0.24 KB (-3.48%)
metadata.json 3.59 KB 3.41 KB ⬆ 0.18 KB (5.27%)

logicbutton

File Head Base Δ
index-base.css 9.00 KB 9.37 KB ⬇ 0.38 KB (-3.91%)
index-vars.css 9.00 KB 9.37 KB ⬇ 0.38 KB (-3.91%)
index.css 9.00 KB 9.37 KB ⬇ 0.38 KB (-3.91%)
metadata.json 4.10 KB 4.23 KB ⬇ 0.13 KB (-3.09%)

modal

File Head Base Δ
index-base.css 5.23 KB 5.23 KB ⬇ < 0.01 KB (-0.02%)
index-vars.css 5.23 KB 5.23 KB ⬇ < 0.01 KB (-0.02%)
index.css 5.23 KB 5.23 KB ⬇ < 0.01 KB (-0.02%)
metadata.json 1.82 KB 1.82 KB ⬇ < 0.01 KB (-0.05%)

page

File Head Base Δ
index-base.css 0.72 KB 0.72 KB ⬇ < 0.01 KB (-0.14%)
index-vars.css 0.72 KB 0.72 KB ⬇ < 0.01 KB (-0.14%)
index.css 0.72 KB 0.72 KB ⬇ < 0.01 KB (-0.14%)
metadata.json 0.15 KB 0.15 KB ⬇ < 0.01 KB (-0.68%)

picker

File Head Base Δ
index-base.css 28.78 KB 28.98 KB ⬇ 0.20 KB (-0.68%)
index-theme.css 2.46 KB 2.46 KB -
index-vars.css 30.67 KB 30.87 KB ⬇ 0.20 KB (-0.64%)
index.css 30.67 KB 30.87 KB ⬇ 0.20 KB (-0.64%)
metadata.json 14.55 KB 14.65 KB ⬇ 0.10 KB (-0.67%)
themes/express.css 1.47 KB 1.47 KB -
themes/spectrum.css 1.57 KB 1.57 KB -

slider

File Head Base Δ
index-base.css 30.87 KB 30.87 KB ⬇ < 0.01 KB (-0.01%)
index-theme.css 2.89 KB 2.89 KB ⬇ < 0.01 KB (-0.10%)
index-vars.css 33.18 KB 33.18 KB ⬇ 0.01 KB (-0.01%)
index.css 33.18 KB 33.18 KB ⬇ 0.01 KB (-0.01%)
metadata.json 13.70 KB 13.70 KB ⬇ < 0.01 KB (-0.01%)
themes/express.css 1.75 KB 1.75 KB -
themes/spectrum.css 1.72 KB 1.72 KB ⬇ < 0.01 KB (-0.17%)

splitview

File Head Base Δ
index-base.css 11.42 KB 11.42 KB ⬇ < 0.01 KB (-0.01%)
index-vars.css 11.42 KB 11.42 KB ⬇ < 0.01 KB (-0.01%)
index.css 11.42 KB 11.42 KB ⬇ < 0.01 KB (-0.01%)
metadata.json 4.58 KB 4.59 KB ⬇ < 0.01 KB (-0.02%)

table

File Head Base Δ
index-base.css 47.17 KB 47.17 KB ⬇ < 0.01 KB (-0.00%)
index-vars.css 47.17 KB 47.17 KB ⬇ < 0.01 KB (-0.00%)
index.css 47.17 KB 47.17 KB ⬇ < 0.01 KB (-0.00%)
metadata.json 21.85 KB 21.85 KB ⬇ < 0.01 KB (-0.00%)

tokens

File Head Base Δ
css/dark-vars.css 36.07 KB 24.57 KB ⬆ 11.50 KB (46.80%)
css/express/custom-dark-vars.css 0.59 KB 0.59 KB -
css/express/custom-darkest-vars.css 0.59 KB 0.59 KB -
css/express/custom-large-vars.css 0.50 KB 0.50 KB -
css/express/custom-light-vars.css 0.63 KB 0.63 KB -
css/express/custom-medium-vars.css 0.48 KB 0.48 KB -
css/express/custom-vars.css 0.04 KB 0.04 KB -
css/global-vars.css 49.64 KB 38.23 KB ⬆ 11.41 KB (29.85%)
css/large-vars.css 27.44 KB 24.40 KB ⬆ 3.04 KB (12.45%)
css/light-vars.css 36.07 KB 24.55 KB ⬆ 11.52 KB (46.91%)
css/medium-vars.css 27.36 KB 24.33 KB ⬆ 3.03 KB (12.46%)
css/spectrum/custom-dark-vars.css 3.40 KB 3.40 KB -
css/spectrum/custom-darkest-vars.css 3.40 KB 3.40 KB -
css/spectrum/custom-large-vars.css 4.94 KB 4.94 KB -
css/spectrum/custom-light-vars.css 3.40 KB 3.40 KB -
css/spectrum/custom-medium-vars.css 5.18 KB 5.18 KB -
css/spectrum/custom-vars.css 2.18 KB 2.04 KB ⬆ 0.15 KB (7.00%)
index.css 201.36 KB 199.73 KB ⬆ 1.63 KB (0.82%)
css/darkest-vars.css - 24.53 KB 🚨 deleted, moved, or renamed
css/express/global-vars.css - 2.39 KB 🚨 deleted, moved, or renamed
css/express/large-vars.css - 2.52 KB 🚨 deleted, moved, or renamed
css/express/medium-vars.css - 2.51 KB 🚨 deleted, moved, or renamed
css/spectrum/global-vars.css - 2.74 KB 🚨 deleted, moved, or renamed
css/spectrum/large-vars.css - 2.32 KB 🚨 deleted, moved, or renamed
css/spectrum/medium-vars.css - 2.32 KB 🚨 deleted, moved, or renamed
* 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.

@mdt2 mdt2 added the run_vrt For use on PRs looking to kick off VRT label Mar 29, 2024
@mdt2 mdt2 requested review from jawinn and rise-erpelding March 29, 2024 17:01
@mdt2 mdt2 removed the run_vrt For use on PRs looking to kick off VRT label Mar 29, 2024
jawinn
jawinn reviewed Mar 29, 2024
View reviewed changes
Copy link
Collaborator

@jawinn jawinn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The component styles do load now when visiting the two foundation pages first. I see the button and checkbox styles now on those pages. 👍

Issue with background colors also on spectrum-two
I am seeing one difference with the background colors. I tested on the spectrum-two branch though and am seeing the same thing. So this could be a problem for a separate PR, unless you're aware of a fix related to the changes you made. The problem seems somewhat connected.

On first load of a foundations page, I see these two sections with a different grey background:
Screenshot 2024-03-29 at 2 47 34 PM
Screenshot 2024-03-29 at 2 47 41 PM

If I click around to another component story and then back to a foundation page, the extra background colors go away and it's back to normal.

@mdt2
Copy link
Collaborator Author

mdt2 commented Mar 29, 2024 •
edited
Loading

On first load of a foundations page, I see these two sections with a different grey background

@jawinn weird. I was also seeing this initially while working on this PR, but after making the changes to the contextWrapper, I'm not seeing the backgrounds anymore 😵 Locally I:

  1. Run git clean -dfX && yarn install
  2. Run yarn start
  3. Let it load to the default guide page
  4. Click on one of the Foundations pages and I don't see the grey background

Did you take different steps when you saw the weird backgrounds?

Edit: Confirming that I do see this happening locally on the spectrum-two branch, but not on this branch even after running yarn clean && yarn cache:clean and rerunning the steps above

rise-erpelding
rise-erpelding approved these changes Mar 29, 2024
View reviewed changes
Copy link
Collaborator

@rise-erpelding rise-erpelding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me! The components displayed in Foundations now have the correct styles applied before clicking on a component page, and I can confirm that I am not seeing that gray background on this branch, but do on the spectrum-two branch:

image image

@castastrophe
Copy link
Collaborator

@mdt2 Should we be adding this change to main and then bringing it back into spectrum-two or is it a spectrum-two specific infrastructure change?

@castastrophe castastrophe mentioned this pull request Apr 1, 2024
Merged
3 tasks
jawinn
jawinn approved these changes Apr 1, 2024
View reviewed changes
Copy link
Collaborator

@jawinn jawinn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm no longer seeing the issue I was seeing before. LGTM! 👍

@castastrophe castastrophe merged commit dde6c19 into spectrum-two Apr 1, 2024
31 checks passed
@castastrophe castastrophe deleted the mdt2/css-730-storybook-foundations-styles branch April 1, 2024 14:00
castastrophe pushed a commit that referenced this pull request Apr 1, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
8dfa2af
castastrophe pushed a commit that referenced this pull request Apr 1, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
810fa5e
castastrophe pushed a commit that referenced this pull request Apr 3, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
eb9319b
castastrophe pushed a commit that referenced this pull request Apr 4, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
46e7735
castastrophe pushed a commit that referenced this pull request Apr 5, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
5442e9f
castastrophe pushed a commit that referenced this pull request Apr 11, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
d6e95e0
castastrophe pushed a commit that referenced this pull request Apr 11, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
ce679ed
pfulton pushed a commit that referenced this pull request Apr 12, 2024
@mdt2 @pfulton
fix(storybook): body classes for story and docs pages (#2617)
036b3f8
pfulton pushed a commit that referenced this pull request Apr 15, 2024
@mdt2 @pfulton
fix(storybook): body classes for story and docs pages (#2617)
22c05ba
castastrophe pushed a commit that referenced this pull request Apr 18, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
7c531a1
pfulton pushed a commit that referenced this pull request Apr 19, 2024
@mdt2 @pfulton
fix(storybook): body classes for story and docs pages (#2617)
c500f50
pfulton pushed a commit that referenced this pull request Apr 19, 2024
@mdt2 @pfulton
fix(storybook): body classes for story and docs pages (#2617)
6f7a458
castastrophe pushed a commit that referenced this pull request Apr 26, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
c194430
castastrophe pushed a commit that referenced this pull request Apr 26, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
b9e14e4
castastrophe pushed a commit that referenced this pull request Apr 26, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
c0f1dbc
castastrophe pushed a commit that referenced this pull request Apr 26, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
cc7cb36
castastrophe pushed a commit that referenced this pull request Apr 26, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
baace32
castastrophe pushed a commit that referenced this pull request Apr 30, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
e81fa42
pfulton pushed a commit that referenced this pull request May 1, 2024
@mdt2 @pfulton
fix(storybook): body classes for story and docs pages (#2617)
b3fdaa7
pfulton pushed a commit that referenced this pull request May 3, 2024
@mdt2 @pfulton
fix(storybook): body classes for story and docs pages (#2617)
96853ce
rise-erpelding pushed a commit that referenced this pull request May 7, 2024
@mdt2 @rise-erpelding
fix(storybook): body classes for story and docs pages (#2617)
450ef0d
pfulton pushed a commit that referenced this pull request May 10, 2024
@mdt2 @pfulton
fix(storybook): body classes for story and docs pages (#2617)
4f9e784
castastrophe pushed a commit that referenced this pull request Dec 27, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
78135a1
castastrophe pushed a commit that referenced this pull request Dec 29, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
db5e15a
castastrophe pushed a commit that referenced this pull request Dec 29, 2024
@mdt2 @castastrophe
fix(storybook): body classes for story and docs pages (#2617)
7233e93
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rise-erpelding rise-erpelding rise-erpelding approved these changes

@castastrophe castastrophe castastrophe approved these changes

@jawinn jawinn jawinn approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@mdt2 @castastrophe @jawinn @rise-erpelding