Merge pull request #5897 from ilzamcmed/LPD-41310

LPD 41310 Follow up

packages/clay-drop-down/docs/drop-down.mdx

@@ -253,9 +253,9 @@ Clay provides other ways to use the Clay component, which we call high-level com
 
 ### Icon
 
-By default, a caret icon (▼) is displayed alongside the button text to indicate the dropdown functionality. This visually indicates a dropdown menu and improve user understanding.
+To indicate a dropdown menu and improve user understanding, set the `triggerIcon` property and it will display the icon chosen alongside the button text to indicate the dropdown functionality.
 
-The caret icon can be removed by passing `null` to the `triggerIcon` prop.
+The default value is `null`.
 
 ### With Items
 

packages/clay-drop-down/docs/index.js

@@ -16,15 +16,16 @@ const dropDownImportsCode = `import ClayDropDown from '@clayui/drop-down';`;
 const dropDownCode = `const Component = () => {
 	return (
 		<ClayDropDown
-			trigger={<button className="btn btn-primary">Click here!</button>}
+			closeOnClick
 			menuElementAttrs={{
 				className: 'my-custom-dropdown-menu',
 				containerProps: {
 					className: 'dropdown-menu-react-portal-div',
 					id: 'dropdownMenuReactPortalDiv',
 				},
 			}}
-			closeOnClick
+			trigger={<button className="btn btn-primary">Click here!</button>}
+			triggerIcon='caret-bottom'
 		>
 			<ClayDropDown.Help>{'Can I help you?'}</ClayDropDown.Help>
 			<ClayDropDown.ItemList>
@@ -153,6 +154,7 @@ const dropDownWithItemsCode = `const Component = () => {
 			searchable={true}
 			spritemap={spritemap}
 			trigger={<ClayButton>{'Click Me'}</ClayButton>}
+			triggerIcon='caret-bottom'
 		/>
     );
 }
