From 30fe38c786b481f79cb738a73bf398cab74205ad Mon Sep 17 00:00:00 2001 From: Henry Fontanier Date: Thu, 7 Sep 2023 17:15:19 +0200 Subject: [PATCH] chore(sparkle): unify button props (always use `variant` instead of `type`) (#1309) --- sparkle/package.json | 2 +- sparkle/src/components/IconButton.tsx | 6 +++--- sparkle/src/components/IconToggleButton.tsx | 6 +++--- sparkle/src/components/SliderToggle.tsx | 2 +- sparkle/src/stories/IconButton.stories.tsx | 8 ++++---- sparkle/src/stories/IconToggleButton.stories.tsx | 4 ++-- sparkle/src/stories/SectionHeader.stories.tsx | 2 +- 7 files changed, 15 insertions(+), 15 deletions(-) diff --git a/sparkle/package.json b/sparkle/package.json index 2e99e96b7b34..9969c0e05366 100644 --- a/sparkle/package.json +++ b/sparkle/package.json @@ -1,6 +1,6 @@ { "name": "@dust-tt/sparkle", - "version": "0.1.46", + "version": "0.1.47", "scripts": { "build": "rm -rf dist && rollup -c", "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true", diff --git a/sparkle/src/components/IconButton.tsx b/sparkle/src/components/IconButton.tsx index 97f4cf357149..75e5aafeffef 100644 --- a/sparkle/src/components/IconButton.tsx +++ b/sparkle/src/components/IconButton.tsx @@ -6,7 +6,7 @@ import { Icon, IconProps } from "./Icon"; import { Tooltip, TooltipProps } from "./Tooltip"; type IconButtonProps = { - type?: "primary" | "warning" | "secondary" | "tertiary"; + variant?: "primary" | "warning" | "secondary" | "tertiary"; onClick?: MouseEventHandler; size?: "xs" | "sm" | "md"; tooltip?: string; @@ -71,7 +71,7 @@ const iconClasses = { }; export function IconButton({ - type = "tertiary", + variant = "tertiary", onClick, disabled = false, tooltip, @@ -81,7 +81,7 @@ export function IconButton({ size = "sm", }: IconButtonProps) { // Choose the correct group of classes based on 'type' - const iconGroup = iconClasses[type]; + const iconGroup = iconClasses[variant]; const finalIconClasses = classNames( className, diff --git a/sparkle/src/components/IconToggleButton.tsx b/sparkle/src/components/IconToggleButton.tsx index c9e944f85310..98791a7245c5 100644 --- a/sparkle/src/components/IconToggleButton.tsx +++ b/sparkle/src/components/IconToggleButton.tsx @@ -6,7 +6,7 @@ import { Icon, IconProps } from "./Icon"; import { Tooltip, TooltipProps } from "./Tooltip"; type IconToggleButtonProps = { - type?: "secondary" | "tertiary"; + variant?: "secondary" | "tertiary"; onClick?: MouseEventHandler; size?: "xs" | "sm" | "md"; tooltip?: string; @@ -53,7 +53,7 @@ const iconClasses = { }; export function IconToggleButton({ - type = "tertiary", + variant = "tertiary", onClick, disabled = false, tooltip, @@ -64,7 +64,7 @@ export function IconToggleButton({ selected = false, size = "sm", }: IconToggleButtonProps) { - const iconGroup = iconClasses[type]; + const iconGroup = iconClasses[variant]; const finalIconClasses = classNames( className, baseClasses, diff --git a/sparkle/src/components/SliderToggle.tsx b/sparkle/src/components/SliderToggle.tsx index 09f6246d5889..506d1d77cb5b 100644 --- a/sparkle/src/components/SliderToggle.tsx +++ b/sparkle/src/components/SliderToggle.tsx @@ -3,7 +3,7 @@ import React, { MouseEventHandler } from "react"; import { classNames } from "@sparkle/lib/utils"; type SliderToggleProps = { - onClick?: MouseEventHandler; + onClick?: MouseEventHandler; className?: string; disabled?: boolean; selected?: boolean; diff --git a/sparkle/src/stories/IconButton.stories.tsx b/sparkle/src/stories/IconButton.stories.tsx index e30ff29871a9..34b32b38d451 100644 --- a/sparkle/src/stories/IconButton.stories.tsx +++ b/sparkle/src/stories/IconButton.stories.tsx @@ -12,7 +12,7 @@ type Story = StoryObj; export const IconButtonPrimary: Story = { args: { - type: "primary", + variant: "primary", size: "md", icon: Cog6ToothIcon, }, @@ -20,7 +20,7 @@ export const IconButtonPrimary: Story = { export const IconButtonWithTooltip: Story = { args: { - type: "primary", + variant: "primary", tooltip: "Your settings", tooltipPosition: "below", icon: Cog6ToothIcon, @@ -29,7 +29,7 @@ export const IconButtonWithTooltip: Story = { export const IconButtonSecondary: Story = { args: { - type: "secondary", + variant: "secondary", tooltip: "This a secondary IconButton", tooltipPosition: "below", icon: Cog6ToothIcon, @@ -38,7 +38,7 @@ export const IconButtonSecondary: Story = { export const IconButtonTertiary: Story = { args: { - type: "tertiary", + variant: "tertiary", tooltip: "This a tertiary IconButton", tooltipPosition: "below", icon: Cog6ToothIcon, diff --git a/sparkle/src/stories/IconToggleButton.stories.tsx b/sparkle/src/stories/IconToggleButton.stories.tsx index ab6d12d71486..51926fe3fa92 100644 --- a/sparkle/src/stories/IconToggleButton.stories.tsx +++ b/sparkle/src/stories/IconToggleButton.stories.tsx @@ -16,7 +16,7 @@ type Story = StoryObj; export const IconToggleButtonSecondary: Story = { args: { - type: "secondary", + variant: "secondary", tooltip: "This a secondary IconButton", icon: Cog6ToothStrokeIcon, iconSelected: Cog6ToothIcon, @@ -26,7 +26,7 @@ export const IconToggleButtonSecondary: Story = { export const IconToggleButtonTertiary: Story = { args: { - type: "tertiary", + variant: "tertiary", tooltip: "This a tertiary IconButton", icon: Cog6ToothIcon, selected: false, diff --git a/sparkle/src/stories/SectionHeader.stories.tsx b/sparkle/src/stories/SectionHeader.stories.tsx index 1f1f5ad22577..eda1a83d5677 100644 --- a/sparkle/src/stories/SectionHeader.stories.tsx +++ b/sparkle/src/stories/SectionHeader.stories.tsx @@ -20,7 +20,7 @@ export const BasicPageHeader: Story = { "This is an optional short description of the section that says stuff about it. Lorem ipsum dolor sit amet, consectetur adipiscing elit.", action: { label: "Add a new Data Source", - type: "secondary", + variant: "secondary", icon: ChatBubbleBottomCenterPlusIcon, }, },