feat(tables): new light/dark mode colors (#1833)

Author: geotrev

docs/migration.md

@@ -173,6 +173,7 @@ consider additional positioning prop support on a case-by-case basis.
 
 - All subcomponent exports have been deprecated and will be removed in a future major version.
   Update to subcomponent properties (e.g., `Table.Body`).
+- Removed `isHovered`, `isActive`, and `isFocused` props from `Table.OverflowButton`
 
 #### @zendeskgarden/react-tabs
 

package-lock.json

@@ -22,6 +22,7 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-utilities": "^2.0.0",
+    "@zendeskgarden/react-buttons": "^9.0.0-next.13",
     "dom-helpers": "^5.1.0",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7"

packages/tables/package.json

@@ -17,11 +17,18 @@ import { ICellProps } from '../types';
  * @extends TdHTMLAttributes<HTMLTableCellElement>
  */
 export const Cell = React.forwardRef<HTMLTableCellElement, ICellProps>(
-  ({ hidden, ...props }, ref) => {
+  ({ hidden, isMinimum, isTruncated, hasOverflow, ...props }, ref) => {
     const { size } = useTableContext();
 
     return (
-      <StyledCell ref={ref} size={size} {...props}>
+      <StyledCell
+        ref={ref}
+        $size={size}
+        $isMinimum={isMinimum}
+        $isTruncated={isTruncated}
+        $hasOverflow={hasOverflow}
+        {...props}
+      >
         {hidden && props.children ? (
           <StyledHiddenCell>{props.children}</StyledHiddenCell>
         ) : (

packages/tables/src/elements/Cell.tsx

@@ -18,7 +18,7 @@ export const GroupRow = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTable
   (props, ref) => {
     const { size } = useTableContext();
 
-    return <StyledGroupRow ref={ref} size={size} {...props} />;
+    return <StyledGroupRow ref={ref} $size={size} {...props} />;
   }
 );
 

packages/tables/src/elements/GroupRow.tsx

@@ -14,8 +14,8 @@ import { IHeadProps } from '../types';
  *
  * @extends HTMLAttributes<HTMLTableSectionElement>
  */
-export const Head = forwardRef<HTMLTableSectionElement, IHeadProps>((props, ref) => (
-  <StyledHead ref={ref} {...props} />
-));
+export const Head = forwardRef<HTMLTableSectionElement, IHeadProps>(
+  ({ isSticky, ...props }, ref) => <StyledHead ref={ref} $isSticky={isSticky} {...props} />
+);
 
 Head.displayName = 'Head';

packages/tables/src/elements/Head.tsx

@@ -17,11 +17,18 @@ import { Cell } from './Cell';
  * @extends ThHTMLAttributes<HTMLTableCellElement>
  */
 export const HeaderCell = forwardRef<HTMLTableCellElement, IHeaderCellProps>(
-  ({ hidden, ...props }, ref) => {
+  ({ hidden, isMinimum, isTruncated, hasOverflow, ...props }, ref) => {
     const { size } = useTableContext();
 
     return (
-      <StyledHeaderCell ref={ref} size={size} {...props}>
+      <StyledHeaderCell
+        ref={ref}
+        $size={size}
+        $isMinimum={isMinimum}
+        $isTruncated={isTruncated}
+        $hasOverflow={hasOverflow}
+        {...props}
+      >
         {hidden && props.children ? (
           <StyledHiddenCell>{props.children}</StyledHiddenCell>
         ) : (

packages/tables/src/elements/HeaderCell.tsx

@@ -18,7 +18,7 @@ export const HeaderRow = React.forwardRef<HTMLTableRowElement, HTMLAttributes<HT
   (props, ref) => {
     const { size } = useTableContext();
 
-    return <StyledHeaderRow ref={ref} size={size} {...props} />;
+    return <StyledHeaderRow ref={ref} $size={size} {...props} />;
   }
 );
 

packages/tables/src/elements/HeaderRow.tsx

@@ -6,50 +6,14 @@
  */
 
 import React from 'react';
-import userEvent from '@testing-library/user-event';
 import { render } from 'garden-test-utils';
 import { OverflowButton } from './OverflowButton';
-import { PALETTE_V8 } from '@zendeskgarden/react-theming';
 
 describe('OverflowButton', () => {
-  const user = userEvent.setup();
-
   it('passes ref to underlying DOM element', () => {
     const ref = React.createRef<HTMLButtonElement>();
     const { container } = render(<OverflowButton ref={ref} />);
 
     expect(container.firstChild).toBe(ref.current);
   });
-
-  it('applies isHovered styling', () => {
-    const { container } = render(<OverflowButton isHovered />);
-
-    expect(container.firstElementChild).toHaveStyleRule('color', PALETTE_V8.grey[700]);
-  });
-
-  it('applies isActive styling', () => {
-    const { container } = render(<OverflowButton isActive />);
-
-    expect(container.firstElementChild).toHaveStyleRule('z-index', '1');
-    expect(container.firstElementChild).toHaveStyleRule('color', PALETTE_V8.grey[800]);
-  });
-
-  describe('onFocus', () => {
-    it('applies focused state', async () => {
-      const { container } = render(<OverflowButton />);
-
-      await user.click(container.firstElementChild!);
-      expect(container.firstElementChild).toHaveStyleRule('box-shadow');
-    });
-  });
-
-  describe('onBlur', () => {
-    it('removes focused state', async () => {
-      const { container } = render(<OverflowButton />);
-
-      await user.click(container.firstElementChild!);
-      await user.tab();
-      expect(container.firstElementChild).not.toHaveStyleRule('box-shadow');
-    });
-  });
 });

packages/tables/src/elements/OverflowButton.spec.tsx

@@ -5,57 +5,27 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { ButtonHTMLAttributes, useState, forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { composeEventHandlers } from '@zendeskgarden/container-utilities';
-import OverflowStrokeIcon from '@zendeskgarden/svg-icons/src/16/overflow-stroke.svg';
-import { StyledOverflowButton, StyledOverflowButtonIconWrapper } from '../styled';
+import React, { ButtonHTMLAttributes, forwardRef } from 'react';
+import OverflowStrokeIcon from '@zendeskgarden/svg-icons/src/16/overflow-vertical-stroke.svg';
+import { StyledOverflowButton } from '../styled';
 import { useTableContext } from '../utils/useTableContext';
 
-export interface IOverflowButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /** @ignore Applies hover styling */
-  isHovered?: boolean;
-  /** @ignore Applies active styling */
-  isActive?: boolean;
-  /** @ignore Applies focus styling */
-  isFocused?: boolean;
-}
-
 /**
  * @deprecated use `Table.OverflowButton` instead
  *
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
-export const OverflowButton = forwardRef<HTMLButtonElement, IOverflowButtonProps>(
-  ({ onFocus, onBlur, isFocused: focused, ...other }, ref) => {
-    const [isFocused, setIsFocused] = useState(false);
-    const { size } = useTableContext();
+export const OverflowButton = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement>
+>((props, ref) => {
+  const { size } = useTableContext();
 
-    return (
-      <StyledOverflowButton
-        onFocus={composeEventHandlers(onFocus, () => {
-          setIsFocused(true);
-        })}
-        onBlur={composeEventHandlers(onBlur, () => {
-          setIsFocused(false);
-        })}
-        size={size}
-        isFocused={typeof focused === 'undefined' ? isFocused : focused}
-        ref={ref}
-        {...other}
-      >
-        <StyledOverflowButtonIconWrapper>
-          <OverflowStrokeIcon />
-        </StyledOverflowButtonIconWrapper>
-      </StyledOverflowButton>
-    );
-  }
-);
+  return (
+    <StyledOverflowButton type="button" $size={size} ref={ref} {...props} focusInset>
+      <OverflowStrokeIcon />
+    </StyledOverflowButton>
+  );
+});
 
 OverflowButton.displayName = 'OverflowButton';
-
-OverflowButton.propTypes = {
-  isHovered: PropTypes.bool,
-  isActive: PropTypes.bool,
-  isFocused: PropTypes.bool
-};