fix(my-joy-beta): create instance - metadata ui improvements

fixes #1010

packages/my-joy-beta/src/components/key-value.js

@@ -13,6 +13,7 @@ import Editor from 'joyent-ui-toolkit/dist/es/editor';
 
 import {
   Message,
+  ArrowIcon,
   MessageDescription,
   H4,
   MessageTitle,
@@ -56,7 +57,7 @@ class ValueTextareaField extends PureComponent {
         component={props => <Editor {...props} mode="sh" />}
       />
     ) : (
-      <Textarea resize="vertical" disabled={submitting} fluid />
+      <Textarea monospace resize="vertical" disabled={submitting} fluid />
     );
   }
 }
@@ -152,25 +153,37 @@ export const KeyValue = ({
         onClick={handleHeaderClick}
       >
         <PaddingMaxWidth left={3} right={3}>
-          <CardHeaderMeta>
+          <Flex alignCenter justifyBetween full>
-            {method === 'add' || method === 'create' ? (
+            <CardHeaderMeta>
-              <H4>{`${titleCase(method)} ${type}`}</H4>
+              {method === 'add' || method === 'create' ? (
-            ) : (
+                <H4>{`${titleCase(method)} ${type}`}</H4>
-              <CollapsedKeyValue>
+              ) : (
-                {customHeader ? customHeader : null}
+                <CollapsedKeyValue>
-                {initialValues.name ? (
+                  {customHeader ? customHeader : null}
-                  <Fragment>
+                  {initialValues.name ? (
-                    {expanded ? (
+                    <Fragment>
-                      <span>{`${initialValues.name}: `}</span>
+                      {expanded ? (
-                    ) : (
+                        <span>{`${initialValues.name}${type === 'metadata'
-                      <b>{`${initialValues.name}: `}</b>
+                          ? '-'
-                    )}
+                          : ':'}`}</span>
-                    <span>{initialValues.value}</span>
+                      ) : (
-                  </Fragment>
+                        <b>{`${initialValues.name}${type === 'metadata'
-                ) : null}
+                          ? '-'
-              </CollapsedKeyValue>
+                          : ':'}`}</b>
-            )}
+                      )}
-          </CardHeaderMeta>
+                      <span>{initialValues.value}</span>
+                    </Fragment>
+                  ) : null}
+                </CollapsedKeyValue>
+              )}
+            </CardHeaderMeta>
+            {method === 'edit' ? (
+              <ArrowIcon
+                onClick={onToggleExpanded}
+                direction={expanded ? 'up' : 'down'}
+              />
+            ) : null}
+          </Flex>
         </PaddingMaxWidth>
       </CardHeader>
       {expanded ? (

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/tag.spec.js.snap

@@ -416,7 +416,7 @@ Array [
         className="c1"
     />
 </div>,
-  .c19 {
+  .c20 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -429,30 +429,30 @@ Array [
   min-width: 7.5rem;
 }
 
-.c19::-moz-focus-inner,
+.c20::-moz-focus-inner,
-.c19[type='button']::-moz-focus-inner,
+.c20[type='button']::-moz-focus-inner,
-.c19[type='reset']::-moz-focus-inner,
+.c20[type='reset']::-moz-focus-inner,
-.c19[type='submit']::-moz-focus-inner {
+.c20[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c19:-moz-focusring,
+.c20:-moz-focusring,
-.c19[type='button']:-moz-focusring,
+.c20[type='button']:-moz-focusring,
-.c19[type='reset']:-moz-focusring,
+.c20[type='reset']:-moz-focusring,
-.c19[type='submit']:-moz-focusring {
+.c20[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c19 + button {
+.c20 + button {
   margin-left: 0.375rem;
 }
 
-.c18 {
+.c19 {
   display: inline-block;
 }
 
-.c17 {
+.c18 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -498,50 +498,50 @@ Array [
   margin: 0;
 }
 
-.c17:focus {
+.c18:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c17:hover {
+.c18:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c17:active,
+.c18:active,
-.c17:active:hover,
+.c18:active:hover,
-.c17:active:focus {
+.c18:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c17[disabled] {
+.c18[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c17:focus {
+.c18:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c17:hover {
+.c18:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c17:active,
+.c18:active,
-.c17:active:hover,
+.c18:active:hover,
-.c17:active:focus {
+.c18:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c20 {
+.c21 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -588,50 +588,50 @@ Array [
   margin: 0;
 }
 
-.c20:focus {
+.c21:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c20:hover {
+.c21:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c20:active,
+.c21:active,
-.c20:active:hover,
+.c21:active:hover,
-.c20:active:focus {
+.c21:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c20[disabled] {
+.c21[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c20:focus {
+.c21:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c20:hover {
+.c21:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c20:active,
+.c21:active,
-.c20:active:hover,
+.c21:active:hover,
-.c20:active:focus {
+.c21:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c22 {
+.c23 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -690,75 +690,75 @@ Array [
   float: right;
 }
 
-.c22:focus {
+.c23:focus {
   outline: 0;
   text-decoration: none;
   background-color: rgb(59,70,204);
   border-color: rgb(45,56,132);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c22:active,
+.c23:active,
-.c22:active:hover,
+.c23:active:hover,
-.c22:active:focus {
+.c23:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c22[disabled] {
+.c23[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c22:focus {
+.c23:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c22:active,
+.c23:active,
-.c22:active:hover,
+.c23:active:hover,
-.c22:active:focus {
+.c23:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c22:focus {
+.c23:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(210,67,58);
 }
 
-.c22:hover {
+.c23:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(210,67,58);
 }
 
-.c22:active,
+.c23:active,
-.c22:active:hover,
+.c23:active:hover,
-.c22:active:focus {
+.c23:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(210,67,58);
 }
 
-.c22 svg + span {
+.c23 svg + span {
   margin-left: 0.75rem;
 }
 
-.c22 svg {
+.c23 svg {
   max-height: 1.125rem;
 }
 
-.c11 {
+.c12 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -771,7 +771,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c13 {
+.c14 {
   font-size: 0.9375rem;
   font-style: normal;
   font-stretch: normal;
@@ -784,26 +784,7 @@ Array [
   margin-left: 1.75rem;
 }
 
-.c24 {
+.c25 {
-  box-sizing: border-box;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  margin-right: -0.5rem;
-  margin-left: -0.5rem;
-}
-
-.c15 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -824,14 +805,24 @@ Array [
 
 .c16 {
   box-sizing: border-box;
-  -webkit-flex: 0 0 auto;
+  display: -webkit-box;
-  -ms-flex: 0 0 auto;
+  display: -webkit-flex;
-  flex: 0 0 auto;
+  display: -ms-flexbox;
-  padding-right: 0.5rem;
+  display: flex;
-  padding-left: 0.5rem;
+  -webkit-flex: 0 1 auto;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
 }
 
-.c21 {
+.c17 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -840,7 +831,16 @@ Array [
   padding-left: 0.5rem;
 }
 
-.c5 {
+.c22 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.5rem;
+  padding-left: 0.5rem;
+}
+
+.c6 {
   color: rgba(73,73,73,1);
   font-weight: 600;
   line-height: 1.5rem;
@@ -848,20 +848,20 @@ Array [
   margin: 0;
 }
 
-.c5 + p,
+.c6 + p,
-.c5 + small,
+.c6 + small,
-.c5 + h1,
+.c6 + h1,
-.c5 + h2,
+.c6 + h2,
-.c5 + label,
+.c6 + label,
-.c5 + h3,
+.c6 + h3,
-.c5 + h4,
+.c6 + h4,
-.c5 + h5,
+.c6 + h5,
-.c5 + div,
+.c6 + div,
-.c5 + span {
+.c6 + span {
   margin-top: 0.75rem;
 }
 
-.c23 {
+.c24 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -931,7 +931,7 @@ Array [
   margin-top: 0;
 }
 
-.c4 {
+.c5 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -989,7 +989,7 @@ Array [
   color: inherit;
 }
 
-.c6 {
+.c7 {
   box-sizing: content-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -1025,15 +1025,15 @@ Array [
   background-color: transparent;
 }
 
-.c6 > [name='card']:not(:last-child) {
+.c7 > [name='card']:not(:last-child) {
   margin-bottom: 0.8125rem;
 }
 
-.c6 > [name='card']:last-child {
+.c7 > [name='card']:last-child {
   margin-bottom: 0.4375rem;
 }
 
-.c10 {
+.c11 {
   display: inline-block;
   margin: 0;
   padding: 0;
@@ -1049,7 +1049,7 @@ Array [
   width: 100%;
 }
 
-.c12 {
+.c13 {
   box-sizing: border-box;
   width: 18.75rem;
   height: 3rem;
@@ -1073,46 +1073,46 @@ Array [
   outline: 0;
 }
 
-.c12::-webkit-input-placeholder {
+.c13::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12::-moz-placeholder {
+.c13::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:-ms-input-placeholder {
+.c13:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:invalid {
+.c13:invalid {
   box-shadow: none;
 }
 
-.c12:disabled {
+.c13:disabled {
   background-color: rgb(250,250,250);
   color: rgb(216,216,216);
   cursor: not-allowed;
 }
 
-.c12:disabled::-webkit-input-placeholder {
+.c13:disabled::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled::-moz-placeholder {
+.c13:disabled::-moz-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:disabled:-ms-input-placeholder {
+.c13:disabled:-ms-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
 
-.c12:focus {
+.c13:focus {
   border-color: rgb(59,70,204);
   outline: 0;
 }
 
-.c9 {
+.c10 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1131,7 +1131,7 @@ Array [
   flex-basis: auto;
 }
 
-.c14 {
+.c15 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1155,11 +1155,44 @@ Array [
   padding-left: 1rem;
 }
 
-.c7 {
+.c8 {
   padding: 1rem;
 }
 
-.c8 {
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  -webkit-flex-basis: 100%;
+  -ms-flex-preferred-size: 100%;
+  flex-basis: 100%;
+}
+
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1194,7 +1227,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1203,7 +1236,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c15 {
+  .c16 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1212,7 +1245,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c16 {
+  .c17 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1222,7 +1255,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c21 {
+  .c22 {
     display: none;
   }
 }
@@ -1246,93 +1279,97 @@ Array [
             >
                 <div
                     className="c4"
-                    disabled={false}
-                    name="card-header-meta"
                 >
-                    <h4
+                    <div
                         className="c5"
+                        disabled={false}
+                        name="card-header-meta"
                     >
-                        Add tag
+                        <h4
-                    </h4>
+                            className="c6"
+                        >
+                            Add tag
+                        </h4>
+                    </div>
                 </div>
             </div>
         </div>
         <div
-            className="c6"
+            className="c7"
             name="card-outlet"
         >
             <div
-                className="c7"
+                className="c8"
             >
                 <div
-                    className="c8"
+                    className="c9"
                 >
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="name"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="k"
                             >
                                 Tag
                                  key
                             </label>
                             <input
-                                className="c12"
+                                className="c13"
                                 disabled={false}
                                 id="k"
                                 onBlur={null}
                             />
                             <label
-                                className="c13"
+                                className="c14"
                             />
                         </div>
                     </div>
                     <div
-                        className="c14"
+                        className="c15"
                     />
                     <div
-                        className="c9"
+                        className="c10"
                     >
                         <div
-                            className="baseline-jVaZNU kXgQxt c10"
+                            className="baseline-jVaZNU kXgQxt c11"
                             name="value"
                             role="group"
                             style={undefined}
                         >
                             <label
-                                className="c11"
+                                className="c12"
                                 htmlFor="l"
                             >
                                 Tag
                                  value
                             </label>
                             <input
-                                className="c12"
+                                className="c13"
                                 disabled={false}
                                 id="l"
                                 onBlur={null}
                             />
                             <label
-                                className="c13"
+                                className="c14"
                             />
                         </div>
                     </div>
                 </div>
                 <div
-                    className="c15"
+                    className="c16"
                 >
                     <div
-                        className="c16"
+                        className="c17"
                     >
                         <button
-                            className="c17 c18 c19"
+                            className="c18 c19 c20"
                             disabled={false}
                             href=""
                             onClick={[Function]}
@@ -1343,7 +1380,7 @@ Array [
                             </span>
                         </button>
                         <button
-                            className="c20 c18 c19"
+                            className="c21 c19 c20"
                             disabled={true}
                             href=""
                             type="submit"
@@ -1354,10 +1391,10 @@ Array [
                         </button>
                     </div>
                     <div
-                        className="c21"
+                        className="c22"
                     >
                         <button
-                            className="c22 c18 c19"
+                            className="c23 c19 c20"
                             disabled={false}
                             href=""
                             icon={true}
@@ -1392,7 +1429,7 @@ Array [
         </div>
     </div>
     <div
-        className="c23 c24"
+        className="c24 c25"
         height="0.8125rem"
     />
 </form>,

packages/ui-toolkit/src/button/__tests___/__snapshots__/button.spec.js.snap

@@ -312,20 +312,22 @@ exports[`Button Error Button 1`] = `
 }
 
 .c0:focus {
+  color: rgb(205,37,27);
   background-color: rgb(255,255,255);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 .c0:hover {
-  background-color: rgb(247,247,247);
+  color: rgb(205,37,27);
-  border-color: rgb(210,67,58);
+  background-color: rgb(255,255,255);
+  border-color: rgb(205,37,27);
 }
 
 .c0:active,
 .c0:active:hover,
 .c0:active:focus {
-  background-color: rgb(230,230,230);
+  background-color: rgba(210,67,58,0.1);
-  border-color: rgb(210,67,58);
+  border-color: rgb(205,37,27);
 }
 
 <a

packages/ui-toolkit/src/button/index.js

@@ -167,20 +167,22 @@ const Button = styled(BaseButton)`
     border-color: ${props => props.theme.red};
 
     &:focus {
+      color: ${props => props.theme.redDark};
       background-color: ${props => props.theme.white};
-      border-color: ${props => props.theme.red};
+      border-color: ${props => props.theme.redDark};
     }
 
     &:hover {
-      background-color: ${props => props.theme.whiteHover};
+      color: ${props => props.theme.redDark};
-      border-color: ${props => props.theme.red};
+      background-color: ${props => props.theme.white};
+      border-color: ${props => props.theme.redDark};
     }
 
     &:active,
     &:active:hover,
     &:active:focus {
-      background-color: ${props => props.theme.whiteActive};
+      background-color: rgba(210, 67, 58, 0.1);
-      border-color: ${props => props.theme.red};
+      border-color: ${props => props.theme.redDark};
     }
   `};