jenkins-bot has submitted this change and it was merged.
Change subject: Style guide: Visually separate buttons
......................................................................
Style guide: Visually separate buttons
This makes all the buttons stack up vertically making it easier
to scan through options
Change-Id: If63f3df18ee4a79f44b9d8daa8ce986e1cd09526
---
M docs/kss/styleguide-template/public/kss.less
M resources/src/mediawiki.ui/components/buttons.less
2 files changed, 73 insertions(+), 23 deletions(-)
Approvals:
Jdlrobson: Looks good to me, approved
jenkins-bot: Verified
diff --git a/docs/kss/styleguide-template/public/kss.less
b/docs/kss/styleguide-template/public/kss.less
index c30322e..eeea1a8 100644
--- a/docs/kss/styleguide-template/public/kss.less
+++ b/docs/kss/styleguide-template/public/kss.less
@@ -141,6 +141,10 @@
display: block;
margin: 0;
margin-left: 20px;
+
+ div {
+ margin-bottom: 5px;
+ }
}
}
}
diff --git a/resources/src/mediawiki.ui/components/buttons.less
b/resources/src/mediawiki.ui/components/buttons.less
index bcb4532..f6a44fd 100644
--- a/resources/src/mediawiki.ui/components/buttons.less
+++ b/resources/src/mediawiki.ui/components/buttons.less
@@ -18,8 +18,12 @@
// Neutral button styling
//
// Markup:
-// <button class="mw-ui-button">.mw-ui-button</button>
-// <button class="mw-ui-button" disabled>.mw-ui-button</button>
+// <div>
+// <button class="mw-ui-button">.mw-ui-button</button>
+// </div>
+// <div>
+// <button class="mw-ui-button" disabled>.mw-ui-button</button>
+// </div>
//
// Styleguide 2.1.
.mw-ui-button {
@@ -71,10 +75,18 @@
// using the mw-ui-big class.
//
// Markup:
- // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
- // <button class="mw-ui-button mw-ui-progressive
mw-ui-big">.mw-ui-progressive</button>
- // <button class="mw-ui-button mw-ui-constructive
mw-ui-big">.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-destructive
mw-ui-big">.mw-ui-destructive</button>
+ // <div>
+ // <button class="mw-ui-button mw-ui-big">.mw-ui-button</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-progressive
mw-ui-big">.mw-ui-progressive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-constructive
mw-ui-big">.mw-ui-constructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-destructive
mw-ui-big">.mw-ui-destructive</button>
+ // </div>
//
// Styleguide 2.1.6.
&.mw-ui-big {
@@ -86,10 +98,18 @@
// Some buttons might need to be stacked.
//
// Markup:
- // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
- // <button class="mw-ui-button mw-ui-progressive
mw-ui-block">.mw-ui-progressive</button>
- // <button class="mw-ui-button mw-ui-constructive
mw-ui-block">.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-destructive
mw-ui-block">.mw-ui-destructive</button>
+ // <div>
+ // <button class="mw-ui-button mw-ui-block">.mw-ui-button</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-progressive
mw-ui-block">.mw-ui-progressive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-constructive
mw-ui-block">.mw-ui-constructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-destructive
mw-ui-block">.mw-ui-destructive</button>
+ // </div>
//
// Styleguide 2.1.5.
&.mw-ui-block {
@@ -103,8 +123,12 @@
// .mw-ui-primary is deprecated, kept for compatibility.
//
// Markup:
- // <button class="mw-ui-button
mw-ui-progressive">.mw-ui-progressive</button>
- // <button class="mw-ui-button mw-ui-progressive"
disabled>.mw-ui-progressive</button>
+ // <div>
+ // <button class="mw-ui-button
mw-ui-progressive">.mw-ui-progressive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-progressive"
disabled>.mw-ui-progressive</button>
+ // </div>
//
// Styleguide 2.1.1.
&.mw-ui-progressive,
@@ -123,8 +147,12 @@
// e.g. save changes button
//
// Markup:
- // <button class="mw-ui-button
mw-ui-constructive">.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-constructive"
disabled>.mw-ui-constructive</button>
+ // <div>
+ // <button class="mw-ui-button
mw-ui-constructive">.mw-ui-constructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-constructive"
disabled>.mw-ui-constructive</button>
+ // </div>
//
// Styleguide 2.1.2.
&.mw-ui-constructive {
@@ -142,8 +170,12 @@
// This should not be used for cancel buttons.
//
// Markup:
- // <button class="mw-ui-button
mw-ui-destructive">.mw-ui-destructive</button>
- // <button class="mw-ui-button mw-ui-destructive"
disabled>.mw-ui-destructive</button>
+ // <div>
+ // <button class="mw-ui-button
mw-ui-destructive">.mw-ui-destructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-destructive"
disabled>.mw-ui-destructive</button>
+ // </div>
//
// Styleguide 2.1.3.
&.mw-ui-destructive {
@@ -159,13 +191,27 @@
// Use quiet buttons when they are less important and alongisde other
progressive/destructive/progressive buttons.
//
// Markup:
- // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
- // <button class="mw-ui-button mw-ui-constructive
mw-ui-quiet">.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet"
disabled>.mw-ui-constructive</button>
- // <button class="mw-ui-button mw-ui-destructive
mw-ui-quiet">.mw-ui-destructive</button>
- // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet"
disabled>.mw-ui-destructive</button>
- // <button class="mw-ui-button mw-ui-progressive
mw-ui-quiet">.mw-ui-progressive</button>
- // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet"
disabled>.mw-ui-progressive</button>
+ // <div>
+ // <button class="mw-ui-button mw-ui-quiet">.mw-ui-button</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-constructive
mw-ui-quiet">.mw-ui-constructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-constructive mw-ui-quiet"
disabled>.mw-ui-constructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-destructive
mw-ui-quiet">.mw-ui-destructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-destructive mw-ui-quiet"
disabled>.mw-ui-destructive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-progressive
mw-ui-quiet">.mw-ui-progressive</button>
+ // </div>
+ // <div>
+ // <button class="mw-ui-button mw-ui-progressive mw-ui-quiet"
disabled>.mw-ui-progressive</button>
+ // </div>
//
// Styleguide 2.1.4.
&.mw-ui-quiet {
--
To view, visit https://gerrit.wikimedia.org/r/160551
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: If63f3df18ee4a79f44b9d8daa8ce986e1cd09526
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Prtksxna <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Phuedx <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: Spage <[email protected]>
Gerrit-Reviewer: Violetto <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
