Skip to content

Fix styled-components props to prevent React DOM warnings #481

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 15 commits into
base: develop
Choose a base branch
from
+901 −642
Draft

Fix styled-components props to prevent React DOM warnings #481

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
1eb2bc7
Initial plan
Copilot Sep 23, 2025
f4ed22f
Fix styled components props in Tabs, Menu, and Input components
Copilot Sep 23, 2025
406ded1
Fix styled components props in Tabs list/index and Checkbox components
Copilot Sep 23, 2025
4382d6a
Fix styled components props in Spacer component and provide final report
Copilot Sep 23, 2025
d15f3e5
Remove width prop from StyledReqoreTabsList in ReqoreTabsList component
Sep 23, 2025
af9491f
Fix missing $ prefix for parentHasGradient and remove unused props fr…
Copilot Sep 23, 2025
4367736
Fix styled components props in Textarea, Layout, Breadcrumbs, and Col…
Copilot Sep 23, 2025
fcf0468
Fix styled components props in Comment, CommentFeed, Navbar, and Colu…
Copilot Sep 23, 2025
aea289e
Fix styled components props in Notifications and Tree components
Copilot Sep 23, 2025
9423102
Fix styled components props in Tabs content and Tag group components
Copilot Sep 23, 2025
9ede684
Fix styled components props in main Table component
Copilot Sep 23, 2025
4f84e03
Fix styled components props in Message, Notifications, Panel, and Tag…
Sep 24, 2025
28af26c
Refactor styled components to use transient props in Collection, Inpu…
Sep 24, 2025
f92d43f
Refactor styled components to prevent forwarding props in Breadcrumbs…
Sep 25, 2025
0b76156
Refactor styled components in Breadcrumbs, Notifications, and Table h…
Sep 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 38 additions & 30 deletions src/components/Checkbox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,12 @@ export interface IReqoreCheckboxProps

export interface IReqoreCheckboxStyle extends IReqoreCheckboxProps {
theme: IReqoreTheme;
$size?: TSizes;
$fluid?: boolean;
$fixed?: boolean;
$disabled?: boolean;
$readOnly?: boolean;
$checked?: boolean;
}

const StyledSwitchToggle = styled.div`
Expand Down Expand Up @@ -101,10 +107,10 @@ const StyledSwitch = styled(StyledEffect)<IReqoreCheckboxStyle>`
justify-content: center;
flex-shrink: 0;

height: ${({ size }) => SWITCH_SIZE_TO_PX[size]}px;
min-width: ${({ size }) => SWITCH_SIZE_TO_PX[size] * 1.8}px;
height: ${({ $size }) => SWITCH_SIZE_TO_PX[$size]}px;
min-width: ${({ $size }) => SWITCH_SIZE_TO_PX[$size] * 1.8}px;

border: 1px solid ${({ theme, checked }) => changeLightness(theme.main, checked ? 0.35 : 0.2)};
border: 1px solid ${({ theme, $checked }) => changeLightness(theme.main, $checked ? 0.35 : 0.2)};
border-radius: 50px;

background-color: ${({ theme }) => rgba(changeLightness(theme.main, 0.3), 0.1)};
Expand All @@ -121,24 +127,24 @@ const StyledSwitch = styled(StyledEffect)<IReqoreCheckboxStyle>`
`;

const StyledSwitchTextWrapper = styled(StyledTextEffect)`
margin: 0 ${({ size }) => PADDING_FROM_SIZE[size]}px;
margin: 0 ${({ $size }) => PADDING_FROM_SIZE[$size]}px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
min-width: ${({ size }) => SWITCH_SIZE_TO_PX[size]}px;
min-width: ${({ $size }) => SWITCH_SIZE_TO_PX[$size]}px;
`;

const StyledOnSwitchText = styled(StyledSwitchTextWrapper)<IReqoreCheckboxStyle>`
color: ${({ theme, checked, parentHasGradient }) =>
color: ${({ theme, $checked, parentHasGradient }) =>
!parentHasGradient &&
getReadableColorFrom(checked ? changeLightness(theme.main, 0.25) : theme.originalMain)};
getReadableColorFrom($checked ? changeLightness(theme.main, 0.25) : theme.originalMain)};
`;

