Jhernandez has uploaded a new change for review. (
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 & content)
* 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(+), 14 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/marvin refs/changes/85/379285/1
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 084a7a0..7992a4c 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(--space) * 4) var(--page-spacing) 0;
+ /* Use margin in the bottom to collapse with content if necessary */
+ margin-bottom: var(--page-spacing);
}
.Page-title {
@@ -18,14 +24,16 @@
}
.Page-content-separator {
- /* TODO: Change --space to the Page's spacing var once migrated from Paper */
- --horizontal-negative-spacing: calc(var(--space)*-1);
+ --horizontal-negative-spacing: calc(var(--page-spacing)*-1);
margin-left: var(--horizontal-negative-spacing);
margin-right: var(--horizontal-negative-spacing);
}
-.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
content, given that it will accumulate with padding in the Paper sheet and
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: newchange
Gerrit-Change-Id: I966a995363d2e72b0e76fbc86c930bf67394843b
Gerrit-PatchSet: 1
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Jhernandez <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
