Skip to content

Commit dc82574

Browse files
limehawklimehawk
committed
refactor: use transient props ($-prefixed) for styled-components v6+
Convert all styled-component prop names to $-prefixed transient props to prevent DOM attribute leaking in styled-components v6. This is a styled-components best practice that ensures custom props are consumed by styled-components and never forwarded to the underlying DOM element. Components updated: Anchor, AppBar, Avatar, Button, ColorInput, Counter/Digit, DatePicker, Frame, GroupBox, Handle, Hourglass, NumberInput, ProgressBar, ScrollView, Select, Separator, Slider, Tabs, TextInput, Toolbar, Tooltip, TreeView, Window, WindowHeader. Also adds forwardRef to Handle and Separator which were previously bare styled-components without ref forwarding. Closes upstream react95-io#398, closes upstream react95-io#390.
1 parent 4c5ca69 commit dc82574

94 files changed

Lines changed: 824 additions & 733 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎dist/Anchor/Anchor.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
1313
const StyledAnchor = styled__default["default"].a`
1414
color: ${({ theme }) => theme.anchor};
1515
font-size: inherit;
16-
text-decoration: ${({ underline }) => underline ? "underline" : "none"};
16+
text-decoration: ${({ $underline }) => $underline ? "underline" : "none"};
1717
&:visited {
1818
color: ${({ theme }) => theme.anchorVisited};
1919
}
2020
`;
2121
const Anchor = React.memo(React.forwardRef(({ children, underline = true, ...otherProps }, ref) => {
22-
return React__default["default"].createElement(StyledAnchor, { ref, underline, ...otherProps }, children);
22+
return React__default["default"].createElement(StyledAnchor, { ref, "$underline": underline, ...otherProps }, children);
2323
}));
2424
Anchor.displayName = "Anchor";
2525

‎dist/Anchor/Anchor.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import styled from 'styled-components';
44
const StyledAnchor = styled.a`
55
color: ${({ theme }) => theme.anchor};
66
font-size: inherit;
7-
text-decoration: ${({ underline }) => underline ? "underline" : "none"};
7+
text-decoration: ${({ $underline }) => $underline ? "underline" : "none"};
88
&:visited {
99
color: ${({ theme }) => theme.anchorVisited};
1010
}
1111
`;
1212
const Anchor = memo(forwardRef(({ children, underline = true, ...otherProps }, ref) => {
13-
return React__default.createElement(StyledAnchor, { ref, underline, ...otherProps }, children);
13+
return React__default.createElement(StyledAnchor, { ref, "$underline": underline, ...otherProps }, children);
1414
}));
1515
Anchor.displayName = "Anchor";
1616

‎dist/AppBar/AppBar.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const StyledAppBar = styled__default["default"].header`
1717
1818
position: ${(props) => {
1919
var _a;
20-
return (_a = props.position) !== null && _a !== void 0 ? _a : props.fixed ? "fixed" : "absolute";
20+
return (_a = props.$position) !== null && _a !== void 0 ? _a : props.$fixed ? "fixed" : "absolute";
2121
}};
2222
top: 0;
2323
right: 0;
@@ -27,7 +27,7 @@ const StyledAppBar = styled__default["default"].header`
2727
width: 100%;
2828
`;
2929
const AppBar = React.forwardRef(({ children, fixed = true, position = "fixed", ...otherProps }, ref) => {
30-
return React__default["default"].createElement(StyledAppBar, { fixed, position: fixed !== false ? position : void 0, ref, ...otherProps }, children);
30+
return React__default["default"].createElement(StyledAppBar, { "$fixed": fixed, "$position": fixed !== false ? position : void 0, ref, ...otherProps }, children);
3131
});
3232
AppBar.displayName = "AppBar";
3333

‎dist/AppBar/AppBar.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const StyledAppBar = styled.header`
88
99
position: ${(props) => {
1010
var _a;
11-
return (_a = props.position) !== null && _a !== void 0 ? _a : props.fixed ? "fixed" : "absolute";
11+
return (_a = props.$position) !== null && _a !== void 0 ? _a : props.$fixed ? "fixed" : "absolute";
1212
}};
1313
top: 0;
1414
right: 0;
@@ -18,7 +18,7 @@ const StyledAppBar = styled.header`
1818
width: 100%;
1919
`;
2020
const AppBar = forwardRef(({ children, fixed = true, position = "fixed", ...otherProps }, ref) => {
21-
return React__default.createElement(StyledAppBar, { fixed, position: fixed !== false ? position : void 0, ref, ...otherProps }, children);
21+
return React__default.createElement(StyledAppBar, { "$fixed": fixed, "$position": fixed !== false ? position : void 0, ref, ...otherProps }, children);
2222
});
2323
AppBar.displayName = "AppBar";
2424

