fix(@clayui/core): updates the sort icon for table

.storybook/preview.js

@@ -1,16 +1,25 @@
 import '@clayui/css/lib/css/atlas.css';
 const spritemap = require('@clayui/css/lib/images/icons/icons.svg');
-import React from 'react';
+import React, {useEffect} from 'react';
+import svg4everybody from 'svg4everybody';
 import {Provider} from '@clayui/provider';
 
 export const decorators = [
-	(Story) => (
-		<Provider spritemap={spritemap}>
-			<div>
-				<Story />
-			</div>
-		</Provider>
-	),
+	(Story) => {
+		useEffect(() => {
+			svg4everybody({
+				polyfill: true,
+			});
+		}, []);
+
+		return (
+			<Provider spritemap={spritemap}>
+				<div>
+					<Story />
+				</div>
+			</Provider>
+		);
+	},
 ];
 
 export const parameters = {

package.json

@@ -103,6 +103,7 @@
 		"size-limit": "^6.0.3",
 		"source-map-loader": "^0.2.4",
 		"style-loader": "^0.23.1",
+		"svg4everybody": "^2.1.9",
 		"ts-jest": "^28.0.8",
 		"turbo": "^1.2.6",
 		"typescript": "4.7.4",

packages/clay-core/src/table/Cell.tsx

@@ -145,22 +145,50 @@ export const Cell = React.forwardRef<HTMLTableCellElement, Props>(
 			[expandedKeys, onExpandedChange]
 		);
 
+		const doSort = useCallback(
+			() =>
+				onSortChange(
+					{
+						column: keyValue!,
+						direction:
+							sort && keyValue === sort.column
+								? sort.direction === 'ascending'
+									? 'descending'
+									: 'ascending'
+								: 'ascending',
+					},
+					textValue!
+				),
+			[onSortChange, keyValue, sort]
+		);
+
+		const isExpandable = (expandable || lazy) && !isLoading;
+		const isSortable = isHead && sortable;
+
 		return (
 			<As
 				{...otherProps}
 				{...focusWithinProps}
 				aria-colindex={isHead && !sortable ? undefined : index! + 1}
-				aria-describedby={
-					isHead && sortable ? sortDescriptionId : undefined
-				}
+				aria-describedby={isSortable ? sortDescriptionId : undefined}
 				aria-sort={
-					isHead && sortable
+					isSortable
 						? sort && keyValue === sort.column
 							? sort.direction
 							: 'none'
 						: undefined
 				}
 				className={classNames(className, {
+					'order-arrow-down-active': isSortable
+						? sort &&
+						  keyValue === sort.column &&
+						  sort.direction === 'descending'
+						: undefined,
+					'order-arrow-up-active': isSortable
+						? sort &&
+						  keyValue === sort.column &&
+						  sort.direction === 'ascending'
+						: undefined,
 					'table-cell-expand': truncate || expanded,
 					[`table-cell-${delimiter}`]: delimiter,
 					[`table-column-text-${textAlign}`]: textAlign,
@@ -180,57 +208,51 @@ export const Cell = React.forwardRef<HTMLTableCellElement, Props>(
 						: `string,${keyValue}`
 				}
 				onClick={(event) => {
-					if (!(isHead && sortable)) {
+					if (!isSortable) {
 						return;
 					}
 
 					event.preventDefault();
-					onSortChange(
-						{
-							column: keyValue!,
-							direction:
-								sort && keyValue === sort.column
-									? sort.direction === 'ascending'
-										? 'descending'
-										: 'ascending'
-									: 'ascending',
-						},
-						textValue!
-					);
+					doSort();
 				}}
 				onKeyDown={(event) => {
 					if (event.key === Keys.Enter) {
-						toggle(key!);
+						if (isSortable) {
+							event.preventDefault();
+							doSort();
+						}
+
+						if (treegrid && isExpandable) {
+							toggle(key!);
+						}
 					}
 				}}
 				ref={ref}
 				role={treegrid ? 'gridcell' : undefined}
 				style={{
 					width,
 				}}
+				tabIndex={focusWithinProps.tabIndex}
 			>
-				{isHead && sortable ? (
-					<a
-						className="inline-item text-truncate-inline"
-						href="#"
-						onClick={(event) => event.preventDefault()}
-						role="presentation"
-						tabIndex={treegrid ? -1 : undefined}
-					>
-						<span className="text-truncate">{children}</span>
-
-						{sort && keyValue === sort.column && (
-							<span className="inline-item inline-item-after">
-								<Icon
-									symbol={
-										sort.direction === 'ascending'
-											? 'order-arrow-up'
-											: 'order-arrow-down'
-									}
-								/>
+				{isSortable ? (
+					<Layout.ContentRow>
+						<Layout.ContentCol expand>
+							<span className="text-truncate-inline">
+								<span className="text-truncate">
+									{children}
+								</span>
 							</span>
-						)}
-					</a>
+						</Layout.ContentCol>
+						<Layout.ContentCol>
+							<button
+								aria-label={messages['sortDescription']}
+								className="component-action"
+								type="button"
+							>
+								<Icon symbol="order-arrow" />
+							</button>
+						</Layout.ContentCol>
+					</Layout.ContentRow>
 				) : truncate ? (
 					<span className="text-truncate-inline">
 						<span className="text-truncate">{children}</span>
@@ -243,7 +265,7 @@ export const Cell = React.forwardRef<HTMLTableCellElement, Props>(
 								(expandable || lazy ? 4 : 0),
 						}}
 					>
-						{(expandable || lazy) && !isLoading && (
+						{isExpandable && (
 							<Layout.ContentCol className="autofit-col-toggle">
 								<Button
 									aria-label={messages['expandable']}

packages/clay-core/src/table/Table.tsx

@@ -186,6 +186,7 @@ export const Table = React.forwardRef<HTMLDivElement, Props>(
 				className={classNames(className, {
 					'table-nested-rows': nestedKey,
 					[`table-${size}`]: size,
+					'table-sort': sort || sort === null,
 				})}
 				ref={ref}
 				role={nestedKey ? 'treegrid' : undefined}

packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap

@@ -332,17 +332,41 @@ exports[`Table basic rendering render with sort column 1`] = `
             style="width: auto;"
             tabindex="-1"
           >
-            <a
-              class="inline-item text-truncate-inline"
-              href="#"
-              role="presentation"
+            <div
+              class="autofit-row"
             >
-              <span
-                class="text-truncate"
+              <div
+                class="autofit-col autofit-col-expand"
               >
-                Name
-              </span>
-            </a>
+                <span
+                  class="text-truncate-inline"
+                >
+                  <span
+                    class="text-truncate"
+                  >
+                    Name
+                  </span>
+                </span>
+              </div>
+              <div
+                class="autofit-col"
+              >
+                <button
+                  aria-label="sortable column"
+                  class="component-action"
+                  type="button"
+                >
+                  <svg
+                    class="lexicon-icon lexicon-icon-order-arrow"
+                    role="presentation"
+                  >
+                    <use
+                      href="#order-arrow"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
           </th>
           <th
             aria-colindex="2"
@@ -353,17 +377,41 @@ exports[`Table basic rendering render with sort column 1`] = `
             style="width: auto;"
             tabindex="-1"
           >
-            <a
-              class="inline-item text-truncate-inline"
-              href="#"
-              role="presentation"
+            <div
+              class="autofit-row"
             >
-              <span
-                class="text-truncate"
+              <div
+                class="autofit-col autofit-col-expand"
               >
-                Type
-              </span>
-            </a>
+                <span
+                  class="text-truncate-inline"
+                >
+                  <span
+                    class="text-truncate"
+                  >
+                    Type
+                  </span>
+                </span>
+              </div>
+              <div
+                class="autofit-col"
+              >
+                <button
+                  aria-label="sortable column"
+                  class="component-action"
+                  type="button"
+                >
+                  <svg
+                    class="lexicon-icon lexicon-icon-order-arrow"
+                    role="presentation"
+                  >
+                    <use
+                      href="#order-arrow"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </div>
           </th>
           <th
             class="table-head-title"

packages/clay-core/src/table/useTreeNavigation.tsx

@@ -41,7 +41,7 @@ export function useTreeNavigation<T extends HTMLElement>({
 					Keys.Down,
 					Keys.Home,
 					Keys.End,
-				].includes(event.key) &&
+				].includes(event.key) ||
 				disabled
 			) {
 				return;

packages/clay-css/src/scss/cadmin/variables/_tables.scss

@@ -360,6 +360,9 @@ $cadmin-c-table: map-deep-merge(
 				color: $cadmin-table-disabled-color,
 			),
 		),
+		table-sort: (
+			color: $cadmin-gray-900,
+		),
 		autofit-col: (
 			justify-content: center,
 			padding-left: nth($cadmin-table-cell-padding, 2),

packages/clay-css/src/scss/components/_tables.scss

@@ -99,6 +99,7 @@ caption {
 tr.table-focus {
 	@include clay-css($c-tr-table-focus);
 
+	th,
 	td {
 		$_td: setter(map-get($c-tr-table-focus, td), ());
 
@@ -527,6 +528,12 @@ td.table-focus {
 	}
 }
 
+// .table-sort
+
+.table-sort {
+	@include clay-table-variant($c-table-sort);
+}
+
 // Show Quick Action
 
 .show-quick-actions-on-hover {

packages/clay-css/src/scss/mixins/_tables.scss

@@ -71,6 +71,10 @@
 
 					@include clay-css($_thead-table-cell);
 
+					&:hover {
+						@include clay-css(map-get($_thead-table-cell, hover));
+					}
+
 					&:first-child {
 						@include clay-css(
 							map-get($_thead-table-cell, table-column-start)
@@ -82,6 +86,12 @@
 							map-get($_thead-table-cell, table-column-end)
 						);
 					}
+
+					.component-action {
+						@include clay-css(
+							map-get($_thead-table-cell, component-action)
+						);
+					}
 				}
 
 				th {

packages/clay-css/src/scss/variables/_tables.scss

@@ -557,6 +557,30 @@ $c-table-nested-rows: map-deep-merge(
 	$c-table-nested-rows
 );
 
+// .table-sort
+
+$c-table-sort: () !default;
+$c-table-sort: map-deep-merge(
+	(
+		thead: (
+			table-cell: (
+				cursor: pointer,
+				transition: clay-enable-transitions($component-transition),
+				hover: (
+					background-color: $primary-l3,
+					color: $gray-900,
+				),
+				component-action: (
+					font-size: 0.75rem,
+					height: 1.5rem,
+					width: 1.5rem,
+				),
+			),
+		),
+	),
+	$c-table-sort
+);
+
 // Table Dark Variant
 
 $table-dark-bg: $gray-800 !default;