From 1579b009d4919f6f3a1b5e7f917c39336ae9b5fd Mon Sep 17 00:00:00 2001
From: Daniel Leroux <daniel.leroux@shopify.com>
Date: Tue, 20 Nov 2018 09:18:20 -0500
Subject: [PATCH] min width moved to item

---
 UNRELEASED.md                                     |  2 ++
 src/components/FormLayout/FormLayout.scss         | 15 +++++++++------
 .../FormLayout/components/Group/Group.tsx         |  2 +-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 8561523d5f0..ddad8fff69f 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -8,6 +8,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
+- Removed min-width from `FormLayout` `Items` and applying it only to `Items` used inside a `FormLayout.Group` ([#650](https://github.com/Shopify/polaris-react/pull/650))
+
 ### Documentation
 
 ### Development workflow
diff --git a/src/components/FormLayout/FormLayout.scss b/src/components/FormLayout/FormLayout.scss
index 5a0e649f3c2..e33e252870d 100644
--- a/src/components/FormLayout/FormLayout.scss
+++ b/src/components/FormLayout/FormLayout.scss
@@ -5,11 +5,6 @@ $item-min-size: rem(220px);
   margin-left: -1 * spacing(loose);
 }
 
-.condensed .Item {
-  flex-basis: (0.5 * $item-min-size);
-  min-width: (0.5 * $item-min-size);
-}
-
 .Title {
   margin-bottom: -1 * spacing(tight);
   padding: spacing() spacing(loose) 0;
@@ -29,6 +24,14 @@ $item-min-size: rem(220px);
   flex: 1 1 $item-min-size;
   margin-top: spacing();
   margin-left: spacing(loose);
-  min-width: $item-min-size;
   max-width: calc(100% - #{spacing(loose)});
+
+  .grouped & {
+    min-width: $item-min-size;
+  }
+
+  .condensed & {
+    flex-basis: (0.5 * $item-min-size);
+    min-width: (0.5 * $item-min-size);
+  }
 }
diff --git a/src/components/FormLayout/components/Group/Group.tsx b/src/components/FormLayout/components/Group/Group.tsx
index 119368c91bb..149627fd41c 100644
--- a/src/components/FormLayout/components/Group/Group.tsx
+++ b/src/components/FormLayout/components/Group/Group.tsx
@@ -16,7 +16,7 @@ export interface Props {
 const getUniqueID = createUniqueIDFactory('FormLayoutGroup');
 
 export default function Group({children, condensed, title, helpText}: Props) {
-  const className = classNames(condensed && styles.condensed);
+  const className = classNames(condensed ? styles.condensed : styles.grouped);
 
   const id = getUniqueID();