Skip to content
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

Simpler input groups #31666

Closed
wants to merge 10 commits into from
Closed

Simpler input groups #31666

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
07d0be9
Rewrite input groups
mdo Sep 16, 2020
d7f5dbb
Update instances of input groups to new class names
mdo Sep 16, 2020
29bf97a
simplify selector
mdo Sep 16, 2020
e0f3cc8
Update input-group.md
XhmikosR Sep 16, 2020
21c89ea
Remove commented out selector
mdo Sep 16, 2020
b775a74
Update form validation examples to include aria-describedby and ids
mdo Sep 16, 2020
fa16772
Fix IDs and missing aria-describedby attributes
mdo Sep 16, 2020
84f2044
De-dupe required attr
mdo Sep 16, 2020
7277b45
Update migration.md
XhmikosR Oct 1, 2020
b82876a
Testing out an .input-group-around
mdo Oct 21, 2020
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
49 changes: 44 additions & 5 deletions scss/forms/_input-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@
// Base styles
//

.input-group {
.input-group-start,
.input-group-end,
.input-group-around {
position: relative;
display: flex;
flex-wrap: wrap; // For form validation feedback
Expand Down Expand Up @@ -127,14 +129,51 @@
// with the `.input-group >` part, but without it, we cannot override the sizing.

// stylelint-disable-next-line no-duplicate-selectors
.input-group {
> :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu),
> .dropdown-toggle:nth-last-child(n + 3) {
.input-group-start {
> .input-group-text,
> .btn {
@include border-right-radius(0);
}

> :not(:first-child):not(.dropdown-menu) {
> .form-control,
> .form-select,
> .form-file {
margin-left: -$input-border-width;
@include border-left-radius(0);
}
}

.input-group-end {
> .input-group-text,
> .btn {
margin-left: -$input-border-width;
@include border-left-radius(0);
}

> .form-control,
> .form-select,
> .form-file {
@include border-right-radius(0);
}
}

.input-group-around {
> .input-group-text,
> .btn {
&:first-child {
@include border-right-radius(0);
}

&:not(:first-child) {
margin-left: -$input-border-width;
@include border-left-radius(0);
}
}

> .form-control,
> .form-select,
> .form-file {
margin-left: -$input-border-width;
@include border-radius(0);
}
}
4 changes: 2 additions & 2 deletions site/content/docs/5.0/components/button-group.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-start">
<div class="input-group-text" id="btnGroupAddon">@</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>
Expand All @@ -132,7 +132,7 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-start">
<div class="input-group-text" id="btnGroupAddon2">@</div>
<input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
</div>
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.0/components/navbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ Input groups work, too. If your navbar is an entire form, or mostly form, you ca
{{< example >}}
<nav class="navbar navbar-light bg-light">
<form class="container-fluid">
<div class="input-group">
<div class="input-group-start">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
Expand Down
Loading