From d5abc6641d2adf7b66b27cb3d3084e9ca9a244cd Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Tue, 3 Dec 2024 17:52:06 -0800 Subject: [PATCH 1/7] [Storybook] Update styles to be more accurate to prod 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) --- .storybook/preview.tsx | 5 +- .storybook/story-wrapper.tsx | 22 ++++++ .storybook/webapp-styles.less | 136 ++++++++++++++++++++++++++++++++++ 3 files changed, 162 insertions(+), 1 deletion(-) create mode 100644 .storybook/story-wrapper.tsx create mode 100644 .storybook/webapp-styles.less diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index c8fe292360..f6b6740ca0 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -10,6 +10,7 @@ import { } from "../testing/test-dependencies"; import type {Preview} from "@storybook/react"; +import StoryWrapper from "./story-wrapper"; // IMPORTANT: This code runs ONCE per story file, not per story within that file. // If you want code to run once per story, see `StorybookWrapper`. @@ -23,7 +24,9 @@ const preview: Preview = { (Story) => ( - + + + ), diff --git a/.storybook/story-wrapper.tsx b/.storybook/story-wrapper.tsx new file mode 100644 index 0000000000..73146f9d79 --- /dev/null +++ b/.storybook/story-wrapper.tsx @@ -0,0 +1,22 @@ +import * as React from "react"; + +import "./webapp-styles.less"; + +/** + * Wrapper for Storybook stories that + * 1. Renders the story inside of a .framework-perseus container + * 2. Includes the global styles from webapp + */ +function StoryWrapper(props) { + // 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. + return ( +
+ {props.children} +
+ ); +} + +export default StoryWrapper; diff --git a/.storybook/webapp-styles.less b/.storybook/webapp-styles.less new file mode 100644 index 0000000000..1a042578fa --- /dev/null +++ b/.storybook/webapp-styles.less @@ -0,0 +1,136 @@ +/** + * This file contains styles that are used in webapp that ultimately + * get passed onto Perseus components when they are rendered within webapp. + * This file is imported in the .storybook/preview.js file so that the + * components can have the same styles as webapp when viewed within Storybook. + * + * Taken from base-page-styles.less in webapp. + */ + +@layer reset, shared, legacy; + +// Variables from webapp +@offBlack: #21242c; +@wonderBlocksFontFamily: 'Lato', 'Noto Sans', 'Helvetica', 'Corbel', sans-serif; +@grayExtraLight: #eee; +@white: #fff; +@maxContainerWidth: 1200px; + +@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; + } + + #outer-wrapper { + // See http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ + display: flex; + flex-direction: column; + position: relative; + background-color: @grayExtraLight; + height: 100%; + margin: 0 0 -77px; + + &.white-outer-wrapper { + background-color: @white; + } + } + + #page-container { + flex: 1 0 auto; + height: 100%; + width: 100%; + max-width: @maxContainerWidth; + position: relative; + margin: 0 auto; + + &.full-bleed { + max-width: none; + } + + &:focus { + outline: none; + } + + .tutorial-outer-wrapper &, + .scratchpad-outermost-wrapper & { + // Override - tutorial pages and scratchpads have no max width + max-width: none; + } + } + + #page-container-inner { + height: 100%; + } + + #page-container-inner article { + /* TODO(benkomalo): determine if this is correct. On the homepage we + * definitely don't want the border (as it was for the old design). + * Does it apply everywhere */ + border-top: none; + } + + #app-shell-root { + height: 100%; + } + + .external-styles-missing { + display: none; + } + + .contained-and-centered { + margin: 0 auto; + max-width: @maxContainerWidth; + } + + .min-contained-and-centered { + margin: 0 auto; + } + + // Add this class for elements that should only be visible if the page has been + // made responsive (viewable and friendly on different screen sizes). + .visible-on-responsive-page { + display: none !important; + } + + #page_sub_nav { + display: none; + } + + // Inline the LESS .page-container-min-width-zero() mixin + body, + #page-container, + footer, + footer .footer-container { + /* Needs !important because we might load shared.css later */ + min-width: 0 !important; + } + + .full-height { + height: 100%; + } + + .box-sizing-border-box-reset { + box-sizing: border-box; + } + + .box-sizing-border-box-reset * { + box-sizing: inherit; + } + + .box-sizing-content-box-reset { + box-sizing: content-box; + } + + .box-sizing-content-box-reset * { + box-sizing: inherit; + } +} From d49811313bafad903cc1f3452adea4fc6c577989 Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Tue, 3 Dec 2024 18:47:09 -0800 Subject: [PATCH 2/7] prettier --- .storybook/webapp-styles.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.storybook/webapp-styles.less b/.storybook/webapp-styles.less index 1a042578fa..a3173f9777 100644 --- a/.storybook/webapp-styles.less +++ b/.storybook/webapp-styles.less @@ -11,10 +11,10 @@ // Variables from webapp @offBlack: #21242c; -@wonderBlocksFontFamily: 'Lato', 'Noto Sans', 'Helvetica', 'Corbel', sans-serif; -@grayExtraLight: #eee; -@white: #fff; -@maxContainerWidth: 1200px; +@wonderBlocksFontFamily: "Lato", "Noto Sans", "Helvetica", "Corbel", sans-serif; +@grayExtraLight: #eee; +@white: #fff; +@maxContainerWidth: 1200px; @layer shared { html, From 281b86c8d02b4db341e4d37455943927752c3908 Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Wed, 4 Dec 2024 10:56:57 -0800 Subject: [PATCH 3/7] Update comments, remove extra styles --- .storybook/global.less | 42 +++++++++++ .storybook/reset.css | 50 +++++++++++++ .storybook/story-wrapper.tsx | 4 +- .storybook/webapp-styles.less | 136 ---------------------------------- 4 files changed, 94 insertions(+), 138 deletions(-) create mode 100644 .storybook/global.less create mode 100644 .storybook/reset.css delete mode 100644 .storybook/webapp-styles.less diff --git a/.storybook/global.less b/.storybook/global.less new file mode 100644 index 0000000000..7ace08c604 --- /dev/null +++ b/.storybook/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; + +@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 !important; + } + + .box-sizing-border-box-reset { + box-sizing: border-box; + } + + .box-sizing-border-box-reset * { + box-sizing: inherit; + } +} diff --git a/.storybook/reset.css b/.storybook/reset.css new file mode 100644 index 0000000000..41927a2e27 --- /dev/null +++ b/.storybook/reset.css @@ -0,0 +1,50 @@ +/* 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 */ \ No newline at end of file diff --git a/.storybook/story-wrapper.tsx b/.storybook/story-wrapper.tsx index 73146f9d79..7958989a2c 100644 --- a/.storybook/story-wrapper.tsx +++ b/.storybook/story-wrapper.tsx @@ -1,11 +1,11 @@ import * as React from "react"; -import "./webapp-styles.less"; +import "./global.less"; /** * Wrapper for Storybook stories that * 1. Renders the story inside of a .framework-perseus container - * 2. Includes the global styles from webapp + * 2. Includes the global styles from prod */ function StoryWrapper(props) { // Most of our components have an expectation to be diff --git a/.storybook/webapp-styles.less b/.storybook/webapp-styles.less deleted file mode 100644 index a3173f9777..0000000000 --- a/.storybook/webapp-styles.less +++ /dev/null @@ -1,136 +0,0 @@ -/** - * This file contains styles that are used in webapp that ultimately - * get passed onto Perseus components when they are rendered within webapp. - * This file is imported in the .storybook/preview.js file so that the - * components can have the same styles as webapp when viewed within Storybook. - * - * Taken from base-page-styles.less in webapp. - */ - -@layer reset, shared, legacy; - -// Variables from webapp -@offBlack: #21242c; -@wonderBlocksFontFamily: "Lato", "Noto Sans", "Helvetica", "Corbel", sans-serif; -@grayExtraLight: #eee; -@white: #fff; -@maxContainerWidth: 1200px; - -@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; - } - - #outer-wrapper { - // See http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ - display: flex; - flex-direction: column; - position: relative; - background-color: @grayExtraLight; - height: 100%; - margin: 0 0 -77px; - - &.white-outer-wrapper { - background-color: @white; - } - } - - #page-container { - flex: 1 0 auto; - height: 100%; - width: 100%; - max-width: @maxContainerWidth; - position: relative; - margin: 0 auto; - - &.full-bleed { - max-width: none; - } - - &:focus { - outline: none; - } - - .tutorial-outer-wrapper &, - .scratchpad-outermost-wrapper & { - // Override - tutorial pages and scratchpads have no max width - max-width: none; - } - } - - #page-container-inner { - height: 100%; - } - - #page-container-inner article { - /* TODO(benkomalo): determine if this is correct. On the homepage we - * definitely don't want the border (as it was for the old design). - * Does it apply everywhere */ - border-top: none; - } - - #app-shell-root { - height: 100%; - } - - .external-styles-missing { - display: none; - } - - .contained-and-centered { - margin: 0 auto; - max-width: @maxContainerWidth; - } - - .min-contained-and-centered { - margin: 0 auto; - } - - // Add this class for elements that should only be visible if the page has been - // made responsive (viewable and friendly on different screen sizes). - .visible-on-responsive-page { - display: none !important; - } - - #page_sub_nav { - display: none; - } - - // Inline the LESS .page-container-min-width-zero() mixin - body, - #page-container, - footer, - footer .footer-container { - /* Needs !important because we might load shared.css later */ - min-width: 0 !important; - } - - .full-height { - height: 100%; - } - - .box-sizing-border-box-reset { - box-sizing: border-box; - } - - .box-sizing-border-box-reset * { - box-sizing: inherit; - } - - .box-sizing-content-box-reset { - box-sizing: content-box; - } - - .box-sizing-content-box-reset * { - box-sizing: inherit; - } -} From 1d9edc2ae838b894ed13c5b5adc3467665408491 Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Wed, 4 Dec 2024 11:44:10 -0800 Subject: [PATCH 4/7] prettier --- .storybook/global.less | 2 +- .storybook/reset.css | 149 +++++++++++++++++++++++++++++++---------- 2 files changed, 116 insertions(+), 35 deletions(-) diff --git a/.storybook/global.less b/.storybook/global.less index 7ace08c604..899e646c7c 100644 --- a/.storybook/global.less +++ b/.storybook/global.less @@ -5,7 +5,7 @@ * styles as prod when viewed within Storybook. */ - // Variables +// Variables @offBlack: #21242c; @wonderBlocksFontFamily: "Lato", "Noto Sans", "Helvetica", "Corbel", sans-serif; diff --git a/.storybook/reset.css b/.storybook/reset.css index 41927a2e27..0c41ad16df 100644 --- a/.storybook/reset.css +++ b/.storybook/reset.css @@ -3,48 +3,129 @@ 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; +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; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } body { - line-height: 1; + line-height: 1; } -ol, ul { - list-style: none; +ol, +ul { + list-style: none; } -blockquote, q { - quotes: none; +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } -/* End Reset */ \ No newline at end of file +/* End Reset */ From 0029d1943017fe6beb7c6dea64d7fce0d02883ce Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Wed, 4 Dec 2024 14:58:33 -0800 Subject: [PATCH 5/7] move styles out of storybook folder. remove unnecessary --- .storybook/story-wrapper.tsx | 2 -- {.storybook => packages/perseus/src/styles}/global.less | 2 +- packages/perseus/src/styles/perseus-renderer.less | 1 + {.storybook => packages/perseus/src/styles}/reset.css | 0 4 files changed, 2 insertions(+), 3 deletions(-) rename {.storybook => packages/perseus/src/styles}/global.less (96%) rename {.storybook => packages/perseus/src/styles}/reset.css (100%) diff --git a/.storybook/story-wrapper.tsx b/.storybook/story-wrapper.tsx index 7958989a2c..90886a5cd1 100644 --- a/.storybook/story-wrapper.tsx +++ b/.storybook/story-wrapper.tsx @@ -1,7 +1,5 @@ import * as React from "react"; -import "./global.less"; - /** * Wrapper for Storybook stories that * 1. Renders the story inside of a .framework-perseus container diff --git a/.storybook/global.less b/packages/perseus/src/styles/global.less similarity index 96% rename from .storybook/global.less rename to packages/perseus/src/styles/global.less index 899e646c7c..59a0797228 100644 --- a/.storybook/global.less +++ b/packages/perseus/src/styles/global.less @@ -29,7 +29,7 @@ margin: 0; color: @offBlack; line-height: 1.4; - min-width: 0 !important; + min-width: 0; } .box-sizing-border-box-reset { 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/.storybook/reset.css b/packages/perseus/src/styles/reset.css similarity index 100% rename from .storybook/reset.css rename to packages/perseus/src/styles/reset.css From dd756f0a7e75ba2486d70a92a766cfef96e8bec1 Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Wed, 4 Dec 2024 15:53:11 -0800 Subject: [PATCH 6/7] remove StoryWrapper. add legacy to layers --- .storybook/preview.tsx | 13 ++++++++++--- .storybook/story-wrapper.tsx | 20 -------------------- packages/perseus/src/styles/global.less | 2 +- 3 files changed, 11 insertions(+), 24 deletions(-) delete mode 100644 .storybook/story-wrapper.tsx diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index f6b6740ca0..f4b81fb8b7 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -10,7 +10,6 @@ import { } from "../testing/test-dependencies"; import type {Preview} from "@storybook/react"; -import StoryWrapper from "./story-wrapper"; // IMPORTANT: This code runs ONCE per story file, not per story within that file. // If you want code to run once per story, see `StorybookWrapper`. @@ -24,9 +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/.storybook/story-wrapper.tsx b/.storybook/story-wrapper.tsx deleted file mode 100644 index 90886a5cd1..0000000000 --- a/.storybook/story-wrapper.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from "react"; - -/** - * Wrapper for Storybook stories that - * 1. Renders the story inside of a .framework-perseus container - * 2. Includes the global styles from prod - */ -function StoryWrapper(props) { - // 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. - return ( -
- {props.children} -
- ); -} - -export default StoryWrapper; diff --git a/packages/perseus/src/styles/global.less b/packages/perseus/src/styles/global.less index 59a0797228..018e23055e 100644 --- a/packages/perseus/src/styles/global.less +++ b/packages/perseus/src/styles/global.less @@ -10,7 +10,7 @@ @wonderBlocksFontFamily: "Lato", "Noto Sans", "Helvetica", "Corbel", sans-serif; // Layers -@layer reset, shared; +@layer reset, shared, legacy; @layer reset { // A CSS reset. Needed for every page. From 8766cc72d216308ca3100b3708c221a8c962ec73 Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Wed, 4 Dec 2024 15:56:47 -0800 Subject: [PATCH 7/7] changeset --- .changeset/shiny-sloths-obey.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/shiny-sloths-obey.md 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