Updating some new components to remove classNameToProp maps (#5889)

elastic · May 9, 2022 · fcd9fae · fcd9fae
1 parent 6d14fa2
commit fcd9fae
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 69 deletions.
diff --git a/src/components/accessibility/skip_link/skip_link.tsx b/src/components/accessibility/skip_link/skip_link.tsx
@@ -14,8 +14,8 @@ import { PropsForAnchor, PropsForButton, ExclusiveUnion } from '../../common';
 import { EuiScreenReaderOnly } from '../screen_reader_only';
 import { euiSkipLinkStyles } from './skip_link.styles';
 
-type Positions = 'static' | 'fixed' | 'absolute';
-export const POSITIONS = ['static', 'fixed', 'absolute'] as Positions[];
+export const POSITIONS = ['static', 'fixed', 'absolute'] as const;
+type Positions = typeof POSITIONS[number];
 
 interface EuiSkipLinkInterface extends EuiButtonProps {
   /**

diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { HTMLAttributes, FunctionComponent, CSSProperties } from 'react';
-import { CommonProps, ExclusiveUnion, keysOf } from '../common';
+import { CommonProps, ExclusiveUnion } from '../common';
 import classNames from 'classnames';
 
 import { isColorDark, hexToRgb, isValidHex } from '../../services/color';
@@ -20,23 +20,11 @@ import { IconType, EuiIcon, IconSize, IconColor } from '../icon';
 
 import { euiAvatarStyles } from './avatar.styles';
 
-const sizeToClassNameMap = {
-  s: 'euiAvatar--s',
-  m: 'euiAvatar--m',
-  l: 'euiAvatar--l',
-  xl: 'euiAvatar--xl',
-};
-
-export const SIZES = keysOf(sizeToClassNameMap);
-export type EuiAvatarSize = keyof typeof sizeToClassNameMap;
-
-const typeToClassNameMap = {
-  space: 'euiAvatar--space',
-  user: 'euiAvatar--user',
-};
+export const SIZES = ['s', 'm', 'l', 'xl'] as const;
+export type EuiAvatarSize = typeof SIZES[number];
 
-export const TYPES = keysOf(typeToClassNameMap);
-export type EuiAvatarType = keyof typeof typeToClassNameMap;
+export const TYPES = ['space', 'user'] as const;
+export type EuiAvatarType = typeof TYPES[number];
 
 /**
  * The avatar can only display one type of content,
@@ -134,9 +122,9 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
 
   const classes = classNames(
     'euiAvatar',
-    sizeToClassNameMap[size],
-    typeToClassNameMap[type],
     {
+      [`euiAvatar--${size}`]: size,
+      [`euiAvatar--${type}`]: type,
       'euiAvatar-isDisabled': isDisabled,
     },
     className

diff --git a/src/components/call_out/call_out.tsx b/src/components/call_out/call_out.tsx
@@ -10,7 +10,7 @@ import React, { forwardRef, HTMLAttributes, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { CommonProps, keysOf } from '../common';
+import { CommonProps } from '../common';
 import { IconType, EuiIcon } from '../icon';
 
 import { EuiText } from '../text';
@@ -20,9 +20,13 @@ import { EuiTitle } from '../title';
 
 import { euiCallOutStyles, euiCallOutHeadingStyles } from './call_out.styles';
 
-type Color = 'primary' | 'success' | 'warning' | 'danger';
+export const COLORS = ['primary', 'success', 'warning', 'danger'] as const;
+export type Color = typeof COLORS[number];
+
+export const HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'] as const;
+type Heading = typeof HEADINGS[number];
+
 type Size = 's' | 'm';
-type Heading = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
 
 export type EuiCallOutProps = CommonProps &
   Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'color'> & {
@@ -33,16 +37,6 @@ export type EuiCallOutProps = CommonProps &
     heading?: Heading;
   };
 
-const colorToClassNameMap: { [color in Color]: string } = {
-  primary: 'euiCallOut--primary',
-  success: 'euiCallOut--success',
-  warning: 'euiCallOut--warning',
-  danger: 'euiCallOut--danger',
-};
-
-export const COLORS = keysOf(colorToClassNameMap);
-export const HEADINGS: Heading[] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
-
 export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(
   (
     {
@@ -71,7 +65,9 @@ export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(
 
     const classes = classNames(
       'euiCallOut',
-      colorToClassNameMap[color],
+      {
+        [`euiCallOut--${color}`]: color,
+      },
       className
     );
 

diff --git a/src/components/horizontal_rule/horizontal_rule.tsx b/src/components/horizontal_rule/horizontal_rule.tsx
@@ -13,8 +13,11 @@ 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;
+export const SIZES = ['full', 'half', 'quarter'] as const;
+export const MARGINS = ['none', 'xs', 's', 'm', 'l', 'xl', 'xxl'] as const;
+
+export type EuiHorizontalRuleSize = typeof SIZES[number];
+export type EuiHorizontalRuleMargin = typeof MARGINS[number];
 
 export interface EuiHorizontalRuleProps
   extends CommonProps,
@@ -26,26 +29,18 @@ export interface EuiHorizontalRuleProps
   margin?: EuiHorizontalRuleMargin;
 }
 
-const sizeToClassNameMap = {
-  full: 'euiHorizontalRule--full',
-  half: 'euiHorizontalRule--half',
-  quarter: 'euiHorizontalRule--quarter',
-};
-
-export const SIZES = Object.keys(sizeToClassNameMap);
-
-const marginToClassNameMap = {
+const marginToClassNameMap: {
+  [value in EuiHorizontalRuleMargin]: string | null;
+} = {
   none: null,
-  xs: 'euiHorizontalRule--marginXSmall',
-  s: 'euiHorizontalRule--marginSmall',
-  m: 'euiHorizontalRule--marginMedium',
-  l: 'euiHorizontalRule--marginLarge',
-  xl: 'euiHorizontalRule--marginXLarge',
-  xxl: 'euiHorizontalRule--marginXXLarge',
+  xs: 'marginXSmall',
+  s: 'marginSmall',
+  m: 'marginMedium',
+  l: 'marginLarge',
+  xl: 'marginXLarge',
+  xxl: 'marginXXLarge',
 };
 
-export const MARGINS = Object.keys(marginToClassNameMap);
-
 export const EuiHorizontalRule: FunctionComponent<EuiHorizontalRuleProps> = ({
   className,
   size = 'full',
@@ -57,8 +52,11 @@ export const EuiHorizontalRule: FunctionComponent<EuiHorizontalRuleProps> = ({
 
   const classes = classNames(
     'euiHorizontalRule',
-    sizeToClassNameMap[size],
-    marginToClassNameMap[margin],
+    {
+      [`euiHorizontalRule--${size}`]: size,
+      [`euiHorizontalRule--${marginToClassNameMap[margin]}`]:
+        margin && margin !== 'none',
+    },
     className
   );
 

diff --git a/src/components/spacer/spacer.tsx b/src/components/spacer/spacer.tsx
@@ -14,18 +14,8 @@ import { useEuiTheme } from '../../services';
 
 import { euiSpacerStyles } from './spacer.styles';
 
-const sizeToClassNameMap = {
-  xs: 'euiSpacer--xs',
-  s: 'euiSpacer--s',
-  m: 'euiSpacer--m',
-  l: 'euiSpacer--l',
-  xl: 'euiSpacer--xl',
-  xxl: 'euiSpacer--xxl',
-};
-
-export const SIZES = Object.keys(sizeToClassNameMap);
-
-export type SpacerSize = keyof typeof sizeToClassNameMap;
+export const SIZES = ['xs', 's', 'm', 'l', 'xl', 'xxl'] as const;
+export type SpacerSize = typeof SIZES[number];
 
 export type EuiSpacerProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
@@ -39,7 +29,11 @@ export const EuiSpacer: FunctionComponent<EuiSpacerProps> = ({
 }) => {
   const euiTheme = useEuiTheme();
   const styles = euiSpacerStyles(euiTheme);
-  const classes = classNames('euiSpacer', sizeToClassNameMap[size], className);
+  const classes = classNames(
+    'euiSpacer',
+    { [`euiSpacer--${size}`]: size },
+    className
+  );
 
   const cssStyles = [styles.euiSpacer, styles[size]];