[sparkle] - enh: Button (#8147)

* [sparkle] - refactor: streamline spinner component types and animations

 - Refactor spinner size and variant types to use TypeScript const assertions for better type safety
 - Simplify animation selection logic within the Spinner component
 - Replace explicit color mapping with a Record type to associate spinner variants with their respective colors

* [sparkle] - refactor: streamline color assignment in `Spinner` component

 - Eliminate redundant color entry for 'color' variant in the colors mapping
 - Conditionally apply color replacement only for variants other than 'color'

* [sparkle] - refactor: streamlined button component implementation

 - Refactored `Button` component to use radix-ui for slot handling and revamped styling approach
 - Removed unused imports and obsolete code related to previous button implementation
 - Introduced new size and variant handling using `class-variance-authority` for better scalability
 - Implemented conditional rendering for spinners in buttons based on loading state
 - Optimized tooltip integration within button component for better maintainability and readability
 - Adjusted tailwind configuration to align with new button styles and behavior

* [sparkle] - refactor: structure button sizes as a reusable constant

 - Extracted button size classes into 'variantSizes' constant for improved maintainability
 - Refactored button component to use new size constant for consistent sizing application

* [sparkle] - refactor: update Button.tsx and related story

 - Add 'as const' assertion to BUTTON_VARIANTS for more precise typing
 - Remove unused 'secondary' variant from spinnerVariantsMap and spinnerVariantsMapIsLoading
 - Export the ButtonProps interface
 - Clean up and simplify Button.story.tsx by removing extraneous imports and code
 - Ensure consistent formatting with added spaces around Separator component in examples

* [sparkle] - refactor: rename variant variables for button component

 - Rename `variantStyle` to `styleVariants` for better naming consistency
 - Update `variantSizes` to `sizeVariants` to align with the new naming convention
 - Fix spacing and remove extraneous whitespace in button styles config
 - Correct disabled state styles for `outline` button variant

* [sparkle] - refactor: streamline IconButton with Button component

 - Replace custom IconButton implementation with Button component to maintain consistent styling and behavior
 - Remove redundant icon and size class handling in favor of Button's props
 - Utilize Button's variant and size typings directly, enhancing type safety and reducing code duplication

* [sparkle] - refactor: standardize button variant use across components

 - Update several IconButton uses from 'secondary' to 'ghost', aligning with design system standards
 - Change IconButton variant from 'tertiary' to 'outline' in CardButton stories for consistency
 - Adjust various Button components to use 'highlight', 'ghost', or 'outline' variants for a unified look and feel
 - Modify ContextItem stories to use a more suitable button arrangement with updated variants
 - Clean up DropdownMenu stories to employ 'ghost' and 'outline' variants for action buttons
 - Revise Page stories to switch 'secondary' variant usages to 'highlight' or 'ghost' for action consistency

* [sparkle] - refactor: standardize button variants across components

 - Updated button variants to 'outline' for consistency and removed properties related to label visibility and obsolete variants
 - Adjusted IconButton variants for consistent design language across different components
 - Removed redundant and unused button properties to streamline component interfaces

* [sparkle] - refactor: update button and icon variants for consistency

 - Change tertiary button variant to outline in FilterChips component for better visual distinction
 - Update IconButton variant from white to ghost in ZoomableImageCitationWrapper for alignment with design system
 - Ensure ButtonExamplesBySize handles cases where size prop is undefined or null in Button stories

* [sparkle] - refactor: expose ButtonVariantType and revamp IconButton

 - Make ButtonVariantType an exportable type to be used across components
 - Redesign IconButton with cva and style variants to support different visual themes
 - Replace Button component with a button tag and Icon component in IconButton for better customization
 - Change the default IconButton variant from "ghost" to "outline" in Tree.Item component

* [sparkle] - fix: change Tree Item chevron button variant to 'highlight'

 - Improve visibility and user interaction by highlighting the expand/collapse chevron button in Tree component

* [sparkle] - refactor: update IconButton and Button variants from 'ghost' to 'highlight'

 - Changed 'ghost' variant to 'highlight' for IconButton in Banner, Popup, Searchbar, and DropdownMenu stories
 - Updated 'ghost' variant to 'highlight' for Button in Page and DropdownMenu stories
 - Adjusted tooltip text in IconButton stories to reflect variant changes

* [sparkle/src/components] - feature: add size prop to MetaButton component

 - Allow passing a `size` prop to influence the styling of the MetaButton

[sparkle/tailwind.config] - feature: extend highlight color palette in Tailwind configuration

 - Introduce new blue shades for the highlight theme, including defaults and specific light and dark variations
 - Add muted blue to the color palette for more design options

* [sparkle] - refactor: change MetaButtonProps to a non-exported interface

 - Make MetaButtonProps interface internal to prevent external usage

* [sparkle] - refactor: standardize button variants across components

 - Update various components to use 'ghost' variant instead of 'outline' for a consistent UI experience
 - Modify icons and tooltips to enhance user interaction and clarity
 - Adjust specific variants like changing from 'highlight' to 'outline' or 'primary' to 'ghost' where more appropriate

* [sparkle] - refactor: change primary color scheme to blue

 - Update the primary color theming from various shades of slate to corresponding shades of blue across the application
 - Adjust both the default and dark mode color mappings to ensure consistency in UI/UX design

* [sparkle] - refactor: adjust primary color in Tailwind config

 - Change primary color from blue[800] to a lighter blue[500] for better visual aesthetics and consistency across the application

* [sparkle] - fix: update text color for warning button to improve contrast

 - Changed the text color from primary to white on the warning button variant for better readability and visual consistency with other button styles

* [sparkle] - feature: add 'white' button variant to component library

 - Introduced a new 'white' variant for buttons, including its styles and spinner behavior
 - Updated Button stories to showcase the new 'white' button variant with an example

* [sparkle] - feature: add new 'white' style variant to IconButton component

 - Introduce a 'white' style variant with tailored styles for light and dark themes for the IconButton
 - Ensure hover and active states have distinct styles in both light and dark modes to enhance user interaction feedback

* [sparkle] - fix: update button variant styles in DataTable

- Change IconButton variant from "ghost" to "outline" in DataTable component for better visibility and distinction

* [sparkle] - feature: bump package version to 0.2.275

 - Update package and package-lock version for a new release
 - Ensure dependencies remain consistent with the version bump

* [sparkle] - refactor: update button styles in conversation actions

 - Change button variant from "tertiary" to "outline" for a consistent visual style
 - Remove 'labelVisible' prop to streamline button presentation
 - Modify EmojiSelector button to use 'isSelect' for a clearer selection interface

---------

Co-authored-by: Jules <[email protected]>
Co-authored-by: Jules <[email protected]>

sparkle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.274",
+  "version": "0.2.275",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

sparkle/src/components/AssistantPreview.tsx

@@ -146,13 +146,9 @@ const MinimalVariantContent = ({
 }: MinimalVariantAssistantPreviewProps) => {
   const actionButton = actionElement ?? (
     <Button
-      label=""
       icon={MoreIcon}
-      variant="tertiary"
+      variant="ghost"
       size="sm"
-      labelVisible={false}
-      hasMagnifying={false}
-      disabledTooltip={true}
       onClick={(e) => {
         e.stopPropagation();
         onActionClick?.();

sparkle/src/components/Banner.tsx

@@ -50,7 +50,7 @@ export function Banner({
           <IconButton
             icon={XMarkIcon}
             size="sm"
-            variant="secondary"
+            variant="outline"
             onClick={() => {
               setIsDismissed(true);
               if (onDismiss) {

sparkle/src/components/BarHeader.tsx

@@ -83,9 +83,8 @@ BarHeader.ButtonBar = function (props: BarHeaderButtonBarProps) {
         <Button
           size="sm"
           icon={ChevronLeftIcon}
-          variant="tertiary"
-          label="Back"
-          labelVisible={false}
+          variant="ghost"
+          tooltip="Back"
           onClick={props.onBack}
         />
       );
@@ -94,9 +93,8 @@ BarHeader.ButtonBar = function (props: BarHeaderButtonBarProps) {
         <Button
           size="sm"
           icon={XMarkIcon}
-          variant="tertiary"
-          label="Close"
-          labelVisible={false}
+          variant="ghost"
+          tooltip="Close"
           onClick={props.onClose}
         />
       );
@@ -106,7 +104,7 @@ BarHeader.ButtonBar = function (props: BarHeaderButtonBarProps) {
           <Button
             size="sm"
             label="Cancel"
-            variant="tertiary"
+            variant="ghost"
             onClick={props.onCancel}
             disabled={!props.onCancel || props.isSaving}
           />
@@ -128,17 +126,16 @@ BarHeader.ButtonBar = function (props: BarHeaderButtonBarProps) {
         <>
           <Button
             size="sm"
-            label="Delete"
             icon={TrashIcon}
-            variant="tertiary"
-            labelVisible={false}
+            tooltip="Delete"
+            variant="ghost"
             onClick={props.onDelete}
           />
           <Button
             size="sm"
             label="Share"
             icon={ArrowUpOnSquareIcon}
-            variant="tertiary"
+            variant="ghost"
             onClick={props.onShare}
           />
         </>