Skip to content

ColorPalette: Add an accessible color picker based on ChromePicker #10564

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
tofumatt merged 38 commits into from
Oct 19, 2018
Merged

ColorPalette: Add an accessible color picker based on ChromePicker #10564

Changes from 1 commit
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
26a129e
Add color picker component
ryelle Oct 9, 2018
d9b3335
Add color picker styles to build
ryelle Oct 10, 2018
4ea5ab0
Update to buttons for focus handles
ryelle Oct 10, 2018
989828c
Update styles
ryelle Oct 10, 2018
6f83fd3
Update class name
ryelle Oct 12, 2018
fbda218
Add color-picker component to exports
ryelle Oct 12, 2018
5558b02
Update name to ColorPicker
ryelle Oct 12, 2018
57fc98e
Add labels to color input groups
ryelle Oct 12, 2018
392e842
Fix describedby prop name
ryelle Oct 12, 2018
1e5ea75
Update view to use `getDerivedStateFromProps`
ryelle Oct 12, 2018
32bbe05
Add “Input” component to handle intermediate state when entering values
ryelle Oct 12, 2018
3490a88
Add space around text inputs
ryelle Oct 12, 2018
1c4a97c
Translate toggle label
ryelle Oct 13, 2018
8efef93
Add focus styles to colourpicker pointers.
sarahmonster Oct 16, 2018
2f4347e
Remove react-color dependency
oandregal Oct 18, 2018
a608fdf
Add class name to better find the component in the devtools
oandregal Oct 18, 2018
7b28872
Add tinycolor2 dependency
oandregal Oct 18, 2018
e64b978
Add reference to react-color license & copyright
oandregal Oct 18, 2018
93ec99e
Better label
oandregal Oct 18, 2018
0ded7a4
Update snapshot
oandregal Oct 18, 2018
42fe0f7
Decouple valueKey and label
oandregal Oct 18, 2018
2a82ff7
Use createRef
tofumatt Oct 18, 2018
4aa5569
Normalize HSV / HSL values
oandregal Oct 18, 2018
aa90ddf
Omit `valueKey` from being passed to input
ryelle Oct 18, 2018
9cc60b7
Use KeyboardShortcuts component to avoid separate instances of Mousetrap
ryelle Oct 16, 2018
3f6a606
Use createRef in all components
ryelle Oct 18, 2018
c18f63f
Update saturation handle label
ryelle Oct 18, 2018
f26b84f
Prevent key events on slider handles
ryelle Oct 18, 2018
45203c9
Use a focusable div for slider handle
ryelle Oct 18, 2018
40d3687
Apply focus style to alpha handle
ryelle Oct 18, 2018
b0c3896
Add description to hue controls
tofumatt Oct 19, 2018
13b3730
Add speak commands for view change
tofumatt Oct 19, 2018
4ce80dc
Update snapshot
oandregal Oct 19, 2018
9324a6b
Remove test as the component API surface changed
oandregal Oct 19, 2018
28b5cba
Add README, tests and update Changelog
gziolo Oct 19, 2018
fc2740f
Remove react-color dependency
oandregal Oct 19, 2018
330ff58
Add docs manifest file
tofumatt Oct 19, 2018
5610380
Merge branch 'master' into add/a11y-color-picker
tofumatt Oct 19, 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
Prev Previous commit
Merge branch 'master' into add/a11y-color-picker
  • Loading branch information
@tofumatt
tofumatt authored Oct 19, 2018
commit 561038026493e4ff824852e70f4448b55aee5fed
9 changes: 7 additions & 2 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 @@ -145,6 +145,11 @@ $color-palette-circle-spacing: 14px;
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;
}

.gutenberg__editor .components-popover.components-color-palette__picker.is-bottom {
z-index: z-index(".gutenberg__editor .components-popover.components-color-palette__picker.is-bottom");
.components-color-palette__picker:not(.is-mobile).components-popover .components-popover__content {
// ChromePicker has a hardcoded width, so we need to override the popover min-width.
min-width: unset;
}

.block-editor__container .components-popover.components-color-palette__picker.is-bottom {
z-index: z-index(".block-editor__container .components-popover.components-color-palette__picker.is-bottom");
}
You are viewing a condensed version of this merge commit. You can view the full changes here.