const StyledOffSwitchText = styled(StyledSwitchTextWrapper)<IReqoreCheckboxStyle>`
color: ${({ theme, checked, parentHasGradient }) =>
color: ${({ theme, $checked, parentHasGradient }) =>
!parentHasGradient &&
getReadableColorFrom(checked ? theme.originalMain : changeLightness(theme.main, 0.2))};
getReadableColorFrom($checked ? theme.originalMain : changeLightness(theme.main, 0.2))};
`;

const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
Expand All @@ -148,33 +154,33 @@ const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
padding: 0px;
transition: all 0.2s ease-out;

height: ${({ size }) => SIZE_TO_PX[size]}px;
font-size: ${({ size }) => CONTROL_TEXT_FROM_SIZE[size]}px;
height: ${({ $size }) => SIZE_TO_PX[$size]}px;
font-size: ${({ $size }) => CONTROL_TEXT_FROM_SIZE[$size]}px;

max-width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 0 auto')};
max-width: ${({ $fluid, $fixed }) => ($fluid && !$fixed ? '100%' : undefined)};
flex: ${({ $fluid, $fixed }) => ($fixed ? '0 auto' : $fluid ? '1 auto' : '0 0 auto')};

${({ disabled }) =>
disabled &&
${({ $disabled }) =>
$disabled &&
css`
${DisabledElement};
`}

${({ readOnly }) =>
readOnly &&
${({ $readOnly }) =>
$readOnly &&
css`
${ReadOnlyElement};
`}

color: ${({ theme, checked }) =>
getReadableColor(theme, undefined, undefined, !checked, theme.originalMain)};
color: ${({ theme, $checked }) =>
getReadableColor(theme, undefined, undefined, !$checked, theme.originalMain)};

&:hover {
color: ${({ theme }) =>
getReadableColor(theme, undefined, undefined, false, theme.originalMain)};

> ${StyledSwitch} {
border-color: ${({ theme, checked }) => changeLightness(theme.main, checked ? 0.4 : 0.35)};
border-color: ${({ theme, $checked }) => changeLightness(theme.main, $checked ? 0.4 : 0.35)};
}
}
`;
Expand Down Expand Up @@ -232,12 +238,14 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
{
...rest,
theme,
size,
tooltip,
disabled,
checked,
readOnly,
className: `${className || ''} reqore-checkbox reqore-control`,
$size: size,
$disabled: disabled,
$checked: checked,
$readOnly: readOnly,
$fluid: rest.fluid,
$fixed: rest.fixed,
},
StyledCheckbox,
ref
Expand Down Expand Up @@ -267,10 +275,10 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
) : null}
{asSwitch ? (
<StyledSwitch
size={size}
$size={size}
tabIndex='0'
labelPosition={labelPosition}
checked={checked}
$checked={checked}
theme={theme}
as='div'
effect={
Expand All @@ -284,9 +292,9 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
{offText || offText === 0 ? (
<StyledOffSwitchText
ref={offRef}
size={size}
$size={size}
theme={theme}
checked={checked}
$checked={checked}
parentHasGradient={!!effect?.gradient}
Copy link
Member

@Foxhoundn Foxhoundn Sep 23, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot It's missing here for labelPosition, effect and parentHasGradient

Copy link
Author

Copilot AI Sep 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in commit af9491f. Added $ prefix for parentHasGradient prop and removed unused labelPosition prop from StyledSwitch component. The effect prop is kept as it's used by the styled-components system for the interactive styling.

effect={
{
Expand All @@ -313,9 +321,9 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
{onText || onText === 0 ? (
<StyledOnSwitchText
ref={onRef}
size={size}
$size={size}
theme={theme}
checked={checked}
$checked={checked}
parentHasGradient={!!effect?.gradient}
effect={
{
Expand Down
60 changes: 34 additions & 26 deletions src/components/Input/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,25 +74,33 @@ export interface IReqoreInputProps

export interface IReqoreInputStyle extends IReqoreInputProps {
theme: IReqoreTheme;
_size?: TSizes;
clearable?: boolean;
hasIcon?: boolean;
$_size?: TSizes;
$clearable?: boolean;
$hasIcon?: boolean;
$fluid?: boolean;
$fixed?: boolean;
$flat?: boolean;
$minimal?: boolean;
$readOnly?: boolean;
$disabled?: boolean;
$pill?: boolean;
$rounded?: boolean;
}

export const StyledInputWrapper = styled.div<IReqoreInputStyle>`
height: ${({ _size }) => SIZE_TO_PX[_size]}px;
height: ${({ $_size }) => SIZE_TO_PX[$_size]}px;
width: ${({ width }) => (width ? `${width}px` : 'auto')};
max-width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
max-width: ${({ $fluid, $fixed }) => ($fluid && !$fixed ? '100%' : undefined)};
min-width: 60px;
flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 1 auto')};
align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
font-size: ${({ _size }) => CONTROL_TEXT_FROM_SIZE[_size]}px;
flex: ${({ $fluid, $fixed }) => ($fixed ? '0 auto' : $fluid ? '1 auto' : '0 1 auto')};
align-self: ${({ $fixed, $fluid }) => ($fixed ? 'flex-start' : $fluid ? 'stretch' : undefined)};
font-size: ${({ $_size }) => CONTROL_TEXT_FROM_SIZE[$_size]}px;
position: relative;
overflow: hidden;
border-radius: ${({ minimal, rounded, _size, pill }) =>
minimal || rounded === false
border-radius: ${({ $minimal, $rounded, $_size, $pill }) =>
$minimal || $rounded === false
? 0
: RADIUS_FROM_SIZE[_size] * (pill ? PILL_RADIUS_MODIFIER : 1)}px;
: RADIUS_FROM_SIZE[$_size] * ($pill ? PILL_RADIUS_MODIFIER : 1)}px;

${InactiveIconScale}

Expand All @@ -110,8 +118,8 @@ export const StyledInputWrapper = styled.div<IReqoreInputStyle>`

const StyledIconWrapper = styled.div<IReqoreInputStyle>`
position: absolute;
height: ${({ _size }) => SIZE_TO_PX[_size]}px;
width: ${({ _size }) => SIZE_TO_PX[_size]}px;
height: ${({ $_size }) => SIZE_TO_PX[$_size]}px;
width: ${({ $_size }) => SIZE_TO_PX[$_size]}px;
right: ${({ position }) => (position === 'right' ? 0 : undefined)};
top: 0;
display: flex;
Expand Down Expand Up @@ -238,23 +246,23 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
<ReqoreTooltipComponent
Component={StyledInputWrapper}
className='reqore-control-wrapper'
fluid={fluid}
fixed={fixed}
width={width}
flat={flat}
theme={theme}
rounded={rounded}
minimal={minimal}
_size={size}
ref={targetRef}
readOnly={readOnly || loading}
disabled={rest.disabled}
style={wrapperStyle}
pill={pill}
tooltip={rest.tooltip}
$fluid={fluid}
$fixed={fixed}
$flat={flat}
$rounded={rounded}
$minimal={minimal}
$_size={size}
$readOnly={readOnly || loading}
$disabled={rest.disabled}
$pill={pill}
style={wrapperStyle}
ref={targetRef}
>
{hasLeftIcon && (
<StyledIconWrapper _size={size}>
<StyledIconWrapper $_size={size}>
<ReqoreIcon
size={size}
color={iconColor}
Expand Down Expand Up @@ -304,7 +312,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
show={rest?.value && rest.value !== '' ? true : false}
/>
{hasRightIcon && (
<StyledIconWrapper _size={size} position='right'>
<StyledIconWrapper $_size={size} position='right'>
<ReqoreIcon
size={size}
icon={rightIcon}
Expand Down
49 changes: 31 additions & 18 deletions src/components/Menu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,38 +45,46 @@ export interface IReqoreMenuProps

export interface IReqoreMenuStyle extends IReqoreMenuProps {
theme: IReqoreTheme;
$padded?: boolean;
$size?: string;
$transparent?: boolean;
$rounded?: boolean;
$position?: 'left' | 'right';
$isResizableLeft?: boolean;
$isResizableRight?: boolean;
$showResizableBorder?: boolean;
}

const StyledReqoreMenu = styled.div<IReqoreMenuStyle>`
width: ${({ width }) => width || undefined};
min-width: ${({ width }) => (width ? undefined : '160px')};
padding: ${({ padded = true, _size }) =>
padded ? `${HALF_PADDING_FROM_SIZE[_size]}px` : undefined};
padding: ${({ $padded = true, $size }) =>
$padded ? `${HALF_PADDING_FROM_SIZE[$size]}px` : undefined};
max-height: ${({ maxHeight }) => maxHeight || undefined};
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-flow: column nowrap;

background-color: ${({ theme, transparent }) =>
transparent ? 'transparent' : changeDarkness(getMainBackgroundColor(theme), 0.03)};
border-radius: ${({ rounded, _size }) => (rounded ? `${RADIUS_FROM_SIZE[_size]}px` : `0`)};
background-color: ${({ theme, $transparent }) =>
$transparent ? 'transparent' : changeDarkness(getMainBackgroundColor(theme), 0.03)};
border-radius: ${({ $rounded, $size }) => ($rounded ? `${RADIUS_FROM_SIZE[$size]}px` : `0`)};

${({ theme, position, _size, padded, isResizableLeft, showResizableBorder }) =>
position === 'right' || (isResizableLeft && showResizableBorder)
${({ theme, $position, $size, $padded, $isResizableLeft, $showResizableBorder }) =>
$position === 'right' || ($isResizableLeft && $showResizableBorder)
? css`
border-left: 1px ${isResizableLeft && showResizableBorder ? 'dashed' : 'solid'}
border-left: 1px ${$isResizableLeft && $showResizableBorder ? 'dashed' : 'solid'}
${changeLightness(theme.main, 0.05)};
padding-left: ${!padded ? `${HALF_PADDING_FROM_SIZE[_size]}px` : undefined};
padding-left: ${!$padded ? `${HALF_PADDING_FROM_SIZE[$size]}px` : undefined};
`
: undefined}

${({ theme, position, _size, padded, isResizableRight, showResizableBorder }) =>
position === 'left' || (isResizableRight && showResizableBorder)
${({ theme, $position, $size, $padded, $isResizableRight, $showResizableBorder }) =>
$position === 'left' || ($isResizableRight && $showResizableBorder)
? css`
border-right: 1px ${isResizableRight && showResizableBorder ? 'dashed' : 'solid'}
border-right: 1px ${$isResizableRight && $showResizableBorder ? 'dashed' : 'solid'}
${changeLightness(theme.main, 0.05)};
padding-right: ${!padded ? `${HALF_PADDING_FROM_SIZE[_size]}px` : undefined};
padding-right: ${!$padded ? `${HALF_PADDING_FROM_SIZE[$size]}px` : undefined};
`
: undefined}
`;
Expand Down Expand Up @@ -122,11 +130,16 @@ const ReqoreMenu = memo(
{...rest}
{...resizable}
as={!!resizable ? Resizable : 'div'}
isResizableRight={resizable?.enable?.right}
isResizableLeft={resizable?.enable?.left}
flat={flat}
position={position}
_size={size}
width={rest.width}
maxHeight={rest.maxHeight}
$isResizableRight={resizable?.enable?.right}
$isResizableLeft={resizable?.enable?.left}
$position={position}
$size={size}
$padded={rest.padded}
$transparent={rest.transparent}
$rounded={rest.rounded}
$showResizableBorder={rest.showResizableBorder}
className={`${rest.className || ''} reqore-menu`}
theme={theme}
ref={(curRef) => {
Expand Down
Loading
Loading