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

Remove backwards compatibility

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
app/components/buttons/Button.tsx
+4 -50
View File
@@ -1,13 +1,11 @@
import { memo } from "react";
import type {
VariantValue,
SizeValue,
ButtonTypeValue,
ButtonPaletteValue,
ButtonStateValue,
} from "../../../lib/propNormalization";
import {
normalizeVariant,
normalizeSize,
normalizeButtonType,
normalizeButtonPalette,
@@ -15,12 +13,6 @@ import {
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
children: React.ReactNode;
/**
* @deprecated Use `type` and `palette` props instead. This prop is maintained for backward compatibility.
* Button variant. Accepts both lowercase and PascalCase (case-insensitive).
* Figma uses PascalCase, codebase uses lowercase - both are supported.
*/
variant?: VariantValue;
/**
* Button type (Figma prop). Accepts both lowercase and PascalCase (case-insensitive).
* Figma uses PascalCase, codebase uses lowercase - both are supported.
@@ -74,7 +66,6 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
const Button = memo<ButtonProps>(
({
children,
variant: variantProp,
buttonType: typeProp,
palette: paletteProp,
size: sizeProp = "xsmall",
@@ -92,51 +83,14 @@ const Button = memo<ButtonProps>(
ariaLabel,
...props
}) => {
// Determine type and palette from either new props or legacy variant prop
let buttonType: "filled" | "outline" | "ghost" | "danger";
let buttonPalette: "default" | "inverse";
if (variantProp) {
// Backward compatibility: map old variant to new type/palette
const variant = normalizeVariant(variantProp);
if (variant === "filled") {
buttonType = "filled";
buttonPalette = "default";
} else if (variant === "filled-inverse") {
buttonType = "filled";
buttonPalette = "inverse";
} else if (variant === "outline") {
buttonType = "outline";
buttonPalette = "default";
} else if (variant === "outline-inverse") {
buttonType = "outline";
buttonPalette = "inverse";
} else if (variant === "ghost") {
buttonType = "ghost";
buttonPalette = "default";
} else if (variant === "ghost-inverse") {
buttonType = "ghost";
buttonPalette = "inverse";
} else if (variant === "danger") {
buttonType = "danger";
buttonPalette = "default";
} else {
// danger-inverse
buttonType = "danger";
buttonPalette = "inverse";
}
} else {
// Use new type/palette props
buttonType = normalizeButtonType(typeProp, "filled");
buttonPalette = normalizeButtonPalette(paletteProp, "default");
}
// Normalize other props
// Normalize props
const buttonType = normalizeButtonType(typeProp, "filled");
const buttonPalette = normalizeButtonPalette(paletteProp, "default");
const size = normalizeSize(sizeProp);
// State prop is for Figma alignment - actual state is handled by CSS pseudo-classes
// We accept it for API alignment but don't use it for styling (CSS handles states)
// Map type + palette to legacy variant for styling (maintains existing styles)
// Map type + palette to variant string for styling (internal use only)
const getVariantFromTypeAndPalette = (
type: typeof buttonType,
palette: typeof buttonPalette,
app/components/cards/RuleCard/RuleCard.view.tsx
+1 -1
View File
@@ -242,7 +242,7 @@ export function RuleCardView({
onCustomChipClose={(chipId) => {
category.onCustomChipClose?.(category.name, chipId);
}}
showAddButton={true}
addButton={true}
addButtonText="" // Empty text for icon-only circular button
className="w-full"
/>
app/components/controls/MultiSelect/MultiSelect.container.tsx
+2 -5
View File
@@ -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}
app/components/controls/MultiSelect/MultiSelect.types.ts
+1 -5
View File
@@ -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;
app/components/controls/MultiSelect/MultiSelect.view.tsx
+2 -2
View File
@@ -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"}
app/components/controls/SelectInput/SelectInput.container.tsx
+3 -5
View File
@@ -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}
app/components/controls/SelectInput/SelectInput.types.ts
+2 -7
View File
@@ -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;
app/components/controls/Switch/Switch.container.tsx
+9 -16
View File
@@ -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}
app/components/controls/Switch/Switch.types.ts
+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;
app/components/controls/Switch/Switch.view.tsx
+5 -5
View File
@@ -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>
);
},
app/components/modals/Alert/Alert.view.tsx
+2 -1
View File
@@ -55,7 +55,8 @@ export function AlertView({
)}
</div>
<Button
variant="ghost"
buttonType="ghost"
palette="default"
size="large"
onClick={onClose}
ariaLabel="Close alert"
app/components/navigation/TopNav/TopNav.container.tsx
+5 -3
View File
@@ -196,13 +196,15 @@ const TopNavContainer = memo<TopNavProps>(
containerSize: "small" | "medium" | "large" | "xlarge",
avatarSize: "small" | "medium" | "large" | "xlarge",
) => {
// Use ghost variant when folderTop is true, standard otherwise
const variant = folderTop ? "ghost" : undefined;
// Use ghost type when folderTop is true, filled (default) otherwise
const buttonType = folderTop ? "ghost" : "filled";
const palette = "default";
return (
<Button
size={buttonSize}
variant={variant}
buttonType={buttonType}
palette={palette}
ariaLabel={t("ariaLabels.createNewRule")}
>
{renderAvatarGroup(containerSize, avatarSize)}
app/components/sections/AskOrganizer/AskOrganizer.view.tsx
+2 -1
View File
@@ -45,7 +45,8 @@ function AskOrganizerView({
<Button
href={buttonHref}
size="large"
variant={variant === "inverse" ? "filled-inverse" : "filled"}
buttonType="filled"
palette={variant === "inverse" ? "inverse" : "default"}
className="xl:!px-[var(--spacing-scale-020)] xl:!py-[var(--spacing-scale-012)] xl:!text-[24px] xl:!leading-[28px]"
onClick={onContactClick}
ariaLabel={ariaLabel}
app/components/sections/NumberedCards/NumberedCards.view.tsx
+2 -2
View File
@@ -49,13 +49,13 @@ function NumberedCardsView({
<div className="text-center sm:text-left lg:text-center">
{/* Filled button for xsm and sm breakpoints */}
<div className="block lg:hidden">
<Button variant="filled" size="large">
<Button buttonType="filled" palette="default" size="large">
{t("numberedCards.buttons.createCommunityRule")}
</Button>
</div>
{/* Outline button for lg and xlg breakpoints */}
<div className="hidden lg:block">
<Button variant="outline" size="large">
<Button buttonType="outline" palette="default" size="large">
{t("numberedCards.buttons.seeHowItWorks")}
</Button>
</div>
app/components/sections/RuleStack/RuleStack.view.tsx
+2 -1
View File
@@ -157,7 +157,8 @@ export function RuleStackView({
min-[1024px]:mt-[var(--measures-spacing-1000,40px)]
">
<Button
variant="outline"
buttonType="outline"
palette="default"
size="large"
>
{buttonText}
app/components/type/ContentLockup/ContentLockup.view.tsx
+3 -3
View File
@@ -93,19 +93,19 @@ function ContentLockupView({
<div className="flex justify-start">
{/* Small button for xsm and sm breakpoints */}
<div className="block md:hidden">
<Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="small">
<Button buttonType="filled" palette={variant === "hero" ? "default" : "inverse"} size="small">
{ctaText}
</Button>
</div>
{/* Large button for md and lg breakpoints */}
<div className="hidden md:block xl:hidden">
<Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="large" className={buttonClassName}>
<Button buttonType="filled" palette={variant === "hero" ? "default" : "inverse"} size="large" className={buttonClassName}>
{ctaText}
</Button>
</div>
{/* XLarge button for xl breakpoint */}
<div className="hidden xl:block">
<Button variant={variant === "hero" ? "filled" : "filled-inverse"} size="xlarge">
<Button buttonType="filled" palette={variant === "hero" ? "default" : "inverse"} size="xlarge">
{ctaText}
</Button>
</div>
app/components/utility/ModalFooter/ModalFooter.view.tsx
+3 -2
View File
@@ -38,7 +38,7 @@ export function ModalFooterView({
{/* Back Button - Absolutely positioned bottom left */}
{showBackButton && (
<div className="absolute left-[16px] top-[12px]">
<Button variant="outline" size="medium" onClick={onBack}>
<Button buttonType="outline" palette="default" size="medium" onClick={onBack}>
{defaultBackText}
</Button>
</div>
@@ -55,7 +55,8 @@ export function ModalFooterView({
{showNextButton && (
<div className="absolute right-[16px] top-[12px]">
<Button
variant="filled"
buttonType="filled"
palette="default"
size="medium"
onClick={onNext}
disabled={nextButtonDisabled}
lib/propNormalization.ts
-45
View File
@@ -112,30 +112,6 @@ export type InputStateValue =
| "Hover"
| "Focus";
/**
* Normalize button variant prop values
*/
export function normalizeVariant(
value: string | undefined,
defaultValue: "filled" = "filled"
): "filled" | "filled-inverse" | "outline" | "outline-inverse" | "ghost" | "ghost-inverse" | "danger" | "danger-inverse" {
if (!value) return defaultValue;
const normalized = value.toLowerCase();
const variants = [
"filled",
"filled-inverse",
"outline",
"outline-inverse",
"ghost",
"ghost-inverse",
"danger",
"danger-inverse",
];
if (variants.includes(normalized)) {
return normalized as typeof defaultValue;
}
return defaultValue;
}
/**
* Normalize button size prop values
@@ -201,27 +177,6 @@ export function normalizeTooltipPosition(
return defaultValue;
}
/**
* Type helper for case-insensitive variant prop
*/
export type VariantValue =
| "filled"
| "filled-inverse"
| "outline"
| "outline-inverse"
| "ghost"
| "ghost-inverse"
| "danger"
| "danger-inverse"
| "Filled"
| "Filled-Inverse"
| "Outline"
| "Outline-Inverse"
| "Ghost"
| "Ghost-Inverse"
| "Danger"
| "Danger-Inverse";
/**
* Type helper for case-insensitive size prop
*/
stories/buttons/Button.stories.js
+68 -70
View File
@@ -13,19 +13,15 @@ export default {
},
},
argTypes: {
variant: {
buttonType: {
control: { type: "select" },
options: [
"filled",
"filled-inverse",
"outline",
"outline-inverse",
"ghost",
"ghost-inverse",
"danger",
"danger-inverse",
],
description: "The visual style variant of the button",
options: ["filled", "outline", "ghost", "danger"],
description: "The button type (Figma prop)",
},
palette: {
control: { type: "select" },
options: ["default", "inverse"],
description: "The button palette (Figma prop)",
},
size: {
control: { type: "select" },
@@ -59,28 +55,28 @@ export const Variants = {
render: (_args) => (
<div className="space-y-4">
<div className="space-x-4">
<Button {..._args} variant="filled">
<Button {..._args} buttonType="filled" palette="default">
Filled
</Button>
<Button {..._args} variant="filled-inverse">
<Button {..._args} buttonType="filled" palette="inverse">
Filled Inverse
</Button>
<Button {..._args} variant="outline">
<Button {..._args} buttonType="outline" palette="default">
Outline
</Button>
<Button {..._args} variant="outline-inverse">
<Button {..._args} buttonType="outline" palette="inverse">
Outline Inverse
</Button>
<Button {..._args} variant="ghost">
<Button {..._args} buttonType="ghost" palette="default">
Ghost
</Button>
<Button {..._args} variant="ghost-inverse">
<Button {..._args} buttonType="ghost" palette="inverse">
Ghost Inverse
</Button>
<Button {..._args} variant="danger">
<Button {..._args} buttonType="danger" palette="default">
Danger
</Button>
<Button {..._args} variant="danger-inverse">
<Button {..._args} buttonType="danger" palette="inverse">
Danger Inverse
</Button>
</div>
@@ -98,7 +94,8 @@ export const Variants = {
export const Sizes = {
args: {
children: "Button",
variant: "filled",
buttonType: "filled",
palette: "default",
},
render: (_args) => (
<div className="space-y-4">
@@ -134,7 +131,8 @@ export const States = {
args: {
children: "Button",
size: "large",
variant: "filled",
buttonType: "filled",
palette: "default",
},
render: (_args) => (
<div className="space-y-4">
@@ -162,19 +160,19 @@ export const AllVariants = {
<div>
<h3 className="text-white font-semibold mb-3">Filled Variant</h3>
<div className="space-x-4">
<Button variant="filled" size="xsmall">
<Button buttonType="filled" palette="default" size="xsmall">
XSmall
</Button>
<Button variant="filled" size="small">
<Button buttonType="filled" palette="default" size="small">
Small
</Button>
<Button variant="filled" size="medium">
<Button buttonType="filled" palette="default" size="medium">
Medium
</Button>
<Button variant="filled" size="large">
<Button buttonType="filled" palette="default" size="large">
Large
</Button>
<Button variant="filled" size="xlarge">
<Button buttonType="filled" palette="default" size="xlarge">
XLarge
</Button>
</div>
@@ -183,19 +181,19 @@ export const AllVariants = {
<div>
<h3 className="text-white font-semibold mb-3">Filled Inverse Variant</h3>
<div className="space-x-4">
<Button variant="filled-inverse" size="xsmall">
<Button buttonType="filled" palette="inverse" size="xsmall">
XSmall
</Button>
<Button variant="filled-inverse" size="small">
<Button buttonType="filled" palette="inverse" size="small">
Small
</Button>
<Button variant="filled-inverse" size="medium">
<Button buttonType="filled" palette="inverse" size="medium">
Medium
</Button>
<Button variant="filled-inverse" size="large">
<Button buttonType="filled" palette="inverse" size="large">
Large
</Button>
<Button variant="filled-inverse" size="xlarge">
<Button buttonType="filled" palette="inverse" size="xlarge">
XLarge
</Button>
</div>
@@ -204,19 +202,19 @@ export const AllVariants = {
<div>
<h3 className="text-white font-semibold mb-3">Outline Variant</h3>
<div className="space-x-4">
<Button variant="outline" size="xsmall">
<Button buttonType="outline" palette="default" size="xsmall">
XSmall
</Button>
<Button variant="outline" size="small">
<Button buttonType="outline" palette="default" size="small">
Small
</Button>
<Button variant="outline" size="medium">
<Button buttonType="outline" palette="default" size="medium">
Medium
</Button>
<Button variant="outline" size="large">
<Button buttonType="outline" palette="default" size="large">
Large
</Button>
<Button variant="outline" size="xlarge">
<Button buttonType="outline" palette="default" size="xlarge">
XLarge
</Button>
</div>
@@ -225,19 +223,19 @@ export const AllVariants = {
<div>
<h3 className="text-white font-semibold mb-3">Outline Inverse Variant</h3>
<div className="space-x-4">
<Button variant="outline-inverse" size="xsmall">
<Button buttonType="outline" palette="inverse" size="xsmall">
XSmall
</Button>
<Button variant="outline-inverse" size="small">
<Button buttonType="outline" palette="inverse" size="small">
Small
</Button>
<Button variant="outline-inverse" size="medium">
<Button buttonType="outline" palette="inverse" size="medium">
Medium
</Button>
<Button variant="outline-inverse" size="large">
<Button buttonType="outline" palette="inverse" size="large">
Large
</Button>
<Button variant="outline-inverse" size="xlarge">
<Button buttonType="outline" palette="inverse" size="xlarge">
XLarge
</Button>
</div>
@@ -246,19 +244,19 @@ export const AllVariants = {
<div>
<h3 className="text-white font-semibold mb-3">Ghost Variant</h3>
<div className="space-x-4">
<Button variant="ghost" size="xsmall">
<Button buttonType="ghost" palette="default" size="xsmall">
XSmall
</Button>
<Button variant="ghost" size="small">
<Button buttonType="ghost" palette="default" size="small">
Small
</Button>
<Button variant="ghost" size="medium">
<Button buttonType="ghost" palette="default" size="medium">
Medium
</Button>
<Button variant="ghost" size="large">
<Button buttonType="ghost" palette="default" size="large">
Large
</Button>
<Button variant="ghost" size="xlarge">
<Button buttonType="ghost" palette="default" size="xlarge">
XLarge
</Button>
</div>
@@ -267,19 +265,19 @@ export const AllVariants = {
<div>
<h3 className="text-white font-semibold mb-3">Ghost Inverse Variant</h3>
<div className="space-x-4">
<Button variant="ghost-inverse" size="xsmall">
<Button buttonType="ghost" palette="inverse" size="xsmall">
XSmall
</Button>
<Button variant="ghost-inverse" size="small">
<Button buttonType="ghost" palette="inverse" size="small">
Small
</Button>
<Button variant="ghost-inverse" size="medium">
<Button buttonType="ghost" palette="inverse" size="medium">
Medium
</Button>
<Button variant="ghost-inverse" size="large">
<Button buttonType="ghost" palette="inverse" size="large">
Large
</Button>
<Button variant="ghost-inverse" size="xlarge">
<Button buttonType="ghost" palette="inverse" size="xlarge">
XLarge
</Button>
</div>
@@ -288,19 +286,19 @@ export const AllVariants = {
<div>
<h3 className="text-white font-semibold mb-3">Danger Variant</h3>
<div className="space-x-4">
<Button variant="danger" size="xsmall">
<Button buttonType="danger" palette="default" size="xsmall">
XSmall
</Button>
<Button variant="danger" size="small">
<Button buttonType="danger" palette="default" size="small">
Small
</Button>
<Button variant="danger" size="medium">
<Button buttonType="danger" palette="default" size="medium">
Medium
</Button>
<Button variant="danger" size="large">
<Button buttonType="danger" palette="default" size="large">
Large
</Button>
<Button variant="danger" size="xlarge">
<Button buttonType="danger" palette="default" size="xlarge">
XLarge
</Button>
</div>
@@ -309,19 +307,19 @@ export const AllVariants = {
<div>
<h3 className="text-white font-semibold mb-3">Danger Inverse Variant</h3>
<div className="space-x-4">
<Button variant="danger-inverse" size="xsmall">
<Button buttonType="danger" palette="inverse" size="xsmall">
XSmall
</Button>
<Button variant="danger-inverse" size="small">
<Button buttonType="danger" palette="inverse" size="small">
Small
</Button>
<Button variant="danger-inverse" size="medium">
<Button buttonType="danger" palette="inverse" size="medium">
Medium
</Button>
<Button variant="danger-inverse" size="large">
<Button buttonType="danger" palette="inverse" size="large">
Large
</Button>
<Button variant="danger-inverse" size="xlarge">
<Button buttonType="danger" palette="inverse" size="xlarge">
XLarge
</Button>
</div>
@@ -330,28 +328,28 @@ export const AllVariants = {
<div>
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
<div className="space-x-4">
<Button variant="filled" size="large" disabled>
<Button buttonType="filled" palette="default" size="large" disabled>
Filled Disabled
</Button>
<Button variant="filled-inverse" size="large" disabled>
<Button buttonType="filled" palette="inverse" size="large" disabled>
Filled Inverse Disabled
</Button>
<Button variant="outline" size="large" disabled>
<Button buttonType="outline" palette="default" size="large" disabled>
Outline Disabled
</Button>
<Button variant="outline-inverse" size="large" disabled>
<Button buttonType="outline" palette="inverse" size="large" disabled>
Outline Inverse Disabled
</Button>
<Button variant="ghost" size="large" disabled>
<Button buttonType="ghost" palette="default" size="large" disabled>
Ghost Disabled
</Button>
<Button variant="ghost-inverse" size="large" disabled>
<Button buttonType="ghost" palette="inverse" size="large" disabled>
Ghost Inverse Disabled
</Button>
<Button variant="danger" size="large" disabled>
<Button buttonType="danger" palette="default" size="large" disabled>
Danger Disabled
</Button>
<Button variant="danger-inverse" size="large" disabled>
<Button buttonType="danger" palette="inverse" size="large" disabled>
Danger Inverse Disabled
</Button>
</div>
stories/buttons/Button.visual.stories.js
+12 -7
View File
@@ -22,9 +22,13 @@ export default {
control: { type: "select" },
options: ["xsmall", "small", "medium", "large", "xlarge"],
},
variant: {
buttonType: {
control: { type: "select" },
options: ["default", "home"],
options: ["filled", "outline", "ghost", "danger"],
},
palette: {
control: { type: "select" },
options: ["default", "inverse"],
},
disabled: {
control: { type: "boolean" },
@@ -192,7 +196,8 @@ export const XLarge = {
export const HomeVariant = {
args: {
children: "Home Button",
variant: "home",
buttonType: "filled",
palette: "default",
},
parameters: {
docs: {
@@ -268,8 +273,8 @@ export const StateComparison = {
<Button disabled>Disabled</Button>
</div>
<div className="flex flex-wrap gap-4 items-center">
<Button variant="home">Home Default</Button>
<Button variant="home" disabled>
<Button buttonType="filled" palette="default">Home Default</Button>
<Button buttonType="filled" palette="default" disabled>
Home Disabled
</Button>
</div>
@@ -336,8 +341,8 @@ export const EdgeCases = {
<div className="flex flex-wrap gap-4 items-center">
<Button>Normal</Button>
<Button disabled>Disabled</Button>
<Button variant="home">Home</Button>
<Button variant="home" disabled>
<Button buttonType="filled" palette="default">Home</Button>
<Button buttonType="filled" palette="default" disabled>
Home Disabled
</Button>
</div>
stories/controls/Switch.stories.js
+24 -24
View File
@@ -8,18 +8,18 @@ export default {
layout: "centered",
},
argTypes: {
checked: {
propSwitch: {
control: "boolean",
description: "Whether the switch is checked (on) or not (off)",
description: "Whether the switch is checked (on) or not (off) (Figma prop)",
},
state: {
control: "select",
options: ["default", "focus"],
description: "Visual state of the switch",
},
label: {
text: {
control: "text",
description: "Label text displayed next to the switch",
description: "Label text displayed next to the switch (Figma prop)",
},
onChange: {
action: "changed",
@@ -40,28 +40,28 @@ const Template = (args) => <Switch {...args} />;
export const Default = Template.bind({});
Default.args = {
checked: false,
label: "Switch label",
propSwitch: false,
text: "Switch label",
};
export const Checked = Template.bind({});
Checked.args = {
checked: true,
label: "Switch label",
propSwitch: true,
text: "Switch label",
};
export const Focus = Template.bind({});
Focus.args = {
checked: false,
propSwitch: false,
state: "focus",
label: "Switch label",
text: "Switch label",
};
export const FocusChecked = Template.bind({});
FocusChecked.args = {
checked: true,
propSwitch: true,
state: "focus",
label: "Switch label",
text: "Switch label",
};
export const States = () => (
@@ -69,17 +69,17 @@ export const States = () => (
<div className="space-y-2">
<h3 className="text-lg font-semibold">Switch States</h3>
<div className="space-y-4">
<Switch checked={false} label="Switch label" />
<Switch checked={true} label="Switch label" />
<Switch checked={false} state="focus" label="Switch label" />
<Switch checked={true} state="focus" label="Switch label" />
<Switch propSwitch={false} text="Switch label" />
<Switch propSwitch={true} text="Switch label" />
<Switch propSwitch={false} state="focus" text="Switch label" />
<Switch propSwitch={true} state="focus" text="Switch label" />
</div>
</div>
</div>
);
export const Interactive = () => {
const [checked, setChecked] = React.useState(false);
const [propSwitch, setPropSwitch] = React.useState(false);
const [state, setState] = React.useState("default");
return (
@@ -87,10 +87,10 @@ export const Interactive = () => {
<div className="space-y-4">
<h3 className="text-lg font-semibold">Interactive Switch</h3>
<Switch
checked={checked}
propSwitch={propSwitch}
state={state}
onChange={() => setChecked(!checked)}
label="Enable notifications"
onChange={() => setPropSwitch(!propSwitch)}
text="Enable notifications"
/>
</div>
<div className="space-y-4">
@@ -118,10 +118,10 @@ export const WithText = () => (
<div className="space-y-2">
<h3 className="text-lg font-semibold">Switch with Different Labels</h3>
<div className="space-y-4">
<Switch checked={false} label="Enable notifications" />
<Switch checked={true} label="Auto-save documents" />
<Switch checked={false} label="Dark mode" />
<Switch checked={true} label="Email updates" />
<Switch propSwitch={false} text="Enable notifications" />
<Switch propSwitch={true} text="Auto-save documents" />
<Switch propSwitch={false} text="Dark mode" />
<Switch propSwitch={true} text="Email updates" />
</div>
</div>
</div>
stories/modals/Tooltip.stories.js
+1 -1
View File
@@ -22,7 +22,7 @@ export default {
const Template = (args) => (
<div className="p-16 flex items-center justify-center min-h-[200px]">
<Tooltip {...args}>
<Button variant="default" size="medium">
<Button buttonType="filled" palette="default" size="medium">
Hover me
</Button>
</Tooltip>
tests/components/Button.test.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ describe("Button (behavioral tests)", () => {
it("renders as a link when href is provided", () => {
render(
<Button href="/learn" variant="default">
<Button href="/learn" buttonType="filled" palette="default">
Learn more
</Button>,
);
tests/components/MultiSelect.test.tsx
+7 -7
View File
@@ -24,7 +24,7 @@ const config: ComponentTestSuiteConfig<Props> = {
size: "S",
palette: "Default",
options: defaultChipOptions,
showAddButton: true,
addButton: true,
addButtonText: "",
} as Props,
requiredProps: ["options"],
@@ -35,7 +35,7 @@ const config: ComponentTestSuiteConfig<Props> = {
palette: "Inverse",
onChipClick: vi.fn(),
onAddClick: vi.fn(),
showAddButton: false,
addButton: false,
addButtonText: "Add",
},
primaryRole: undefined, // MultiSelect contains multiple interactive elements
@@ -83,7 +83,7 @@ describe("MultiSelect – behaviour specifics", () => {
<MultiSelect
options={defaultChipOptions}
onAddClick={handleAddClick}
showAddButton={true}
addButton={true}
addButtonText="Add option"
/>,
);
@@ -100,7 +100,7 @@ describe("MultiSelect – behaviour specifics", () => {
<MultiSelect
options={defaultChipOptions}
onAddClick={handleAddClick}
showAddButton={true}
addButton={true}
addButtonText=""
/>,
);
@@ -127,18 +127,18 @@ describe("MultiSelect – behaviour specifics", () => {
render(
<MultiSelect
options={defaultChipOptions}
showAddButton={true}
addButton={true}
addButtonText="Add option"
/>,
);
expect(screen.getByText("Add option")).toBeInTheDocument();
});
it("does not render add button when showAddButton is false", () => {
it("does not render add button when addButton is false", () => {
render(
<MultiSelect
options={defaultChipOptions}
showAddButton={false}
addButton={false}
/>,
);
expect(screen.queryByRole("button", { name: /add/i })).not.toBeInTheDocument();