[Amsterdam] Fixing some focus states (#4876)

* Removing a few intrusive focus rings
* [EuiHeaderBreadcrumbs] Fixing focus states
* [EuiButtonGroup] Prioritizing visible focus rings over :focus-visible support
* Fix position of popover panel outline
* Addressing some feedback for color picker, context menu, and accordion
* Also fixing EuiBetaBadge and disabled EuiCard
* [EuiCard] Allowing a `hasBorder` option
* Fixed EuiPanel border radius

CHANGELOG.md

@@ -6,6 +6,12 @@
 
 - Fixed DataGrid footer and header rows jumps in Firefox ([#4869](https://github.com/elastic/eui/issues/4869))
 
+**Theme: Amsterdam**
+
+- Fixed more unique focus states using `outline` ([#4876](https://github.com/elastic/eui/pull/4876))
+- Fixed `border-radius` value of `EuiPanel` ([#4876](https://github.com/elastic/eui/pull/4876))
+- Fixed `disabled` background color of `EuiCard` for better visiblity on subdued backgrounds ([#4876](https://github.com/elastic/eui/pull/4876))
+
 ## [`34.4.0`](https://github.com/elastic/eui/tree/v34.4.0)
 
 - Added draggable highlight area to `EuiDualRange` ([#4776](https://github.com/elastic/eui/pull/4776))

src-docs/src/views/home/home_view.js

@@ -122,6 +122,7 @@ export const HomeView = () => (
         justifyContent="spaceBetween">
         <EuiFlexItem grow={false} className="guideHomePage__blockformCard">
           <EuiCard
+            hasBorder
             href="#/navigation/button"
             textAlign="left"
             image={imageButtons}
@@ -131,6 +132,7 @@ export const HomeView = () => (
         </EuiFlexItem>
         <EuiFlexItem grow={false} className="guideHomePage__blockformCard">
           <EuiCard
+            hasBorder
             href="#/display/card"
             textAlign="left"
             image={imageCards}
@@ -140,6 +142,7 @@ export const HomeView = () => (
         </EuiFlexItem>
         <EuiFlexItem grow={false} className="guideHomePage__blockformCard">
           <EuiCard
+            hasBorder
             href="#/elastic-charts/creating-charts"
             textAlign="left"
             image={imageCharts}
@@ -149,6 +152,7 @@ export const HomeView = () => (
         </EuiFlexItem>
         <EuiFlexItem grow={false} className="guideHomePage__blockformCard">
           <EuiCard
+            hasBorder
             href="#/layout/flex"
             textAlign="left"
             image={imageFlexgrid}
@@ -158,6 +162,7 @@ export const HomeView = () => (
         </EuiFlexItem>
         <EuiFlexItem grow={false} className="guideHomePage__blockformCard">
           <EuiCard
+            hasBorder
             href="#/forms/form-layouts"
             textAlign="left"
             image={imageForms}
@@ -167,6 +172,7 @@ export const HomeView = () => (
         </EuiFlexItem>
         <EuiFlexItem grow={false} className="guideHomePage__blockformCard">
           <EuiCard
+            hasBorder
             href="#/display/icons"
             textAlign="left"
             image={imageIcons}
@@ -176,6 +182,7 @@ export const HomeView = () => (
         </EuiFlexItem>
         <EuiFlexItem grow={false} className="guideHomePage__blockformCard">
           <EuiCard
+            hasBorder
             href="#/layout/page"
             textAlign="left"
             image={imagePages}
@@ -185,6 +192,7 @@ export const HomeView = () => (
         </EuiFlexItem>
         <EuiFlexItem grow={false} className="guideHomePage__blockformCard">
           <EuiCard
+            hasBorder
             href="#/tabular-content/tables"
             textAlign="left"
             image={imageTables}
@@ -194,6 +202,7 @@ export const HomeView = () => (
         </EuiFlexItem>
         <EuiFlexItem grow={false} className="guideHomePage__blockformCard">
           <EuiCard
+            hasBorder
             href="#/display/text"
             textAlign="left"
             image={imageText}

src/components/accordion/_accordion.scss

@@ -20,6 +20,7 @@
   &:focus {
     .euiAccordion__iconWrapper {
       @include euiAccordionIconFocus;
+      outline: none; // The `outline` gets applied to the whole button, we don't need a second one on the icon
     }
   }
 }
@@ -73,6 +74,10 @@
   transition:
     height $euiAnimSpeedNormal $euiAnimSlightResistance,
     opacity $euiAnimSpeedNormal $euiAnimSlightResistance;
+
+  &:focus {
+    outline: none; // Hide focus ring because of `tabindex=-1` on Safari
+  }
 }
 
 $paddingSizes: (

src/components/badge/beta_badge/_beta_badge.scss

@@ -16,6 +16,10 @@
 
   &:focus {
     @include euiFocusRing;
+    // Can't use `currentColor` because of possible white text, so always keep it black
+    outline-color: lightOrDarkTheme($euiColorInk, $euiColorGhost);
+    // The rounded corners of the badge doesn't match well with the outline, so push it outward
+    outline-offset: 2px;
   }
 
   &:not(.euiBetaBadge--hollow) {
@@ -27,7 +31,6 @@
     line-height: $euiSize + $euiSizeXS;
     padding: 0 $euiSizeM;
   }
-
 }
 
 // When it's just an icon, make it a circle
@@ -81,4 +84,4 @@
   &.euiBetaBadge-isClickable {
     color: chooseLightOrDarkText($backgroundColor, $euiColorGhost, $euiColorInk);
   }
-}
+}

src/components/card/__snapshots__/card.test.tsx.snap

@@ -442,6 +442,31 @@ exports[`EuiCard props footer 1`] = `
 </div>
 `;
 
+exports[`EuiCard props hasBorder 1`] = `
+<div
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--hasBorder euiCard euiCard--centerAligned"
+>
+  <div
+    class="euiCard__content"
+  >
+    <span
+      class="euiTitle euiTitle--small euiCard__title"
+      id="generated-idTitle"
+    >
+      Card title
+    </span>
+    <div
+      class="euiText euiText--small euiCard__description"
+      id="generated-idDescription"
+    >
+      <p>
+        Card description
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiCard props horizontal 1`] = `
 <div
   class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned euiCard--horizontal"

src/components/card/_card.scss

@@ -18,6 +18,7 @@
     transform: none !important;
     box-shadow: none !important;
     text-decoration: none !important;
+    background-color: transparentize($euiButtonColorDisabled, .9) !important;
     color: $euiColorDisabledText;
 
     .euiCard__top {

src/components/card/card.test.tsx

@@ -65,6 +65,14 @@ describe('EuiCard', () => {
       expect(component).toMatchSnapshot();
     });
 
+    test('hasBorder', () => {
+      const component = render(
+        <EuiCard title="Card title" description="Card description" hasBorder />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
     test('horizontal', () => {
       const component = render(
         <EuiCard

src/components/card/card.tsx

@@ -165,6 +165,10 @@ export type EuiCardProps = Omit<CommonProps, 'aria-label'> &
      * Adds a button to the bottom of the card to allow for in-place selection
      */
     selectable?: EuiCardSelectProps;
+    /**
+     * Use a border style of card instead of shadow
+     */
+    hasBorder?: EuiPanelProps['hasBorder'];
   } & (
     | {
         // description becomes optional when children is present

src/components/color_picker/_hue.scss

@@ -14,7 +14,6 @@
   margin: $euiSizeXS 0;
   position: relative;
 
-
   // To make our fake range skinny, we add some pseudo borders to fake the height of the gradient
   &:before,
   &:after {
@@ -82,5 +81,8 @@
       box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
       border-color: $euiColorPrimary;
     }
+
+    // Focus is added to the thumb ^^ so we can remove the outer wrapping outline
+    outline: none;
   }
 }

src/components/color_picker/_saturation.scss

@@ -47,8 +47,11 @@
   }
 
   &:focus {
+    outline: none; // Hide focus ring because of `tabindex=0` on Safari
+
     .euiSaturation__indicator {
-      @include euiFocusRing;
+      box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
+      border-color: $euiColorPrimary;
     }
   }
 }

src/components/context_menu/__snapshots__/context_menu.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`EuiContextMenu can pass-through horizontal rule props 1`] = `
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
-    tabindex="0"
+    tabindex="-1"
   >
     <div
       class="euiContextMenuPanelTitle"
@@ -42,7 +42,7 @@ exports[`EuiContextMenu panel item can be a separator line 1`] = `
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
-    tabindex="0"
+    tabindex="-1"
   >
     <div
       class="euiContextMenuPanelTitle"
@@ -98,7 +98,7 @@ exports[`EuiContextMenu panel item can contain JSX 1`] = `
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
-    tabindex="0"
+    tabindex="-1"
   >
     <div
       class="euiContextMenuPanelTitle"
@@ -142,7 +142,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
-    tabindex="0"
+    tabindex="-1"
   >
     <button
       class="euiContextMenuPanelTitle"
@@ -181,7 +181,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutRight"
-    tabindex="0"
+    tabindex="-1"
   >
     <button
       class="euiContextMenuPanelTitle"
@@ -212,7 +212,7 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
   </div>
   <div
     class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInRight"
-    tabindex="0"
+    tabindex="-1"
   >
     <button
       class="euiContextMenuPanelTitle"
@@ -301,7 +301,7 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
-    tabindex="0"
+    tabindex="-1"
   >
     <button
       class="euiContextMenuPanelTitle"
@@ -339,7 +339,7 @@ exports[`EuiContextMenu props size m is rendered 1`] = `
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
-    tabindex="0"
+    tabindex="-1"
   >
     <button
       class="euiContextMenuPanelTitle"
@@ -377,7 +377,7 @@ exports[`EuiContextMenu props size s is rendered 1`] = `
 >
   <div
     class="euiContextMenuPanel euiContextMenu__panel"
-    tabindex="0"
+    tabindex="-1"
   >
     <button
       class="euiContextMenuPanelTitle euiContextMenuPanelTitle--small"