From 046ae4a45e1a42f14d42eb52ce8fe3e2dc9cab91 Mon Sep 17 00:00:00 2001
From: Machiko Yasuda <machiko@reactioncommerce.com>
Date: Fri, 22 Mar 2019 12:23:59 -0700
Subject: [PATCH] fix(selectableitem): remove cascading div styling

Signed-off-by: Machiko Yasuda <machiko@reactioncommerce.com>
---
 package/src/components/SelectableItem/v1/SelectableItem.js   | 3 ++-
 .../v1/__snapshots__/SelectableItem.test.js.snap             | 1 +
 package/src/components/SelectableList/v1/SelectableList.js   | 5 -----
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/package/src/components/SelectableItem/v1/SelectableItem.js b/package/src/components/SelectableItem/v1/SelectableItem.js
index 909e9654d..d3c4e0f47 100644
--- a/package/src/components/SelectableItem/v1/SelectableItem.js
+++ b/package/src/components/SelectableItem/v1/SelectableItem.js
@@ -75,7 +75,8 @@ const StyledInput = styled.input`
 const StyledDetail = styled.div`
   ${addTypographyStyles("SelectableItemDetail", "bodyText")}
   align-items: center;
-  display: flex;
+  display: ${(props) => (props.isStacked ? "block" : "flex")};
+  height: auto;
   justify-content: ${(props) => (props.isStacked ? "flex-start" : "center")};
   margin-left: ${(props) => (props.isStacked ? applyTheme("SelectableList.stackedSpacingToLabel")(props) : "0")};
   margin-top: ${(props) => (props.isStacked ? applyTheme("SelectableList.stackedSpacingBelowLabel")(props) : "0")};
diff --git a/package/src/components/SelectableItem/v1/__snapshots__/SelectableItem.test.js.snap b/package/src/components/SelectableItem/v1/__snapshots__/SelectableItem.test.js.snap
index 606fa5365..f70542db3 100644
--- a/package/src/components/SelectableItem/v1/__snapshots__/SelectableItem.test.js.snap
+++ b/package/src/components/SelectableItem/v1/__snapshots__/SelectableItem.test.js.snap
@@ -118,6 +118,7 @@ exports[`basic snapshot with empty props 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
+  height: auto;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
diff --git a/package/src/components/SelectableList/v1/SelectableList.js b/package/src/components/SelectableList/v1/SelectableList.js
index 419c84559..765f7e258 100644
--- a/package/src/components/SelectableList/v1/SelectableList.js
+++ b/package/src/components/SelectableList/v1/SelectableList.js
@@ -109,11 +109,6 @@ const HorizontalWrapper = styled.div`
   &:last-of-type {
     padding-left: ${applyTheme("SelectableList.horizontalLastItemPaddingLeft")};
   }
-
-  div {
-    display: block;
-    height: auto;
-  }
 `;
 
 class SelectableList extends Component {