diff --git a/.parcelrc b/.parcelrc index bdbedb1c86a..832d239ba7d 100644 --- a/.parcelrc +++ b/.parcelrc @@ -6,6 +6,7 @@ "docs:*.{js,ts,tsx,json}": ["parcel-transformer-docs", "@parcel/transformer-inline"], "docs-json:*.{js,ts,tsx,json}": ["parcel-transformer-docs"], "packages/*/*/intl/*.json": ["parcel-transformer-intl"], + "data-url:*.svg": ["@parcel/transformer-svg", "@parcel/transformer-inline-string"], "*.{md,mdx}": ["parcel-transformer-mdx-docs"], "*.svg": ["@parcel/transformer-svg-react"], "*.css": ["...", "parcel-transformer-css-env"], diff --git a/packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveHorizontal_9_9.svg b/packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveHorizontal_9_9.svg deleted file mode 100644 index b7beacd3aa8..00000000000 --- a/packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveHorizontal_9_9.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - diff --git a/packages/@adobe/spectrum-css-temp/components/table/index.css b/packages/@adobe/spectrum-css-temp/components/table/index.css index abf1f575d8a..cd1f28a7d25 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/index.css +++ b/packages/@adobe/spectrum-css-temp/components/table/index.css @@ -497,19 +497,6 @@ svg.spectrum-Table-sortedIcon { } } -.resize-ew, -.spectrum-Table-columnResizer--ewresize { - cursor: ew-resize !important; -} -.resize-e, -.spectrum-Table-columnResizer--eresize { - cursor: e-resize !important; -} -.resize-w, -.spectrum-Table-columnResizer--wresize { - cursor: w-resize !important; -} - @media (forced-colors: active) { .spectrum-Table-row { &:focus-ring { diff --git a/packages/@react-spectrum/table/src/Resizer.tsx b/packages/@react-spectrum/table/src/Resizer.tsx index a0da592d808..3e28195a52e 100644 --- a/packages/@react-spectrum/table/src/Resizer.tsx +++ b/packages/@react-spectrum/table/src/Resizer.tsx @@ -9,6 +9,7 @@ import intlMessages from '../intl/*.json'; import {mergeProps} from '@react-aria/utils'; import React, {Key, RefObject, useEffect, useState} from 'react'; import ReactDOM from 'react-dom'; +import rspStyles from './table.css'; import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n'; import {useTableColumnResize} from '@react-aria/table'; @@ -25,9 +26,9 @@ interface ResizerProps { } let CURSOR_CLASSES = { - w: classNames(styles, 'resize-w'), - e: classNames(styles, 'resize-e'), - ew: classNames(styles, 'resize-ew') + w: classNames(rspStyles, 'resize-w'), + e: classNames(rspStyles, 'resize-e'), + ew: classNames(rspStyles, 'resize-ew') }; function Resizer(props: ResizerProps, ref: RefObject) { @@ -116,11 +117,11 @@ function Resizer(props: ResizerProps, ref: RefObject) { className={classNames( styles, 'spectrum-Table-columnResizer', - { - 'spectrum-Table-columnResizer--ewresize': !(isEResizable && isWResizable), - 'spectrum-Table-columnResizer--eresize': direction === 'rtl' ? isWResizable : isEResizable, - 'spectrum-Table-columnResizer--wresize': direction === 'rtl' ? isEResizable : isWResizable - } + classNames(rspStyles, { + 'react-spectrum-Table-columnResizer--ewresize': !(isEResizable && isWResizable), + 'react-spectrum-Table-columnResizer--eresize': direction === 'rtl' ? isWResizable : isEResizable, + 'react-spectrum-Table-columnResizer--wresize': direction === 'rtl' ? isEResizable : isWResizable + }) )} {...resizerProps}> diff --git a/packages/@react-spectrum/table/src/cursors/Cur_MoveHorizontal_9_9.svg b/packages/@react-spectrum/table/src/cursors/Cur_MoveHorizontal_9_9.svg new file mode 100644 index 00000000000..17b2d4c7c19 --- /dev/null +++ b/packages/@react-spectrum/table/src/cursors/Cur_MoveHorizontal_9_9.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveToLeft_9_9.svg b/packages/@react-spectrum/table/src/cursors/Cur_MoveToLeft_9_9.svg similarity index 90% rename from packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveToLeft_9_9.svg rename to packages/@react-spectrum/table/src/cursors/Cur_MoveToLeft_9_9.svg index 2269dc0ed73..140d0339acd 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveToLeft_9_9.svg +++ b/packages/@react-spectrum/table/src/cursors/Cur_MoveToLeft_9_9.svg @@ -1,5 +1,5 @@ - + - \ No newline at end of file + diff --git a/packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveToRight_9_9.svg b/packages/@react-spectrum/table/src/cursors/Cur_MoveToRight_9_9.svg similarity index 90% rename from packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveToRight_9_9.svg rename to packages/@react-spectrum/table/src/cursors/Cur_MoveToRight_9_9.svg index c606236adaf..4238d0c2993 100644 --- a/packages/@adobe/spectrum-css-temp/components/table/cursors/Cur_MoveToRight_9_9.svg +++ b/packages/@react-spectrum/table/src/cursors/Cur_MoveToRight_9_9.svg @@ -1,5 +1,5 @@ - + - \ No newline at end of file + diff --git a/packages/@react-spectrum/table/src/table.css b/packages/@react-spectrum/table/src/table.css index ba27ed415f6..47a80cf81b6 100644 --- a/packages/@react-spectrum/table/src/table.css +++ b/packages/@react-spectrum/table/src/table.css @@ -49,3 +49,16 @@ width: 100%; height: 100%; } + +.resize-ew, +.react-spectrum-Table-columnResizer--ewresize { + cursor: url('data-url:./cursors/Cur_MoveHorizontal_9_9.svg'), ew-resize !important; +} +.resize-e, +.react-spectrum-Table-columnResizer--eresize { + cursor: url('data-url:./cursors/Cur_MoveToRight_9_9.svg'), e-resize !important; +} +.resize-w, +.react-spectrum-Table-columnResizer--wresize { + cursor: url('data-url:./cursors/Cur_MoveToLeft_9_9.svg'), w-resize !important; +}