From 31119f548277243146f8b57e8fc9226adc169c5c Mon Sep 17 00:00:00 2001 From: Ben Kelly Date: Wed, 24 Aug 2022 11:24:11 -0400 Subject: [PATCH 1/9] feat(checkbox): start simplifying checkbox styles --- docs/assets/less/stacks-documentation.less | 2 +- docs/product/components/checkbox.html | 276 ++++++++++++++++----- lib/css/components/inputs.less | 24 ++ 3 files changed, 239 insertions(+), 63 deletions(-) diff --git a/docs/assets/less/stacks-documentation.less b/docs/assets/less/stacks-documentation.less index 5273b68af8..d8b03e0357 100644 --- a/docs/assets/less/stacks-documentation.less +++ b/docs/assets/less/stacks-documentation.less @@ -11,7 +11,7 @@ // ============================================================================ // $ IMPORTS // ---------------------------------------------------------------------------- -@import "../../../lib/css/stacks.less"; // These are actual styles used in SO projects +@import (reference) "../../../lib/css/stacks.less"; // These are actual styles used in SO projects .stacks-section { margin-top: var(--su48); diff --git a/docs/product/components/checkbox.html b/docs/product/components/checkbox.html index c2290f0144..c8ffc889a9 100644 --- a/docs/product/components/checkbox.html +++ b/docs/product/components/checkbox.html @@ -9,63 +9,41 @@
{% highlight html %} -
-
-
- -
- -
-
+
+ + +
-
-
-
- -
- -
-
+
+ + +
{% endhighlight %}
-
-
-
- -
- +
+
+ +
-
- -
-
-
- -
- + +
+ +
-
- -
-
-
- -
- + +
+ +
-
- -
-
-
- -
- + +
+ +
@@ -115,6 +93,22 @@
+ +
+ Which types of fruit do you like? (Check all that apply) +
+ + +
+
+ + +
+
+ + +
+
{% endhighlight %}
@@ -144,6 +138,23 @@
+ + +
+ Which types of fruit do you like? (Check all that apply) +
+ + +
+
+ + +
+
+ + +
+
@@ -181,6 +192,22 @@ + +
+ Which types of fruit do you like? (Check all that apply) +
+ + +
+
+ + +
+
+ + +
+
{% endhighlight %}
@@ -214,6 +241,22 @@
+ +
+ Which types of fruit do you like? (Check all that apply) +
+ + +
+
+ + +
+
+ + +
+
@@ -262,6 +305,31 @@ + +
+ Which types of fruit do you like? (Check all that apply) +
+ + +
+
+ + +
+
+ + +
+
{% endhighlight %}
@@ -306,6 +374,31 @@
+ +
+ Which types of fruit do you like? (Check all that apply) +
+ + +
+
+ + +
+
+ + +
+
@@ -317,16 +410,19 @@
{% highlight html %} -
-
-
-
- -
- +
+
+
+
+ +
+
+ +
+
+ +
@@ -335,14 +431,19 @@ {% endhighlight %}
-
-
-
-
- -
- +
+
+
+
+ +
+
+ +
+
+ +
@@ -423,6 +524,31 @@
+ +
+ Which types of fruit do you like? (Check all that apply) +
+ + +
+
+ + +
+
+ + +
+
{% endhighlight %}
@@ -467,10 +593,36 @@
+ +
+ Which types of fruit do you like? (Check all that apply) +
+ + +
+
+ + +
+
+ + +
+
\ No newline at end of file diff --git a/lib/css/components/inputs.less b/lib/css/components/inputs.less index 6dfa04f2a3..0e991ebe26 100644 --- a/lib/css/components/inputs.less +++ b/lib/css/components/inputs.less @@ -268,6 +268,30 @@ fieldset { // ============================================================================ // $ CHECKBOXES & RADIOS // ---------------------------------------------------------------------------- +// TODO Overall, would _love_ to drop .s-radio entirely since it largely is just .s-checkbox +// TODO would _love_ to use .s-checkbox instead, with no class on the input itself +.s-checkbox-item, .s-radio-item { + display: flex; + gap: var(--su8); + align-items: center; + + .s-label { + font-weight: normal; + } + + // TODO drop the need for an is-disabled class on the item/parent +} + +.s-checkbox-group, .s-radio-group { + display: flex; + flex-direction: column; + gap: var(--su8); + + &.s-checkbox-group__horizontal { + flex-direction: row; + } +} + .s-checkbox, .s-radio { // [1] Check to see if we can use custom styles, if so reset the defaults From 50e8c44323eae945097e5a584dc5d95e4b9774a0 Mon Sep 17 00:00:00 2001 From: Ben Kelly Date: Wed, 24 Aug 2022 11:24:28 -0400 Subject: [PATCH 2/9] docs: move form components to their own nav section --- docs/_data/site-navigation.json | 53 ++++++++++++++++++--------------- 1 file changed, 29 insertions(+), 24 deletions(-) diff --git a/docs/_data/site-navigation.json b/docs/_data/site-navigation.json index bb22c00d3c..ff63add008 100755 --- a/docs/_data/site-navigation.json +++ b/docs/_data/site-navigation.json @@ -159,6 +159,35 @@ } ] }, + { + "title": "Forms", + "links": [ + { + "title": "Checkbox", + "url": "/product/components/checkbox/" + }, + { + "title": "Inputs", + "url": "/product/components/inputs/" + }, + { + "title": "Labels", + "url": "/product/components/labels/" + }, + { + "title": "Radio", + "url": "/product/components/radio/" + }, + { + "title": "Select", + "url": "/product/components/select/" + }, + { + "title": "Textarea", + "url": "/product/components/textarea/" + } + ] + }, { "title": "Components", "links": [ @@ -194,10 +223,6 @@ "title": "Cards", "url": "/product/components/cards/" }, - { - "title": "Checkbox", - "url": "/product/components/checkbox/" - }, { "title": "Code blocks", "url": "/product/components/code-blocks/" @@ -214,14 +239,6 @@ "title": "Expandable", "url": "/product/components/expandable/" }, - { - "title": "Inputs", - "url": "/product/components/inputs/" - }, - { - "title": "Labels", - "url": "/product/components/labels/" - }, { "title": "Links", "url": "/product/components/links/" @@ -270,14 +287,6 @@ "title": "Prose", "url": "/product/components/prose/" }, - { - "title": "Radio", - "url": "/product/components/radio/" - }, - { - "title": "Select", - "url": "/product/components/select/" - }, { "title": "Sidebar widgets", "url": "/product/components/sidebar-widgets/" @@ -294,10 +303,6 @@ "title": "Tags", "url": "/product/components/tags/" }, - { - "title": "Textarea", - "url": "/product/components/textarea/" - }, { "title": "Toggle switch", "url": "/product/components/toggle-switch/" From 27e1b3cf2499c1839823bfd32aa38ea840464bf7 Mon Sep 17 00:00:00 2001 From: Ben Kelly Date: Wed, 24 Aug 2022 11:29:26 -0400 Subject: [PATCH 3/9] feat: remove the need for .is-disabled on checkbox items --- docs/product/components/checkbox.html | 6 +++--- lib/css/components/inputs.less | 6 ++++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/product/components/checkbox.html b/docs/product/components/checkbox.html index c8ffc889a9..fb1f4fce9f 100644 --- a/docs/product/components/checkbox.html +++ b/docs/product/components/checkbox.html @@ -15,7 +15,7 @@ -
+
@@ -29,7 +29,7 @@
-
+
@@ -41,7 +41,7 @@
-
+
diff --git a/lib/css/components/inputs.less b/lib/css/components/inputs.less index 0e991ebe26..9275099c86 100644 --- a/lib/css/components/inputs.less +++ b/lib/css/components/inputs.less @@ -275,11 +275,13 @@ fieldset { gap: var(--su8); align-items: center; + [disabled] + .s-label { + &:extend(.is-disabled .s-label); + } + .s-label { font-weight: normal; } - - // TODO drop the need for an is-disabled class on the item/parent } .s-checkbox-group, .s-radio-group { From f53f4d38aa0df3c32e6124b68927e65f45589661 Mon Sep 17 00:00:00 2001 From: Ben Kelly Date: Wed, 24 Aug 2022 11:47:15 -0400 Subject: [PATCH 4/9] fix: add hack due to legend not respecting gap --- docs/product/components/checkbox.html | 64 +++++++++++++-------------- lib/css/components/inputs.less | 9 +++- 2 files changed, 39 insertions(+), 34 deletions(-) diff --git a/docs/product/components/checkbox.html b/docs/product/components/checkbox.html index fb1f4fce9f..c97ab40c78 100644 --- a/docs/product/components/checkbox.html +++ b/docs/product/components/checkbox.html @@ -9,13 +9,13 @@
{% highlight html %} -
+
-
+
@@ -23,25 +23,25 @@
-
+
-
+
-
+
-
+
@@ -96,15 +96,15 @@
Which types of fruit do you like? (Check all that apply) -
+
-
+
-
+
@@ -142,15 +142,15 @@
Which types of fruit do you like? (Check all that apply) -
+
-
+
-
+
@@ -195,15 +195,15 @@
Which types of fruit do you like? (Check all that apply) -
+
-
+
-
+
@@ -244,15 +244,15 @@
Which types of fruit do you like? (Check all that apply) -
+
-
+
-
+
@@ -308,21 +308,21 @@
Which types of fruit do you like? (Check all that apply) -
+
-
+
-
+