From 2fdc5f63a035f06534572b3dd96d536f93b54f57 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 12 Feb 2024 11:54:23 -0500 Subject: [PATCH 1/6] fix(form-elements): add focus-within focus styling In the process of reviewing https://github.com/StackEng/StackOverflow/pull/18700, we identified an issue with non-focusable elements styled to look like inputs with `.s-input` ([tag editor input for example](https://github.com/StackEng/StackOverflow/pull/18700#issuecomment-1936407723)). These elements will contain invisible or restyled input elements. We want to ensure that the elements with `.s-input` (or similar) receive focus styling when child elements are focused. --- lib/components/checkbox_radio/checkbox_radio.less | 3 ++- lib/components/input_textarea/input_textarea.less | 3 ++- lib/components/select/select.less | 3 ++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/lib/components/checkbox_radio/checkbox_radio.less b/lib/components/checkbox_radio/checkbox_radio.less index fdbc0c46a7..e2cd1bfdb4 100644 --- a/lib/components/checkbox_radio/checkbox_radio.less +++ b/lib/components/checkbox_radio/checkbox_radio.less @@ -27,7 +27,8 @@ } // INTERACTION - &:focus { + &:focus, + &:focus-within { .focus-styles(); } diff --git a/lib/components/input_textarea/input_textarea.less b/lib/components/input_textarea/input_textarea.less index 4416ae183c..02f12957f5 100644 --- a/lib/components/input_textarea/input_textarea.less +++ b/lib/components/input_textarea/input_textarea.less @@ -102,7 +102,8 @@ } // INTERACTION - &:focus { + &:focus, + &:focus-within { .focus-styles(); } diff --git a/lib/components/select/select.less b/lib/components/select/select.less index 01f0e76667..ca3baed057 100644 --- a/lib/components/select/select.less +++ b/lib/components/select/select.less @@ -99,7 +99,8 @@ } // INTERACTION - &:focus { + &:focus, + &:focus-within { color: var(--black); .focus-styles(); } From 65c27a51b441b1affc3525a1a4b9b30c1e99e08b Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 20 Feb 2024 17:01:32 -0500 Subject: [PATCH 2/6] Remove focus-within styling from checkbox, radio, select Related: https://github.com/StackExchange/Stacks/pull/1646#issuecomment-1947943760 --- lib/components/checkbox_radio/checkbox_radio.less | 3 +-- lib/components/select/select.less | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/lib/components/checkbox_radio/checkbox_radio.less b/lib/components/checkbox_radio/checkbox_radio.less index e2cd1bfdb4..fdbc0c46a7 100644 --- a/lib/components/checkbox_radio/checkbox_radio.less +++ b/lib/components/checkbox_radio/checkbox_radio.less @@ -27,8 +27,7 @@ } // INTERACTION - &:focus, - &:focus-within { + &:focus { .focus-styles(); } diff --git a/lib/components/select/select.less b/lib/components/select/select.less index ca3baed057..01f0e76667 100644 --- a/lib/components/select/select.less +++ b/lib/components/select/select.less @@ -99,8 +99,7 @@ } // INTERACTION - &:focus, - &:focus-within { + &:focus { color: var(--black); .focus-styles(); } From 87f10c41e4e139c17a65ff5bf83b58b78cbfa780 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 20 Feb 2024 17:23:11 -0500 Subject: [PATCH 3/6] docs(input): add documentation for input w/ focus-within Addresses https://github.com/StackExchange/Stacks/pull/1646#issuecomment-1947943760 --- docs/product/components/inputs.html | 61 +++++++++++++++++++ .../input_textarea/input_textarea.less | 1 + 2 files changed, 62 insertions(+) diff --git a/docs/product/components/inputs.html b/docs/product/components/inputs.html index ec62edfafe..d783f537f3 100644 --- a/docs/product/components/inputs.html +++ b/docs/product/components/inputs.html @@ -333,3 +333,64 @@ + +
+ {% header "h2", "Input fills" %} +

Input fills are used to visually connect input text boxes with related content.

+ + {% header "h3", "Prepended inputs" %} +
+{% highlight html %} +
+ +
+
https://
+
+ +
+
+
+{% endhighlight %} +
+
+ +
+
https://
+
+ +
+
+
+
+
+ +{% header "h2", "Nested inputs" %} +

An input can be nested within a container that has the .s-input class applied to display styled elements as if they're within an input.

+ +
+{% highlight html %} + +
+ + + svelte + + + + +
+{% endhighlight %} +
+ +
+
+ + svelte + + +
+ +
+
+
+
diff --git a/lib/components/input_textarea/input_textarea.less b/lib/components/input_textarea/input_textarea.less index 02f12957f5..5e0673e730 100644 --- a/lib/components/input_textarea/input_textarea.less +++ b/lib/components/input_textarea/input_textarea.less @@ -102,6 +102,7 @@ } // INTERACTION + // Note: We're applying the focus styles both on `:focus` and `:focus-within` since this component can sometimes be used on the parent of an input such as in our tag selector in Core. &:focus, &:focus-within { .focus-styles(); From cf45b0f6bcde33f9f2a69df515bcfe9a847cf73f Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Thu, 22 Feb 2024 16:16:00 -0500 Subject: [PATCH 4/6] Remove dupe "Input fills" section Addresses https://github.com/StackExchange/Stacks/pull/1646#discussion_r1497057838 --- docs/product/components/inputs.html | 34 +++-------------------------- 1 file changed, 3 insertions(+), 31 deletions(-) diff --git a/docs/product/components/inputs.html b/docs/product/components/inputs.html index d783f537f3..9c5e900bc6 100644 --- a/docs/product/components/inputs.html +++ b/docs/product/components/inputs.html @@ -335,39 +335,11 @@
- {% header "h2", "Input fills" %} -

Input fills are used to visually connect input text boxes with related content.

- {% header "h3", "Prepended inputs" %} -
-{% highlight html %} -
- -
-
https://
-
- -
-
-
-{% endhighlight %} -
-
- -
-
https://
-
- -
-
-
-
-
- -{% header "h2", "Nested inputs" %} -

An input can be nested within a container that has the .s-input class applied to display styled elements as if they're within an input.

+ {% header "h2", "Nested inputs" %} +

An input can be nested within a container that has the .s-input class applied to display styled elements as if they're within an input.

-
+
{% highlight html %}
From 27f84808d8d9ef27ca7f1ed4f5675a5061c24f55 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Thu, 22 Feb 2024 16:27:06 -0500 Subject: [PATCH 5/6] Add `s-input` to nested input, improve example --- docs/product/components/inputs.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/product/components/inputs.html b/docs/product/components/inputs.html index 9c5e900bc6..c5d2ffa30b 100644 --- a/docs/product/components/inputs.html +++ b/docs/product/components/inputs.html @@ -341,8 +341,6 @@
{% highlight html %} - -
svelte From d8f9b71a1654b302b3469a63a640d375e84536e6 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Thu, 22 Feb 2024 16:47:31 -0500 Subject: [PATCH 6/6] Add `s-input` to nested input, improve example (attempt 2) --- docs/product/components/inputs.html | 30 ++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/docs/product/components/inputs.html b/docs/product/components/inputs.html index c5d2ffa30b..f1d45f4e23 100644 --- a/docs/product/components/inputs.html +++ b/docs/product/components/inputs.html @@ -341,25 +341,33 @@
{% highlight html %} - - - svelte - +
+ +
+ + + svelte + + - - + +
{% endhighlight %}
-
-
+
+ svelte - + -
- + +