Skip to content

EuiToken enums #1301

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

Merged
daveyholler merged 5 commits into from
Nov 8, 2018
Merged

EuiToken enums #1301

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4824de6
Enumerating SHAPES and COLORS
daveyholler Nov 8, 2018
1245622
Properly making use of the enumerated constants in classNames
daveyholler Nov 8, 2018
15c1552
Updating the changelog
daveyholler Nov 8, 2018
b6838a8
updated snapshots
chandlerprall Nov 8, 2018
83fec5b
Merge pull request #2 from chandlerprall/token-updated-snapshots
daveyholler Nov 8, 2018
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
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
## [`master`](https://github.com/elastic/eui/tree/master)

- `EuiToken` now exports enumerated constants for `SHAPES` and `COLORS` ([#1301](https://github.com/elastic/eui/pull/1301))

No public interface changes since `5.0.1`.

## [`5.0.1`](https://github.com/elastic/eui/tree/v5.0.1)
Expand Down
34 changes: 17 additions & 17 deletions src/components/token/__snapshots__/token.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`EuiToken is rendered 1`] = `
<div
class="euiToken euiToken--square euiToken--tokenTint01 euiToken--small"
class="euiToken euiToken--tokenTint01 euiToken--square euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -30,7 +30,7 @@ exports[`EuiToken is rendered 1`] = `

exports[`EuiToken props color tokenTint01 is rendered 1`] = `
<div
class="euiToken euiToken--square euiToken--tokenTint01 euiToken--small"
class="euiToken euiToken--tokenTint01 euiToken--square euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -58,7 +58,7 @@ exports[`EuiToken props color tokenTint01 is rendered 1`] = `

exports[`EuiToken props color tokenTint02 is rendered 1`] = `
<div
class="euiToken euiToken--square euiToken--tokenTint02 euiToken--small"
class="euiToken euiToken--tokenTint02 euiToken--square euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -86,7 +86,7 @@ exports[`EuiToken props color tokenTint02 is rendered 1`] = `

exports[`EuiToken props color tokenTint03 is rendered 1`] = `
<div
class="euiToken euiToken--square euiToken--tokenTint03 euiToken--small"
class="euiToken euiToken--tokenTint03 euiToken--square euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -114,7 +114,7 @@ exports[`EuiToken props color tokenTint03 is rendered 1`] = `

exports[`EuiToken props color tokenTint04 is rendered 1`] = `
<div
class="euiToken euiToken--square euiToken--tokenTint04 euiToken--small"
class="euiToken euiToken--tokenTint04 euiToken--square euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -142,7 +142,7 @@ exports[`EuiToken props color tokenTint04 is rendered 1`] = `

exports[`EuiToken props color tokenTint05 is rendered 1`] = `
<div
class="euiToken euiToken--square euiToken--tokenTint05 euiToken--small"
class="euiToken euiToken--tokenTint05 euiToken--square euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -170,7 +170,7 @@ exports[`EuiToken props color tokenTint05 is rendered 1`] = `

exports[`EuiToken props color tokenTint06 is rendered 1`] = `
<div
class="euiToken euiToken--square euiToken--tokenTint06 euiToken--small"
class="euiToken euiToken--tokenTint06 euiToken--square euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -198,7 +198,7 @@ exports[`EuiToken props color tokenTint06 is rendered 1`] = `

exports[`EuiToken props color tokenTint07 is rendered 1`] = `
<div
class="euiToken euiToken--square euiToken--tokenTint07 euiToken--small"
class="euiToken euiToken--tokenTint07 euiToken--square euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -226,7 +226,7 @@ exports[`EuiToken props color tokenTint07 is rendered 1`] = `

exports[`EuiToken props color tokenTint08 is rendered 1`] = `
<div
class="euiToken euiToken--square euiToken--tokenTint08 euiToken--small"
class="euiToken euiToken--tokenTint08 euiToken--square euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -254,7 +254,7 @@ exports[`EuiToken props color tokenTint08 is rendered 1`] = `

exports[`EuiToken props color tokenTint09 is rendered 1`] = `
<div
class="euiToken euiToken--square euiToken--tokenTint09 euiToken--small"
class="euiToken euiToken--tokenTint09 euiToken--square euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -282,7 +282,7 @@ exports[`EuiToken props color tokenTint09 is rendered 1`] = `

exports[`EuiToken props color tokenTint10 is rendered 1`] = `
<div
class="euiToken euiToken--square euiToken--tokenTint10 euiToken--small"
class="euiToken euiToken--tokenTint10 euiToken--square euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -310,7 +310,7 @@ exports[`EuiToken props color tokenTint10 is rendered 1`] = `

exports[`EuiToken props shape circle is rendered 1`] = `
<div
class="euiToken euiToken--circle euiToken--tokenTint01 euiToken--small"
class="euiToken euiToken--tokenTint01 euiToken--circle euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -338,7 +338,7 @@ exports[`EuiToken props shape circle is rendered 1`] = `

exports[`EuiToken props shape rectangle is rendered 1`] = `
<div
class="euiToken euiToken--rectangle euiToken--tokenTint01 euiToken--small"
class="euiToken euiToken--tokenTint01 euiToken--rectangle euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -366,7 +366,7 @@ exports[`EuiToken props shape rectangle is rendered 1`] = `

exports[`EuiToken props shape square is rendered 1`] = `
<div
class="euiToken euiToken--square euiToken--tokenTint01 euiToken--small"
class="euiToken euiToken--tokenTint01 euiToken--square euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -394,7 +394,7 @@ exports[`EuiToken props shape square is rendered 1`] = `

exports[`EuiToken props size l is rendered 1`] = `
<div
class="euiToken euiToken--circle euiToken--tokenTint01 euiToken--large"
class="euiToken euiToken--tokenTint01 euiToken--circle euiToken--large"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -422,7 +422,7 @@ exports[`EuiToken props size l is rendered 1`] = `

exports[`EuiToken props size m is rendered 1`] = `
<div
class="euiToken euiToken--circle euiToken--tokenTint01 euiToken--medium"
class="euiToken euiToken--tokenTint01 euiToken--circle euiToken--medium"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down Expand Up @@ -450,7 +450,7 @@ exports[`EuiToken props size m is rendered 1`] = `

exports[`EuiToken props size s is rendered 1`] = `
<div
class="euiToken euiToken--circle euiToken--tokenTint01 euiToken--small"
class="euiToken euiToken--tokenTint01 euiToken--circle euiToken--small"
>
<svg
class="euiIcon euiIcon--medium"
Expand Down
1 change: 1 addition & 0 deletions src/components/token/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@ export {
EuiToken,
SIZES as TOKEN_SIZES,
SHAPES as TOKEN_SHAPES,
COLORS as TOKEN_COLORS
} from './token';
25 changes: 21 additions & 4 deletions src/components/token/token.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,23 @@ const shapeToClassMap = {

export const SHAPES = Object.keys(shapeToClassMap);

const colorToClassMap = {
Copy link
Contributor

@snide snide Nov 8, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor, but you could likely do this with some sort of mapping/loop. Not required though.

tokenTint01: 'euiToken--tokenTint01',
tokenTint02: 'euiToken--tokenTint02',
tokenTint03: 'euiToken--tokenTint03',
tokenTint04: 'euiToken--tokenTint04',
tokenTint05: 'euiToken--tokenTint05',
tokenTint06: 'euiToken--tokenTint06',
tokenTint07: 'euiToken--tokenTint07',
tokenTint08: 'euiToken--tokenTint08',
tokenTint09: 'euiToken--tokenTint09',
tokenTint10: 'euiToken--tokenTint10',
tokenTint11: 'euiToken--tokenTint11',
tokenTint12: 'euiToken--tokenTint12',
};

export const COLORS = Object.keys(colorToClassMap);

export const EuiToken = ({
iconType,
displayOptions,
Expand Down Expand Up @@ -52,8 +69,8 @@ export const EuiToken = ({

const classes = classNames(
'euiToken',
`euiToken--${tokenShape}`,
`euiToken--${tokenColor}`,
colorToClassMap[tokenColor],
shapeToClassMap[tokenShape],
sizeToClassMap[size],
{
'euiToken--fill': fill,
Expand Down Expand Up @@ -89,8 +106,8 @@ EuiToken.propTypes = {
* - `hideBorder`: disables the outer border
*/
displayOptions: PropTypes.shape({
color: PropTypes.string,
shape: PropTypes.string,
color: PropTypes.oneOf(COLORS),
shape: PropTypes.oneOf(SHAPES),
fill: PropTypes.boolean,
hideBorder: PropTypes.boolean,
}),
Expand Down