jenkins-bot has submitted this change and it was merged. ( https://gerrit.wikimedia.org/r/378231 )
Change subject: New: Add Paper component ...................................................................... New: Add Paper component As explained in the style guide: https://wikimedia.github.io/WikimediaUI-Style-Guide/visual-style.html Paper is the base abstraction for the visual style of wikimedia. This patch adds a Paper component and exercises it in the style guide. Ideally later other page components like (Special)Page or WikiPage will internally use Paper. Visit /dev/style-guide to check it out. Additional changes: * Added base spacing variable (--space) * Normalized spacing across App and Paper * Added a max-width to App to make it a bit more desktop-friendly Bug: T175804 Change-Id: Ic1841a9558a6df8bd113afe8257d658a4ade1cd2 --- M src/client/index.css M src/common/components/app/app.css A src/common/components/paper/paper.css A src/common/components/paper/paper.tsx M src/common/pages/style-guide.tsx 5 files changed, 55 insertions(+), 10 deletions(-) Approvals: Niedzielski: Looks good to me, approved jenkins-bot: Verified diff --git a/src/client/index.css b/src/client/index.css index e9a21b1..929222e 100644 --- a/src/client/index.css +++ b/src/client/index.css @@ -17,10 +17,21 @@ /* TODO: Remove once https://gerrit.wikimedia.org/r/#/c/378016/ is merged */ --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-family-base: var(--font-family-sans); + + /* TODO: Upstream to wikimedia-ui-base once reviewed by design */ + --space: var(--font-size-base); + + /* TODO: Upstream to wikimedia-ui-base once reviewed by design */ + --box-shadow-paper: 0 1px 3px 0 rgba( 0, 0, 0, 0.1 ); } /* Remove extra margin, expand base elements to the viewport height */ html, body, #root { margin: 0; height: 100%; } + +/* Base layer */ +body { + background-color: var(--wmui-color-base90); +} /* Default typography */ body, input, button, textarea, td { @@ -38,6 +49,7 @@ h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.25; + margin: 0 0 var(--space) 0; } h5, h6 { font-weight: bold; } diff --git a/src/common/components/app/app.css b/src/common/components/app/app.css index 32ba03c..9cec12a 100644 --- a/src/common/components/app/app.css +++ b/src/common/components/app/app.css @@ -1,5 +1,12 @@ .App { - background-color: var(--wmui-color-base90); + /* Expand the app box full height even if content doesn't fill it */ min-height: 100%; - padding: 1rem; + + /* Provide top/bottom spacing, but not horizontal spacing */ + padding: var(--space) 0; + + /* Cap max-width of app in big screens and center it horizontally */ + /* TODO: Remove magic number and replace with variable, matching the responsive cuts */ + max-width: 1024px; + margin: auto; } diff --git a/src/common/components/paper/paper.css b/src/common/components/paper/paper.css new file mode 100644 index 0000000..ddc7be4 --- /dev/null +++ b/src/common/components/paper/paper.css @@ -0,0 +1,10 @@ +.Paper { + /* Style */ + border-radius: var(--border-radius-base); + background-color: var(--background-color-base); + box-shadow: var(--box-shadow-paper); + + /* Spacing */ + padding: var(--space); + margin-bottom: var(--space); +} diff --git a/src/common/components/paper/paper.tsx b/src/common/components/paper/paper.tsx new file mode 100644 index 0000000..6e8ba60 --- /dev/null +++ b/src/common/components/paper/paper.tsx @@ -0,0 +1,6 @@ +import "./paper.css"; +import { ComponentProps, h } from "preact"; + +export default function Paper({ children }: ComponentProps<any>): JSX.Element { + return <div class="Paper">{children}</div>; +} diff --git a/src/common/pages/style-guide.tsx b/src/common/pages/style-guide.tsx index 3bd6935..3a8157f 100644 --- a/src/common/pages/style-guide.tsx +++ b/src/common/pages/style-guide.tsx @@ -1,17 +1,27 @@ import App from "../components/app/app"; +import Paper from "../components/paper/paper"; import { h } from "preact"; export function Component(): JSX.Element { return ( <App> - <h1>Heading 1</h1> - <h2>Heading 2</h2> - <h3>Heading 3</h3> - <h4>Heading 4</h4> - <h5>Heading 5</h5> - <h6>Heading 6</h6> - <p>This is a paragraph with paragraph styles.</p> - <blockquote>This is a blockquote with an important sentence.</blockquote> + <Paper> + <h1>Heading 1</h1> + <h2>Heading 2</h2> + <h3>Heading 3</h3> + <h4>Heading 4</h4> + <h5>Heading 5</h5> + <h6>Heading 6</h6> + </Paper> + <Paper> + <p>This is a paragraph with paragraph styles.</p> + <p>This is a second paragraph with paragraph styles.</p> + </Paper> + <Paper> + <blockquote> + This is a blockquote with an important sentence. + </blockquote> + </Paper> </App> ); } -- To view, visit https://gerrit.wikimedia.org/r/378231 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Ic1841a9558a6df8bd113afe8257d658a4ade1cd2 Gerrit-PatchSet: 1 Gerrit-Project: marvin Gerrit-Branch: master Gerrit-Owner: Jhernandez <jhernan...@wikimedia.org> Gerrit-Reviewer: Niedzielski <sniedziel...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
