Remove backwards compatibility
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user