Filter out toggle prop in PageButton to avoid Warning: Received true for a non-boolean attribute toggled message.

[mannycarrera4]

🐛 Bug Report

We get the following warning message locally and when running a dev server for PaginationButton.

Warning: Received `true` for a non-boolean attribute `toggled`.

This is coming from the following code block:

const StyledPageButton = styled(BaseButton)<{toggled?: boolean}>(
  {
    minWidth: space.l,
    width: space.l,
    borderRadius: borderRadius.circle,
    height: space.l,
  },
  ({toggled}) => {
    return {
      fontWeight: toggled ? 700 : 'normal',
    };
  }
);

The following won't work because we're styling a BaseButton

const StyledPageButton = styled(BaseButton, {
  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
})<{toggled?: boolean}>(
  {
    minWidth: space.l,
    width: space.l,
    borderRadius: borderRadius.circle,
    height: space.l,
  },
  ({toggled}) => {
    return {
      fontWeight: toggled ? 700 : 'normal',
    };
  }
);

We could update this to remove that conditional style and move it down to the render function:

import * as React from 'react';
import {
  EmotionCanvasTheme,
  styled,
  useTheme,
  createComponent,
} from '@workday/canvas-kit-react/common';
import {borderRadius, colors, space} from '@workday/canvas-kit-react/tokens';
import {BaseButton} from '@workday/canvas-kit-react/button';

import {PaginationContext} from './usePaginationModel';
import isPropValid from '@emotion/is-prop-valid';

const StyledPageButton = styled(BaseButton, {
  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
})<{toggled?: boolean}>(
  {
    minWidth: space.l,
    width: space.l,
    borderRadius: borderRadius.circle,
    height: space.l,
  }
  // ({toggled}) => {
  //   return {
  //     fontWeight: toggled ? 700 : 'normal',
  //   };
  // }
);

const getPaginationButtonColors = (toggled: boolean, theme: EmotionCanvasTheme) => {
  const {
    canvas: {
      palette: {primary: themePrimary},
    },
  } = theme;
  return {
    default: {
      background: toggled ? themePrimary.main : 'transparent',
      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
    },
    hover: {
      background: toggled ? themePrimary.main : colors.soap300,
      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
    },
    active: {
      background: toggled ? themePrimary.main : 'transparent',
      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
    },
    focus: {
      background: toggled ? themePrimary.main : 'transparent',
      label: toggled ? colors.frenchVanilla100 : colors.blackPepper400,
    },
    disabled: {
      background: colors.licorice100,
    },
  };
};

export interface PageButtonProps {
  pageNumber: number;
  children?: React.ReactNode;
  toggled?: boolean | undefined;
}

export const PageButton = createComponent('button')({
  displayName: 'Pagination.PageButton',
  Component({pageNumber, children, toggled, ...elemProps}: PageButtonProps) {
    const model = React.useContext(PaginationContext);
    const isCurrentPage = pageNumber === model.state.currentPage;
    const theme = useTheme();

    const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
      (elemProps as any).onClick?.(e);
      model.events.goTo(pageNumber);
    };

    return (
      <StyledPageButton
        aria-current={isCurrentPage ? 'page' : undefined}
        colors={getPaginationButtonColors(isCurrentPage, theme)}
        aria-pressed={undefined}
        onClick={handleClick}
        style={{fontWeight: toggled ? 700 : 'normal'}}
        {...elemProps}
      >
        {children || pageNumber}
      </StyledPageButton>
    );
  },
});

To Reproduce

Opne the Basic story for Pagination and open the console locally. This message does not appear in a prod environment.