jenkins-bot has submitted this change and it was merged.
Change subject: [BREAKING CHANGE] FieldLayout: Handle 'inline' alignment better
......................................................................
[BREAKING CHANGE] FieldLayout: Handle 'inline' alignment better
If the label was longer than the available space, it would move to the
next line of text due to 'display: inline-block'. But we can't remove
that, or the wrapped label would wrap below the checkbox.
Use some 'display: table' magic to make this work like we want it to.
This forces us to insert another wrapper <div/> in FieldLayout code.
This change is breaking for code that used CSS selectors like
'.oo-ui-fieldLayout > .oo-ui-labelElement-label', since the label and
field are no longer direct descendants of the element.
Took this opportunity to do some CSS cleanup.
Bug: T78030
Bug: T78173
Change-Id: Ie27bd94c57bba763eabdcde431136bd49a4dbcc4
---
M src/layouts/FieldLayout.js
M src/styles/layouts/FieldLayout.less
M src/themes/apex/layouts.less
M src/themes/mediawiki/layouts.less
M src/themes/mediawiki/widgets.less
5 files changed, 35 insertions(+), 36 deletions(-)
Approvals:
Trevor Parscal: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/layouts/FieldLayout.js b/src/layouts/FieldLayout.js
index 2740ff4..65ef08f 100644
--- a/src/layouts/FieldLayout.js
+++ b/src/layouts/FieldLayout.js
@@ -36,6 +36,7 @@
// Properties
this.$field = this.$( '<div>' );
+ this.$body = this.$( '<div>' );
this.align = null;
if ( config.help ) {
this.popupButtonWidget = new OO.ui.PopupButtonWidget( {
@@ -67,6 +68,7 @@
.addClass( 'oo-ui-fieldLayout-field' )
.toggleClass( 'oo-ui-fieldLayout-disable',
this.fieldWidget.isDisabled() )
.append( this.fieldWidget.$element );
+ this.$body.addClass( 'oo-ui-fieldLayout-body' );
this.setAlignment( config.align );
};
@@ -131,10 +133,11 @@
}
// Reorder elements
if ( value === 'inline' ) {
- this.$element.append( this.$field, this.$label,
this.$help );
+ this.$body.append( this.$field, this.$label );
} else {
- this.$element.append( this.$help, this.$label,
this.$field );
+ this.$body.append( this.$label, this.$field );
}
+ this.$element.append( this.$help, this.$body );
// Set classes. The following classes can be used here:
// * oo-ui-fieldLayout-align-left
// * oo-ui-fieldLayout-align-right
diff --git a/src/styles/layouts/FieldLayout.less
b/src/styles/layouts/FieldLayout.less
index 637007b..d81d3ea 100644
--- a/src/styles/layouts/FieldLayout.less
+++ b/src/styles/layouts/FieldLayout.less
@@ -15,47 +15,41 @@
&.oo-ui-fieldLayout-align-left,
&.oo-ui-fieldLayout-align-right {
- > .oo-ui-labelElement-label {
- display: block;
- float: left;
- }
-
- > .oo-ui-fieldLayout-field {
- display: block;
- float: left;
+ > .oo-ui-fieldLayout-body {
+ > .oo-ui-labelElement-label,
+ > .oo-ui-fieldLayout-field {
+ display: block;
+ float: left;
+ }
}
}
- &.oo-ui-fieldLayout-align-right > .oo-ui-labelElement-label {
+ &.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body >
.oo-ui-labelElement-label {
text-align: right;
}
- &.oo-ui-fieldLayout-align-inline {
- > .oo-ui-labelElement-label {
- display: inline-block;
- vertical-align: middle;
- }
+ &.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
+ display: table;
+ > .oo-ui-labelElement-label,
> .oo-ui-fieldLayout-field {
- display: inline-block;
+ display: table-cell;
vertical-align: middle;
}
}
- &.oo-ui-fieldLayout-align-top > .oo-ui-labelElement-label {
+ &.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body >
.oo-ui-labelElement-label {
display: inline-block;
}
- > .oo-ui-popupButtonWidget {
+ > .oo-ui-fieldLayout-help {
+ float: right;
+
> .oo-ui-popupWidget > .oo-ui-popupWidget-popup {
z-index: 1;
}
- }
- .oo-ui-fieldLayout-help {
- float: right;
-
- &-content {
+ .oo-ui-fieldLayout-help-content {
padding: 0.5em 0.75em;
line-height: 1.5em;
}
diff --git a/src/themes/apex/layouts.less b/src/themes/apex/layouts.less
index ef9f368..6b610c8 100644
--- a/src/themes/apex/layouts.less
+++ b/src/themes/apex/layouts.less
@@ -27,28 +27,28 @@
&.oo-ui-fieldLayout-align-left,
&.oo-ui-fieldLayout-align-right {
- > .oo-ui-labelElement-label {
+ > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
padding-top: 0.5em;
margin-right: 5%;
width: 35%;
}
- > .oo-ui-fieldLayout-field {
+ > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
width: 60%;
}
}
&.oo-ui-fieldLayout-align-inline {
- > .oo-ui-labelElement-label {
- padding: 0.75em 0.5em 0.5em 0.5em;
+ > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
+ padding: 0.5em;
}
- > .oo-ui-fieldLayout-field {
+ > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
padding: 0.5em 0;
}
}
- &.oo-ui-fieldLayout-align-top > .oo-ui-labelElement-label {
+ &.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body >
.oo-ui-labelElement-label {
padding: 0.5em 0;
}
diff --git a/src/themes/mediawiki/layouts.less
b/src/themes/mediawiki/layouts.less
index 29b5754..02eb697 100644
--- a/src/themes/mediawiki/layouts.less
+++ b/src/themes/mediawiki/layouts.less
@@ -27,28 +27,28 @@
&.oo-ui-fieldLayout-align-left,
&.oo-ui-fieldLayout-align-right {
- > .oo-ui-labelElement-label {
+ > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
padding-top: 0.5em;
margin-right: 5%;
width: 35%;
}
- > .oo-ui-fieldLayout-field {
+ > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
width: 60%;
}
}
&.oo-ui-fieldLayout-align-inline {
- > .oo-ui-labelElement-label {
- padding: 0.75em 0.5em 0.5em 0.5em;
+ > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label {
+ padding: 0.5em;
}
- > .oo-ui-fieldLayout-field {
+ > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
padding: 0.5em 0;
}
}
- &.oo-ui-fieldLayout-align-top > .oo-ui-labelElement-label {
+ &.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body >
.oo-ui-labelElement-label {
padding: 0.5em 0;
}
diff --git a/src/themes/mediawiki/widgets.less
b/src/themes/mediawiki/widgets.less
index e6f2f40..847b769 100644
--- a/src/themes/mediawiki/widgets.less
+++ b/src/themes/mediawiki/widgets.less
@@ -140,6 +140,8 @@
.theme-oo-ui-checkboxInputWidget () {
position: relative;
line-height: @input-size;
+ // Prevent the fake span from jumping to the next line of text
+ white-space: nowrap;
* {
font: inherit;
--
To view, visit https://gerrit.wikimedia.org/r/178946
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ie27bd94c57bba763eabdcde431136bd49a4dbcc4
Gerrit-PatchSet: 3
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Trevor Parscal <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
