[Amsterdam] Unify focus states (#4242)

* Resetting _reset and updating focus ring mixin * Fix us usages of `euiCustomControlFocused` * Change base outline color to `currentColor` and fix up base buttons * Fixing up more instances - Breadcrumbs (not great) - Button groups (still missing on single-select) - Tabs - Links * Cleaning up the diff between focus and hover states * Consolidating focus background colors * Fix up usages of $euiFocusRingColor * Creating more mixins for interactive states and cleaning up focus ring mixin * Fixing cross-browser issues and removing faux outline option - Fixes up the checkbox,radio,switch outlines - Reduces opacity of focus backgrounds - Fixes link color in Ams. dark mode
elastic · Nov 16, 2020 · 3cef201 · 3cef201
1 parent 625c8e8
commit 3cef201
Show file tree

Hide file tree

Showing 48 changed files with 449 additions and 102 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,10 +1,12 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `eql` glyph in `EuiIcon` ([#4110](https://github.com/elastic/eui/pull/4110))
-- Added `testenv` mock for `htmlIdGenerator` ([#4212](https://github.com/elastic/eui/pull/4212)) 
+- Added `testenv` mock for `htmlIdGenerator` ([#4212](https://github.com/elastic/eui/pull/4212))
+- Added several Sass mixins for handling of unified focus/hover states ([#4242](https://github.com/elastic/eui/pull/4242))
 
 **Theme: Amsterdam**
 
+- Unify focus states by leaning into `outline` and restricting to keyboard navigation ([#4242](https://github.com/elastic/eui/pull/4242))
 - Removed faux border from `EuiAvatar` ([#4255](https://github.com/elastic/eui/pull/4255))
 
 ## [`30.3.0`](https://github.com/elastic/eui/tree/v30.3.0)

diff --git a/src-docs/src/views/button/button_ghost.js b/src-docs/src/views/button/button_ghost.js
@@ -17,7 +17,10 @@ export default () => {
   };
 
   return (
-    <EuiPanel paddingSize="l" className="guideDemo__ghostBackground">
+    <EuiPanel
+      paddingSize="l"
+      color="transparent"
+      className="guideDemo__ghostBackground">
       <EuiFlexGroup wrap gutterSize="s" alignItems="center">
         <EuiFlexItem grow={false}>
           <EuiButton color="ghost" onClick={() => {}}>

diff --git a/src-docs/src/views/icon/icon_colors.js b/src-docs/src/views/icon/icon_colors.js
@@ -47,6 +47,7 @@ export default () => (
           key={iconColor}
           style={{ width: '340px' }}>
           <EuiPanel
+            color="transparent"
             className={classNames({
               guideDemo__ghostBackground: iconColor === 'ghost',
             })}>

diff --git a/src/components/breadcrumbs/_breadcrumbs.scss b/src/components/breadcrumbs/_breadcrumbs.scss
@@ -47,7 +47,6 @@
 .euiBreadcrumbs--truncate {
   white-space: nowrap;
   flex-wrap: nowrap;
-  overflow: hidden;
 
   .euiBreadcrumb:not(.euiBreadcrumb--collapsed) {
     max-width: $euiBreadcrumbTruncateWidth;

diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
@@ -24,12 +24,8 @@
 
   &:focus {
     @include euiFocusRing;
-  }
-
-  &,
-  &:focus {
     // Override default `EuiButtonEmpty` :focus background to ensure better contrast
-    background: $euiColorEmptyShade;
+    background: $euiColorEmptyShade !important; // sass-lint:disable-line no-important
   }
 }
 

diff --git a/src/components/color_picker/color_stops/_color_stops.scss b/src/components/color_picker/color_stops/_color_stops.scss
@@ -57,7 +57,7 @@
   height: 100%;
 
   // Background color can potentially have opacity
-  // Pseudo element placed below the thumb to prevent the track from showing through 
+  // Pseudo element placed below the thumb to prevent the track from showing through
   &:before {
     content: '';
     display: block;

diff --git a/src/components/combo_box/combo_box_input/_combo_box_input.scss b/src/components/combo_box/combo_box_input/_combo_box_input.scss
@@ -2,11 +2,10 @@
   max-width: 100%;
 
   // Ensure that no input states are visible on the hidden input
-  input[aria-hidden='true'] {
+  input {
     // sass-lint:disable-block no-important
     border: none !important;
     box-shadow: none !important;
     outline: none !important;
   }
-
 }
diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_option.scss b/src/components/combo_box/combo_box_options_list/_combo_box_option.scss
@@ -14,7 +14,7 @@
 
   &.euiComboBoxOption-isFocused {
     cursor: pointer;
-    color: $euiColorPrimary;
+    color: $euiColorPrimaryText;
     background-color: $euiFocusBackgroundColor;
   }
 

diff --git a/src/components/context_menu/_context_menu_item.scss b/src/components/context_menu/_context_menu_item.scss
@@ -4,6 +4,7 @@
   width: 100%;
   text-align: left;
   color: $euiTextColor;
+  outline-offset: -$euiFocusRingSize;
 
   &:hover,
   &:focus {

diff --git a/src/components/context_menu/_context_menu_panel.scss b/src/components/context_menu/_context_menu_panel.scss
@@ -1,6 +1,7 @@
 .euiContextMenuPanel {
   width: 100%;
   visibility: visible;
+  outline-offset: -$euiFocusRingSize;
 
   &.euiContextMenuPanel-txInLeft {
     pointer-events: none;
@@ -36,9 +37,9 @@
 .euiContextMenuPanelTitle {
   @include euiPopoverTitle;
   padding: $euiSizeM;
-
   width: 100%;
   text-align: left;
+  outline-offset: -$euiFocusRingSize;
 
   &:enabled:hover,
   &:enabled:focus {

diff --git a/src/components/datagrid/_data_grid_column_sorting.scss b/src/components/datagrid/_data_grid_column_sorting.scss
@@ -26,18 +26,17 @@
 
 .euiDataGridColumnSorting__fieldList {
   @include euiYScrollWithShadows;
+  padding-top: $euiSizeXS;
+  padding-bottom: $euiSizeXS;
   max-height: 300px;
 }
 
 .euiDataGridColumnSorting__field {
+  @include euiInteractiveStates;
   display: block;
-  padding: $euiSizeXS;
+  padding: $euiSizeXS $euiSizeS;
   width: 100%;
-
-  &:focus {
-    background: $euiFocusBackgroundColor;
-    text-decoration: underline;
-  }
+  outline-offset: -$euiFocusRingSize;
 }
 
 .euiDataGridColumnSorting__orderButtons {

diff --git a/src/components/datagrid/_data_grid_header_row.scss b/src/components/datagrid/_data_grid_header_row.scss
@@ -32,13 +32,15 @@
 
   &:focus {
     @include euiDataGridCellFocus;
+    border-top: none;
   }
 
   // We only truncate if the cell is not a control column.
   &:not(.euiDataGridHeaderCell--controlColumn) {
 
     &:focus-within {
       @include euiDataGridCellFocus;
+      border-top: none;
     }
 
     .euiDataGridHeaderCell__button {
@@ -48,6 +50,7 @@
       display: flex;
       text-align: left;
       font-weight: $euiFontWeightBold;
+      outline: none;
     }
 
     .euiDataGridHeaderCell__content {

diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss
@@ -55,6 +55,7 @@ $euiDataGridStyles: (
   box-shadow: 0 0 0 2px $euiFocusRingColor;
   border-radius: 1px;
   z-index: 2; // Needed so it sits above potential striping in the next row
+  outline: none; // Remove outline as we're handling it manually
 }
 
 @mixin euiDataGridRowCell {

diff --git a/src/components/datagrid/column_sorting.tsx b/src/components/datagrid/column_sorting.tsx
@@ -211,7 +211,7 @@ export const useColumnSorting = (
                   isOpen={avilableColumnsisOpen}
                   closePopover={() => setAvailableColumnsIsOpen(false)}
                   anchorPosition="downLeft"
-                  panelPaddingSize="s"
+                  panelPaddingSize="none"
                   button={
                     <EuiButtonEmpty
                       size="xs"

diff --git a/src/components/filter_group/_filter_select_item.scss b/src/components/filter_group/_filter_select_item.scss
@@ -1,5 +1,6 @@
 .euiFilterSelectItem {
   @include euiFontSizeS;
+  @include euiInteractiveStates;
 
   padding: $euiSizeXS $euiSizeM;
   display: block; // Necessary to make sure it doesn't force the whole popover to be too wide
@@ -8,26 +9,12 @@
   color: $euiTextColor;
   border-bottom: $euiBorderThin;
   border-color: darken($euiColorLightestShade, 2%);
-
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-  }
+  outline-offset: -$euiFocusRingSize;
 
   &:focus,
   &-isFocused {
-    cursor: pointer;
+    @include euiFocusBackground;
     color: $euiColorPrimary;
-    background-color: $euiFocusBackgroundColor;
-  }
-
-  &[disabled] {
-    color: $euiColorMediumShade;
-    cursor: not-allowed;
-
-    &:hover {
-      text-decoration: none;
-    }
   }
 }
 

diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -71,10 +71,14 @@
     padding: 0 $euiSizeS;
     width: $euiSizeXL;
     border-radius: 0;
-    background-color: $euiFormInputGroupLabelBackground;
 
-    &:focus {
-      box-shadow: inset 0 0 0 2px $euiFocusRingColor;
+    &:not(:focus) {
+      background-color: $euiFormInputGroupLabelBackground;
+    }
+
+    &:focus-visible {
+      outline: 2px solid $euiFocusRingColor;
+      outline-offset: -2px;
     }
   }
 

diff --git a/src/components/form/range/_range_slider.scss b/src/components/form/range/_range_slider.scss
@@ -51,10 +51,14 @@
     border-radius: $euiRangeTrackRadius;
   }
 
-  &:focus,
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible,
   &--hasFocus {
     @include euiRangeThumbPerBrowser {
-      @include euiCustomControlFocused;
+      box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
     }
 
     ~ .euiRangeThumb {

diff --git a/src/components/form/super_select/_super_select.scss b/src/components/form/super_select/_super_select.scss
@@ -34,17 +34,8 @@
 
 .euiSuperSelect__item {
   @include euiFontSizeS;
+  @include euiInteractiveStates;
   padding: $euiSizeS;
-
-  &:hover:not(:disabled),
-  &:focus {
-    text-decoration: none;
-    background-color: $euiFocusBackgroundColor;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
 }
 
 .euiSuperSelect__item--hasDividers:not(:last-of-type) {

diff --git a/src/components/link/_link.scss b/src/components/link/_link.scss
@@ -1,4 +1,4 @@
-$textColors: (
+$euiLinkColors: (
   subdued: $euiTextSubduedColor,
   primary: $euiColorPrimaryText,
   secondary: $euiColorSecondaryText,
@@ -22,17 +22,19 @@ $textColors: (
   }
 
   // Create color modifiers based on the map
-  @each $name, $color in $textColors {
+  @each $name, $color in $euiLinkColors {
     &.euiLink--#{$name} {
       color: $color;
 
-      &:hover {
+      &:hover,
+      &:focus {
         color: darken($color, 10%);
+        text-decoration: underline;
       }
 
       &:focus {
-        outline: solid 3px transparentize($color, .9);
-        background-color: transparentize($color, .9);
+        @include euiFocusBackground($color);
+        @include euiFocusRing(null, 0);
       }
     }
   }

diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
@@ -1,7 +1,6 @@
 .euiListGroupItem {
   padding: 0;
   border-radius: $euiBorderRadius;
-  overflow: hidden;
   display: flex;
   align-items: center;
   transition: background-color $euiAnimSpeedFast;

diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
@@ -40,6 +40,7 @@
   &:focus {
     background-color: $euiFocusBackgroundColor;
     text-decoration: underline;
+    outline-offset: -$euiFocusRingSize;
 
     &::before {
       background-color: $euiColorLightShade;

diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss
@@ -112,15 +112,15 @@
   a:not([class]) {
     color: $euiLinkColor;
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: darken($euiLinkColor, 10%);
       text-decoration: underline;
     }
 
     &:focus {
-      text-decoration: underline;
-      outline: solid 3px transparentize($euiLinkColor, .9);
-      background-color: transparentize($euiLinkColor, .9);
+      @include euiFocusBackground($euiLinkColor);
+      @include euiFocusRing;
     }
   }
 

diff --git a/src/components/tree_view/tree_view.scss b/src/components/tree_view/tree_view.scss
@@ -9,14 +9,11 @@
 
 .euiTreeView__node {
   max-height: $euiSizeXL;
-  overflow: hidden;
-  cursor: pointer;
   line-height: $euiSizeXL;
 }
 
 .euiTreeView__node--expanded {
   max-height: 100vh;
-  overflow: auto;
 }
 
 .euiTreeView__nodeInner {
@@ -32,12 +29,13 @@
   text-align-last: left;
 
   &:focus {
-    box-shadow: inset 0 0 0 $euiSizeXS / 4 $euiFocusRingColor;
+    @include euiFocusRing('small', 'inner');
   }
 
   &:hover,
-  &:active {
-    background-color: tintOrShade($euiColorLightShade, 50%, 10%);
+  &:active,
+  &:focus {
+    @include euiFocusBackground($euiTextColor);
   }
 
   .euiTreeView__iconPlaceholder {
@@ -85,7 +83,6 @@
 
   .euiTreeView__node--expanded {
     max-height: 100vh;
-    overflow: auto;
   }
 }