Skip to content

[@mantine/core] ColorInput: Add support for fullWidth prop#9061

Open
saadpocalypse wants to merge 3 commits into
mantinedev:masterfrom
saadpocalypse:fix/colorinput-colorpicker-full-width
Open

[@mantine/core] ColorInput: Add support for fullWidth prop#9061
saadpocalypse wants to merge 3 commits into
mantinedev:masterfrom
saadpocalypse:fix/colorinput-colorpicker-full-width

Conversation

@saadpocalypse

Copy link
Copy Markdown
Contributor

Problem

The ColorPicker component supports taking 100% width of its container using the fullWidth prop. However, when rendering ColorPicker within a ColorInput dropdown, there was no way to pass the fullWidth prop from ColorInput down to the picker. Additionally, because the popover dropdown has width: 'max-content' by default, passing a 100% width constraint directly to the child color picker caused the layout to collapse.

Solution

  • Moved the fullWidth prop from ColorPickerProps to __ColorPickerProps so that it is properly inherited by ColorInputProps.
  • Forwarded fullWidth from ColorInput to the internal <ColorPicker /> component.
  • Passed width={fullWidth ? 'target' : undefined} to the <Popover /> wrapper inside ColorInput so that the dropdown matches the target input's width and prevents the picker layout from collapsing.

Tests

  • Unit Tests: Added a test case in ColorInput.test.tsx to verify that passing fullWidth to ColorInput correctly applies the data-full-width attribute to the underlying picker wrapper inside the dropdown.
  • Visual Stories: Added a FullWidth story in ColorInput.story.tsx with popoverProps={{ opened: true }} to demonstrate the color picker expanding to the full width of the input dropdown.

Resolves #9060

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

ColorInput allows full width ColorPicker

1 participant