From 5f1367b14eb2caf17bc0b7877dbd6c9d08d4adeb Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Mon, 2 Mar 2020 16:51:29 -0500
Subject: [PATCH] [Advanced Settings] Fix a11y of unsaved indicator (#58511)
 (#59071)

* [Advanced Settings] Fix a11y of unsaved indicator

- Reduced size of the indicator bar on the left
- Added icons with tooltips to indicated unsaved and invalid states

* Snaps

* Fix mobile view of bottom bar
---
 .../management_app/advanced_settings.scss     |  30 +-
 .../field/__snapshots__/field.test.tsx.snap   | 432 +++++++++++++++---
 .../management_app/components/field/field.tsx |  29 +-
 .../management_app/components/form/form.tsx   |  90 ++--
 4 files changed, 468 insertions(+), 113 deletions(-)

diff --git a/src/plugins/advanced_settings/public/management_app/advanced_settings.scss b/src/plugins/advanced_settings/public/management_app/advanced_settings.scss
index 016edb2817da8..66ae9cca3f83b 100644
--- a/src/plugins/advanced_settings/public/management_app/advanced_settings.scss
+++ b/src/plugins/advanced_settings/public/management_app/advanced_settings.scss
@@ -22,40 +22,42 @@
     margin-top: $euiSize;
   }
 
+  .mgtAdvancedSettings__fieldTitle {
+    padding-left: $euiSizeS;
+    margin-left: -$euiSizeS;
+  }
 
-  padding-left: $euiSizeS;
-  margin-left: -$euiSizeS;
-  &--unsaved {
+  &--unsaved .mgtAdvancedSettings__fieldTitle {
     // Simulates a left side border without shifting content
-    box-shadow: -$euiSizeXS 0px $euiColorSecondary;
+    box-shadow: -$euiSizeXS 0px $euiColorWarning;
   }
-  &--invalid {
+  &--invalid .mgtAdvancedSettings__fieldTitle {
     // Simulates a left side border without shifting content
     box-shadow: -$euiSizeXS 0px $euiColorDanger;
   }
-  @include internetExplorerOnly() {
-    min-height: 1px;
-  }
-  &Row {
-    padding-left: $euiSizeS;
-  }
 
   @include internetExplorerOnly {
+    min-height: 1px;
+
     &Row {
       min-height: 1px;
     }
   }
 }
 
+.mgtAdvancedSettings__fieldTitleUnsavedIcon {
+  margin-left: $euiSizeS;
+}
+
 .mgtAdvancedSettingsForm__unsavedCount {
-  @include euiBreakpoint('xs', 's') {
+  @include euiBreakpoint('xs') {
     display: none;
   }
 }
 
-.mgtAdvancedSettingsForm__unsavedCountMessage{
+.mgtAdvancedSettingsForm__unsavedCountMessage {
   // Simulates a left side border without shifting content
-  box-shadow: -$euiSizeXS 0px $euiColorSecondary;
+  box-shadow: -$euiSizeXS 0px $euiColorWarning;
   padding-left: $euiSizeS;
 }
 
diff --git a/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap b/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap
index 2f4d806e60244..dba1678339f24 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap
+++ b/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap
@@ -17,7 +17,12 @@ exports[`Field for array setting should render as read only if saving is disable
   fullWidth={true}
   title={
     <h3>
-      Array test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Array test setting
+      </span>
+      
       
     </h3>
   }
@@ -84,7 +89,12 @@ exports[`Field for array setting should render as read only with help text if ov
   fullWidth={true}
   title={
     <h3>
-      Array test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Array test setting
+      </span>
+      
       
     </h3>
   }
@@ -139,7 +149,11 @@ exports[`Field for array setting should render custom setting icon if it is cust
   fullWidth={true}
   title={
     <h3>
-      Array test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Array test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -152,6 +166,7 @@ exports[`Field for array setting should render custom setting icon if it is cust
         }
         type="asterisk"
       />
+      
     </h3>
   }
 >
@@ -195,7 +210,12 @@ exports[`Field for array setting should render default value if there is no user
   fullWidth={true}
   title={
     <h3>
-      Array test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Array test setting
+      </span>
+      
       
     </h3>
   }
@@ -240,7 +260,11 @@ exports[`Field for array setting should render unsaved value if there are unsave
   fullWidth={true}
   title={
     <h3>
-      Array test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Array test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -253,6 +277,13 @@ exports[`Field for array setting should render unsaved value if there are unsave
         }
         type="asterisk"
       />
+      <EuiIconTip
+        anchorClassName="mgtAdvancedSettings__fieldTitleUnsavedIcon"
+        aria-label="Unsaved"
+        color="warning"
+        content="Unsaved"
+        type="dot"
+      />
     </h3>
   }
 >
@@ -330,7 +361,12 @@ exports[`Field for array setting should render user value if there is user value
   fullWidth={true}
   title={
     <h3>
-      Array test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Array test setting
+      </span>
+      
       
     </h3>
   }
@@ -392,7 +428,12 @@ exports[`Field for boolean setting should render as read only if saving is disab
   fullWidth={true}
   title={
     <h3>
-      Boolean test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Boolean test setting
+      </span>
+      
       
     </h3>
   }
@@ -465,7 +506,12 @@ exports[`Field for boolean setting should render as read only with help text if
   fullWidth={true}
   title={
     <h3>
-      Boolean test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Boolean test setting
+      </span>
+      
       
     </h3>
   }
@@ -526,7 +572,11 @@ exports[`Field for boolean setting should render custom setting icon if it is cu
   fullWidth={true}
   title={
     <h3>
-      Boolean test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Boolean test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -539,6 +589,7 @@ exports[`Field for boolean setting should render custom setting icon if it is cu
         }
         type="asterisk"
       />
+      
     </h3>
   }
 >
@@ -588,7 +639,12 @@ exports[`Field for boolean setting should render default value if there is no us
   fullWidth={true}
   title={
     <h3>
-      Boolean test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Boolean test setting
+      </span>
+      
       
     </h3>
   }
@@ -639,7 +695,11 @@ exports[`Field for boolean setting should render unsaved value if there are unsa
   fullWidth={true}
   title={
     <h3>
-      Boolean test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Boolean test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -652,6 +712,13 @@ exports[`Field for boolean setting should render unsaved value if there are unsa
         }
         type="asterisk"
       />
+      <EuiIconTip
+        anchorClassName="mgtAdvancedSettings__fieldTitleUnsavedIcon"
+        aria-label="Unsaved"
+        color="warning"
+        content="Unsaved"
+        type="dot"
+      />
     </h3>
   }
 >
@@ -731,7 +798,12 @@ exports[`Field for boolean setting should render user value if there is user val
   fullWidth={true}
   title={
     <h3>
-      Boolean test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Boolean test setting
+      </span>
+      
       
     </h3>
   }
@@ -799,7 +871,12 @@ exports[`Field for image setting should render as read only if saving is disable
   fullWidth={true}
   title={
     <h3>
-      Image test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Image test setting
+      </span>
+      
       
     </h3>
   }
@@ -868,7 +945,12 @@ exports[`Field for image setting should render as read only with help text if ov
   fullWidth={true}
   title={
     <h3>
-      Image test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Image test setting
+      </span>
+      
       
     </h3>
   }
@@ -921,7 +1003,11 @@ exports[`Field for image setting should render custom setting icon if it is cust
   fullWidth={true}
   title={
     <h3>
-      Image test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Image test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -934,6 +1020,7 @@ exports[`Field for image setting should render custom setting icon if it is cust
         }
         type="asterisk"
       />
+      
     </h3>
   }
 >
@@ -979,7 +1066,12 @@ exports[`Field for image setting should render default value if there is no user
   fullWidth={true}
   title={
     <h3>
-      Image test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Image test setting
+      </span>
+      
       
     </h3>
   }
@@ -1026,7 +1118,11 @@ exports[`Field for image setting should render unsaved value if there are unsave
   fullWidth={true}
   title={
     <h3>
-      Image test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Image test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -1039,6 +1135,13 @@ exports[`Field for image setting should render unsaved value if there are unsave
         }
         type="asterisk"
       />
+      <EuiIconTip
+        anchorClassName="mgtAdvancedSettings__fieldTitleUnsavedIcon"
+        aria-label="Unsaved"
+        color="warning"
+        content="Unsaved"
+        type="dot"
+      />
     </h3>
   }
 >
@@ -1113,7 +1216,12 @@ exports[`Field for image setting should render user value if there is user value
   fullWidth={true}
   title={
     <h3>
-      Image test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Image test setting
+      </span>
+      
       
     </h3>
   }
@@ -1211,7 +1319,12 @@ exports[`Field for json setting should render as read only if saving is disabled
   fullWidth={true}
   title={
     <h3>
-      Json test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Json test setting
+      </span>
+      
       
     </h3>
   }
@@ -1302,7 +1415,12 @@ exports[`Field for json setting should render as read only with help text if ove
   fullWidth={true}
   title={
     <h3>
-      Json test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Json test setting
+      </span>
+      
       
     </h3>
   }
@@ -1378,7 +1496,11 @@ exports[`Field for json setting should render custom setting icon if it is custo
   fullWidth={true}
   title={
     <h3>
-      Json test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Json test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -1391,6 +1513,7 @@ exports[`Field for json setting should render custom setting icon if it is custo
         }
         type="asterisk"
       />
+      
     </h3>
   }
 >
@@ -1480,7 +1603,12 @@ exports[`Field for json setting should render default value if there is no user
   fullWidth={true}
   title={
     <h3>
-      Json test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Json test setting
+      </span>
+      
       
     </h3>
   }
@@ -1563,7 +1691,11 @@ exports[`Field for json setting should render unsaved value if there are unsaved
   fullWidth={true}
   title={
     <h3>
-      Json test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Json test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -1576,6 +1708,13 @@ exports[`Field for json setting should render unsaved value if there are unsaved
         }
         type="asterisk"
       />
+      <EuiIconTip
+        anchorClassName="mgtAdvancedSettings__fieldTitleUnsavedIcon"
+        aria-label="Unsaved"
+        color="warning"
+        content="Unsaved"
+        type="dot"
+      />
     </h3>
   }
 >
@@ -1677,7 +1816,12 @@ exports[`Field for json setting should render user value if there is user value
   fullWidth={true}
   title={
     <h3>
-      Json test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Json test setting
+      </span>
+      
       
     </h3>
   }
@@ -1760,7 +1904,12 @@ exports[`Field for markdown setting should render as read only if saving is disa
   fullWidth={true}
   title={
     <h3>
-      Markdown test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Markdown test setting
+      </span>
+      
       
     </h3>
   }
@@ -1848,7 +1997,12 @@ exports[`Field for markdown setting should render as read only with help text if
   fullWidth={true}
   title={
     <h3>
-      Markdown test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Markdown test setting
+      </span>
+      
       
     </h3>
   }
@@ -1924,7 +2078,11 @@ exports[`Field for markdown setting should render custom setting icon if it is c
   fullWidth={true}
   title={
     <h3>
-      Markdown test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Markdown test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -1937,6 +2095,7 @@ exports[`Field for markdown setting should render custom setting icon if it is c
         }
         type="asterisk"
       />
+      
     </h3>
   }
 >
@@ -2001,7 +2160,12 @@ exports[`Field for markdown setting should render default value if there is no u
   fullWidth={true}
   title={
     <h3>
-      Markdown test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Markdown test setting
+      </span>
+      
       
     </h3>
   }
@@ -2067,7 +2231,11 @@ exports[`Field for markdown setting should render unsaved value if there are uns
   fullWidth={true}
   title={
     <h3>
-      Markdown test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Markdown test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -2080,6 +2248,13 @@ exports[`Field for markdown setting should render unsaved value if there are uns
         }
         type="asterisk"
       />
+      <EuiIconTip
+        anchorClassName="mgtAdvancedSettings__fieldTitleUnsavedIcon"
+        aria-label="Unsaved"
+        color="warning"
+        content="Unsaved"
+        type="dot"
+      />
     </h3>
   }
 >
@@ -2174,7 +2349,12 @@ exports[`Field for markdown setting should render user value if there is user va
   fullWidth={true}
   title={
     <h3>
-      Markdown test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Markdown test setting
+      </span>
+      
       
     </h3>
   }
@@ -2257,7 +2437,12 @@ exports[`Field for number setting should render as read only if saving is disabl
   fullWidth={true}
   title={
     <h3>
-      Number test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Number test setting
+      </span>
+      
       
     </h3>
   }
@@ -2324,7 +2509,12 @@ exports[`Field for number setting should render as read only with help text if o
   fullWidth={true}
   title={
     <h3>
-      Number test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Number test setting
+      </span>
+      
       
     </h3>
   }
@@ -2379,7 +2569,11 @@ exports[`Field for number setting should render custom setting icon if it is cus
   fullWidth={true}
   title={
     <h3>
-      Number test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Number test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -2392,6 +2586,7 @@ exports[`Field for number setting should render custom setting icon if it is cus
         }
         type="asterisk"
       />
+      
     </h3>
   }
 >
@@ -2435,7 +2630,12 @@ exports[`Field for number setting should render default value if there is no use
   fullWidth={true}
   title={
     <h3>
-      Number test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Number test setting
+      </span>
+      
       
     </h3>
   }
@@ -2480,7 +2680,11 @@ exports[`Field for number setting should render unsaved value if there are unsav
   fullWidth={true}
   title={
     <h3>
-      Number test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Number test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -2493,6 +2697,13 @@ exports[`Field for number setting should render unsaved value if there are unsav
         }
         type="asterisk"
       />
+      <EuiIconTip
+        anchorClassName="mgtAdvancedSettings__fieldTitleUnsavedIcon"
+        aria-label="Unsaved"
+        color="warning"
+        content="Unsaved"
+        type="dot"
+      />
     </h3>
   }
 >
@@ -2566,7 +2777,12 @@ exports[`Field for number setting should render user value if there is user valu
   fullWidth={true}
   title={
     <h3>
-      Number test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Number test setting
+      </span>
+      
       
     </h3>
   }
@@ -2628,7 +2844,12 @@ exports[`Field for select setting should render as read only if saving is disabl
   fullWidth={true}
   title={
     <h3>
-      Select test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Select test setting
+      </span>
+      
       
     </h3>
   }
@@ -2711,7 +2932,12 @@ exports[`Field for select setting should render as read only with help text if o
   fullWidth={true}
   title={
     <h3>
-      Select test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Select test setting
+      </span>
+      
       
     </h3>
   }
@@ -2782,7 +3008,11 @@ exports[`Field for select setting should render custom setting icon if it is cus
   fullWidth={true}
   title={
     <h3>
-      Select test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Select test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -2795,6 +3025,7 @@ exports[`Field for select setting should render custom setting icon if it is cus
         }
         type="asterisk"
       />
+      
     </h3>
   }
 >
@@ -2854,7 +3085,12 @@ exports[`Field for select setting should render default value if there is no use
   fullWidth={true}
   title={
     <h3>
-      Select test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Select test setting
+      </span>
+      
       
     </h3>
   }
@@ -2915,7 +3151,11 @@ exports[`Field for select setting should render unsaved value if there are unsav
   fullWidth={true}
   title={
     <h3>
-      Select test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Select test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -2928,6 +3168,13 @@ exports[`Field for select setting should render unsaved value if there are unsav
         }
         type="asterisk"
       />
+      <EuiIconTip
+        anchorClassName="mgtAdvancedSettings__fieldTitleUnsavedIcon"
+        aria-label="Unsaved"
+        color="warning"
+        content="Unsaved"
+        type="dot"
+      />
     </h3>
   }
 >
@@ -3017,7 +3264,12 @@ exports[`Field for select setting should render user value if there is user valu
   fullWidth={true}
   title={
     <h3>
-      Select test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        Select test setting
+      </span>
+      
       
     </h3>
   }
@@ -3095,7 +3347,12 @@ exports[`Field for string setting should render as read only if saving is disabl
   fullWidth={true}
   title={
     <h3>
-      String test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        String test setting
+      </span>
+      
       
     </h3>
   }
@@ -3162,7 +3419,12 @@ exports[`Field for string setting should render as read only with help text if o
   fullWidth={true}
   title={
     <h3>
-      String test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        String test setting
+      </span>
+      
       
     </h3>
   }
@@ -3217,7 +3479,11 @@ exports[`Field for string setting should render custom setting icon if it is cus
   fullWidth={true}
   title={
     <h3>
-      String test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        String test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -3230,6 +3496,7 @@ exports[`Field for string setting should render custom setting icon if it is cus
         }
         type="asterisk"
       />
+      
     </h3>
   }
 >
@@ -3273,7 +3540,12 @@ exports[`Field for string setting should render default value if there is no use
   fullWidth={true}
   title={
     <h3>
-      String test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        String test setting
+      </span>
+      
       
     </h3>
   }
@@ -3318,7 +3590,11 @@ exports[`Field for string setting should render unsaved value if there are unsav
   fullWidth={true}
   title={
     <h3>
-      String test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        String test setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -3331,6 +3607,13 @@ exports[`Field for string setting should render unsaved value if there are unsav
         }
         type="asterisk"
       />
+      <EuiIconTip
+        anchorClassName="mgtAdvancedSettings__fieldTitleUnsavedIcon"
+        aria-label="Unsaved"
+        color="warning"
+        content="Unsaved"
+        type="dot"
+      />
     </h3>
   }
 >
@@ -3404,7 +3687,12 @@ exports[`Field for string setting should render user value if there is user valu
   fullWidth={true}
   title={
     <h3>
-      String test setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        String test setting
+      </span>
+      
       
     </h3>
   }
@@ -3466,7 +3754,12 @@ exports[`Field for stringWithValidation setting should render as read only if sa
   fullWidth={true}
   title={
     <h3>
-      String test validation setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        String test validation setting
+      </span>
+      
       
     </h3>
   }
@@ -3533,7 +3826,12 @@ exports[`Field for stringWithValidation setting should render as read only with
   fullWidth={true}
   title={
     <h3>
-      String test validation setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        String test validation setting
+      </span>
+      
       
     </h3>
   }
@@ -3588,7 +3886,11 @@ exports[`Field for stringWithValidation setting should render custom setting ico
   fullWidth={true}
   title={
     <h3>
-      String test validation setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        String test validation setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -3601,6 +3903,7 @@ exports[`Field for stringWithValidation setting should render custom setting ico
         }
         type="asterisk"
       />
+      
     </h3>
   }
 >
@@ -3644,7 +3947,12 @@ exports[`Field for stringWithValidation setting should render default value if t
   fullWidth={true}
   title={
     <h3>
-      String test validation setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        String test validation setting
+      </span>
+      
       
     </h3>
   }
@@ -3689,7 +3997,11 @@ exports[`Field for stringWithValidation setting should render unsaved value if t
   fullWidth={true}
   title={
     <h3>
-      String test validation setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        String test validation setting
+      </span>
       <EuiIconTip
         aria-label="Custom setting"
         color="primary"
@@ -3702,6 +4014,13 @@ exports[`Field for stringWithValidation setting should render unsaved value if t
         }
         type="asterisk"
       />
+      <EuiIconTip
+        anchorClassName="mgtAdvancedSettings__fieldTitleUnsavedIcon"
+        aria-label="Unsaved"
+        color="warning"
+        content="Unsaved"
+        type="dot"
+      />
     </h3>
   }
 >
@@ -3775,7 +4094,12 @@ exports[`Field for stringWithValidation setting should render user value if ther
   fullWidth={true}
   title={
     <h3>
-      String test validation setting
+      <span
+        className="mgtAdvancedSettings__fieldTitle"
+      >
+        String test validation setting
+      </span>
+      
       
     </h3>
   }
diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field.tsx b/src/plugins/advanced_settings/public/management_app/components/field/field.tsx
index d9c3752d1c0a5..18a1a365709d1 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/field.tsx
+++ b/src/plugins/advanced_settings/public/management_app/components/field/field.tsx
@@ -450,9 +450,24 @@ export class Field extends PureComponent<FieldProps> {
   }
 
   renderTitle(setting: FieldSetting) {
+    const { unsavedChanges } = this.props;
+    const isInvalid = unsavedChanges?.isInvalid;
+
+    const unsavedIconLabel = unsavedChanges
+      ? isInvalid
+        ? i18n.translate('advancedSettings.field.invalidIconLabel', {
+            defaultMessage: 'Invalid',
+          })
+        : i18n.translate('advancedSettings.field.unsavedIconLabel', {
+            defaultMessage: 'Unsaved',
+          })
+      : undefined;
+
     return (
       <h3>
-        {setting.displayName || setting.name}
+        <span className="mgtAdvancedSettings__fieldTitle">
+          {setting.displayName || setting.name}
+        </span>
         {setting.isCustom ? (
           <EuiIconTip
             type="asterisk"
@@ -470,6 +485,18 @@ export class Field extends PureComponent<FieldProps> {
         ) : (
           ''
         )}
+
+        {unsavedChanges ? (
+          <EuiIconTip
+            anchorClassName="mgtAdvancedSettings__fieldTitleUnsavedIcon"
+            type={isInvalid ? 'alert' : 'dot'}
+            color={isInvalid ? 'danger' : 'warning'}
+            aria-label={unsavedIconLabel}
+            content={unsavedIconLabel}
+          />
+        ) : (
+          ''
+        )}
       </h3>
     );
   }
diff --git a/src/plugins/advanced_settings/public/management_app/components/form/form.tsx b/src/plugins/advanced_settings/public/management_app/components/form/form.tsx
index ef433dd990d33..c859e8fdd7136 100644
--- a/src/plugins/advanced_settings/public/management_app/components/form/form.tsx
+++ b/src/plugins/advanced_settings/public/management_app/components/form/form.tsx
@@ -331,54 +331,56 @@ export class Form extends PureComponent<FormProps> {
     });
     return (
       <EuiBottomBar className={bottomBarClasses} data-test-subj="advancedSetting-bottomBar">
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+        <EuiFlexGroup
+          justifyContent="spaceBetween"
+          alignItems="center"
+          responsive={false}
+          gutterSize="s"
+        >
           <EuiFlexItem grow={false} className="mgtAdvancedSettingsForm__unsavedCount">
             <p id="aria-describedby.countOfUnsavedSettings">{this.renderCountOfUnsaved()}</p>
           </EuiFlexItem>
+          <EuiFlexItem />
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="s">
-              <EuiFlexItem grow={false}>
-                <EuiButtonEmpty
-                  color="ghost"
-                  size="s"
-                  iconType="cross"
-                  onClick={this.clearAllUnsaved}
-                  aria-describedby="aria-describedby.countOfUnsavedSettings"
-                  data-test-subj="advancedSetting-cancelButton"
-                >
-                  {i18n.translate('advancedSettings.form.cancelButtonLabel', {
-                    defaultMessage: 'Cancel changes',
-                  })}
-                </EuiButtonEmpty>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiToolTip
-                  content={
-                    areChangesInvalid &&
-                    i18n.translate('advancedSettings.form.saveButtonTooltipWithInvalidChanges', {
-                      defaultMessage: 'Fix invalid settings before saving.',
-                    })
-                  }
-                >
-                  <EuiButton
-                    className="mgtAdvancedSettingsForm__button"
-                    disabled={areChangesInvalid}
-                    color="secondary"
-                    fill
-                    size="s"
-                    iconType="check"
-                    onClick={this.saveAll}
-                    aria-describedby="aria-describedby.countOfUnsavedSettings"
-                    isLoading={this.state.loading}
-                    data-test-subj="advancedSetting-saveButton"
-                  >
-                    {i18n.translate('advancedSettings.form.saveButtonLabel', {
-                      defaultMessage: 'Save changes',
-                    })}
-                  </EuiButton>
-                </EuiToolTip>
-              </EuiFlexItem>
-            </EuiFlexGroup>
+            <EuiButtonEmpty
+              color="ghost"
+              size="s"
+              iconType="cross"
+              onClick={this.clearAllUnsaved}
+              aria-describedby="aria-describedby.countOfUnsavedSettings"
+              data-test-subj="advancedSetting-cancelButton"
+            >
+              {i18n.translate('advancedSettings.form.cancelButtonLabel', {
+                defaultMessage: 'Cancel changes',
+              })}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiToolTip
+              content={
+                areChangesInvalid &&
+                i18n.translate('advancedSettings.form.saveButtonTooltipWithInvalidChanges', {
+                  defaultMessage: 'Fix invalid settings before saving.',
+                })
+              }
+            >
+              <EuiButton
+                className="mgtAdvancedSettingsForm__button"
+                disabled={areChangesInvalid}
+                color="secondary"
+                fill
+                size="s"
+                iconType="check"
+                onClick={this.saveAll}
+                aria-describedby="aria-describedby.countOfUnsavedSettings"
+                isLoading={this.state.loading}
+                data-test-subj="advancedSetting-saveButton"
+              >
+                {i18n.translate('advancedSettings.form.saveButtonLabel', {
+                  defaultMessage: 'Save changes',
+                })}
+              </EuiButton>
+            </EuiToolTip>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiBottomBar>