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

ColorPicker: Enlarge input sizes #36193

Closed
wants to merge 3 commits into from
Closed

ColorPicker: Enlarge input sizes #36193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
832c298
ColorPicker: Remove adhoc height
mirka Oct 19, 2021
57f1cd4
ColorPicker: Widen controls to work on mobile
mirka Oct 20, 2021
3fa104a
ColorPicker: Set to `__unstable-large`
mirka Nov 3, 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
1 change: 1 addition & 0 deletions packages/components/src/color-picker/hex-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
maxLength={ enableAlpha ? 8 : 6 }
label={ __( 'Hex color' ) }
hideLabelFromVision
size="__unstable-large"
/>
);
};
1 change: 1 addition & 0 deletions packages/components/src/color-picker/input-with-slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export const InputWithSlider = ( {
</Spacer>
}
hideHTMLArrows
size="__unstable-large"
/>
<RangeControl
label={ label }
Expand Down
14 changes: 2 additions & 12 deletions packages/components/src/color-picker/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const NumberControlWrapper = styled( NumberControl )`

export const SelectControl = styled( InnerSelectControl )`
margin-left: ${ space( -2 ) };
width: 5em;
width: 6.5em;
${ BackdropUI } {
display: none;
}
Expand All @@ -42,14 +42,6 @@ export const RangeControl = styled( InnerRangeControl )`
}
`;

// All inputs should be the same height so this should be changed at the component level.
// That involves changing heights of multiple input types probably buttons too etc.
// So until that is done we are already using the new height on the color picker so it matches the mockups.
const inputHeightStyle = `
&&& ${ Input } {
height: 40px;
}`;

// Make the Hue circle picker not go out of the bar
const interactiveHueStyles = `
.react-colorful__interactive {
Expand Down Expand Up @@ -107,8 +99,6 @@ export const ColorfulWrapper = styled.div`
${ StyledField } {
margin-bottom: 0;
}

${ inputHeightStyle }
`;

export const DetailsControlButton = styled( Button )`
Expand All @@ -119,5 +109,5 @@ export const DetailsControlButton = styled( Button )`
`;

export const ColorHexInputControl = styled( InputControl )`
width: 8em;
width: 9em;
`;