Revert "[EuiFilterButton] Clean up DOM/CSS by disabling text wrapper"

- This is too noisy for a datagrid-specific PR, I'll cherry-pick it out and open up a follow-up PR once this one merges This reverts commit 3408cfb.
elastic · Nov 21, 2023 · 545e6de · 545e6de
1 parent 9a67614
commit 545e6de
Show file tree

Hide file tree

Showing 8 changed files with 230 additions and 128 deletions.
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,8 +11,12 @@ exports[`EuiFilterButton does not render a badge or count if numFilters is not p
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="euiFilterButton__text emotion-euiFilterButton__text"
-    />
+      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
+    >
+      <span
+        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
+      />
+    </span>
   </span>
 </button>
 `;
@@ -26,8 +30,12 @@ exports[`EuiFilterButton props badgeColor renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="euiFilterButton__text emotion-euiFilterButton__text"
-    />
+      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
+    >
+      <span
+        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
+      />
+    </span>
   </span>
 </button>
 `;
@@ -41,8 +49,12 @@ exports[`EuiFilterButton props grow can be turned off 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="euiFilterButton__text emotion-euiFilterButton__text"
-    />
+      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
+    >
+      <span
+        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
+      />
+    </span>
   </span>
 </button>
 `;
@@ -56,8 +68,12 @@ exports[`EuiFilterButton props iconType and iconSide renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon"
   >
     <span
-      class="euiFilterButton__text emotion-euiFilterButton__text"
-    />
+      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
+    >
+      <span
+        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
+      />
+    </span>
     <span
       color="inherit"
       data-euiicon-type="user"
@@ -76,8 +92,12 @@ exports[`EuiFilterButton props isDisabled renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="euiFilterButton__text emotion-euiFilterButton__text"
-    />
+      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
+    >
+      <span
+        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
+      />
+    </span>
   </span>
 </button>
 `;
@@ -91,8 +111,12 @@ exports[`EuiFilterButton props isSelected renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="euiFilterButton__text emotion-euiFilterButton__text"
-    />
+      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
+    >
+      <span
+        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
+      />
+    </span>
   </span>
 </button>
 `;
@@ -106,14 +130,18 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters renders 1`]
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text"
-    />
-    <span
-      aria-label="5 active filters"
-      class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-accent-euiFilterButton__notification-badgeContent"
-      role="marquee"
+      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
     >
-      5
+      <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>
     </span>
   </span>
 </button>
@@ -128,14 +156,18 @@ exports[`EuiFilterButton props numFilters renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text"
-    />
-    <span
-      aria-label="5 available filters"
-      class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-subdued-euiFilterButton__notification-badgeContent"
-      role="marquee"
+      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
     >
-      5
+      <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>
     </span>
   </span>
 </button>
@@ -150,8 +182,12 @@ exports[`EuiFilterButton props type renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="euiFilterButton__text emotion-euiFilterButton__text"
-    />
+      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
+    >
+      <span
+        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
+      />
+    </span>
   </span>
 </button>
 `;
@@ -165,8 +201,12 @@ exports[`EuiFilterButton props withNext renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="euiFilterButton__text emotion-euiFilterButton__text"
-    />
+      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
+    >
+      <span
+        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
+      />
+    </span>
   </span>
 </button>
 `;
@@ -182,8 +222,12 @@ exports[`EuiFilterButton renders 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="euiFilterButton__text emotion-euiFilterButton__text"
-    />
+      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
+    >
+      <span
+        class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
+      />
+    </span>
   </span>
 </button>
 `;
@@ -199,14 +243,18 @@ exports[`EuiFilterButton renders zero properly 1`] = `
     class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
   >
     <span
-      class="euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text"
-    />
-    <span
-      aria-label="0 available filters"
-      class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-subdued-euiFilterButton__notification-badgeContent"
-      role="marquee"
+      class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text euiFilterButton__text-hasNotification emotion-euiFilterButton__text-hasNotification"
     >
-      0
+      <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>
     </span>
   </span>
 </button>

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

diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx
@@ -103,9 +103,6 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
     className
   );
 
-  /**
-   * Badge
-   */
   const showBadge = numFiltersDefined || numActiveFiltersDefined;
   const badgeCount = numActiveFilters || numFilters;
   const activeBadgeLabel = useEuiI18n(
@@ -119,6 +116,12 @@ 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"
@@ -134,34 +137,23 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
     </EuiNotificationBadge>
   );
 
-  /**
-   * Text
-   */
-  const buttonTextClassNames = classNames(
-    'euiFilterButton__text',
-    { 'euiFilterButton__text-hasNotification': showBadge },
-    textProps && textProps.className
-  );
-  const textCssStyles = [
-    textStyles.euiFilterButton__text,
-    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>
 
-  const textContent = (
-    <span
-      ref={ref}
-      className={buttonTextClassNames}
-      data-text={dataText}
-      title={dataText}
-      {...textProps}
-      css={textCssStyles}
-    >
-      {children}
-    </span>
+      {badgeContent}
+    </>
   );
 
   return (
@@ -173,7 +165,15 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
       iconSide={iconSide}
       iconType={iconType}
       type={type}
-      textProps={false}
+      textProps={{
+        ...textProps,
+        className: buttonTextClassNames,
+        css: [
+          textStyles.euiFilterButton__text,
+          showBadge && textStyles.hasNotification,
+          textProps && textProps.css,
+        ],
+      }}
       contentProps={{
         ...contentProps,
         css: [
@@ -184,8 +184,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
       }}
       {...rest}
     >
-      {textContent}
-      {badgeContent}
+      {buttonContents}
     </EuiButtonEmpty>
   );
 };
diff --git a/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap b/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
@@ -145,11 +145,15 @@ exports[`SearchBar render - provided query, filters 1`] = `
           class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
         >
           <span
-            class="euiFilterButton__text emotion-euiFilterButton__text"
-            data-text="Open"
-            title="Open"
+            class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
           >
-            Open
+            <span
+              class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
+              data-text="Open"
+              title="Open"
+            >
+              Open
+            </span>
           </span>
         </span>
       </button>
@@ -164,11 +168,15 @@ exports[`SearchBar render - provided query, filters 1`] = `
             class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon"
           >
             <span
-              class="euiFilterButton__text emotion-euiFilterButton__text"
-              data-text="Tag"
-              title="Tag"
+              class="eui-textTruncate euiButtonEmpty__text euiFilterButton__text emotion-euiFilterButton__text"
             >
-              Tag
+              <span
+                class="euiFilterButton__textShift emotion-euiFilterButton__textShift"
+                data-text="Tag"
+                title="Tag"
+              >
+                Tag
+              </span>
             </span>
             <span
               color="inherit"