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

Addon-docs: Add transparency support to color swatch #14439

Merged
merged 10 commits into from Jul 14, 2021
Merged

Addon-docs: Add transparency support to color swatch #14439

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
af6136c
feat: adding transparency support
bart-krakowski Apr 1, 2021
16442f0
Merge branch 'next' into colorpalette_transparency_grid
bart-krakowski Jul 5, 2021
310f9e6
fix: added the missing property
bart-krakowski Jul 5, 2021
726b124
fix: change pattern in the background and examples examples of usage
bart-krakowski Jul 8, 2021
2da73c2
fix: changed pattern in the background and updated examples of usage
bart-krakowski Jul 8, 2021
5590c2c
Merge branch 'colorpalette_transparency_grid' of github.com:bart-krak…
bart-krakowski Jul 8, 2021
8f2e209
fix: moved background pattern to parent
bart-krakowski Jul 8, 2021
a1d0785
fix: removed unused props
bart-krakowski Jul 8, 2021
ce37c7e
revert: removed isTransparent prop
bart-krakowski Jul 12, 2021
f5295a2
fix: added the background-clip property
bart-krakowski Jul 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx
View file
Open in desktop
Expand Up @@ -19,5 +19,6 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
Apple60: 'rgba(102,191,60,.6)',
Apple30: 'rgba(102,191,60,.3)',
}}
isTransparent
/>
</ColorPalette>
10 changes: 8 additions & 2 deletions lib/components/src/Colors/colorpalette.stories.mdx
View file
Open in desktop
Expand Up @@ -15,7 +15,7 @@ Dark theme Colors
<ColorPalette>
{Object.entries(convert(themes.dark).color).map(([k, v]) => {
if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
return <ColorItem key={k} title={k} colors={{ [k]: v }} isTransparent />;
} else if (typeof v === 'object') {
return (
<ColorItem
Expand All @@ -29,6 +29,7 @@ Dark theme Colors
: acc,
{}
)}
isTransparent
/>
);
}
Expand All @@ -49,6 +50,7 @@ Dark theme Backgrounds
key={k}
title={k}
colors={{ [k]: v }}
isTransparent
/>
);
} else if (typeof v === 'object') {
Expand All @@ -58,6 +60,7 @@ Dark theme Backgrounds
key={k}
title={k}
colors={colors}
isTransparent
/>
);
}
Expand All @@ -72,7 +75,7 @@ Light theme Colors
<ColorPalette>
{Object.entries(convert(themes.light).color).map(([k, v]) => {
if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
return <ColorItem key={k} title={k} colors={{ [k]: v }} isTransparent/>;
} else if (typeof v === 'object') {
return (
<ColorItem
Expand All @@ -86,6 +89,7 @@ Light theme Colors
: acc,
{}
)}
isTransparent
/>
);
}
Expand All @@ -106,6 +110,7 @@ Light theme Backgrounds
key={k}
title={k}
colors={{ [k]: v }}
isTransparent
/>
);
} else if (typeof v === 'object') {
Expand All @@ -115,6 +120,7 @@ Light theme Backgrounds
key={k}
title={k}
colors={colors}
isTransparent
/>
);
}
Expand Down
2 changes: 2 additions & 0 deletions lib/components/src/blocks/ColorPalette.stories.tsx
View file
Open in desktop
Expand Up @@ -24,6 +24,7 @@ export const defaultStyle = () => (
'rgba(102,191,60,.6)',
'rgba(102,191,60,.3)',
]}
isTransparent
/>
<ColorItem
title="gradient"
Expand Down Expand Up @@ -55,6 +56,7 @@ export const NamedColors = () => (
Apple60: 'rgba(102,191,60,.6)',
Apple30: 'rgba(102,191,60,.3)',
}}
isTransparent
/>
<ColorItem
title="gradient"
Expand Down
57 changes: 40 additions & 17 deletions lib/components/src/blocks/ColorPalette.tsx
View file
Open in desktop
Expand Up @@ -53,17 +53,40 @@ const SwatchLabels = styled.div({
flexDirection: 'row',
});

const Swatch = styled.div({
interface SwatchProps {
background: string;
}

const Swatch = styled.div<SwatchProps>(({ background }) => ({
position: 'relative',
flex: 1,
});

const SwatchColors = styled.div(({ theme }) => ({
'&::before': {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
background,
content: '""',
},
}));

interface SwatchColorsProps {
isTransparent: boolean;
}
const SwatchColors = styled.div<SwatchColorsProps>(({ theme, isTransparent }) => ({
...getBlockBackgroundStyle(theme),
display: 'flex',
flexDirection: 'row',
height: 50,
marginBottom: 5,
overflow: 'hidden',

...(isTransparent && {
backgroundColor: 'white',
backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
}),
}));
Copy link
Contributor

Choose a reason for hiding this comment

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

I would also add background-clip: padding-box; to prevent the background from showing under the transparent border.


const SwatchSpecimen = styled.div({
Expand Down Expand Up @@ -119,18 +142,11 @@ interface ColorProps {
title: string;
subtitle: string;
colors: Colors;
isTransparent?: boolean;
}

function renderSwatch(color: string, index: number) {
return (
<Swatch
key={`${color}-${index}`}
title={color}
style={{
background: color,
}}
/>
);
return <Swatch key={`${color}-${index}`} title={color} background={color} />;
}

function renderSwatchLabel(color: string, index: number, colorDescription?: string) {
Expand All @@ -144,18 +160,20 @@ function renderSwatchLabel(color: string, index: number, colorDescription?: stri
);
}

function renderSwatchSpecimen(colors: Colors) {
function renderSwatchSpecimen(colors: Colors, isTransparent: boolean) {
if (Array.isArray(colors)) {
return (
<SwatchSpecimen>
<SwatchColors>{colors.map((color, index) => renderSwatch(color, index))}</SwatchColors>
<SwatchColors isTransparent={isTransparent}>
{colors.map((color, index) => renderSwatch(color, index))}
</SwatchColors>
<SwatchLabels>{colors.map((color, index) => renderSwatchLabel(color, index))}</SwatchLabels>
</SwatchSpecimen>
);
}
return (
<SwatchSpecimen>
<SwatchColors>
<SwatchColors isTransparent={isTransparent}>
{Object.values(colors).map((color, index) => renderSwatch(color, index))}
</SwatchColors>
<SwatchLabels>
Expand All @@ -169,14 +187,19 @@ function renderSwatchSpecimen(colors: Colors) {
* A single color row your styleguide showing title, subtitle and one or more colors, used
* as a child of `ColorPalette`.
*/
export const ColorItem: FunctionComponent<ColorProps> = ({ title, subtitle, colors }) => {
export const ColorItem: FunctionComponent<ColorProps> = ({
title,
subtitle,
colors,
isTransparent,
}) => {
return (
<Item>
<ItemDescription>
<ItemTitle>{title}</ItemTitle>
<ItemSubtitle>{subtitle}</ItemSubtitle>
</ItemDescription>
<Swatches>{renderSwatchSpecimen(colors)}</Swatches>
<Swatches>{renderSwatchSpecimen(colors, isTransparent)}</Swatches>
</Item>
);
};
Expand Down