[Advanced Settings] Fix a11y of unsaved indicator (elastic#58511)

* [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
dgieselaar · Mar 3, 2020 · 5b597c6 · 5b597c6
1 parent 16ac2ed
commit 5b597c6
Show file tree

Hide file tree

Showing 4 changed files with 468 additions and 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
@@ -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;
 }