Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CSS-in-JS] Convert classNameMaps to direct className keys. #5889

Merged
merged 2 commits into from
May 9, 2022
Merged

[CSS-in-JS] Convert classNameMaps to direct className keys. #5889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d42b8e7
Updating some new components to remove `classNameToProp` maps
May 7, 2022
13ea7f6
Merge remote-tracking branch 'origin/main' into css-in-js/classname_m…
May 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/accessibility/skip_link/skip_link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand Down
26 changes: 7 additions & 19 deletions src/components/avatar/avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -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
Expand Down
24 changes: 10 additions & 14 deletions src/components/call_out/call_out.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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'> & {
Expand All @@ -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>(
(
{
Expand Down Expand Up @@ -71,7 +65,9 @@ export const EuiCallOut = forwardRef<HTMLDivElement, EuiCallOutProps>(

const classes = classNames(
'euiCallOut',
colorToClassNameMap[color],
{
[`euiCallOut--${color}`]: color,
},
className
);

Expand Down
40 changes: 19 additions & 21 deletions src/components/horizontal_rule/horizontal_rule.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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',
Expand All @@ -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
);

Expand Down
20 changes: 7 additions & 13 deletions src/components/spacer/spacer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 & {
Expand All @@ -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]];

Expand Down