Skip to content

fix(form-elements): add focus-within focus styling #1646

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dancormier merged 6 commits into from
Feb 23, 2024
Merged

fix(form-elements): add focus-within focus styling #1646

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2fdc5f6
fix(form-elements): add focus-within focus styling
dancormier Feb 12, 2024
65c27a5
Remove focus-within styling from checkbox, radio, select
dancormier Feb 20, 2024
87f10c4
docs(input): add documentation for input w/ focus-within
dancormier Feb 20, 2024
cf45b0f
Remove dupe "Input fills" section
dancormier Feb 22, 2024
27f8480
Add `s-input` to nested input, improve example
dancormier Feb 22, 2024
d8f9b71
Add `s-input` to nested input, improve example (attempt 2)
dancormier Feb 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions docs/product/components/inputs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,3 +333,42 @@
</div>
</div>
</section>

<section class="stacks-section">

{% header "h2", "Nested inputs" %}
<p class="stacks-copy">An input can be nested within a container that has the <code class="stacks-code">.s-input</code> class applied to display styled elements as if they're within an input.</p>

<div class="stacks-preview">
{% highlight html %}
<div class="d-flex fd-column g4">
<label class="s-label" for="tag-selector">Tags</label>
<div class="s-input d-flex fw-wrap g8">
<span>
<span class="s-tag">
svelte
<button class="s-tag--dismiss" type="button" title="Remove tag">@Svg.ClearSm</button>
</span>
</span>
<input
id="tag-selector"
class="s-input bc-transparent bs-none p0 wmn1"
type="text"
…>
</div>
</div>
{% endhighlight %}
<div class="stacks-preview--example d-flex fd-column g4">
<label class="s-label" for="tag-selector">Tags</label>
<div class="s-input d-flex fw-wrap g8">
<span>
<span class="s-tag">
svelte
<button class="s-tag--dismiss" type="button" title="Remove tag">{% icon "ClearSm" %}</button>
</span>
</span>
<input id="tag-selector" class="s-input bc-transparent bg-transparent bs-none fl-grow1 p0 w-auto" type="text" role="presentation" placeholder="enter up to 5 tags">
</div>
</div>
</div>
</section>
4 changes: 3 additions & 1 deletion lib/components/input_textarea/input_textarea.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,9 @@
}

// INTERACTION
&:focus {
// 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();
}

Expand Down