From fda0727922e0dd0b5bc16a59b3c6d25fdc7b679e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Thu, 7 Dec 2023 18:47:10 -0600 Subject: [PATCH 01/11] fix(@clayui/core): updates the sort icon for table --- packages/clay-core/src/table/Cell.tsx | 41 ++++++++++++++------------- 1 file changed, 21 insertions(+), 20 deletions(-) diff --git a/packages/clay-core/src/table/Cell.tsx b/packages/clay-core/src/table/Cell.tsx index a526c3213a..d2117adee5 100644 --- a/packages/clay-core/src/table/Cell.tsx +++ b/packages/clay-core/src/table/Cell.tsx @@ -210,27 +210,28 @@ export const Cell = React.forwardRef( }} > {isHead && sortable ? ( - event.preventDefault()} - role="presentation" - tabIndex={treegrid ? -1 : undefined} - > - {children} - - {sort && keyValue === sort.column && ( - - + + + + + {children} + - )} - + + + + + ) : truncate ? ( {children} From 35db8422e552512a16ea5f080444df8ffa616064 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Mon, 18 Dec 2023 19:38:09 -0600 Subject: [PATCH 02/11] chore: add svg4everybody to storybook --- .storybook/preview.js | 25 +++++++++++++++++-------- package.json | 1 + yarn.lock | 2 +- 3 files changed, 19 insertions(+), 9 deletions(-) diff --git a/.storybook/preview.js b/.storybook/preview.js index fcdc5705d5..da47f5697c 100644 --- a/.storybook/preview.js +++ b/.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) => ( - -
- -
- - ), + (Story) => { + useEffect(() => { + svg4everybody({ + polyfill: true, + }); + }, []); + + return ( + +
+ +
+ + ); + }, ]; export const parameters = { diff --git a/package.json b/package.json index 1750b4c674..44e98bf310 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index b0d3f81ca0..7310eca76b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -24038,7 +24038,7 @@ supports-hyperlinks@^2.0.0: svg4everybody@^2.1.9: version "2.1.9" resolved "https://registry.yarnpkg.com/svg4everybody/-/svg4everybody-2.1.9.tgz#5bd9f6defc133859a044646d4743fabc28db7e2d" - integrity sha1-W9n23vwTOFmgRGRtR0P6vCjbfi0= + integrity sha512-AS9WORVV/vk520ZHxGTlQzyDBizp/h6WyAYUbKhze/kwvQr43DwJpkIIPBomsUyKqN7N+h1deF92N9PmW+o+9A== svgo@^1.0.0, svgo@^1.3.2: version "1.3.2" From 4a92472fdfa58112221810297e5c83c73ebd4557 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Mon, 18 Dec 2023 19:40:27 -0600 Subject: [PATCH 03/11] feat(@clayui/css): add table-sort to change icon appearance --- packages/clay-css/src/scss/cadmin/variables/_tables.scss | 3 +++ packages/clay-css/src/scss/mixins/_tables.scss | 9 +++++++++ packages/clay-css/src/scss/variables/_tables.scss | 3 +++ 3 files changed, 15 insertions(+) diff --git a/packages/clay-css/src/scss/cadmin/variables/_tables.scss b/packages/clay-css/src/scss/cadmin/variables/_tables.scss index 2a0ba980ee..6d83a05ed3 100644 --- a/packages/clay-css/src/scss/cadmin/variables/_tables.scss +++ b/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), diff --git a/packages/clay-css/src/scss/mixins/_tables.scss b/packages/clay-css/src/scss/mixins/_tables.scss index 3be586a3c6..061b0d87ed 100644 --- a/packages/clay-css/src/scss/mixins/_tables.scss +++ b/packages/clay-css/src/scss/mixins/_tables.scss @@ -369,6 +369,15 @@ } } + .table-sort[aria-sort='ascending'] + .lexicon-icon + .order-arrow-arrow-up, + .table-sort[aria-sort='descending'] + .lexicon-icon + .order-arrow-arrow-down { + @include clay-css(map-get($map, table-sort)); + } + .autofit-col { @include clay-css(map-get($map, autofit-col)); diff --git a/packages/clay-css/src/scss/variables/_tables.scss b/packages/clay-css/src/scss/variables/_tables.scss index e2f49953cf..640ec7487a 100644 --- a/packages/clay-css/src/scss/variables/_tables.scss +++ b/packages/clay-css/src/scss/variables/_tables.scss @@ -322,6 +322,9 @@ $c-table: map-deep-merge( color: $table-disabled-color, ), ), + table-sort: ( + color: $gray-900, + ), autofit-col: ( justify-content: center, padding-left: nth($table-cell-padding, 2), From 1c3ca15abb73539248ece84ab911e6ec61cf1112 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Mon, 18 Dec 2023 19:49:44 -0600 Subject: [PATCH 04/11] chore(@clayui/core): updates the sort button to span to avoid accessibility issues --- packages/clay-core/src/table/Cell.tsx | 9 +- .../__snapshots__/BasicRendering.tsx.snap | 88 ++++++++++++++----- 2 files changed, 71 insertions(+), 26 deletions(-) diff --git a/packages/clay-core/src/table/Cell.tsx b/packages/clay-core/src/table/Cell.tsx index d2117adee5..01323d6d2f 100644 --- a/packages/clay-core/src/table/Cell.tsx +++ b/packages/clay-core/src/table/Cell.tsx @@ -168,6 +168,7 @@ export const Cell = React.forwardRef( 'table-cell-ws-nowrap': !wrap, 'table-focus': focusWithinProps.tabIndex === 0 && isFocused, 'table-head-title': isHead, + 'table-sort': isHead && sortable, })} colSpan={ divider @@ -219,17 +220,13 @@ export const Cell = React.forwardRef( - + ) : truncate ? ( diff --git a/packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap b/packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap index 412c03534c..84cc2d7cb5 100644 --- a/packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap +++ b/packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap @@ -327,43 +327,91 @@ exports[`Table basic rendering render with sort column 1`] = ` aria-colindex="1" aria-describedby="clay-id-17" aria-sort="none" - class="table-head-title" + class="table-head-title table-sort" data-id="string,name" style="width: auto;" tabindex="-1" > - - - Name - - + + + Name + + + +
+ + + + + +
+ - - - Type - - + + + Type + + + +
+ + + + + +
+ Date: Mon, 18 Dec 2023 20:23:33 -0600 Subject: [PATCH 05/11] fix(@clayui/core): fixes error when not navigating through the head with sortable enabled and fixes error when expanding unnecessarily --- packages/clay-core/src/table/Cell.tsx | 59 ++++++++++++------- .../__snapshots__/BasicRendering.tsx.snap | 5 +- .../clay-core/src/table/useTreeNavigation.tsx | 2 +- 3 files changed, 43 insertions(+), 23 deletions(-) diff --git a/packages/clay-core/src/table/Cell.tsx b/packages/clay-core/src/table/Cell.tsx index 01323d6d2f..2ebcd1e321 100644 --- a/packages/clay-core/src/table/Cell.tsx +++ b/packages/clay-core/src/table/Cell.tsx @@ -145,16 +145,34 @@ export const Cell = React.forwardRef( [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 ( ( 'table-cell-ws-nowrap': !wrap, 'table-focus': focusWithinProps.tabIndex === 0 && isFocused, 'table-head-title': isHead, - 'table-sort': isHead && sortable, + 'table-sort': isSortable, })} colSpan={ divider @@ -181,27 +199,23 @@ export const Cell = React.forwardRef( : `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} @@ -209,8 +223,11 @@ export const Cell = React.forwardRef( style={{ width, }} + tabIndex={ + treegrid || !isSortable ? focusWithinProps.tabIndex : 1 + } > - {isHead && sortable ? ( + {isSortable ? ( @@ -241,7 +258,7 @@ export const Cell = React.forwardRef( (expandable || lazy ? 4 : 0), }} > - {(expandable || lazy) && !isLoading && ( + {isExpandable && ( ) : truncate ? ( diff --git a/packages/clay-core/src/table/Table.tsx b/packages/clay-core/src/table/Table.tsx index d4c2b88ab7..3cb4053ba4 100644 --- a/packages/clay-core/src/table/Table.tsx +++ b/packages/clay-core/src/table/Table.tsx @@ -186,6 +186,7 @@ export const Table = React.forwardRef( className={classNames(className, { 'table-nested-rows': nestedKey, [`table-${size}`]: size, + 'table-sort': sort || sort === null, })} ref={ref} role={nestedKey ? 'treegrid' : undefined} From 427430b99fc2591a05e25963fa9938bddad3b84f Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Tue, 26 Dec 2023 15:32:12 -0800 Subject: [PATCH 07/11] fix(@clayui/css): Tables adds variant table-sort --- .../clay-css/src/scss/components/_tables.scss | 7 +++++ .../clay-css/src/scss/mixins/_tables.scss | 19 ++++++------- .../clay-css/src/scss/variables/_tables.scss | 27 ++++++++++++++++--- 3 files changed, 41 insertions(+), 12 deletions(-) diff --git a/packages/clay-css/src/scss/components/_tables.scss b/packages/clay-css/src/scss/components/_tables.scss index bea7912c46..e00d0dfcb3 100644 --- a/packages/clay-css/src/scss/components/_tables.scss +++ b/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 { diff --git a/packages/clay-css/src/scss/mixins/_tables.scss b/packages/clay-css/src/scss/mixins/_tables.scss index 061b0d87ed..51783b1a1b 100644 --- a/packages/clay-css/src/scss/mixins/_tables.scss +++ b/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 { @@ -369,15 +379,6 @@ } } - .table-sort[aria-sort='ascending'] - .lexicon-icon - .order-arrow-arrow-up, - .table-sort[aria-sort='descending'] - .lexicon-icon - .order-arrow-arrow-down { - @include clay-css(map-get($map, table-sort)); - } - .autofit-col { @include clay-css(map-get($map, autofit-col)); diff --git a/packages/clay-css/src/scss/variables/_tables.scss b/packages/clay-css/src/scss/variables/_tables.scss index 640ec7487a..6e9abaa292 100644 --- a/packages/clay-css/src/scss/variables/_tables.scss +++ b/packages/clay-css/src/scss/variables/_tables.scss @@ -322,9 +322,6 @@ $c-table: map-deep-merge( color: $table-disabled-color, ), ), - table-sort: ( - color: $gray-900, - ), autofit-col: ( justify-content: center, padding-left: nth($table-cell-padding, 2), @@ -560,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; From 4c606b4b7d331346981b163f7c0679c79a7ef3d0 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Tue, 26 Dec 2023 17:37:17 -0800 Subject: [PATCH 08/11] chore(@clayui/core): regen snapshot --- .../__snapshots__/BasicRendering.tsx.snap | 25 ++++++++----------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap b/packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap index 9e434a7e5b..37bc35da0e 100644 --- a/packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap +++ b/packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap @@ -327,9 +327,10 @@ exports[`Table basic rendering render with sort column 1`] = ` aria-colindex="1" aria-describedby="clay-id-17" aria-sort="none" - class="table-head-title table-sort" + class="table-head-title" data-id="string,name" style="width: auto;" + tabindex="-1" >
- - +
@@ -371,14 +372,10 @@ exports[`Table basic rendering render with sort column 1`] = ` aria-colindex="2" aria-describedby="clay-id-17" aria-sort="none" - class="table-head-title table-sort" + class="table-head-title" data-id="string,type" -<<<<<<< HEAD style="width: auto;" tabindex="-1" -======= - tabindex="1" ->>>>>>> 268cb8f02 (fix(@clayui/core): fixes error when not navigating through the head with sortable enabled and fixes error when expanding unnecessarily) >
- - +
From c5675c0443b4ec25273a4172589e3656cdaabfd7 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Mon, 8 Jan 2024 13:03:05 -0800 Subject: [PATCH 09/11] feat(@clayui/core): Adds attribute sortAriaLabel on Cell for custom aria-label on sort button --- packages/clay-core/src/table/Cell.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/clay-core/src/table/Cell.tsx b/packages/clay-core/src/table/Cell.tsx index 7af0f2aa6b..4112d98b2c 100644 --- a/packages/clay-core/src/table/Cell.tsx +++ b/packages/clay-core/src/table/Cell.tsx @@ -50,6 +50,11 @@ type Props = { */ keyValue?: React.Key; + /** + * Sets the `aria-label` on the sort button. The default is "Sort Column". + */ + sortAriaLabel?: string; + /** * Whether the column allows sortable. Only available in the header column. */ @@ -92,6 +97,7 @@ export const Cell = React.forwardRef( expanded, index, keyValue, + sortAriaLabel = 'Sort Column', sortable, textAlign, textValue, @@ -245,7 +251,7 @@ export const Cell = React.forwardRef(