chore(sparkle): unify button props (always use variant instead of `…

…type`) (#1309)
dust-tt · Sep 7, 2023 · 30fe38c · 30fe38c
1 parent 4570cb3
commit 30fe38c
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 15 deletions.
diff --git 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
@@ -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<HTMLButtonElement>;
   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
@@ -6,7 +6,7 @@ import { Icon, IconProps } from "./Icon";
 import { Tooltip, TooltipProps } from "./Tooltip";
 
 type IconToggleButtonProps = {
-  type?: "secondary" | "tertiary";
+  variant?: "secondary" | "tertiary";
   onClick?: MouseEventHandler<HTMLButtonElement>;
   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
@@ -3,7 +3,7 @@ import React, { MouseEventHandler } from "react";
 import { classNames } from "@sparkle/lib/utils";
 
 type SliderToggleProps = {
-  onClick?: MouseEventHandler<HTMLButtonElement>;
+  onClick?: MouseEventHandler<HTMLElement>;
   className?: string;
   disabled?: boolean;
   selected?: boolean;

diff --git a/sparkle/src/stories/IconButton.stories.tsx b/sparkle/src/stories/IconButton.stories.tsx
@@ -12,15 +12,15 @@ type Story = StoryObj<typeof meta>;
 
 export const IconButtonPrimary: Story = {
   args: {
-    type: "primary",
+    variant: "primary",
     size: "md",
     icon: Cog6ToothIcon,
   },
 };
 
 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
@@ -16,7 +16,7 @@ type Story = StoryObj<typeof meta>;
 
 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
@@ -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,
     },
   },