Remove backwards compatibility

This commit is contained in:
adilallo
2026-02-06 18:58:59 -07:00
parent af0888798f
commit 8c7c074d59
24 changed files with 163 additions and 274 deletions
@@ -8,23 +8,16 @@ import { normalizeState } from "../../../../lib/propNormalization";
const SwitchContainer = memo(
forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
const {
checked: checkedProp,
propSwitch: propSwitchProp,
propSwitch = false,
onChange,
onFocus,
onBlur,
state: stateProp = "default",
label: labelProp,
text: textProp,
text,
className = "",
...rest
} = props;
// Backward compatibility: use propSwitch if provided, otherwise use checked
const checked = propSwitchProp !== undefined ? propSwitchProp : (checkedProp !== undefined ? checkedProp : false);
// Backward compatibility: use text if provided, otherwise use label
const label = textProp !== undefined ? textProp : labelProp;
// Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
const state = normalizeState(stateProp);
@@ -69,14 +62,14 @@ const SwitchContainer = memo(
[onBlur],
);
// Switch track styles based on checked state
// Switch track styles based on propSwitch state
const getTrackStyles = useCallback(() => {
return checked
return propSwitch
? "bg-[var(--color-surface-inverse-tertiary)]"
: "bg-[var(--color-surface-default-tertiary)]";
}, [checked]);
}, [propSwitch]);
// Switch thumb styles based on checked state
// Switch thumb styles based on propSwitch state
const getThumbStyles = useCallback(() => {
return "bg-[var(--color-gray-000)]";
}, []);
@@ -118,7 +111,7 @@ const SwitchContainer = memo(
duration-200
flex
items-center
${checked ? "justify-end" : "justify-start"}
${propSwitch ? "justify-end" : "justify-start"}
p-[2px]
`
.trim()
@@ -151,9 +144,9 @@ const SwitchContainer = memo(
<SwitchView
ref={ref}
switchId={switchId}
checked={checked}
propSwitch={propSwitch}
state={state}
label={label}
text={text}
className={className}
switchClasses={switchClasses}
trackClasses={trackClasses}
+2 -10
View File
@@ -4,10 +4,6 @@ export interface SwitchProps extends Omit<
React.ButtonHTMLAttributes<HTMLButtonElement>,
"onChange"
> {
/**
* Whether the switch is checked (backward compatibility - use propSwitch instead).
*/
checked?: boolean;
/**
* Whether the switch is checked (Figma prop).
* @default false
@@ -25,10 +21,6 @@ export interface SwitchProps extends Omit<
* Figma uses PascalCase, codebase uses lowercase - both are supported.
*/
state?: StateValue;
/**
* Label text (backward compatibility - use text instead).
*/
label?: string;
/**
* Label text (Figma prop).
*/
@@ -38,9 +30,9 @@ export interface SwitchProps extends Omit<
export interface SwitchViewProps {
switchId: string;
checked: boolean;
propSwitch: boolean;
state: "default" | "hover" | "focus" | "selected";
label?: string;
text?: string;
className: string;
switchClasses: string;
trackClasses: string;
@@ -5,8 +5,8 @@ export const SwitchView = forwardRef<HTMLButtonElement, SwitchViewProps>(
(
{
switchId,
checked,
label,
propSwitch,
text,
switchClasses,
trackClasses,
thumbClasses,
@@ -26,8 +26,8 @@ export const SwitchView = forwardRef<HTMLButtonElement, SwitchViewProps>(
id={switchId}
type="button"
role="switch"
aria-checked={checked}
aria-label={label || "Toggle switch"}
aria-checked={propSwitch}
aria-label={text || "Toggle switch"}
onClick={onClick}
onKeyDown={onKeyDown}
onFocus={onFocus}
@@ -39,7 +39,7 @@ export const SwitchView = forwardRef<HTMLButtonElement, SwitchViewProps>(
<div className={thumbClasses} />
</div>
</button>
{label && <span className={labelClasses}>{label}</span>}
{text && <span className={labelClasses}>{text}</span>}
</div>
);
},