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

[Emotion] Convert EuiToken #6067

Merged
merged 29 commits into from
Jul 29, 2022
Merged

[Emotion] Convert EuiToken #6067

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
e69311a
Removing token `rectangle`
miukimiu Jun 20, 2022
8b0d081
Small color fix
miukimiu Jun 20, 2022
1f7aeab
Merge remote-tracking branch 'upstream/main' into emotion-token
miukimiu Jul 20, 2022
a2c06d9
Putting rectangle shape back. Moving custom colors to style tag.
miukimiu Jul 21, 2022
01e1e50
Merge remote-tracking branch 'upstream/main' into emotion-token
miukimiu Jul 22, 2022
ba9b552
Better comments. Better custom example. Renaming a few variables.
miukimiu Jul 22, 2022
227a7ea
Deleting `*.scss` files
miukimiu Jul 25, 2022
51621ae
Adding new example with a `glyph`. Adding required logic for `EuiIcon…
miukimiu Jul 25, 2022
0f34784
Replacing last custom example with `faceHappy` icon
miukimiu Jul 25, 2022
d026372
Adding `customColor` to `className`
miukimiu Jul 25, 2022
7ace739
Putting `customColor` or `tokenColor` at the end of the class name
miukimiu Jul 25, 2022
4fdd5aa
Better comment
miukimiu Jul 25, 2022
ffaa309
Again. :P Better prop comment.
miukimiu Jul 25, 2022
1a80cea
Trying to enhance comments
miukimiu Jul 25, 2022
147ea92
Centering `EuiIconTokenStruct`. Fix border-radius for xs size
miukimiu Jul 25, 2022
7c46954
Fix `xs` `rectangle` shape
miukimiu Jul 25, 2022
d27eb4c
Adding `CL`
miukimiu Jul 25, 2022
0794321
Adding `shouldRenderCustomStyles`
miukimiu Jul 25, 2022
5f2583a
Removed styling variables
miukimiu Jul 25, 2022
b1128a8
Removed unused key
miukimiu Jul 25, 2022
9ec7d9c
Remove need for lodash `defaults`
cee-chen Jul 25, 2022
fe08564
Updated `iconSize` with `logicalSizeCSS`
miukimiu Jul 27, 2022
42afc2b
Adding `logicalCSS` for width
miukimiu Jul 27, 2022
9572d52
Merge remote-tracking branch 'upstream/main' into emotion-token
miukimiu Jul 27, 2022
720c0d4
Addressing PR review
miukimiu Jul 28, 2022
c605348
Merge remote-tracking branch 'upstream/main' into emotion-token
miukimiu Jul 28, 2022
0b3f9f6
Passing the fill prop to `getTokenColor`
miukimiu Jul 28, 2022
f385963
Adding `rectangle` shape back to type `TokenShape`
miukimiu Jul 28, 2022
6eeff25
Converting examples to `.tsx`
miukimiu Jul 28, 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
28 changes: 24 additions & 4 deletions src-docs/src/views/icon/custom_tokens.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default () => (
iconType="tokenStruct"
size="m"
shape="circle"
color="#FF0000"
color="#b9f6c8"
/>
</EuiSplitPanel.Inner>
<EuiSplitPanel.Inner paddingSize="none" color="subdued">
Expand All @@ -70,20 +70,40 @@ export default () => (
paddingSize="m"
>
{
'<EuiToken iconType="tokenStruct" size="m" shape="circle" color="#FF0000" />'
'<EuiToken iconType="tokenStruct" size="m" shape="circle" color="#b9f6c8" />'
}
</EuiCodeBlock>
</EuiSplitPanel.Inner>
</EuiSplitPanel.Outer>
<EuiSpacer />
<EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
<EuiSplitPanel.Inner
className="eui-textCenter"
grow={false}
style={{ minWidth: 96 }}
>
<EuiToken iconType="faceHappy" />
</EuiSplitPanel.Inner>
<EuiSplitPanel.Inner paddingSize="none" color="subdued">
<EuiCodeBlock
language="html"
isCopyable
transparentBackground
paddingSize="m"
>
{'<EuiToken iconType="faceHappy" />'}
</EuiCodeBlock>
</EuiSplitPanel.Inner>
</EuiSplitPanel.Outer>
<EuiSpacer />
<EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
<EuiSplitPanel.Inner
className="eui-textCenter"
grow={false}
style={{ minWidth: 96 }}
>
<EuiToken
iconType="faceNeutral"
iconType="faceHappy"
size="l"
color="euiColorVis7"
shape="rectangle"
Expand All @@ -98,7 +118,7 @@ export default () => (
paddingSize="m"
>
{
'<EuiToken iconType="faceNeutral" size="l" color="euiColorVis7" shape="rectangle" fill="dark" />'
'<EuiToken iconType="faceHappy" size="l" color="euiColorVis7" shape="rectangle" fill="dark" />'
}
</EuiCodeBlock>
</EuiSplitPanel.Inner>
Expand Down
2 changes: 1 addition & 1 deletion src-docs/src/views/icon/icon_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,11 +162,11 @@ export const IconExample = {
demo: <Tokens />,
},
{
title: 'Custom tokens',
wrapText: false,
text: (
<>
<EuiText>
<h3>Custom tokens</h3>
<p>
By default, an <EuiCode>iconType</EuiCode> with the token prefix
(i.e. those listed above) will have predefined styles. However,
Expand Down
51 changes: 1 addition & 50 deletions src-docs/src/views/theme/_json/eui_theme_dark.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,8 +181,6 @@
"large": "22px"
},
"euiMarkdownEditorMinHeight": "150px",
"euiPopoverArrowSize": "12px",
"euiPopoverTranslateDistance": "8px",
"euiResizableButtonTransitionSpeed": "150ms",
"euiResizableButtonSize": "16px",
"euiSelectableListItemBorder": "1px solid #202128",
Expand Down Expand Up @@ -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,
Expand Down
51 changes: 1 addition & 50 deletions src-docs/src/views/theme/_json/eui_theme_light.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,8 +181,6 @@
"large": "22px"
},
"euiMarkdownEditorMinHeight": "150px",
"euiPopoverArrowSize": "12px",
"euiPopoverTranslateDistance": "8px",
"euiResizableButtonTransitionSpeed": "150ms",
"euiResizableButtonSize": "16px",
"euiSelectableListItemBorder": "1px solid #eef2f7",
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<span
class="euiToken euiToken--euiColorVis0 euiToken--square euiToken--light euiToken--small"
class="euiToken emotion-euiToken-square-light-s-euiColorVis0"
>
<span
data-euiicon-type="tokenNumber"
Expand Down
2 changes: 1 addition & 1 deletion src/components/icon/__snapshots__/icon.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10357,7 +10357,7 @@ exports[`EuiIcon props type tokenStruct is rendered 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.336 4.667h2.667v2.666H4.336V4.667zm0 4h2.667v2.666H4.336V8.667zm4-4h2.667v2.666H8.336V4.667zm0 4h2.667v2.666H8.336V8.667zM3.003 3.333v9.334h9.333V3.333H3.003zm0-1.333h9.333c.737 0 1.334.597 1.334 1.333v9.334c0 .736-.597 1.333-1.334 1.333H3.003a1.333 1.333 0 01-1.333-1.333V3.333C1.67 2.597 2.267 2 3.003 2z"
d="M4.667 4.667h2.666v2.666H4.667V4.667zm0 4h2.666v2.666H4.667V8.667zm4-4h2.666v2.666H8.667V4.667zm0 4h2.666v2.666H8.667V8.667zM3.333 3.333v9.334h9.334V3.333H3.333zm0-1.333h9.334C13.403 2 14 2.597 14 3.333v9.334c0 .736-.597 1.333-1.333 1.333H3.333A1.333 1.333 0 012 12.667V3.333C2 2.597 2.597 2 3.333 2z"
fill-rule="evenodd"
/>
</svg>
Expand Down
2 changes: 1 addition & 1 deletion src/components/icon/assets/tokenStruct.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const EuiIconTokenStruct = ({
{title ? <title id={titleId}>{title}</title> : null}
<path
fillRule="evenodd"
d="M4.336 4.667h2.667v2.666H4.336V4.667zm0 4h2.667v2.666H4.336V8.667zm4-4h2.667v2.666H8.336V4.667zm0 4h2.667v2.666H8.336V8.667zM3.003 3.333v9.334h9.333V3.333H3.003zm0-1.333h9.333c.737 0 1.334.597 1.334 1.333v9.334c0 .736-.597 1.333-1.334 1.333H3.003a1.333 1.333 0 01-1.333-1.333V3.333C1.67 2.597 2.267 2 3.003 2z"
d="M4.667 4.667h2.666v2.666H4.667V4.667zm0 4h2.666v2.666H4.667V8.667zm4-4h2.666v2.666H8.667V4.667zm0 4h2.666v2.666H8.667V8.667zM3.333 3.333v9.334h9.334V3.333H3.333zm0-1.333h9.334C13.403 2 14 2.597 14 3.333v9.334c0 .736-.597 1.333-1.333 1.333H3.333A1.333 1.333 0 012 12.667V3.333C2 2.597 2.597 2 3.333 2z"
/>
</svg>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/icon/svgs/tokens/tokenStruct.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion src/components/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,5 @@
@import 'table/index';
@import 'tabs/index';
@import 'toast/index';
@import 'token/index';
@import 'tool_tip/index';
@import 'tour/index';
Loading