feat: New Dialog component and tickGap prop (#902)

* feat: add custom colors for Tracker (#872) * fix: add CustomColor type * feat: tickGap (#890) * fix: remove lib styles (#894) * feat: Dialog Component (#886) Co-authored-by: mbauchet <[email protected]> Co-authored-by: Touha Zohair <[email protected]> Co-authored-by: christopherkindl <[email protected]> Co-authored-by: severinlandolt <[email protected]>
tremorlabs · Jan 11, 2024 · 24bfbcb · 24bfbcb
1 parent 88c73d8
commit 24bfbcb
Show file tree

Hide file tree

Showing 90 changed files with 616 additions and 1,158 deletions.
diff --git a/README.md b/README.md
@@ -116,4 +116,4 @@ We are always looking for new ideas or other ways to improve Tremor. If you have
 
 [Apache License 2.0](https://github.com/tremorlabs/tremor/blob/main/License)
 
-Copyright &copy; 2023 Tremor. All rights reserved.
+Copyright &copy; 2024 Tremor. All rights reserved.
diff --git a/package.json b/package.json
@@ -25,8 +25,8 @@
   "homepage": "https://github.com/tremorlabs/tremor#readme",
   "dependencies": {
     "@floating-ui/react": "^0.19.2",
-    "@headlessui/react": "^1.7.17",
-    "@headlessui/tailwindcss": "^0.1.3",
+    "@headlessui/react": "^1.7.18",
+    "@headlessui/tailwindcss": "^0.2.0",
     "date-fns": "^2.30.0",
     "react-day-picker": "^8.9.1",
     "react-transition-group": "^4.4.5",
@@ -59,7 +59,7 @@
     "@storybook/react-webpack5": "^7.6.3",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^7.6.3",
-    "@tailwindcss/forms": "^0.5.6",
+    "@tailwindcss/forms": "^0.5.7",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^20.10.2",
@@ -97,7 +97,7 @@
     "storybook": "^7.6.3",
     "storybook-source-link": "^4.0.1",
     "style-loader": "^3.3.3",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
     "typescript": "^4.9.5",
     "webpack": "^5.89.0"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/assets/ArrowDownHeadIcon.tsx b/src/assets/ArrowDownHeadIcon.tsx
@@ -1,15 +1,8 @@
 import React from "react";
 
 const ArrowDownHeadIcon = ({ ...props }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    strokeWidth="2.5"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path>
   </svg>
 );
 

diff --git a/src/assets/ArrowDownIcon.tsx b/src/assets/ArrowDownIcon.tsx
@@ -1,12 +1,8 @@
 import React from "react";
 
 const ArrowDownIcon = ({ ...props }) => (
-  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-    <path fill="none" d="M0 0h24v24H0z" />
-    <path
-      fill="currentColor"
-      d="M13 16.172l5.364-5.364 1.414 1.414L12 20l-7.778-7.778 1.414-1.414L11 16.172V4h2v12.172z"
-    />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z"></path>
   </svg>
 );
 

diff --git a/src/assets/ArrowDownRightIcon.tsx b/src/assets/ArrowDownRightIcon.tsx
@@ -1,12 +1,8 @@
 import React from "react";
 
 const ArrowDownRightIcon = ({ ...props }) => (
-  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-    <path fill="none" d="M0 0h24v24H0z" />
-    <path
-      fill="currentColor"
-      d="M14.59 16.004L5.982 7.397l1.414-1.414 8.607 8.606V7.004h2v11h-11v-2z"
-    />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M14.5895 16.0032L5.98291 7.39664L7.39712 5.98242L16.0037 14.589V7.00324H18.0037V18.0032H7.00373V16.0032H14.5895Z"></path>
   </svg>
 );
 

diff --git a/src/assets/ArrowLeftHeadIcon.tsx b/src/assets/ArrowLeftHeadIcon.tsx
@@ -1,15 +1,8 @@
 import React from "react";
 
 const ArrowLeftHeadIcon = ({ ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    strokeWidth="2.5"
-    {...props}
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path>
   </svg>
 );
 

diff --git a/src/assets/ArrowRightHeadIcon.tsx b/src/assets/ArrowRightHeadIcon.tsx
@@ -1,15 +1,8 @@
 import React from "react";
 
 const ArrowRightHeadIcon = ({ ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    strokeWidth="2.5"
-    {...props}
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path>
   </svg>
 );
 

diff --git a/src/assets/ArrowRightIcon.tsx b/src/assets/ArrowRightIcon.tsx
@@ -1,13 +1,8 @@
-/* eslint-disable max-len */
 import React from "react";
 
 const ArrowRightIcon = ({ ...props }) => (
-  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-    <path fill="none" d="M0 0h24v24H0z" />
-    <path
-      fill="currentColor"
-      d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
-    />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z"></path>
   </svg>
 );
 

diff --git a/src/assets/ArrowUpHeadIcon.tsx b/src/assets/ArrowUpHeadIcon.tsx
@@ -1,15 +1,8 @@
 import React from "react";
 
 const ArrowUpHeadIcon = ({ ...props }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    strokeWidth="2.5"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z"></path>
   </svg>
 );
 

diff --git a/src/assets/ArrowUpIcon.tsx b/src/assets/ArrowUpIcon.tsx
@@ -1,12 +1,8 @@
 import React from "react";
 
 const ArrowUpIcon = ({ ...props }) => (
-  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-    <path fill="none" d="M0 0h24v24H0z" />
-    <path
-      fill="currentColor"
-      d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z"
-    />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z"></path>
   </svg>
 );
 

diff --git a/src/assets/ArrowUpRightIcon.tsx b/src/assets/ArrowUpRightIcon.tsx
@@ -1,12 +1,8 @@
 import React from "react";
 
 const ArrowUpRightIcon = ({ ...props }) => (
-  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-    <path fill="none" d="M0 0h24v24H0z" />
-    <path
-      fill="currentColor"
-      d="M16.004 9.414l-8.607 8.607-1.414-1.414L14.589 8H7.004V6h11v11h-2V9.414z"
-    />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M16.0037 9.41421L7.39712 18.0208L5.98291 16.6066L14.5895 8H7.00373V6H18.0037V17H16.0037V9.41421Z"></path>
   </svg>
 );
 

diff --git a/src/assets/DoubleArrowLeftHeadIcon.tsx b/src/assets/DoubleArrowLeftHeadIcon.tsx
@@ -1,15 +1,8 @@
 import React from "react";
 
 const DoubleArrowLeftHeadIcon = ({ ...props }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    strokeWidth="2.5"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z"></path>
   </svg>
 );
 

diff --git a/src/assets/DoubleArrowRightHeadIcon.tsx b/src/assets/DoubleArrowRightHeadIcon.tsx
@@ -1,15 +1,8 @@
 import React from "react";
 
 const DoubleArrowRightHeadIcon = ({ ...props }) => (
-  <svg
-    {...props}
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    strokeWidth="2.5"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M19.1642 12L12.9571 5.79291L11.5429 7.20712L16.3358 12L11.5429 16.7929L12.9571 18.2071L19.1642 12ZM13.5143 12L7.30722 5.79291L5.89301 7.20712L10.6859 12L5.89301 16.7929L7.30722 18.2071L13.5143 12Z"></path>
   </svg>
 );
 

diff --git a/src/assets/ExclamationFilledIcon.tsx b/src/assets/ExclamationFilledIcon.tsx
@@ -1,12 +1,8 @@
 import React from "react";
 
 const ExclamationFilledIcon = ({ ...props }) => (
-  <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-    <path
-      fillRule="evenodd"
-      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
-      clipRule="evenodd"
-    />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11 15V17H13V15H11ZM11 7V13H13V7H11Z"></path>
   </svg>
 );
 

diff --git a/src/assets/EyeIcon.tsx b/src/assets/EyeIcon.tsx
@@ -1,13 +1,8 @@
 import React from "react";
 
 const EyeIcon = ({ ...props }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" {...props}>
-    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
-    <path
-      fillRule="evenodd"
-      d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
-      clipRule="evenodd"
-    />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12ZM12.0003 17C14.7617 17 17.0003 14.7614 17.0003 12C17.0003 9.23858 14.7617 7 12.0003 7C9.23884 7 7.00026 9.23858 7.00026 12C7.00026 14.7614 9.23884 17 12.0003 17ZM12.0003 15C10.3434 15 9.00026 13.6569 9.00026 12C9.00026 10.3431 10.3434 9 12.0003 9C13.6571 9 15.0003 10.3431 15.0003 12C15.0003 13.6569 13.6571 15 12.0003 15Z"></path>
   </svg>
 );
 

diff --git a/src/assets/EyeOffIcon.tsx b/src/assets/EyeOffIcon.tsx
@@ -1,13 +1,8 @@
 import React from "react";
 
 const EyeOffIcon = ({ ...props }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" {...props}>
-    <path
-      fillRule="evenodd"
-      d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
-      clipRule="evenodd"
-    />
-    <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457ZM14.7577 16.1718L13.2937 14.7078C12.902 14.8952 12.4634 15.0002 12.0003 15.0002C10.3434 15.0002 9.00026 13.657 9.00026 12.0002C9.00026 11.537 9.10522 11.0984 9.29263 10.7067L7.82866 9.24277C7.30514 10.0332 7.00026 10.9811 7.00026 12.0002C7.00026 14.7616 9.23884 17.0002 12.0003 17.0002C13.0193 17.0002 13.9672 16.6953 14.7577 16.1718ZM7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925L16.947 12.7327C16.9821 12.4936 17.0003 12.249 17.0003 12.0002C17.0003 9.23873 14.7617 7.00016 12.0003 7.00016C11.7514 7.00016 11.5068 7.01833 11.2677 7.05343L7.97446 3.76015Z"></path>
   </svg>
 );
 

diff --git a/src/assets/MinusIcon.tsx b/src/assets/MinusIcon.tsx
@@ -9,7 +9,7 @@ const MinusIcon = ({ ...props }) => (
     stroke="currentColor"
     strokeWidth="2.5"
   >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M20 12H4" />
+    <path d="M20 12H4" />
   </svg>
 );
 

diff --git a/src/assets/PlusIcon.tsx b/src/assets/PlusIcon.tsx
@@ -9,7 +9,7 @@ const PlusIcon = ({ ...props }) => (
     stroke="currentColor"
     strokeWidth="2.5"
   >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
+    <path d="M12 4v16m8-8H4" />
   </svg>
 );
Original file line number	Diff line number	Diff line change
Expand Up		@@ -116,4 +116,4 @@ We are always looking for new ideas or other ways to improve Tremor. If you have

		[Apache License 2.0](https://github.com/tremorlabs/tremor/blob/main/License)

		Copyright © 2023 Tremor. All rights reserved.
		Copyright © 2024 Tremor. All rights reserved.