Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/my-joy-beta/src/app.js
View File

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

28
packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/name.spec.js.snap
View File

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

3
packages/my-joy-beta/src/components/create-instance/name.js
View File

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

388
packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/toolbar.spec.js.snap
View File

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

28
packages/my-joy-beta/src/components/instances/metadata.js
View File

@ -12,34 +12,6 @@ import {
import KeyValue from '@components/key-value'; 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 => ( export const AddForm = props => (
<KeyValue {...props} method="add" input="textarea" type="metadata" expanded /> <KeyValue {...props} method="add" input="textarea" type="metadata" expanded />
); );

4
packages/my-joy-beta/src/components/instances/toolbar.js
View File

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

11054
packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/list.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

1410
packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap
View File

File diff suppressed because it is too large Load Diff

1556
packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
View File

File diff suppressed because it is too large Load Diff