@dust-tt/sparkle 0.2.528 → 0.2.529-rc-2

package/src/components/LinkWrapper.tsx

@@ -10,29 +10,36 @@ export interface LinkWrapperProps {
   shallow?: boolean;
   target?: string;
   prefetch?: boolean;
+  disabled?: boolean;
 }
 
 export const LinkWrapper = React.forwardRef<
   HTMLAnchorElement,
   LinkWrapperProps
->(({ children, href, rel, replace, shallow, target, prefetch }, ref) => {
-  const { components } = React.useContext(SparkleContext);
+>(
+  (
+    { children, href, rel, replace, shallow, target, prefetch, disabled },
+    ref
+  ) => {
+    const { components } = React.useContext(SparkleContext);
 
-  if (href) {
-    return (
-      <components.link
-        ref={ref}
-        href={href}
-        target={target}
-        rel={rel}
-        replace={replace}
-        shallow={shallow}
-        prefetch={prefetch}
-      >
-        {children}
-      </components.link>
-    );
-  }
+    if (href) {
+      return (
+        <components.link
+          ref={ref}
+          href={href}
+          target={target}
+          rel={rel}
+          replace={replace}
+          shallow={shallow}
+          prefetch={prefetch}
+          disabled={disabled}
+        >
+          {children}
+        </components.link>
+      );
+    }
 
-  return children;
-});
+    return children;
+  }
+);

package/src/components/SplitButton.tsx

@@ -1,14 +1,17 @@
 import React, { useState } from "react";
 
 import {
-  ButtonProps,
+  ButtonAsButtonProps,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  RegularButtonProps,
 } from "@sparkle/components/";
-import { Button, ButtonVariantType } from "@sparkle/components/Button";
+import {
+  Button,
+  ButtonProps,
+  ButtonVariantType,
+} from "@sparkle/components/Button";
 import { Separator } from "@sparkle/components/Separator";
 import { ChevronDownIcon } from "@sparkle/icons/app";
 import { cn } from "@sparkle/lib";
@@ -23,7 +26,7 @@ interface SplitButtonActionProps {
 }
 
 export interface SplitButtonProps