@@ -194,6 +196,7 @@ const dropDownWithDrilldownCode = `const Component = () => {
 			}}
 			spritemap={spritemap}
 			trigger={<ClayButton>{'Click Me'}</ClayButton>}
+			triggerIcon='caret-bottom'
 		/>
     );
 }
@@ -241,6 +244,7 @@ const dropDownExampleCode = `const Component = () => {
 		<DropDown
 			filterKey="name"
 			trigger={<Button>Select</Button>}
+			triggerIcon='caret-bottom'
 		>
 			<DropDown.Search placeholder="Type to filter" />
 			<DropDown.ItemList items={items}>

packages/clay-drop-down/src/DropDown.tsx

@@ -184,7 +184,7 @@ function ClayDropDown<T>({
 	renderMenuOnClick = false,
 	role = 'menu',
 	trigger,
-	triggerIcon = 'caret-bottom',
+	triggerIcon = null,
 	...otherProps
 }: IProps<T>) {
 	const triggerElementRef = useRef<HTMLButtonElement | null>(null);

packages/clay-drop-down/src/DropDownWithDrilldown.tsx

@@ -109,6 +109,11 @@ export interface IProps extends React.HTMLAttributes<HTMLDivElement> {
 	 * Element that is used as the trigger which will activate the dropdown on click.
 	 */
 	trigger: React.ReactElement;
+
+	/**
+	 * Flag indicating if the caret icon should be displayed on the right side.
+	 */
+	triggerIcon?: string | null;
 }
 
 type History = {
@@ -138,6 +143,7 @@ export const ClayDropDownWithDrilldown = ({
 	renderMenuOnClick,
 	spritemap,
 	trigger,
+	triggerIcon = null,
 }: IProps) => {
 	const [activeMenu, setActiveMenu] = useState(
 		defaultActiveMenu ?? initialActiveMenu
@@ -218,6 +224,7 @@ export const ClayDropDownWithDrilldown = ({
 			}}
 			renderMenuOnClick={renderMenuOnClick}
 			trigger={trigger}
+			triggerIcon={triggerIcon}
 		>
 			<Drilldown.Inner ref={innerRef}>
 				{menuIds.map((menuKey) => {

packages/clay-drop-down/stories/DropDown.stories.tsx

@@ -91,6 +91,7 @@ export const Default = (args: any) => (
 		menuWidth={args.width}
 		renderMenuOnClick={args.renderMenuOnClick}
 		trigger={<ClayButton>Click Me</ClayButton>}
+		triggerIcon="caret-bottom"
 	>
 		<ClayDropDown.ItemList>
 			{[
@@ -123,6 +124,7 @@ export const Dynamic = () => (
 	<ClayDropDown
 		items={['one', 'two', 'three', 'four']}
 		trigger={<ClayButton>Click Me</ClayButton>}
+		triggerIcon="caret-bottom"
 	>
 		{(item) => (
 			<ClayDropDown.Item key={item} onClick={() => {}}>
@@ -134,7 +136,10 @@ export const Dynamic = () => (
 
 export const DynamicWithSearch = () => {
 	return (
-		<ClayDropDown trigger={<ClayButton>Click Me</ClayButton>}>
+		<ClayDropDown
+			trigger={<ClayButton>Click Me</ClayButton>}
+			triggerIcon="caret-bottom"
+		>
 			<ClayDropDown.Search placeholder="Type to filter" />
 			<ClayDropDown.ItemList items={['one', 'two', 'three', 'four']}>
 				{(item: string) => (
@@ -173,6 +178,7 @@ export const DynamicGroup = () => {
 		<ClayDropDown
 			filterKey="name"
 			trigger={<ClayButton>Select</ClayButton>}
+			triggerIcon="caret-bottom"
 		>
 			<ClayDropDown.Search placeholder="Type to filter" />
 			<ClayDropDown.ItemList items={items}>
@@ -201,6 +207,7 @@ export const Groups = () => (
 	<ClayDropDown
 		alignmentPosition={Align.BottomLeft}
 		trigger={<ClayButton>Click Me</ClayButton>}
+		triggerIcon="caret-bottom"
 	>
 		<ClayDropDown.ItemList>
 			<ClayDropDown.Group header="Group #1">
@@ -234,6 +241,7 @@ export const Checkbox = () => (
 	<ClayDropDown
 		alignmentPosition={Align.BottomLeft}
 		trigger={<ClayButton>Click Me</ClayButton>}
+		triggerIcon="caret-bottom"
 	>
 		<ClayDropDown.ItemList>
 			<ClayDropDown.Section>
@@ -254,6 +262,7 @@ export const Search = () => {
 		<ClayDropDown
 			alignmentPosition={Align.BottomLeft}
 			trigger={<ClayButton>Click Me</ClayButton>}
+			triggerIcon="caret-bottom"
 		>
 			<ClayDropDown.Search
 				onChange={(event) => setQuery(event.target.value)}
@@ -282,6 +291,7 @@ export const Radio = () => (
 	<ClayDropDown
 		alignmentPosition={Align.BottomLeft}
 		trigger={<ClayButton>Click Me</ClayButton>}
+		triggerIcon="caret-bottom"
 	>
 		<ClayDropDown.ItemList>
 			<ClayDropDown.Group header="Order">
@@ -300,6 +310,7 @@ export const CaptionAndHelp = () => (
 	<ClayDropDown
 		alignmentPosition={Align.BottomLeft}
 		trigger={<ClayButton>Click Me</ClayButton>}
+		triggerIcon="caret-bottom"
 	>
 		<ClayDropDown.Help>Can I help you?</ClayDropDown.Help>
 
@@ -325,6 +336,7 @@ export const ItemsWithIcons = () => (
 		hasLeftSymbols
 		hasRightSymbols
 		trigger={<ClayButton>Click Me</ClayButton>}
+		triggerIcon="caret-bottom"
 	>
 		<ClayDropDown.ItemList>
 			{[
@@ -350,6 +362,7 @@ export const CustomOffset = () => (
 		alignmentPosition={Align.BottomLeft}
 		offsetFn={() => [20, 20]}
 		trigger={<ClayButton>Click Me</ClayButton>}
+		triggerIcon="caret-bottom"
 	>
 		<ClayDropDown.ItemList>
 			{[
@@ -382,6 +395,7 @@ export const AlignmentPositions = () => (
 					]}
 					key={alignPosition}
 					trigger={<ClayButton>{alignPosition}</ClayButton>}
+					triggerIcon="caret-bottom"
 				/>
 				<br />
 			</>
@@ -413,6 +427,7 @@ export const Drilldown = (args: any) => (
 		}}
 		renderMenuOnClick={args.renderMenuOnClick}
 		trigger={<ClayButton>Click Me</ClayButton>}
+		triggerIcon="caret-bottom"
 	/>
 );
 
@@ -455,6 +470,7 @@ export const DrillDownWithActive = () => {
 			}}
 			onActiveChange={onActiveChange}
 			trigger={<ClayButton>Click Me</ClayButton>}
+			triggerIcon="caret-bottom"
 		/>
 	);
 };
@@ -486,6 +502,7 @@ export const DropDownWithItems = (args: any) => {
 			searchValue={value}
 			searchable={args.searchable}
 			trigger={<ClayButton>Click Me</ClayButton>}
+			triggerIcon="caret-bottom"
 		/>
 	);
 };
@@ -526,6 +543,7 @@ export const DropDownWithItemsWithCustomActive = () => {
 				searchValue={value}
 				searchable
 				trigger={<ClayButton>Click Me</ClayButton>}
+				triggerIcon="caret-bottom"
 			/>
 
 			<button onClick={() => setActive(!active)} style={{float: 'right'}}>
@@ -622,5 +640,6 @@ export const CascadingMenu = () => (
 			{label: 'Repository'},
 		]}
 		trigger={<ClayButton>Cascading Menu</ClayButton>}
+		triggerIcon="caret-bottom"
 	/>
 );

packages/clay-localized-input/src/index.tsx

@@ -165,7 +165,6 @@ const ClayLocalizedInput = React.forwardRef<HTMLInputElement, IProps>(
 									</span>
 								</ClayButton>
 							}
-							triggerIcon={null}
 						>
 							<ClayDropDown.ItemList>
 								{locales.map((locale) => {