+
+
{{input
value=(readonly nameInput)
input=(action "onUsernameFilterChanged" value="target.value")
diff --git a/app/assets/javascripts/discourse/tests/acceptance/group-test.js b/app/assets/javascripts/discourse/tests/acceptance/group-test.js
index d8197e6688d..17d6d9de4ba 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/group-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/group-test.js
@@ -191,7 +191,7 @@ acceptance("Group - Authenticated", function (needs) {
await click(".group-index-request");
assert.equal(
- queryAll(".modal-header").text().trim(),
+ queryAll(".modal-header .title").text().trim(),
I18n.t("groups.membership_request.title", { group_name: "Macdonald" })
);
diff --git a/app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js b/app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js
index 6785b6e1c85..e283466d673 100644
--- a/app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js
+++ b/app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js
@@ -128,7 +128,10 @@ function headerHelper(header) {
return header.attr("data-name");
},
label() {
- return header.text().trim();
+ return header
+ .text()
+ .trim()
+ .replace(/(^[\s\u200b]*|[\s\u200b]*$)/g, "");
},
icon() {
return header.find(".d-icon");
diff --git a/app/assets/javascripts/discourse/tests/integration/components/input-size-test.js b/app/assets/javascripts/discourse/tests/integration/components/input-size-test.js
new file mode 100644
index 00000000000..16f23a907aa
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/input-size-test.js
@@ -0,0 +1,60 @@
+import componentTest, {
+ setupRenderingTest,
+} from "discourse/tests/helpers/component-test";
+
+import { discourseModule, query } from "discourse/tests/helpers/qunit-helpers";
+import hbs from "htmlbars-inline-precompile";
+
+discourseModule(
+ "Integration | Component | consistent input/dropdown/button sizes",
+ function (hooks) {
+ setupRenderingTest(hooks);
+
+ componentTest("icon only button, icon and text button, text only button", {
+ template: hbs`{{d-button icon="plus"}} {{d-button icon="plus" label="topic.create"}} {{d-button label="topic.create"}}`,
+
+ test(assert) {
+ assert.equal(
+ query(".btn:nth-child(1)").offsetHeight,
+ query(".btn:nth-child(2)").offsetHeight,
+ "have equal height"
+ );
+ assert.equal(
+ query(".btn:nth-child(1)").offsetHeight,
+ query(".btn:nth-child(3)").offsetHeight,
+ "have equal height"
+ );
+ },
+ // these tests fail on Firefox 78 in CI, skipping for now
+ skip: !navigator.userAgent.includes("Chrome"),
+ });
+
+ componentTest("button + text input", {
+ template: hbs`{{text-field}} {{d-button icon="plus" label="topic.create"}}`,
+
+ test(assert) {
+ assert.equal(
+ query("input").offsetHeight,
+ query(".btn").offsetHeight,
+ "have equal height"
+ );
+ },
+
+ skip: !navigator.userAgent.includes("Chrome"),
+ });
+
+ componentTest("combo box + input", {
+ template: hbs`{{combo-box options=(hash none="category.none")}} {{text-field}}`,
+
+ test(assert) {
+ assert.equal(
+ query("input").offsetHeight,
+ query(".combo-box").offsetHeight,
+ "have equal height"
+ );
+ },
+
+ skip: !navigator.userAgent.includes("Chrome"),
+ });
+ }
+);
diff --git a/app/assets/javascripts/select-kit/addon/templates/components/dropdown-select-box/dropdown-select-box-header.hbs b/app/assets/javascripts/select-kit/addon/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
index d27bd9a0fda..18801763a61 100644
--- a/app/assets/javascripts/select-kit/addon/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
+++ b/app/assets/javascripts/select-kit/addon/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
@@ -11,4 +11,6 @@
{{#if selectKit.options.showCaret}}
{{d-icon caretIcon class="caret-icon"}}
{{/if}}
+
+ {{! Zero-width space character, so icon-only button height = regular button height }}
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index f9e6186dfc2..5d83ed49142 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -414,14 +414,7 @@ $mobile-breakpoint: 700px;
clear: both;
padding: 4px;
}
- @include breakpoint(tablet) {
- .select-kit.period-chooser
- .period-chooser-header
- h2.selected-name
- .top-date-string {
- font-size: $font-down-3;
- }
- }
+
.controls {
@include clearfix;
}
@@ -534,15 +527,18 @@ $mobile-breakpoint: 700px;
padding: 10px;
display: flex;
align-items: center;
+ .inline-form {
+ // Hacky, but fixes email preview summary
+ margin-bottom: -0.5em;
+ > div {
+ margin-right: 0.5em;
+ }
+ }
+
@include breakpoint(mobile-extra-large) {
margin: 0 -10px;
}
- label {
- margin-bottom: 0;
- }
input {
- margin-right: 5px;
- margin-bottom: 0;
@include breakpoint(tablet) {
max-width: 150px;
}
@@ -889,13 +885,14 @@ table#user-badges {
margin-left: 0;
.emoji-details {
+ @include form-item-sizing;
display: flex;
align-items: center;
min-height: 30px;
- padding: $input-padding;
- line-height: 1;
color: var(--primary);
- border: 1px solid var(--primary-low);
+ border-color: var(--primary-low);
+ padding-left: 10px;
+ padding-right: 10px;
.emoji-name {
margin-left: 0.5em;
@@ -985,13 +982,6 @@ table#user-badges {
}
}
-// Mobile view text-inputs need some padding
-.mobile-view .admin-contents {
- input[type="text"] {
- padding: 4px;
- }
-}
-
.mobile-view .full-width {
margin: 0;
}
diff --git a/app/assets/stylesheets/common/admin/admin_emojis.scss b/app/assets/stylesheets/common/admin/admin_emojis.scss
index fd2cfddb066..9eeb1939a9f 100644
--- a/app/assets/stylesheets/common/admin/admin_emojis.scss
+++ b/app/assets/stylesheets/common/admin/admin_emojis.scss
@@ -1,25 +1,9 @@
-.admin-emojis {
- #custom_emoji {
- .select-kit {
- width: 220px;
- }
+.admin-contents.admin-emojis {
+ #custom_emoji .select-kit,
+ .emoji-uploader .select-kit {
+ max-width: 210px;
}
-
- .emoji-uploader {
- display: flex;
- align-items: flex-end;
-
- input,
- .select-kit {
- width: 220px;
- margin: 0 1em 0 0;
- }
-
- .upload-container {
- display: flex;
- align-items: center;
- justify-content: center;
- flex-direction: column;
- }
+ #custom_emoji td.action {
+ text-align: right;
}
}
diff --git a/app/assets/stylesheets/common/admin/admin_report.scss b/app/assets/stylesheets/common/admin/admin_report.scss
index a11c8990c3f..5a9e7bf4fc2 100644
--- a/app/assets/stylesheets/common/admin/admin_report.scss
+++ b/app/assets/stylesheets/common/admin/admin_report.scss
@@ -181,11 +181,6 @@
.refresh-report-btn {
width: 100%;
}
-
- .d-date-time-input-range {
- flex-direction: column;
- width: 100%;
- }
}
}
}
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 45dac3e0050..61eaaa87f9c 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -678,23 +678,8 @@
}
.permalink-form {
- align-items: flex-start;
- display: flex;
- flex-direction: column;
- flex-wrap: wrap;
- @include breakpoint(tablet, min-width) {
- align-items: center;
- flex-direction: row;
- }
-
.select-kit {
- width: 200px;
- }
- input {
- margin: 5px 0;
- @include breakpoint(tablet, min-width) {
- margin: 0 5px;
- }
+ max-width: 200px;
}
}
diff --git a/app/assets/stylesheets/common/admin/dashboard.scss b/app/assets/stylesheets/common/admin/dashboard.scss
index 1d00eb79d22..955cf91cdc6 100644
--- a/app/assets/stylesheets/common/admin/dashboard.scss
+++ b/app/assets/stylesheets/common/admin/dashboard.scss
@@ -230,17 +230,8 @@
}
}
- .section {
- .period-chooser .period-chooser-header {
- .selected-name,
- .d-icon {
- font-size: $font-up-1;
- }
-
- .d-icon {
- margin: 0;
- }
- }
+ .period-chooser .period-chooser-header {
+ font-size: var(--font-down-2);
}
.dashboard-problems {
diff --git a/app/assets/stylesheets/common/admin/emails.scss b/app/assets/stylesheets/common/admin/emails.scss
index ddb2a0010a9..29da56957d0 100644
--- a/app/assets/stylesheets/common/admin/emails.scss
+++ b/app/assets/stylesheets/common/admin/emails.scss
@@ -76,21 +76,9 @@
padding: 0.25em 0;
}
-.email-preview {
- .digest-refresh-button {
- margin: 0 0.5em;
- }
-}
-
.email-preview-digest {
.controls {
margin: 1em 0.5em;
- input[type="text"] {
- margin-bottom: 0;
- }
- label {
- display: inline;
- }
}
.preview-output iframe {
width: 100%;
diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss
index 3953f0847d2..c5cb456c863 100644
--- a/app/assets/stylesheets/common/admin/staff_logs.scss
+++ b/app/assets/stylesheets/common/admin/staff_logs.scss
@@ -151,37 +151,14 @@
}
button {
margin-left: auto;
- display: flex;
}
margin: 0 0 1em 0;
a.filter {
- display: inline-flex;
- align-items: center;
- margin-bottom: 0.25em;
- background-color: var(--primary-low);
- padding: 3px 10px;
- color: var(--primary);
- &:hover {
- color: var(--primary);
- background-color: var(--primary-low);
- }
.label {
font-weight: bold;
}
.d-icon {
- margin-left: 6px;
- }
- }
-}
-
-.admin-logs-table {
- input.ember-text-field {
- padding: 1px 4px;
- }
- .btn {
- padding: 2px 8px;
- .fa {
- margin-right: 2px;
+ margin-left: 0.5em;
}
}
}
@@ -190,43 +167,19 @@
display: block;
}
-.screened-ip-address-form {
- margin-left: 6px;
- .combobox {
- width: 130px;
- }
-}
-
.screened-ip-controls {
display: flex;
flex-wrap: wrap;
- input {
- flex: 1 1 auto;
- margin: 0 0.25em 0.25em;
- }
- b {
- margin: 0 0.25em;
- }
- .select-kit {
- margin: 0 0.25em 0.25em 0.25em;
- flex: 1 1 auto;
- }
- .filter-screened-ip-address,
.screened-ip-address-form {
- margin: 0 -0.25em 1em;
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- }
- @media screen and (min-width: 800px) {
- .screened-ip-address-form {
+ .combobox {
+ width: 140px;
+ }
+ @media screen and (min-width: 900px) {
margin-left: auto;
}
- }
- button {
- display: flex;
- white-space: nowrap;
- margin: 0 0.25em 0.25em;
+ @media screen and (max-width: 899px) {
+ margin-top: 1em;
+ }
}
}
@@ -238,17 +191,10 @@ table.screened-ip-addresses {
width: 80%;
}
}
- td.action {
- display: flex;
- align-items: baseline;
- .d-icon-check {
- color: var(--success);
- }
- .d-icon-ban {
- color: var(--danger);
- }
- .d-icon {
- margin-right: 0.25em;
+ td.actions {
+ text-align: right;
+ .cancel-action {
+ margin-left: 0.5em;
}
}
}
diff --git a/app/assets/stylesheets/common/admin/suspend.scss b/app/assets/stylesheets/common/admin/suspend.scss
index b142448627c..4f3b6d77e9a 100644
--- a/app/assets/stylesheets/common/admin/suspend.scss
+++ b/app/assets/stylesheets/common/admin/suspend.scss
@@ -16,12 +16,6 @@
margin-bottom: 0.5em;
}
- .textarea,
- input[type="text"] {
- box-sizing: border-box;
- height: 2.5em;
- }
-
.inline-spinner {
float: right;
}
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index cf1105b23c0..2ab9b3fdd2e 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -5,10 +5,6 @@
&:not(:first-child) {
margin-left: 0.5em;
}
- .d-button-label {
- font-size: $font-up-1;
- font-weight: normal;
- }
}
.notifications-button {
@@ -61,7 +57,8 @@
#navigation-bar {
display: flex;
flex-wrap: wrap;
- margin: 0 0 var(--nav-space);
+ margin: 0;
+ margin-bottom: var(--nav-space);
margin-right: auto;
}
@@ -72,17 +69,6 @@
> * {
white-space: nowrap;
}
- .select-kit button {
- height: 100%; // ensures nested select-kit button matches height of button siblings
- }
- .btn {
- // need to reduce vertical padding for consistent height
- padding-top: 0.3em;
- padding-bottom: 0.3em;
- @include breakpoint(mobile-medium) {
- font-size: var(--font-down-1);
- }
- }
@include breakpoint(mobile-large) {
.edit-category {
.d-button-label {
diff --git a/app/assets/stylesheets/common/base/colorpicker.scss b/app/assets/stylesheets/common/base/colorpicker.scss
index 7d80e3d378c..4ebb76ae78f 100644
--- a/app/assets/stylesheets/common/base/colorpicker.scss
+++ b/app/assets/stylesheets/common/base/colorpicker.scss
@@ -13,11 +13,14 @@
.colorpicker-wrapper {
display: flex;
- align-items: center;
- input,
+ align-items: flex-start;
.add-on {
- align-self: flex-start;
- margin-bottom: 0.125em;
+ @include form-item-sizing;
+ background-color: var(--primary-low);
+ border-color: var(--primary-medium);
+ border-right-color: transparent;
+ padding-left: 0.5em;
+ padding-right: 0.5em;
}
}
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index e216dc45e30..d0f409598d7 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -470,12 +470,6 @@ div.ac-wrap {
}
}
-.future-date-input {
- .examples {
- color: var(--primary-medium);
- }
-}
-
.md-table {
overflow-y: auto;
margin: 1em 0;
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index ffbd1a51449..450f561500d 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -11,20 +11,7 @@
overflow-x: auto;
}
- .open-edit-columns-btn {
- vertical-align: top;
- padding: 0.45em 0.8em;
- }
-
&.users-directory {
- .period-chooser {
- .selected-name {
- margin: 0;
- }
- .period-chooser-header .caret-icon {
- margin: 0;
- }
- }
.directory-group-selector {
vertical-align: top;
}
@@ -43,9 +30,7 @@
justify-content: space-between;
.total-rows {
color: var(--primary-medium);
- }
- .filter-name {
- height: 1em;
+ font-weight: normal;
}
}
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 2c311cdc5c8..9d17c754915 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -213,74 +213,50 @@ input {
&[type="tel"],
&[type="color"] {
@include appearance-none;
+ @include form-item-sizing;
display: inline-block;
- padding: $input-padding;
margin-bottom: 9px;
- font-size: $font-0;
- line-height: $line-height-small;
color: var(--primary);
background-color: var(--secondary);
border: 1px solid var(--primary-medium);
border-radius: 0;
- box-sizing: border-box;
- min-height: 30px;
&:focus {
@include default-focus;
}
}
+
+ &[type="time"] {
+ max-width: 140px;
+ }
+}
+
+// Fixes Safari height inconsistency
+::-webkit-datetime-edit {
+ display: inline;
+}
+
+// Fixes Webkit inconsistencies (Safari/Chrome)
+::-webkit-datetime-edit-fields-wrapper,
+::-webkit-datetime-edit-text,
+::-webkit-datetime-edit-month-field,
+::-webkit-datetime-edit-day-field,
+::-webkit-datetime-edit-year-field {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+// Fixes Chrome height inconsistency
+::-webkit-calendar-picker-indicator {
+ height: 100%;
}
::placeholder {
text-overflow: ellipsis;
}
-.input {
- &-prepend,
- &-append {
- margin-bottom: 5px;
- input[class*="span"] {
- display: inline-block;
- }
- input,
- select {
- position: relative;
- margin-bottom: 0;
- vertical-align: middle;
- border-radius: 0;
- &:focus {
- z-index: z("base") + 1;
- }
- }
- .add-on {
- display: inline-flex;
- align-items: center;
- width: auto;
- padding: 0 0.5em;
- height: 28px;
- background-color: var(--primary-low);
- border: 1px solid var(--primary-medium);
- }
- .add-on,
- .btn {
- &:first-child {
- margin-right: -1px;
- }
- &:last-child {
- margin-left: -1px;
- border-radius: 0 3px 3px 0;
- }
- }
- }
-
- &-prepend {
- .add-on,
- .btn {
- margin-right: -1px;
- }
- }
-}
-
textarea {
+ padding: $vpad $hpad;
+ box-sizing: border-box;
height: auto;
background-color: var(--secondary);
border: 1px solid var(--primary-medium);
@@ -643,9 +619,7 @@ table {
.form-vertical {
input,
textarea,
- select,
- .input-prepend,
- .input-append {
+ select {
display: inline-block;
margin-bottom: 0;
flex: 0 0 auto;
diff --git a/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss b/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss
index 47c9a68bfb4..f27af372869 100644
--- a/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss
+++ b/app/assets/stylesheets/common/base/edit-topic-timer-modal.scss
@@ -41,29 +41,6 @@
.btn.pull-right {
margin-right: 10px;
}
- .future-date-input {
- input {
- margin: 0;
- }
- .alert-info {
- margin: 0 -15px -15px -15px;
- }
- .btn-clear {
- display: none;
- }
- .topic-timer-info {
- border: none;
- padding: 0;
- h3 {
- font-weight: normal;
- font-size: $font-up-1;
- }
- }
-
- input[disabled] {
- background: var(--primary-low);
- }
- }
.pika-single {
position: absolute !important; /* inline JS styles */
}
@@ -74,10 +51,3 @@
}
}
}
-
-// mobile styles
-.mobile-view .edit-topic-timer-modal {
- .select-kit.combo-box {
- flex: 1 0 0px;
- }
-}
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index f61657fe666..d0b67ca985b 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@@ -121,18 +121,6 @@
.category-chooser {
width: 100%;
}
-
- .d-date-time-input-range {
- width: inherit;
- border: none;
- padding: 0;
- flex-direction: column;
-
- .d-date-input {
- flex: 1 1 auto;
- border: 1px solid var(--primary-medium);
- }
- }
}
}
diff --git a/app/assets/stylesheets/common/base/share_link.scss b/app/assets/stylesheets/common/base/share_link.scss
index 013d50e293f..8fb4cd0eb77 100644
--- a/app/assets/stylesheets/common/base/share_link.scss
+++ b/app/assets/stylesheets/common/base/share_link.scss
@@ -129,10 +129,6 @@
.select-kit.multi-select .choices {
padding: 0;
}
-
- .select-kit.multi-select.is-expanded + button {
- outline: 1px solid var(--tertiary); // outline the button when the input is outlined, to match height
- }
}
// topic invite modal
@@ -140,11 +136,6 @@
.create-invite-modal {
form {
margin: 0;
- input[type="text"],
- .btn,
- .select-kit-header {
- height: 2.27rem;
- }
}
input {
@@ -181,33 +172,6 @@
margin-top: 0.25em;
}
- .future-date-input {
- display: grid;
- grid-template-columns: auto 1fr;
-
- .control-group:nth-child(1) {
- grid-column-start: 1;
- grid-column-end: 3;
- }
- .control-group:nth-child(2) {
- margin-left: 1.75em;
- margin-right: 1.5em;
- }
- .control-group:nth-child(2),
- .control-group:nth-child(3) {
- grid-row-start: 2;
- display: inline-flex;
- align-items: center;
- margin-bottom: 0;
- input {
- height: 100%;
- margin-bottom: 0;
- margin-left: 0.5em;
- width: 150px;
- }
- }
- }
-
.input-group.input-email {
display: flex;
align-items: baseline;
@@ -242,7 +206,9 @@
&.invite-to-topic input[type="text"],
.group-chooser,
.user-chooser,
- .future-date-input-selector {
+ .future-date-input-selector,
+ .future-date-input-date-picker,
+ .future-date-input-time-picker {
margin-left: 1.75em;
width: calc(100% - 1.75em);
}
diff --git a/app/assets/stylesheets/common/components/bookmark-list.scss b/app/assets/stylesheets/common/components/bookmark-list.scss
index ce922a71d2d..49162d80ebd 100644
--- a/app/assets/stylesheets/common/components/bookmark-list.scss
+++ b/app/assets/stylesheets/common/components/bookmark-list.scss
@@ -6,22 +6,6 @@ $mobile-breakpoint: 700px;
}
}
-.bookmark-search-form {
- margin-bottom: 1em;
- display: flex;
-
- input[type="text"] {
- flex: 1;
- margin-right: 1em;
- }
-
- @media (max-width: $mobile-breakpoint) {
- input[type="text"] {
- margin-bottom: 0;
- }
- }
-}
-
.bookmark-list-item {
td.post-metadata {
text-align: center;
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 8dd59fd5f87..207eabd8ac0 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -13,16 +13,12 @@
$hover-bg-color: var(--primary-medium),
$hover-icon-color: var(--primary-low)
) {
- box-sizing: border-box;
+ @include form-item-sizing;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
- padding: 0.53em 0.8em;
- border: none;
font-weight: normal;
- font-size: $font-0;
- line-height: normal;
color: $text-color;
background: $bg-color;
cursor: pointer;
@@ -35,7 +31,6 @@
&.no-text {
.d-icon {
margin-right: 0;
- min-height: 17px;
}
}
@include hover {
@@ -59,6 +54,7 @@
&:active,
&.btn-active {
@include linear-gradient($hover-bg-color 0%, $bg-color 100%);
+ border-bottom-color: $bg-color;
}
&[disabled],
&.disabled {
@@ -253,20 +249,14 @@
// Small
.btn-small {
- padding: 6px;
- font-size: $font-down-1;
+ font-size: var(--font-down-1);
min-height: 20px;
- .d-icon {
- max-height: 0.87em;
- }
}
// Large
.btn-large {
- padding: 9px 18px;
- font-size: $font-up-1;
- line-height: $line-height-small;
+ font-size: var(--font-up-1);
}
// Bonus Buttons
@@ -287,9 +277,8 @@
}
&.close {
padding: 0;
- min-height: unset;
background: transparent;
- font-size: $font-up-3;
+ font-size: var(--font-up-3);
.d-icon {
color: var(--primary-high);
}
diff --git a/app/assets/stylesheets/common/components/date-input.scss b/app/assets/stylesheets/common/components/date-input.scss
index 7b09d20b4d3..372f4792bd6 100644
--- a/app/assets/stylesheets/common/components/date-input.scss
+++ b/app/assets/stylesheets/common/components/date-input.scss
@@ -3,7 +3,7 @@
cursor: pointer;
flex-direction: column;
min-width: 140px;
- flex: 1 0 100%;
+ flex: 1 0 auto;
.date-picker {
cursor: pointer;
diff --git a/app/assets/stylesheets/common/components/date-picker.scss b/app/assets/stylesheets/common/components/date-picker.scss
index b4fac1b2e81..0046eeac86d 100644
--- a/app/assets/stylesheets/common/components/date-picker.scss
+++ b/app/assets/stylesheets/common/components/date-picker.scss
@@ -12,10 +12,9 @@
display: inline-block;
}
-.date-picker {
- text-align: center;
- width: 8em;
+input.date-picker {
margin: 0;
+ max-width: 180px;
}
.pika-single {
diff --git a/app/assets/stylesheets/common/components/date-time-input-range.scss b/app/assets/stylesheets/common/components/date-time-input-range.scss
index 0fb591a60b3..5a924bedaf3 100644
--- a/app/assets/stylesheets/common/components/date-time-input-range.scss
+++ b/app/assets/stylesheets/common/components/date-time-input-range.scss
@@ -1,5 +1,5 @@
.d-date-time-input-range {
- border: 1px solid var(--primary-low);
- display: inline-flex;
- box-sizing: border-box;
+ .from {
+ margin-bottom: 0.5em;
+ }
}
diff --git a/app/assets/stylesheets/common/components/date-time-input.scss b/app/assets/stylesheets/common/components/date-time-input.scss
index 59506297d80..ec3c7ca3cf9 100644
--- a/app/assets/stylesheets/common/components/date-time-input.scss
+++ b/app/assets/stylesheets/common/components/date-time-input.scss
@@ -1,11 +1,11 @@
.d-date-time-input {
display: flex;
- border: 1px solid var(--primary-low);
+ border: 1px solid var(--primary-medium);
box-sizing: border-box;
position: relative;
- .date-picker,
- .fields {
+ .date-picker {
+ max-width: unset;
border-color: transparent;
}
@@ -15,10 +15,10 @@
}
.d-time-input {
- .combo-box {
- .select-kit-header {
- border-color: transparent;
- }
+ width: 90px;
+ .select-kit-header {
+ border-color: transparent;
+ width: 90px;
}
}
diff --git a/app/assets/stylesheets/common/components/ignored-user-list.scss b/app/assets/stylesheets/common/components/ignored-user-list.scss
index 6fda27d524d..02135f37206 100644
--- a/app/assets/stylesheets/common/components/ignored-user-list.scss
+++ b/app/assets/stylesheets/common/components/ignored-user-list.scss
@@ -11,25 +11,12 @@
.ignored-user-list-item {
border: 1px solid var(--primary-medium);
- border-radius: 5px;
padding: 0;
display: flex;
align-items: center;
margin-right: 10px;
}
-.remove-ignored-user {
- display: flex;
- flex: 1 0 0px;
- align-items: center;
- justify-content: center;
- box-sizing: border-box;
- border-radius: 0 0.25em 0.25em 0;
- padding-top: 0;
- padding-bottom: 0;
- height: 100%;
-}
-
.ignored-user-name {
padding-left: 10px;
padding-right: 10px;
diff --git a/app/assets/stylesheets/common/components/time-shortcut-picker.scss b/app/assets/stylesheets/common/components/time-shortcut-picker.scss
index bc1af733ccd..4c0fe065cdb 100644
--- a/app/assets/stylesheets/common/components/time-shortcut-picker.scss
+++ b/app/assets/stylesheets/common/components/time-shortcut-picker.scss
@@ -18,16 +18,11 @@
.tap-tile-time-input {
display: flex;
align-items: center;
- input {
- width: 100%;
- min-width: unset;
- }
}
.date-picker,
.time-input {
text-align: left;
- padding-top: 5px;
}
.time-input,
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 4d7ddc2b559..b8f7d466bf7 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -281,16 +281,6 @@
margin: 0;
}
- button {
- background: pink;
- }
-
- .select-kit {
- .select-kit-header {
- margin: 0;
- }
- }
-
.d-editor-spacer {
margin: 0 0.25em;
}
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index 21b41ea8a96..97ff00ae51f 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -154,3 +154,31 @@ input[type="reset"],
input[type="submit"] {
cursor: pointer;
}
+
+// Inline form
+// --------------------------------------------------
+
+.inline-form {
+ display: inline-flex;
+ align-items: center;
+ flex-wrap: wrap;
+ &.full-width {
+ display: flex;
+ }
+
+ > input[type="text"] {
+ display: inline-flex;
+ flex: 1;
+ }
+
+ > .select-kit,
+ > input[type="text"],
+ > label,
+ > .btn {
+ margin-bottom: 0.5em; // for when items wrap (mobile, narrow windows)
+ margin-right: 0.5em;
+ &:last-child {
+ margin-right: 0;
+ }
+ }
+}
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index 5a5d79ae5d2..9e203d02153 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -75,6 +75,23 @@ $breakpoints: (
//
// --------------------------------------------------
+$vpad: 0.5em;
+$hpad: 0.65em;
+
+// for consistent sizing across inputs, buttons and dropdowns
+@mixin form-item-sizing {
+ border: 1px solid transparent;
+ font-size: var(--font-0);
+ line-height: normal;
+ box-sizing: border-box;
+ padding: $vpad $hpad;
+ .ios-device & {
+ font-size: var(--font-size-ios-input);
+ padding-top: $vpad * 0.8;
+ padding-bottom: $vpad * 0.8;
+ }
+}
+
@mixin sticky {
position: -webkit-sticky;
position: sticky;
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index ff672beab27..f08ceb2993a 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -9,7 +9,6 @@ $small-width: 800px !default;
$medium-width: 995px !default;
$large-width: 1110px !default;
-$input-padding: 4px 10px;
$topic-body-width: 690px;
$topic-body-width-padding: 11px;
$topic-avatar-width: 45px;
@@ -65,8 +64,6 @@ $font-down-4: var(--font-down-4) !default;
$font-down-5: var(--font-down-5) !default;
$font-down-6: var(--font-down-6) !default;
-$font-size-ios-input: var(--font-size-ios-input) !default;
-
// Common line-heights
$line-height-small: var(--line-height-small) !default;
$line-height-medium: var(--line-height-medium) !default;
diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss
index edebb874c79..53b4a8ef651 100644
--- a/app/assets/stylesheets/common/select-kit/combo-box.scss
+++ b/app/assets/stylesheets/common/select-kit/combo-box.scss
@@ -27,10 +27,7 @@
.select-kit-header {
background: var(--secondary);
- border: 1px solid var(--primary-medium);
- padding: 0 0.25em 0 0.5em;
- font-weight: 500;
- font-size: $font-0;
+ border-color: var(--primary-medium);
&.is-focused {
@include default-focus;
diff --git a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
index 2fa6dc043c3..efc90f0b5bf 100644
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@@ -68,16 +68,10 @@
}
.select-kit-header {
- box-sizing: border-box;
- border: 1px solid transparent;
+ display: inline-flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
- display: inline-flex;
-
- .select-kit-header-wrapper {
- min-height: unset;
- }
.d-icon + .d-icon {
margin-left: 0.25em;
diff --git a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
index 951c54744a5..1b1fa7082f7 100644
--- a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
+++ b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
@@ -36,3 +36,15 @@
}
}
}
+
+.future-date-input {
+ .future-date-input-date-picker,
+ .future-date-input-time-picker {
+ margin-top: 0.5em;
+ margin-bottom: 0;
+ input {
+ margin-bottom: 0;
+ margin-left: 5px;
+ }
+ }
+}
diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss
index 8662ddb33ad..063881b5f91 100644
--- a/app/assets/stylesheets/common/select-kit/multi-select.scss
+++ b/app/assets/stylesheets/common/select-kit/multi-select.scss
@@ -49,12 +49,7 @@
.multi-select-header {
background: var(--secondary);
- border: 1px solid var(--primary-medium);
- padding: 0 0.25em 0 0.5em;
- font-weight: 500;
- font-size: var(--font-0);
- box-sizing: border-box;
- overflow: hidden;
+ border-color: var(--primary-medium);
.formated-selection {
margin: 0;
diff --git a/app/assets/stylesheets/common/select-kit/period-chooser.scss b/app/assets/stylesheets/common/select-kit/period-chooser.scss
index a4b30273da1..c8a8dbced99 100644
--- a/app/assets/stylesheets/common/select-kit/period-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/period-chooser.scss
@@ -10,21 +10,13 @@
.period-chooser-header {
display: inline-block; // safari 14 has issues with summary elements and flexbox
- background: none;
- border: none;
- width: auto;
- height: auto;
+ background: transparent;
+ border-color: transparent;
padding: 0;
h2.selected-name {
color: var(--secondary);
display: inline-block;
- box-sizing: border-box;
-
- // for text + caret alignment
- line-height: 1;
- vertical-align: bottom;
- margin-bottom: 10px;
.date-section {
color: var(--primary);
@@ -42,14 +34,14 @@
.d-icon {
color: var(--primary);
opacity: 1;
- margin: 5px 0 10px 5px;
font-size: $font-up-3;
}
&.is-focused,
+ &:focus,
&:hover {
- background: none;
- border: none;
+ background: transparent;
+ border-color: transparent;
outline: none;
}
}
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 5054b71f3cd..965807d3e09 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -65,12 +65,17 @@
}
.select-kit-header {
- box-sizing: border-box;
+ @include form-item-sizing;
+ font-weight: 500;
overflow: hidden;
transition: all 0.25s;
cursor: pointer;
display: flex;
align-items: stretch;
+ &:not(.btn) {
+ padding-left: 0.5em;
+ padding-right: 0.5em;
+ }
/* hide native indicator */
&::-webkit-details-marker {
@@ -79,12 +84,9 @@
.select-kit-header-wrapper {
box-sizing: border-box;
- min-height: 28px;
display: flex;
flex: 1 0 auto;
align-items: center;
- height: 100%;
- max-width: 100%;
}
.d-icon-spinner {
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index ecc79e17d42..cf56fab5be9 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -60,7 +60,6 @@ textarea {
select,
textarea {
display: inline-block;
- padding: 4px;
margin-bottom: 9px;
font-size: $font-0;
line-height: $line-height-large;
@@ -129,9 +128,7 @@ input {
input,
textarea,
- select,
- .input-prepend,
- .input-append {
+ select {
display: inline-block;
margin-bottom: 0;
}
diff --git a/app/assets/stylesheets/mobile/_index.scss b/app/assets/stylesheets/mobile/_index.scss
index 6d3cf8a313f..02c43e35286 100644
--- a/app/assets/stylesheets/mobile/_index.scss
+++ b/app/assets/stylesheets/mobile/_index.scss
@@ -1,6 +1,5 @@
@import "admin_badges";
@import "admin_customize";
-@import "admin_emojis";
@import "admin_report_counters";
@import "admin_report_table";
@import "admin_report";
diff --git a/app/assets/stylesheets/mobile/admin_emojis.scss b/app/assets/stylesheets/mobile/admin_emojis.scss
deleted file mode 100644
index 2014a51ba3d..00000000000
--- a/app/assets/stylesheets/mobile/admin_emojis.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.admin-emojis {
- #custom_emoji {
- .select-kit {
- display: none;
- }
-
- tbody tr th {
- @include ellipsis;
-
- &:nth-child(2) {
- max-width: 80px;
- }
- }
- }
-
- .emoji-uploader {
- flex-direction: column;
- align-items: flex-start;
- justify-content: center;
-
- .control {
- margin-bottom: 1em;
- width: 100%;
-
- input,
- .select-kit {
- width: 100%;
- }
- }
-
- .upload-container {
- margin: 0;
- }
- }
-}
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 3f48200c476..71c7f2f2e80 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -200,6 +200,16 @@
}
}
}
+
+ .formated-selection {
+ font-size: var(--font-down-1);
+ }
+ }
+
+ .without-tags {
+ .category-input {
+ margin-left: 5px;
+ }
}
.user-selector {
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index aeb4216715a..9d337797327 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -12,29 +12,10 @@ body {
.ios-device {
textarea {
background-color: var(--secondary);
- font-size: $font-size-ios-input;
+ font-size: var(--font-size-ios-input);
-webkit-tap-highlight-color: transparent;
}
- input {
- &[type="text"],
- &[type="password"],
- &[type="datetime"],
- &[type="datetime-local"],
- &[type="date"],
- &[type="month"],
- &[type="time"],
- &[type="week"],
- &[type="number"],
- &[type="email"],
- &[type="url"],
- &[type="search"],
- &[type="tel"],
- &[type="color"] {
- font-size: $font-size-ios-input;
- }
- }
-
input#reply-title {
-webkit-tap-highlight-color: transparent;
}
diff --git a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss b/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
index bcf55dd5279..0e67e9f39ff 100644
--- a/plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
+++ b/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;
diff --git a/plugins/poll/assets/stylesheets/common/poll.scss b/plugins/poll/assets/stylesheets/common/poll.scss
index 3a62944369b..80d5b6f911e 100644
--- a/plugins/poll/assets/stylesheets/common/poll.scss
+++ b/plugins/poll/assets/stylesheets/common/poll.scss
@@ -186,9 +186,3 @@ body.crawler {
}
}
}
-
-.poll-ui-builder {
- .poll-date input {
- height: 30px;
- }
-}
diff --git a/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6 b/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6
index c036e4c3668..0e01c5fc44b 100644
--- a/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6
+++ b/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: [
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs
index c9dcb818cc4..1d95124fb95 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs
+++ b/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}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs
index 5623886be51..b9f95285153 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs
+++ b/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"}}
+
+ {{text-field placeholder="Placeholder"}}
+ {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+
+{{/styleguide-example}}
+
+{{#styleguide-example title="inline-form with icon button"}}
+
+ {{text-field placeholder="Placeholder"}}
+ {{d-button class="btn-primary" icon="search" type="submit"}}
+
+{{/styleguide-example}}
+
+{{#styleguide-example title="full-width inline-form with single input"}}
+
+ {{text-field placeholder="Placeholder"}}
+
+{{/styleguide-example}}
+
+{{#styleguide-example title="full-width inline-form with input and icon button"}}
+
+ {{text-field placeholder="Placeholder"}}
+ {{d-button class="btn-primary" icon="search" type="submit"}}
+
+{{/styleguide-example}}
+
+{{#styleguide-example title="inline-form with combo-box" initialValue=dummy.options.[0].name as |value|}}
+
+ {{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"}}
+
+{{/styleguide-example}}
+
+{{#styleguide-example title="inline-form with multi-select"}}
+
+ {{text-field}}
+ {{multi-select content=dummy.options onChange=(action "dummy")}}
+ {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+
+{{/styleguide-example}}
+
+{{#styleguide-example title="inline-form with multi-select and label"}}
+
+
+ {{text-field}}
+ {{multi-select content=dummy.options onChange=(action "dummy")}}
+ {{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
+
+{{/styleguide-example}}
+
+{{#styleguide-example title="category-notifications-button and regular button"}}
+
+ {{category-notifications-button category=dummy.categories.[0] value=1 onChange=(action "dummy")}}
+ {{d-button icon="reply" type="submit" translatedLabel="Button"}}
+
+{{/styleguide-example}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs
index 756ede94ecd..cbea914449c 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs
+++ b/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}}
+
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
index 41dae968c48..271e99e49db 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
+++ b/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"}}
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs
index 3d54f3fbaed..01d0642aa47 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs
+++ b/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}}
+
+ {{categories-admin-dropdown}}
+ {{create-topic-button canCreateTopic=true}}
+
{{/d-section}}