From e69ca3146a237652837c3a02279e36583293ebd1 Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Wed, 4 Dec 2024 16:01:16 -0800 Subject: [PATCH] [Storybook] Update styles to be more accurate to prod (#1945) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary: Perseus Storybook in its current state does not accurately reflect how these component look in prod. A couple things are added here to fix this: 1. Stories are wrapped with the `framework-perseus` class. 2. Webapp styles are imported - `box-sizing: border-box` in particular affects all the spacing (margins and padding) Issue: none ## Test plan: - Go to http://localhost:6006/?path=/docs/perseus-components-number-input--docs - Confirm that the inputs have rounded bordersa, and the "mini", "small", and "normal" stories show different sizes. - Go to http://localhost:6006/?path=/story/perseuseditor-widgets-interactive-graph--interactive-graph-ray - Scroll to the start coordinates panels - Use the dev tools to confirm that the width is 308px (previously 336px) ## Screenshots: | Before | After | | --- | --- | | Screenshot 2024-12-03 at 6 03 03 PM| Screenshot 2024-12-03 at 6 02 37 PM | | Screenshot 2024-12-03 at 6 02 56 PM | Screenshot 2024-12-03 at 6 02 47 PM | Author: nishasy Reviewers: jeremywiebe, nishasy, mark-fitzgerald, benchristel Required Reviewers: Approved By: mark-fitzgerald, jeremywiebe Checks: ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: https://github.com/Khan/perseus/pull/1945 --- .changeset/shiny-sloths-obey.md | 5 + .storybook/preview.tsx | 12 +- packages/perseus/src/styles/global.less | 42 ++++++ .../perseus/src/styles/perseus-renderer.less | 1 + packages/perseus/src/styles/reset.css | 131 ++++++++++++++++++ 5 files changed, 190 insertions(+), 1 deletion(-) create mode 100644 .changeset/shiny-sloths-obey.md create mode 100644 packages/perseus/src/styles/global.less create mode 100644 packages/perseus/src/styles/reset.css diff --git a/.changeset/shiny-sloths-obey.md b/.changeset/shiny-sloths-obey.md new file mode 100644 index 0000000000..eff207a3db --- /dev/null +++ b/.changeset/shiny-sloths-obey.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/perseus": patch +--- + +Add global styles to reflect prod styling diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index c8fe292360..f4b81fb8b7 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -23,7 +23,17 @@ const preview: Preview = { (Story) => ( - + {/* Most of our components have an expectation to be + rendered inside of a .framework-perseus container. + We want to make sure we can include it here, since it + can also affect the styling. + + Inclue box-sizing-border-box-reset to reflect + the global styles from prod. + */} +
+ +
), diff --git a/packages/perseus/src/styles/global.less b/packages/perseus/src/styles/global.less new file mode 100644 index 0000000000..018e23055e --- /dev/null +++ b/packages/perseus/src/styles/global.less @@ -0,0 +1,42 @@ +/** + * This file contains styles that are used in prod that ultimately + * get passed onto Perseus components. This file is imported in the + * .storybook/preview.js file so that the components can have the same + * styles as prod when viewed within Storybook. + */ + +// Variables +@offBlack: #21242c; +@wonderBlocksFontFamily: "Lato", "Noto Sans", "Helvetica", "Corbel", sans-serif; + +// Layers +@layer reset, shared, legacy; + +@layer reset { + // A CSS reset. Needed for every page. + @import (inline) "./reset.css"; +} + +@layer shared { + html, + body { + height: 100%; + } + + body { + font-family: @wonderBlocksFontFamily, "Helvetica", "Corbel", sans-serif; + font-size: 14px; + margin: 0; + color: @offBlack; + line-height: 1.4; + min-width: 0; + } + + .box-sizing-border-box-reset { + box-sizing: border-box; + } + + .box-sizing-border-box-reset * { + box-sizing: inherit; + } +} diff --git a/packages/perseus/src/styles/perseus-renderer.less b/packages/perseus/src/styles/perseus-renderer.less index 61467828f9..3e02cc2162 100644 --- a/packages/perseus/src/styles/perseus-renderer.less +++ b/packages/perseus/src/styles/perseus-renderer.less @@ -2,6 +2,7 @@ @import "./variables.less"; @import "./util.less"; +@import "./global.less"; @import "./styles.less"; diff --git a/packages/perseus/src/styles/reset.css b/packages/perseus/src/styles/reset.css new file mode 100644 index 0000000000..0c41ad16df --- /dev/null +++ b/packages/perseus/src/styles/reset.css @@ -0,0 +1,131 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* End Reset */