From e69311a50bc5670f3bac376f7c09cfea32f1cba0 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 20 Jun 2022 13:32:45 +0100 Subject: [PATCH 01/25] Removing token `rectangle` --- .../column_sorting.test.tsx.snap | 2 +- .../token/__snapshots__/token.test.tsx.snap | 157 ++++++++--------- src/components/token/token.styles.ts | 147 ++++++++++++++++ src/components/token/token.tsx | 162 ++++++++---------- src/components/token/token_map.ts | 11 +- 5 files changed, 301 insertions(+), 178 deletions(-) create mode 100644 src/components/token/token.styles.ts diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index 1e88f1a3b1c..9bca3f1de44 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -110,7 +110,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover class="euiFlexItem euiFlexItem--flexGrowZero" > - - -`; - -exports[`EuiToken props shape rectangle is rendered 1`] = ` - { + return ` + ${logicalCSS('width', size)}; + ${logicalCSS('height', size)}; + `; +}; + +const _getTokenColor = ( + euiTheme: UseEuiTheme['euiTheme'], + colorMode: UseEuiTheme['colorMode'], + color: number | string +) => { + const iconColor = + typeof color === 'number' ? visColors[color] : euiTheme.colors.darkShade; + + const isDarkMode = colorMode === 'DARK'; + + // $euiTokenGrayColor: lightOrDarkTheme( + // $euiColorDarkShade, + // $euiColorMediumShade + // ); + + // $color: map-get(map-get($euiTokenTypes, $type), 'graphic'); + // $backgroundColor: tintOrShade($color, 90%, 70%); + // $fillColor: makeHighContrastColor($color, $backgroundColor); + + const iconColorBehindText = + typeof color === 'number' + ? visColorsBehindText[color] + : euiTheme.colors.darkShade; + + const backgroundColor = isDarkMode + ? tint(iconColor, 0.9) + : shade(iconColor, 0.7); + + const boxShadowColor = isDarkMode + ? tint(iconColor, 0.7) + : shade(iconColor, 0.6); + + const textColor = isColorDark(...chroma(iconColorBehindText).rgb()) + ? euiTheme.colors.ghost + : euiTheme.colors.ink; + + return ` + // Without a background, the fill color should be the graphic color + color: ${iconColor}; + + + &[class*='-light'] { + color: ${makeHighContrastColor(iconColor)(backgroundColor)}; + background-color: ${backgroundColor}; + box-shadow: inset 0 0 0 1px ${boxShadowColor}; + } + + &[class*='-dark'] { + background-color: ${iconColorBehindText}; + color: ${textColor}; + } + + `; +}; + +const _getBackgroundColor = (color: number | string) => { + const iconColor = typeof color === 'number' ? visColors[color] : 'gray'; + + return ` + background: ${iconColor}; + `; +}; + +export const euiTokenStyles = ( + { euiTheme, colorMode }: UseEuiTheme, + color: string +) => ({ + // Base + euiToken: css` + display: inline-flex; + align-items: center; + justify-content: center; + + svg { + height: 100%; + margin: auto; + } + `, + // Shapes + circle: css` + border-radius: 50%; + `, + square: css` + // These are pretty small elements, the standard size + // is just slightly too large. + border-radius: ${euiTheme.border.radius.small}; + `, + // Sizes + xs: css(_iconSize(euiTheme.size.s)), + s: css(_iconSize(euiTheme.size.base)), + m: css(_iconSize(euiTheme.size.l)), + l: css(_iconSize(euiTheme.size.xl)), + // 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')), + customColor: css` + color: ${color}; + `, + emptyShade: css` + color: ${euiTheme.colors.emptyShade}; + `, + customBackground: css(_getBackgroundColor(color)), + // Fills + light: css``, + dark: css``, + none: css``, +}); diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index e4a2ddbbbe5..e4d96cb06e7 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -7,70 +7,37 @@ */ import React, { FunctionComponent, HTMLAttributes } from 'react'; -import defaults from 'lodash/defaults'; import classNames from 'classnames'; -import { CommonProps, keysOf } from '../common'; -import { isColorDark, hexToRgb } from '../../services'; +import { CommonProps } from '../common'; +import { useEuiTheme } from '../../services'; import { IconType, EuiIcon, IconSize } from '../icon'; import { EuiTokenMapType, TOKEN_MAP } from './token_map'; - -type TokenSize = 'xs' | 's' | 'm' | 'l'; -type TokenShape = 'circle' | 'square' | 'rectangle'; -type TokenFill = 'dark' | 'light' | 'none'; -type TokenColor = - | 'euiColorVis0' - | 'euiColorVis1' - | 'euiColorVis2' - | 'euiColorVis3' - | 'euiColorVis4' - | 'euiColorVis5' - | 'euiColorVis6' - | 'euiColorVis7' - | 'euiColorVis8' - | 'euiColorVis9' - | 'gray'; - -const sizeToClassMap: { [size in TokenSize]: string } = { - xs: 'euiToken--xsmall', - s: 'euiToken--small', - m: 'euiToken--medium', - l: 'euiToken--large', -}; - -export const SIZES = keysOf(sizeToClassMap); - -const shapeToClassMap: { [shape in TokenShape]: string } = { - circle: 'euiToken--circle', - square: 'euiToken--square', - rectangle: 'euiToken--rectangle', -}; - -export const SHAPES = keysOf(shapeToClassMap); - -const fillToClassMap: { [fill in TokenFill]: string | null } = { - none: null, - light: 'euiToken--light', - dark: 'euiToken--dark', -}; - -export const FILLS = keysOf(fillToClassMap); - -const colorToClassMap: { [color in TokenColor]: string } = { - euiColorVis0: 'euiToken--euiColorVis0', - euiColorVis1: 'euiToken--euiColorVis1', - euiColorVis2: 'euiToken--euiColorVis2', - euiColorVis3: 'euiToken--euiColorVis3', - euiColorVis4: 'euiToken--euiColorVis4', - euiColorVis5: 'euiToken--euiColorVis5', - euiColorVis6: 'euiToken--euiColorVis6', - euiColorVis7: 'euiToken--euiColorVis7', - euiColorVis8: 'euiToken--euiColorVis8', - euiColorVis9: 'euiToken--euiColorVis9', - gray: 'euiToken--gray', -}; - -export const COLORS = keysOf(colorToClassMap); +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 { /** @@ -143,53 +110,76 @@ export const EuiToken: FunctionComponent = ({ fill, shape, }; + let finalDisplay; // If the iconType passed is one of the prefab token types, // grab its properties if (typeof iconType === 'string' && iconType in TOKEN_MAP) { const tokenDisplay = TOKEN_MAP[iconType as EuiTokenMapType]; - finalDisplay = defaults(currentDisplay, tokenDisplay); + finalDisplay = { ...currentDisplay, ...tokenDisplay }; } else { finalDisplay = currentDisplay; } const finalColor = finalDisplay.color || 'gray'; const finalShape = finalDisplay.shape || 'circle'; - let finalFill = finalDisplay.fill || 'light'; + const finalFill = finalDisplay.fill || 'light'; + + const euiTheme = useEuiTheme(); + const styles = euiTokenStyles(euiTheme, finalColor); - // Color can be a named space via euiColorVis - let colorClass; - if (finalColor in colorToClassMap) { - colorClass = colorToClassMap[finalColor as TokenColor]; + let cssStyles; + + if (COLORS.includes(finalColor as TokenColor)) { + cssStyles = [ + styles.euiToken, + styles[finalColor as TokenColor], + styles[finalShape], + styles[finalFill], + styles[finalSize], + ]; } - // Or it can be a string which adds inline styles for the - else { + + if (!COLORS.includes(finalColor as TokenColor)) { + // Or it can be a string which adds inline styles for the // text color if fill='none' or if (finalFill === 'none') { - style.color = finalColor; - } - // full background color if fill='dark' and overrides fill='light' with dark - else { - finalFill = 'dark'; - style.backgroundColor = finalColor; - style.color = isColorDark(...hexToRgb(finalColor)) - ? '#FFFFFF' - : '#000000'; + cssStyles = [ + styles.euiToken, + styles.customColor, + styles[finalShape], + styles[finalFill], + styles[finalSize], + ]; + } else { + // full background color if fill='dark' and overrides fill='light' with dark + + // finalFill = 'dark'; + // style.backgroundColor = finalColor; + // acording to the background + // style.color = isColorDark(...hexToRgb(finalColor)) + // ? '#FFFFFF' + // : '#000000'; + + console.log({ finalDisplay }); + + cssStyles = [ + styles.euiToken, + styles.customColor, + styles[finalShape], + // fill + styles.dark, + styles.customBackground, + styles[finalSize], + ]; } } - const classes = classNames( - 'euiToken', - colorClass, - shapeToClassMap[finalShape], - fillToClassMap[finalFill], - sizeToClassMap[size], - className - ); + const classes = classNames('euiToken', className); return ( - + Date: Mon, 20 Jun 2022 13:50:38 +0100 Subject: [PATCH 02/25] Small color fix --- src/components/token/token.styles.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/token/token.styles.ts b/src/components/token/token.styles.ts index df2f56958ca..ef1cb2f5848 100644 --- a/src/components/token/token.styles.ts +++ b/src/components/token/token.styles.ts @@ -54,12 +54,12 @@ const _getTokenColor = ( : euiTheme.colors.darkShade; const backgroundColor = isDarkMode - ? tint(iconColor, 0.9) - : shade(iconColor, 0.7); + ? shade(iconColor, 0.7) + : tint(iconColor, 0.9); const boxShadowColor = isDarkMode - ? tint(iconColor, 0.7) - : shade(iconColor, 0.6); + ? shade(iconColor, 0.6) + : tint(iconColor, 0.7); const textColor = isColorDark(...chroma(iconColorBehindText).rgb()) ? euiTheme.colors.ghost From a2c06d9708b8165c257121f3cbd61169ee898091 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 21 Jul 2022 15:56:20 +0100 Subject: [PATCH 03/25] Putting rectangle shape back. Moving custom colors to style tag. --- src-docs/src/views/icon/custom_tokens.js | 4 +- .../column_sorting.test.tsx.snap | 2 +- .../token/__snapshots__/token.test.tsx.snap | 151 +++++++++--------- src/components/token/token.styles.ts | 79 +++++---- src/components/token/token.tsx | 98 ++++-------- 5 files changed, 160 insertions(+), 174 deletions(-) diff --git a/src-docs/src/views/icon/custom_tokens.js b/src-docs/src/views/icon/custom_tokens.js index df450ae57c4..d82ebbb6687 100644 --- a/src-docs/src/views/icon/custom_tokens.js +++ b/src-docs/src/views/icon/custom_tokens.js @@ -59,7 +59,7 @@ export default () => ( iconType="tokenStruct" size="m" shape="circle" - color="#FF0000" + color="#b9f6c8" /> @@ -70,7 +70,7 @@ export default () => ( paddingSize="m" > { - '' + '' } diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index 1bc0aa4556f..efd124eaed5 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -110,7 +110,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover class="euiFlexItem euiFlexItem--flexGrowZero" > { +const iconSize = (size: string) => { return ` ${logicalCSS('width', size)}; ${logicalCSS('height', size)}; `; }; -const _getTokenColor = ( +const getTokenColor = ( euiTheme: UseEuiTheme['euiTheme'], colorMode: UseEuiTheme['colorMode'], color: number | string @@ -39,15 +39,6 @@ const _getTokenColor = ( const isDarkMode = colorMode === 'DARK'; - // $euiTokenGrayColor: lightOrDarkTheme( - // $euiColorDarkShade, - // $euiColorMediumShade - // ); - - // $color: map-get(map-get($euiTokenTypes, $type), 'graphic'); - // $backgroundColor: tintOrShade($color, 90%, 70%); - // $fillColor: makeHighContrastColor($color, $backgroundColor); - const iconColorBehindText = typeof color === 'number' ? visColorsBehindText[color] @@ -84,7 +75,7 @@ const _getTokenColor = ( `; }; -const _getBackgroundColor = (color: number | string) => { +const getBackgroundColor = (color: number | string) => { const iconColor = typeof color === 'number' ? visColors[color] : 'gray'; return ` @@ -116,30 +107,56 @@ export const euiTokenStyles = ( // is just slightly too large. border-radius: ${euiTheme.border.radius.small}; `, + rectangle: css` + box-sizing: content-box; + border-radius: ${euiTheme.border.radius.small}; + `, // Sizes - xs: css(_iconSize(euiTheme.size.s)), - s: css(_iconSize(euiTheme.size.base)), - m: css(_iconSize(euiTheme.size.l)), - l: css(_iconSize(euiTheme.size.xl)), - // 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')), - customColor: css` - color: ${color}; + xs: css` + ${iconSize(euiTheme.size.m)}; + + &[class*='-rectangle'] { + ${logicalCSS('padding-horizontal', euiTheme.size.xs)}; + } `, + s: css` + ${iconSize(euiTheme.size.base)} + + &[class*='-rectangle'] { + ${logicalCSS('padding-horizontal', euiTheme.size.xs)}; + } + `, + m: css` + ${iconSize(euiTheme.size.l)} + + &[class*='-rectangle'] { + ${logicalCSS('padding-horizontal', euiTheme.size.s)}; + } + `, + l: css` + ${iconSize(euiTheme.size.xl)} + + &[class*='-rectangle'] { + ${logicalCSS('padding-horizontal', euiTheme.size.s)}; + } + `, + // 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')), + customColor: css``, emptyShade: css` color: ${euiTheme.colors.emptyShade}; `, - customBackground: css(_getBackgroundColor(color)), + customBackground: css(getBackgroundColor(color)), // Fills light: css``, dark: css``, diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index e4d96cb06e7..dd05b5e22c9 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -8,10 +8,11 @@ import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; +import defaults from 'lodash/defaults'; import { CommonProps } from '../common'; -import { useEuiTheme } from '../../services'; +import { useEuiTheme, isColorDark, hexToRgb } from '../../services'; -import { IconType, EuiIcon, IconSize } from '../icon'; +import { IconType, EuiIcon } from '../icon'; import { EuiTokenMapType, TOKEN_MAP } from './token_map'; import { euiTokenStyles } from './token.styles'; @@ -46,7 +47,7 @@ export interface TokenProps { iconType: IconType; /** * For best results use one of the vis color names (or 'gray'). - * Or supply your own color (can be used with dark or no fill only). + * Or supply your own HEX color (can be used with dark or no fill only). * Default: `gray` */ color?: TokenColor | string; @@ -91,19 +92,7 @@ export const EuiToken: FunctionComponent = ({ 'aria-describedby': ariaDescribedby, ...rest }) => { - // Set the icon size to the same as the passed size - // unless they passed `xs` which IconSize doesn't support - let finalSize: IconSize = size === 'xs' ? 's' : size; - - // When displaying at the small size, the token specific icons - // should actually be displayed at medium size - if ( - typeof iconType === 'string' && - iconType.indexOf('token') === 0 && - size === 's' - ) { - finalSize = 'm'; - } + const classes = classNames('euiToken', className); const currentDisplay = { color, @@ -117,72 +106,51 @@ export const EuiToken: FunctionComponent = ({ // grab its properties if (typeof iconType === 'string' && iconType in TOKEN_MAP) { const tokenDisplay = TOKEN_MAP[iconType as EuiTokenMapType]; - finalDisplay = { ...currentDisplay, ...tokenDisplay }; + finalDisplay = defaults(currentDisplay, tokenDisplay); } else { finalDisplay = currentDisplay; } const finalColor = finalDisplay.color || 'gray'; const finalShape = finalDisplay.shape || 'circle'; - const finalFill = finalDisplay.fill || 'light'; + let finalFill = finalDisplay.fill || 'light'; const euiTheme = useEuiTheme(); const styles = euiTokenStyles(euiTheme, finalColor); - let cssStyles; + const isTokenColor = COLORS.includes(finalColor as TokenColor); - if (COLORS.includes(finalColor as TokenColor)) { - cssStyles = [ - styles.euiToken, - styles[finalColor as TokenColor], - styles[finalShape], - styles[finalFill], - styles[finalSize], - ]; - } + let cssStyles = [ + styles.euiToken, + styles[finalShape], + styles[finalFill], + styles[size], + ]; - if (!COLORS.includes(finalColor as TokenColor)) { - // Or it can be a string which adds inline styles for the - // text color if fill='none' or - if (finalFill === 'none') { - cssStyles = [ - styles.euiToken, - styles.customColor, - styles[finalShape], - styles[finalFill], - styles[finalSize], - ]; - } else { - // full background color if fill='dark' and overrides fill='light' with dark - - // finalFill = 'dark'; - // style.backgroundColor = finalColor; - // acording to the background - // style.color = isColorDark(...hexToRgb(finalColor)) - // ? '#FFFFFF' - // : '#000000'; - - console.log({ finalDisplay }); - - cssStyles = [ - styles.euiToken, - styles.customColor, - styles[finalShape], - // fill - styles.dark, - styles.customBackground, - styles[finalSize], - ]; - } - } + let finalStyle; - const classes = classNames('euiToken', className); + if (isTokenColor) { + cssStyles = [styles[finalColor as TokenColor], ...cssStyles]; + } else if (finalFill === 'none') { + // when custom color is used, we passed it in the style prop + cssStyles = [styles.customColor, ...cssStyles]; + finalStyle = { color: finalColor, ...style }; + } else { + const isFinalColorDark = isColorDark(...hexToRgb(finalColor)); + const lightOrDarkColor = isFinalColorDark ? '#FFFFFF' : '#000000'; + + finalFill = 'dark'; + finalStyle = { + color: lightOrDarkColor, + backgroundColor: finalColor, + ...style, + }; + } return ( - + Date: Fri, 22 Jul 2022 18:31:27 +0100 Subject: [PATCH 04/25] Better comments. Better custom example. Renaming a few variables. --- src-docs/src/views/icon/custom_tokens.js | 20 +++++++++ src-docs/src/views/icon/icon_example.js | 2 +- .../token/__snapshots__/token.test.tsx.snap | 22 +++++----- src/components/token/token.styles.ts | 41 +++++++------------ src/components/token/token.tsx | 4 +- 5 files changed, 49 insertions(+), 40 deletions(-) diff --git a/src-docs/src/views/icon/custom_tokens.js b/src-docs/src/views/icon/custom_tokens.js index d82ebbb6687..9031c7a0c1f 100644 --- a/src-docs/src/views/icon/custom_tokens.js +++ b/src-docs/src/views/icon/custom_tokens.js @@ -9,6 +9,26 @@ import { export default () => ( <> + + + + + + + {''} + + + + , }, { + title: 'Custom tokens', wrapText: false, text: ( <> -

Custom tokens

By default, an iconType with the token prefix (i.e. those listed above) will have predefined styles. However, diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap index 107d762ecfb..73496ce3028 100644 --- a/src/components/token/__snapshots__/token.test.tsx.snap +++ b/src/components/token/__snapshots__/token.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiToken is rendered 1`] = ` { - const iconColor = - typeof color === 'number' ? visColors[color] : euiTheme.colors.darkShade; + const isVizColor = typeof color === 'number'; + + const iconColor = isVizColor ? visColors[color] : euiTheme.colors.darkShade; const isDarkMode = colorMode === 'DARK'; - const iconColorBehindText = - typeof color === 'number' - ? visColorsBehindText[color] - : euiTheme.colors.darkShade; + const backgroundDarkColor = isVizColor + ? visColorsBehindText[color] + : euiTheme.colors.darkShade; - const backgroundColor = isDarkMode + const backgroundLightColor = isDarkMode ? shade(iconColor, 0.7) : tint(iconColor, 0.9); + const lightColor = makeHighContrastColor(iconColor)(backgroundLightColor); + const boxShadowColor = isDarkMode ? shade(iconColor, 0.6) : tint(iconColor, 0.7); - const textColor = isColorDark(...chroma(iconColorBehindText).rgb()) + const darkColor = isColorDark(...chroma(backgroundDarkColor).rgb()) ? euiTheme.colors.ghost : euiTheme.colors.ink; @@ -62,31 +64,19 @@ const getTokenColor = ( &[class*='-light'] { - color: ${makeHighContrastColor(iconColor)(backgroundColor)}; - background-color: ${backgroundColor}; + color: ${lightColor}; + background-color: ${backgroundLightColor}; box-shadow: inset 0 0 0 1px ${boxShadowColor}; } &[class*='-dark'] { - background-color: ${iconColorBehindText}; - color: ${textColor}; + color: ${darkColor}; + background-color: ${backgroundDarkColor}; } - - `; -}; - -const getBackgroundColor = (color: number | string) => { - const iconColor = typeof color === 'number' ? visColors[color] : 'gray'; - - return ` - background: ${iconColor}; `; }; -export const euiTokenStyles = ( - { euiTheme, colorMode }: UseEuiTheme, - color: string -) => ({ +export const euiTokenStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ // Base euiToken: css` display: inline-flex; @@ -156,7 +146,6 @@ export const euiTokenStyles = ( emptyShade: css` color: ${euiTheme.colors.emptyShade}; `, - customBackground: css(getBackgroundColor(color)), // Fills light: css``, dark: css``, diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index dd05b5e22c9..4fcdea3bf43 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -47,7 +47,7 @@ export interface TokenProps { iconType: IconType; /** * For best results use one of the vis color names (or 'gray'). - * Or supply your own HEX color (can be used with dark or no fill only). + * Or supply your own HEX color (can be used with fill 'dark' or fill 'none' only). * Default: `gray` */ color?: TokenColor | string; @@ -116,7 +116,7 @@ export const EuiToken: FunctionComponent = ({ let finalFill = finalDisplay.fill || 'light'; const euiTheme = useEuiTheme(); - const styles = euiTokenStyles(euiTheme, finalColor); + const styles = euiTokenStyles(euiTheme); const isTokenColor = COLORS.includes(finalColor as TokenColor); From 227a7ea89b20a28b3ae15412c20f8ad0f457e71b Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 13:18:49 +0100 Subject: [PATCH 05/25] Deleting `*.scss` files --- src/components/index.scss | 1 - src/components/token/_index.scss | 2 - src/components/token/_token.scss | 85 ---------------------- src/components/token/_variables.scss | 13 ---- src/components/token/token.styles.ts | 2 - src/themes/amsterdam/overrides/_index.scss | 1 - src/themes/amsterdam/overrides/_token.scss | 4 - 7 files changed, 108 deletions(-) delete mode 100644 src/components/token/_index.scss delete mode 100644 src/components/token/_token.scss delete mode 100644 src/components/token/_variables.scss delete mode 100644 src/themes/amsterdam/overrides/_token.scss diff --git a/src/components/index.scss b/src/components/index.scss index 98860729b2f..524d449688f 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -43,6 +43,5 @@ @import 'table/index'; @import 'tabs/index'; @import 'toast/index'; -@import 'token/index'; @import 'tool_tip/index'; @import 'tour/index'; diff --git a/src/components/token/_index.scss b/src/components/token/_index.scss deleted file mode 100644 index 30c744130f3..00000000000 --- a/src/components/token/_index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import 'variables'; -@import 'token'; diff --git a/src/components/token/_token.scss b/src/components/token/_token.scss deleted file mode 100644 index 97fa36f131f..00000000000 --- a/src/components/token/_token.scss +++ /dev/null @@ -1,85 +0,0 @@ -.euiToken { - display: inline-flex; - align-items: center; - justify-content: center; - - svg { - height: 100%; - margin: auto; - } -} - -.euiToken--circle { - border-radius: 50%; -} - -.euiToken--square { - // These are pretty small elements, the standard size - // is just slightly too large. - border-radius: $euiBorderRadius - 1px; -} - -.euiToken--xsmall { - width: $euiSizeM; - height: $euiSizeM; - - &.euiToken--rectangle { - padding: 0 $euiSizeXS; - } -} - -.euiToken--small { - width: $euiSize; - height: $euiSize; - - &.euiToken--rectangle { - padding: 0 $euiSizeXS; - } -} - -.euiToken--medium { - width: $euiSizeL; - height: $euiSizeL; - - &.euiToken--rectangle { - padding: 0 $euiSizeS; - } -} - -.euiToken--large { - width: $euiSizeXL; - height: $euiSizeXL; - - &.euiToken--rectangle { - padding: 0 ($euiSize * .5); - } -} - -.euiToken--rectangle { - box-sizing: content-box; -} - -@each $type in $euiTokenTypeKeys { - .euiToken--#{$type} { - $color: map-get(map-get($euiTokenTypes, $type), 'graphic'); - $backgroundColor: tintOrShade($color, 90%, 70%); - $fillColor: makeHighContrastColor($color, $backgroundColor); - - // Without a background, the fill color should be the graphic color - color: $color; - - &.euiToken--light { - color: $fillColor; - background-color: $backgroundColor; - box-shadow: inset 0 0 0 1px tintOrShade($color, 70%, 60%); - } - - // Dark tokens uses the main color as the background against light or dark text - $color: map-get(map-get($euiTokenTypes, $type), 'behindText'); - - &.euiToken--dark { - background-color: $color; - color: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk); - } - } -} diff --git a/src/components/token/_variables.scss b/src/components/token/_variables.scss deleted file mode 100644 index 8bad4d5f81e..00000000000 --- a/src/components/token/_variables.scss +++ /dev/null @@ -1,13 +0,0 @@ -// sass-lint:disable indentation - -$euiTokenGrayColor: lightOrDarkTheme($euiColorDarkShade, $euiColorMediumShade); - -// Appends the gray color to the color blind palette -$euiTokenTypes: map-merge($euiPaletteColorBlind, ( - 'gray': ( - graphic: $euiTokenGrayColor, - behindText: $euiTokenGrayColor, - ) -)); - -$euiTokenTypeKeys: map-keys($euiTokenTypes); diff --git a/src/components/token/token.styles.ts b/src/components/token/token.styles.ts index 9747bd6ab03..559e8815466 100644 --- a/src/components/token/token.styles.ts +++ b/src/components/token/token.styles.ts @@ -93,8 +93,6 @@ export const euiTokenStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ border-radius: 50%; `, square: css` - // These are pretty small elements, the standard size - // is just slightly too large. border-radius: ${euiTheme.border.radius.small}; `, rectangle: css` diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss index 727d9268e4e..0c6ce71d650 100644 --- a/src/themes/amsterdam/overrides/_index.scss +++ b/src/themes/amsterdam/overrides/_index.scss @@ -36,5 +36,4 @@ @import 'steps'; @import 'tabs'; @import 'toast'; -@import 'token'; @import 'tooltip'; diff --git a/src/themes/amsterdam/overrides/_token.scss b/src/themes/amsterdam/overrides/_token.scss deleted file mode 100644 index 7302be7663c..00000000000 --- a/src/themes/amsterdam/overrides/_token.scss +++ /dev/null @@ -1,4 +0,0 @@ -.euiToken--square { - // Same border radius as the legacy theme - border-radius: $euiBorderRadiusSmall - 1px; -} From 51621ae73ad31124f426cd611b6249d66c62d7e2 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 13:59:30 +0100 Subject: [PATCH 06/25] Adding new example with a `glyph`. Adding required logic for `EuiIcon` size. --- src-docs/src/views/icon/custom_tokens.js | 30 ++++++++++++------------ src/components/token/token.tsx | 19 +++++++++++++-- 2 files changed, 32 insertions(+), 17 deletions(-) diff --git a/src-docs/src/views/icon/custom_tokens.js b/src-docs/src/views/icon/custom_tokens.js index 9031c7a0c1f..c3d39a8f587 100644 --- a/src-docs/src/views/icon/custom_tokens.js +++ b/src-docs/src/views/icon/custom_tokens.js @@ -15,7 +15,7 @@ export default () => ( grow={false} style={{ minWidth: 96 }} > - + ( transparentBackground paddingSize="m" > - {''} + {''} @@ -35,7 +35,7 @@ export default () => ( grow={false} style={{ minWidth: 96 }} > - + ( transparentBackground paddingSize="m" > - {''} + {''} @@ -55,7 +55,12 @@ export default () => ( grow={false} style={{ minWidth: 96 }} > - + ( transparentBackground paddingSize="m" > - {''} + { + '' + } @@ -75,12 +82,7 @@ export default () => ( grow={false} style={{ minWidth: 96 }} > - + ( transparentBackground paddingSize="m" > - { - '' - } + {''} diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index 4fcdea3bf43..93023ce688b 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -12,7 +12,7 @@ import defaults from 'lodash/defaults'; import { CommonProps } from '../common'; import { useEuiTheme, isColorDark, hexToRgb } from '../../services'; -import { IconType, EuiIcon } from '../icon'; +import { IconType, EuiIcon, IconSize } from '../icon'; import { EuiTokenMapType, TOKEN_MAP } from './token_map'; import { euiTokenStyles } from './token.styles'; @@ -92,7 +92,19 @@ export const EuiToken: FunctionComponent = ({ 'aria-describedby': ariaDescribedby, ...rest }) => { - const classes = classNames('euiToken', className); + // Set the icon size to the same as the passed size + // unless they passed `xs` which IconSize doesn't support + let finalSize: IconSize = size === 'xs' ? 's' : size; + + // When displaying at the small size, the token specific icons + // should actually be displayed at medium size + if ( + typeof iconType === 'string' && + iconType.indexOf('token') === 0 && + size === 's' + ) { + finalSize = 'm'; + } const currentDisplay = { color, @@ -147,10 +159,13 @@ export const EuiToken: FunctionComponent = ({ }; } + const classes = classNames('euiToken', className); + return ( Date: Mon, 25 Jul 2022 15:20:06 +0100 Subject: [PATCH 07/25] Replacing last custom example with `faceHappy` icon --- src-docs/src/views/icon/custom_tokens.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/icon/custom_tokens.js b/src-docs/src/views/icon/custom_tokens.js index c3d39a8f587..d112a17bdc0 100644 --- a/src-docs/src/views/icon/custom_tokens.js +++ b/src-docs/src/views/icon/custom_tokens.js @@ -103,7 +103,7 @@ export default () => ( style={{ minWidth: 96 }} > ( paddingSize="m" > { - '' + '' } From d0263728c2c91b1fd3dac42800cdd4d40e2a8093 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 15:44:38 +0100 Subject: [PATCH 08/25] Adding `customColor` to `className` --- src/components/token/__snapshots__/token.test.tsx.snap | 2 +- src/components/token/token.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap index 73496ce3028..681ddb63b9c 100644 --- a/src/components/token/__snapshots__/token.test.tsx.snap +++ b/src/components/token/__snapshots__/token.test.tsx.snap @@ -15,7 +15,7 @@ exports[`EuiToken is rendered 1`] = ` exports[`EuiToken props color can be a custom hex 1`] = ` = ({ if (isTokenColor) { cssStyles = [styles[finalColor as TokenColor], ...cssStyles]; } else if (finalFill === 'none') { - // when custom color is used, we passed it in the style prop cssStyles = [styles.customColor, ...cssStyles]; finalStyle = { color: finalColor, ...style }; } else { const isFinalColorDark = isColorDark(...hexToRgb(finalColor)); const lightOrDarkColor = isFinalColorDark ? '#FFFFFF' : '#000000'; + cssStyles = [styles.customColor, ...cssStyles]; + finalFill = 'dark'; finalStyle = { color: lightOrDarkColor, From 7ace7399d877015cd286daf051a6c32320db0f3e Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 16:09:05 +0100 Subject: [PATCH 09/25] Putting `customColor` or `tokenColor` at the end of the class name --- .../column_sorting.test.tsx.snap | 2 +- .../token/__snapshots__/token.test.tsx.snap | 150 +++++++++--------- src/components/token/token.styles.ts | 2 +- src/components/token/token.tsx | 6 +- 4 files changed, 80 insertions(+), 80 deletions(-) diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index 84f3e30253a..cd88127432b 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -111,7 +111,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover class="euiFlexItem euiFlexItem--flexGrowZero" > ({ ${logicalCSS('padding-horizontal', euiTheme.size.s)}; } `, - // colors + // Colors euiColorVis0: css(getTokenColor(euiTheme, colorMode, 0)), euiColorVis1: css(getTokenColor(euiTheme, colorMode, 1)), euiColorVis2: css(getTokenColor(euiTheme, colorMode, 2)), diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index 1bccd205353..9e2996c4041 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -142,15 +142,15 @@ export const EuiToken: FunctionComponent = ({ let finalStyle; if (isTokenColor) { - cssStyles = [styles[finalColor as TokenColor], ...cssStyles]; + cssStyles = [...cssStyles, styles[finalColor as TokenColor]]; } else if (finalFill === 'none') { - cssStyles = [styles.customColor, ...cssStyles]; + cssStyles = [...cssStyles, styles.customColor]; finalStyle = { color: finalColor, ...style }; } else { const isFinalColorDark = isColorDark(...hexToRgb(finalColor)); const lightOrDarkColor = isFinalColorDark ? '#FFFFFF' : '#000000'; - cssStyles = [styles.customColor, ...cssStyles]; + cssStyles = [...cssStyles, styles.customColor]; finalFill = 'dark'; finalStyle = { From 4fdd5aa521290bcb53629b8398a27012990eaf24 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 16:26:41 +0100 Subject: [PATCH 10/25] Better comment --- src/components/token/token.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index 9e2996c4041..60f51974b24 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -48,7 +48,7 @@ export interface TokenProps { /** * For best results use one of the vis color names (or 'gray'). * Or supply your own HEX color (can be used with fill 'dark' or fill 'none' only). - * Default: `gray` + * Default: `gray` (glyphs) or one of the vis colors (token) */ color?: TokenColor | string; /** From ffaa309de07a0bc41d107ac36c65c4b851fb45d1 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 16:32:03 +0100 Subject: [PATCH 11/25] Again. :P Better prop comment. --- src/components/token/token.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index 60f51974b24..a55fce3d843 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -48,7 +48,7 @@ export interface TokenProps { /** * For best results use one of the vis color names (or 'gray'). * Or supply your own HEX color (can be used with fill 'dark' or fill 'none' only). - * Default: `gray` (glyphs) or one of the vis colors (token) + * Default: `gray` for glyphs or one of the vis colors for prefab token types */ color?: TokenColor | string; /** From 1a80cea67e92362d6526c028bb98ebd0da6e5a34 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 16:50:21 +0100 Subject: [PATCH 12/25] Trying to enhance comments --- src/components/token/token.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index a55fce3d843..f7c497444cb 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -144,9 +144,15 @@ export const EuiToken: FunctionComponent = ({ if (isTokenColor) { cssStyles = [...cssStyles, styles[finalColor as TokenColor]]; } else if (finalFill === 'none') { + // When a custom HEX color is passed and the token doesn't have any fill (no background), + // the icon gets that passed color cssStyles = [...cssStyles, styles.customColor]; finalStyle = { color: finalColor, ...style }; } else { + // When a custom HEX color is passed and the token has a fill (light or dark), + // the background gets the custom color and the icon gets white or black based on the passed color + // The fill='light' (transparent background) will always be overridden by fill='dark' (opaque background) + // to better handle custom colors const isFinalColorDark = isColorDark(...hexToRgb(finalColor)); const lightOrDarkColor = isFinalColorDark ? '#FFFFFF' : '#000000'; From 147ea92e79e1e8f42dc7397e0fdb71217d265071 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 17:27:40 +0100 Subject: [PATCH 13/25] Centering `EuiIconTokenStruct`. Fix border-radius for xs size --- src-docs/src/views/icon/custom_tokens.js | 40 +++++++++++++++++++ .../icon/__snapshots__/icon.test.tsx.snap | 2 +- src/components/icon/assets/tokenStruct.tsx | 2 +- .../icon/svgs/tokens/tokenStruct.svg | 2 +- src/components/token/token.styles.ts | 6 ++- 5 files changed, 48 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/icon/custom_tokens.js b/src-docs/src/views/icon/custom_tokens.js index d112a17bdc0..3b3047aa9e4 100644 --- a/src-docs/src/views/icon/custom_tokens.js +++ b/src-docs/src/views/icon/custom_tokens.js @@ -29,6 +29,46 @@ export default () => ( + + + + + + + {''} + + + + + + + + + + + {''} + + + + diff --git a/src/components/icon/assets/tokenStruct.tsx b/src/components/icon/assets/tokenStruct.tsx index 24e3070f5e3..1e13ab1672b 100644 --- a/src/components/icon/assets/tokenStruct.tsx +++ b/src/components/icon/assets/tokenStruct.tsx @@ -30,7 +30,7 @@ const EuiIconTokenStruct = ({ {title ? {title} : null} ); diff --git a/src/components/icon/svgs/tokens/tokenStruct.svg b/src/components/icon/svgs/tokens/tokenStruct.svg index 3eae7a65f6f..93265ccfaf9 100644 --- a/src/components/icon/svgs/tokens/tokenStruct.svg +++ b/src/components/icon/svgs/tokens/tokenStruct.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/token/token.styles.ts b/src/components/token/token.styles.ts index 62db8fc12ad..a736915515a 100644 --- a/src/components/token/token.styles.ts +++ b/src/components/token/token.styles.ts @@ -103,12 +103,16 @@ export const euiTokenStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ xs: css` ${iconSize(euiTheme.size.m)}; + &[class*='-square'] { + border-radius: calc(${euiTheme.border.radius.small} / 2); + } + &[class*='-rectangle'] { ${logicalCSS('padding-horizontal', euiTheme.size.xs)}; } `, s: css` - ${iconSize(euiTheme.size.base)} + ${iconSize(euiTheme.size.base)}; &[class*='-rectangle'] { ${logicalCSS('padding-horizontal', euiTheme.size.xs)}; From 7c46954620e46814e9df2f78fde3d4e0a4063b20 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 18:22:10 +0100 Subject: [PATCH 14/25] Fix `xs` `rectangle` shape --- src/components/token/token.styles.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/token/token.styles.ts b/src/components/token/token.styles.ts index a736915515a..d73379384f7 100644 --- a/src/components/token/token.styles.ts +++ b/src/components/token/token.styles.ts @@ -108,7 +108,12 @@ export const euiTokenStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ } &[class*='-rectangle'] { + ${logicalCSS( + 'padding-vertical', + '1px' + )}; // adds a small padding so that the icon is not touching the border ${logicalCSS('padding-horizontal', euiTheme.size.xs)}; + border-radius: calc(${euiTheme.border.radius.small} / 2); } `, s: css` From d27eb4c034ba5ced8d7384edd527cbc682d60d85 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 19:01:34 +0100 Subject: [PATCH 15/25] Adding `CL` --- src-docs/src/views/icon/custom_tokens.js | 40 ------------------------ upcoming_changelogs/6067.md | 5 +++ 2 files changed, 5 insertions(+), 40 deletions(-) create mode 100644 upcoming_changelogs/6067.md diff --git a/src-docs/src/views/icon/custom_tokens.js b/src-docs/src/views/icon/custom_tokens.js index 3b3047aa9e4..d112a17bdc0 100644 --- a/src-docs/src/views/icon/custom_tokens.js +++ b/src-docs/src/views/icon/custom_tokens.js @@ -29,46 +29,6 @@ export default () => ( - - - - - - - {''} - - - - - - - - - - - {''} - - - - Date: Mon, 25 Jul 2022 19:09:51 +0100 Subject: [PATCH 16/25] Adding `shouldRenderCustomStyles` --- src/components/token/token.test.tsx | 3 +++ src/components/token/token.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/token/token.test.tsx b/src/components/token/token.test.tsx index 4c44c912cf5..979260ab9f4 100644 --- a/src/components/token/token.test.tsx +++ b/src/components/token/token.test.tsx @@ -9,6 +9,7 @@ import React from 'react'; import { render } from 'enzyme'; import { requiredProps } from '../../test'; +import { shouldRenderCustomStyles } from '../../test/internal'; import { EuiToken, COLORS, SHAPES, SIZES, FILLS } from './token'; import { TOKEN_MAP } from './token_map'; @@ -18,6 +19,8 @@ const tokenTypes = keysOf(TOKEN_MAP); const tokenColors = COLORS; describe('EuiToken', () => { + shouldRenderCustomStyles(); + test('is rendered', () => { const component = render(); diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index f7c497444cb..d0e2a87e918 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -139,7 +139,7 @@ export const EuiToken: FunctionComponent = ({ styles[size], ]; - let finalStyle; + let finalStyle = style; if (isTokenColor) { cssStyles = [...cssStyles, styles[finalColor as TokenColor]]; From 5f2583a0c38355f5019307b98a4f02ef5eac425f Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 19:16:32 +0100 Subject: [PATCH 17/25] Removed styling variables --- .../src/views/theme/_json/eui_theme_dark.json | 51 +------------------ .../views/theme/_json/eui_theme_light.json | 51 +------------------ 2 files changed, 2 insertions(+), 100 deletions(-) diff --git a/src-docs/src/views/theme/_json/eui_theme_dark.json b/src-docs/src/views/theme/_json/eui_theme_dark.json index 2d676328976..6b783b16fef 100644 --- a/src-docs/src/views/theme/_json/eui_theme_dark.json +++ b/src-docs/src/views/theme/_json/eui_theme_dark.json @@ -181,8 +181,6 @@ "large": "22px" }, "euiMarkdownEditorMinHeight": "150px", - "euiPopoverArrowSize": "12px", - "euiPopoverTranslateDistance": "8px", "euiResizableButtonTransitionSpeed": "150ms", "euiResizableButtonSize": "16px", "euiSelectableListItemBorder": "1px solid #202128", @@ -253,54 +251,7 @@ "warning": "#f3d371", "danger": "#f86b63" }, - "euiTokenGrayColor": "#535966", - "euiTokenTypes": { - "euiColorVis0": { - "graphic": "#54b399", - "behindText": "#6dccb1" - }, - "euiColorVis1": { - "graphic": "#6092c0", - "behindText": "#79aad9" - }, - "euiColorVis2": { - "graphic": "#d36086", - "behindText": "#ee789d" - }, - "euiColorVis3": { - "graphic": "#9170b8", - "behindText": "#a987d1" - }, - "euiColorVis4": { - "graphic": "#ca8eae", - "behindText": "#e4a6c7" - }, - "euiColorVis5": { - "graphic": "#d6bf57", - "behindText": "#f1d86f" - }, - "euiColorVis6": { - "graphic": "#b9a888", - "behindText": "#d2c0a0" - }, - "euiColorVis7": { - "graphic": "#da8b45", - "behindText": "#f5a35c" - }, - "euiColorVis8": { - "graphic": "#aa6556", - "behindText": "#c47c6c" - }, - "euiColorVis9": { - "graphic": "#e7664c", - "behindText": "#ff7e62" - }, - "gray": { - "graphic": "#535966", - "behindText": "#535966" - } - }, - "euiTokenTypeKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9', 'gray'", + "euiPopoverArrowSize": "12px", "euiContrastRatioText": 4.5, "euiContrastRatioGraphic": 3, "euiContrastRatioDisabled": 2, diff --git a/src-docs/src/views/theme/_json/eui_theme_light.json b/src-docs/src/views/theme/_json/eui_theme_light.json index 1a4b40b83ba..db838d0a7e7 100644 --- a/src-docs/src/views/theme/_json/eui_theme_light.json +++ b/src-docs/src/views/theme/_json/eui_theme_light.json @@ -181,8 +181,6 @@ "large": "22px" }, "euiMarkdownEditorMinHeight": "150px", - "euiPopoverArrowSize": "12px", - "euiPopoverTranslateDistance": "8px", "euiResizableButtonTransitionSpeed": "150ms", "euiResizableButtonSize": "16px", "euiSelectableListItemBorder": "1px solid #eef2f7", @@ -253,54 +251,7 @@ "warning": "#fec514", "danger": "#bd271e" }, - "euiTokenGrayColor": "#69707d", - "euiTokenTypes": { - "euiColorVis0": { - "graphic": "#54b399", - "behindText": "#6dccb1" - }, - "euiColorVis1": { - "graphic": "#6092c0", - "behindText": "#79aad9" - }, - "euiColorVis2": { - "graphic": "#d36086", - "behindText": "#ee789d" - }, - "euiColorVis3": { - "graphic": "#9170b8", - "behindText": "#a987d1" - }, - "euiColorVis4": { - "graphic": "#ca8eae", - "behindText": "#e4a6c7" - }, - "euiColorVis5": { - "graphic": "#d6bf57", - "behindText": "#f1d86f" - }, - "euiColorVis6": { - "graphic": "#b9a888", - "behindText": "#d2c0a0" - }, - "euiColorVis7": { - "graphic": "#da8b45", - "behindText": "#f5a35c" - }, - "euiColorVis8": { - "graphic": "#aa6556", - "behindText": "#c47c6c" - }, - "euiColorVis9": { - "graphic": "#e7664c", - "behindText": "#ff7e62" - }, - "gray": { - "graphic": "#69707d", - "behindText": "#69707d" - } - }, - "euiTokenTypeKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9', 'gray'", + "euiPopoverArrowSize": "12px", "euiContrastRatioText": 4.5, "euiContrastRatioGraphic": 3, "euiContrastRatioDisabled": 2, From b1128a828f1a420c4709be40c2ede40b542d257e Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Mon, 25 Jul 2022 19:53:36 +0100 Subject: [PATCH 18/25] Removed unused key --- src/components/token/token.styles.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/token/token.styles.ts b/src/components/token/token.styles.ts index d73379384f7..338c3c699cd 100644 --- a/src/components/token/token.styles.ts +++ b/src/components/token/token.styles.ts @@ -150,9 +150,6 @@ export const euiTokenStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ euiColorVis9: css(getTokenColor(euiTheme, colorMode, 9)), gray: css(getTokenColor(euiTheme, colorMode, 'gray')), customColor: css``, - emptyShade: css` - color: ${euiTheme.colors.emptyShade}; - `, // Fills light: css``, dark: css``, From 9ec7d9cd66cb5b0d75e8719a4ed305153e59132a Mon Sep 17 00:00:00 2001 From: Constance Chen Date: Mon, 25 Jul 2022 13:05:01 -0700 Subject: [PATCH 19/25] Remove need for lodash `defaults` --- src/components/token/token.tsx | 27 ++++++++------------------- 1 file changed, 8 insertions(+), 19 deletions(-) diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index d0e2a87e918..8c9695d63c0 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -8,7 +8,6 @@ import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; -import defaults from 'lodash/defaults'; import { CommonProps } from '../common'; import { useEuiTheme, isColorDark, hexToRgb } from '../../services'; @@ -106,26 +105,16 @@ export const EuiToken: FunctionComponent = ({ finalSize = 'm'; } - const currentDisplay = { - color, - fill, - shape, - }; - - let finalDisplay; - // If the iconType passed is one of the prefab token types, // grab its properties - if (typeof iconType === 'string' && iconType in TOKEN_MAP) { - const tokenDisplay = TOKEN_MAP[iconType as EuiTokenMapType]; - finalDisplay = defaults(currentDisplay, tokenDisplay); - } else { - finalDisplay = currentDisplay; - } - - const finalColor = finalDisplay.color || 'gray'; - const finalShape = finalDisplay.shape || 'circle'; - let finalFill = finalDisplay.fill || 'light'; + const tokenDefaults = + typeof iconType === 'string' && iconType in TOKEN_MAP + ? TOKEN_MAP[iconType as EuiTokenMapType] + : {}; + + const finalColor = color || tokenDefaults.color || 'gray'; + const finalShape = shape || tokenDefaults.shape || 'circle'; + let finalFill = fill || 'light'; const euiTheme = useEuiTheme(); const styles = euiTokenStyles(euiTheme); From fe08564d30df46d19f3791ebe5d301d85600fb7f Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 27 Jul 2022 13:23:04 +0100 Subject: [PATCH 20/25] Updated `iconSize` with `logicalSizeCSS` --- src/components/token/token.styles.ts | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/src/components/token/token.styles.ts b/src/components/token/token.styles.ts index 338c3c699cd..0acfbf9b5fb 100644 --- a/src/components/token/token.styles.ts +++ b/src/components/token/token.styles.ts @@ -8,7 +8,7 @@ import { css } from '@emotion/react'; import chroma from 'chroma-js'; -import { logicalCSS } from '../../global_styling'; +import { logicalCSS, logicalSizeCSS } from '../../global_styling'; import { UseEuiTheme, euiPaletteColorBlind, @@ -22,13 +22,6 @@ import { const visColors = euiPaletteColorBlind(); const visColorsBehindText = euiPaletteColorBlindBehindText(); -const iconSize = (size: string) => { - return ` - ${logicalCSS('width', size)}; - ${logicalCSS('height', size)}; - `; -}; - const getTokenColor = ( euiTheme: UseEuiTheme['euiTheme'], colorMode: UseEuiTheme['colorMode'], @@ -101,7 +94,7 @@ export const euiTokenStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ `, // Sizes xs: css` - ${iconSize(euiTheme.size.m)}; + ${logicalSizeCSS(euiTheme.size.s, euiTheme.size.s)}; &[class*='-square'] { border-radius: calc(${euiTheme.border.radius.small} / 2); @@ -117,21 +110,21 @@ export const euiTokenStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ } `, s: css` - ${iconSize(euiTheme.size.base)}; + ${logicalSizeCSS(euiTheme.size.base, euiTheme.size.base)}; &[class*='-rectangle'] { ${logicalCSS('padding-horizontal', euiTheme.size.xs)}; } `, m: css` - ${iconSize(euiTheme.size.l)} + ${logicalSizeCSS(euiTheme.size.l, euiTheme.size.l)}; &[class*='-rectangle'] { ${logicalCSS('padding-horizontal', euiTheme.size.s)}; } `, l: css` - ${iconSize(euiTheme.size.xl)} + ${logicalSizeCSS(euiTheme.size.xl, euiTheme.size.xl)}; &[class*='-rectangle'] { ${logicalCSS('padding-horizontal', euiTheme.size.s)}; From 42afc2be38d8d3af0d570e390f9ce68867e50235 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Wed, 27 Jul 2022 13:26:00 +0100 Subject: [PATCH 21/25] Adding `logicalCSS` for width --- src/components/token/token.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/token/token.styles.ts b/src/components/token/token.styles.ts index 0acfbf9b5fb..32299ec6812 100644 --- a/src/components/token/token.styles.ts +++ b/src/components/token/token.styles.ts @@ -77,7 +77,7 @@ export const euiTokenStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({ justify-content: center; svg { - height: 100%; + ${logicalCSS('height', '100%')} margin: auto; } `, From 720c0d4ad5c4ac2387c96de3fefc8a9fcd604050 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 28 Jul 2022 10:32:32 +0100 Subject: [PATCH 22/25] Addressing PR review --- src/components/token/token.tsx | 11 ++++++----- upcoming_changelogs/6067.md | 8 +++++--- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/token/token.tsx b/src/components/token/token.tsx index 8c9695d63c0..d5c97fb8a4f 100644 --- a/src/components/token/token.tsx +++ b/src/components/token/token.tsx @@ -46,7 +46,7 @@ export interface TokenProps { iconType: IconType; /** * For best results use one of the vis color names (or 'gray'). - * Or supply your own HEX color (can be used with fill 'dark' or fill 'none' only). + * 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; @@ -77,6 +77,9 @@ export type EuiTokenProps = CommonProps & TokenProps & Omit, 'title'>; +const isTokenColor = (color: string): color is TokenColor => + COLORS.includes(color as TokenColor); + export const EuiToken: FunctionComponent = ({ iconType, color, @@ -119,8 +122,6 @@ export const EuiToken: FunctionComponent = ({ const euiTheme = useEuiTheme(); const styles = euiTokenStyles(euiTheme); - const isTokenColor = COLORS.includes(finalColor as TokenColor); - let cssStyles = [ styles.euiToken, styles[finalShape], @@ -130,7 +131,7 @@ export const EuiToken: FunctionComponent = ({ let finalStyle = style; - if (isTokenColor) { + if (isTokenColor(finalColor)) { cssStyles = [...cssStyles, styles[finalColor as TokenColor]]; } else if (finalFill === 'none') { // When a custom HEX color is passed and the token doesn't have any fill (no background), @@ -140,7 +141,7 @@ export const EuiToken: FunctionComponent = ({ } else { // When a custom HEX color is passed and the token has a fill (light or dark), // the background gets the custom color and the icon gets white or black based on the passed color - // The fill='light' (transparent background) will always be overridden by fill='dark' (opaque background) + // The fill='light' (lightened background) will always be overridden by fill='dark' (opaque background) // to better handle custom colors const isFinalColorDark = isColorDark(...hexToRgb(finalColor)); const lightOrDarkColor = isFinalColorDark ? '#FFFFFF' : '#000000'; diff --git a/upcoming_changelogs/6067.md b/upcoming_changelogs/6067.md index 2b711d7383b..f66e1a61636 100644 --- a/upcoming_changelogs/6067.md +++ b/upcoming_changelogs/6067.md @@ -1,5 +1,7 @@ -- Updated `tokenFile`, `tokenSymbol` and `tokenRepo` default shapes to `square` - **CSS-in-JS conversions** -- Converted `EuiToken` to Emotion \ No newline at end of file +- Converted `EuiToken` to Emotion + +**Breaking changes** + +- Updated `tokenFile`, `tokenSymbol` and `tokenRepo` default shapes to `square` instead of `rectangle` From 0b3f9f63d332462b40c43a367525559a152734b4 Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 28 Jul 2022 19:08:23 +0100 Subject: [PATCH 23/25] 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'>; From f3859636c1ea95051e96c550a00b2032f6e289ea Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Thu, 28 Jul 2022 19:27:44 +0100 Subject: [PATCH 24/25] Adding `rectangle` shape back to type `TokenShape` --- src/components/token/__snapshots__/token.test.tsx.snap | 10 ++++++++++ src/components/token/token_types.ts | 2 +- upcoming_changelogs/6067.md | 6 ++---- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap index 330d224bb5a..5d9500135b0 100644 --- a/src/components/token/__snapshots__/token.test.tsx.snap +++ b/src/components/token/__snapshots__/token.test.tsx.snap @@ -704,6 +704,16 @@ exports[`EuiToken props shape circle is rendered 1`] = ` `; +exports[`EuiToken props shape rectangle is rendered 1`] = ` + + + +`; + exports[`EuiToken props shape square is rendered 1`] = ` Date: Thu, 28 Jul 2022 19:38:56 +0100 Subject: [PATCH 25/25] Converting examples to `.tsx` --- .../src/views/icon/{custom_tokens.js => custom_tokens.tsx} | 0 src-docs/src/views/icon/{tokens.js => tokens.tsx} | 4 +++- 2 files changed, 3 insertions(+), 1 deletion(-) rename src-docs/src/views/icon/{custom_tokens.js => custom_tokens.tsx} (100%) rename src-docs/src/views/icon/{tokens.js => tokens.tsx} (94%) diff --git a/src-docs/src/views/icon/custom_tokens.js b/src-docs/src/views/icon/custom_tokens.tsx similarity index 100% rename from src-docs/src/views/icon/custom_tokens.js rename to src-docs/src/views/icon/custom_tokens.tsx diff --git a/src-docs/src/views/icon/tokens.js b/src-docs/src/views/icon/tokens.tsx similarity index 94% rename from src-docs/src/views/icon/tokens.js rename to src-docs/src/views/icon/tokens.tsx index 184c5c3a626..039c4cfa261 100644 --- a/src-docs/src/views/icon/tokens.js +++ b/src-docs/src/views/icon/tokens.tsx @@ -10,7 +10,9 @@ import { EuiSpacer, } from '../../../../src/components'; -const tokens = [ +import type { EuiTokenMapType } from '../../../../src/components/token/token_map'; + +const tokens: EuiTokenMapType[] = [ 'tokenAlias', 'tokenAnnotation', 'tokenArray',