-  extends Omit<RegularButtonProps, "children" | "onClick"> {
+  extends Omit<ButtonAsButtonProps, "children" | "onClick"> {
   /**
    * List of possible actions, will be displayed in dropdown
    */
@@ -130,9 +133,10 @@ const flexSeparatorVariants: Record<ButtonVariantType, string> = {
   "ghost-secondary": "s-bg-separator dark:s-bg-separator-night",
 };
 
-export interface FlexSplitButtonProps extends Omit<ButtonProps, "size"> {
+export interface FlexSplitButtonProps
+  extends Omit<ButtonAsButtonProps, "size"> {
   containerClassName?: string;
-  splitAction: React.ReactElement<React.ComponentProps<typeof Button>>;
+  splitAction: React.ReactElement<ButtonProps>;
 }
 
 const FlexSplitButton = React.forwardRef<

package/src/components/Tabs.tsx

@@ -3,7 +3,7 @@ import { cva, VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { ScrollArea, ScrollBar } from "@sparkle/components/";
-import { Button } from "@sparkle/components/Button";
+import { Button, ButtonProps } from "@sparkle/components/Button";
 import { LinkWrapperProps } from "@sparkle/components/LinkWrapper";
 import { cn } from "@sparkle/lib/utils";
 
@@ -47,7 +47,7 @@ const TabsTrigger = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> &
     Partial<
       Pick<
-        React.ComponentProps<typeof Button>,
+        ButtonProps,
         "label" | "tooltip" | "icon" | "isCounter" | "counterValue" | "variant"
       >
     > & {
@@ -88,7 +88,7 @@ const TabsTrigger = React.forwardRef<
           tooltip={tooltip}
           icon={icon}
           disabled={disabled}
-          href={href}
+          href={href ?? ""}
           target={target}
           rel={rel}
           replace={replace}

package/src/components/index.ts

@@ -11,9 +11,9 @@ export { BarHeader } from "./BarHeader";
 export type { BreadcrumbItem } from "./Breadcrumbs";
 export { Breadcrumbs } from "./Breadcrumbs";
 export type {
+  ButtonAsButtonProps,
   ButtonProps,
-  MiniButtonProps,
-  RegularButtonProps,
+  MiniButtonAsButtonProps,
 } from "./Button";
 export { Button } from "./Button";
 export type { CardProps } from "./Card";

package/src/context.tsx

@@ -2,6 +2,8 @@ import React, { ComponentType, MouseEvent, ReactNode } from "react";
 import type { UrlObject } from "url";
 import url from "url";
 
+import { cn } from "./lib/utils";
+
 type SparkleLinkProps = {
   href: string | UrlObject;
   className?: string;
@@ -22,6 +24,7 @@ type SparkleLinkProps = {
   target?: string;
   rel?: string;
   prefetch?: boolean;
+  disabled?: boolean;
 };
 
 export type SparkleContextLinkType = ComponentType<
@@ -34,12 +37,24 @@ export type SparkleContextType = {
   };
 };
 
+// To mimic disabled button behavior, we disable pointer events
+// if disabled is true.
 export const aLink: SparkleContextLinkType = React.forwardRef<
   HTMLAnchorElement,
   SparkleLinkProps
 >(
   (
-    { href, className, ariaCurrent, ariaLabel, onClick, children, target, rel },
+    {
+      href,
+      className,
+      ariaCurrent,
+      ariaLabel,
+      onClick,
+      children,
+      target,
+      rel,
+      disabled,
+    },
     ref
   ) => {
     const hrefAsString = typeof href !== "string" ? url.format(href) : href;
@@ -48,7 +63,7 @@ export const aLink: SparkleContextLinkType = React.forwardRef<
       <a
         ref={ref}
         href={hrefAsString}
-        className={className}
+        className={cn(className, disabled && "s-pointer-events-none")}
         aria-current={ariaCurrent}
         aria-label={ariaLabel}
         onClick={onClick}
@@ -64,10 +79,9 @@ export const aLink: SparkleContextLinkType = React.forwardRef<
 export const noHrefLink: SparkleContextLinkType = React.forwardRef<
   HTMLAnchorElement,
   SparkleLinkProps
->(({ className, ariaCurrent, ariaLabel, onClick, children }, ref) => (
+>(({ ariaCurrent, ariaLabel, onClick, children }, ref) => (
   <a
     ref={ref}
-    className={className}
     aria-current={ariaCurrent}
     aria-label={ariaLabel}
     onClick={onClick}

package/src/stories/Button.stories.tsx

@@ -120,6 +120,13 @@ const ButtonBySize = ({
         label="Button with href"
         href="hello"
       />
+      <Button
+        size={size}
+        variant="primary"
+        label="Button with href and disabled"
+        href="hello"
+        disabled={true}
+      />
     </div>
     <div className="s-flex s-items-center s-gap-4">
       <Button size={size} label="Button" isLoading />
@@ -140,10 +147,23 @@ const ButtonBySize = ({
 
 export const Gallery: Story = {
   render: () => (
-    <div className="s-flex s-flex-col s-gap-4">
-      <ButtonBySize size="xs" />
-      <ButtonBySize size="sm" />
-      <ButtonBySize size="md" />
+    <div className="s-flex s-flex-col s-gap-6">
+      <div className="s-flex s-flex-col s-gap-4">
+        <ButtonBySize size="xs" />
+        <ButtonBySize size="sm" />
+        <ButtonBySize size="md" />
+      </div>
+      <Separator />
+      <h3 className="s-text-primary dark:s-text-primary-50">With tooltip</h3>
+      <div className="s-flex s-gap-4">
+        <Button label="Button with tooltip" tooltip="Hello" />
+        <Button
+          label="Button as link with tooltip"
+          href="https://dust.tt"
+          target="_blank"
+          tooltip="Hello"
+        />
+      </div>
     </div>
   ),
 };

package/src/stories/EmptyCTA.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
 
-import { Button, EmptyCTA, EmptyCTAButton } from "@sparkle/components";
-import { CloudArrowDownIcon, PlusIcon } from "@sparkle/icons/app";
+import { EmptyCTA, EmptyCTAButton } from "@sparkle/components";
+import { CloudArrowDownIcon } from "@sparkle/icons/app";
 
 const meta = {
   title: "Components/EmptyCTA",
@@ -12,7 +12,7 @@ export default meta;
 
 export const Demo = () => {
   return (
-    <div className="s-flex s-flex-col s-gap-4">
+    <div>
       <div className="s-flex s-items-center s-space-x-2">
         <EmptyCTA
           action={
@@ -24,9 +24,6 @@ export const Demo = () => {
           message="You don't have any spaces yet."
         />
       </div>
-      <div className="s-flex s-items-center s-space-x-2">
-        <EmptyCTA action={<Button icon={PlusIcon} label="Add domain" />} />
-      </div>
     </div>
   );
 };