feat(my-joy-beta): add validation

fixes #1244

packages/my-joy-beta/src/components/__tests__/__snapshots__/cns.spec.js.snap

@@ -5,7 +5,8 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c6 {
+.c7 {
+  margin-top: 1.3125rem;
   margin-left: 0.75rem;
 }
 
@@ -30,10 +31,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
 }
 
 .c1 {
@@ -53,7 +50,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   display: block;
 }
 
-.c9 {
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -66,36 +63,36 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   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;
   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;
 }
 
+.c10 + button,
+.c10 + a {
+  margin-left: 0.375rem;
+}
+
+.c9 {
+  display: inline-block;
+}
+
 .c9 + button,
 .c9 + a {
   margin-left: 0.375rem;
 }
 
 .c8 {
-  display: inline-block;
-}
-
-.c8 + button,
-.c8 + a {
-  margin-left: 0.375rem;
-}
-
-.c7 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -135,7 +132,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -143,21 +140,21 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   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,
+.c8:active,
-.c7:active:hover,
+.c8:active:hover,
-.c7:active:focus {
+.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;
 }
@@ -176,7 +173,21 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c11 {
+.c6 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  width: 18.75rem;
+}
+
+.c12 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -195,7 +206,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c10 {
+.c11 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -227,8 +238,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -237,6 +246,13 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c5:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c5::-webkit-input-placeholder {
@@ -273,11 +289,6 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c5:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <form
   onSubmit={undefined}
 >
@@ -311,6 +322,9 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
             placeholder="Example: mySQLdb"
             required={true}
           />
+          <label
+            className="c6"
+          />
         </div>
       </div>
     </div>
@@ -318,17 +332,18 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
       className="c1"
     >
       <div
-        className="c6"
+        className="c7"
       >
         <button
-          className="c7 c8 c9"
+          className="c8 c9 c10"
+          disabled={undefined}
           href=""
           type="submit"
         >
           Add
         </button>
         <div
-          className="c10 c11"
+          className="c11 c12"
           height="0.25rem"
         />
       </div>
@@ -342,7 +357,8 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   margin-top: 0.1875rem;
 }
 
-.c6 {
+.c7 {
+  margin-top: 1.3125rem;
   margin-left: 0.75rem;
 }
 
@@ -367,10 +383,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -webkit-align-items: flex-end;
-  -webkit-box-align: flex-end;
-  -ms-flex-align: flex-end;
-  align-items: flex-end;
 }
 
 .c1 {
@@ -390,7 +402,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   display: block;
 }
 
-.c9 {
+.c10 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -403,36 +415,36 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   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;
   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;
 }
 
+.c10 + button,
+.c10 + a {
+  margin-left: 0.375rem;
+}
+
+.c9 {
+  display: inline-block;
+}
+
 .c9 + button,
 .c9 + a {
   margin-left: 0.375rem;
 }
 
 .c8 {
-  display: inline-block;
-}
-
-.c8 + button,
-.c8 + a {
-  margin-left: 0.375rem;
-}
-
-.c7 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -470,9 +482,14 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   background-color: rgb(59,70,204);
   border-radius: 0.25rem;
   border: solid 0.0625rem rgb(45,56,132);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: rgb(216,216,216);
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
 }
 
-.c7:focus {
+.c8:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -480,25 +497,42 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   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,
+.c8:active,
-.c7:active:hover,
+.c8:active:hover,
-.c7:active:focus {
+.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;
 }
 
+.c8:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(216,216,216);
+}
+
+.c8:hover {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
+.c8:active,
+.c8:active:hover,
+.c8:active:focus {
+  background-color: rgb(250,250,250);
+  border-color: rgb(250,250,250);
+}
+
 .c3 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
@@ -513,7 +547,21 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   font-size: 0.8125rem;
 }
 
-.c11 {
+.c6 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  width: 18.75rem;
+}
+
+.c12 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -532,7 +580,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   margin-left: -0.625rem;
 }
 
-.c10 {
+.c11 {
   background-color: rgb(216,216,216);
   margin: 0;
   background-color: transparent;
@@ -564,8 +612,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -574,6 +620,13 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c5:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c5::-webkit-input-placeholder {
@@ -610,11 +663,6 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c5:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <form
   onSubmit={undefined}
 >
@@ -648,6 +696,9 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
             placeholder="Example: mySQLdb"
             required={true}
           />
+          <label
+            className="c6"
+          />
         </div>
       </div>
     </div>
@@ -655,17 +706,18 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
       className="c1"
     >
       <div
-        className="c6"
+        className="c7"
       >
         <button
-          className="c7 c8 c9"
+          className="c8 c9 c10"
+          disabled={true}
           href=""
           type="submit"
         >
           Add
         </button>
         <div
-          className="c10 c11"
+          className="c11 c12"
           height="0.25rem"
         />
       </div>
@@ -809,12 +861,6 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgb(250,250,250);
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -823,6 +869,17 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+}
+
+.c8:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c8::-webkit-input-placeholder {
@@ -887,11 +944,6 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   color: rgba(73,73,73,1);
 }
 
-.c8:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c2 {
   padding-right: 0.75rem;
   margin-right: 0.75rem;

packages/my-joy-beta/src/components/__tests__/__snapshots__/network.spec.js.snap

@@ -4990,8 +4990,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  max-width: 22.1875rem;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -5000,10 +4998,17 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  max-width: 22.1875rem;
   width: 22.1875rem;
   max-width: 100%;
 }
 
+.c31:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
+}
+
 .c31::-webkit-input-placeholder {
   color: rgba(73,73,73,0.5);
 }
@@ -5054,11 +5059,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
   color: rgba(73,73,73,1);
 }
 
