[EuiHorizontalRule] convert horizontal rule to emotion (#5815)

* converted EuiHorizontalRule to emotion

* changelog

* Update upcoming_changelogs/5815.md

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

* Update upcoming_changelogs/5815.md

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

* Update src/components/horizontal_rule/horizontal_rule.styles.ts

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

* Update src/components/horizontal_rule/horizontal_rule.styles.ts

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

* Update src/components/horizontal_rule/horizontal_rule.styles.ts

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

* include a shouldRenderCustomStyles test

Co-authored-by: Constance <constancecchen@users.noreply.github.com>
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

src/components/context_menu/__snapshots__/context_menu.test.tsx.snap

@@ -19,7 +19,7 @@ exports[`EuiContextMenu can pass-through horizontal rule props 1`] = `
     </div>
     <div>
       <hr
-        class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginSmall"
+        class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginSmall css-14bhqlx-euiHorizontalRule-half-s"
       />
     </div>
   </div>
@@ -67,7 +67,7 @@ exports[`EuiContextMenu panel item can be a separator line 1`] = `
         </span>
       </button>
       <hr
-        class="euiHorizontalRule euiHorizontalRule--full"
+        class="euiHorizontalRule euiHorizontalRule--full css-pnauuy-euiHorizontalRule-full"
       />
       <button
         class="euiContextMenuItem"

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"
+  class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge testClass1 testClass2 css-14ofhbg-euiHorizontalRule-full-l"
   data-test-subj="test subject string"
 />
 `;

src/components/horizontal_rule/horizontal_rule.styles.ts

@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+
+export const euiHorizontalRuleStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiHorizontalRule: css`
+    border: none;
+    height: ${euiTheme.border.width.thin};
+    background-color: ${euiTheme.border.color};
+    flex-shrink: 0; // Ensure when used in flex group, it retains its size
+    flex-grow: 0; // Ensure when used in flex group, it retains its size
+  `,
+
+  // Sizes
+  full: css`
+    width: 100%;
+  `,
+  half: css`
+    width: 50%;
+    margin-inline: auto;
+  `,
+  quarter: css`
+    width: 25%;
+    margin-inline: auto;
+  `,
+
+  // Margins
+  none: '',
+  xs: css`
+    margin-block: ${euiTheme.size.s};
+  `,
+  s: css`
+    margin-block: ${euiTheme.size.m};
+  `,
+  m: css`
+    margin-block: ${euiTheme.size.base};
+  `,
+  l: css`
+    margin-block: ${euiTheme.size.l};
+  `,
+  xl: css`
+    margin-block: ${euiTheme.size.xl};
+  `,
+  xxl: css`
+    margin-block: ${euiTheme.size.xxl};
+  `,
+});

src/components/horizontal_rule/horizontal_rule.test.tsx

@@ -9,10 +9,12 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
-
+import { shouldRenderCustomStyles } from '../../test/internal';
 import { EuiHorizontalRule } from './horizontal_rule';
 
 describe('EuiHorizontalRule', () => {
+  shouldRenderCustomStyles(<EuiHorizontalRule {...requiredProps} />);
+
   test('is rendered', () => {
     const component = render(<EuiHorizontalRule {...requiredProps} />);
 

src/components/horizontal_rule/horizontal_rule.tsx

@@ -10,6 +10,8 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 import { CommonProps } from '../common';
+import { useEuiTheme } from '../../services';
+import { euiHorizontalRuleStyles } from './horizontal_rule.styles';
 
 export type EuiHorizontalRuleSize = keyof typeof sizeToClassNameMap;
 export type EuiHorizontalRuleMargin = keyof typeof marginToClassNameMap;
@@ -50,12 +52,17 @@ export const EuiHorizontalRule: FunctionComponent<EuiHorizontalRuleProps> = ({
   margin = 'l',
   ...rest
 }) => {
+  const euiTheme = useEuiTheme();
+  const styles = euiHorizontalRuleStyles(euiTheme);
+
   const classes = classNames(
     'euiHorizontalRule',
     sizeToClassNameMap[size],
     marginToClassNameMap[margin],
     className
   );
 
-  return <hr className={classes} {...rest} />;
+  const cssStyles = [styles.euiHorizontalRule, styles[size], styles[margin]];
+
+  return <hr css={cssStyles} className={classes} {...rest} />;
 };

src/components/index.scss

@@ -30,7 +30,6 @@
 @import 'form/index';
 @import 'header/index';
 @import 'health/index';
-@import 'horizontal_rule/index';
 @import 'icon/index';
 @import 'image/index';
 @import 'key_pad_menu/index';

upcoming_changelogs/5815.md

@@ -0,0 +1,4 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiHorizontalRule` to emotion; Removed `$ruleMargins`
+