Skip to content

DataForm: Fix color picker styles #75427

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
mirka merged 3 commits into from
Feb 12, 2026
+26 −29
Merged

DataForm: Fix color picker styles #75427

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
dea33ac
DataForm: Fix color picker styles
mirka Feb 11, 2026
7c28859
Add changelog
mirka Feb 11, 2026
d13bad3
Fix up
mirka Feb 11, 2026
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/dataviews/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
- DataViews: Add title attribute in grid item title field. [#75085](https://github.com/WordPress/gutenberg/pull/75085)
- DataViews: Fix title truncation in list layout. [#75063](https://github.com/WordPress/gutenberg/pull/75063)
- DataViews: Fix fields async validation. [#74948](https://github.com/WordPress/gutenberg/pull/74948)
- DataForm: Fix color picker styles. [#75427](https://github.com/WordPress/gutenberg/pull/75427)

### Enhancements

Expand Down
50 changes: 21 additions & 29 deletions packages/dataviews/src/components/dataform-controls/color.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,16 @@ import { colord } from 'colord';
* WordPress dependencies
*/
import {
Button,
ColorIndicator,
ColorPicker,
Dropdown,
privateApis,
__experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
__experimentalDropdownContentWrapper as DropdownContentWrapper,
} from '@wordpress/components';
import { useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand All @@ -34,38 +38,24 @@ const ColorPickerDropdown = ( {

return (
<Dropdown
renderToggle={ ( { onToggle, isOpen } ) => (
<InputControlPrefixWrapper variant="icon">
<button
type="button"
onClick={ onToggle }
style={ {
width: '24px',
height: '24px',
borderRadius: '50%',
backgroundColor: validColor,
border: '1px solid #ddd',
cursor: 'pointer',
outline: isOpen ? '2px solid #007cba' : 'none',
outlineOffset: '2px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: 0,
margin: 0,
} }
aria-label="Open color picker"
/>
</InputControlPrefixWrapper>
className="dataviews-controls__color-picker-dropdown"
popoverProps={ { resize: false } }
renderToggle={ ( { onToggle } ) => (
<Button
onClick={ onToggle }
aria-label={ __( 'Open color picker' ) }
size="small"
icon={ () => <ColorIndicator colorValue={ validColor } /> }
/>
) }
renderContent={ () => (
<div style={ { padding: '16px' } }>
<DropdownContentWrapper paddingSize="none">
<ColorPicker
color={ validColor }
onChange={ onColorChange }
enableAlpha
/>
</div>
</DropdownContentWrapper>
) }
/>
);
Expand Down Expand Up @@ -109,10 +99,12 @@ export default function Color< Item >( {
hideLabelFromVision={ hideLabelFromVision }
type="text"
prefix={
<ColorPickerDropdown
color={ value }
onColorChange={ handleColorChange }
/>
<InputControlPrefixWrapper variant="control">
<ColorPickerDropdown
color={ value }
onColorChange={ handleColorChange }
/>
</InputControlPrefixWrapper>
}
/>
);
Expand Down
4 changes: 4 additions & 0 deletions packages/dataviews/src/components/dataform-controls/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@
min-width: 0;
}

.dataviews-controls__color-picker-dropdown {
display: flex;
}

.dataviews-controls__date-preset {
border: 1px solid #ddd;

Expand Down
Loading