Remove backwards compatibility
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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