showcase buttons

zombieFox · Jul 5, 2024 · b266d6d · b266d6d
1 parent bd48d63
commit b266d6d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 20 deletions.
diff --git a/src/component/control/slider/index.js b/src/component/control/slider/index.js
@@ -227,6 +227,7 @@ export const Control_slider = function({
 
     const formInline = form.inline({
       block: true,
+      align: 'center',
       gap: 'small',
       children: [
         this.range,

diff --git a/src/component/control/sliderSlim/index.js b/src/component/control/sliderSlim/index.js
@@ -177,6 +177,7 @@ export const Control_sliderSlim = function({
 
     const formInline = form.inline({
       block: true,
+      align: 'center',
       gap: 'small',
       children: [
         this.label,

diff --git a/src/component/showcase/index.js b/src/component/showcase/index.js
@@ -105,6 +105,7 @@ showcase.disable = () => {
     showcase.control.button.d.disable();
     showcase.control.button.e.disable();
     showcase.control.button.f.disable();
+    showcase.control.button.g.disable();
     showcase.control.button.dropdown.disable();
     showcase.control.tab.disable();
     showcase.control.input.text.disable();
@@ -136,6 +137,7 @@ showcase.disable = () => {
     showcase.control.button.d.enable();
     showcase.control.button.e.enable();
     showcase.control.button.f.enable();
+    showcase.control.button.g.enable();
     showcase.control.button.dropdown.enable();
     showcase.control.tab.enable();
     showcase.control.input.text.enable();
@@ -549,10 +551,11 @@ showcase.area.assemble = () => {
     d: new Button({ text: 'Button small', style: ['line'], size: 'small' }),
     e: new Button({ text: 'Button medium', style: ['line'] }),
     f: new Button({ text: 'Button large', style: ['line'], size: 'large' }),
+    g: new Button({ text: 'Add new stuff', style: ['line'], iconName: 'add', srOnly: true }),
     dropdown: new Dropdown({
       text: 'Dropdown',
       buttonStyle: ['line'],
-      iconName: 'add',
+      iconName: 'arrowKeyboardDown',
       persist: true,
       menuItem: [
         { text: 'One', iconName: 'addGroup' },
@@ -656,30 +659,24 @@ showcase.area.assemble = () => {
       form.wrap({
         children: [
           form.inline({
-            align: 'top',
+            wrap: true,
+            gap: 'small',
+            align: 'center',
             children: [
               showcase.control.input.radio.b.inputButton(),
               showcase.control.input.radio.c.inputButton(),
-            ]
-          })
-        ]
-      }),
-      form.wrap({
-        children: [
-          form.inline({
-            align: 'top',
-            children: [
               showcase.control.input.checkbox.d.inputButton(),
               showcase.control.input.checkbox.e.inputButton(),
             ]
-          }),
+          })
         ]
       }),
       node('hr'),
       form.wrap({
         children: [
           form.inline({
             align: 'center',
+            gap: 'small',
             children: [
               showcase.control.input.radio.grid3x3.wrap(),
               showcase.control.input.radio.grid1x3.wrap(),
@@ -692,24 +689,19 @@ showcase.area.assemble = () => {
       form.wrap({
         children: [
           form.inline({
+            wrap: true,
             gap: 'small',
             align: 'center',
             children: [
               showcase.control.button.a.wrap(),
               showcase.control.button.b.wrap(),
               showcase.control.button.c.wrap(),
-              showcase.control.button.d.wrap(),
-              showcase.control.button.e.wrap(),
-              showcase.control.button.f.wrap(),
+              showcase.control.button.g.wrap(),
+              showcase.control.button.dropdown.toggle,
             ]
           })
         ]
       }),
-      form.wrap({
-        children: [
-          showcase.control.button.dropdown.toggle
-        ]
-      }),
       node('hr'),
       showcase.control.tab.tab(),
       showcase.control.input.text.wrap(),