[EuiFilterButton] DOM text wrapper cleanup (elastic#7444)

tkajtoch · Jan 5, 2024 · e41ca57 · e41ca57
1 parent 47a7eed
commit e41ca57
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 229 deletions.
diff --git a/changelogs/upcoming/7444.md b/changelogs/upcoming/7444.md
@@ -0,0 +1,3 @@
+**Deprecations**
+
+- Updated `EuiFilterButton` to remove the second `.euiFilterButton__textShift` span wrapper. Target `.euiFilterButton__text` instead
diff --git a/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap b/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
@@ -11,12 +11,8 @@ exports[`EuiFilterButton does not render a badge or count if numFilters is not p
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
-    >
-      <span
-        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
-      />
-    </span>
+      class="euiFilterButton__text emotion-euiFilterButton__text"
+    />
   </span>
 </button>
 `;
@@ -30,12 +26,8 @@ exports[`EuiFilterButton props badgeColor renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
-    >
-      <span
-        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
-      />
-    </span>
+      class="euiFilterButton__text emotion-euiFilterButton__text"
+    />
   </span>
 </button>
 `;
@@ -49,12 +41,8 @@ exports[`EuiFilterButton props grow can be turned off 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
-    >
-      <span
-        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
-      />
-    </span>
+      class="euiFilterButton__text emotion-euiFilterButton__text"
+    />
   </span>
 </button>
 `;
@@ -68,12 +56,8 @@ exports[`EuiFilterButton props iconType and iconSide renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon"
   >
     <span
-      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
-    >
-      <span
-        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
-      />
-    </span>
+      class="euiFilterButton__text emotion-euiFilterButton__text"
+    />
     <span
       color="inherit"
       data-euiicon-type="user"
@@ -92,12 +76,8 @@ exports[`EuiFilterButton props isDisabled renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
-    >
-      <span
-        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
-      />
-    </span>
+      class="euiFilterButton__text emotion-euiFilterButton__text"
+    />
   </span>
 </button>
 `;
@@ -111,12 +91,8 @@ exports[`EuiFilterButton props isSelected renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
-    >
-      <span
-        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
-      />
-    </span>
+      class="euiFilterButton__text emotion-euiFilterButton__text"
+    />
   </span>
 </button>
 `;
@@ -130,18 +106,14 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters renders 1`]
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
+      class="euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
+    />
+    <span
+      aria-label="5 active filters"
+      class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-accent-euiFilterButton__notification-badgeContent"
+      role="marquee"
     >
-      <span
-        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
-      />
-      <span
-        aria-label="5 active filters"
-        class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-accent-euiFilterButton__notification-badgeContent"
-        role="marquee"
-      >
-        5
-      </span>
+      5
     </span>
   </span>
 </button>
@@ -156,18 +128,14 @@ exports[`EuiFilterButton props numFilters renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
+      class="euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
+    />
+    <span
+      aria-label="5 available filters"
+      class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-subdued-euiFilterButton__notification-badgeContent"
+      role="marquee"
     >
-      <span
-        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
-      />
-      <span
-        aria-label="5 available filters"
-        class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-subdued-euiFilterButton__notification-badgeContent"
-        role="marquee"
-      >
-        5
-      </span>
+      5
     </span>
   </span>
 </button>
@@ -182,12 +150,8 @@ exports[`EuiFilterButton props type renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
-    >
-      <span
-        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
-      />
-    </span>
+      class="euiFilterButton__text emotion-euiFilterButton__text"
+    />
   </span>
 </button>
 `;
@@ -201,12 +165,8 @@ exports[`EuiFilterButton props withNext renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
-    >
-      <span
-        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
-      />
-    </span>
+      class="euiFilterButton__text emotion-euiFilterButton__text"
+    />
   </span>
 </button>
 `;
@@ -222,12 +182,8 @@ exports[`EuiFilterButton renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
-    >
-      <span
-        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
-      />
-    </span>
+      class="euiFilterButton__text emotion-euiFilterButton__text"
+    />
   </span>
 </button>
 `;
@@ -243,18 +199,14 @@ exports[`EuiFilterButton renders zero properly 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
+      class="euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
+    />
+    <span
+      aria-label="0 available filters"
+      class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-subdued-euiFilterButton__notification-badgeContent"
+      role="marquee"
     >
-      <span
-        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
-      />
-      <span
-        aria-label="0 available filters"
-        class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-subdued-euiFilterButton__notification-badgeContent"
-        role="marquee"
-      >
-        0
-      </span>
+      0
     </span>
   </span>
 </button>

diff --git a/src/components/filter_group/filter_button.styles.ts b/src/components/filter_group/filter_button.styles.ts
@@ -46,7 +46,7 @@ export const euiFilterButtonStyles = (euiThemeContext: UseEuiTheme) => {
         /* Remove underline from whole button so notifications don't get the underline */
         text-decoration: none;
 
-        .euiFilterButton__textShift {
+        .euiFilterButton__text {
           /* And put it only on the actual text part */
           text-decoration: underline;
         }
@@ -83,19 +83,18 @@ export const euiFilterButtonChildStyles = ({ euiTheme }: UseEuiTheme) => {
     content: {
       euiFilterButton__content: css``,
       hasIcon: css`
-        justify-content: space-between;
+        /* Align the dropdown arrow/caret to the right */
+        & > .euiIcon:last-child {
+          ${logicalCSS('margin-left', 'auto')}
+        }
       `,
     },
     text: {
-      euiFilterButton__text: css``,
-      hasNotification: css`
-        display: flex;
-        align-items: center;
-        gap: ${euiTheme.size.s};
-      `,
-      euiFilterButton__textShift: css`
+      euiFilterButton__text: css`
         ${euiTextShift('bold', 'data-text', euiTheme)}
         ${euiTextTruncate()}
+      `,
+      hasNotification: css`
         ${logicalCSS(
           'min-width',
           mathWithUnits(euiTheme.size.base, (x) => x * 3)

diff --git a/src/components/filter_group/filter_button.test.tsx b/src/components/filter_group/filter_button.test.tsx
@@ -116,5 +116,21 @@ describe('EuiFilterButton', () => {
         expect(container.firstChild).toMatchSnapshot();
       });
     });
+
+    it('allows customizing the inner filter button text via textProps', () => {
+      const { getByTestSubject } = render(
+        <EuiFilterButton textProps={{ 'data-test-subj': 'test' }} />
+      );
+
+      expect(getByTestSubject('test')).toBeInTheDocument();
+    });
+
+    it('allows passing other EuiButtonEmpty props', () => {
+      const { getByTestSubject } = render(
+        <EuiFilterButton contentProps={{ 'data-test-subj': 'test' }} />
+      );
+
+      expect(getByTestSubject('test')).toBeInTheDocument();
+    });
   });
 });
diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx
@@ -103,6 +103,9 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
     className
   );
 
+  /**
+   * Badge
+   */
   const showBadge = numFiltersDefined || numActiveFiltersDefined;
   const badgeCount = numActiveFilters || numFilters;
   const activeBadgeLabel = useEuiI18n(
@@ -116,12 +119,6 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
     { count: badgeCount }
   );
 
-  const buttonTextClassNames = classNames(
-    'euiFilterButton__text',
-    { 'euiFilterButton__text-hasNotification': showBadge },
-    textProps && textProps.className
-  );
-
   const badgeContent = showBadge && (
     <EuiNotificationBadge
       className="euiFilterButton__notification"
@@ -137,23 +134,35 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
     </EuiNotificationBadge>
   );
 
+  /**
+   * Text
+   */
+  const buttonTextClassNames = classNames(
+    'euiFilterButton__text',
+    { 'euiFilterButton__text-hasNotification': showBadge },
+    textProps && textProps.className
+  );
+  const textCssStyles = [
+    textStyles.euiFilterButton__text,
+    showBadge && textStyles.hasNotification,
+    textProps && textProps.css,
+  ];
+
   const [ref, innerText] = useInnerText();
   const dataText =
     children && typeof children === 'string' ? children : innerText;
-  const buttonContents = (
-    <>
-      <span
-        ref={ref}
-        className="euiFilterButton__textShift"
-        css={textStyles.euiFilterButton__textShift}
-        data-text={dataText}
-        title={dataText}
-      >
-        {children}
-      </span>
 
-      {badgeContent}
-    </>
+  const textContent = (
+    <span
+      ref={ref}
+      data-text={dataText}
+      title={dataText}
+      {...textProps}
+      className={buttonTextClassNames}
+      css={textCssStyles}
+    >
+      {children}
+    </span>
   );
 
   return (
@@ -165,15 +174,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
       iconSide={iconSide}
       iconType={iconType}
       type={type}
-      textProps={{
-        ...textProps,
-        className: buttonTextClassNames,
-        css: [
-          textStyles.euiFilterButton__text,
-          showBadge && textStyles.hasNotification,
-          textProps && textProps.css,
-        ],
-      }}
+      textProps={false}
       contentProps={{
         ...contentProps,
         css: [
@@ -184,7 +185,8 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
       }}
       {...rest}
     >
-      {buttonContents}
+      {textContent}
+      {badgeContent}
     </EuiButtonEmpty>
   );
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Deprecations

		- Updated `EuiFilterButton` to remove the second `.euiFilterButton__textShift` span wrapper. Target `.euiFilterButton__text` instead