Merge pull request #5893 from ilzamcmed/LPD-41311

docs(Dropdown): LPD-41311 Update Clay Documentation for Caret Icon Usage
liferay · Nov 14, 2024 · 8e17c59 · 8e17c59
2 parents 619415a + fb624c1
commit 8e17c59
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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>