ui: Fix the bug of around create volume labels field

UX improvement: When the labelName and labelValue are not empty, we change the color of the button to indicate clicking on the `Add` button is necessary. Refs: #3303 #3328
scality · May 4, 2021 · a8e8c5c · a8e8c5c
1 parent 873c006
commit a8e8c5c
Showing 1 changed file with 26 additions and 9 deletions.
diff --git a/ui/src/containers/CreateVolume.js b/ui/src/containers/CreateVolume.js
@@ -151,9 +151,10 @@ const LabelsKeyValue = styled.div`
 
 const LabelsValue = styled.div`
   width: 200px;
-  padding: ${padding.small} 0;
-  margin-right: ${padding.small};
+  padding-top: ${padding.small};
+  margin-right: 12px;
   color: ${(props) => props.theme.brand.textPrimary};
+  word-wrap: break-word;
 `;
 
 const TitleWrapper = styled.div`
@@ -164,13 +165,17 @@ const TitleWrapper = styled.div`
 const LabelsName = styled(LabelsValue)`
   font-weight: ${fontWeight.bold};
   color: ${(props) => props.theme.brand.textPrimary};
+  word-wrap: break-word;
 `;
 
 const CheckboxContainer = styled.div`
   padding: ${padding.base} 0 0 ${padding.small};
   .text {
     font-size: ${fontSize.base};
   }
+  .sc-checkbox {
+    display: flex;
+  }
 `;
 
 const MultiCreationFormContainer = styled.div`
@@ -560,6 +565,7 @@ const CreateVolume = (props) => {
                             onChange={(e) => {
                               setLabelName(e.target.value);
                             }}
+                            onBlur={handleOnBlur}
                           />
                           <Input
                             name="labelValue"
@@ -568,14 +574,25 @@ const CreateVolume = (props) => {
                             onChange={(e) => {
                               setLabelValue(e.target.value);
                             }}
+                            onBlur={handleOnBlur}
                           />
-                          <Button
-                            text={intl.translate('add')}
-                            type="button"
-                            onClick={addLabel}
-                            data-cy="add-volume-labels-button"
-                            outlined
-                          />
+                          {touched.labelName && touched.labelValue ? (
+                            <Button
+                              text={intl.translate('add')}
+                              type="button"
+                              onClick={addLabel}
+                              data-cy="add-volume-labels-button"
+                              variant={'buttonSecondary'}
+                            />
+                          ) : (
+                            <Button
+                              text={intl.translate('add')}
+                              type="button"
+                              onClick={addLabel}
+                              data-cy="add-volume-labels-button"
+                              outlined
+                            />
+                          )}
                         </LabelsForm>
                         {!!Object.keys(values.labels).length && (
                           <LabelsList>