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

Switch the custom color control to a text link, fix padding for color picker. #13708

Merged
merged 8 commits into from
Feb 19, 2019
Merged

Switch the custom color control to a text link, fix padding for color picker. #13708

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2bc7d17
Change custom color control into a text link.
kjellr Feb 6, 2019
b70861b
Add missing top/bottom padding to color picker controls.
kjellr Feb 6, 2019
181d417
Update snapshot
kjellr Feb 7, 2019
f493620
Remove unnecessary tooltip on the color picker button.
kjellr Feb 19, 2019
7e94944
Update snapshot.
kjellr Feb 19, 2019
92d88ed
Merge branch 'master' into update/custom-color-control-as-text-link
kjellr Feb 19, 2019
b921c08
Update test + snapshot
kjellr Feb 19, 2019
62087ba
Remove unnecessary type declaration for the toggle button.
kjellr Feb 19, 2019
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
61 changes: 30 additions & 31 deletions packages/components/src/color-palette/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,42 +55,41 @@ export default function ColorPalette( { colors, disableCustomColors = false, val
);
} ) }

{ ! disableCustomColors &&
<Dropdown
className="components-color-palette__item-wrapper components-color-palette__custom-color"
contentClassName="components-color-palette__picker"
renderToggle={ ( { isOpen, onToggle } ) => (
<Tooltip text={ customColorPickerLabel }>
<button
type="button"
<div className="components-color-palette__custom-clear-wrapper">
{ ! disableCustomColors &&
<Dropdown
className="components-color-palette__custom-color"
contentClassName="components-color-palette__picker"
renderToggle={ ( { isOpen, onToggle } ) => (
<Button
aria-expanded={ isOpen }
className="components-color-palette__item"
onClick={ onToggle }
aria-label={ customColorPickerLabel }
isLink
>
<span className="components-color-palette__custom-color-gradient" />
</button>
</Tooltip>
) }
renderContent={ () => (
<ColorPicker
color={ value }
onChangeComplete={ ( color ) => onChange( color.hex ) }
disableAlpha
/>
) }
/>
}
{ __( 'Custom Color' ) }
</Button>
) }
renderContent={ () => (
<ColorPicker
color={ value }
onChangeComplete={ ( color ) => onChange( color.hex ) }
disableAlpha
/>
) }
/>
}

<Button
className="components-color-palette__clear"
type="button"
onClick={ () => onChange( undefined ) }
isSmall
isDefault
>
{ __( 'Clear' ) }
</Button>
<Button
className="components-color-palette__clear"
type="button"
onClick={ () => onChange( undefined ) }
isSmall
isDefault
>
{ __( 'Clear' ) }
</Button>
</div>
</div>
);
}
54 changes: 10 additions & 44 deletions packages/components/src/color-palette/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,12 @@ $color-palette-circle-spacing: 14px;

.components-color-palette {
margin-right: -14px;
width: calc(100% + 14px);

.components-color-palette__clear {
float: right;
margin-right: 20px;
.components-color-palette__custom-clear-wrapper {
width: calc(100% - 14px);
display: flex;
justify-content: flex-end;
}
}

Expand Down Expand Up @@ -110,48 +112,12 @@ $color-palette-circle-spacing: 14px;
}
}

.components-color-palette__custom-color .components-color-palette__item {
position: relative;
box-shadow: none;
}
.components-color-palette__custom-color {
margin-right: $grid-size-large;

.components-color-palette__custom-color .components-color-palette__custom-color-gradient {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
overflow: hidden;
}

.components-color-palette__custom-color .components-color-palette__custom-color-gradient::before {
content: "";
filter: blur(6px) saturate(0.7) brightness(1.1);
display: block;
width: 200%;
height: 200%;
position: absolute;
top: -50%;
left: -50%;
padding-top: 100%;
transform: scale(1);
background-image:
linear-gradient(330deg, transparent 50%, #ff8100 50%),
linear-gradient(300deg, transparent 50%, #ff5800 50%),
linear-gradient(270deg, transparent 50%, #c92323 50%),
linear-gradient(240deg, transparent 50%, #cc42a2 50%),
linear-gradient(210deg, transparent 50%, #9f49ac 50%),
linear-gradient(180deg, transparent 50%, #306cd3 50%),
linear-gradient(150deg, transparent 50%, #179067 50%),
linear-gradient(120deg, transparent 50%, #0eb5d6 50%),
linear-gradient(90deg, transparent 50%, #50b517 50%),
linear-gradient(60deg, transparent 50%, #ede604 50%),
linear-gradient(30deg, transparent 50%, #fc0 50%),
linear-gradient(0deg, transparent 50%, #feac00 50%);

background-clip: content-box, content-box, content-box, content-box, content-box, content-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box;
.components-button {
line-height: 22px;
}
}

.block-editor__container .components-popover.components-color-palette__picker.is-bottom {
Expand Down
60 changes: 33 additions & 27 deletions packages/components/src/color-palette/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,19 +90,17 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
<button
aria-expanded={true}
aria-label="Custom color picker"
className="components-color-palette__item"
className="components-button is-link"
onClick={[MockFunction]}
type="button"
>
<span
className="components-color-palette__custom-color-gradient"
/>
Custom Color
</button>
`;

exports[`ColorPalette Dropdown should render it correctly 1`] = `
<Dropdown
className="components-color-palette__item-wrapper components-color-palette__custom-color"
className="components-color-palette__custom-color"
contentClassName="components-color-palette__picker"
renderContent={[Function]}
renderToggle={[Function]}
Expand Down Expand Up @@ -179,15 +177,19 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
/>
</Tooltip>
</div>
<Button
className="components-color-palette__clear"
isDefault={true}
isSmall={true}
onClick={[Function]}
type="button"
<div
className="components-color-palette__custom-clear-wrapper"
>
Clear
</Button>
<Button
className="components-color-palette__clear"
isDefault={true}
isSmall={true}
onClick={[Function]}
type="button"
>
Clear
</Button>
</div>
</div>
`;

Expand Down Expand Up @@ -261,20 +263,24 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
/>
</Tooltip>
</div>
<Dropdown
className="components-color-palette__item-wrapper components-color-palette__custom-color"
contentClassName="components-color-palette__picker"
renderContent={[Function]}
renderToggle={[Function]}
/>
<Button
className="components-color-palette__clear"
isDefault={true}
isSmall={true}
onClick={[Function]}
type="button"
<div
className="components-color-palette__custom-clear-wrapper"
>
Clear
</Button>
<Dropdown
className="components-color-palette__custom-color"
contentClassName="components-color-palette__picker"
renderContent={[Function]}
renderToggle={[Function]}
/>
<Button
className="components-color-palette__clear"
isDefault={true}
isSmall={true}
onClick={[Function]}
type="button"
>
Clear
</Button>
</div>
</div>
`;
2 changes: 1 addition & 1 deletion packages/components/src/color-palette/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ describe( 'ColorPalette', () => {
const isOpen = true;
const onToggle = jest.fn();

const renderedToggleButton = shallow( dropdown.props().renderToggle( { isOpen, onToggle } ).props.children );
const renderedToggleButton = shallow( dropdown.props().renderToggle( { isOpen, onToggle } ) );
kjellr marked this conversation as resolved.
Show resolved Hide resolved

test( 'should render dropdown content', () => {
expect( renderedToggleButton ).toMatchSnapshot();
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/color-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
position: relative;
}
.components-color-picker__body {
padding: $grid-size-large 0 #{ $grid-size-small * 3 };
padding: $grid-size-large $grid-size-large #{ $grid-size-small * 3 };
}
.components-color-picker__controls {
display: flex;
Expand Down