CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update props in components pass 2

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
app/components/controls/MultiSelect/MultiSelect.container.tsx
+6 -1
View File
@@ -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}
app/components/controls/MultiSelect/MultiSelect.types.ts
+12 -1
View File
@@ -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;
app/components/controls/MultiSelect/MultiSelect.view.tsx
+2 -1
View File
@@ -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}
app/components/controls/Switch/Switch.container.tsx
+9 -2
View File
@@ -8,16 +8,23 @@ import { normalizeState } from "../../../../lib/propNormalization";
const SwitchContainer = memo(
forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
const {
checked = false,
checked: checkedProp,
propSwitch: propSwitchProp,
onChange,
onFocus,
onBlur,
state: stateProp = "default",
label,
label: labelProp,
text: textProp,
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);
app/components/controls/Switch/Switch.types.ts
+15
View File
@@ -4,7 +4,15 @@ 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
*/
propSwitch?: boolean;
onChange?: (
_e:
| React.MouseEvent<HTMLButtonElement>
@@ -17,7 +25,14 @@ 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).
*/
text?: string;
className?: string;
}
app/components/controls/TextArea/TextArea.container.tsx
+6
View File
@@ -24,6 +24,9 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
name,
className = "",
rows,
textHint = false,
formHeader = true,
showHelpIcon = false,
...props
},
ref,
@@ -174,6 +177,9 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
handleFocus={handleFocus}
handleBlur={handleBlur}
aria-invalid={error}
textHint={textHint}
formHeader={formHeader}
showHelpIcon={showHelpIcon}
{...props}
/>
);
app/components/controls/TextArea/TextArea.types.ts
+18
View File
@@ -32,6 +32,21 @@ export interface TextAreaProps extends Omit<
onBlur?: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
className?: string;
rows?: number;
/**
* Whether to show hint text below textarea (Figma prop).
* @default false
*/
textHint?: boolean;
/**
* Whether to show form header (label and help icon) above textarea (Figma prop).
* @default true
*/
formHeader?: boolean;
/**
* Whether to show help icon in label.
* @default false
*/
showHelpIcon?: boolean;
}
export interface TextAreaViewProps {
@@ -55,4 +70,7 @@ export interface TextAreaViewProps {
handleChange: (_e: React.ChangeEvent<HTMLTextAreaElement>) => void;
handleFocus: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
handleBlur: (_e: React.FocusEvent<HTMLTextAreaElement>) => void;
textHint?: boolean;
formHeader?: boolean;
showHelpIcon?: boolean;
}
app/components/controls/TextArea/TextArea.view.tsx
+32 -8
View File
@@ -1,4 +1,5 @@
import { forwardRef } from "react";
import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
import type { TextAreaViewProps } from "./TextArea.types";
export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
@@ -20,20 +21,36 @@ export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
handleChange,
handleFocus,
handleBlur,
textHint = false,
formHeader = true,
showHelpIcon = false,
...props
},
ref,
) => {
return (
<div className={containerClasses}>
{label && (
<label
id={labelId}
htmlFor={textareaId}
className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-secondary)]`}
>
{label}
</label>
{formHeader && label && (
<div className="flex flex-wrap gap-[var(--measures-spacing-200,4px_8px)] items-baseline pr-[var(--measures-spacing-100,4px)] relative shrink-0 w-full">
<div className="flex gap-[var(--measures-spacing-050,2px)] items-center relative shrink-0">
<label
id={labelId}
htmlFor={textareaId}
className={`${labelClasses} font-inter font-medium text-[var(--color-content-default-secondary)]`}
>
{label}
</label>
{showHelpIcon && (
<div className="relative shrink-0 size-[12px]">
<img
src={getAssetPath(ASSETS.ICON_HELP)}
alt="Help"
className="block max-w-none size-full"
/>
</div>
)}
</div>
</div>
)}
<div className={disabled ? "opacity-40" : ""}>
<textarea
@@ -54,6 +71,13 @@ export const TextAreaView = forwardRef<HTMLTextAreaElement, TextAreaViewProps>(
{...props}
/>
</div>
{textHint && (
<div className="flex items-start relative shrink-0 w-full">
<p className="flex-[1_0_0] font-inter font-normal leading-[16px] min-h-px min-w-px relative text-[color:var(--color-content-default-tertiary,#b4b4b4)] text-[length:var(--sizing-300,12px)]">
Hint text here
</p>
</div>
)}
</div>
);
},
app/components/modals/Create/Create.types.ts
+30
View File
@@ -17,6 +17,36 @@ export interface CreateProps {
className?: string;
ariaLabel?: string;
ariaLabelledBy?: string;
/**
* Whether to enable Create block array content type (Figma prop).
* @default false
*/
createBlockArray?: boolean;
/**
* Whether to enable Text input content type (Figma prop).
* @default false
*/
textInput?: boolean;
/**
* Whether to enable Text area content type (Figma prop).
* @default false
*/
textArea?: boolean;
/**
* Whether to enable Multi-select content type (Figma prop).
* @default false
*/
multiSelect?: boolean;
/**
* Whether to enable Upload content type (Figma prop).
* @default false
*/
upload?: boolean;
/**
* Whether to enable Proportion content type (Figma prop).
* @default false
*/
proportion?: boolean;
}
export interface CreateViewProps {
app/components/utility/ModalFooter/ModalFooter.types.ts
+6
View File
@@ -14,6 +14,12 @@ export interface ModalFooterProps {
nextButtonDisabled?: boolean;
currentStep?: number;
totalSteps?: number;
/**
* Whether to show the stepper component in the footer (Figma prop).
* Defaults to true if currentStep and totalSteps are provided.
* @default true
*/
stepper?: boolean;
footerContent?: React.ReactNode;
className?: string;
}
app/components/utility/ModalFooter/ModalFooter.view.tsx
+9 -1
View File
@@ -15,6 +15,7 @@ export function ModalFooterView({
nextButtonDisabled = false,
currentStep,
totalSteps,
stepper: stepperProp,
footerContent,
className = "",
}: ModalFooterProps) {
@@ -23,6 +24,13 @@ export function ModalFooterView({
// Use localized defaults if text not provided
const defaultBackText = backButtonText || t("buttons.back");
const defaultNextText = nextButtonText || t("buttons.next");
// Determine if stepper should be shown
// Defaults to true if currentStep and totalSteps are provided, unless explicitly set to false
const shouldShowStepper = stepperProp !== undefined
? stepperProp
: (currentStep !== undefined && totalSteps !== undefined);
return (
<div
className={`h-[64px] bg-[var(--color-surface-default-primary)] rounded-bl-[var(--radius-300,12px)] rounded-br-[var(--radius-300,12px)] shrink-0 relative ${className}`}
@@ -37,7 +45,7 @@ export function ModalFooterView({
)}
{/* Stepper (Centered) */}
{currentStep && totalSteps && (
{shouldShowStepper && currentStep && totalSteps && (
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<Stepper active={currentStep} totalSteps={totalSteps} />
</div>