‎dist/Avatar/Avatar.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,20 @@ const StyledAvatar = styled__default["default"].div`
1515
display: inline-block;
1616
box-sizing: border-box;
1717
object-fit: contain;
18-
${({ size }) => `
19-
height: ${size};
20-
width: ${size};
18+
${({ $size }) => `
19+
height: ${$size};
20+
width: ${$size};
2121
`}
22-
border-radius: ${({ square }) => square ? 0 : "50%"};
22+
border-radius: ${({ $square }) => $square ? 0 : "50%"};
2323
overflow: hidden;
24-
${({ noBorder, theme }) => !noBorder && `
24+
${({ $noBorder, theme }) => !$noBorder && `
2525
border-top: 2px solid ${theme.borderDark};
2626
border-left: 2px solid ${theme.borderDark};
2727
border-bottom: 2px solid ${theme.borderLightest};
2828
border-right: 2px solid ${theme.borderLightest};
2929
background: ${theme.material};
3030
`}
31-
${({ src }) => !src && `
31+
${({ $src }) => !$src && `
3232
display: flex;
3333
align-items: center;
3434
justify-content: space-around;
@@ -43,7 +43,7 @@ const StyledAvatarImg = styled__default["default"].img`
4343
height: 100%;
4444
`;
4545
const Avatar = React.forwardRef(({ alt = "", children, noBorder = false, size = 35, square = false, src, ...otherProps }, ref) => {
46-
return React__default["default"].createElement(StyledAvatar, { noBorder, ref, size: index.getSize(size), square, src, ...otherProps }, src ? React__default["default"].createElement(StyledAvatarImg, { src, alt }) : children);
46+
return React__default["default"].createElement(StyledAvatar, { "$noBorder": noBorder, ref, "$size": index.getSize(size), "$square": square, "$src": src, ...otherProps }, src ? React__default["default"].createElement(StyledAvatarImg, { src, alt }) : children);
4747
});
4848
Avatar.displayName = "Avatar";
4949

‎dist/Avatar/Avatar.mjs‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,20 @@ const StyledAvatar = styled.div`
66
display: inline-block;
77
box-sizing: border-box;
88
object-fit: contain;
9-
${({ size }) => `
10-
height: ${size};
11-
width: ${size};
9+
${({ $size }) => `
10+
height: ${$size};
11+
width: ${$size};
1212
`}
13-
border-radius: ${({ square }) => square ? 0 : "50%"};
13+
border-radius: ${({ $square }) => $square ? 0 : "50%"};
1414
overflow: hidden;
15-
${({ noBorder, theme }) => !noBorder && `
15+
${({ $noBorder, theme }) => !$noBorder && `
1616
border-top: 2px solid ${theme.borderDark};
1717
border-left: 2px solid ${theme.borderDark};
1818
border-bottom: 2px solid ${theme.borderLightest};
1919
border-right: 2px solid ${theme.borderLightest};
2020
background: ${theme.material};
2121
`}
22-
${({ src }) => !src && `
22+
${({ $src }) => !$src && `
2323
display: flex;
2424
align-items: center;
2525
justify-content: space-around;
@@ -34,7 +34,7 @@ const StyledAvatarImg = styled.img`
3434
height: 100%;
3535
`;
3636
const Avatar = forwardRef(({ alt = "", children, noBorder = false, size = 35, square = false, src, ...otherProps }, ref) => {
37-
return React__default.createElement(StyledAvatar, { noBorder, ref, size: getSize(size), square, src, ...otherProps }, src ? React__default.createElement(StyledAvatarImg, { src, alt }) : children);
37+
return React__default.createElement(StyledAvatar, { "$noBorder": noBorder, ref, "$size": getSize(size), "$square": square, "$src": src, ...otherProps }, src ? React__default.createElement(StyledAvatarImg, { src, alt }) : children);
3838
});
3939
Avatar.displayName = "Avatar";
4040

‎dist/Button/Button.d.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,15 @@ type ButtonProps = {
1717
/** @deprecated Use `thin` */
1818
variant?: 'menu';
1919
}) & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'onClick' | 'onTouchStart' | 'type'> & CommonStyledProps;
20-
type StyledButtonProps = Pick<ButtonProps, 'active' | 'disabled' | 'fullWidth' | 'primary' | 'size' | 'square' | 'variant'>;
20+
type StyledButtonProps = {
21+
$active?: boolean;
22+
$disabled?: boolean;
23+
$fullWidth?: boolean;
24+
$primary?: boolean;
25+
$size?: Sizes;
26+
$square?: boolean;
27+
$variant?: 'default' | 'raised' | 'flat' | 'thin' | 'menu';
28+
};
2129
export declare const StyledButton: import("styled-components").StyledComponent<"button", any, StyledButtonProps, never>;
2230
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
2331
export { Button, ButtonProps };

‎dist/Button/Button.js‎

Lines changed: 59 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ const commonButtonStyles = styled.css`
1818
display: inline-flex;
1919
align-items: center;
2020
justify-content: center;
21-
height: ${({ size = "md" }) => system.blockSizes[size]};
22-
width: ${({ fullWidth, size = "md", square }) => fullWidth ? "100%" : square ? system.blockSizes[size] : "auto"};
23-
padding: ${({ square }) => square ? 0 : `0 10px`};
21+
height: ${({ $size = "md" }) => system.blockSizes[$size]};
22+
width: ${({ $fullWidth, $size = "md", $square }) => $fullWidth ? "100%" : $square ? system.blockSizes[$size] : "auto"};
23+
padding: ${({ $square }) => $square ? 0 : `0 10px`};
2424
font-size: 1rem;
2525
user-select: none;
2626
&:active {
27-
padding-top: ${({ disabled }) => !disabled && "2px"};
27+
padding-top: ${({ $disabled }) => !$disabled && "2px"};
2828
}
29-
padding-top: ${({ active, disabled }) => active && !disabled && "2px"};
29+
padding-top: ${({ $active, $disabled }) => $active && !$disabled && "2px"};
3030
&:after {
3131
content: '';
3232
position: absolute;
@@ -42,9 +42,9 @@ const commonButtonStyles = styled.css`
4242
font-family: inherit;
4343
`;
4444
const StyledButton = styled__default["default"].button`
45-
${({ active, disabled, primary, theme, variant }) => variant === "flat" ? styled.css`
45+
${({ $active, $disabled, $primary, theme, $variant }) => $variant === "flat" ? styled.css`
4646
${index.createFlatBoxStyles()}
47-
${primary ? `
47+
${$primary ? `
4848
border: 2px solid ${theme.checkmark};
4949
outline: 2px solid ${theme.flatDark};
5050
outline-offset: -4px;
@@ -54,74 +54,74 @@ const StyledButton = styled__default["default"].button`
5454
outline-offset: -4px;
5555
`}
5656
&:focus:after, &:active:after {
57-
${!active && !disabled && index.focusOutline}
57+
${!$active && !$disabled && index.focusOutline}
5858
outline-offset: -4px;
5959
}
60-
` : variant === "menu" || variant === "thin" ? styled.css`
61-
${index.createBoxStyles()};
62-
border: 2px solid transparent;
63-
&:hover,
64-
&:focus {
65-
${!disabled && !active && index.createBorderStyles({ style: "buttonThin" })}
66-
}
67-
&:active {
68-
${!disabled && index.createBorderStyles({ style: "buttonThinPressed" })}
69-
}
70-
${active && index.createBorderStyles({ style: "buttonThinPressed" })}
71-
${disabled && index.createDisabledTextStyles()}
72-
` : styled.css`
73-
${index.createBoxStyles()};
74-
border: none;
75-
${disabled && index.createDisabledTextStyles()}
76-
${active ? index.createHatchedBackground({
60+
` : $variant === "menu" || $variant === "thin" ? styled.css`
61+
${index.createBoxStyles()};
62+
border: 2px solid transparent;
63+
&:hover,
64+
&:focus {
65+
${!$disabled && !$active && index.createBorderStyles({ style: "buttonThin" })}
66+
}
67+
&:active {
68+
${!$disabled && index.createBorderStyles({ style: "buttonThinPressed" })}
69+
}
70+
${$active && index.createBorderStyles({ style: "buttonThinPressed" })}
71+
${$disabled && index.createDisabledTextStyles()}
72+
` : styled.css`
73+
${index.createBoxStyles()};
74+
border: none;
75+
${$disabled && index.createDisabledTextStyles()}
76+
${$active ? index.createHatchedBackground({
7777
mainColor: theme.material,
7878
secondaryColor: theme.borderLightest
7979
}) : ""}
8080
&:before {
81-
box-sizing: border-box;
82-
content: '';
83-
position: absolute;
84-
${primary ? styled.css`
85-
left: 2px;
86-
top: 2px;
87-
width: calc(100% - 4px);
88-
height: calc(100% - 4px);
89-
outline: 2px solid ${theme.borderDarkest};
90-
` : styled.css`
91-
left: 0;
92-
top: 0;
93-
width: 100%;
94-
height: 100%;
95-
`}
81+
box-sizing: border-box;
82+
content: '';
83+
position: absolute;
84+
${$primary ? styled.css`
85+
left: 2px;
86+
top: 2px;
87+
width: calc(100% - 4px);
88+
height: calc(100% - 4px);
89+
outline: 2px solid ${theme.borderDarkest};
90+
` : styled.css`
91+
left: 0;
92+
top: 0;
93+
width: 100%;
94+
height: 100%;
95+
`}
9696
97-
${active ? index.createBorderStyles({
98-
style: variant === "raised" ? "window" : "button",
97+
${$active ? index.createBorderStyles({
98+
style: $variant === "raised" ? "window" : "button",
9999
invert: true
100100
}) : index.createBorderStyles({
101-
style: variant === "raised" ? "window" : "button",
101+
style: $variant === "raised" ? "window" : "button",
102102
invert: false
103103
})}
104-
}
105-
&:active:before {
106-
${!disabled && index.createBorderStyles({
107-
style: variant === "raised" ? "window" : "button",
104+
}
105+
&:active:before {
106+
${!$disabled && index.createBorderStyles({
107+
style: $variant === "raised" ? "window" : "button",
108108
invert: true
109109
})}
110-
}
111-
&:focus:after,
112-
&:active:after {
113-
${!disabled && index.focusOutline}
114-
outline-offset: -8px;
115-
}
116-
&:active:focus:after,
117-
&:active:after {
118-
top: ${active ? "0" : "1px"};
119-
}
120-
`}
110+
}
111+
&:focus:after,
112+
&:active:after {
113+
${!$disabled && index.focusOutline}
114+
outline-offset: -8px;
115+
}
116+
&:active:focus:after,
117+
&:active:after {
118+
top: ${$active ? "0" : "1px"};
119+
}
120+
`}
121121
${commonButtonStyles}
122122
`;
123123
const Button = React.forwardRef(({ onClick, disabled = false, children, type = "button", fullWidth = false, size = "md", square = false, active = false, onTouchStart = index$1.noOp, primary = false, variant = "default", ...otherProps }, ref) => {
124-
return React__default["default"].createElement(StyledButton, { active, disabled, "$disabled": disabled, fullWidth, onClick: disabled ? void 0 : onClick, onTouchStart, primary, ref, size, square, type, variant, ...otherProps }, children);
124+
return React__default["default"].createElement(StyledButton, { "$active": active, disabled, "$disabled": disabled, "$fullWidth": fullWidth, onClick: disabled ? void 0 : onClick, onTouchStart, "$primary": primary, ref, "$size": size, "$square": square, type, "$variant": variant, ...otherProps }, children);
125125
});
126126
Button.displayName = "Button";
127127

0 commit comments

Comments
 (0)