VolkerE has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/266442

Change subject: Extend compounded form in widget.js demo
......................................................................

Extend compounded form in widget.js demo

Extending `widget.js` demo by adding widgets to compounded form
at the end in preparation for tackling T115293 widgets' focus states.

Change-Id: I980b3707eab3d1e4dbbc867d17837650928e2b98
---
M demos/pages/widgets.js
1 file changed, 76 insertions(+), 2 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/42/266442/1

diff --git a/demos/pages/widgets.js b/demos/pages/widgets.js
index ed16c0b..a599ae4 100644
--- a/demos/pages/widgets.js
+++ b/demos/pages/widgets.js
@@ -1480,7 +1480,7 @@
                                                label: new OO.ui.HtmlSnippet( 
'<b>Fancy</b> <i>text</i> <u>formatting</u>!' )
                                        } ),
                                        {
-                                               label: 'LabelWidget (with 
html)\u200E',
+                                               label: 'LabelWidget (with 
HTML)\u200E',
                                                align: 'top'
                                        }
                                ),
@@ -1757,7 +1757,7 @@
                        action: 'widgets.php',
                        items: [
                                new OO.ui.FieldsetLayout( {
-                                       label: 'Form layout',
+                                       label: 'Form layout (compounded 
example)',
                                        items: [
                                                new OO.ui.FieldLayout(
                                                        new 
OO.ui.TextInputWidget( {
@@ -1776,6 +1776,73 @@
                                                        {
                                                                label: 
'Password',
                                                                align: 'top'
+                                                       }
+                                               ),
+                                               new OO.ui.FieldLayout(
+                                                       new 
OO.ui.ButtonSelectWidget( {
+                                                               items: [
+                                                                       new 
OO.ui.ButtonOptionWidget( {
+                                                                               
label: 'One'
+                                                                       } ),
+                                                                       new 
OO.ui.ButtonOptionWidget( {
+                                                                               
label: 'Two'
+                                                                       } ),
+                                                                       new 
OO.ui.ButtonOptionWidget( {
+                                                                               
indicator: 'required',
+                                                                               
label: 'Three'
+                                                                       } )
+                                                               ]
+                                                       } ),
+                                                       {
+                                                               label: 'Select 
one of multiple ButtonSelectWidget Buttons',
+                                                               align: 'top'
+                                                       }
+                                               ),
+                                               new OO.ui.FieldLayout(
+                                                       new 
OO.ui.SelectFileWidget( {} ),
+                                                       {
+                                                               label: 'Select 
a file with SelectFileWidget\u200E',
+                                                               align: 'top'
+                                                       }
+                                               ),
+                                               new OO.ui.FieldLayout(
+                                                       new 
OO.ui.CapsuleMultiSelectWidget( {
+                                                               menu: {
+                                                                       items: [
+                                                                               
new OO.ui.MenuOptionWidget( { data: 'abc', label: 'Abc Label' } ),
+                                                                               
new OO.ui.MenuOptionWidget( { data: 'def', label: 'Def Label' } ),
+                                                                               
new OO.ui.MenuOptionWidget( { data: 'ghi', label: 'Ghi Label' } )
+                                                                       ]
+                                                               }
+                                                       } ).addItemsFromData( [ 
'abc', 'def' ] ),
+                                                       {
+                                                               label: 'Select 
from multiple CapsuleMultiSelectWidget items\u200E',
+                                                               align: 'top'
+                                                       }
+                                               ),
+                                               new OO.ui.FieldLayout(
+                                                       new 
OO.ui.RadioSelectWidget( {
+                                                               items: [
+                                                                       new 
OO.ui.RadioOptionWidget( {
+                                                                               
data: 'mouse',
+                                                                               
label: 'Mouse'
+                                                                       } ),
+                                                                       new 
OO.ui.RadioOptionWidget( {
+                                                                               
data: 'elephant',
+                                                                               
label: 'Elephant'
+                                                                       } )
+                                                               ]
+                                                       } ),
+                                                       {
+                                                               align: 'top',
+                                                               label: 'Toggle 
the RadioSelectWidget'
+                                                       }
+                                               ),
+                                               new OO.ui.FieldLayout(
+                                                       new 
OO.ui.ToggleSwitchWidget( { value: true } ),
+                                                       {
+                                                               label: 'Switch 
the ToggleSwitchWidget (checked)',
+                                                               align: 'right'
                                                        }
                                                ),
                                                new OO.ui.FieldLayout(
@@ -1800,6 +1867,13 @@
                                                                label: null,
                                                                align: 'top'
                                                        }
+                                               ),
+                                               new OO.ui.FieldLayout(
+                                                       new OO.ui.ButtonWidget( 
{
+                                                               framed: false,
+                                                               flags: [ 
'constructive' ],
+                                                               label: 
'Constructive feedback'
+                                                       } )
                                                )
                                        ]
                                } )

-- 
To view, visit https://gerrit.wikimedia.org/r/266442
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I980b3707eab3d1e4dbbc867d17837650928e2b98
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <[email protected]>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to