[opinionated] Improve focus/hover states of child EuiFilterButtons

cee-chen · cee-chen · commit 15cd531a3b79 · 2023-07-17T23:15:51.000-07:00
- (focus) add manually border radius rounding logic - it's verbose (due to popover anchors) but visually worth it

- (hover) force the notification badge to inherit both interactive and disabled cursors
diff --git a/src/components/filter_group/__snapshots__/filter_group.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_group.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiFilterGroup is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiFilterGroup testClass1 testClass2 emotion-euiFilterGroup-euiTestCss"
+  class="euiFilterGroup testClass1 testClass2 emotion-euiFilterGroup-uncompressed-euiTestCss"
   data-test-subj="test subject string"
 />
 `;
@@ -16,6 +16,6 @@ exports[`EuiFilterGroup props compressed is rendered 1`] = `
 
 exports[`EuiFilterGroup props fullWidth is rendered 1`] = `
 <div
-  class="euiFilterGroup emotion-euiFilterGroup-fullWidth"
+  class="euiFilterGroup emotion-euiFilterGroup-fullWidth-uncompressed"
 />
 `;
diff --git a/src/components/filter_group/filter_button.styles.ts b/src/components/filter_group/filter_button.styles.ts
@@ -51,6 +51,10 @@ export const euiFilterButtonStyles = (euiThemeContext: UseEuiTheme) => {
           text-decoration: underline;
         }
       }
+
+      &:focus-visible {
+        outline-offset: -${euiTheme.focus.width};
+      }
     `,
     withNext: css`
       & + .euiFilterButton {
@@ -99,7 +103,9 @@ export const euiFilterButtonChildStyles = ({ euiTheme }: UseEuiTheme) => {
       `,
     },
     notification: {
-      euiFilterButton__notification: css``,
+      euiFilterButton__notification: css`
+        cursor: inherit;
+      `,
       disabled: css`
         opacity: 0.5;
       `,
diff --git a/src/components/filter_group/filter_group.styles.ts b/src/components/filter_group/filter_group.styles.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { CSSProperties } from 'react';
 import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../services';
@@ -30,7 +31,6 @@ export const euiFilterGroupStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('max-width', '100%')}
       overflow: hidden;
 
-      border-radius: ${controlBorderRadius};
       background-color: ${backgroundColor};
       box-shadow: inset 0 0 0 ${euiTheme.border.width.thin} ${borderColor};
 
@@ -62,8 +62,13 @@ export const euiFilterGroupStyles = (euiThemeContext: UseEuiTheme) => {
     fullWidth: css`
       display: flex;
     `,
+    uncompressed: css`
+      border-radius: ${controlBorderRadius};
+      ${buttonChildrenBorderRadii(controlBorderRadius)}
+    `,
     compressed: css`
       border-radius: ${controlCompressedBorderRadius};
+      ${buttonChildrenBorderRadii(controlCompressedBorderRadius)}
 
       .euiFilterButton {
         ${logicalCSS('height', controlCompressedHeight)}
@@ -82,3 +87,26 @@ export const euiFilterGroupStyles = (euiThemeContext: UseEuiTheme) => {
     `,
   };
 };
+
+/**
+ * Small util for manually rounding the borders of the first and last EuiFilterButtons
+ * - this makes their focus rings appear nicely instead of being cutt off.
+ * 2nd selector accounts for EuiFilterButtons nested within popover/tooltip wrappers.
+ *
+ * NOTE: Do not use `logicalShorthandCSS()` here, as that will cause single buttons to not be rounded
+ */
+const buttonChildrenBorderRadii = (
+  radiusSize: CSSProperties['borderRadius']
+) => `
+  > :first-child,
+  > :first-child .euiFilterButton {
+    ${logicalCSS('border-top-left-radius', radiusSize)}
+    ${logicalCSS('border-bottom-left-radius', radiusSize)}
+  }
+
+  > :last-child,
+  > :last-child .euiFilterButton {
+    ${logicalCSS('border-top-right-radius', radiusSize)}
+    ${logicalCSS('border-bottom-right-radius', radiusSize)}
+  }
+`;
diff --git a/src/components/filter_group/filter_group.tsx b/src/components/filter_group/filter_group.tsx
@@ -39,7 +39,7 @@ export const EuiFilterGroup: FunctionComponent<EuiFilterGroupProps> = ({
   const cssStyles = [
     styles.euiFilterGroup,
     fullWidth && styles.fullWidth,
-    compressed && styles.compressed,
+    compressed ? styles.compressed : styles.uncompressed,
   ];
 
   const classes = classNames('euiFilterGroup', className);
