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
Move styled components and get rid of unnecessary ones
  • Loading branch information
@sarayourfriend
sarayourfriend committed Aug 9, 2021
commit 1496e0af1ef3ca8d988882f81da078c0b799aa22
26 changes: 4 additions & 22 deletions packages/components/src/ui/color-picker/input-with-slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,12 @@
/**
* External dependencies
*/
import styled from '@emotion/styled';

/**
* Internal dependencies
*/
import RangeControl from '../../range-control';
import NumberControl from '../../number-control';
import { HStack } from '../../h-stack';
import { Text } from '../../text';
import { Spacer } from '../../spacer';
import { space } from '../utils/space';
import { StyledField } from '../../base-control/styles/base-control-styles';

const StyledRangeControl = styled( RangeControl )`
flex: 1;

${ StyledField } {
margin-bottom: 0;
}
`;

const Wrapper = styled( HStack )`
margin-bottom: ${ space( 2 ) };
`;
import { RangeControl } from './styles';

interface InputWithSliderProps {
min: number;
Expand All @@ -44,7 +26,7 @@ export const InputWithSlider = ( {
value,
}: InputWithSliderProps ) => {
return (
<Wrapper>
<Spacer as={ HStack }>
<NumberControl
__unstableInputWidth="5em"
min={ min }
Expand All @@ -60,7 +42,7 @@ export const InputWithSlider = ( {
}
hideHTMLArrows
/>
<StyledRangeControl
<RangeControl
label={ label }
hideLabelFromVision
min={ min }
Expand All @@ -69,6 +51,6 @@ export const InputWithSlider = ( {
onChange={ onChange }
withInputField={ false }
/>
</Wrapper>
</Spacer>
);
};
9 changes: 9 additions & 0 deletions packages/components/src/ui/color-picker/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,22 @@ import styled from '@emotion/styled';
* Internal dependencies
*/
import InnerSelectControl from '../../select-control';
import InnerRangeControl from '../../range-control';
import { StyledField } from '../../base-control/styles/base-control-styles';
import { space } from '../utils/space';

export const SelectControl = styled( InnerSelectControl )`
width: 5em;
`;

export const RangeControl = styled( InnerRangeControl )`
flex: 1;

${ StyledField } {
margin-bottom: 0;
}
`;

export const ColorfulWrapper = styled.div`
width: 216px;

Expand Down