From fb624c138434157f297146119c8e825975d59e60 Mon Sep 17 00:00:00 2001
From: Ilza Medeiros <ilza.medeiros@liferay.com>
Date: Thu, 14 Nov 2024 09:56:40 -0300
Subject: [PATCH] docs(Dropdown): LPD-41311 Update Clay Documentation for Caret
 Icon Usage

---
 packages/clay-drop-down/docs/drop-down.mdx           | 12 ++++++++++++
 packages/clay-management-toolbar/docs/index.js       |  8 ++------
 .../stories/ManagementToolbar.stories.tsx            |  7 ++-----
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/clay-drop-down/docs/drop-down.mdx b/packages/clay-drop-down/docs/drop-down.mdx
index 60e4d2bb86..d0c2938f59 100644
--- a/packages/clay-drop-down/docs/drop-down.mdx
+++ b/packages/clay-drop-down/docs/drop-down.mdx
@@ -24,7 +24,9 @@ import {
     -   [Value](#value)
 -   [Without Trigger](#without-trigger)
 -   [Variants](#variants)
+    -   [Icon](#icon)
     -   [With Items](#with-items)
+        -   [Customizable Trigger Icon](#customizable-trigger-icon)
         -   [Cascading Menu](#cascading-menu)
     -   [Drilldown](#drilldown)
 -   [Caveats](#caveats)
@@ -249,12 +251,22 @@ const Menu = ({children, hasLeftSymbols, hasRightSymbols}) => {
 
 Clay provides other ways to use the Clay component, which we call high-level components, which are designed to do a specific high-level behavior different from compositing that allow different possibilities, are less flexible.
 
+### 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.
+
+The caret icon can be removed by passing `null` to the `triggerIcon` prop.
+
 ### With Items
 
 Allows you to create a simple DropDown, through its API you are able to create a Menu with groups of checkboxes and radios, links, buttons, search, caption, etc.
 
 <DropDownWithItems />
 
+#### Customizable Trigger Icon
+
+When using `DropDownWithItems`, you can customize the icon on the dropdown button via the `triggerIcon` prop.
+
 #### Cascading Menu
 
 `DropDownWithItems` allows the possibility to create a contextual menu, the nature of the API allows the creation of more cascade menus but the **Lexicon specification recommends using only one level** and using `DropDownWithDrilldown` component.
diff --git a/packages/clay-management-toolbar/docs/index.js b/packages/clay-management-toolbar/docs/index.js
index d3dd31dad5..562dd90148 100644
--- a/packages/clay-management-toolbar/docs/index.js
+++ b/packages/clay-management-toolbar/docs/index.js
@@ -221,12 +221,6 @@ const ManagementToolbarCode = `const Component = () => {
 									<span className="navbar-text-truncate">
 										{'Filter and Order'}
 									</span>
-
-									<ClayIcon
-										className="inline-item inline-item-after"
-										spritemap={spritemap}
-										symbol="caret-bottom"
-									/>
 								</span>
 								<span className="navbar-breakpoint-d-none">
 									<ClayIcon
@@ -236,6 +230,7 @@ const ManagementToolbarCode = `const Component = () => {
 								</span>
 							</ClayButton>
 						}
+							triggerIcon="caret-bottom"
 					/>
 
 					<ClayManagementToolbar.Item>
@@ -332,6 +327,7 @@ const ManagementToolbarCode = `const Component = () => {
 									/>
 								</ClayButton>
 							}
+							triggerIcon="caret-double-l"
 						/>
 					</ClayManagementToolbar.Item>
 
diff --git a/packages/clay-management-toolbar/stories/ManagementToolbar.stories.tsx b/packages/clay-management-toolbar/stories/ManagementToolbar.stories.tsx
index ee2249319b..de340ca762 100644
--- a/packages/clay-management-toolbar/stories/ManagementToolbar.stories.tsx
+++ b/packages/clay-management-toolbar/stories/ManagementToolbar.stories.tsx
@@ -73,17 +73,13 @@ export const Default = () => {
 										<span className="navbar-text-truncate">
 											Filter and Order
 										</span>
-
-										<ClayIcon
-											className="inline-item inline-item-after"
-											symbol="caret-bottom"
-										/>
 									</span>
 									<span className="navbar-breakpoint-d-none">
 										<ClayIcon symbol="filter" />
 									</span>
 								</ClayButton>
 							}
+							triggerIcon="caret-bottom"
 						/>
 					</ClayManagementToolbar.Item>
 
@@ -168,6 +164,7 @@ export const Default = () => {
 								/>
 							</ClayButton>
 						}
+						triggerIcon="caret-double-l"
 					/>
 
 					<ClayManagementToolbar.Item>