Filter out `toggle` prop in PageButton to avoid Warning: Received `true` for a non-boolean attribute `toggled` message.
Opened this issue ยท 0 comments
mannycarrera4 commented
๐ 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.