From 13150872c6637d0d224aa9d14fe8e103aff3139e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 22 Dec 2017 15:29:49 -0800 Subject: [PATCH] Rewrite input group component (#25020) * Rewrite input group component * Set the feedback to 100% width for input group * Move from .row to .form-row for tighter layout * no need for custom feedback here, we're using browser messaging * add input group to validation examples * add note about validating multiple * migration note added --- docs/4.0/components/button-group.md | 8 +- docs/4.0/components/forms.md | 79 +++++-- docs/4.0/components/input-group.md | 342 +++++++++++++++------------- docs/4.0/components/navbar.md | 4 +- docs/4.0/migration.md | 10 + scss/_input-group.scss | 246 ++++++++------------ scss/mixins/_forms.scss | 1 + 7 files changed, 353 insertions(+), 337 deletions(-) diff --git a/docs/4.0/components/button-group.md b/docs/4.0/components/button-group.md index 8fea3de901..f08d2e3ecd 100644 --- a/docs/4.0/components/button-group.md +++ b/docs/4.0/components/button-group.md @@ -60,7 +60,9 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
- @ +
+
@
+
@@ -73,7 +75,9 @@ Feel free to mix input groups with button groups in your toolbars. Similar to th
- @ +
+
@
+
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 634b3288c5..d485ef4cdd 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -482,7 +482,9 @@ The example below uses a flexbox utility to vertically center the contents and c
-
@
+
+
@
+
@@ -512,7 +514,9 @@ You can then remix that once again with size-specific column classes.
-
@
+
+
@
+
@@ -575,7 +579,9 @@ You may need to manually address the width and alignment of individual form cont
-
@
+
+
@
+
@@ -725,17 +731,29 @@ When attempting to submit, you'll see the `:invalid` and `:valid` styles applied {% example html %}
-
-
+
+
-
+
+
+ +
+
+ @ +
+ +
+ Please choose a username. +
+
+
-
+
@@ -788,40 +806,39 @@ While these feedback styles cannot be styled with CSS, you can still customize t {% example html %} -
-
+
+
-
+
+
+ +
+
+ @ +
+ +
+
-
+
-
- Please provide a valid city. -
-
- Please provide a valid state. -
-
- Please provide a valid zip. -
- {% endexample %} @@ -832,17 +849,29 @@ We recommend using client side validation, but in case you require server side, {% example html %}
-
-
+
+
-
+
+
+ +
+
+ @ +
+ +
+ Please choose a username. +
+
+
-
+
diff --git a/docs/4.0/components/input-group.md b/docs/4.0/components/input-group.md index 27995d4099..3d866d9550 100644 --- a/docs/4.0/components/input-group.md +++ b/docs/4.0/components/input-group.md @@ -11,32 +11,36 @@ toc: true Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group** and `