[EuiFilterGroup] Memoize styles

+ prefer inline JSX
elastic · Mar 29, 2024 · 619e1a8 · 619e1a8
1 parent 0bc717a
commit 619e1a8
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 40 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
@@ -110,7 +110,7 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters renders 1`]
     />
     <span
       aria-label="5 active filters"
-      class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-accent-euiFilterButton__notification-badgeContent"
+      class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-accent-euiFilterButton__notification"
       role="marquee"
     >
       5
@@ -132,7 +132,7 @@ exports[`EuiFilterButton props numFilters renders 1`] = `
     />
     <span
       aria-label="5 available filters"
-      class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-subdued-euiFilterButton__notification-badgeContent"
+      class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-subdued-euiFilterButton__notification"
       role="marquee"
     >
       5
@@ -203,7 +203,7 @@ exports[`EuiFilterButton renders zero properly 1`] = `
     />
     <span
       aria-label="0 available filters"
-      class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-subdued-euiFilterButton__notification-badgeContent"
+      class="euiNotificationBadge euiFilterButton__notification emotion-euiNotificationBadge-s-subdued-euiFilterButton__notification"
       role="marquee"
     >
       0

diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx
@@ -9,7 +9,7 @@
 import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { useEuiI18n } from '../i18n';
 import { useInnerText } from '../inner_text';
 import { DistributiveOmit } from '../common';
@@ -78,8 +78,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   const numActiveFiltersDefined =
     numActiveFilters != null && numActiveFilters > 0;
 
-  const euiTheme = useEuiTheme();
-  const styles = euiFilterButtonStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiFilterButtonStyles);
   const cssStyles = [
     styles.euiFilterButton,
     withNext && styles.withNext,
@@ -91,7 +90,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
     content: contentStyles,
     text: textStyles,
     notification: notificationStyles,
-  } = euiFilterButtonChildStyles(euiTheme);
+  } = useEuiMemoizedStyles(euiFilterButtonChildStyles);
 
   const classes = classNames(
     'euiFilterButton',
@@ -118,21 +117,10 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
     '{count} available filters',
     { count: badgeCount }
   );
-
-  const badgeContent = showBadge && (
-    <EuiNotificationBadge
-      className="euiFilterButton__notification"
-      css={[
-        notificationStyles.euiFilterButton__notification,
-        isDisabled && notificationStyles.disabled,
-      ]}
-      aria-label={hasActiveFilters ? activeBadgeLabel : availableBadgeLabel}
-      color={isDisabled || !hasActiveFilters ? 'subdued' : badgeColor}
-      role="marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
-    >
-      {badgeCount}
-    </EuiNotificationBadge>
-  );
+  const badgeStyles = [
+    notificationStyles.euiFilterButton__notification,
+    isDisabled && notificationStyles.disabled,
+  ];
 
   /**
    * Text
@@ -152,19 +140,6 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   const dataText =
     children && typeof children === 'string' ? children : innerText;
 
-  const textContent = (
-    <span
-      ref={ref}
-      data-text={dataText}
-      title={dataText}
-      {...textProps}
-      className={buttonTextClassNames}
-      css={textCssStyles}
-    >
-      {children}
-    </span>
-  );
-
   return (
     <EuiButtonEmpty
       className={classes}
@@ -185,8 +160,28 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
       }}
       {...rest}
     >
-      {textContent}
-      {badgeContent}
+      <span
+        ref={ref}
+        data-text={dataText}
+        title={dataText}
+        {...textProps}
+        className={buttonTextClassNames}
+        css={textCssStyles}
+      >
+        {children}
+      </span>
+
+      {showBadge && (
+        <EuiNotificationBadge
+          className="euiFilterButton__notification"
+          css={badgeStyles}
+          aria-label={hasActiveFilters ? activeBadgeLabel : availableBadgeLabel}
+          color={isDisabled || !hasActiveFilters ? 'subdued' : badgeColor}
+          role="marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
+        >
+          {badgeCount}
+        </EuiNotificationBadge>
+      )}
     </EuiButtonEmpty>
   );
 };
diff --git a/src/components/filter_group/filter_group.tsx b/src/components/filter_group/filter_group.tsx
@@ -9,7 +9,7 @@
 import React, { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
 import classNames from 'classnames';
 
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
 
 import { euiFilterGroupStyles } from './filter_group.styles';
@@ -34,8 +34,7 @@ export const EuiFilterGroup: FunctionComponent<EuiFilterGroupProps> = ({
   compressed,
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiFilterGroupStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiFilterGroupStyles);
   const cssStyles = [
     styles.euiFilterGroup,
     fullWidth && styles.fullWidth,