[EuiHorizontalRule] Memoize styles + remove modifier classes

- no usages in Kibana
elastic · Apr 3, 2024 · 21b032b · 21b032b
1 parent 3359119
commit 21b032b
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 28 deletions.
diff --git a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`EuiContextMenu can pass-through horizontal rule props 1`] = `
     </div>
     <div>
       <hr
-        class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginSmall emotion-euiHorizontalRule-half-s"
+        class="euiHorizontalRule emotion-euiHorizontalRule-half-s"
       />
     </div>
   </div>
@@ -168,7 +168,7 @@ exports[`EuiContextMenu renders isSeparator items 1`] = `
         </span>
       </div>
       <hr
-        class="euiHorizontalRule euiHorizontalRule--full emotion-euiHorizontalRule-full"
+        class="euiHorizontalRule emotion-euiHorizontalRule-full"
       />
       <div
         class="euiContextMenuItem emotion-euiContextMenuItem-m-center"

diff --git a/src/components/horizontal_rule/__snapshots__/horizontal_rule.test.tsx.snap b/src/components/horizontal_rule/__snapshots__/horizontal_rule.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiHorizontalRule is rendered 1`] = `
 <hr
   aria-label="aria-label"
-  class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge testClass1 testClass2 emotion-euiHorizontalRule-full-l-euiTestCss"
+  class="euiHorizontalRule testClass1 testClass2 emotion-euiHorizontalRule-full-l-euiTestCss"
   data-test-subj="test subject string"
 />
 `;
diff --git a/src/components/horizontal_rule/horizontal_rule.tsx b/src/components/horizontal_rule/horizontal_rule.tsx
@@ -10,7 +10,7 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 import { CommonProps } from '../common';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiHorizontalRuleStyles } from './horizontal_rule.styles';
 
 export const SIZES = ['full', 'half', 'quarter'] as const;
@@ -29,37 +29,15 @@ export interface EuiHorizontalRuleProps
   margin?: EuiHorizontalRuleMargin;
 }
 
-const marginToClassNameMap: {
-  [value in EuiHorizontalRuleMargin]: string | null;
-} = {
-  none: null,
-  xs: 'marginXSmall',
-  s: 'marginSmall',
-  m: 'marginMedium',
-  l: 'marginLarge',
-  xl: 'marginXLarge',
-  xxl: 'marginXXLarge',
-};
-
 export const EuiHorizontalRule: FunctionComponent<EuiHorizontalRuleProps> = ({
   className,
   size = 'full',
   margin = 'l',
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiHorizontalRuleStyles(euiTheme);
-
-  const classes = classNames(
-    'euiHorizontalRule',
-    {
-      [`euiHorizontalRule--${size}`]: size,
-      [`euiHorizontalRule--${marginToClassNameMap[margin]}`]:
-        margin && margin !== 'none',
-    },
-    className
-  );
+  const classes = classNames('euiHorizontalRule', className);
 
+  const styles = useEuiMemoizedStyles(euiHorizontalRuleStyles);
   const cssStyles = [styles.euiHorizontalRule, styles[size], styles[margin]];
 
   return <hr css={cssStyles} className={classes} {...rest} />;