Update props in components pass 2

This commit is contained in:
adilallo
2026-02-06 17:46:07 -07:00
parent 1ca11a2229
commit af0888798f
11 changed files with 145 additions and 14 deletions
@@ -14,14 +14,18 @@ const MultiSelectContainer = memo<MultiSelectProps>(
options,
onChipClick,
onAddClick,
showAddButton = true,
showAddButton: showAddButtonProp,
addButton: addButtonProp,
addButtonText = "Add organization type",
formHeader = true,
onCustomChipConfirm,
onCustomChipClose,
className = "",
}) => {
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
@@ -34,6 +38,7 @@ const MultiSelectContainer = memo<MultiSelectProps>(
onAddClick={onAddClick}
showAddButton={showAddButton}
addButtonText={addButtonText}
formHeader={formHeader}
onCustomChipConfirm={onCustomChipConfirm}
onCustomChipClose={onCustomChipClose}
className={className}
@@ -40,13 +40,23 @@ export interface MultiSelectProps {
*/
onAddClick?: () => void;
/**
* Show the add button
* Show the add button (backward compatibility - use addButton instead)
*/
showAddButton?: boolean;
/**
* Whether to show add button (Figma prop).
* @default true
*/
addButton?: boolean;
/**
* Text for the add button
*/
addButtonText?: string;
/**
* Whether to show form header (label and help icon) above multi-select (Figma prop).
* @default true
*/
formHeader?: boolean;
/**
* Callback when a custom chip is confirmed (check button clicked)
*/
@@ -68,6 +78,7 @@ export interface MultiSelectViewProps {
onAddClick?: () => void;
showAddButton: boolean;
addButtonText: string;
formHeader: boolean;
onCustomChipConfirm?: (chipId: string, value: string) => void;
onCustomChipClose?: (chipId: string) => void;
className: string;
@@ -15,6 +15,7 @@ function MultiSelectView({
onAddClick,
showAddButton,
addButtonText,
formHeader = true,
onCustomChipConfirm,
onCustomChipClose,
className,
@@ -32,7 +33,7 @@ function MultiSelectView({
return (
<div className={`flex flex-col ${isSmall ? "gap-[var(--measures-spacing-200,8px)]" : "gap-[var(--measures-spacing-300,12px)]"} items-start relative w-full ${className}`}>
{/* Label using InputLabel component */}
{label && (
{formHeader && label && (
<InputLabel
label={label}
helpIcon={showHelpIcon}