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