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/packages/clay-core/src/table/Cell.tsx b/packages/clay-core/src/table/Cell.tsx index a526c3213a..ab61bdb6bc 100644 --- a/packages/clay-core/src/table/Cell.tsx +++ b/packages/clay-core/src/table/Cell.tsx @@ -145,22 +145,50 @@ 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 ( ( : `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} @@ -208,29 +232,27 @@ export const Cell = React.forwardRef( style={{ width, }} + tabIndex={focusWithinProps.tabIndex} > - {isHead && sortable ? ( - event.preventDefault()} - role="presentation" - tabIndex={treegrid ? -1 : undefined} - > - {children} - - {sort && keyValue === sort.column && ( - - + {isSortable ? ( + + + + + {children} + - )} - + + + + + ) : truncate ? ( {children} @@ -243,7 +265,7 @@ export const Cell = React.forwardRef( (expandable || lazy ? 4 : 0), }} > - {(expandable || lazy) && !isLoading && ( + {isExpandable && ( + + - - - Type - - + + + Type + + + +
+ +
+ ({ Keys.Down, Keys.Home, Keys.End, - ].includes(event.key) && + ].includes(event.key) || disabled ) { return; 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/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 3be586a3c6..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 { diff --git a/packages/clay-css/src/scss/variables/_tables.scss b/packages/clay-css/src/scss/variables/_tables.scss index e2f49953cf..6e9abaa292 100644 --- a/packages/clay-css/src/scss/variables/_tables.scss +++ b/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; 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"