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: validation roles and test fixes #31677

Merged
merged 4 commits into from
Sep 17, 2020
Merged

Simpler input groups: validation roles and test fixes #31677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4b60f7d
Remove commented out selector
mdo Sep 16, 2020
66ca92f
Update form validation examples to include aria-describedby and ids
mdo Sep 16, 2020
de461d9
Fix IDs and missing aria-describedby attributes
mdo Sep 16, 2020
38b4e63
De-dupe required attr
mdo Sep 16, 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
1 change: 0 additions & 1 deletion 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,6 @@
// Base styles
//

// .input-group,
.input-group-start,
.input-group-end {
position: relative;
Expand Down
32 changes: 16 additions & 16 deletions site/content/docs/5.0/forms/input-group.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,32 +121,32 @@ Use `.btn`s as starting and ending addons with our supported form controls.

{{< example >}}
<div class="input-group-start mb-3">
<button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
<button class="btn btn-outline-secondary" type="button" id="buttonAddon01">Button</button>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="buttonAddon01">
</div>

<div class="input-group-end">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="buttonAddon02">
<button class="btn btn-outline-secondary" type="button" id="buttonAddon02">Button</button>
</div>
{{< /example >}}

{{< example >}}
<div class="input-group-start mb-3">
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
<textarea class="form-control" aria-label="With textarea"></textarea>
<button class="btn btn-outline-secondary" type="button" id="buttonAddon03">Button</button>
<textarea class="form-control" aria-label="With textarea" aria-describedby="buttonAddon03"></textarea>
</div>

<div class="input-group-end">
<textarea class="form-control" aria-label="With textarea"></textarea>
<button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
<textarea class="form-control" aria-label="With textarea" aria-describedby="buttonAddon04"></textarea>
<button class="btn btn-outline-secondary" type="button" id="buttonAddon04">Button</button>
</div>
{{< /example >}}

{{< example >}}
<div class="input-group-start mb-3">
<button class="btn btn-outline-secondary" type="button">Button</button>
<select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon">
<button class="btn btn-outline-secondary" type="button" id="buttonAddon05">Button</button>
<select class="form-select" id="inputGroupSelect03" aria-label="Example select with button addon" aria-describedby="buttonAddon05">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
Expand All @@ -155,21 +155,21 @@ Use `.btn`s as starting and ending addons with our supported form controls.
</div>

<div class="input-group-end">
<select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon">
<select class="form-select" id="inputGroupSelect04" aria-label="Example select with button addon" aria-describedby="buttonAddon06">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button" id="buttonAddon06">Button</button>
</div>
{{< /example >}}

{{< example >}}
<div class="input-group-start mb-3">
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
<button class="btn btn-outline-secondary" type="button" id="buttonAddon07">Button</button>
<div class="form-file">
<input type="file" class="form-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
<input type="file" class="form-file-input" id="inputGroupFile03" aria-describedby="buttonAddon07">
<label class="form-file-label" for="inputGroupFile03">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
Expand All @@ -179,13 +179,13 @@ Use `.btn`s as starting and ending addons with our supported form controls.

<div class="input-group-end">
<div class="form-file">
<input type="file" class="form-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
<input type="file" class="form-file-input" id="inputGroupFile04" aria-describedby="buttonAddon08">
<label class="form-file-label" for="inputGroupFile04">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
</div>
<button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
<button class="btn btn-outline-secondary" type="button" id="buttonAddon08">Button</button>
</div>
{{< /example >}}

Expand Down
Loading