min width moved to item

Shopify · Nov 20, 2018 · 1579b00 · 1579b00
1 parent 7f89ff4
commit 1579b00
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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();