Skip to content

components: Add new ColorPicker #33714

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
merged 17 commits into from
Aug 10, 2021
Merged

components: Add new ColorPicker #33714

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
ef5731d
components: InputControl to TypeScript
sarayourfriend Jul 23, 2021
f97cc19
Add back event to onChange
sarayourfriend Jul 26, 2021
0d57ecb
Convert select-control to TS and ts-nocheck the rest of color picker …
sarayourfriend Jul 27, 2021
72037c9
components: Add new ColorPicker
sarayourfriend Jul 27, 2021
97b51ef
Fix various visual issues and rapid color change stuttering
sarayourfriend Jul 28, 2021
f81bcbc
Rename to `enableAlpha` and add a README
sarayourfriend Jul 28, 2021
0233254
Add copy format and better defaults
sarayourfriend Jul 29, 2021
a50675f
More closely mimic "half-controlled" values
sarayourfriend Jul 29, 2021
597cfdf
Fix misaligned value display in Chrome
sarayourfriend Jul 30, 2021
e1474b6
Update react-colorful styles to better match designs
sarayourfriend Jul 30, 2021
9635658
Add CHANGELOG entry for RangeControl prop update
sarayourfriend Jul 30, 2021
630d060
Fix bad rebase and bad types
sarayourfriend Aug 6, 2021
eb5c33f
Fix html number arrows showing on Chrome
sarayourfriend Aug 6, 2021
f405c0a
Switch to HSL(A) based input and output to fix HSL UX
sarayourfriend Aug 9, 2021
1496e0a
Move styled components and get rid of unnecessary ones
sarayourfriend Aug 9, 2021
70eb0fd
Fix onChange parameter name
sarayourfriend Aug 10, 2021
da321a2
Add missing labels
sarayourfriend Aug 10, 2021
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
Next Next commit
Convert select-control to TS and ts-nocheck the rest of color picker … 
…dependencies
  • Loading branch information
@sarayourfriend
sarayourfriend committed Aug 6, 2021
commit 0d57ecb4a7eb9e8780c1b85aae7a0ace218c74ac
8 changes: 8 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@
"memize": "^1.1.0",
"moment": "^2.22.1",
"re-resizable": "^6.4.0",
"react-colorful": "^5.3.0",
"react-dates": "^17.1.1",
"react-resize-aware": "^3.1.0",
"react-use-gesture": "^9.0.0",
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/button/deprecated.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* WordPress dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/number-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
Expand Down
5 changes: 5 additions & 0 deletions packages/components/src/number-control/styles/number-control-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
Expand All @@ -17,6 +18,10 @@ const htmlArrowStyles = ( { hideHTMLArrows } ) => {
-webkit-appearance: none !important;
margin: 0 !important;
}

input[type='number'] {
-moz-appearance: textfield;
}
`;
};

Expand Down
1 change: 1 addition & 0 deletions packages/components/src/popover/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/popover/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* WordPress dependencies
*/
Expand Down
3 changes: 3 additions & 0 deletions packages/components/src/range-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
Expand Down Expand Up @@ -47,6 +48,7 @@ function RangeControl(
initialPosition,
isShiftStepEnabled = true,
label,
hideLabelFromVision = false,
marks = false,
max = 100,
min = 0,
Expand Down Expand Up @@ -194,6 +196,7 @@ function RangeControl(
<BaseControl
className={ classes }
label={ label }
hideLabelFromVision={ hideLabelFromVision }
id={ id }
help={ help }
>
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/range-control/input-range.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/range-control/mark.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/range-control/rail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* WordPress dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/range-control/styles/range-control-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/range-control/tooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/range-control/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/select-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ function SelectControl(

const handleOnChange = ( event: ChangeEvent< HTMLSelectElement > ) => {
if ( multiple ) {
const selectedOptions = [ ...event.target.options ].filter(
const selectedOptions = Array.from( event.target.options ).filter(
( { selected } ) => selected
);
const newValues = selectedOptions.map( ( { value } ) => value );
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/select-control/styles/select-control-styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const fontSizeStyles = ( { selectSize }: SelectProps ) => {
small: '11px',
};

const fontSize = sizes[ selectSize ];
const fontSize = sizes[ selectSize as Size ];
const fontSizeMobile = '16px';

if ( ! fontSize ) return '';
Expand Down Expand Up @@ -57,7 +57,7 @@ const sizeStyles = ( { selectSize }: SelectProps ) => {
},
};

const style = sizes[ selectSize ] || sizes.default;
const style = sizes[ selectSize as Size ] || sizes.default;

return css( style );
};
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/slot-fill/bubbles-virtually/fill.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* WordPress dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* WordPress dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* WordPress dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/slot-fill/bubbles-virtually/slot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* WordPress dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/slot-fill/bubbles-virtually/use-slot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* WordPress dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/slot-fill/context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* WordPress dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/slot-fill/fill.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/slot-fill/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* WordPress dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/slot-fill/provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/slot-fill/slot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/slot-fill/use-slot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* WordPress dependencies
*/
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/tooltip/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// @ts-nocheck
/**
* External dependencies
*/
Expand Down
8 changes: 7 additions & 1 deletion packages/components/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"src/animate/**/*",
"src/base-control/**/*",
"src/base-field/**/*",
"src/button/**/*",
"src/card/**/*",
"src/dashicon/**/*",
"src/disabled/**/*",
Expand All @@ -36,16 +37,21 @@
"src/heading/**/*",
"src/input-control/**/*",
"src/icon/**/*",
"src/item-group/**/*",
"src/number-control/**/*",
"src/popover/**/*",
"src/range-control/**/*",
"src/scroll-lock/**/*",
"src/scrollable/**/*",
"src/segmented-control/**/*",
"src/select-control/**/*",
"src/shortcut/**/*",
"src/slot-fill/**/*",
"src/spacer/**/*",
"src/spinner/**/*",
"src/surface/**/*",
"src/text/**/*",
"src/tip/**/*",
"src/tooltip/**/*",
"src/truncate/**/*",
"src/ui/**/*",
"src/utils/**/*",
Expand Down