refactor: Update resizer styles to avoid ::before selector (#1731)

src/table/__tests__/resizable-columns.test.tsx

@@ -46,8 +46,8 @@ function hasGlobalResizeClass() {
   return document.body.classList.contains(resizerStyles['resize-active']);
 }
 
-function findActiveResizer(wrapper: TableWrapper) {
-  return wrapper.findByClassName(resizerStyles['resizer-active']);
+function findActiveDivider(wrapper: TableWrapper) {
+  return wrapper.findByClassName(resizerStyles['divider-active']);
 }
 
 afterEach(() => {
@@ -104,15 +104,15 @@ test('should use the default width if it is not provided to a column and the col
 
 test('should show the tracking line and activate resizer onMouseDown', () => {
   const { wrapper } = renderTable(<Table {...defaultProps} />);
-  expect(findActiveResizer(wrapper)).toBeNull();
+  expect(findActiveDivider(wrapper)).toBeNull();
   expect(hasGlobalResizeClass()).toEqual(false);
 
   fireMousedown(wrapper.findColumnResizer(1)!);
-  expect(findActiveResizer(wrapper)).not.toBeNull();
+  expect(findActiveDivider(wrapper)).not.toBeNull();
   expect(hasGlobalResizeClass()).toEqual(true);
 
   fireMouseup(150);
-  expect(findActiveResizer(wrapper)).toBeNull();
+  expect(findActiveDivider(wrapper)).toBeNull();
   expect(hasGlobalResizeClass()).toEqual(false);
 });
 

src/table/header-cell/index.tsx

@@ -7,7 +7,7 @@ import { KeyCode } from '../../internal/keycode';
 import { TableProps } from '../interfaces';
 import { getSortingIconName, getSortingStatus, isSorted } from './utils';
 import styles from './styles.css.js';
-import { Resizer } from '../resizer';
+import { Divider, Resizer } from '../resizer';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { useInternalI18n } from '../../i18n/context';
 import { StickyColumnsModel } from '../sticky-columns';
@@ -93,7 +93,6 @@ export function TableHeaderCell<ItemType>({
       sortingDisabled={sortingDisabled}
       hidden={hidden}
       colIndex={colIndex}
-      resizableColumns={resizableColumns}
       columnId={columnId}
       stickyState={stickyState}
       tableRole={tableRole}
@@ -139,7 +138,7 @@ export function TableHeaderCell<ItemType>({
           </span>
         )}
       </div>
-      {resizableColumns && (
+      {resizableColumns ? (
         <Resizer
           tabIndex={tabIndex}
           focusId={`resize-control-${String(columnId)}`}
@@ -150,6 +149,8 @@ export function TableHeaderCell<ItemType>({
           minWidth={typeof column.minWidth === 'string' ? parseInt(column.minWidth) : column.minWidth}
           roleDescription={i18n('ariaLabels.resizerRoleDescription', resizerRoleDescription)}
         />
+      ) : (
+        <Divider className={styles['resize-divider']} />
       )}
     </TableThElement>
   );

src/table/header-cell/styles.scss

@@ -41,7 +41,7 @@
     &-last-left {
       box-shadow: awsui.$shadow-sticky-column-first;
       clip-path: inset(0px -24px 0px 0px);
-      &:not(.header-cell-resizable):before {
+      & > .resize-divider {
         display: none;
       }
     }
@@ -55,25 +55,6 @@
       transition-timing-function: awsui.$motion-easing-sticky;
     }
   }
-
-  &:not(:last-child):before {
-    $gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
-
-    content: '';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    min-height: awsui.$line-height-heading-xs;
-    max-height: calc(100% - #{$gap});
-    margin: auto;
-    border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-    box-sizing: border-box;
-  }
-
-  &-resizable:not(:last-child):before {
-    border-left-color: awsui.$color-border-divider-interactive-default;
-  }
 }
 
 .sorting-icon {

src/table/header-cell/th-element.tsx

@@ -16,7 +16,6 @@ interface TableThElementProps {
   sortingDisabled?: boolean;
   hidden?: boolean;
   colIndex: number;
-  resizableColumns?: boolean;
   columnId: PropertyKey;
   stickyState: StickyColumnsModel;
   cellRef?: React.RefCallback<HTMLElement>;
@@ -31,7 +30,6 @@ export function TableThElement({
   sortingDisabled,
   hidden,
   colIndex,
-  resizableColumns,
   columnId,
   stickyState,
   cellRef,
@@ -51,7 +49,6 @@ export function TableThElement({
       className={clsx(
         className,
         {
-          [styles['header-cell-resizable']]: !!resizableColumns,
           [styles['header-cell-sortable']]: sortingStatus,
           [styles['header-cell-sorted']]: sortingStatus === 'ascending' || sortingStatus === 'descending',
           [styles['header-cell-disabled']]: sortingDisabled,

src/table/resizer/index.tsx

@@ -24,6 +24,10 @@ const AUTO_GROW_START_TIME = 10;
 const AUTO_GROW_INTERVAL = 10;
 const AUTO_GROW_INCREMENT = 5;
 
+export function Divider({ className }: { className?: string }) {
+  return <span className={clsx(styles.divider, styles['divider-disabled'], className)} />;
+}
+
 export function Resizer({
   onWidthUpdate,
   onWidthUpdateCommit,
@@ -170,7 +174,6 @@ export function Resizer({
         ref={resizerToggleRef}
         className={clsx(
           styles.resizer,
-          isDragging && styles['resizer-active'],
           (resizerHasFocus || showFocusRing || isKeyboardDragging) && styles['has-focus']
         )}
         onMouseDown={event => {
@@ -207,6 +210,7 @@ export function Resizer({
         data-focus-id={focusId}
       />
       <span
+        className={clsx(styles.divider, isDragging && styles['divider-active'])}
         ref={resizerSeparatorRef}
         id={separatorId}
         role="separator"

src/table/resizer/styles.scss

@@ -15,6 +15,29 @@
 $handle-width: awsui.$space-l;
 $active-separator-width: 2px;
 
+th:not(:last-child) > .divider {
+  $gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
+
+  position: absolute;
+  outline: none;
+  pointer-events: none;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  min-height: awsui.$line-height-heading-xs;
+  max-height: calc(100% - #{$gap});
+  margin: auto;
+  border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-interactive-default;
+  box-sizing: border-box;
+
+  &-disabled {
+    border-left-color: awsui.$color-border-divider-default;
+  }
+  &-active {
+    border-left: $active-separator-width solid awsui.$color-border-divider-active;
+  }
+}
+
 .resizer {
   @include styles.styles-reset;
   border: none;
@@ -38,32 +61,13 @@ $active-separator-width: 2px;
     width: calc(#{$handle-width} / 2);
     right: 0;
   }
-  th:not(:last-child) > & {
-    &:hover,
-    &-active {
-      &::before {
-        $gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
-
-        content: '';
-        position: absolute;
-        left: calc(#{$handle-width} / 2 - #{$active-separator-width});
-        bottom: 0;
-        top: 0;
-        min-height: awsui.$line-height-heading-xs;
-        max-height: calc(100% - #{$gap});
-        margin: auto;
-        border-left: $active-separator-width solid awsui.$color-border-divider-active;
-        box-sizing: border-box;
-      }
-    }
+  &:hover + .divider {
+    border-left: $active-separator-width solid awsui.$color-border-divider-active;
   }
   // stylelint-disable-next-line selector-combinator-disallowed-list
   body[data-awsui-focus-visible='true'] &.has-focus {
-    @include styles.focus-highlight(awsui.$space-table-header-focus-outline-gutter);
+    @include styles.focus-highlight(calc(#{awsui.$space-table-header-focus-outline-gutter} - 2px));
     position: absolute;
-    &::before {
-      box-shadow: inset 0 0 0 2px awsui.$color-border-item-focused;
-    }
   }
 }
 

src/table/thead.tsx

@@ -16,6 +16,7 @@ import { StickyColumnsModel } from './sticky-columns';
 import { getTableHeaderRowRoleProps, TableRole } from './table-role';
 import { TableThElement } from './header-cell/th-element';
 import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
+import { Divider } from './resizer';
 
 export interface TheadProps {
   containerWidth: null | number;
@@ -128,6 +129,7 @@ const Thead = React.forwardRef(
               ) : (
                 <ScreenreaderOnly>{singleSelectionHeaderAriaLabel}</ScreenreaderOnly>
               )}
+              <Divider className={styles['resize-divider']} />
             </TableThElement>
           ) : null}