diff --git a/packages/ui/src/atoms/Menu.js b/packages/ui/src/atoms/Menu.js
index 1c017b75887c1fe2f4053c29c3dd4a05d63b7601..2203f7f5fa9fe501791a95aff68a58c073b49003 100644
--- a/packages/ui/src/atoms/Menu.js
+++ b/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}
diff --git a/packages/ui/test/__snapshots__/Menu.test.js.snap b/packages/ui/test/__snapshots__/Menu.test.js.snap
index 7b4ffde16ff0a2ff5002a64a988c6a3931582e2c..f5a6d6fbce5d49a9979c11eea1974d231acbdfef 100644
--- a/packages/ui/test/__snapshots__/Menu.test.js.snap
+++ b/packages/ui/test/__snapshots__/Menu.test.js.snap
@@ -1,64 +1,45 @@
// 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"