github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-22 06:41:25 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
See PR for details
This commit is contained in:
Penar Musaraj
2021-09-09 11:01:56 -04:00
committed by GitHub
parent 76f0cf10e6
commit 24e71acf3f
69 changed files with 490 additions and 690 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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: [

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

@ -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}}

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

@ -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}}

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

@ -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}}

4
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
View File

@ -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"}}

6
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs
View File

@ -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>

3
plugins/styleguide/assets/stylesheets/styleguide.scss
View File

@ -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;
}