Add / update icons (#7925)

* Add update icon

* Fine tuning empty tree

sparkle/src/components/Tree.tsx

@@ -222,5 +222,9 @@ interface TreeEmptyProps {
 }
 
 Tree.Empty = function ({ label }: TreeEmptyProps) {
-  return <div className="s-pl-4 s-text-sm s-text-element-600">{label}</div>;
+  return (
+    <div className="s-py-1 s-pl-6 s-text-sm s-font-medium s-text-element-700">
+      {label}
+    </div>
+  );
 };

sparkle/src/icons/solid/Dot.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgDot = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path fill="currentColor" d="M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
+  </svg>
+);
+export default SvgDot;

sparkle/src/icons/solid/MagnifyingGlass.tsx

@@ -11,7 +11,13 @@ const SvgMagnifyingGlass = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       fill="currentColor"
-      d="M11 2c4.968 0 9 4.032 9 9s-4.032 9-9 9-9-4.032-9-9 4.032-9 9-9Zm8.485 16.071 2.829 2.828-1.415 1.415-2.828-2.829 1.414-1.414Z"
+      fillRule="evenodd"
+      d="M17.364 17.364A9 9 0 1 1 4.636 4.636a9 9 0 0 1 12.728 12.728Zm-2.121-2.121a6 6 0 1 1-8.486-8.485 6 6 0 0 1 8.486 8.485Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="currentColor"
+      d="m22.374 20.253-3.535-3.535-2.121 2.12 3.535 3.536 2.121-2.121Z"
     />
   </svg>
 );

sparkle/src/icons/solid/index.ts

@@ -48,6 +48,7 @@ export { default as DocumentDuplicateIcon } from "./DocumentDuplicate";
 export { default as DocumentPileIcon } from "./DocumentPile";
 export { default as DocumentPlusIcon } from "./DocumentPlus";
 export { default as DocumentTextIcon } from "./DocumentText";
+export { default as DotIcon } from "./Dot";
 export { default as DustIcon } from "./Dust";
 export { default as EmotionLaughIcon } from "./EmotionLaugh";
 export { default as EqualizerIcon } from "./Equalizer";

sparkle/src/icons/stroke/Dot.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgDot = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm4-2a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgDot;

sparkle/src/icons/stroke/index.ts

@@ -48,6 +48,7 @@ export { default as DocumentDuplicateStrokeIcon } from "./DocumentDuplicate";
 export { default as DocumentPileStrokeIcon } from "./DocumentPile";
 export { default as DocumentPlusStrokeIcon } from "./DocumentPlus";
 export { default as DocumentTextStrokeIcon } from "./DocumentText";
+export { default as DotStrokeIcon } from "./Dot";
 export { default as DustStrokeIcon } from "./Dust";
 export { default as EmotionLaughStrokeIcon } from "./EmotionLaugh";
 export { default as EqualizerStrokeIcon } from "./Equalizer";

sparkle/src/stories/Tree.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
 
-import { DustIcon } from "@sparkle/icons/solid";
 import {
   DriveLogo,
   IntercomLogo,
@@ -15,6 +14,7 @@ import {
   CloudArrowDownIcon,
   Cog6ToothIcon,
   DocumentIcon,
+  DustIcon,
   EyeIcon,
   FolderIcon,
   IconButton,
@@ -89,7 +89,17 @@ export const TreeExample = () => {
                     visual={FolderIcon}
                     collapsed={false}
                   >
-                    <Tree.Empty label="No documents" />
+                    <Tree.Item
+                      label="Item 3"
+                      type="leaf"
+                      visual={DocumentIcon}
+                    />
+                    <Tree.Item
+                      label="Item 3"
+                      type="leaf"
+                      visual={DocumentIcon}
+                    />
+                    <Tree.Empty label="(+ 4 items)" />
                   </Tree.Item>
                 </Tree>
               </Tree.Item>