From c5e88aae4c1eef0f0d8a5fd6e247197970835ac4 Mon Sep 17 00:00:00 2001
From: Edouard Wautier <4435185+Duncid@users.noreply.github.com>
Date: Mon, 7 Oct 2024 17:26:51 +0200
Subject: [PATCH] Add / update icons (#7925)

* Add update icon

* Fine tuning empty tree
---
 sparkle/src/components/Tree.tsx               |  6 +++++-
 sparkle/src/icons/solid/Dot.tsx               | 15 ++++++++++++++
 sparkle/src/icons/solid/MagnifyingGlass.tsx   |  8 +++++++-
 sparkle/src/icons/solid/index.ts              |  1 +
 sparkle/src/icons/src/solid/dot.svg           |  3 +++
 .../src/icons/src/solid/magnifying-glass.svg  |  3 ++-
 sparkle/src/icons/src/stroke/dot.svg          |  3 +++
 sparkle/src/icons/stroke/Dot.tsx              | 20 +++++++++++++++++++
 sparkle/src/icons/stroke/index.ts             |  1 +
 sparkle/src/stories/Tree.stories.tsx          | 14 +++++++++++--
 10 files changed, 69 insertions(+), 5 deletions(-)
 create mode 100644 sparkle/src/icons/solid/Dot.tsx
 create mode 100644 sparkle/src/icons/src/solid/dot.svg
 create mode 100644 sparkle/src/icons/src/stroke/dot.svg
 create mode 100644 sparkle/src/icons/stroke/Dot.tsx

diff --git a/sparkle/src/components/Tree.tsx b/sparkle/src/components/Tree.tsx
index 14cc50c66cf1..8745e952d9e0 100644
--- a/sparkle/src/components/Tree.tsx
+++ b/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>
+  );
 };
diff --git a/sparkle/src/icons/solid/Dot.tsx b/sparkle/src/icons/solid/Dot.tsx
new file mode 100644
index 000000000000..2e78d0de91ca
--- /dev/null
+++ b/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;
diff --git a/sparkle/src/icons/solid/MagnifyingGlass.tsx b/sparkle/src/icons/solid/MagnifyingGlass.tsx
index d93b5ddd813f..10a3acc8a731 100644
--- a/sparkle/src/icons/solid/MagnifyingGlass.tsx
+++ b/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>
 );
diff --git a/sparkle/src/icons/solid/index.ts b/sparkle/src/icons/solid/index.ts
index 288f1e895195..d1e700c689fb 100644
--- a/sparkle/src/icons/solid/index.ts
+++ b/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";
diff --git a/sparkle/src/icons/src/solid/dot.svg b/sparkle/src/icons/src/solid/dot.svg
new file mode 100644
index 000000000000..af4c29fd2779
--- /dev/null
+++ b/sparkle/src/icons/src/solid/dot.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="#020617"/>
+</svg>
diff --git a/sparkle/src/icons/src/solid/magnifying-glass.svg b/sparkle/src/icons/src/solid/magnifying-glass.svg
index c4cd39565b91..594a77eb82c9 100644
--- a/sparkle/src/icons/src/solid/magnifying-glass.svg
+++ b/sparkle/src/icons/src/solid/magnifying-glass.svg
@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z" fill="#020617"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.364 17.364C13.8492 20.8787 8.15075 20.8787 4.63604 17.364C1.12133 13.8492 1.12132 8.15076 4.63604 4.63604C8.15076 1.12132 13.8492 1.12133 17.364 4.63604C20.8787 8.15075 20.8787 13.8492 17.364 17.364ZM15.2426 15.2426C12.8995 17.5858 9.10051 17.5858 6.75736 15.2426C4.4142 12.8995 4.41421 9.1005 6.75736 6.75736C9.1005 4.41421 12.8995 4.4142 15.2426 6.75736C17.5858 9.10051 17.5858 12.8995 15.2426 15.2426Z" fill="#020617"/>
+<path d="M22.3744 20.253L18.8388 16.7175L16.7175 18.8388L20.253 22.3744L22.3744 20.253Z" fill="#020617"/>
 </svg>
diff --git a/sparkle/src/icons/src/stroke/dot.svg b/sparkle/src/icons/src/stroke/dot.svg
new file mode 100644
index 000000000000..69bb96184521
--- /dev/null
+++ b/sparkle/src/icons/src/stroke/dot.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" fill="#020617"/>
+</svg>
diff --git a/sparkle/src/icons/stroke/Dot.tsx b/sparkle/src/icons/stroke/Dot.tsx
new file mode 100644
index 000000000000..89508013f4f2
--- /dev/null
+++ b/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;
diff --git a/sparkle/src/icons/stroke/index.ts b/sparkle/src/icons/stroke/index.ts
index 211f94e78a57..5843b26b8b00 100644
--- a/sparkle/src/icons/stroke/index.ts
+++ b/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";
diff --git a/sparkle/src/stories/Tree.stories.tsx b/sparkle/src/stories/Tree.stories.tsx
index 243fa6ec1ece..fb05556170a5 100644
--- a/sparkle/src/stories/Tree.stories.tsx
+++ b/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>