UX: Normalize sizing for inputs, buttons, dropdowns (#14226)

See PR for details

plugins/poll/assets/stylesheets/common/poll-ui-builder.scss

@@ -20,16 +20,9 @@
     .multi-select,
     .select-kit-header,
     .date-picker-wrapper {
-      height: 34px;
-      margin: 0;
       width: 100%;
     }
 
-    button {
-      height: 34px;
-      margin-left: 5px;
-    }
-
     .date-picker-wrapper {
       margin-right: 5px;
     }
@@ -94,22 +87,6 @@
     }
   }
 
-  .d-date-time-input {
-    border: 1px solid var(--primary-medium);
-    justify-content: space-between;
-    width: 100%;
-
-    .d-date-input {
-      flex: auto;
-    }
-
-    .d-time-input {
-      .select-kit-header {
-        min-width: 120px;
-      }
-    }
-  }
-
   .tip {
     display: block;
     font-size: $font-down-1;

plugins/poll/assets/stylesheets/common/poll.scss

@@ -186,9 +186,3 @@ body.crawler {
     }
   }
 }
-
-.poll-ui-builder {
-  .poll-date input {
-    height: 30px;
-  }
-}

plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6

@@ -208,6 +208,7 @@ export function createData(store) {
     buttonSizes: [
       { class: "btn-large", text: "large" },
       { class: "btn-default", text: "default" },
+      { class: "btn-small", text: "small" },
     ],
 
     buttonStates: [

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs

@@ -1,4 +1,4 @@
-{{#styleguide-example title=".btn-icon - sizes"}}
+{{#styleguide-example title=".btn-icon - sizes (large, default, small)"}}
   {{#each dummy.buttonSizes as |bs|}}
     {{d-button icon="times" translatedTitle=bs.text class=bs.class disabled=bs.disabled}}
   {{/each}}
@@ -10,7 +10,7 @@
   {{/each}}
 {{/styleguide-example}}
 
-{{#styleguide-example title=".btn-text - sizes"}}
+{{#styleguide-example title=".btn-text - sizes (large, default, small)"}}
   {{#each dummy.buttonSizes as |bs|}}
     {{d-button translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
   {{/each}}
@@ -22,7 +22,7 @@
   {{/each}}
 {{/styleguide-example}}
 
-{{#styleguide-example title=".btn-default .btn-icon-text - sizes"}}
+{{#styleguide-example title=".btn-default .btn-icon-text - sizes (large, default, small)"}}
   {{#each dummy.buttonSizes as |bs|}}
     {{d-button icon="plus" translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
   {{/each}}
@@ -34,7 +34,7 @@
   {{/each}}
 {{/styleguide-example}}
 
-{{#styleguide-example title=".btn-primary .btn-icon-text"}}
+{{#styleguide-example title=".btn-primary .btn-icon-text - sizes (large, default, small)"}}
   {{#each dummy.buttonSizes as |bs|}}
     {{d-button
       class=(concat "btn-primary " bs.class)
@@ -56,7 +56,7 @@
   {{/each}}
 {{/styleguide-example}}
 
-{{#styleguide-example title=".btn-danger .btn-icon-text - sizes"}}
+{{#styleguide-example title=".btn-danger .btn-icon-text - sizes (large, default, small)"}}
   {{#each dummy.buttonSizes as |bs|}}
     {{d-button
       class=(concat "btn-danger " bs.class)
@@ -78,7 +78,7 @@
   {{/each}}
 {{/styleguide-example}}
 
-{{#styleguide-example title=".btn-flat - sizes"}}
+{{#styleguide-example title=".btn-flat - sizes (large, default, small)"}}
   {{#each dummy.buttonSizes as |bs|}}
     {{flat-button icon="trash-alt" disabled=bs.disabled translatedTitle=bs.title}}
   {{/each}}

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs

@@ -6,10 +6,65 @@
   {{password-field type="password" placeholder="Placeholder"}}
 {{/styleguide-example}}
 
-{{#styleguide-example title="text-field search"}}
-  {{text-field type="search" placeholder="Placeholder"}}
-{{/styleguide-example}}
-
 {{#styleguide-example title="textarea"}}
   {{textarea placeholder="Placeholder"}}
 {{/styleguide-example}}
+
+{{#styleguide-example title="inline-form"}}
+  <div class="inline-form">
+    {{text-field placeholder="Placeholder"}}
+    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+  </div>
+{{/styleguide-example}}
+
+{{#styleguide-example title="inline-form with icon button"}}
+  <div class="inline-form">
+    {{text-field placeholder="Placeholder"}}
+    {{d-button class="btn-primary" icon="search" type="submit"}}
+  </div>
+{{/styleguide-example}}
+
+{{#styleguide-example title="full-width inline-form with single input"}}
+  <div class="inline-form full-width">
+    {{text-field placeholder="Placeholder"}}
+  </div>
+{{/styleguide-example}}
+
+{{#styleguide-example title="full-width inline-form with input and icon button"}}
+  <div class="inline-form full-width">
+    {{text-field placeholder="Placeholder"}}
+    {{d-button class="btn-primary" icon="search" type="submit"}}
+  </div>
+{{/styleguide-example}}
+
+{{#styleguide-example title="inline-form with combo-box" initialValue=dummy.options.[0].name as |value|}}
+  <div class="inline-form">
+    {{text-field placeholder="Placeholder"}}
+    {{combo-box content=dummy.options value=value onChange=(fn (mut value))}}
+    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+  </div>
+{{/styleguide-example}}
+
+{{#styleguide-example title="inline-form with multi-select"}}
+  <div class="inline-form">
+    {{text-field}}
+    {{multi-select content=dummy.options onChange=(action "dummy")}}
+    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+  </div>
+{{/styleguide-example}}
+
+{{#styleguide-example title="inline-form with multi-select and label"}}
+  <div class="inline-form">
+    <label>Text:</label>
+    {{text-field}}
+    {{multi-select content=dummy.options onChange=(action "dummy")}}
+    {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+  </div>
+{{/styleguide-example}}
+
+{{#styleguide-example title="category-notifications-button and regular button"}}
+  <div class="inline-form">
+    {{category-notifications-button category=dummy.categories.[0] value=1 onChange=(action "dummy")}}
+    {{d-button icon="reply" type="submit" translatedLabel="Button"}}
+  </div>
+{{/styleguide-example}}

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs

@@ -7,9 +7,27 @@
 {{/styleguide-example}}
 
 {{#styleguide-example title="date-time-input"}}
-  {{date-time-input}}
+  {{date-time-input clearable=true}}
 {{/styleguide-example}}
 
 {{#styleguide-example title="date-time-input-range"}}
   {{date-time-input-range}}
 {{/styleguide-example}}
+
+{{#styleguide-example title="date-time-input-range"}}
+  {{date-time-input-range showFromTime=false showToTime=false}}
+{{/styleguide-example}}
+
+{{#styleguide-example title="future-date-input"}}
+  {{future-date-input
+    displayLabelIcon="far-clock"
+    includeDateTime=true
+    includeMidFuture=true
+    clearable=true
+  }}
+{{/styleguide-example}}
+
+{{#styleguide-example title="date-picker"}}
+  {{date-picker defaultDate="YYYY-MM-DD"}}
+{{/styleguide-example}}
+

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs

@@ -47,7 +47,7 @@
 {{/styleguide-example}}
 
 {{#styleguide-example title="dropdown-select-box"}}
-  {{dropdown-select-box content=dummy.options onChange=(action "dummy")}}
+  {{dropdown-select-box content=dummy.options title="Something" onChange=(action "dummy")}}
 {{/styleguide-example}}
 
 {{#styleguide-example title="future-date-input-selector"}}
@@ -61,7 +61,7 @@
 {{/styleguide-example}}
 
 {{#styleguide-example title="multi-select"}}
-  {{multi-select content=dummy.options options=(hash none="test.none") onChange=(action "dummy")}}
+  {{multi-select content=dummy.options onChange=(action "dummy")}}
 {{/styleguide-example}}
 
 {{#styleguide-example title="admin group-chooser"}}

plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs

@@ -4,8 +4,10 @@
       {{#d-section class="navigation-container"}}
         {{bread-crumbs categories=dummy.categories}}
         {{navigation-bar navItems=dummy.navItems filterMode="latest"}}
-        {{categories-admin-dropdown}}
-        {{create-topic-button canCreateTopic=true}}
+        <div class="navigation-controls">
+          {{categories-admin-dropdown}}
+          {{create-topic-button canCreateTopic=true}}
+        </div>
       {{/d-section}}
     </div>
   </div>

plugins/styleguide/assets/stylesheets/styleguide.scss

@@ -42,7 +42,6 @@
 
   .styleguide-contents {
     flex: 4 0 0;
-    font-size: 14px;
   }
 
   .styleguide-section {
@@ -67,7 +66,7 @@
     .styleguide-example {
       .example-title {
         color: var(--primary-medium);
-        font-size: var(--font-0);
+        font-size: var(--font-down-1);
         border-bottom: 1px solid var(--primary-low);
         margin-bottom: 1em;
       }