@dust-tt/sparkle 0.2.271 → 0.2.272-rc-2

package/src/stories/ContextItem.stories.tsx

@@ -78,20 +78,15 @@ export const ListItemExample = () => (
         title="Slack"
         visual={<ContextItem.Visual visual={SlackLogo} />}
         action={
-          <Button.List>
+          <div className="s-flex s-gap-1">
+            <Button icon={TrashIcon} variant="warning" label="Remove" />
             <Button
-              icon={TrashIcon}
-              variant="secondaryWarning"
-              label="Remove"
-              labelVisible={false}
-            />
-            <Button
-              variant="secondary"
+              variant="outline"
               label="Edit"
               size="sm"
               icon={PencilSquareIcon}
             />
-          </Button.List>
+          </div>
         }
       >
         <ContextItem.Description description="Hello you" />
@@ -126,7 +121,7 @@ export const ListItemExample = () => (
         subElement={<>By: Edouard Wautier, Amira Hadad</>}
         action={
           <Button
-            variant="secondary"
+            variant="outline"
             label="Manage"
             size="sm"
             icon={Cog6ToothIcon}
@@ -146,7 +141,7 @@ export const ListItemExample = () => (
         subElement={<>By: Edouard Wautier, Amira Hadad</>}
         action={
           <Button
-            variant="secondary"
+            variant="outline"
             label="Manage"
             size="sm"
             icon={Cog6ToothIcon}

package/src/stories/Dialog.stories.tsx

@@ -42,7 +42,7 @@ export const DialogExample = () => {
           cancelLabel="Cancel"
           onValidate={() => setisOpen2(false)}
           onCancel={() => setisOpen2(false)}
-          validateVariant="primaryWarning"
+          validateVariant="warning"
         >
           <div>I'm the modal content</div>
         </Dialog>

package/src/stories/DropdownMenu.stories.tsx

@@ -112,12 +112,7 @@ export const DropdownExample = () => {
         <div className="s-text-sm">Custom Dropdown:</div>
         <DropdownMenu>
           <DropdownMenu.Button>
-            <Button
-              label="Advanced settings"
-              variant="tertiary"
-              size="sm"
-              type="select"
-            />
+            <Button label="Advanced settings" variant="outline" size="sm" />
           </DropdownMenu.Button>
           <DropdownMenu.Items width={300} overflow="visible">
             <div className="s-flex s-flex-col s-gap-4">
@@ -127,14 +122,7 @@ export const DropdownExample = () => {
                 </div>
                 <DropdownMenu>
                   <DropdownMenu.Button>
-                    <Button
-                      type="select"
-                      labelVisible={true}
-                      label="GPT4"
-                      variant="tertiary"
-                      hasMagnifying={false}
-                      size="sm"
-                    />
+                    <Button label="GPT4" variant="outline" size="sm" />
                   </DropdownMenu.Button>
                   <DropdownMenu.Items origin="topRight">
                     {["GPT4", "GPT3", "GPT2", "GPT1"].map((item) => (
@@ -158,14 +146,7 @@ export const DropdownExample = () => {
                 </div>
                 <DropdownMenu>
                   <DropdownMenu.Button>
-                    <Button
-                      type="select"
-                      labelVisible={true}
-                      label="Balanced"
-                      variant="tertiary"
-                      hasMagnifying={false}
-                      size="sm"
-                    />
+                    <Button label="Balanced" variant="outline" size="sm" />
                   </DropdownMenu.Button>
                   <DropdownMenu.Items origin="topRight">
                     {["Deterministic", "Factual", "Balanced", "Creative"].map(
@@ -215,14 +196,14 @@ export const DropdownExample = () => {
                   <div className="s-flex s-border-t s-border-structure-50 s-p-2">
                     <Button
                       label="Manage"
-                      variant="tertiary"
+                      variant="outline"
                       size="xs"
                       icon={ListIcon}
                     />
                     <div className="s-flex-grow" />
                     <Button
                       label="New"
-                      variant="secondary"
+                      variant="outline"
                       size="xs"
                       icon={PlusIcon}
                       onClick={close}
@@ -466,7 +447,7 @@ export const DropdownExample = () => {
         <DropdownMenu>
           <DropdownMenu.Button>
             <Button
-              variant="tertiary"
+              variant="outline"
               size="xs"
               icon={EyeIcon}
               label="See the error"
@@ -479,10 +460,10 @@ export const DropdownExample = () => {
               </div>
               <div className="self-end">
                 <Button
-                  variant="tertiary"
+                  variant="outline"
                   size="xs"
                   icon={DocumentDuplicateIcon}
-                  label={"Copy"}
+                  label="Copy"
                   onClick={() =>
                     void navigator.clipboard.writeText("Hello error messange!")
                   }

package/src/stories/IconButton.stories.tsx

@@ -29,8 +29,8 @@ export const IconButtonWithTooltip: Story = {
 
 export const IconButtonSecondary: Story = {
   args: {
-    variant: "secondary",
-    tooltip: "This a secondary IconButton",
+    variant: "highlight",
+    tooltip: "This a highlight IconButton",
     tooltipPosition: "bottom",
     icon: Cog6ToothIcon,
   },
@@ -38,8 +38,8 @@ export const IconButtonSecondary: Story = {
 
 export const IconButtonTertiary: Story = {
   args: {
-    variant: "tertiary",
-    tooltip: "This a tertiary IconButton",
+    variant: "ghost",
+    tooltip: "This a ghost IconButton",
     tooltipPosition: "bottom",
     icon: Cog6ToothIcon,
   },

package/src/stories/Modal.stories.tsx

@@ -60,9 +60,8 @@ export const ModalExample = () => {
         isOpen={isOpenWithActionAndChange}
         onClose={() => setIsOpenWithActionAndChange(false)}
         action={{
-          labelVisible: true,
           label: "An action",
-          variant: "tertiary",
+          variant: "outline",
           size: "xs",
         }}
         saveLabel="Save (custom name possible)"

package/src/stories/NewDropdown.stories.tsx

@@ -196,14 +196,7 @@ function ModelsDropdownDemo() {
   return (
     <NewDropdownMenu>
       <NewDropdownMenuTrigger>
-        <Button
-          type="select"
-          labelVisible={true}
-          label={selectedModel}
-          variant="secondary"
-          hasMagnifying={false}
-          size="sm"
-        />
+        <Button label={selectedModel} variant="outline" size="sm" />
       </NewDropdownMenuTrigger>
       <NewDropdownMenuContent>
         <NewDropdownMenuLabel label="Best performing models" />
@@ -251,14 +244,7 @@ function ModelsDropdownRadioGroupDemo() {
   return (
     <NewDropdownMenu>
       <NewDropdownMenuTrigger>
-        <Button
-          type="select"
-          labelVisible={true}
-          label={selectedModel}
-          variant="secondary"
-          hasMagnifying={false}
-          size="sm"
-        />
+        <Button label={selectedModel} variant="ghost" size="sm" />
       </NewDropdownMenuTrigger>
       <NewDropdownMenuContent>
         <NewDropdownMenuRadioGroup

package/src/stories/Page.stories.tsx

@@ -229,7 +229,7 @@ export const PageExample = () => {
         </ContextItem>
         <ContextItem
           title="@SalesFr"
-          action={<Button variant="secondary" label="Manage" size="sm" />}
+          action={<Button variant="outline" label="Manage" size="sm" />}
           visual={
             <Avatar
               visual="https://dust.tt/static/droidavatar/Droid_Indigo_4.jpg"
@@ -241,7 +241,7 @@ export const PageExample = () => {
         </ContextItem>
         <ContextItem
           title="@SupportFr"
-          action={<Button variant="secondary" label="Manage" size="sm" />}
+          action={<Button variant="outline" label="Manage" size="sm" />}
           visual={
             <Avatar
               visual="https://dust.tt/static/droidavatar/Droid_Pink_4.jpg"
@@ -282,7 +282,7 @@ export const AssistantBuilder = () => {
             size="xl"
             visual="https://dust.tt/static/droidavatar/Droid_Black_2.jpg/"
           />
-          <Button size="sm" variant="tertiary" label="Change" />
+          <Button size="sm" variant="outline" label="Change" />
         </Page.Layout>
       </Page.Layout>
       <Page.Separator />
@@ -365,22 +365,19 @@ export const HelpExample = () => {
         <Page.SectionHeader title="Frequently asked questions" />
         <Page.Layout direction="fluid" gap="sm">
           <Button
-            variant="secondary"
+            variant="outline"
             label="Hey @helper, how do I use the assistant?"
             icon={ChatBubbleLeftRightIcon}
-            hasMagnifying={false}
           />
           <Button
-            variant="secondary"
+            variant="outline"
             label="Hey @helper, What is assistant not good at?"
             icon={ChatBubbleLeftRightIcon}
-            hasMagnifying={false}
           />
           <Button
-            variant="secondary"
+            variant="outline"
             label="Hey @helper, Anything I should know?"
             icon={ChatBubbleLeftRightIcon}
-            hasMagnifying={false}
           />
         </Page.Layout>
       </Page.Layout>

package/src/stories/Popover.stories.tsx

@@ -23,7 +23,7 @@ export default meta;
 export function SimplePopoverExample() {
   return (
     <Popover
-      trigger={<Button label="Popover" variant="secondary" />}
+      trigger={<Button label="Popover" variant="outline" />}
       content={
         <div className="s-grid s-gap-2 s-p-2">
           <p>Lorem</p>

package/src/stories/RadioGroup.stories.tsx

@@ -37,27 +37,24 @@ export const RadioGroupExample = () => {
         <div className="s-flex s-items-center s-space-x-2">
           <RadioGroupItem
             value="option-one"
-            id="option-one"
+            id="option-four"
             size="sm"
             tooltipMessage="This is a nice tooltip message"
-            disabled
-            tooltipAsChild
           />
           <Label htmlFor="option-one">Option One</Label>
         </div>
         <div className="s-flex s-items-center s-space-x-2">
           <RadioGroupItem
             value="option-two"
-            id="option-two"
+            id="option-five"
             size="sm"
-            disabled={true}
-            checked
+            disabled
           />
           <Label htmlFor="option-two">Option Two</Label>
         </div>
         <div className="s-flex s-items-center s-space-x-2">
-          <RadioGroupItem value="option-three" id="option-three" size="sm" />
-          <Label htmlFor="option-two">Option Three</Label>
+          <RadioGroupItem value="option-six" id="option-three" size="sm" />
+          <Label htmlFor="option-three">Option Three</Label>
         </div>
       </RadioGroup>
     </div>

package/src/stories/Searchbar.stories.tsx

@@ -33,7 +33,7 @@ export const SearchbarExample = () => {
             size="md"
           />
           <div>
-            <Button variant="tertiary" size="md" label="Hello" />
+            <Button variant="outline" size="md" label="Hello" />
           </div>
         </div>
         <Searchbar
@@ -60,7 +60,7 @@ export const SearchbarExample = () => {
             onChange={handleChange}
           />
           <div>
-            <Button variant="tertiary" size="sm" label="Hello" />
+            <Button variant="outline" size="sm" label="Hello" />
           </div>
         </div>
         <Searchbar
@@ -86,7 +86,7 @@ export const SearchbarExample = () => {
             size="xs"
           />
           <div>
-            <Button variant="tertiary" size="xs" label="Hello" />
+            <Button variant="outline" size="xs" label="Hello" />
           </div>
         </div>
         <Searchbar

package/src/stories/SliderToggle.stories.tsx

@@ -20,14 +20,14 @@ export const SliderToggleBasic: Story = {
 export const SliderExample = () => (
   <div className="s-flex s-flex-col s-gap-6">
     <div className="s-flex s-items-center s-gap-2">
-      <Button variant="tertiary" size="sm" label="Settings" />
+      <Button variant="outline" size="sm" label="Settings" />
       <SliderToggle size="sm" />
       <SliderToggle size="sm" selected />
       <SliderToggle size="sm" disabled />
     </div>
 
     <div className="s-flex s-items-center s-gap-2">
-      <Button variant="tertiary" size="xs" label="Settings" />
+      <Button variant="outline" size="xs" label="Settings" />
       <SliderToggle size="xs" />
       <SliderToggle size="xs" selected />
       <SliderToggle size="xs" disabled />

package/src/stories/Tree.stories.tsx

@@ -118,7 +118,7 @@ export const TreeExample = () => {
                         <IconButton
                           size="xs"
                           icon={EyeIcon}
-                          variant="tertiary"
+                          variant="outline"
                         />
                       </>
                     }
@@ -270,7 +270,6 @@ export const TreeExample = () => {
                 visual={IntercomLogo}
                 onItemClick={() => console.log("Clickable")}
                 isSelected={true}
-                size="md"
               >
                 <Tree variant="navigator" tailwindIconTextColor="s-text-brand">
                   <Tree.Item
@@ -311,9 +310,9 @@ export const TreeExample = () => {
                   </Tree.Item>
                 </Tree>
               </Tree.Item>
-              <Tree.Item label="Notion" visual={NotionLogo} size="md" />
-              <Tree.Item label="Slack" visual={SlackLogo} size="md" />
-              <Tree.Item label="Dust" visual={DustIcon} size="md" />
+              <Tree.Item label="Notion" visual={NotionLogo} />
+              <Tree.Item label="Slack" visual={SlackLogo} />
+              <Tree.Item label="Dust" visual={DustIcon} />
             </Tree>
           </div>
         </div>
@@ -636,7 +635,6 @@ export const SelectDataSourceExample = () => {
               <Tree.Item
                 label="Intercom"
                 visual={IntercomLogo}
-                size="md"
                 areActionsFading={false}
                 actions={
                   <div className="s-flex s-flex-row s-items-center s-justify-center s-gap-3">
@@ -647,9 +645,8 @@ export const SelectDataSourceExample = () => {
                     <Button
                       label="Manage"
                       icon={Cog6ToothIcon}
-                      variant="tertiary"
+                      variant="outline"
                       size="sm"
-                      hasMagnifying={false}
                     />
                   </div>
                 }
@@ -668,19 +665,16 @@ export const SelectDataSourceExample = () => {
                     <Button
                       label="Manage"
                       icon={Cog6ToothIcon}
-                      variant="tertiary"
+                      variant="outline"
                       size="sm"
-                      hasMagnifying={false}
                     />
                   </div>
                 }
-                size="md"
               />
               <Tree.Item
                 label="Notion"
                 visual={NotionLogo}
                 areActionsFading={false}
-                size="md"
                 actions={
                   <div className="s-flex s-flex-row s-items-center s-justify-center s-gap-3">
                     <span className="s-text-sm s-text-element-700">
@@ -690,9 +684,8 @@ export const SelectDataSourceExample = () => {
                     <Button
                       label="Manage"
                       icon={Cog6ToothIcon}
-                      variant="tertiary"
+                      variant="outline"
                       size="sm"
-                      hasMagnifying={false}
                     />
                   </div>
                 }
@@ -709,7 +702,6 @@ export const SelectDataSourceExample = () => {
                 label="Google Drive"
                 visual={DriveLogo}
                 areActionsFading={false}
-                size="md"
                 defaultCollapsed={true}
                 actions={
                   <div className="s-flex s-flex-row s-items-center s-justify-center s-gap-3">
@@ -720,9 +712,8 @@ export const SelectDataSourceExample = () => {
                     <Button
                       label="Manage"
                       icon={Cog6ToothIcon}
-                      variant="tertiary"
+                      variant="outline"
                       size="sm"
-                      hasMagnifying={false}
                     />
                   </div>
                 }
@@ -739,7 +730,6 @@ export const SelectDataSourceExample = () => {
               <Tree.Item
                 label="Intercom"
                 visual={IntercomLogo}
-                size="md"
                 checkbox={{
                   checked: false,
                   onChange: () => {
@@ -751,7 +741,6 @@ export const SelectDataSourceExample = () => {
                 label="Slack"
                 collapsed={true}
                 visual={SlackLogo}
-                size="md"
                 checkbox={{
                   checked: false,
                   onChange: () => {
@@ -762,7 +751,6 @@ export const SelectDataSourceExample = () => {
               <Tree.Item
                 label="Notion"
                 visual={NotionLogo}
-                size="md"
                 checkbox={{
                   checked: false,
                   onChange: () => {
@@ -813,7 +801,6 @@ export const SelectDataSourceExample = () => {
               <Tree.Item
                 label="Google Drive"
                 visual={DriveLogo}
-                size="md"
                 checkbox={{
                   checked: false,
                   onChange: () => {
@@ -847,7 +834,7 @@ const TreeItem = ({
           <span className="s-text-xs s-text-element-700">
             last updated Jan 6
           </span>
-          <IconButton icon={CloudArrowDownIcon} size="xs" variant="tertiary" />
+          <IconButton icon={CloudArrowDownIcon} size="xs" variant="outline" />
           <IconButton icon={PlusCircleIcon} size="xs" />
         </div>
       }