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

feat(addon-docs): named colors with ColorPalette #9453

Merged
merged 2 commits into from
Jan 20, 2020
Merged

feat(addon-docs): named colors with ColorPalette #9453

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f19556f
feat(addon-docs): named colors with ColorPalette
Jan 14, 2020
d1223df
feat(addon-docs): named colors with ColorPalette
Jan 15, 2020
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
26 changes: 26 additions & 0 deletions lib/components/src/blocks/ColorPalette.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,29 @@ export const defaultStyle = () => (
/>
</ColorPalette>
);

export const NamedColors = () => (
<ColorPalette>
<ColorItem
title="theme.color.greyscale"
subtitle="Some of the greys"
colors={{ White: '#FFFFFF', Alabaster: '#F8F8F8', Concrete: '#F3F3F3' }}
/>
<ColorItem
title="theme.color.primary"
subtitle="Coral"
colors={{ WildWatermelon: '#FF4785' }}
/>
<ColorItem title="theme.color.secondary" subtitle="Ocean" colors={{ DodgerBlue: '#1EA7FD' }} />
<ColorItem
title="theme.color.positive"
subtitle="Green"
colors={{
Apple: 'rgba(102,191,60,1)',
Apple80: 'rgba(102,191,60,.8)',
Apple60: 'rgba(102,191,60,.6)',
Apple30: 'rgba(102,191,60,.3)',
}}
/>
</ColorPalette>
);
74 changes: 46 additions & 28 deletions lib/components/src/blocks/ColorPalette.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,8 @@ const SwatchLabel = styled.div(({ theme }) => ({
? transparentize(0.4, theme.color.defaultText)
: transparentize(0.6, theme.color.defaultText),

'> div': {
display: 'inline-block',
overflow: 'hidden',
maxWidth: '100%',
small: {
display: 'block',
},
}));

Expand Down Expand Up @@ -107,10 +105,52 @@ const List = styled.div(({ theme }) => ({
flexDirection: 'column',
}));

type Colors = string[] | { [key: string]: string };

interface ColorProps {
title: string;
subtitle: string;
colors: string[];
colors: Colors;
}

function renderSwatch(color: string) {
return (
<Swatch
key={color}
title={color}
style={{
backgroundColor: color,
}}
/>
);
}

function renderSwatchLabel(color: string, colorDescription?: string) {
return (
<SwatchLabel key={color} title={color}>
{color}
{colorDescription && <small>{colorDescription}</small>}
</SwatchLabel>
);
}

function renderSwatchSpecimen(colors: Colors) {
if (Array.isArray(colors)) {
return (
<SwatchSpecimen>
<SwatchColors>{colors.map(color => renderSwatch(color))}</SwatchColors>
<SwatchLabels>{colors.map(color => renderSwatchLabel(color))}</SwatchLabels>
</SwatchSpecimen>
);
}
return (
<SwatchSpecimen>
<SwatchColors>{Object.values(colors).map(color => renderSwatch(color))}</SwatchColors>
Copy link

Choose a reason for hiding this comment

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

Any concerns regarding order of the design tokens?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thank you for your review @RuneKR but I don't get it?
I simply iterate over the object as it is.
I mean if design tokens need to be reordered then, it must be done in the story, I guess.

Copy link

Choose a reason for hiding this comment

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

Looks like you got the gist of it. I understand that the order is arbitrary in this solution. I was wondering if the solution could/should be extended to allow the developer to specify the order of the colours. This could be achieved by using this data structure:

[{name: 'name of colour', value: 'hex or whatever']

This capability can also be added without making it a breaking change.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Actually, it's an excellent question!
I still use design tokens starting by $ (because of sass variable conventions) so it does not concern me directly.
It would be great to have the point of view of someone else because I consider that it's not totally necessary. :)

Copy link
Member

Choose a reason for hiding this comment

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

I feel like that could be enhancement made in a following PR, if desired.

Copy link

Choose a reason for hiding this comment

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

I wouldn't call the order arbitrary. (Ignoring IE)
https://www.stefanjudis.com/today-i-learned/property-order-is-predictable-in-javascript-objects-since-es2015/

<SwatchLabels>
{Object.keys(colors).map(color => renderSwatchLabel(color, colors[color]))}
</SwatchLabels>
</SwatchSpecimen>
);
}

/**
Expand All @@ -124,29 +164,7 @@ export const ColorItem: FunctionComponent<ColorProps> = ({ title, subtitle, colo
<ItemTitle>{title}</ItemTitle>
<ItemSubtitle>{subtitle}</ItemSubtitle>
</ItemDescription>

<Swatches>
<SwatchSpecimen>
<SwatchColors>
{colors.map(color => (
<Swatch
key={color}
title={color}
style={{
backgroundColor: color,
}}
/>
))}
</SwatchColors>
<SwatchLabels>
{colors.map(color => (
<SwatchLabel key={color} title={color}>
<div>{color}</div>
</SwatchLabel>
))}
</SwatchLabels>
</SwatchSpecimen>
</Swatches>
<Swatches>{renderSwatchSpecimen(colors)}</Swatches>
</Item>
);
};
Expand Down