Ed nav item update (#9133)

* Making more button for NavItem * Story fix * Fixing SplitButton, creating a new more consistent SplitButton2 * cleaning * [sparkle] - refactor: streamline Button component and introduce FlexSplitButton - Consolidated button sizes by adding 'mini' to BUTTON_SIZES and removing separate MINI_BUTTON_SIZE handling - Removed MiniButton component and updated references to utilize Button with 'mini' size - Introduced FlexSplitButton as a new component for split button functionality, replacing SplitButton2 - Updated import statements to reflect the removal of MiniButton and SplitButton2, adding the new FlexSplitButton - Modified Playground.stories.tsx to demonstrate the new FlexSplitButton usage with 'mini' button size * [sparkle] - refactor: adjust Button component props and usage - Removed 'size' prop from MetaButtonProps interface, aligning it with buttonVariants - Updated ButtonProps to inherit changes from MetaButtonProps, dropping 'size' - Replaced MiniButton with Button component and added 'size' prop inline in NavigationList - Modified SplitButton to default 'size' prop to undefined if not provided * [sparkle] - refactor: improve readability of FeedbackSelector component classNames - Expand ternary operations in `FeedbackSelector.tsx` for `className` prop to enhance code clarity [sparkle] - refactor: remove deprecated SidebarMenuButton component - Delete the commented-out SidebarMenuButton component from `NavigationList.tsx` as it is no longer used * [sparkle] - feature: add prop to hide ScrollBar in ScrollArea component - Introduces `hideScrollBar` as an optional boolean prop to allow conditional rendering of scrollbar - The ScrollArea component now can be used without displaying its scrollbar for a cleaner design when necessary * [sparkle] - refactor: export ScrollAreaProps interface - Make ScrollAreaProps available for import in other components or modules --------- Co-authored-by: JulesBelveze <[email protected]>
dust-tt · Dec 5, 2024 · 6d8fa0d · 6d8fa0d
1 parent 930d9a5
commit 6d8fa0d
Show file tree

Hide file tree

Showing 9 changed files with 252 additions and 96 deletions.
diff --git a/front/pages/w/[wId]/builder/assistants/create.tsx b/front/pages/w/[wId]/builder/assistants/create.tsx
@@ -233,7 +233,7 @@ export default function CreateAssistant({
                   .map((tagName) => (
                     <Button
                       label={templateTagsMapping[tagName].label}
-                      variant="ghost"
+                      variant="outline"
                       key={tagName}
                       size="xs"
                       onClick={() => scrollToTag(tagName)}

diff --git a/sparkle/src/components/Button.tsx b/sparkle/src/components/Button.tsx
@@ -2,15 +2,17 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { Icon } from "@sparkle/components/Icon";
-import { LinkWrapper, LinkWrapperProps } from "@sparkle/components/LinkWrapper";
-import Spinner, { SpinnerProps } from "@sparkle/components/Spinner";
 import {
+  Icon,
+  LinkWrapper,
+  LinkWrapperProps,
+  Spinner,
   TooltipContent,
   TooltipProvider,
   TooltipRoot,
   TooltipTrigger,
-} from "@sparkle/components/Tooltip";
+} from "@sparkle/components/";
+import { SpinnerProps } from "@sparkle/components/Spinner";
 import { ChevronDownIcon } from "@sparkle/icons";
 import { cn } from "@sparkle/lib/utils";
 
@@ -25,8 +27,7 @@ export const BUTTON_VARIANTS = [
 
 export type ButtonVariantType = (typeof BUTTON_VARIANTS)[number];
 
-export const BUTTON_SIZES = ["xs", "sm", "md"] as const;
-
+export const BUTTON_SIZES = ["mini", "xs", "sm", "md"] as const;
 export type ButtonSizeType = (typeof BUTTON_SIZES)[number];
 
 const styleVariants: Record<ButtonVariantType, string> = {
@@ -48,6 +49,7 @@ const sizeVariants: Record<ButtonSizeType, string> = {
   xs: "s-h-7 s-px-2.5 s-rounded-lg s-text-xs s-gap-1.5",
   sm: "s-h-9 s-px-3 s-rounded-xl s-text-sm s-gap-2",
   md: "s-h-12 s-px-4 s-py-2 s-rounded-2xl s-text-base s-gap-2.5",
+  mini: "s-h-7 s-p-1.5 s-rounded-lg s-text-sm s-gap-1.5",
 };
 
 const buttonVariants = cva(
@@ -90,18 +92,11 @@ export interface MetaButtonProps
 }
 
 const MetaButton = React.forwardRef<HTMLButtonElement, MetaButtonProps>(
-  (
-    { className, variant, size = "sm", asChild = false, children, ...props },
-    ref
-  ) => {
+  ({ className, asChild = false, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
 
     return (
-      <Comp
-        className={cn(variant && buttonVariants({ variant, size }), className)}
-        ref={ref}
-        {...props}
-      >
+      <Comp className={className} ref={ref} {...props}>
         {children}
       </Comp>
     );
@@ -118,19 +113,21 @@ export interface ButtonProps
   isLoading?: boolean;
   isPulsing?: boolean;
   tooltip?: string;
+  size?: ButtonSizeType;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       label,
       icon,
+      className,
       isLoading = false,
       variant = "primary",
       tooltip,
       isSelect = false,
       isPulsing = false,
-      size,
+      size = "sm",
       href,
       target,
       rel,
@@ -141,20 +138,21 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     },
     ref
   ) => {
-    const buttonSize = size || "sm";
+    const iconsSize = size === "mini" ? "sm" : size;
+
     const spinnerVariant = isLoading
       ? (variant && spinnerVariantsMapIsLoading[variant]) || "slate400"
       : (variant && spinnerVariantsMap[variant]) || "slate400";
 
     const renderIcon = (visual: React.ComponentType, extraClass = "") => (
-      <Icon visual={visual} size={buttonSize} className={extraClass} />
+      <Icon visual={visual} size={iconsSize} className={extraClass} />
     );
 
     const content = (
       <>
         {isLoading ? (
           <div className="-s-mx-0.5">
-            <Spinner size={buttonSize} variant={spinnerVariant} />
+            <Spinner size={iconsSize} variant={spinnerVariant} />
           </div>
         ) : (
           icon && renderIcon(icon, "-s-mx-0.5")
@@ -167,10 +165,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const innerButton = (
       <MetaButton
         ref={ref}
-        size={buttonSize}
-        variant={variant}
+        size={size}
         disabled={isLoading || props.disabled}
-        className={isPulsing ? "s-animate-pulse" : ""}
+        className={cn(
+          buttonVariants({ variant, size }),
+          isPulsing && "s-animate-pulse",
+          className
+        )}
         aria-label={ariaLabel || tooltip || label}
         style={
           {
@@ -211,4 +212,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   }
 );
 
+Button.displayName = "Button";
+
 export { Button, buttonVariants, MetaButton };
diff --git a/sparkle/src/components/FeedbackSelector.tsx b/sparkle/src/components/FeedbackSelector.tsx
@@ -84,7 +84,11 @@ export function FeedbackSelector({
                   disabled={isSubmittingThumb}
                   onClick={() => selectThumb("up")}
                   icon={HandThumbUpIcon}
-                  className={feedback?.thumb === "up" ? "" : "[&_svg]:s-text-muted-foreground"}
+                  className={
+                    feedback?.thumb === "up"
+                      ? ""
+                      : "[&_svg]:s-text-muted-foreground"
+                  }
                 />
               }
             />
@@ -97,7 +101,11 @@ export function FeedbackSelector({
                   disabled={isSubmittingThumb}
                   onClick={() => selectThumb("down")}
                   icon={HandThumbDownIcon}
-                  className={feedback?.thumb === "down" ? "" : "[&_svg]:s-text-muted-foreground"}
+                  className={
+                    feedback?.thumb === "down"
+                      ? ""
+                      : "[&_svg]:s-text-muted-foreground"
+                  }
                 />
               }
             />

diff --git a/sparkle/src/components/NavigationList.tsx b/sparkle/src/components/NavigationList.tsx
@@ -1,8 +1,9 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 
-import { Icon } from "@sparkle/components/Icon";
-import { LinkWrapper, LinkWrapperProps } from "@sparkle/components/LinkWrapper";
+import { Icon, LinkWrapper, LinkWrapperProps } from "@sparkle/components/";
+import { Button } from "@sparkle/components/Button";
+import { MoreIcon } from "@sparkle/icons";
 import { cn } from "@sparkle/lib/utils";
 
 const listStyles = cva("s-flex", {
@@ -81,7 +82,13 @@ const NavigationListItem = React.forwardRef<
     };
 
     return (
-      <div className={className} ref={ref} {...props}>
+      <div
+        className={cn("s-group/menu-item s-relative", className)}
+        ref={ref}
+        data-nav="menu-button"
+        data-selected={selected}
+        {...props}
+      >
         <LinkWrapper
           href={href}
           target={target}
@@ -90,14 +97,17 @@ const NavigationListItem = React.forwardRef<
           shallow={shallow}
         >
           <div
-            className={listStyles({
-              layout: "item",
-              state: selected
-                ? "selected"
-                : isPressed
-                  ? "active"
-                  : "unselected",
-            })}
+            className={cn(
+              "s-peer/menu-button",
+              listStyles({
+                layout: "item",
+                state: selected
+                  ? "selected"
+                  : isPressed
+                    ? "active"
+                    : "unselected",
+              })
+            )}
             onMouseLeave={() => {
               setIsPressed(false);
             }}
@@ -106,23 +116,45 @@ const NavigationListItem = React.forwardRef<
           >
             {icon && <Icon visual={icon} size="sm" />}
             {label && (
-              <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap">
+              <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap group-hover/menu-item:s-pr-8 group-data-[selected=true]/menu-item:s-pr-8">
                 {label}
               </span>
             )}
-            {selected && moreMenu && (
-              <div className="-s-mr-2 s-flex s-h-4 s-items-center">
-                {moreMenu}
-              </div>
-            )}
           </div>
         </LinkWrapper>
+        {moreMenu && <>{moreMenu}</>}
       </div>
     );
   }
 );
 NavigationListItem.displayName = "NavigationListItem";
 
+interface NavigationListItemActionProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  showOnHover?: boolean;
+}
+
+const NavigationListItemAction = React.forwardRef<
+  HTMLDivElement,
+  NavigationListItemActionProps
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "s-absolute s-right-1.5 s-top-1 s-opacity-0 s-transition-opacity",
+        "s-opacity-0 group-focus-within/menu-item:s-opacity-100 group-hover/menu-item:s-opacity-100 group-data-[selected=true]/menu-item:s-opacity-100",
+        className
+      )}
+      {...props}
+    >
+      <Button size="mini" icon={MoreIcon} variant="ghost" />
+    </div>
+  );
+});
+NavigationListItemAction.displayName = "NavigationListItemAction";
+
 const variantStyles = cva("", {
   variants: {
     variant: {
@@ -156,4 +188,9 @@ const NavigationListLabel = React.forwardRef<
 
 NavigationListLabel.displayName = "NavigationListLabel";
 
-export { NavigationList, NavigationListItem, NavigationListLabel };
+export {
+  NavigationList,
+  NavigationListItem,
+  NavigationListItemAction,
+  NavigationListLabel,
+};
diff --git a/sparkle/src/components/ScrollArea.tsx b/sparkle/src/components/ScrollArea.tsx
@@ -3,10 +3,15 @@ import * as React from "react";
 
 import { cn } from "@sparkle/lib/utils";
 
+export interface ScrollAreaProps
+  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+  hideScrollBar?: boolean;
+}
+
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+  ScrollAreaProps
+>(({ className, children, hideScrollBar = false, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn("s-relative s-z-20 s-overflow-hidden", className)}
@@ -15,7 +20,7 @@ const ScrollArea = React.forwardRef<
     <ScrollAreaPrimitive.Viewport className="s-h-full s-w-full s-rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
+    {!hideScrollBar && <ScrollBar />}
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));