Merge pull request #5892 from ilzamcmed/LPD-41310

feat(@clayui/dropdown): LPD-41310 Update Clay Dropdown Component to Include Caret Icon
liferay · Nov 13, 2024 · 5ba579d · 5ba579d
2 parents 9cd4413 + 64fce4b
commit 5ba579d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 0 deletions.
diff --git a/packages/clay-drop-down/src/DropDown.tsx b/packages/clay-drop-down/src/DropDown.tsx
@@ -4,6 +4,7 @@
  */
 
 import {__NOT_PUBLIC_COLLECTION} from '@clayui/core';
+import ClayIcon from '@clayui/icon';
 import {
 	FOCUSABLE_ELEMENTS,
 	InternalDispatch,
@@ -122,6 +123,11 @@ export interface IProps<T>
 	 */
 	renderMenuOnClick?: boolean;
 
+	/**
+	 * Flag indicating if the caret icon should be displayed on the right side.
+	 */
+	triggerIcon?: string | null;
+
 	/**
 	 * Element that is used as the trigger which will activate the dropdown on click.
 	 */
@@ -178,6 +184,7 @@ function ClayDropDown<T>({
 	renderMenuOnClick = false,
 	role = 'menu',
 	trigger,
+	triggerIcon = 'caret-bottom',
 	...otherProps
 }: IProps<T>) {
 	const triggerElementRef = useRef<HTMLButtonElement | null>(null);
@@ -231,6 +238,18 @@ function ClayDropDown<T>({
 				'aria-controls': ariaControls,
 				'aria-expanded': internalActive,
 				'aria-haspopup': 'true',
+				children:
+					React.isValidElement(trigger) &&
+					// @ts-ignore
+					trigger?.type.displayName === 'ClayButton' &&
+					triggerIcon ? (
+						<>
+							{trigger.props.children}{' '}
+							<ClayIcon className="ml-1" symbol={triggerIcon} />
+						</>
+					) : (
+						trigger.props.children
+					),
 				className: classNames(
 					'dropdown-toggle',
 					trigger.props.className

diff --git a/packages/clay-drop-down/src/DropDownWithItems.tsx b/packages/clay-drop-down/src/DropDownWithItems.tsx
@@ -184,6 +184,11 @@ export interface IProps
 	 * The value that will be passed to the search input element.
 	 */
 	searchValue?: string;
+
+	/**
+	 * Flag indicating if the caret icon should be displayed on the right side.
+	 */
+	triggerIcon?: string | null;
 }
 
 const findNested = <
@@ -584,6 +589,7 @@ export const ClayDropDownWithItems = ({
 	searchable,
 	searchProps,
 	searchValue = '',
+	triggerIcon = null,
 	spritemap,
 	trigger,
 }: IProps) => {
@@ -637,6 +643,7 @@ export const ClayDropDownWithItems = ({
 					}
 				},
 			})}
+			triggerIcon={triggerIcon}
 		>
 			<ClayDropDownContext.Provider
 				value={{

diff --git a/packages/clay-localized-input/src/index.tsx b/packages/clay-localized-input/src/index.tsx
@@ -165,6 +165,7 @@ const ClayLocalizedInput = React.forwardRef<HTMLInputElement, IProps>(
 									</span>
 								</ClayButton>
 							}
+							triggerIcon={null}
 						>
 							<ClayDropDown.ItemList>
 								{locales.map((locale) => {