refactor(ui): refactor Menu CSS

Pass the 'open' prop into child elements that styled based on it. This is both more idiomatic for styled components and works around a bug that was making the snapshot tests volatile.

packages/ui/src/atoms/Menu.js

@@ -4,6 +4,10 @@ import styled from 'styled-components'
 // TODO: match the width of the container to the width of the widest option?
 // TODO: use a <select> element instead of divs?
 
+const Root = styled.div`
+  font-size: 1em;
+`
+
 const Label = styled.span`
   display: block;
   font-size: 1em;
@@ -20,6 +24,15 @@ const Opener = styled.button.attrs({
   cursor: pointer;
   font-family: inherit;
   font-size: 1.2em;
+
+  border-left: 2px solid
+    ${props => (props.open ? 'var(--color-primary)' : 'lightgrey')};
+  color: ${props => (props.open ? 'var(--color-primary)' : 'inherit')};
+
+  &:hover {
+    border-left: 2px solid var(--color-primary);
+    color: var(--color-primary);
+  }
 `
 
 const Placeholder = styled.span`
@@ -27,6 +40,11 @@ const Placeholder = styled.span`
   font-style: italic;
   font-weight: 400;
   text-transform: normal;
+  color: #aaa;
+
+  &:hover {
+    color: var(--color-primary);
+  }
 `
 
 const Arrow = styled.span`
