fix(my-joy-beta): remove artifact above toolbar cta

fixes #1047
This commit is contained in:
Sérgio Ramos 2018-01-25 15:44:03 +00:00 committed by Sérgio Ramos
parent 31d88baf44
commit 598ab0d071
9 changed files with 7438 additions and 7430 deletions

View File

@ -51,7 +51,8 @@ const fullTheme = {
7: remcalc(42),
8: remcalc(48),
9: remcalc(54),
10: remcalc(60)
10: remcalc(60),
'14px': remcalc(14)
}
};

View File

@ -2,6 +2,7 @@
exports[`renders <Name /> without throwing 1`] = `
.c6 {
margin-top: undefined;
margin-left: 0.25rem;
}
@ -397,12 +398,6 @@ exports[`renders <Name /> without throwing 1`] = `
<div
className="c1"
>
<label
className="c3"
htmlFor=""
>
</label>
<div
className="c6"
>
@ -457,6 +452,7 @@ exports[`renders <Name /> without throwing 1`] = `
exports[`renders <Name expanded /> without throwing 1`] = `
.c6 {
margin-top: undefined;
margin-left: 0.25rem;
}
@ -852,12 +848,6 @@ exports[`renders <Name expanded /> without throwing 1`] = `
<div
className="c1"
>
<label
className="c3"
htmlFor=""
>
</label>
<div
className="c6"
>
@ -912,6 +902,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
exports[`renders <Name name="test" /> without throwing 1`] = `
.c6 {
margin-top: undefined;
margin-left: 0.25rem;
}
@ -1307,12 +1298,6 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
<div
className="c1"
>
<label
className="c3"
htmlFor=""
>
</label>
<div
className="c6"
>
@ -1367,6 +1352,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
exports[`renders <Name pristine={false} /> without throwing 1`] = `
.c6 {
margin-top: undefined;
margin-left: 0.25rem;
}
@ -1762,12 +1748,6 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
<div
className="c1"
>
<label
className="c3"
htmlFor=""
>
</label>
<div
className="c6"
>

View File

@ -31,8 +31,7 @@ export default ({
</FormGroup>
</FlexItem>
<FlexItem>
<FormLabel>&#8291;</FormLabel>
<Margin left={1}>
<Margin left={1} top="14px">
<Button
type="button"
marginTop={remcalc(8)}

View File

@ -1,7 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Toolbar /> without throwing 1`] = `
.c9 {
.c7 {
margin-top: undefined;
}
.c10 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -14,30 +18,30 @@ exports[`renders <Toolbar /> without throwing 1`] = `
min-width: 7.5rem;
}
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
.c10::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
.c10:-moz-focusring,
.c10[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c9 + button {
.c10 + button {
margin-left: 0.375rem;
}
.c8 {
.c9 {
display: inline-block;
}
.c7 {
.c8 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -88,37 +92,37 @@ exports[`renders <Toolbar /> without throwing 1`] = `
max-width: 100%;
}
.c7:focus {
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c7:hover {
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c7[disabled] {
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c7 svg + span {
.c8 svg + span {
margin-left: 0.75rem;
}
.c7 svg {
.c8 svg {
max-height: 1.125rem;
}
@ -345,14 +349,11 @@ exports[`renders <Toolbar /> without throwing 1`] = `
role="group"
style={undefined}
>
<label
className="c3"
htmlFor="m"
<div
className="c7"
>
</label>
<button
className="c7 c8 c9"
className="c8 c9 c10"
disabled={false}
href=""
icon={true}
@ -363,11 +364,16 @@ exports[`renders <Toolbar /> without throwing 1`] = `
</button>
</div>
</div>
</div>
</div>
`;
exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
.c9 {
.c7 {
margin-top: undefined;
}
.c10 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -380,30 +386,30 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
min-width: 7.5rem;
}
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
.c10::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
.c10:-moz-focusring,
.c10[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c9 + button {
.c10 + button {
margin-left: 0.375rem;
}
.c8 {
.c9 {
display: inline-block;
}
.c7 {
.c8 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -454,37 +460,37 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
max-width: 100%;
}
.c7:focus {
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c7:hover {
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c7[disabled] {
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c7 svg + span {
.c8 svg + span {
margin-left: 0.75rem;
}
.c7 svg {
.c8 svg {
max-height: 1.125rem;
}
@ -711,14 +717,11 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
role="group"
style={undefined}
>
<label
className="c3"
htmlFor="y"
<div
className="c7"
>
</label>
<button
className="c7 c8 c9"
className="c8 c9 c10"
disabled={false}
href=""
icon={true}
@ -729,11 +732,16 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
</button>
</div>
</div>
</div>
</div>
`;
exports[`renders <Toolbar actionable /> without throwing 1`] = `
.c9 {
.c7 {
margin-top: undefined;
}
.c10 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -746,30 +754,30 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
min-width: 7.5rem;
}
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
.c10::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
.c10:-moz-focusring,
.c10[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c9 + button {
.c10 + button {
margin-left: 0.375rem;
}
.c8 {
.c9 {
display: inline-block;
}
.c7 {
.c8 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -825,54 +833,54 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
max-width: 100%;
}
.c7:focus {
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c7:hover {
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c7[disabled] {
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c7:focus {
.c8:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c7:hover {
.c8:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c7 svg + span {
.c8 svg + span {
margin-left: 0.75rem;
}
.c7 svg {
.c8 svg {
max-height: 1.125rem;
}
@ -1099,14 +1107,11 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
role="group"
style={undefined}
>
<label
className="c3"
htmlFor="B"
<div
className="c7"
>
</label>
<button
className="c7 c8 c9"
className="c8 c9 c10"
disabled={true}
href=""
icon={true}
@ -1117,11 +1122,16 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
</button>
</div>
</div>
</div>
</div>
`;
exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
.c9 {
.c7 {
margin-top: undefined;
}
.c10 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -1134,30 +1144,30 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
min-width: 7.5rem;
}
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
.c10::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
.c10:-moz-focusring,
.c10[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c9 + button {
.c10 + button {
margin-left: 0.375rem;
}
.c8 {
.c9 {
display: inline-block;
}
.c7 {
.c8 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -1208,37 +1218,37 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
max-width: 100%;
}
.c7:focus {
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c7:hover {
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c7[disabled] {
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c7 svg + span {
.c8 svg + span {
margin-left: 0.75rem;
}
.c7 svg {
.c8 svg {
max-height: 1.125rem;
}
@ -1465,14 +1475,11 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
role="group"
style={undefined}
>
<label
className="c3"
htmlFor="E"
<div
className="c7"
>
</label>
<button
className="c7 c8 c9"
className="c8 c9 c10"
disabled={false}
href=""
icon={true}
@ -1483,11 +1490,16 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
</button>
</div>
</div>
</div>
</div>
`;
exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
.c9 {
.c7 {
margin-top: undefined;
}
.c10 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -1500,30 +1512,30 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
min-width: 7.5rem;
}
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
.c10::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
.c10:-moz-focusring,
.c10[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c9 + button {
.c10 + button {
margin-left: 0.375rem;
}
.c8 {
.c9 {
display: inline-block;
}
.c7 {
.c8 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -1574,37 +1586,37 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
max-width: 100%;
}
.c7:focus {
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c7:hover {
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c7[disabled] {
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c7 svg + span {
.c8 svg + span {
margin-left: 0.75rem;
}
.c7 svg {
.c8 svg {
max-height: 1.125rem;
}
@ -1831,14 +1843,11 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
role="group"
style={undefined}
>
<label
className="c3"
htmlFor="p"
<div
className="c7"
>
</label>
<button
className="c7 c8 c9"
className="c8 c9 c10"
disabled={false}
href=""
icon={true}
@ -1849,11 +1858,16 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
</button>
</div>
</div>
</div>
</div>
`;
exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
.c9 {
.c7 {
margin-top: undefined;
}
.c10 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -1866,30 +1880,30 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
min-width: 7.5rem;
}
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
.c10::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
.c10:-moz-focusring,
.c10[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c9 + button {
.c10 + button {
margin-left: 0.375rem;
}
.c8 {
.c9 {
display: inline-block;
}
.c7 {
.c8 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -1940,37 +1954,37 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
max-width: 100%;
}
.c7:focus {
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c7:hover {
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c7[disabled] {
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c7 svg + span {
.c8 svg + span {
margin-left: 0.75rem;
}
.c7 svg {
.c8 svg {
max-height: 1.125rem;
}
@ -2197,14 +2211,11 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
role="group"
style={undefined}
>
<label
className="c3"
htmlFor="s"
<div
className="c7"
>
</label>
<button
className="c7 c8 c9"
className="c8 c9 c10"
disabled={false}
href=""
icon={true}
@ -2215,11 +2226,16 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
</button>
</div>
</div>
</div>
</div>
`;
exports[`renders <Toolbar searchable /> without throwing 1`] = `
.c9 {
.c7 {
margin-top: undefined;
}
.c10 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
@ -2232,30 +2248,30 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
min-width: 7.5rem;
}
.c9::-moz-focus-inner,
.c9[type='button']::-moz-focus-inner,
.c9[type='reset']::-moz-focus-inner,
.c9[type='submit']::-moz-focus-inner {
.c10::-moz-focus-inner,
.c10[type='button']::-moz-focus-inner,
.c10[type='reset']::-moz-focus-inner,
.c10[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c9:-moz-focusring,
.c9[type='button']:-moz-focusring,
.c9[type='reset']:-moz-focusring,
.c9[type='submit']:-moz-focusring {
.c10:-moz-focusring,
.c10[type='button']:-moz-focusring,
.c10[type='reset']:-moz-focusring,
.c10[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c9 + button {
.c10 + button {
margin-left: 0.375rem;
}
.c8 {
.c9 {
display: inline-block;
}
.c7 {
.c8 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
@ -2306,37 +2322,37 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
max-width: 100%;
}
.c7:focus {
.c8:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c7:hover {
.c8:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c7:active,
.c7:active:hover,
.c7:active:focus {
.c8:active,
.c8:active:hover,
.c8:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c7[disabled] {
.c8[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c7 svg + span {
.c8 svg + span {
margin-left: 0.75rem;
}
.c7 svg {
.c8 svg {
max-height: 1.125rem;
}
@ -2578,14 +2594,11 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
role="group"
style={undefined}
>
<label
className="c3"
htmlFor="v"
<div
className="c7"
>
</label>
<button
className="c7 c8 c9"
className="c8 c9 c10"
disabled={false}
href=""
icon={true}
@ -2596,5 +2609,6 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
</button>
</div>
</div>
</div>
</div>
`;

View File

@ -12,34 +12,6 @@ import {
import KeyValue from '@components/key-value';
export const MenuForm = ({ searchable, onAdd }) => (
<form>
<Row>
<Col xs={7} sm={5}>
<FormGroup name="filter" field={Field} fluid>
<FormLabel>Filter</FormLabel>
<Input onBlur={null} disabled={!searchable} fluid />
</FormGroup>
</Col>
<Col xs={5} sm={7}>
<FormGroup right>
<FormLabel>&#8291;</FormLabel>
<Button
type="button"
disabled={!searchable}
onClick={onAdd}
small
icon
fluid
>
Add metadata
</Button>
</FormGroup>
</Col>
</Row>
</form>
);
export const AddForm = props => (
<KeyValue {...props} method="add" input="textarea" type="metadata" expanded />
);

View File

@ -1,5 +1,6 @@
import React from 'react';
import { Field } from 'redux-form';
import { Margin } from 'styled-components-spacing';
import remcalc from 'remcalc';
import {
@ -29,7 +30,7 @@ export const Toolbar = ({
</Col>
<Col xs={5} sm={7}>
<FormGroup right>
<FormLabel>&#8291;</FormLabel>
<Margin top="14px">
<Button
type={onActionClick ? 'button' : 'submit'}
disabled={!actionable}
@ -39,6 +40,7 @@ export const Toolbar = ({
>
{actionLabel}
</Button>
</Margin>
</FormGroup>
</Col>
</Row>