From 0b3f9f63d332462b40c43a367525559a152734b4 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 28 Jul 2022 19:08:23 +0100 Subject: [PATCH] Passing the fill prop to `getTokenColor` --- src/components/token/index.ts | 6 +- src/components/token/token.styles.ts | 63 +++++++++++---------- src/components/token/token.test.tsx | 3 +- src/components/token/token.tsx | 83 +++++----------------------- src/components/token/token_map.ts | 2 +- src/components/token/token_types.ts | 72 ++++++++++++++++++++++++ 6 files changed, 127 insertions(+), 102 deletions(-) create mode 100644 src/components/token/token_types.ts diff --git a/src/components/token/index.ts b/src/components/token/index.ts index ea078101591..145ecf29ee2 100644 --- a/src/components/token/index.ts +++ b/src/components/token/index.ts @@ -6,10 +6,10 @@ * Side Public License, v 1. */ -export type { EuiTokenProps } from './token'; +export type { EuiTokenProps } from './token_types'; export { - EuiToken, SIZES as TOKEN_SIZES, SHAPES as TOKEN_SHAPES, COLORS as TOKEN_COLORS, -} from './token'; +} from './token_types'; +export { EuiToken } from './token'; diff --git a/src/components/token/token.styles.ts b/src/components/token/token.styles.ts index 32299ec6812..6f0e333504e 100644 --- a/src/components/token/token.styles.ts +++ b/src/components/token/token.styles.ts @@ -18,6 +18,7 @@ import { tint, shade, } from '../../services'; +import type { TokenFill } from './token_types'; const visColors = euiPaletteColorBlind(); const visColorsBehindText = euiPaletteColorBlindBehindText(); @@ -25,6 +26,7 @@ const visColorsBehindText = euiPaletteColorBlindBehindText(); const getTokenColor = ( euiTheme: UseEuiTheme['euiTheme'], colorMode: UseEuiTheme['colorMode'], + fill: TokenFill, color: number | string ) => { const isVizColor = typeof color === 'number'; @@ -51,25 +53,30 @@ const getTokenColor = ( ? euiTheme.colors.ghost : euiTheme.colors.ink; - return ` - // Without a background, the fill color should be the graphic color - color: ${iconColor}; - - - &[class*='-light'] { - color: ${lightColor}; - background-color: ${backgroundLightColor}; - box-shadow: inset 0 0 0 1px ${boxShadowColor}; - } - - &[class*='-dark'] { - color: ${darkColor}; - background-color: ${backgroundDarkColor}; - } - `; + switch (fill) { + case 'none': + return ` + // Without a background, the fill color should be the graphic color + color: ${iconColor}; + `; + case 'light': + return ` + color: ${lightColor}; + background-color: ${backgroundLightColor}; + box-shadow: inset 0 0 0 1px ${boxShadowColor}; + `; + case 'dark': + return ` + color: ${darkColor}; + background-color: ${backgroundDarkColor}; + `; + } }; -export const euiTokenStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ +export const euiTokenStyles = ( + { euiTheme, colorMode }: UseEuiTheme, + fill: TokenFill +) => ({ // Base euiToken: css` display: inline-flex; @@ -131,17 +138,17 @@ export const euiTokenStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ } `, // Colors - euiColorVis0: css(getTokenColor(euiTheme, colorMode, 0)), - euiColorVis1: css(getTokenColor(euiTheme, colorMode, 1)), - euiColorVis2: css(getTokenColor(euiTheme, colorMode, 2)), - euiColorVis3: css(getTokenColor(euiTheme, colorMode, 3)), - euiColorVis4: css(getTokenColor(euiTheme, colorMode, 4)), - euiColorVis5: css(getTokenColor(euiTheme, colorMode, 5)), - euiColorVis6: css(getTokenColor(euiTheme, colorMode, 6)), - euiColorVis7: css(getTokenColor(euiTheme, colorMode, 7)), - euiColorVis8: css(getTokenColor(euiTheme, colorMode, 8)), - euiColorVis9: css(getTokenColor(euiTheme, colorMode, 9)), - gray: css(getTokenColor(euiTheme, colorMode, 'gray')), + euiColorVis0: css(getTokenColor(euiTheme, colorMode, fill, 0)), + euiColorVis1: css(getTokenColor(euiTheme, colorMode, fill, 1)), + euiColorVis2: css(getTokenColor(euiTheme, colorMode, fill, 2)), + euiColorVis3: css(getTokenColor(euiTheme, colorMode, fill, 3)), + euiColorVis4: css(getTokenColor(euiTheme, colorMode, fill, 4)), + euiColorVis5: css(getTokenColor(euiTheme, colorMode, fill, 5)), + euiColorVis6: css(getTokenColor(euiTheme, colorMode, fill, 6)), + euiColorVis7: css(getTokenColor(euiTheme, colorMode, fill, 7)), + euiColorVis8: css(getTokenColor(euiTheme, colorMode, fill, 8)), + euiColorVis9: css(getTokenColor(euiTheme, colorMode, fill, 9)), + gray: css(getTokenColor(euiTheme, colorMode, fill, 'gray')), customColor: css``, // Fills light: css``, diff --git a/src/components/token/token.test.tsx b/src/components/token/token.test.tsx index 979260ab9f4..7d117991f05 100644 --- a/src/components/token/token.test.tsx +++ b/src/components/token/token.test.tsx @@ -11,7 +11,8 @@ import { render } from 'enzyme'; import { requiredProps } from '../../test'; import { shouldRenderCustomStyles } from '../../test/internal'; -import { EuiToken, COLORS, SHAPES, SIZES, FILLS } from './token'; +import { EuiToken } from './token'; +import { COLORS, SHAPES, SIZES, FILLS } from './token_types'; import { TOKEN_MAP } from './token_map'; import { keysOf } from '../common'; diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index d5c97fb8a4f..95ce82eba31 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -6,77 +6,22 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, HTMLAttributes } from 'react'; +import React, { FunctionComponent } from 'react'; import classNames from 'classnames'; -import { CommonProps } from '../common'; import { useEuiTheme, isColorDark, hexToRgb } from '../../services'; -import { IconType, EuiIcon, IconSize } from '../icon'; +import { EuiIcon, IconSize } from '../icon'; import { EuiTokenMapType, TOKEN_MAP } from './token_map'; +import { COLORS } from './token_types'; +import type { + EuiTokenProps, + TokenColor, + TokenSize, + TokenShape, + TokenFill, +} from './token_types'; import { euiTokenStyles } from './token.styles'; -export const SIZES = ['xs', 's', 'm', 'l'] as const; -export type TokenSize = typeof SIZES[number]; - -export const SHAPES = ['circle', 'square'] as const; -export type TokenShape = typeof SHAPES[number]; - -export const FILLS = ['light', 'dark', 'none'] as const; -export type TokenFill = typeof FILLS[number]; - -export const COLORS = [ - 'euiColorVis0', - 'euiColorVis1', - 'euiColorVis2', - 'euiColorVis3', - 'euiColorVis4', - 'euiColorVis5', - 'euiColorVis6', - 'euiColorVis7', - 'euiColorVis8', - 'euiColorVis9', - 'gray', -] as const; -export type TokenColor = typeof COLORS[number]; - -export interface TokenProps { - /** - * An EUI icon type - */ - iconType: IconType; - /** - * For best results use one of the vis color names (or 'gray'). - * Or supply your own HEX color. The `fill='light'` (lightened background) will always be overridden by `fill='dark'` (solid background). - * Default: `gray` for glyphs or one of the vis colors for prefab token types - */ - color?: TokenColor | string; - /** - * Outer shape surrounding the icon - * Default: `circle` - */ - shape?: TokenShape; - /** - * `light` for lightened color with border, `dark` for solid, or `none` - * Default: `light` - */ - fill?: TokenFill; - /** - * Size of the token - */ - size?: TokenSize; - /** - * The icon's title. Required for accessibility - */ - title?: string; - 'aria-label'?: string; - 'aria-labelledby'?: string; - 'aria-describedby'?: string; -} - -export type EuiTokenProps = CommonProps & - TokenProps & - Omit, 'title'>; - const isTokenColor = (color: string): color is TokenColor => COLORS.includes(color as TokenColor); @@ -120,13 +65,13 @@ export const EuiToken: FunctionComponent = ({ let finalFill = fill || 'light'; const euiTheme = useEuiTheme(); - const styles = euiTokenStyles(euiTheme); + const styles = euiTokenStyles(euiTheme, finalFill); let cssStyles = [ styles.euiToken, - styles[finalShape], - styles[finalFill], - styles[size], + styles[finalShape as TokenShape], + styles[finalFill as TokenFill], + styles[size as TokenSize], ]; let finalStyle = style; diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts index e4aabd23f09..522e06f2a83 100644 --- a/src/components/token/token_map.ts +++ b/src/components/token/token_map.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { TokenProps } from './token'; +import type { TokenProps } from './token_types'; export type EuiTokenMapType = | 'tokenAlias' diff --git a/src/components/token/token_types.ts b/src/components/token/token_types.ts new file mode 100644 index 00000000000..35c87217eff --- /dev/null +++ b/src/components/token/token_types.ts @@ -0,0 +1,72 @@ +/* + * 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 { HTMLAttributes } from 'react'; +import { CommonProps } from '../common'; +import { IconType } from '../icon'; + +export const SIZES = ['xs', 's', 'm', 'l'] as const; +export type TokenSize = typeof SIZES[number]; + +export const SHAPES = ['circle', 'square'] as const; +export type TokenShape = typeof SHAPES[number]; + +export const FILLS = ['light', 'dark', 'none'] as const; +export type TokenFill = typeof FILLS[number]; + +export const COLORS = [ + 'euiColorVis0', + 'euiColorVis1', + 'euiColorVis2', + 'euiColorVis3', + 'euiColorVis4', + 'euiColorVis5', + 'euiColorVis6', + 'euiColorVis7', + 'euiColorVis8', + 'euiColorVis9', + 'gray', +] as const; +export type TokenColor = typeof COLORS[number]; + +export interface TokenProps { + /** + * An EUI icon type + */ + iconType: IconType; + /** + * For best results use one of the vis color names (or 'gray'). + * Or supply your own HEX color. The `fill='light'` (lightened background) will always be overridden by `fill='dark'` (solid background). + * Default: `gray` for glyphs or one of the vis colors for prefab token types + */ + color?: TokenColor | string; + /** + * Outer shape surrounding the icon + * Default: `circle` + */ + shape?: TokenShape; + /** + * `light` for lightened color with border, `dark` for solid, or `none` + * Default: `light` + */ + fill?: TokenFill; + /** + * Size of the token + */ + size?: TokenSize; + /** + * The icon's title. Required for accessibility + */ + title?: string; + 'aria-label'?: string; + 'aria-labelledby'?: string; + 'aria-describedby'?: string; +} + +export type EuiTokenProps = CommonProps & + TokenProps & + Omit, 'title'>;