jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/379285 )
Change subject: Chore: Remove Paper inner spacing
......................................................................
Chore: Remove Paper inner spacing
Let the users of the component decide how they want to space the inside
themselves.
Additional changes:
* Add spacing rules to the Page component (header, separator)
* Remove negative spacing in separator (no need since parts of Page
have their own inner spacing)
* Add temporary spacing rules to PageSummary to make it look decent
until pages/wiki.tsx uses a page template/component with spacing
* Add a component in the style guide to render the sections with spacing
* Use inline styles so that dev styles don't end in the
production CSS for now. May extract a Card component if worth it
later
Change-Id: I966a995363d2e72b0e76fbc86c930bf67394843b
---
M src/common/components/page-summary/page-summary.css
M src/common/components/page/page.css
M src/common/components/paper/paper.css
M src/common/pages/style-guide.tsx
4 files changed, 51 insertions(+), 17 deletions(-)
Approvals:
Niedzielski: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/common/components/page-summary/page-summary.css
b/src/common/components/page-summary/page-summary.css
index fb07c7c..b3f22bc 100644
--- a/src/common/components/page-summary/page-summary.css
+++ b/src/common/components/page-summary/page-summary.css
@@ -1,4 +1,7 @@
.PageSummary {
+ /* TODO: remove once the pages/Wiki is using a ContentPage component that has
+ its own inner spacing rules */
+ padding: var(--space);
}
.PageSummary-header {}
diff --git a/src/common/components/page/page.css
b/src/common/components/page/page.css
index 9c3a552..802d102 100644
--- a/src/common/components/page/page.css
+++ b/src/common/components/page/page.css
@@ -1,7 +1,13 @@
-.Page {}
+.Page {
+ /* Variable to apply the same spacing to heading, content and separator */
+ --page-spacing: var(--space);
+}
.Page-header {
- padding-top: calc(var(--space)*3);
+ /* Top spacing of 4 units */
+ padding: calc(var(--page-spacing) * 4) var(--page-spacing) 0;
+ /* Use margin in the bottom to collapse with content if necessary */
+ margin-bottom: var(--page-spacing);
}
.Page-title {
@@ -17,14 +23,13 @@
color: var(--wmui-color-base20);
}
-.Page-content-separator {
- /* TODO: Change --space to the Page's spacing var once migrated from Paper */
- --horizontal-negative-spacing: calc(var(--space) * -1);
- margin-left: var(--horizontal-negative-spacing);
- margin-right: var(--horizontal-negative-spacing);
-}
+.Page-content-separator {}
-.Page-content {}
+.Page-content {
+ padding: 0 var(--page-spacing) var(--page-spacing);
+ /* Use margin at the top to collapse with content spacing */
+ margin-top: var(--page-spacing);
+}
.Page-content > :last-child {
/* Remove extrinsic bottom spacing (margin) from the last element in the
diff --git a/src/common/components/paper/paper.css
b/src/common/components/paper/paper.css
index 0db2bdd..e4429c6 100644
--- a/src/common/components/paper/paper.css
+++ b/src/common/components/paper/paper.css
@@ -4,8 +4,6 @@
background-color: var(--background-color-base);
box-shadow: var(--box-shadow-paper);
- /* Inner spacing */
- padding: var(--space);
/* Outer spacing */
margin-bottom: var(--space);
}
\ No newline at end of file
diff --git a/src/common/pages/style-guide.tsx b/src/common/pages/style-guide.tsx
index 55e5679..6313bcf 100644
--- a/src/common/pages/style-guide.tsx
+++ b/src/common/pages/style-guide.tsx
@@ -1,27 +1,55 @@
import { h } from "preact";
import App from "../components/app/app";
import Paper from "../components/paper/paper";
+import Separator from "../components/separator/separator";
+import { ChildrenProps } from "../components/preact-utils";
export function Component(): JSX.Element {
return (
<App>
- <Paper>
+ <Card title="Headings">
<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>
+ </Card>
+ <Card title="Text">
<p>This is a paragraph with paragraph styles.</p>
<p>This is a second paragraph with paragraph styles.</p>
- </Paper>
- <Paper>
+ <Separator />
<blockquote>
This is a blockquote with an important sentence.
</blockquote>
- </Paper>
+ </Card>
</App>
);
}
+
+interface CardProps extends ChildrenProps {
+ title: string;
+}
+function Card({ title, children }: CardProps): JSX.Element {
+ /* Use inline styles as we don't want this in the general CSS since it is a
+ dev only route */
+ return (
+ <Paper>
+ <div
+ style={{
+ padding: "var(--space) var(--space) 0"
+ }}
+ >
+ <h5>{title}</h5>
+ </div>
+ <Separator />
+ <div
+ style={{
+ padding: "0 var(--space) var(--space)"
+ }}
+ >
+ {children}
+ </div>
+ </Paper>
+ );
+}
--
To view, visit https://gerrit.wikimedia.org/r/379285
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I966a995363d2e72b0e76fbc86c930bf67394843b
Gerrit-PatchSet: 4
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Jhernandez <[email protected]>
Gerrit-Reviewer: Jhernandez <[email protected]>
Gerrit-Reviewer: Niedzielski <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
