From d42b8e789ff66ff2575cf43ad5813b2cb9a56049 Mon Sep 17 00:00:00 2001 From: cchaos Date: Sat, 7 May 2022 18:22:21 -0400 Subject: [PATCH] Updating some new components to remove `classNameToProp` maps --- .../accessibility/skip_link/skip_link.tsx | 4 +- src/components/avatar/avatar.tsx | 26 ++++-------- src/components/call_out/call_out.tsx | 24 +++++------ .../horizontal_rule/horizontal_rule.tsx | 40 +++++++++---------- src/components/spacer/spacer.tsx | 20 ++++------ 5 files changed, 45 insertions(+), 69 deletions(-) diff --git a/src/components/accessibility/skip_link/skip_link.tsx b/src/components/accessibility/skip_link/skip_link.tsx index d22eca30cd3..e588cbc4b4a 100644 --- 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 index 47b0733aecc..19600e07e0f 100644 --- 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 = ({ 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 index 0d4257d501d..e62c69524d4 100644 --- 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, '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( ( { @@ -71,7 +65,9 @@ export const EuiCallOut = forwardRef( 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 index 64d84d8e1e1..66dbf6520c3 100644 --- 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 = ({ className, size = 'full', @@ -57,8 +52,11 @@ export const EuiHorizontalRule: FunctionComponent = ({ 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 index c66f644131c..da258c5dab5 100644 --- 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 & CommonProps & { @@ -39,7 +29,11 @@ export const EuiSpacer: FunctionComponent = ({ }) => { 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]];