[EuiFilterButton] DOM text wrapper cleanup

changelogs/upcoming/7444.md

@@ -0,0 +1,3 @@
+**Deprecations**
+
+- Updated `EuiFilterButton` to remove the second `.euiFilterButton__textShift` span wrapper. Target `.euiFilterButton__text` instead

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>

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)

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();
+ });
  });
 });

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>
  );
 };