-.c31:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 @media only screen and (min-width:0em) {
   .c1 {
     -webkit-flex-basis: 100%;

packages/my-joy-beta/src/components/cns.js

@@ -19,7 +19,8 @@ import {
   FormLabel,
   PublicIcon,
   PrivateIcon,
-  CopiableField
+  CopiableField,
+  FormMeta
 } from 'joyent-ui-toolkit';
 
 import Tag from '@components/tags';
@@ -79,10 +80,11 @@ export const AddServiceForm = ({
   handleSubmit,
   submitting,
   disabled,
-  pristine
+  pristine,
+  invalid
 }) => (
   <form onSubmit={handleSubmit}>
-    <Flex alignEnd wrap>
+    <Flex wrap>
       <FlexItem>
         <FormGroup name="name" field={Field}>
           <FormLabel>Attach to new CNS service name</FormLabel>
@@ -94,12 +96,18 @@ export const AddServiceForm = ({
               required
               disabled={disabled || submitting}
             />
+            <FormMeta />
           </Margin>
         </FormGroup>
       </FlexItem>
       <FlexItem>
-        <Margin left={2}>
+        <Margin top={3.5} left={2}>
-          <Button type="submit" loading={submitting} inline>
+          <Button
+            type="submit"
+            disabled={pristine || invalid}
+            loading={submitting}
+            inline
+          >
             Add
           </Button>
           <Divider height={remcalc(4)} transparent />

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/affinity.spec.js.snap

@@ -178,6 +178,20 @@ exports[`renders <Rule/> without throwing 1`] = `
   display: none;
 }
 
+.c16 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  width: 18.75rem;
+}
+
 .c2 {
   color: rgba(73,73,73,1);
   font-weight: normal;
@@ -212,6 +226,14 @@ exports[`renders <Rule/> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
   border: none;
   border-bottom: 0.0625rem solid rgba(73,73,73,1);
   border-radius: 0;
@@ -226,13 +248,10 @@ exports[`renders <Rule/> without throwing 1`] = `
   min-height: 0;
   max-width: 22.1875rem;
   text-overflow: ellipsis;
-  font-size: 0.9375rem;
+}
-  line-height: normal !important;
+
-  font-style: normal;
+.c15:focus {
-  font-stretch: normal;
+  border-color: rgb(59,70,204);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   outline: 0;
 }
 
@@ -270,11 +289,6 @@ exports[`renders <Rule/> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c15:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c4 {
   position: relative;
   display: -webkit-inline-box;
@@ -354,6 +368,14 @@ exports[`renders <Rule/> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
   border: none;
   border-bottom: 0.0625rem solid rgba(73,73,73,1);
   border-radius: 0;
@@ -370,13 +392,10 @@ exports[`renders <Rule/> without throwing 1`] = `
   width: 4.125rem;
   max-width: 4.125rem;
   text-overflow: ellipsis;
-  font-size: 0.9375rem;
+}
-  line-height: normal !important;
+
-  font-style: normal;
+.c6:focus {
-  font-stretch: normal;
+  border-color: rgb(59,70,204);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   outline: 0;
 }
 
@@ -414,11 +433,6 @@ exports[`renders <Rule/> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c6:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c8 {
   box-sizing: border-box;
   width: 18.75rem;
@@ -429,6 +443,14 @@ exports[`renders <Rule/> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
   border: none;
   border-bottom: 0.0625rem solid rgba(73,73,73,1);
   border-radius: 0;
@@ -445,13 +467,10 @@ exports[`renders <Rule/> without throwing 1`] = `
   width: 6.25rem;
   max-width: 6.25rem;
   text-overflow: ellipsis;
-  font-size: 0.9375rem;
+}
-  line-height: normal !important;
+
-  font-style: normal;
+.c8:focus {
-  font-stretch: normal;
+  border-color: rgb(59,70,204);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   outline: 0;
 }
 
@@ -489,11 +508,6 @@ exports[`renders <Rule/> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c8:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c11 {
   box-sizing: border-box;
   width: 18.75rem;
@@ -504,6 +518,14 @@ exports[`renders <Rule/> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
   border: none;
   border-bottom: 0.0625rem solid rgba(73,73,73,1);
   border-radius: 0;
@@ -520,13 +542,10 @@ exports[`renders <Rule/> without throwing 1`] = `
   width: 8.4375rem;
   max-width: 8.4375rem;
   text-overflow: ellipsis;
-  font-size: 0.9375rem;
+}
-  line-height: normal !important;
+
-  font-style: normal;
+.c11:focus {
-  font-stretch: normal;
+  border-color: rgb(59,70,204);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   outline: 0;
 }
 
@@ -564,11 +583,6 @@ exports[`renders <Rule/> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c14 {
   box-sizing: border-box;
   width: 18.75rem;
@@ -579,6 +593,14 @@ exports[`renders <Rule/> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
   border: none;
   border-bottom: 0.0625rem solid rgba(73,73,73,1);
   border-radius: 0;
@@ -595,13 +617,10 @@ exports[`renders <Rule/> without throwing 1`] = `
   width: 8.125rem;
   max-width: 8.125rem;
   text-overflow: ellipsis;
-  font-size: 0.9375rem;
+}
-  line-height: normal !important;
+
-  font-style: normal;
+.c14:focus {
-  font-stretch: normal;
+  border-color: rgb(59,70,204);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   outline: 0;
 }
 
@@ -639,11 +658,6 @@ exports[`renders <Rule/> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c14:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <div
   className="c0"
 >
@@ -895,6 +909,9 @@ exports[`renders <Rule/> without throwing 1`] = `
           }
         }
       />
+      <label
+        className="c16"
+      />
     </div>
   </div>
 </div>
@@ -1040,6 +1057,20 @@ exports[`renders <Rule/> without throwing 2`] = `
   display: none;
 }
 
+.c16 {
+  font-size: 0.9375rem;
+  line-height: 1.125rem;
+  font-style: normal;
+  font-stretch: normal;
+  display: block;
+  color: rgb(70,70,70);
+  text-align: left;
+  float: right;
+  font-size: 0.8125rem;
+  float: none;
+  width: 18.75rem;
+}
+
 .c2 {
   color: rgba(73,73,73,1);
   font-weight: normal;
@@ -1074,6 +1105,14 @@ exports[`renders <Rule/> without throwing 2`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
   border: none;
   border-bottom: 0.0625rem solid rgba(73,73,73,1);
   border-radius: 0;
@@ -1088,13 +1127,10 @@ exports[`renders <Rule/> without throwing 2`] = `
   min-height: 0;
   max-width: 22.1875rem;
   text-overflow: ellipsis;
-  font-size: 0.9375rem;
+}
-  line-height: normal !important;
+
-  font-style: normal;
+.c15:focus {
-  font-stretch: normal;
+  border-color: rgb(59,70,204);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   outline: 0;
 }
 
@@ -1132,11 +1168,6 @@ exports[`renders <Rule/> without throwing 2`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c15:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c4 {
   position: relative;
   display: -webkit-inline-box;
@@ -1216,6 +1247,14 @@ exports[`renders <Rule/> without throwing 2`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
   border: none;
   border-bottom: 0.0625rem solid rgba(73,73,73,1);
   border-radius: 0;
@@ -1232,13 +1271,10 @@ exports[`renders <Rule/> without throwing 2`] = `
   width: 4.125rem;
   max-width: 4.125rem;
   text-overflow: ellipsis;
-  font-size: 0.9375rem;
+}
-  line-height: normal !important;
+
-  font-style: normal;
+.c6:focus {
-  font-stretch: normal;
+  border-color: rgb(59,70,204);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   outline: 0;
 }
 
@@ -1276,11 +1312,6 @@ exports[`renders <Rule/> without throwing 2`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c6:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c8 {
   box-sizing: border-box;
   width: 18.75rem;
@@ -1291,6 +1322,14 @@ exports[`renders <Rule/> without throwing 2`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
   border: none;
   border-bottom: 0.0625rem solid rgba(73,73,73,1);
   border-radius: 0;
@@ -1307,13 +1346,10 @@ exports[`renders <Rule/> without throwing 2`] = `
   width: 6.25rem;
   max-width: 6.25rem;
   text-overflow: ellipsis;
-  font-size: 0.9375rem;
+}
-  line-height: normal !important;
+
-  font-style: normal;
+.c8:focus {
-  font-stretch: normal;
+  border-color: rgb(59,70,204);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   outline: 0;
 }
 
@@ -1351,11 +1387,6 @@ exports[`renders <Rule/> without throwing 2`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c8:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c11 {
   box-sizing: border-box;
   width: 18.75rem;
@@ -1366,6 +1397,14 @@ exports[`renders <Rule/> without throwing 2`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
   border: none;
   border-bottom: 0.0625rem solid rgba(73,73,73,1);
   border-radius: 0;
@@ -1382,13 +1421,10 @@ exports[`renders <Rule/> without throwing 2`] = `
   width: 8.4375rem;
   max-width: 8.4375rem;
   text-overflow: ellipsis;
-  font-size: 0.9375rem;
+}
-  line-height: normal !important;
+
-  font-style: normal;
+.c11:focus {
-  font-stretch: normal;
+  border-color: rgb(59,70,204);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   outline: 0;
 }
 
@@ -1426,11 +1462,6 @@ exports[`renders <Rule/> without throwing 2`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c11:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c14 {
   box-sizing: border-box;
   width: 18.75rem;
@@ -1441,6 +1472,14 @@ exports[`renders <Rule/> without throwing 2`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
+  font-size: 0.9375rem;
+  line-height: normal !important;
+  font-style: normal;
+  font-stretch: normal;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
   border: none;
   border-bottom: 0.0625rem solid rgba(73,73,73,1);
   border-radius: 0;
@@ -1457,13 +1496,10 @@ exports[`renders <Rule/> without throwing 2`] = `
   width: 8.125rem;
   max-width: 8.125rem;
   text-overflow: ellipsis;
-  font-size: 0.9375rem;
+}
-  line-height: normal !important;
+
-  font-style: normal;
+.c14:focus {
-  font-stretch: normal;
+  border-color: rgb(59,70,204);
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
   outline: 0;
 }
 
@@ -1501,11 +1537,6 @@ exports[`renders <Rule/> without throwing 2`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c14:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <div
   className="c0"
 >
@@ -1757,6 +1788,9 @@ exports[`renders <Rule/> without throwing 2`] = `
           }
         }
       />
+      <label
+        className="c16"
+      />
     </div>
   </div>
 </div>

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/images.spec.js.snap

@@ -225,8 +225,6 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -235,6 +233,13 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c9:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c9::-webkit-input-placeholder {
@@ -271,11 +276,6 @@ exports[`renders <Images images=[{name: stuff, imageName: stuff}] /> without thr
   color: rgba(73,73,73,0.5);
 }
 
-.c9:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c6 {
   min-width: 100%;
   width: 9rem;

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

@@ -243,6 +243,7 @@ exports[`renders <Name /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
+  width: 18.75rem;
 }
 
 .c9 {
@@ -297,8 +298,6 @@ exports[`renders <Name /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -307,6 +306,13 @@ exports[`renders <Name /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c5:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c5::-webkit-input-placeholder {
@@ -343,11 +349,6 @@ exports[`renders <Name /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c5:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <form>
   <div
     className="c0"
@@ -674,6 +675,7 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
+  width: 18.75rem;
 }
 
 .c9 {
@@ -728,8 +730,6 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -738,6 +738,13 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c5:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c5::-webkit-input-placeholder {
@@ -774,11 +781,6 @@ exports[`renders <Name expanded /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c5:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <form>
   <div
     className="c0"
@@ -1105,6 +1107,7 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
+  width: 18.75rem;
 }
 
 .c9 {
@@ -1159,8 +1162,6 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -1169,6 +1170,13 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c5:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c5::-webkit-input-placeholder {
@@ -1205,11 +1213,6 @@ exports[`renders <Name name="test" /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c5:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <form>
   <div
     className="c0"
@@ -1536,6 +1539,7 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   float: right;
   font-size: 0.8125rem;
   float: none;
+  width: 18.75rem;
 }
 
 .c9 {
@@ -1590,8 +1594,6 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -1600,6 +1602,13 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c5:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c5::-webkit-input-placeholder {
@@ -1636,11 +1645,6 @@ exports[`renders <Name pristine={false} /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c5:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <form>
   <div
     className="c0"

packages/my-joy-beta/src/components/create-instance/affinity.js

@@ -5,7 +5,7 @@ import { Field } from 'redux-form';
 import titleCase from 'title-case';
 import remcalc from 'remcalc';
 
-import { H5, Select, Input, FormGroup } from 'joyent-ui-toolkit';
+import { H5, Select, Input, FormGroup, FormMeta } from 'joyent-ui-toolkit';
 
 const style = {
   lineHeight: '48px',
@@ -82,6 +82,7 @@ export const Rule = rule => (
               required
               placeholder="key"
             />
+            <FormMeta small />
           </FormGroup>
           <H5 style={style} inline noMargin>
             and value{' '}
@@ -99,6 +100,7 @@ export const Rule = rule => (
               required
               placeholder="value"
             />
+            <FormMeta small />
           </FormGroup>
         </Fragment>
       ) : (
@@ -115,6 +117,7 @@ export const Rule = rule => (
               required
               placeholder="Example instance name: nginx"
             />
+            <FormMeta />
           </FormGroup>
         </Fragment>
       )}

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -994,10 +994,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -1006,6 +1002,15 @@ exports[`renders <Summary /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+  text-overflow: ellipsis;
+}
+
+.c32:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c32::-webkit-input-placeholder {
@@ -1058,11 +1063,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   color: rgba(73,73,73,1);
 }
 
-.c32:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c34 {
   box-sizing: border-box;
   width: 18.75rem;
@@ -1073,9 +1073,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -1084,6 +1081,14 @@ exports[`renders <Summary /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+}
+
+.c34:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c34::-webkit-input-placeholder {
@@ -1136,11 +1141,6 @@ exports[`renders <Summary /> without throwing 1`] = `
   color: rgba(73,73,73,1);
 }
 
-.c34:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c31 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -3023,9 +3023,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -3034,6 +3031,14 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+}
+
+.c33:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c33::-webkit-input-placeholder {
@@ -3086,11 +3091,6 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   color: rgba(73,73,73,1);
 }
 
-.c33:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c32 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -5150,9 +5150,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -5161,6 +5158,14 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+}
+
+.c33:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c33::-webkit-input-placeholder {
@@ -5213,11 +5218,6 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   color: rgba(73,73,73,1);
 }
 
-.c33:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c32 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -7268,10 +7268,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -7280,6 +7276,15 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+  text-overflow: ellipsis;
+}
+
+.c36:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c36::-webkit-input-placeholder {
@@ -7332,11 +7337,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   color: rgba(73,73,73,1);
 }
 
-.c36:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c38 {
   box-sizing: border-box;
   width: 18.75rem;
@@ -7347,9 +7347,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -7358,6 +7355,14 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+}
+
+.c38:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c38::-webkit-input-placeholder {
@@ -7410,11 +7415,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   color: rgba(73,73,73,1);
 }
 
-.c38:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c35 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -9349,10 +9349,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -9361,6 +9357,15 @@ exports[`renders <Summary state /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+  text-overflow: ellipsis;
+}
+
+.c33:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c33::-webkit-input-placeholder {
@@ -9413,11 +9418,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   color: rgba(73,73,73,1);
 }
 
-.c33:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c35 {
   box-sizing: border-box;
   width: 18.75rem;
@@ -9428,9 +9428,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -9439,6 +9436,14 @@ exports[`renders <Summary state /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+}
+
+.c35:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c35::-webkit-input-placeholder {
@@ -9491,11 +9496,6 @@ exports[`renders <Summary state /> without throwing 1`] = `
   color: rgba(73,73,73,1);
 }
 
-.c35:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c32 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -11378,10 +11378,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -11390,6 +11386,15 @@ exports[`renders <Summary state /> without throwing 2`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+  text-overflow: ellipsis;
+}
+
+.c33:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c33::-webkit-input-placeholder {
@@ -11442,11 +11447,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   color: rgba(73,73,73,1);
 }
 
-.c33:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c35 {
   box-sizing: border-box;
   width: 18.75rem;
@@ -11457,9 +11457,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -11468,6 +11465,14 @@ exports[`renders <Summary state /> without throwing 2`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+}
+
+.c35:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c35::-webkit-input-placeholder {
@@ -11520,11 +11525,6 @@ exports[`renders <Summary state /> without throwing 2`] = `
   color: rgba(73,73,73,1);
 }
 
-.c35:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c32 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -13346,10 +13346,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -13358,6 +13354,15 @@ exports[`renders <Summary state /> without throwing 3`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+  text-overflow: ellipsis;
+}
+
+.c32:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c32::-webkit-input-placeholder {
@@ -13410,11 +13415,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   color: rgba(73,73,73,1);
 }
 
-.c32:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c34 {
   box-sizing: border-box;
   width: 18.75rem;
@@ -13425,9 +13425,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -13436,6 +13433,14 @@ exports[`renders <Summary state /> without throwing 3`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+}
+
+.c34:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c34::-webkit-input-placeholder {
@@ -13488,11 +13493,6 @@ exports[`renders <Summary state /> without throwing 3`] = `
   color: rgba(73,73,73,1);
 }
 
-.c34:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c31 {
   display: -webkit-box;
   display: -webkit-flex;

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

@@ -237,8 +237,6 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -247,6 +245,13 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c4:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c4::-webkit-input-placeholder {
@@ -283,11 +288,6 @@ exports[`renders <Toolbar /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c4:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <div
   className="c0"
 >
@@ -575,8 +575,6 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -585,6 +583,13 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c4:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c4::-webkit-input-placeholder {
@@ -621,11 +626,6 @@ exports[`renders <Toolbar actionLabel /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c4:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <div
   className="c0"
 >
@@ -935,8 +935,6 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -945,6 +943,13 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c4:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c4::-webkit-input-placeholder {
@@ -981,11 +986,6 @@ exports[`renders <Toolbar actionable /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c4:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <div
   className="c0"
 >
@@ -1273,8 +1273,6 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -1283,6 +1281,13 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c4:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c4::-webkit-input-placeholder {
@@ -1319,11 +1324,6 @@ exports[`renders <Toolbar onActionClick /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c4:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <div
   className="c0"
 >
@@ -1611,8 +1611,6 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -1621,6 +1619,13 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c4:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c4::-webkit-input-placeholder {
@@ -1657,11 +1662,6 @@ exports[`renders <Toolbar searchLabel /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c4:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <div
   className="c0"
 >
@@ -1949,8 +1949,6 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -1959,6 +1957,13 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c4:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c4::-webkit-input-placeholder {
@@ -1995,11 +2000,6 @@ exports[`renders <Toolbar searchPlaceholder /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c4:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <div
   className="c0"
 >
@@ -2287,11 +2287,6 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgb(250,250,250);
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -2300,6 +2295,16 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c4:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c4::-webkit-input-placeholder {
@@ -2348,11 +2353,6 @@ exports[`renders <Toolbar searchable /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c4:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <div
   className="c0"
 >

packages/my-joy-beta/src/constants.js

@@ -0,0 +1,2 @@
+export const fieldError =
+  'Please enter only letters, numbers, periods (.), underscores (_), and hyphens (-).';

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

@@ -420,7 +420,7 @@ Array [
 <ul
     className="c0"
 />,
-  .c23 {
+  .c25 {
   font-family: sans-serif;
   font-size: 100%;
   line-height: 1.15;
@@ -433,36 +433,36 @@ Array [
   min-width: 7.5rem;
 }
 
-.c23::-moz-focus-inner,
+.c25::-moz-focus-inner,
-.c23[type='button']::-moz-focus-inner,
+.c25[type='button']::-moz-focus-inner,
-.c23[type='reset']::-moz-focus-inner,
+.c25[type='reset']::-moz-focus-inner,
-.c23[type='submit']::-moz-focus-inner {
+.c25[type='submit']::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 
-.c23:-moz-focusring,
+.c25:-moz-focusring,
-.c23[type='button']:-moz-focusring,
+.c25[type='button']:-moz-focusring,
-.c23[type='reset']:-moz-focusring,
+.c25[type='reset']:-moz-focusring,
-.c23[type='submit']:-moz-focusring {
+.c25[type='submit']:-moz-focusring {
   outline: 0.0625rem dotted ButtonText;
 }
 
-.c23 + button,
+.c25 + button,
-.c23 + a {
+.c25 + a {
   margin-left: 0.375rem;
 }
 
-.c22 {
+.c24 {
   display: inline-block;
 }
 
-.c22 + button,
+.c24 + button,
-.c22 + a {
+.c24 + a {
   margin-left: 0.375rem;
 }
 
-.c21 {
+.c23 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -507,7 +507,7 @@ Array [
   margin: 0;
 }
 
-.c21:focus {
+.c23:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -515,43 +515,43 @@ Array [
   border-color: rgb(45,56,132);
 }
 
-.c21:hover {
+.c23:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c21:active,
+.c23:active,
-.c21:active:hover,
+.c23:active:hover,
-.c21:active:focus {
+.c23:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c21[disabled] {
+.c23[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c21:focus {
+.c23:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c21:hover {
+.c23:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c21:active,
+.c23:active,
-.c21:active:hover,
+.c23:active:hover,
-.c21:active:focus {
+.c23:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c24 {
+.c26 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -597,7 +597,7 @@ Array [
   margin: 0;
 }
 
-.c24:focus {
+.c26:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -605,43 +605,43 @@ Array [
   border-color: rgb(45,56,132);
 }
 
-.c24:hover {
+.c26:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c24:active,
+.c26:active,
-.c24:active:hover,
+.c26:active:hover,
-.c24:active:focus {
+.c26:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c24[disabled] {
+.c26[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c24:focus {
+.c26:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(216,216,216);
 }
 
-.c24:hover {
+.c26:hover {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c24:active,
+.c26:active,
-.c24:active:hover,
+.c26:active:hover,
-.c24:active:focus {
+.c26:active:focus {
   background-color: rgb(250,250,250);
   border-color: rgb(250,250,250);
 }
 
-.c26 {
+.c28 {
   box-sizing: border-box;
   display: inline-block;
   -webkit-box-pack: center;
@@ -699,7 +699,7 @@ Array [
   float: right;
 }
 
-.c26:focus {
+.c28:focus {
   outline: 0;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -707,66 +707,66 @@ Array [
   border-color: rgb(45,56,132);
 }
 
-.c26:hover {
+.c28:hover {
   background-color: rgb(72,83,217);
   border: solid 0.0625rem rgb(45,56,132);
 }
 
-.c26:active,
+.c28:active,
-.c26:active:hover,
+.c28:active:hover,
-.c26:active:focus {
+.c28:active:focus {
   background-image: none;
   outline: 0;
   background-color: rgb(45,56,132);
   border-color: rgb(45,56,132);
 }
 
-.c26[disabled] {
+.c28[disabled] {
   cursor: not-allowed;
   pointer-events: none;
 }
 
-.c26:focus {
+.c28:focus {
   background-color: rgb(255,255,255);
   border-color: rgb(216,216,216);
 }
 
-.c26:hover {
+.c28:hover {
   background-color: rgb(247,247,247);
   border-color: rgb(216,216,216);
 }
 
-.c26:active,
+.c28:active,
-.c26:active:hover,
+.c28:active:hover,
-.c26:active:focus {
+.c28:active:focus {
   background-color: rgb(230,230,230);
   border-color: rgb(216,216,216);
 }
 
-.c26:focus {
+.c28:focus {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c26:hover {
+.c28:hover {
   color: rgb(205,37,27);
   background-color: rgb(255,255,255);
   border-color: rgb(205,37,27);
 }
 
-.c26:active,
+.c28:active,
-.c26:active:hover,
+.c28:active:hover,
-.c26:active:focus {
+.c28:active:focus {
   background-color: rgba(210,67,58,0.1);
   border-color: rgb(205,37,27);
 }
 
-.c26 svg + span {
+.c28 svg + span {
   margin-left: 0.75rem;
 }
 
-.c26 svg {
+.c28 svg {
   max-height: 1.125rem;
 }
 
@@ -784,7 +784,7 @@ Array [
   font-size: 0.8125rem;
 }
 
-.c16 {
+.c18 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-style: normal;
@@ -795,9 +795,10 @@ Array [
   float: right;
   font-size: 0.8125rem;
   float: none;
+  width: 18.75rem;
 }
 
-.c19 {
+.c16 {
   box-sizing: border-box;
   display: -webkit-box;
   display: -webkit-flex;
@@ -816,7 +817,26 @@ Array [
   margin-left: -0.625rem;
 }
 
-.c20 {
+.c21 {
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 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.625rem;
+  margin-left: -0.625rem;
+}
+
+.c17 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -826,7 +846,17 @@ Array [
   display: block;
 }
 
-.c25 {
+.c22 {
+  box-sizing: border-box;
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+  padding-right: 0.625rem;
+  padding-left: 0.625rem;
+  display: block;
+}
+
+.c27 {
   box-sizing: border-box;
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
@@ -861,7 +891,7 @@ Array [
   margin-top: 0.1875rem;
 }
 
-.c18 {
+.c20 {
   margin-top: 0.375rem;
 }
 
@@ -957,7 +987,7 @@ Array [
   flex-basis: auto;
 }
 
-.c17 {
+.c19 {
   -webkit-order: 0;
   -ms-flex-order: 0;
   order: 0;
@@ -1168,8 +1198,6 @@ Array [
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -1178,6 +1206,13 @@ Array [
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c15:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c15::-webkit-input-placeholder {
@@ -1214,11 +1249,6 @@ Array [
   color: rgba(73,73,73,0.5);
 }
 
-.c15:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c2 {
   word-wrap: break-word;
   overflow-wrap: break-word;
@@ -1232,7 +1262,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c19 {
+  .c21 {
     -webkit-align-items: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
@@ -1241,7 +1271,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c19 {
+  .c21 {
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -ms-flex-pack: justify;
@@ -1249,8 +1279,17 @@ Array [
   }
 }
 
+@media only screen and (min-width:48em) {
+  .c17 {
+    -webkit-flex-basis: 58.333333333333336%;
+    -ms-flex-preferred-size: 58.333333333333336%;
+    flex-basis: 58.333333333333336%;
+    max-width: 58.333333333333336%;
+  }
+}
+
 @media only screen and (min-width:0em) {
-  .c20 {
+  .c22 {
     -webkit-flex-basis: 100%;
     -ms-flex-preferred-size: 100%;
     flex-basis: 100%;
@@ -1259,7 +1298,7 @@ Array [
 }
 
 @media only screen and (min-width:0em) {
-  .c25 {
+  .c27 {
     display: none;
   }
 }
@@ -1335,14 +1374,22 @@ Array [
                                     id="k"
                                     onBlur={null}
                                 />
-                            </div>
+                                <div
-                            <label
                                     className="c16"
+                                >
+                                    <div
+                                        className="c17"
+                                    >
+                                        <label
+                                            className="c18"
                                         />
                                     </div>
                                 </div>
+                            </div>
+                        </div>
+                    </div>
                     <div
-                        className="c17"
+                        className="c19"
                     />
                     <div
                         className="c11"
@@ -1369,24 +1416,32 @@ Array [
                                     id="l"
                                     onBlur={null}
                                 />
-                            </div>
+                                <div
-                            <label
                                     className="c16"
+                                >
+                                    <div
+                                        className="c17"
+                                    >
+                                        <label
+                                            className="c18"
                                         />
                                     </div>
                                 </div>
                             </div>
-                <div
+                        </div>
-                    className="c18"
+                    </div>
-                >
+                </div>
-                    <div
-                        className="c19"
-                    >
                 <div
                     className="c20"
+                >
+                    <div
+                        className="c21"
+                    >
+                        <div
+                            className="c22"
                         >
                             <button
-                                className="c21 c22 c23"
+                                className="c23 c24 c25"
                                 disabled={false}
                                 href=""
                                 onClick={[Function]}
@@ -1397,7 +1452,7 @@ Array [
                                 </span>
                             </button>
                             <button
-                                className="c24 c22 c23"
+                                className="c26 c24 c25"
                                 disabled={true}
                                 href=""
                                 type="submit"
@@ -1408,10 +1463,10 @@ Array [
                             </button>
                         </div>
                         <div
-                            className="c25"
+                            className="c27"
                         >
                             <button
-                                className="c26 c22 c23"
+                                className="c28 c24 c25"
                                 disabled={false}
                                 href=""
                                 icon={true}

packages/my-joy-beta/src/containers/create-instance/affinity.js

@@ -13,6 +13,7 @@ import { AffinityIcon, Button, H3, Divider, KeyValue } from 'joyent-ui-toolkit';
 import Title from '@components/create-instance/title';
 import { Rule, Header } from '@components/create-instance/affinity';
 import Description from '@components/description';
+import { fieldError } from '@root/constants';
 
 const FORM_NAME_CREATE = 'CREATE-INSTANCE-AFFINITY-ADD';
 const FORM_NAME_EDIT = i => `CREATE-INSTANCE-AFFINITY-EDIT-${i}`;
@@ -37,6 +38,8 @@ export const Affinity = ({
   handleAddAffinityRules,
   handleRemoveAffinityRule,
   handleUpdateAffinityRule,
+  shouldAsyncValidate,
+  handleAsyncValidation,
   handleToggleExpanded,
   handleCancelEdit,
   handleChangeAddOpen,
@@ -79,6 +82,8 @@ export const Affinity = ({
         initialValues={rule}
         destroyOnUnmount={false}
         forceUnregisterOnUnmount={true}
+        shouldAsyncValidate={shouldAsyncValidate}
+        asyncValidation={handleAsyncValidation}
         onSubmit={newValue => handleUpdateAffinityRule(index, newValue)}
       >
         {props => (
@@ -103,6 +108,8 @@ export const Affinity = ({
       form={FORM_NAME_CREATE}
       destroyOnUnmount={false}
       forceUnregisterOnUnmount={true}
+      shouldAsyncValidate={shouldAsyncValidate}
+      asyncValidate={handleAsyncValidation}
       onSubmit={handleAddAffinityRules}
     >
       {props =>
@@ -161,7 +168,28 @@ export default compose(
       rule
     };
   }),
-  connect(null, (dispatch, { affinityRules = [], history }) => ({
+  connect(null, (dispatch, { affinityRules = [], rule, history }) => ({
+    shouldAsyncValidate: ({ trigger }) => trigger === 'change',
+    handleAsyncValidation: async rule => {
+      const validName = /^[a-zA-Z_.-]{1,16}$/.test(rule['rule-instance-name']);
+      const validKey = /^[a-zA-Z_.-]{1,16}$/.test(
+        rule['rule-instance-tag-key']
+      );
+      const validValue = /^[a-zA-Z_.-]{1,16}$/.test(
+        rule['rule-instance-tag-value']
+      );
+
+      if (validName && validKey && validValue) {
+        return;
+      }
+
+      // eslint-disable-next-line no-throw-literal
+      throw {
+        'rule-instance-name': fieldError,
+        'rule-instance-tag-key': fieldError,
+        'rule-instance-tag-value': fieldError
+      };
+    },
     handleEdit: () => {
       return history.push(`/~create/affinity${history.location.search}`);
     },

packages/my-joy-beta/src/containers/create-instance/cns.js

@@ -14,6 +14,7 @@ import Title from '@components/create-instance/title';
 import Cns, { Footer, AddServiceForm } from '@components/cns';
 import Description from '@components/description';
 import GetAccount from '@graphql/get-account.gql';
+import { fieldError } from '@root/constants';
 
 const CNS_FORM = 'create-instance-cns';
 
@@ -30,7 +31,9 @@ const CNSContainer = ({
   handleToggleCnsEnabled,
   handleAddService,
   handleRemoveService,
-  step
+  step,
+  shouldAsyncValidate,
+  handleAsyncValidate
 }) => (
   <Fragment>
     <Title
@@ -68,6 +71,8 @@ const CNSContainer = ({
               destroyOnUnmount={false}
               forceUnregisterOnUnmount={true}
               onSubmit={handleAddService}
+              shouldAsyncValidate={shouldAsyncValidate}
+              asyncValidate={handleAsyncValidate}
             >
               {props => <AddServiceForm {...props} />}
             </ReduxForm>
@@ -163,6 +168,20 @@ export default compose(
       dispatch(set({ name: `${CNS_FORM}-proceeded`, value: true }));
       return history.push(`/~create/affinity${history.location.search}`);
     },
+    shouldAsyncValidate: ({ trigger }) => trigger === 'change',
+    handleAsyncValidate: async ({ name = '', value = '' }) => {
+      const isNameValid = /^[a-zA-Z_.-]{1,16}$/.test(name);
+      const isValueValid = /^[a-zA-Z_.-]{1,16}$/.test(value);
+
+      if (isNameValid && isValueValid) {
+        return;
+      }
+
+      throw {
+        name: isNameValid ? null : fieldError,
+        value: isValueValid ? null : fieldError
+      };
+    },
     handleEdit: () => history.push(`/~create/cns${history.location.search}`),
     handleToggleCnsEnabled: ({ target }) =>
       dispatch(set({ name: `${CNS_FORM}-enabled`, value: !cnsEnabled })),

packages/my-joy-beta/src/containers/create-instance/name.js

@@ -18,6 +18,7 @@ import GetInstance from '@graphql/get-instance-small.gql';
 import GetRandomName from '@graphql/get-random-name.gql';
 import { client } from '@state/store';
 import parseError from '@state/parse-error';
+import { fieldError } from '@root/constants';
 
 const FORM_NAME = 'create-instance-name';
 
@@ -113,21 +114,21 @@ export default compose(
       };
     },
     (dispatch, { history, query }) => ({
-      shouldAsyncValidate: ({ trigger }) => trigger === 'submit',
+      shouldAsyncValidate: ({ trigger }) => trigger === 'change',
       handleAsyncValidation: async ({ name }) => {
         const sanitized = punycode.encode(name).replace(/-$/, '');
 
         if (sanitized !== name) {
           // eslint-disable-next-line no-throw-literal
           throw {
-            name: 'Special characters are not accepted'
+            name: fieldError
           };
         }
 
         if (!/^[a-zA-Z0-9][a-zA-Z0-9\\_\\.\\-]*$/.test(name)) {
           // eslint-disable-next-line no-throw-literal
           throw {
-            name: 'Invalid name'
+            name: fieldError
           };
         }
 

packages/my-joy-beta/src/containers/create-instance/tags.js

@@ -20,6 +20,7 @@ import {
 import Title from '@components/create-instance/title';
 import Description from '@components/description';
 import Tag from '@components/tags';
+import { fieldError } from '@root/constants';
 
 const FORM_NAME_CREATE = 'CREATE-INSTANCE-TAGS-ADD';
 const FORM_NAME_EDIT = i => `CREATE-INSTANCE-TAGS-EDIT-${i}`;
@@ -39,7 +40,7 @@ export const Tags = ({
   handleNext,
   handleEdit,
   shouldAsyncValidate,
-  asyncValidate
+  handleAsyncValidate
 }) => (
   <Fragment>
     <Title
@@ -88,7 +89,7 @@ export const Tags = ({
       forceUnregisterOnUnmount={true}
       onSubmit={handleAddTag}
       shouldAsyncValidate={shouldAsyncValidate}
-      asyncValidate={asyncValidate}
+      asyncValidate={handleAsyncValidate}
     >
       {props =>
         expanded && addOpen ? (
@@ -150,20 +151,18 @@ export default compose(
     handleEdit: () => {
       return history.push(`/~create/tags${history.location.search}`);
     },
-    shouldAsyncValidate: ({ trigger }) => {
+    shouldAsyncValidate: ({ trigger }) => trigger === 'change',
-      return trigger === 'submit';
+    handleAsyncValidate: async ({ name = '', value = '' }) => {
-    },
+      const isNameValid = /^[a-zA-Z_.-]{1,16}$/.test(name);
-    asyncValidate: async ({ name = '', value = '' }) => {
+      const isValueValid = /^[a-zA-Z_.-]{1,16}$/.test(value);
-      const isNameInvalid = name.length === 0;
-      const isValueInvalid = value.length === 0;
 
-      if (!isNameInvalid && !isValueInvalid) {
+      if (isNameValid && isValueValid) {
         return;
       }
 
       throw {
-        name: isNameInvalid,
+        name: isNameValid ? null : fieldError,
-        value: isValueInvalid
+        value: isValueValid ? null : fieldError
       };
     },
     handleAddTag: value => {

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

@@ -483,8 +483,6 @@ exports[`renders <List /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -493,6 +491,13 @@ exports[`renders <List /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c7:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c7::-webkit-input-placeholder {
@@ -529,11 +534,6 @@ exports[`renders <List /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c7:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c14 {
   overflow: hidden;
   border-spacing: 0;
@@ -1788,8 +1788,6 @@ exports[`renders <List error /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -1798,6 +1796,13 @@ exports[`renders <List error /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c7:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c7::-webkit-input-placeholder {
@@ -1834,11 +1839,6 @@ exports[`renders <List error /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c7:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c20 {
   overflow: hidden;
   border-spacing: 0;
@@ -3044,8 +3044,6 @@ exports[`renders <List instances /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -3054,6 +3052,13 @@ exports[`renders <List instances /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c7:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c7::-webkit-input-placeholder {
@@ -3090,11 +3095,6 @@ exports[`renders <List instances /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c7:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c41 {
   cursor: pointer;
   height: 100%;
@@ -5084,8 +5084,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -5094,6 +5092,13 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c7:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c7::-webkit-input-placeholder {
@@ -5130,11 +5135,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c7:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c41 {
   cursor: pointer;
   height: 100%;
@@ -7505,8 +7505,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -7515,6 +7513,13 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c7:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c7::-webkit-input-placeholder {
@@ -7551,11 +7556,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c7:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c41 {
   cursor: pointer;
   height: 100%;
@@ -10137,8 +10137,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -10147,6 +10145,13 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c7:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c7::-webkit-input-placeholder {
@@ -10183,11 +10188,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
   color: rgba(73,73,73,0.5);
 }
 
-.c7:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c41 {
   cursor: pointer;
   height: 100%;
@@ -11780,11 +11780,6 @@ exports[`renders <List loading /> without throwing 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgb(250,250,250);
-  background-color: rgb(250,250,250);
-  color: rgb(216,216,216);
-  cursor: not-allowed;
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -11793,6 +11788,16 @@ exports[`renders <List loading /> without throwing 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  background-color: rgb(250,250,250);
+  color: rgb(216,216,216);
+  cursor: not-allowed;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c7:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c7::-webkit-input-placeholder {
@@ -11841,11 +11846,6 @@ exports[`renders <List loading /> without throwing 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c7:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 @media only screen and (min-width:48em) {
   .c0 {
     width: 46rem;

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -1959,9 +1959,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -1970,6 +1967,14 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+}
+
+.c34:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c34::-webkit-input-placeholder {
@@ -2022,11 +2027,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   color: rgba(73,73,73,1);
 }
 
-.c34:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c33 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4124,9 +4124,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  font-family: "Roboto Mono",monospace;
-  width: 100%;
-  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -4135,6 +4132,14 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  font-family: "Roboto Mono",monospace;
+  width: 100%;
+  min-width: 100%;
+}
+
+.c34:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c34::-webkit-input-placeholder {
@@ -4187,11 +4192,6 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   color: rgba(73,73,73,1);
 }
 
-.c34:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c33 {
   display: -webkit-box;
   display: -webkit-flex;

packages/my-joy-beta/src/containers/instances/cns.js

@@ -26,6 +26,7 @@ import DeleteTag from '@graphql/delete-tag.gql';
 import UpdateTags from '@graphql/update-tags.gql';
 import GetTags from '@graphql/list-tags.gql';
 import parseError from '@state/parse-error';
+import { fieldError } from '@root/constants';
 
 const FORM_NAME = 'cns-new-service';
 
@@ -39,7 +40,9 @@ const CnsContainer = ({
   mutating = false,
   loading = false,
   mutationError = false,
-  loadingError = null
+  loadingError = null,
+  shouldAsyncValidate,
+  handleAsyncValidate
 }) => (
   <ViewContainer main>
     <Margin bottom={1}>
@@ -90,6 +93,8 @@ const CnsContainer = ({
             destroyOnUnmount={false}
             forceUnregisterOnUnmount={true}
             onSubmit={val => handleAddService(val, services)}
+            shouldAsyncValidate={shouldAsyncValidate}
+            asyncValidate={handleAsyncValidate}
           >
             {props => <AddServiceForm {...props} disabled={mutating} />}
           </ReduxForm>
@@ -249,6 +254,18 @@ export default compose(
 
         return refetch();
       },
+      shouldAsyncValidate: ({ trigger }) => trigger === 'change',
+      handleAsyncValidate: async ({ name }) => {
+        const isNameValid = /^[a-zA-Z_.-]{1,16}$/.test(name);
+
+        if (isNameValid) {
+          return;
+        }
+
+        throw {
+          name: fieldError
+        };
+      },
       handleRemoveService: async (name, services) => {
         const value = services.filter(svc => name !== svc);
 

packages/my-joy-beta/src/containers/instances/snapshots.js

@@ -34,6 +34,7 @@ import ToolbarForm from '@components/instances/toolbar';
 import SnapshotsListActions from '@components/instances/footer';
 import parseError from '@state/parse-error';
 import Confirm from '@state/confirm';
+import { fieldError } from '@root/constants';
 
 const MENU_FORM_NAME = 'snapshot-list-menu';
 const TABLE_FORM_NAME = 'snapshot-list-table';
@@ -56,7 +57,9 @@ const Snapshots = ({
   sortBy,
   toggleSelectAll,
   toggleCreateSnapshotOpen,
-  createSnapshotOpen
+  createSnapshotOpen,
+  shouldAsyncValidate,
+  handleAsyncValidate
 }) => {
   const _values = forceArray(snapshots);
   const _loading = !_values.length && loading ? <StatusLoader /> : null;
@@ -80,13 +83,20 @@ const Snapshots = ({
   const _createSnapshot =
     !loading && createSnapshotOpen ? (
       <Margin bottom={4}>
-        <ReduxForm form={CREATE_FORM_NAME} onSubmit={handleCreateSnapshot}>
+        <ReduxForm
-          {props => (
+          form={CREATE_FORM_NAME}
+          shouldAsyncValidate={shouldAsyncValidate}
+          asyncValidate={handleAsyncValidate}
+          onSubmit={handleCreateSnapshot}
+        >
+          {props => {
+            return (
               <SnapshotAddForm
                 {...props}
                 onCancel={() => toggleCreateSnapshotOpen(false)}
               />
-          )}
+            );
+          }}
         </ReduxForm>
       </Margin>
     ) : null;
@@ -256,6 +266,18 @@ export default compose(
             })
           ]);
         },
+        shouldAsyncValidate: ({ trigger }) => trigger === 'change',
+        handleAsyncValidate: async ({ name }) => {
+          const isNameValid = /^[a-zA-Z_.-]{1,16}$/.test(name);
+
+          if (isNameValid) {
+            return;
+          }
+
+          throw {
+            name: fieldError
+          };
+        },
         toggleCreateSnapshotOpen: value =>
           dispatch(
             set({

packages/my-joy-beta/src/containers/instances/tags.js

@@ -32,6 +32,7 @@ import UpdateTags from '@graphql/update-tags.gql';
 import DeleteTag from '@graphql/delete-tag.gql';
 import parseError from '@state/parse-error';
 import Confirm from '@state/confirm';
+import { fieldError } from '@root/constants';
 
 const MENU_FORM_NAME = 'instance-tags-list-menu';
 const ADD_FORM_NAME = 'instance-tags-add-new';
@@ -50,7 +51,7 @@ export const Tags = ({
   handleRemove,
   handleCreate,
   shouldAsyncValidate,
-  asyncValidate
+  handleAsyncValidate
 }) => {
   const _loading = !(loading && !tags.length) ? null : <StatusLoader />;
 
@@ -60,7 +61,7 @@ export const Tags = ({
       onSubmit={handleCreate}
       onCancel={() => handleToggleAddOpen(false)}
       shouldAsyncValidate={shouldAsyncValidate}
-      asyncValidate={asyncValidate}
+      asyncValidate={handleAsyncValidate}
     >
       {TagsAddForm}
     </ReduxForm>
@@ -100,7 +101,7 @@ export const Tags = ({
       form={editing.form}
       initialValues={{ name: editing.name, value: editing.value }}
       shouldAsyncValidate={shouldAsyncValidate}
-      asyncValidate={asyncValidate}
+      handleAsyncValidate={handleAsyncValidate}
       onSubmit={handleEdit}
     >
       {props => (
@@ -212,20 +213,18 @@ export default compose(
         handleToggleEditing: value => {
           return dispatch(set({ name: `editing-tag`, value }));
         },
-        shouldAsyncValidate: ({ trigger }) => {
+        shouldAsyncValidate: ({ trigger }) => trigger === 'change',
-          return trigger === 'submit';
+        handleAsyncValidate: async ({ name = '', value = '' }) => {
-        },
+          const isNameValid = /^[a-zA-Z_.-]{1,16}$/.test(name);
-        asyncValidate: async ({ name = '', value = '' }) => {
+          const isValueValid = /^[a-zA-Z_.-]{1,16}$/.test(value);
-          const isNameInvalid = name.length === 0;
-          const isValueInvalid = value.length === 0;
 
-          if (!isNameInvalid && !isValueInvalid) {
+          if (isNameValid && isValueValid) {
             return;
           }
 
           throw {
-            name: isNameInvalid,
+            name: isNameValid ? null : fieldError,
-            value: isValueInvalid
+            value: isValueValid ? null : fieldError
           };
         },
         handleEdit: async ({ name, value }, _, { form, initialValues }) => {

packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap

@@ -246,6 +246,7 @@ exports[`Form FormMeta 1`] = `
   -webkit-text-fill-color: currentcolor;
   font-size: 0.8125rem;
   float: none;
+  width: 18.75rem;
 }
 
 .c1 {
@@ -261,6 +262,7 @@ exports[`Form FormMeta 1`] = `
   -webkit-text-fill-color: currentcolor;
   font-size: 0.8125rem;
   float: none;
+  width: 18.75rem;
 }
 
 .c2 {
@@ -276,6 +278,7 @@ exports[`Form FormMeta 1`] = `
   -webkit-text-fill-color: currentcolor;
   font-size: 0.8125rem;
   float: none;
+  width: 18.75rem;
 }
 
 <div>
@@ -308,8 +311,6 @@ exports[`Form Input 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -318,6 +319,13 @@ exports[`Form Input 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c0:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c0::-webkit-input-placeholder {
@@ -354,11 +362,6 @@ exports[`Form Input 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c0:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 <input
   className="c0"
   disabled={false}
@@ -603,8 +606,6 @@ exports[`Form Select 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -613,6 +614,13 @@ exports[`Form Select 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c2:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c2::-webkit-input-placeholder {
@@ -649,11 +657,6 @@ exports[`Form Select 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c2:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c1 {
   position: relative;
   padding: 0.75rem;
@@ -707,8 +710,6 @@ exports[`Form Textarea 1`] = `
   background-color: rgb(255,255,255);
   border: 0.0625rem solid rgb(216,216,216);
   color: rgba(73,73,73,1);
-  max-width: 22.1875rem;
-  text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -717,6 +718,13 @@ exports[`Form Textarea 1`] = `
   -moz-appearance: none;
   appearance: none;
   outline: 0;
+  max-width: 22.1875rem;
+  text-overflow: ellipsis;
+}
+
+.c1:focus {
+  border-color: rgb(59,70,204);
+  outline: 0;
 }
 
 .c1::-webkit-input-placeholder {
@@ -753,11 +761,6 @@ exports[`Form Textarea 1`] = `
   color: rgba(73,73,73,0.5);
 }
 
-.c1:focus {
-  border-color: rgb(59,70,204);
-  outline: 0;
-}
-
 .c0 {
   position: relative;
   display: -webkit-inline-box;

packages/ui-toolkit/src/form/base/input.js

@@ -34,6 +34,19 @@ const style = css`
   background-color: ${props => props.theme.white};
   border: ${remcalc(1)} solid ${props => props.theme.grey};
   color: ${color};
+  font-size: ${remcalc(15)};
+  line-height: normal !important;
+
+  font-style: normal;
+  font-stretch: normal;
+
+  appearance: none;
+  outline: 0;
+
+  &:focus {
+    border-color: ${props => props.theme.primary};
+    outline: 0;
+  }
 
   &::-webkit-input-placeholder {
     color: ${props => props.theme.textDisabled};
@@ -122,7 +135,11 @@ const style = css`
   `};
 
   ${is('error')`
-    border-color: ${props => props.theme.redDark}
+    border-color: ${props => props.theme.red};
+
+    &:focus {
+      border-color: ${props => props.theme.red};
+    }
   `};
 
   ${is('embedded')`
@@ -172,20 +189,6 @@ const style = css`
     resize: ${props => props.resize};
   `};
 
-  font-size: ${remcalc(15)};
-  line-height: normal !important;
-
-  font-style: normal;
-  font-stretch: normal;
-
-  appearance: none;
-  outline: 0;
-
-  &:focus {
-    border-color: ${props => props.theme.primary};
-    outline: 0;
-  }
-
   ${is('big')`
     width: ${remcalc(355)};
     max-width: 100%;

packages/ui-toolkit/src/form/meta.js

@@ -29,6 +29,11 @@ const StyledLabel = Label.extend`
 
   font-size: ${remcalc(13)};
   float: none;
+  width: ${remcalc(300)};
+
+  ${is('small')`
+    width: ${remcalc(120)};
+  `};
 `;
 
 const Meta = props => {

packages/ui-toolkit/src/key-value/index.js

@@ -82,8 +82,12 @@ const TextareaKeyValue = ({
             <FormLabel>{titleCase(type)} key</FormLabel>
             <Margin top={0.5}>
               <Input onBlur={null} type="text" disabled={submitting} />
-            </Margin>
+              <Row>
+                <Col sm={7}>
                   <FormMeta />
+                </Col>
+              </Row>
+            </Margin>
           </FormGroup>
           <Divider height={remcalc(12)} transparent />
         </Col>
@@ -102,7 +106,11 @@ const TextareaKeyValue = ({
                 props={{ submitting, editor }}
               />
             </Margin>
+            <Row>
+              <Col sm={7}>
                 <FormMeta />
+              </Col>
+            </Row>
           </FormGroup>
           <Divider height={remcalc(12)} transparent />
         </Col>
@@ -127,8 +135,12 @@ const InputKeyValue = ({
           </FormLabel>
           <Margin top={0.5}>
             <Input onBlur={null} type="text" disabled={submitting} />
-          </Margin>
+            <Row>
+              <Col sm={7}>
                 <FormMeta />
+              </Col>
+            </Row>
+          </Margin>
         </FormGroup>
       </FlexItem>
     ) : null}
@@ -139,9 +151,13 @@ const InputKeyValue = ({
           <FormGroup name="value" field={Field} fluid>
             <FormLabel>{titleCase(type)} value</FormLabel>
             <Margin top={0.5}>
-              <Input onBlur={null} disabled={submitting} />
+              <Input onBlur={null} type="text" disabled={submitting} />
-            </Margin>
+              <Row>
+                <Col sm={7}>
                   <FormMeta />
+                </Col>
+              </Row>
+            </Margin>
           </FormGroup>
         </FlexItem>
       </Fragment>
@@ -160,6 +176,7 @@ export const KeyValue = ({
   expanded = true,
   submitting = false,
   pristine = true,
+  invalid = false,
   removing = false,
   handleSubmit,
   onToggleExpanded = () => null,
@@ -173,7 +190,6 @@ export const KeyValue = ({
   customHeader
 }) => {
   const handleHeaderClick = method === 'edit' && onToggleExpanded;
-
   return (
     <Card collapsed={!expanded} actionable={!expanded} shadow>
       <CardHeader
@@ -267,7 +283,7 @@ export const KeyValue = ({
                   </Button>
                   <Button
                     type="submit"
-                    disabled={pristine}
+                    disabled={pristine || invalid}
                     loading={submitting && !removing}
                     marginless
                   >