Merge pull request #81 from smiclea/CORWEB-101

Change required text input style based on Sketch CORWEB-101

src/components/AddCloudConnection/AddCloudConnection.js

@@ -441,13 +441,13 @@ class AddCloudConnection extends Reflux.Component {
     switch (field.type) {
       case "text":
         returnValue = (
-          <div className={"form-group " + (this.isValid(field) ? "" : s.error)} key={"cloudField_" + field.name}>
-            <div className="input-label">
-              {field.label + (field.required ? " *" : "")}
-            </div>
+          <div className={"form-group " + (this.isValid(field) ? "" : s.error) + (field.required ? ' required' : '')}
+            key={"cloudField_" + field.name}
+          >
+            <div className="input-label">{field.label}</div>
             <input
               type="text"
-              placeholder={field.label + (field.required ? " *" : "")}
+              placeholder={field.label}
               onChange={(e) => this.handleCloudFieldChange(e, field)}
               value={this.state.currentCloudData[field.name]}
             />
@@ -456,13 +456,13 @@ class AddCloudConnection extends Reflux.Component {
         break;
       case "password":
         returnValue = (
-          <div className={"form-group " + (this.isValid(field) ? "" : s.error)} key={"cloudField_" + field.name}>
-            <div className="input-label">
-              {field.label + (field.required ? " *" : "")}
-            </div>
+          <div className={"form-group " + (this.isValid(field) ? "" : s.error) + (field.required ? ' required' : '')}
+            key={"cloudField_" + field.name}
+          >
+            <div className="input-label">{field.label}</div>
             <input
               type="password"
-              placeholder={field.label + (field.required ? " *" : "")}
+              placeholder={field.label}
               onChange={(e) => this.handleCloudFieldChange(e, field)}
               value={this.state.currentCloudData[field.name]}
             />
@@ -557,14 +557,14 @@ class AddCloudConnection extends Reflux.Component {
         </div>
         <div className={s.cloudFields + (cloud.endpoint.fields.length > 6 ? " " + s.larger : "")}>
           <div className={"form-group " + (this.state.cloudFormsSubmitted &&
-            this.state.connectionName.trim().length == 0 ? s.error : "")}
+            this.state.connectionName.trim().length == 0 ? s.error : "") + ' required'}
           >
             <div className="input-label">
-              Endpoint Name *
+              Endpoint Name
             </div>
             <input
               type="text"
-              placeholder="Endpoint Name *"
+              placeholder="Endpoint Name"
               onChange={(e) => this.handleChangeName(e)}
               value={this.state.connectionName}
             />

src/components/AddCloudConnection/AddCloudConnection.scss

@@ -46,6 +46,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     margin-bottom: 16px;
     margin-left: 64px;
     width: 224px;
+    position: relative;
     :global(.input-label) {
       font-weight: $weight-regular;
       font-size: 10px;
@@ -54,6 +55,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       text-transform: uppercase;
       margin-bottom: 2px;
     }
+
+    &:global(.required) {
+      &:after {
+        content: " ";
+        position: absolute;
+        right: 8px;
+        bottom: 11px;
+        width: 8px;
+        height: 10px;
+        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI4cHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDggMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+SWNvbi1TdGFyPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iVGV4dC1GaWVsZC1QbGFjZWhvbGRlci1SZXF1aXJlZC1BY3RpdmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNzIuMDAwMDAwLCAtMTEuMDAwMDAwKSIgc3Ryb2tlPSIjMDA0NENBIj4gICAgICAgICAgICA8ZyBpZD0iSWNvbi1TdGFyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNzIuMDAwMDAwLCAxMi4wMDAwMDApIj4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTQsMCBMNCw4IiBpZD0iTGluZSI+PC9wYXRoPiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOCwyIEwwLDYiIGlkPSJMaW5lLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuMDAwMDAwLCA0LjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtNC4wMDAwMDAsIC00LjAwMDAwMCkgIj48L3BhdGg+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04LDIgTDAsNiIgaWQ9IkxpbmUtQ29weSI+PC9wYXRoPiAgICAgICAgICAgIDwvZz4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
+      }
+
+      input[type="text"], input[type="password"] {
+        padding-right: 22px;
+      }
+    } 
   }
   input[type="text"], input[type="password"] {
     width: 100%;

src/components/WizardOptions/WizardOptions.js

@@ -153,6 +153,9 @@ class WizardOptions extends Reflux.Component {
     if (!this.isValid(field)) {
       extraClasses += " error"
     }
+    if (field.required) {
+      extraClasses += ' required'
+    }
     switch (field.type) {
       case "text":
         returnValue = (
@@ -161,12 +164,12 @@ class WizardOptions extends Reflux.Component {
             key={"cloudField_" + field.name}
           >
             <div className="input-label">
-              {field.label + (field.required ? " *" : "")}
+              {field.label}
               <InfoIcon text={Helper.getCloudFieldDescription(field.name)} />
             </div>
             <input
               type="text"
-              placeholder={field.label + (field.required ? " *" : "")}
+              placeholder={field.label}
               onChange={(e) => this.handleOptionsFieldChange(e, field)}
               value={this.state.destination_environment[field.name]}
             />
@@ -179,13 +182,13 @@ class WizardOptions extends Reflux.Component {
             className={"form-group " + extraClasses}
             key={"cloudField_" + field.name}
           >
-            <div className="input-label">{
-              field.label + (field.required ? " *" : "")}
+            <div className="input-label">
+              {field.label}
               <InfoIcon text={Helper.getCloudFieldDescription(field.name)} />
             </div>
             <input
               type="password"
-              placeholder={field.label + (field.required ? " *" : "")}
+              placeholder={field.label}
               onChange={(e) => this.handleOptionsFieldChange(e, field)}
               value={this.state.destination_environment[field.name]}
             />

src/components/WizardOptions/WizardOptions.scss

@@ -86,6 +86,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       flex-grow: 1;
       margin-left: 304px;
       margin-bottom: 32px;
+      position: relative;
+      &.required {
+        &:after {
+          content: " ";
+          position: absolute;
+          right: 8px;
+          bottom: 11px;
+          width: 8px;
+          height: 10px;
+          background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI4cHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDggMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+SWNvbi1TdGFyPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+ICAgICAgICA8ZyBpZD0iVGV4dC1GaWVsZC1QbGFjZWhvbGRlci1SZXF1aXJlZC1BY3RpdmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNzIuMDAwMDAwLCAtMTEuMDAwMDAwKSIgc3Ryb2tlPSIjMDA0NENBIj4gICAgICAgICAgICA8ZyBpZD0iSWNvbi1TdGFyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNzIuMDAwMDAwLCAxMi4wMDAwMDApIj4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTQsMCBMNCw4IiBpZD0iTGluZSI+PC9wYXRoPiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOCwyIEwwLDYiIGlkPSJMaW5lLUNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuMDAwMDAwLCA0LjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtNC4wMDAwMDAsIC00LjAwMDAwMCkgIj48L3BhdGg+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04LDIgTDAsNiIgaWQ9IkxpbmUtQ29weSI+PC9wYXRoPiAgICAgICAgICAgIDwvZz4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
+        }
+
+        input[type="text"], input[type="password"] {
+          padding-right: 22px;
+        }
+      } 
       &.required, &.showAdvanced {
         display: block;
       }