Merge pull request #4080 from matuzalemsteles/issue-4028

feat(@clayui/color-picker): Add the new DropDownContainerProps API
liferay · May 19, 2021 · 9e905e8 · 9e905e8
2 parents c0d38e6 + ac51bdd
commit 9e905e8
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 15 deletions.
diff --git a/packages/clay-color-picker/src/index.tsx b/packages/clay-color-picker/src/index.tsx
@@ -72,6 +72,14 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	 * Flag for adding ColorPicker in disabled state
 	 */
 	disabled?: boolean;
+
+	/**
+	 * Props to add to the DropDown container.
+	 */
+	dropDownContainerProps?: React.ComponentProps<
+		typeof ClayDropDown.Menu
+	>['containerProps'];
+
 	/**
 	 * The label describing the collection of colors in the menu
 	 */
@@ -92,6 +100,8 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	 */
 	onValueChange?: (val: string) => void;
 
+	predefinedColors?: Array<string>;
+
 	/**
 	 * Determines if the hex input should render
 	 */
@@ -103,6 +113,8 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	 */
 	showPalette?: boolean;
 
+	showPredefinedColorsWithCustom?: boolean;
+
 	/**
 	 * Flag to indicate if `input-group-sm` class should
 	 * be applied to `ClayInput.Group`
@@ -128,23 +140,21 @@ interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
 	 * Value of the selected color hex
 	 */
 	value?: string;
-
-	showPredefinedColorsWithCustom?: boolean;
-	predefinedColors?: Array<string>;
 }
 
 const ClayColorPicker: React.FunctionComponent<IProps> = ({
 	ariaLabels = DEFAULT_ARIA_LABELS,
 	colors,
 	disabled,
-	showPredefinedColorsWithCustom = false,
-	predefinedColors,
+	dropDownContainerProps,
 	label,
 	name,
 	onColorsChange,
 	onValueChange = () => {},
+	predefinedColors,
 	showHex = true,
 	showPalette = true,
+	showPredefinedColorsWithCustom = false,
 	small,
 	spritemap,
 	title,
@@ -234,6 +244,7 @@ const ClayColorPicker: React.FunctionComponent<IProps> = ({
 						active={active}
 						alignElementRef={triggerElementRef}
 						className="clay-color-dropdown-menu"
+						containerProps={dropDownContainerProps}
 						focusRefOnEsc={splotchRef}
 						onSetActive={setActive}
 						ref={dropdownContainerRef}

diff --git a/packages/clay-drop-down/src/Menu.tsx b/packages/clay-drop-down/src/Menu.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
-import {ClayPortal, Keys, observeRect} from '@clayui/shared';
+import {ClayPortal, IPortalBaseProps, Keys, observeRect} from '@clayui/shared';
 import classNames from 'classnames';
 import domAlign from 'dom-align';
 import React, {useEffect, useLayoutEffect, useRef} from 'react';
@@ -125,6 +125,11 @@ interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	 */
 	closeOnClickOutside?: boolean;
 
+	/**
+	 * Props to add to the outer most container.
+	 */
+	containerProps?: IPortalBaseProps;
+
 	/**
 	 * Flag to indicate if menu is displaying a clay-icon on the left.
 	 */
@@ -174,6 +179,7 @@ const ClayDropDownMenu = React.forwardRef<HTMLDivElement, IProps>(
 			children,
 			className,
 			closeOnClickOutside = true,
+			containerProps = {},
 			hasLeftSymbols,
 			hasRightSymbols,
 			height,
@@ -287,7 +293,7 @@ const ClayDropDownMenu = React.forwardRef<HTMLDivElement, IProps>(
 		}, []);
 
 		return (
-			<ClayPortal subPortalRef={subPortalRef}>
+			<ClayPortal {...containerProps} subPortalRef={subPortalRef}>
 				<div ref={subPortalRef}>
 					<div
 						{...otherProps}

diff --git a/packages/clay-shared/src/Portal.tsx b/packages/clay-shared/src/Portal.tsx
@@ -26,23 +26,25 @@ const createDivElement = (className?: string, id?: string) => {
 	return element;
 };
 
-interface IProps {
-	children: React.ReactElement | Array<React.ReactElement>;
-
+export interface IBaseProps {
 	/**
 	 * Class to add to the root element
 	 */
 	className?: string;
 
 	/**
-	 * Ref of element to render portal into.
+	 * Id fof the root element
 	 */
-	containerRef?: React.RefObject<Element>;
+	id?: string;
+}
+
+interface IProps extends IBaseProps {
+	children: React.ReactElement | Array<React.ReactElement>;
 
 	/**
-	 * Id fof the root element
+	 * Ref of element to render portal into.
 	 */
-	id?: string;
+	containerRef?: React.RefObject<Element>;
 
 	/**
 	 * Ref of element to render nested portals into.

diff --git a/packages/clay-shared/src/index.tsx b/packages/clay-shared/src/index.tsx
@@ -4,7 +4,7 @@
  */
 
 export const noop = () => {};
-export {ClayPortal} from './Portal';
+export {ClayPortal, IBaseProps as IPortalBaseProps} from './Portal';
 export {delegate} from './delegate';
 export {FocusScope} from './FocusScope';
 export {getEllipsisItems} from './getEllipsisItems';