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

Changes from all 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
32 changes: 21 additions & 11 deletions lib/components/src/blocks/ColorPalette.tsx
View file
Open in desktop
Expand Up @@ -53,9 +53,24 @@ const SwatchLabels = styled.div({
flexDirection: 'row',
});

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

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

'&::before': {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
background,
content: '""',
},
}));

const SwatchColors = styled.div(({ theme }) => ({
...getBlockBackgroundStyle(theme),
Expand All @@ -64,6 +79,9 @@ const SwatchColors = styled.div(({ theme }) => ({
height: 50,
marginBottom: 5,
overflow: 'hidden',
backgroundColor: 'white',
backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
backgroundClip: 'padding-box'
}));
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 @@ -122,15 +140,7 @@ interface ColorProps {
}

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 Down