feat(@clayui/table): LPD-42395 Add tooltips to table action buttons i…

…n Clay Table
liferay · Nov 19, 2024 · eb548cb · eb548cb
1 parent 619415a
commit eb548cb
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 49 deletions.
diff --git a/packages/clay-core/src/table/Cell.tsx b/packages/clay-core/src/table/Cell.tsx
@@ -8,6 +8,7 @@ import Icon from '@clayui/icon';
 import Layout from '@clayui/layout';
 import LoadingIndicator from '@clayui/loading-indicator';
 import {Keys} from '@clayui/shared';
+import {ClayTooltipProvider} from '@clayui/tooltip';
 import classNames from 'classnames';
 import React, {useCallback, useState} from 'react';
 
@@ -50,6 +51,14 @@ type Props = {
 	 */
 	keyValue?: React.Key;
 
+	/**
+	 * Messages for tooltip.
+	 */
+	tooltipMessage?: {
+		expandRow?: string;
+		orderAscendant?: string;
+	};
+
 	/**
 	 * Whether the column allows sortable. Only available in the header column.
 	 */
@@ -115,13 +124,18 @@ export const Cell = React.forwardRef<HTMLTableCellElement, Props>(
 			sortable,
 			textAlign,
 			textValue,
+			tooltipMessage,
 			truncate,
 			width = 'auto',
 			wrap = true,
 			...otherProps
 		},
 		ref
 	) {
+		tooltipMessage = {
+			...(tooltipMessage ?? {}),
+		};
+
 		const {
 			columnsVisibility,
 			expandedKeys,
@@ -254,21 +268,25 @@ export const Cell = React.forwardRef<HTMLTableCellElement, Props>(
 							</span>
 						</Layout.ContentCol>
 						<Layout.ContentCol>
-							<button
-								aria-label={messages['sortDescription']}
-								className="component-action"
-								type="button"
-							>
-								<Icon
-									symbol={
-										sort && keyValue === sort.column
-											? sort.direction === 'descending'
-												? 'order-list-down'
-												: 'order-list-up'
-											: 'order-arrow'
-									}
-								/>
-							</button>
+							<ClayTooltipProvider>
+								<button
+									aria-label={messages['sortDescription']}
+									className="component-action"
+									title={tooltipMessage.orderAscendant}
+									type="button"
+								>
+									<Icon
+										symbol={
+											sort && keyValue === sort.column
+												? sort.direction ===
+												  'descending'
+													? 'order-list-down'
+													: 'order-list-up'
+												: 'order-arrow'
+										}
+									/>
+								</button>
+							</ClayTooltipProvider>
 						</Layout.ContentCol>
 					</Layout.ContentRow>
 				) : truncate ? (
@@ -285,29 +303,32 @@ export const Cell = React.forwardRef<HTMLTableCellElement, Props>(
 					>
 						{isExpandable && (
 							<Layout.ContentCol className="autofit-col-toggle">
-								<Button
-									aria-label={messages['expandable']}
-									borderless
-									displayType="secondary"
-									monospaced
-									onClick={() => {
-										if (expandable) {
-											toggle(key);
-										} else {
-											loadMore();
-										}
-									}}
-									size="xs"
-									tabIndex={-1}
-								>
-									<Icon
-										symbol={
-											expandedKeys.has(key)
-												? 'angle-down'
-												: 'angle-right'
-										}
-									/>
-								</Button>
+								<ClayTooltipProvider>
+									<Button
+										aria-label={messages['expandable']}
+										borderless
+										displayType="secondary"
+										monospaced
+										onClick={() => {
+											if (expandable) {
+												toggle(key);
+											} else {
+												loadMore();
+											}
+										}}
+										size="xs"
+										tabIndex={-1}
+										title={tooltipMessage.expandRow}
+									>
+										<Icon
+											symbol={
+												expandedKeys.has(key)
+													? 'angle-down'
+													: 'angle-right'
+											}
+										/>
+									</Button>
+								</ClayTooltipProvider>
 							</Layout.ContentCol>
 						)}
 

diff --git a/packages/clay-core/src/table/Head.tsx b/packages/clay-core/src/table/Head.tsx
@@ -7,6 +7,7 @@ import Button from '@clayui/button';
 import {ClayToggle as Toggle} from '@clayui/form';
 import Icon from '@clayui/icon';
 import Layout from '@clayui/layout';
+import {ClayTooltipProvider} from '@clayui/tooltip';
 import React, {useMemo} from 'react';
 
 import {ChildrenFunction, Collection, useCollection} from '../collection';
@@ -46,12 +47,23 @@ type Props<T> = {
 	 * Property to render content with dynamic data.
 	 */
 	items?: Array<T>;
+
+	/**
+	 * Messages for tooltip.
+	 */
+	tooltipMessage?: {
+		tableActions?: string;
+	};
 } & React.TableHTMLAttributes<HTMLTableSectionElement>;
 
 function HeadInner<T extends Record<string, any>>(
-	{children, items, ...otherProps}: Props<T>,
+	{children, items, tooltipMessage, ...otherProps}: Props<T>,
 	ref: React.Ref<HTMLTableSectionElement>
 ) {
+	tooltipMessage = {
+		...(tooltipMessage ?? {}),
+	};
+
 	const {
 		alwaysVisibleColumns,
 		columnsVisibility,
@@ -110,16 +122,25 @@ function HeadInner<T extends Record<string, any>>(
 									minWidth: '210px',
 								}}
 								trigger={
-									<Button
-										aria-label={
-											messages['columnsVisibility']
-										}
-										borderless
-										displayType="secondary"
-										monospaced
-									>
-										<Icon symbol="caret-bottom" />
-									</Button>
+									<div>
+										<ClayTooltipProvider>
+											<Button
+												aria-label={
+													messages[
+														'columnsVisibility'
+													]
+												}
+												borderless
+												displayType="secondary"
+												monospaced
+												title={
+													tooltipMessage.tableActions
+												}
+											>
+												<Icon symbol="caret-bottom" />
+											</Button>
+										</ClayTooltipProvider>
+									</div>
 								}
 							>
 								{(item) =>