diff --git a/changelogs/upcoming/7444.md b/changelogs/upcoming/7444.md
new file mode 100644
index 00000000000..a9c78b58ba6
--- /dev/null
+++ 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
index 944dd9122ab..49e6de6c254 100644
--- 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"
>
-
-
+ class="euiFilterButton__text emotion-euiFilterButton__text"
+ />
`;
@@ -30,12 +26,8 @@ exports[`EuiFilterButton props badgeColor renders 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
-
+ class="euiFilterButton__text emotion-euiFilterButton__text"
+ />
`;
@@ -49,12 +41,8 @@ exports[`EuiFilterButton props grow can be turned off 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
-
+ class="euiFilterButton__text emotion-euiFilterButton__text"
+ />
`;
@@ -68,12 +56,8 @@ exports[`EuiFilterButton props iconType and iconSide renders 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon"
>
-
-
+ class="euiFilterButton__text emotion-euiFilterButton__text"
+ />
-
-
+ class="euiFilterButton__text emotion-euiFilterButton__text"
+ />
`;
@@ -111,12 +91,8 @@ exports[`EuiFilterButton props isSelected renders 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
-
+ class="euiFilterButton__text emotion-euiFilterButton__text"
+ />
`;
@@ -130,18 +106,14 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters renders 1`]
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
+
-
-
- 5
-
+ 5
@@ -156,18 +128,14 @@ exports[`EuiFilterButton props numFilters renders 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
+
-
-
- 5
-
+ 5
@@ -182,12 +150,8 @@ exports[`EuiFilterButton props type renders 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
-
+ class="euiFilterButton__text emotion-euiFilterButton__text"
+ />
`;
@@ -201,12 +165,8 @@ exports[`EuiFilterButton props withNext renders 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
-
+ class="euiFilterButton__text emotion-euiFilterButton__text"
+ />
`;
@@ -222,12 +182,8 @@ exports[`EuiFilterButton renders 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
-
+ class="euiFilterButton__text emotion-euiFilterButton__text"
+ />
`;
@@ -243,18 +199,14 @@ exports[`EuiFilterButton renders zero properly 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
+
-
-
- 0
-
+ 0
diff --git a/src/components/filter_group/filter_button.styles.ts b/src/components/filter_group/filter_button.styles.ts
index c0ac6e2c1b2..682458bde8c 100644
--- 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
index f295d73e32b..a77bca6b9d2 100644
--- 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(
+
+ );
+
+ expect(getByTestSubject('test')).toBeInTheDocument();
+ });
+
+ it('allows passing other EuiButtonEmpty props', () => {
+ const { getByTestSubject } = render(
+
+ );
+
+ expect(getByTestSubject('test')).toBeInTheDocument();
+ });
});
});
diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx
index 3f7354a28da..247e44e615b 100644
--- a/src/components/filter_group/filter_button.tsx
+++ b/src/components/filter_group/filter_button.tsx
@@ -103,6 +103,9 @@ export const EuiFilterButton: FunctionComponent = ({
className
);
+ /**
+ * Badge
+ */
const showBadge = numFiltersDefined || numActiveFiltersDefined;
const badgeCount = numActiveFilters || numFilters;
const activeBadgeLabel = useEuiI18n(
@@ -116,12 +119,6 @@ export const EuiFilterButton: FunctionComponent = ({
{ count: badgeCount }
);
- const buttonTextClassNames = classNames(
- 'euiFilterButton__text',
- { 'euiFilterButton__text-hasNotification': showBadge },
- textProps && textProps.className
- );
-
const badgeContent = showBadge && (
= ({
);
+ /**
+ * 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 = (
- <>
-
- {children}
-
- {badgeContent}
- >
+ const textContent = (
+
+ {children}
+
);
return (
@@ -165,15 +174,7 @@ export const EuiFilterButton: FunctionComponent = ({
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 = ({
}}
{...rest}
>
- {buttonContents}
+ {textContent}
+ {badgeContent}
);
};
diff --git a/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap b/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
index afc2a6f729a..98f6fb63890 100644
--- a/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
+++ b/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
@@ -145,15 +145,11 @@ exports[`SearchBar render - provided query, filters 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
- Open
-
+ Open
@@ -168,15 +164,11 @@ exports[`SearchBar render - provided query, filters 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon"
>
-
- Tag
-
+ Tag
-
- Open
-
+ Open
@@ -42,15 +38,11 @@ exports[`EuiSearchBarFilters render - with filters 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content-hasIcon"
>
-
- Tag
-
+ Tag
-
- Kibana
-
+ Kibana
@@ -34,15 +30,11 @@ exports[`FieldValueToggleFilter render - active negated - custom negated name 1`
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
- Others
-
+ Others
@@ -58,15 +50,11 @@ exports[`FieldValueToggleFilter render - active negated 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
- Not Kibana
-
+ Not Kibana
@@ -82,15 +70,11 @@ exports[`FieldValueToggleFilter renders 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
- Kibana
-
+ Kibana
diff --git a/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap b/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap
index ceedeec3b89..838f9e4575d 100644
--- a/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap
+++ b/src/components/search_bar/filters/__snapshots__/field_value_toggle_group_filter.test.tsx.snap
@@ -10,15 +10,11 @@ exports[`TermToggleGroupFilter render - active 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
- Kibana
-
+ Kibana
@@ -34,15 +30,11 @@ exports[`TermToggleGroupFilter render - active negated - custom negated name 1`]
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
- -Kibana
-
+ -Kibana
@@ -58,15 +50,11 @@ exports[`TermToggleGroupFilter render - active negated 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
- Not Kibana
-
+ Not Kibana
@@ -82,15 +70,11 @@ exports[`TermToggleGroupFilter renders 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
- Kibana
-
+ Kibana
diff --git a/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap b/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap
index 60c3bda6148..48522efff02 100644
--- a/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap
+++ b/src/components/search_bar/filters/__snapshots__/is_filter.test.tsx.snap
@@ -10,15 +10,11 @@ exports[`IsFilter render 1`] = `
class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiFilterButton__content"
>
-
- Open
-
+ Open