Skip to content

Commit 15ca528

Browse files
OpenStaxClaudeRoyEJohnson
OpenStaxClaude
authored and
RoyEJohnson
committed
Address PR review comments
- Fix Radio.tsx labelAs prop to properly render different element types using React.createElement - Remove tooltipText from DOM props spreading to avoid React warnings - Fix TypeScript CSS custom property type errors by casting to unknown first - Update test snapshots for all affected components Fixes: - Radio labelAs prop now works correctly instead of setting invalid DOM attribute - TreeCheckbox, Checkbox, and Radio now use proper TypeScript type casting for CSS variables - All 214 tests passing revert lock files Update TreeCheckbox.tsx Update index.spec.tsx.snap
1 parent 4778e47 commit 15ca528

5 files changed

Lines changed: 51 additions & 33 deletions

File tree

‎src/components/Checkbox/Checkbox.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const Checkbox = ({ children, disabled, variant = 'primary', bold = false
3131
'--checkbox-color': variantStyles.color,
3232
'--checkbox-disabled-color': colors.palette.neutralLight,
3333
...labelProps?.style
34-
} as React.CSSProperties;
34+
} as unknown as React.CSSProperties;
3535

3636
// Merge input className
3737
const inputClassName = classNames(
@@ -51,7 +51,7 @@ export const Checkbox = ({ children, disabled, variant = 'primary', bold = false
5151
'--checkbox-opacity': disabled ? '0.4' : '1',
5252
'--checkbox-disabled-border': `1px solid ${colors.palette.pale}`,
5353
...style
54-
} as React.CSSProperties;
54+
} as unknown as React.CSSProperties;
5555

5656
return (
5757
<label {...labelProps} className={labelClassName} style={labelStyle}>

‎src/components/Radio.tsx‎

Lines changed: 46 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import "./Radio.css";
1111
type RadioProps = PropsWithChildren<
1212
Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>>;
1313

14-
export const Radio = ({ children, disabled, labelAs, className, style, ...props }: RadioProps & {
14+
export const Radio = ({ children, disabled, labelAs, className, style, tooltipText, ...props }: RadioProps & {
1515
tooltipText?: string;
1616
labelAs?: string;
1717
}) => {
@@ -30,7 +30,7 @@ export const Radio = ({ children, disabled, labelAs, className, style, ...props
3030
const labelStyle = {
3131
'--radio-label-color': 'inherit',
3232
'--radio-disabled-color': colors.palette.pale,
33-
} as React.CSSProperties;
33+
} as unknown as React.CSSProperties;
3434

3535
// Input className
3636
const inputClassName = classNames(
@@ -48,35 +48,54 @@ export const Radio = ({ children, disabled, labelAs, className, style, ...props
4848
'--radio-opacity': disabled ? '0.4' : '1',
4949
'--radio-checked-opacity': disabled ? '0' : '1',
5050
...style
51-
} as React.CSSProperties;
51+
} as unknown as React.CSSProperties;
5252

53-
return props.tooltipText
53+
const labelElement = labelAs || 'label';
54+
55+
const labelContent = (
56+
<>
57+
<input
58+
type="radio"
59+
className={inputClassName}
60+
style={inputStyle}
61+
disabled={disabled}
62+
{...props}
63+
/>
64+
{children}
65+
</>
66+
);
67+
68+
const labelWithTooltip = (
69+
<>
70+
{labelContent}
71+
{state.isOpen && (
72+
<CustomTooltip state={state} {...tooltipProps} placement='right'>{tooltipText}</CustomTooltip>
73+
)}
74+
</>
75+
);
76+
77+
return tooltipText
5478
? <div>
5579
<div className="radio-label-with-tooltip-wrapper">
56-
<label ref={ref} className={labelClassName} style={labelStyle} {...triggerProps} {...(labelAs ? { as: labelAs } as any : {})}>
57-
<input
58-
type="radio"
59-
className={inputClassName}
60-
style={inputStyle}
61-
onFocus={() => state.open()}
62-
disabled={disabled}
63-
{...props}
64-
/>
65-
{children}
66-
{state.isOpen && (
67-
<CustomTooltip state={state} {...tooltipProps} placement='right'>{props.tooltipText}</CustomTooltip>
80+
{React.createElement(
81+
labelElement,
82+
{
83+
ref,
84+
className: labelClassName,
85+
style: labelStyle,
86+
...triggerProps,
87+
onFocus: () => state.open(),
88+
},
89+
labelWithTooltip
6890
)}
69-
</label>
7091
</div>
7192
</div>
72-
: <label className={labelClassName} style={labelStyle} {...(labelAs ? { as: labelAs } as any : {})}>
73-
<input
74-
type="radio"
75-
className={inputClassName}
76-
style={inputStyle}
77-
disabled={disabled}
78-
{...props}
79-
/>
80-
{children}
81-
</label>;
93+
: React.createElement(
94+
labelElement,
95+
{
96+
className: labelClassName,
97+
style: labelStyle,
98+
},
99+
labelContent
100+
);
82101
};

‎src/components/Tree/TreeCheckbox.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import {
22
Checkbox as RACCheckbox,
33
CheckboxProps as RACCheckboxProps
44
} from "react-aria-components";
5-
import type React from "react";
65
import { PropsWithChildren } from "react";
76
import {
87
checkboxVariants,
@@ -58,7 +57,7 @@ export const TreeCheckbox = ({
5857
'--checkbox-indeterminate-bg': colors.palette.mediumBlue,
5958
'--checkbox-indeterminate-icon': `url('${checkedMixIcon}')`,
6059
...style,
61-
} as React.CSSProperties;
60+
} as unknown as RACCheckboxProps['style']; // --vars are not in the type
6261

6362
return (
6463
<RACCheckbox

‎src/components/Tree/__snapshots__/Tree.spec.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ exports[`Tree matches snapshot 1`] = `
4747
<input
4848
class="checkbox-input"
4949
slot="check"
50-
style="--checkbox-size: 1.4rem; --checkbox-bg-unchecked: #ffffff; --checkbox-bg: #026AA1; --checkbox-border-unchecked: 1px solid #6f6f6f; --checkbox-border-checked: 1px solid #026AA1; --checkbox-checkmark: url('data:image/svg+xml,<svg height=\\"125px\\" width=\\"125px\\" version=\\"1.1\\" id=\\"Capa_1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" viewBox=\\"0 0 17.837 17.837\\" xml:space=\\"preserve\\" fill=\\"%23000000\\"><g id=\\"SVGRepo_bgCarrier\\" stroke-width=\\"0\\"></g><g id=\\"SVGRepo_tracerCarrier\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></g><g id=\\"SVGRepo_iconCarrier\\"><g><path style=\\"fill:%23fff;\\" d=\\"M16.145,2.571c-0.272-0.273-0.718-0.273-0.99,0L6.92,10.804l-4.241-4.27 c-0.272-0.274-0.715-0.274-0.989,0L0.204,8.019c-0.272,0.271-0.272,0.717,0,0.99l6.217,6.258c0.272,0.271,0.715,0.271,0.99,0 L17.63,5.047c0.276-0.273,0.276-0.72,0-0.994L16.145,2.571z\\"></path></g></g></svg>'); --checkbox-opacity: 1; --checkbox-checked-opacity: 1; --checkbox-disabled-border: 1px solid #d5d5d5;"
50+
style="--checkbox-size: 1.4rem; --checkbox-bg-unchecked: #ffffff; --checkbox-bg: #026AA1; --checkbox-border-unchecked: 1px solid #6f6f6f; --checkbox-border-checked: 1px solid #026AA1; --checkbox-checkmark: url('data:image/svg+xml,<svg height=\\"125px\\" width=\\"125px\\" version=\\"1.1\\" id=\\"Capa_1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" viewBox=\\"0 0 17.837 17.837\\" xml:space=\\"preserve\\" fill=\\"%23000000\\"><g id=\\"SVGRepo_bgCarrier\\" stroke-width=\\"0\\"></g><g id=\\"SVGRepo_tracerCarrier\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></g><g id=\\"SVGRepo_iconCarrier\\"><g><path style=\\"fill:%23fff;\\" d=\\"M16.145,2.571c-0.272-0.273-0.718-0.273-0.99,0L6.92,10.804l-4.241-4.27 c-0.272-0.274-0.715-0.274-0.989,0L0.204,8.019c-0.272,0.271-0.272,0.717,0,0.99l6.217,6.258c0.272,0.271,0.715,0.271,0.99,0 L17.63,5.047c0.276-0.273,0.276-0.72,0-0.994L16.145,2.571z\\"></path></g></g></svg>'); --checkbox-opacity: 1; --checkbox-disabled-border: 1px solid #d5d5d5;"
5151
type="checkbox"
5252
value="one"
5353
/>

‎src/components/Tree/__snapshots__/TreeCheckbox.spec.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ exports[`TreeCheckbox handles disabled state 1`] = `
2424
"--checkbox-border-checked": "1px solid #d5d5d5",
2525
"--checkbox-border-unchecked": "1px solid #d5d5d5",
2626
"--checkbox-checked-opacity": "0",
27-
"--checkbox-checkmark": "url('none')",
27+
"--checkbox-checkmark": "none",
2828
"--checkbox-color": "inherit",
2929
"--checkbox-disabled-border": "1px solid #d5d5d5",
3030
"--checkbox-disabled-color": "#e5e5e5",

0 commit comments

Comments
 (0)