@@ -34,6 +52,7 @@ const Arrow = styled.span`
   font-size: 50%;
   margin-left: 10px;
   transition: transform 0.2s;
+  transform: scaleX(2.2) scaleY(${props => (props.open ? -1.2 : 1.2)});
 `
 
 const Main = styled.div.attrs({
@@ -58,6 +77,9 @@ const Options = styled.div`
   transition: opacity 2s;
   width: 0;
   z-index: 10;
+
+  min-width: ${props => (props.open ? '10em' : '0')};
+  opacity: ${props => (props.open ? '1' : '0')};
 `
 
 const Option = styled.div.attrs({
@@ -77,38 +99,6 @@ const Option = styled.div.attrs({
   }
 `
 
-const Root = styled.div`
-  font-size: 1em;
-
-  ${Opener} {
-    border-left: 2px solid
-      ${props => (props.open ? 'var(--color-primary)' : 'lightgrey')};
-    color: ${props => (props.open ? 'var(--color-primary)' : 'inherit')};
-
-    ${Placeholder} {
-      color: #aaa;
-    }
-  }
-
-  ${Opener}:hover {
-    border-left: 2px solid var(--color-primary);
-    color: var(--color-primary);
-
-    ${Placeholder} {
-      color: var(--color-primary);
-    }
-  }
-
-  ${Arrow} {
-    transform: scaleX(2.2) scaleY(${props => (props.open ? -1.2 : 1.2)});
-  }
-
-  ${Options} {
-    min-width: ${props => (props.open ? '10em' : '0')};
-    opacity: ${props => (props.open ? '1' : '0')};
-  }
-`
-
 /* Not used for now
 .inline {
   align-items: flex-end;
@@ -182,19 +172,19 @@ class Menu extends React.Component {
 
         <Main>
           <OpenerContainer>
-            <Opener onClick={this.toggleMenu}>
+            <Opener onClick={this.toggleMenu} open={open}>
               {selected ? (
                 <span>{this.optionLabel(selected)}</span>
               ) : (
                 <Placeholder>{placeholder}</Placeholder>
               )}
-              <Arrow>▼</Arrow>
+              <Arrow open={open}>▼</Arrow>
             </Opener>
           </OpenerContainer>
 
           <OptionsContainer>
             {open && (
-              <Options>
+              <Options open={open}>
                 {options.map(option => (
                   <Option
                     active={option.value === selected}

packages/ui/test/__snapshots__/Menu.test.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Menu is rendered correctly 1`] = `
-.c3 {
+.c0 {
+  font-size: 1em;
+}
+
+.c2 {
   background: transparent;
   border: none;
   cursor: pointer;
   font-family: inherit;
   font-size: 1.2em;
+  border-left: 2px solid lightgrey;
+  color: inherit;
 }
 
-.c5 {
+.c2:hover {
+  border-left: 2px solid var(--color-primary);
+  color: var(--color-primary);
+}
+
+.c3 {
   display: inline-block;
   font-size: 50%;
   margin-left: 10px;
   -webkit-transition: -webkit-transform 0.2s;
   -webkit-transition: transform 0.2s;
   transition: transform 0.2s;
+  -webkit-transform: scaleX(2.2) scaleY(1.2);
+  -ms-transform: scaleX(2.2) scaleY(1.2);
+  transform: scaleX(2.2) scaleY(1.2);
 }
 
 .c1 {
   position: relative;
 }
 
-.c6 {
+.c4 {
   position: absolute;
 }
 
-.c0 {
-  font-size: 1em;
-}
-
-.c0 .c2 {
-  border-left: 2px solid lightgrey;
-  color: inherit;
-}
-
-.c0 .c2 .sc-bxivhb {
-  color: #aaa;
-}
-
-.c0 .c2:hover {
-  border-left: 2px solid var(--color-primary);
-  color: var(--color-primary);
-}
-
-.c0 .c2:hover .sc-bxivhb {
-  color: var(--color-primary);
-}
-
-.c0 .c4 {
-  -webkit-transform: scaleX(2.2) scaleY(1.2);
-  -ms-transform: scaleX(2.2) scaleY(1.2);
-  transform: scaleX(2.2) scaleY(1.2);
-}
-
-.c0 .sc-gzVnrw {
-  min-width: 0;
-  opacity: 0;
-}
-
 <div
   className="c0"
   open={false}
@@ -71,54 +52,70 @@ exports[`Menu is rendered correctly 1`] = `
       className=""
     >
       <button
-        className="c2 c3"
+        className="c2"
         onClick={[Function]}
+        open={false}
         type="button"
       >
         <span>
           Foo
         </span>
         <span
-          className="c4 c5"
+          className="c3"
+          open={false}
         >
           ▼
         </span>
       </button>
     </div>
     <div
-      className="c6"
+      className="c4"
     />
   </div>
 </div>
 `;
 
 exports[`Menu is rendered correctly when open 1`] = `
-.c3 {
+.c0 {
+  font-size: 1em;
+}
+
+.c2 {
   background: transparent;
   border: none;
   cursor: pointer;
   font-family: inherit;
   font-size: 1.2em;
+  border-left: 2px solid var(--color-primary);
+  color: var(--color-primary);
 }
 
-.c5 {
+.c2:hover {
+  border-left: 2px solid var(--color-primary);
+  color: var(--color-primary);
+}
+
+.c3 {
   display: inline-block;
   font-size: 50%;
   margin-left: 10px;
   -webkit-transition: -webkit-transform 0.2s;
   -webkit-transition: transform 0.2s;
   transition: transform 0.2s;
+  -webkit-transform: scaleX(2.2) scaleY(-1.2);
+  -ms-transform: scaleX(2.2) scaleY(-1.2);
+  transform: scaleX(2.2) scaleY(-1.2);
 }
 
 .c1 {
   position: relative;
 }
 
-.c6 {
+.c4 {
   position: absolute;
 }
 
-.c8 {
+.c5 {
   background-color: white;
   border-bottom: 2px solid var(--color-primary);
   border-left: 2px solid var(--color-primary);
@@ -131,9 +128,11 @@ exports[`Menu is rendered correctly when open 1`] = `
   transition: opacity 2s;
   width: 0;
   z-index: 10;
+  min-width: 10em;
+  opacity: 1;
 }
 
-.c9 {
+.c6 {
   color: black;
   font-weight: 600;
   cursor: pointer;
@@ -142,11 +141,11 @@ exports[`Menu is rendered correctly when open 1`] = `
   white-space: nowrap;
 }
 
-.c9:hover {
+.c6:hover {
   color: var(--color-primary);
 }
 
-.c10 {
+.c7 {
   color: #444;
   font-weight: inherit;
   cursor: pointer;
@@ -155,72 +154,10 @@ exports[`Menu is rendered correctly when open 1`] = `
   white-space: nowrap;
 }
 
-.c10:hover {
-  color: var(--color-primary);
-}
-
-.gQZhbO .c2 {
-  border-left: 2px solid lightgrey;
-  color: inherit;
-}
-
-.gQZhbO .c2 .sc-bxivhb {
-  color: #aaa;
-}
-
-.gQZhbO .c2:hover {
-  border-left: 2px solid var(--color-primary);
-  color: var(--color-primary);
-}
-
-.gQZhbO .c2:hover .sc-bxivhb {
-  color: var(--color-primary);
-}
-
-.gQZhbO .c4 {
-  -webkit-transform: scaleX(2.2) scaleY(1.2);
-  -ms-transform: scaleX(2.2) scaleY(1.2);
-  transform: scaleX(2.2) scaleY(1.2);
-}
-
-.gQZhbO .c7 {
-  min-width: 0;
-  opacity: 0;
-}
-
-.c0 {
-  font-size: 1em;
-}
-
-.c0 .c2 {
-  border-left: 2px solid var(--color-primary);
+.c7:hover {
   color: var(--color-primary);
 }
 
-.c0 .c2 .sc-bxivhb {
-  color: #aaa;
-}
-
-.c0 .c2:hover {
-  border-left: 2px solid var(--color-primary);
-  color: var(--color-primary);
-}
-
-.c0 .c2:hover .sc-bxivhb {
-  color: var(--color-primary);
-}
-
-.c0 .c4 {
-  -webkit-transform: scaleX(2.2) scaleY(-1.2);
-  -ms-transform: scaleX(2.2) scaleY(-1.2);
-  transform: scaleX(2.2) scaleY(-1.2);
-}
-
-.c0 .c7 {
-  min-width: 10em;
-  opacity: 1;
-}
-
 <div
   className="c0"
   open={true}
@@ -233,29 +170,32 @@ exports[`Menu is rendered correctly when open 1`] = `
       className=""
     >
       <button
-        className="c2 c3"
+        className="c2"
         onClick={[Function]}
+        open={true}
         type="button"
       >
         <span>
           Foo
         </span>
         <span
-          className="c4 c5"
+          className="c3"
+          open={true}
         >
           ▼
         </span>
       </button>
     </div>
     <div
-      className="c6"
+      className="c4"
     >
       <div
-        className="c7 c8"
+        className="c5"
+        open={true}
       >
         <div
           aria-selected={true}
-          className="c9"
+          className="c6"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"
@@ -265,7 +205,7 @@ exports[`Menu is rendered correctly when open 1`] = `
         </div>
         <div
           aria-selected={false}
-          className="c10"
+          className="c7"
           onClick={[Function]}
           onKeyPress={[Function]}
           role="option"