jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/397902 )
Change subject: Update: use content header margins for section headers
......................................................................
Update: use content header margins for section headers
Wrap section headers in a Content component and allow the default header
margins apply.
Bug: T173317
Change-Id: Idf95cef30127bcc3e7c5a2ec4c45d99338ba23bd
---
D src/common/components/content-section/content-section.css
M src/common/components/content-section/content-section.tsx
M src/common/components/content/content.tsx
M src/common/components/content/styles/content.css
4 files changed, 16 insertions(+), 12 deletions(-)
Approvals:
Jhernandez: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/common/components/content-section/content-section.css
b/src/common/components/content-section/content-section.css
deleted file mode 100644
index 5444bd4..0000000
--- a/src/common/components/content-section/content-section.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.ContentSection-header {
- /* Add a bottom divider under each section header. */
- border-bottom: 1px solid var(--wmui-color-base80);
- padding: var(--half-space);
-}
diff --git a/src/common/components/content-section/content-section.tsx
b/src/common/components/content-section/content-section.tsx
index e68912e..2c174d2 100644
--- a/src/common/components/content-section/content-section.tsx
+++ b/src/common/components/content-section/content-section.tsx
@@ -4,7 +4,6 @@
import Content from "../content/content";
import DynamicHeader from "../dynamic-header/dynamic-header";
import { onClick } from "../link/on-click";
-import "./content-section.css";
export interface Props {
section: PageSection;
@@ -21,9 +20,11 @@
id={section.fragment}
>
{section.titleHTML && ( // Omit empty headers such as the lead.
- <DynamicHeader class="ContentSection-header" level={section.level + 1}>
- <Content dangerouslySetInnerHTML={{ __html: section.titleHTML }} />
- </DynamicHeader>
+ <Content respectMargins>
+ <DynamicHeader level={section.level + 1}>
+ <span dangerouslySetInnerHTML={{ __html: section.titleHTML }} />
+ </DynamicHeader>
+ </Content>
)}
<Content dangerouslySetInnerHTML={{ __html: section.contentHTML }} />
diff --git a/src/common/components/content/content.tsx
b/src/common/components/content/content.tsx
index ffa79ec..8224f13 100644
--- a/src/common/components/content/content.tsx
+++ b/src/common/components/content/content.tsx
@@ -12,17 +12,23 @@
import "./styles/tables.css";
interface Props extends ChildrenProps, ClassProps {
+ respectMargins?: boolean;
dangerouslySetInnerHTML?: DangerouslySetInnerHTML;
}
export default function Content({
+ respectMargins,
children,
dangerouslySetInnerHTML,
...props
}: Props): JSX.Element {
return (
<div
- class={classOf("Content", props.class)}
+ class={classOf(
+ "Content",
+ respectMargins ? "" : "Content--remove-margins",
+ props.class
+ )}
dangerouslySetInnerHTML={dangerouslySetInnerHTML}
>
{children}
diff --git a/src/common/components/content/styles/content.css
b/src/common/components/content/styles/content.css
index c01d0df..b578c5b 100644
--- a/src/common/components/content/styles/content.css
+++ b/src/common/components/content/styles/content.css
@@ -1,7 +1,7 @@
/* Remove margin bottom on the last and top on the first child so that content
wraps the inner elements exactly right. */
-.Content > :last-child { margin-bottom: 0; }
-.Content > :first-child { margin-top: 0; }
+.Content--remove-margins > :last-child { margin-bottom: 0; }
+.Content--remove-margins > :first-child { margin-top: 0; }
/* Typography */
@@ -21,6 +21,8 @@
.Content h2 {
font-weight: normal;
+ border-bottom: 1px solid var(--wmui-color-base80);
+ padding-bottom: var(--half-space);
}
.Content h3 {
--
To view, visit https://gerrit.wikimedia.org/r/397902
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Idf95cef30127bcc3e7c5a2ec4c45d99338ba23bd
Gerrit-PatchSet: 6
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Niedzielski <[email protected]>
Gerrit-Reviewer: Jhernandez <[email protected]>
Gerrit-Reviewer: Sniedzielski <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
