From d7eaffabae2330ad761b4e0f44f922b73fa0309e Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Thu, 13 Aug 2015 15:27:32 -0400
Subject: [PATCH] Fixes ui input sizing issues due to flex-box width collapsing
 being peculiar with <input> #2705 #2621 #2821

---
 RELEASE-NOTES.md                      |  2 +
 src/definitions/collections/form.less | 53 ++++++++++++++++++++-------
 2 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index 3552b5c2e..3a1d919bd 100644
--- a/RELEASE-NOTES.md
+++ b/RELEASE-NOTES.md
@@ -49,6 +49,7 @@
 - **Dropdown** - Fixes issues with setting "" (empty quote) values when `placeholder: false` is used. Fixes issues with using `clear` and `restore defaults` without placeholders. #2637
 - **Dropdown** - Remove use of `trim` which causes issues IE 11 and below #2806
 - **Embed** - Remove accidental `console.log` statements in js #2760
+- **Form / Input** - Fixes issue where `ui input` would sometimes collapse to `0px` width, especially when used inside an `inline field` #2705 #2621 #2821
 - **Form / Input** - Fixes `::placeholder` text color for `ui error input`, modifies form error placeholder color to distinguish from form value error color #2786
 - **Form** - Form will no longer show messages that are empty in `error`, `warning`, or `success` state.
 - **Form** - Date input and other special input in chrome now are the same height as normal input (adds custom vendor shadow dom styling) #2704
@@ -74,6 +75,7 @@
 - **Dropdown** - Fixed issue where `forceSelection` would not occur when `pageLostFocus` (clicked into another tab and back)
 - **Dropdown/Tab** - Fixed an instance where `metadata` was not referencing settings metadata value
 - **Form Validation** - Fixed issue with `get value(s)` where unchecked checkboxes would not correctly retrieve values
+- **Input** `action input` and `labeled input` now have focused border on inner edge with label/button
 - **Form** - Dropdown in `inline field` now use auto width instead of 100%
 - **Grid / Container** - `ui relaxed grid container` and `ui very relaxed grid container` will now all render at same container width
 - **Icons** - Fixed issue where `active icon` or `emphasized icon` would not adjust opacity inside menus
diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less
index de1c198ad..98d7a89c1 100755
--- a/src/definitions/collections/form.less
+++ b/src/definitions/collections/form.less
@@ -89,8 +89,7 @@
 .ui.form input[type="tel"],
 .ui.form input[type="time"],
 .ui.form input[type="text"],
-.ui.form input[type="url"],
-.ui.form .ui.input {
+.ui.form input[type="url"] {
   width: @inputWidth;
   vertical-align: top;
 }
@@ -130,11 +129,6 @@
   transition: @inputTransition;
 }
 
-/* Collapse Flex */
-.ui.form .ui.input > input {
-  width: 0px !important;
-}
-
 /* Text Area */
 .ui.form textarea {
   margin: 0em;
@@ -195,6 +189,7 @@
        Dropdown
 ---------------------*/
 
+/* Block */
 .ui.form .field > .selection.dropdown {
   width: 100%;
 }
@@ -202,6 +197,7 @@
   float: right;
 }
 
+/* Inline */
 .ui.form .inline.fields .field > .selection.dropdown,
 .ui.form .inline.field > .selection.dropdown {
   width: auto;
@@ -211,6 +207,41 @@
   float: none;
 }
 
+/*--------------------
+       UI Input
+---------------------*/
+
+/* Block */
+.ui.form .fields .field .ui.input,
+.ui.form .wide.field .ui.input {
+  width: 100%;
+}
+
+.ui.form .fields .field .ui.input input,
+.ui.form .field .ui.input input {
+  width: auto;
+}
+
+/* Full Width */
+.ui.form .ten.fields .ui.input input,
+.ui.form .nine.fields .ui.input input,
+.ui.form .eight.fields .ui.input input,
+.ui.form .seven.fields .ui.input input,
+.ui.form .six.fields .ui.input input,
+.ui.form .five.fields .ui.input input,
+.ui.form .four.fields .ui.input input,
+.ui.form .three.fields .ui.input input,
+.ui.form .two.fields .ui.input input,
+.ui.form .wide.field .ui.input input {
+  flex: 1 0 auto;
+  width: 0px;
+}
+
+/* Inline */
+.ui.form .inline.fields .field:not(.wide) .ui.input,
+.ui.form .inline.field:not(.wide) .ui.input {
+  width: 100%;
+}
 
 /*--------------------
        Dividers
@@ -947,10 +978,8 @@
 /* Inline Input */
 .ui.form .inline.fields .field > input,
 .ui.form .inline.fields .field > select,
-.ui.form .inline.fields .field > .ui.input,
 .ui.form .inline.field > input,
-.ui.form .inline.field > select,
-.ui.form .inline.field > .ui.input {
+.ui.form .inline.field > select {
   display: inline-block;
   width: auto;
 
@@ -961,7 +990,6 @@
   font-size: @inlineInputSize;
 }
 
-
 /* Label */
 .ui.form .inline.fields .field > :first-child,
 .ui.form .inline.field > :first-child {
@@ -978,8 +1006,7 @@
   align-items: center;
 }
 .ui.form .inline.fields .wide.field > input,
-.ui.form .inline.fields .wide.field > select,
-.ui.form .inline.fields .wide.field > .ui.input {
+.ui.form .inline.fields .wide.field > select {
   width: 100%;
 }