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
@@ -14,8 +14,7 @@ const MultiSelectContainer = memo<MultiSelectProps>(
options,
onChipClick,
onAddClick,
showAddButton: showAddButtonProp,
addButton: addButtonProp,
addButton: addButtonProp = true,
addButtonText = "Add organization type",
formHeader = true,
onCustomChipConfirm,
@@ -24,8 +23,6 @@ const MultiSelectContainer = memo<MultiSelectProps>(
}) => {
const size = normalizeMultiSelectSize(sizeProp);
const palette = normalizeChipPalette(paletteProp);
// Backward compatibility: if addButton is provided, use it; otherwise use showAddButton
const showAddButton = addButtonProp !== undefined ? addButtonProp : (showAddButtonProp !== undefined ? showAddButtonProp : true);
return (
<MultiSelectView
@@ -36,7 +33,7 @@ const MultiSelectContainer = memo<MultiSelectProps>(
options={options}
onChipClick={onChipClick}
onAddClick={onAddClick}
showAddButton={showAddButton}
addButton={addButtonProp}
addButtonText={addButtonText}
formHeader={formHeader}
onCustomChipConfirm={onCustomChipConfirm}
@@ -39,10 +39,6 @@ export interface MultiSelectProps {
* Callback when add button is clicked
*/
onAddClick?: () => void;
/**
* Show the add button (backward compatibility - use addButton instead)
*/
showAddButton?: boolean;
/**
* Whether to show add button (Figma prop).
* @default true
@@ -76,7 +72,7 @@ export interface MultiSelectViewProps {
options: ChipOption[];
onChipClick?: (chipId: string) => void;
onAddClick?: () => void;
showAddButton: boolean;
addButton: boolean;
addButtonText: string;
formHeader: boolean;
onCustomChipConfirm?: (chipId: string, value: string) => void;
@@ -13,7 +13,7 @@ function MultiSelectView({
options,
onChipClick,
onAddClick,
showAddButton,
addButton,
addButtonText,
formHeader = true,
onCustomChipConfirm,
@@ -75,7 +75,7 @@ function MultiSelectView({
))}
{/* Add button - Circular button with border (not ghost) when no text, ghost style when text provided */}
{showAddButton && (
{addButton && (
<button
type="button"
aria-label={addButtonText || "Add option"}
@@ -22,7 +22,6 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
(
{
id,
label: labelProp,
labelText,
showLabel,
labelVariant: labelVariantProp,
@@ -46,9 +45,8 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
},
ref,
) => {
// Handle backward compatibility: if label is string, use it as labelText
const actualLabelText = labelText || labelProp;
const shouldShowLabel = showLabel !== undefined ? showLabel : (actualLabelText !== undefined);
// Determine if label should be shown
const shouldShowLabel = showLabel !== undefined ? showLabel : (labelText !== undefined);
// Normalize state - handle "state5" as disabled
let normalizedState = externalStateProp;
@@ -211,7 +209,7 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
return (
<SelectInputView
label={shouldShowLabel ? actualLabelText : undefined}
label={shouldShowLabel ? labelText : undefined}
placeholder={placeholder}
state={actualState}
disabled={disabled}
@@ -13,17 +13,12 @@ export type SelectInputSizeValue = "small" | "medium" | "large" | "Small" | "Med
export interface SelectInputProps {
id?: string;
/**
* Label text (backward compatibility - if provided, label is shown).
* For Figma alignment, use `labelText` prop instead.
*/
label?: string;
/**
* Label text (Figma prop - use this for new code).
* Label text (Figma prop).
*/
labelText?: string;
/**
* Whether to show label above input (Figma prop).
* If `label` or `labelText` is provided, defaults to true.
* If `labelText` is provided, defaults to true.
* @default true
*/
showLabel?: boolean;
@@ -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>
);
},