Skip to content

Commit cc174f3

Browse files
Arthurk12Arthurk12
committed
fix: prevent props leaking to DOM
Adds transient props notation where necessary to prevent non HTML props from leaking to the DOM.
1 parent d8546d4 commit cc174f3

File tree

21 files changed

+100
-92
lines changed

21 files changed

+100
-92
lines changed

‎src/components/Button/component.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -87,10 +87,10 @@ function Button(props: ButtonProps): JSX.Element {
8787
onClick={onClick}
8888
onKeyDown={onKeyDown}
8989
{...accessibilityProps}
90-
color={color}
91-
variant={variant}
92-
size={size}
93-
layout={layout}
90+
$color={color}
91+
$variant={variant}
92+
$size={size}
93+
$layout={layout}
9494
disabled={disabled}
9595
>
9696
{icon}
@@ -108,16 +108,16 @@ function Button(props: ButtonProps): JSX.Element {
108108
const testId = dataTest || `${LAYOUTS.STACKED}-button-${id || label || 'default'}`;
109109

110110
return (
111-
<Styled.ButtonWrapper data-test={testId} layout={layout}>
111+
<Styled.ButtonWrapper data-test={testId} $layout={layout}>
112112
<Styled.Button
113113
id={id}
114114
onClick={onClick}
115115
onKeyDown={onKeyDown}
116116
{...accessibilityProps}
117-
color={color}
118-
variant={variant}
119-
size={size}
120-
layout={layout}
117+
$color={color}
118+
$variant={variant}
119+
$size={size}
120+
$layout={layout}
121121
disabled={disabled}
122122
>
123123
{!hideHelperIcon && (
@@ -126,9 +126,9 @@ function Button(props: ButtonProps): JSX.Element {
126126
// It controls whether the auxiliary button is going to have an independent hover state.
127127
{...(helperOnClick && { 'data-is-aux-icon': true })}
128128
role="button"
129-
hover={helperOnClick !== null}
130-
color={color}
131-
variant={variant}
129+
$hover={helperOnClick !== null}
130+
$color={color}
131+
$variant={variant}
132132
onClick={(event) => {
133133
if (helperOnClick) {
134134
helperOnClick(event);
@@ -157,10 +157,10 @@ function Button(props: ButtonProps): JSX.Element {
157157
onClick={onClick}
158158
onKeyDown={onKeyDown}
159159
{...accessibilityProps}
160-
color={color}
161-
variant={variant}
162-
size={size}
163-
layout={layout}
160+
$color={color}
161+
$variant={variant}
162+
$size={size}
163+
$layout={layout}
164164
disabled={disabled}
165165
>
166166
{iconStart && iconStart}

‎src/components/Button/styles.ts‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
LAYOUTS,
1111
} from './constants';
1212
import {
13-
StyledhelperIconContainer, StyledButtonProps,
13+
StyledHelperIconContainer, StyledButtonProps,
1414
StyledButtonWrapperProps,
1515
} from './type';
1616
import {
@@ -31,15 +31,15 @@ const commonButtonStyles = css<StyledButtonProps>`
3131
position: relative;
3232
transition: opacity 0.2s ease-in-out;
3333
34-
${({ size }) => {
35-
return CSS_SIZE_PROPERTIES[size]
36-
? `padding: ${CSS_SIZE_PROPERTIES[size].padding};`
34+
${({ $size }) => {
35+
return CSS_SIZE_PROPERTIES[$size]
36+
? `padding: ${CSS_SIZE_PROPERTIES[$size].padding};`
3737
: `padding: ${CSS_SIZE_PROPERTIES[DEFAULT_SIZE].padding};`;
3838
}}
3939
40-
${({ color, variant }) => {
41-
const safeColor = color || DEFAULT_COLOR;
42-
const safeVariant = variant || DEFAULT_VARIANT;
40+
${({ $color, $variant }) => {
41+
const safeColor = $color || DEFAULT_COLOR;
42+
const safeVariant = $variant || DEFAULT_VARIANT;
4343
const {
4444
color: contentColor,
4545
iconColor,
@@ -72,8 +72,8 @@ const commonButtonStyles = css<StyledButtonProps>`
7272
`;
7373
}}
7474
75-
${({ variant }) =>
76-
variant === VARIANTS.SUBTLE &&
75+
${({ $variant }) =>
76+
$variant === VARIANTS.SUBTLE &&
7777
`
7878
text-decoration: underline;
7979
`}
@@ -139,7 +139,7 @@ const defaultLayoutStyles = css`
139139
`;
140140

141141
export const ButtonWrapper = styled.div<StyledButtonWrapperProps>`
142-
${({ layout }) => layout === LAYOUTS.STACKED && `
142+
${({ $layout }) => $layout === LAYOUTS.STACKED && `
143143
width: 5rem;
144144
display: flex;
145145
flex-direction: column;
@@ -151,8 +151,8 @@ export const ButtonWrapper = styled.div<StyledButtonWrapperProps>`
151151
export const Button = styled.button<StyledButtonProps>`
152152
${commonButtonStyles}
153153
154-
${({ layout }) => {
155-
switch (layout) {
154+
${({ $layout }) => {
155+
switch ($layout) {
156156
case LAYOUTS.STACKED:
157157
return stackedLayoutStyles;
158158
case LAYOUTS.CIRCLE:
@@ -163,14 +163,14 @@ export const Button = styled.button<StyledButtonProps>`
163163
}}
164164
`;
165165

166-
export const helperIconContainer = styled.div<StyledhelperIconContainer>`
167-
${({ hover, variant, color }) => hover && `
166+
export const helperIconContainer = styled.div<StyledHelperIconContainer>`
167+
${({ $hover, $variant, $color }) => $hover && `
168168
&&:hover,
169169
&&:active,
170-
background-color: ${CSS_COLOR_PROPERTIES[variant][color].hoverBackground};
170+
background-color: ${CSS_COLOR_PROPERTIES[$variant][$color].hoverBackground};
171171
}
172172
&&:focus {
173-
outline: 1px solid ${CSS_COLOR_PROPERTIES[variant][color].outline};
173+
outline: 1px solid ${CSS_COLOR_PROPERTIES[$variant][$color].outline};
174174
}
175175
`}
176176
border-radius: 50%;

‎src/components/Button/type.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,21 +42,21 @@ type SizeType = typeof SIZE_VALUES[number];
4242
type LayoutType = typeof LAYOUT_VALUES[number];
4343
type TooltipPlacementType = typeof TOOLTIP_PLACEMENT_VALUES[number];
4444

45-
export interface StyledhelperIconContainer {
46-
hover: boolean;
47-
variant: VariantType;
48-
color: ColorType;
45+
export interface StyledHelperIconContainer {
46+
$hover: boolean;
47+
$variant: VariantType;
48+
$color: ColorType;
4949
}
5050

5151
export interface StyledButtonWrapperProps {
52-
layout: LayoutType;
52+
$layout: LayoutType;
5353
}
5454

5555
export interface StyledButtonProps {
56-
variant?: VariantType;
57-
color?: ColorType;
58-
size?: SizeType;
59-
layout?: LayoutType;
56+
$variant?: VariantType;
57+
$color?: ColorType;
58+
$size?: SizeType;
59+
$layout?: LayoutType;
6060
disabled: boolean;
6161
}
6262

‎src/components/Modal/component.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const Modal: React.FC<ModalProps> = ({
7272
{showDividers && <BBBDivider />}
7373

7474
<Styled.ModalBody
75-
allowScroll={allowScroll}
75+
$allowScroll={allowScroll}
7676
>
7777
{children}
7878
</Styled.ModalBody>
@@ -81,7 +81,7 @@ const Modal: React.FC<ModalProps> = ({
8181
{showDividers && (<BBBDivider />)}
8282

8383
<Styled.ModalFooter
84-
stickyFooter={stickyFooter}
84+
$stickyFooter={stickyFooter}
8585
>
8686
{footerContent}
8787
</Styled.ModalFooter>

‎src/components/Modal/styles.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const CloseButton = styled.button`
5555

5656
export const ModalBody = styled.div<StyledModalBodyProps>`
5757
flex-grow: 1;
58-
overflow-y: ${({ allowScroll }) => allowScroll ? 'auto' : 'hidden'};
58+
overflow-y: ${({ $allowScroll }) => $allowScroll ? 'auto' : 'hidden'};
5959
overflow-x: hidden;
6060
display: flex;
6161
flex-direction: column;
@@ -68,4 +68,12 @@ export const ModalFooter = styled.div<StyledModalFooterProps>`
6868
display: flex;
6969
justify-content: flex-end;
7070
gap: ${spacingMedium};
71+
72+
${({ $stickyFooter }) =>
73+
$stickyFooter &&
74+
`
75+
position: sticky;
76+
bottom: 0;
77+
background-color: #fff;
78+
`}
7179
`;

‎src/components/Modal/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
22

33
export interface StyledModalBodyProps {
4-
allowScroll: boolean;
4+
$allowScroll: boolean;
55
}
66

77
export interface StyledModalFooterProps {
8-
stickyFooter: boolean;
8+
$stickyFooter: boolean;
99
}
1010

1111
export interface ModalProps {

‎src/components/Navigation/component.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function Navigation ({
4444
data-test={dataTest}
4545
>
4646
<Styled.IconTextWrapper>
47-
<Styled.IconWrapper isCustomIcon={isCustomIcon}>
47+
<Styled.IconWrapper $isCustomIcon={isCustomIcon}>
4848
{iconToRender}
4949
</Styled.IconWrapper>
5050
<BBBTypography variant="default">

‎src/components/Navigation/styles.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const IconWrapper = styled.div<StyledIconWrapper>`
3333
justify-content: center;
3434
color: ${colorBrand1};
3535
36-
${({ isCustomIcon }) => !isCustomIcon && css`
36+
${({ $isCustomIcon }) => !$isCustomIcon && css`
3737
transform: rotate(90deg);
3838
[dir="rtl"] & {
3939
transform: rotate(-90deg);

‎src/components/Navigation/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
export interface StyledIconWrapper {
4-
isCustomIcon: boolean;
4+
$isCustomIcon: boolean;
55
}
66

77
export interface NavigationProps {

‎src/components/Spinner/component.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,15 @@ const Spinner: React.FC<SpinnerProps> = ({
2525
animate = false,
2626
}) => {
2727
return (
28-
<Styled.Wrapper size={size} role="progressbar" aria-label="Loading" aria-busy={!animate}>
29-
<Styled.StyledSvg viewBox="0 0 50 50" animate={!animate} focusable="false" aria-hidden="true">
28+
<Styled.Wrapper $size={size} role="progressbar" aria-label="Loading" aria-busy={!animate}>
29+
<Styled.StyledSvg viewBox="0 0 50 50" $animate={!animate} focusable="false" aria-hidden="true">
3030
<Styled.Path
3131
className="path"
3232
cx="25"
3333
cy="25"
3434
r="20"
35-
animate={!animate}
36-
strokeWidth={strokeWidth}
35+
$animate={!animate}
36+
$strokeWidth={strokeWidth}
3737
/>
3838
</Styled.StyledSvg>
3939
</Styled.Wrapper>

0 commit comments

Comments
 (0)