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

packages/@mantine/core/src/components/ColorInput/ColorInput.story.tsx

@@ -21,3 +21,11 @@ export function Unstyled() {
     </div>
   );
 }
+
+export function FullWidth() {
+  return (
+    <div style={{ padding: 40 }}>
+      <ColorInput label="Full width color picker" fullWidth popoverProps={{ opened: true }} />
+    </div>
+  );
+}

packages/@mantine/core/src/components/ColorInput/ColorInput.test.tsx

@@ -1,4 +1,6 @@
+import { render } from '@testing-library/react';
 import { inputDefaultProps, inputStylesApiSelectors, tests } from '@mantine-tests/core';
+import { MantineProvider } from '../../core';
 import { __InputStylesNames } from '../Input';
 import { ColorInput, ColorInputProps } from './ColorInput';
 
@@ -34,4 +36,15 @@ describe('@mantine/core/ColorInput', () => {
     props: defaultProps,
     componentName: 'ColorInput',
   });
+
+  it('passes fullWidth prop to ColorPicker', () => {
+    const { container } = render(
+      <MantineProvider>
+        <ColorInput popoverProps={{ opened: true, withinPortal: false }} fullWidth />
+      </MantineProvider>
+    );
+    expect(
+      container.querySelector('.mantine-ColorInput-dropdown [data-full-width]')
+    ).toBeInTheDocument();
+  });
 });

packages/@mantine/core/src/components/ColorInput/ColorInput.tsx

@@ -139,6 +139,7 @@ export const ColorInput = factory<ColorInputFactory>((_props) => {
     leftSection,
     rightSection,
     swatchesPerRow,
+    fullWidth,
     ...others
   } = useInputProps('ColorInput', defaultProps, _props);
 
@@ -237,6 +238,7 @@ export const ColorInput = factory<ColorInputFactory>((_props) => {
         position="bottom-start"
         offset={5}
         opened={dropdownOpened}
+        width={fullWidth ? 'target' : undefined}
         {...popoverProps}
         classNames={resolvedClassNames}
         styles={resolvedStyles}
@@ -307,6 +309,7 @@ export const ColorInput = factory<ColorInputFactory>((_props) => {
             classNames={resolvedClassNames}
             onColorSwatchClick={() => closeOnColorSwatchClick && setDropdownOpened(false)}
             attributes={wrapperProps.attributes}
+            fullWidth={fullWidth}
           />
         </Popover.Dropdown>
       </Popover>

packages/@mantine/core/src/components/ColorPicker/ColorPicker.tsx

@@ -77,6 +77,9 @@ export interface __ColorPickerProps {
 
   /** Component size @default 'md' */
   size?: MantineSize | (string & {});
+
+  /** If set, the component takes 100% width of its container @default false */
+  fullWidth?: boolean;
 }
 
 export interface ColorPickerProps
@@ -87,9 +90,6 @@ export interface ColorPickerProps
     ElementProps<'div', 'onChange' | 'value' | 'defaultValue'> {
   __staticSelector?: string;
 
-  /** If set, the component takes 100% width of its container @default false */
-  fullWidth?: boolean;
-
   /** If set, interactive elements (sliders thumbs and swatches) are focusable with keyboard @default true */
   focusable?: boolean;