min width moved to item

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

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
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();