fix: tracker, order utils, table types (#3)

* update tracker onclick * fix: update order inputs * add changelog * update table types * fix: improve dark mode * update barlist * update banner --------- Co-authored-by: christopherkindl <[email protected]>
tremorlabs · Mar 28, 2024 · d0f4de6 · d0f4de6
1 parent 4e57bb9
commit d0f4de6
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -21,7 +21,7 @@
 
 <br />
 
-![Tremor Banner](public/images/tremor_raw_banner_11.png)
+![Tremor Banner](public/images/tremor-raw-banner.png)
 
 <br />
 

diff --git a/public/images/tremor-raw-banner.png b/public/images/tremor-raw-banner.png
diff --git a/public/images/tremor_raw_banner_11.png b/public/images/tremor_raw_banner_11.png
diff --git a/src/components/BarList/BarList.tsx b/src/components/BarList/BarList.tsx
@@ -1,4 +1,4 @@
-// Tremor Raw BarList [v0.0.0]
+// Tremor Raw BarList [v0.0.1]
 
 import React from "react"
 
@@ -73,7 +73,7 @@ function BarListInner<T>(
               focusRing,
               onValueChange
                 ? [
-                    "!-m-px cursor-pointer",
+                    "!-m-0 cursor-pointer",
                     // hover
                     "hover:bg-gray-50 hover:dark:bg-gray-900",
                   ]
@@ -98,7 +98,7 @@ function BarListInner<T>(
               )}
               style={{ width: `${widths[index]}%` }}
             >
-              <div className={cx("absolute left-2 flex max-w-full")}>
+              <div className={cx("absolute left-2 flex pr-2 max-w-full")}>
                 {item.href ? (
                   <a
                     href={item.href}

diff --git a/src/components/BarList/barlist.stories.tsx b/src/components/BarList/barlist.stories.tsx
@@ -102,9 +102,15 @@ export const WithOnValueChangeAndHref: Story = {
   },
 }
 
-export const DataSame: Story = {
+export const DataSameWithOnValueChange: Story = {
   args: {
     onValueChange: () => {},
     data: dataSame,
   },
 }
+
+export const DataSame: Story = {
+  args: {
+    data: dataSame,
+  },
+}
diff --git a/src/components/BarList/changelog.md b/src/components/BarList/changelog.md
@@ -1,5 +1,8 @@
 # Tremor Raw BarList Changelog
 
-## 0.0.0
+## 0.0.1
 
 ### Changes
+
+* Improve spacing when bar is a button.
+* Improve padding for long labels.
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -1,4 +1,4 @@
-// Tremor Raw Table [v0.0.0]
+// Tremor Raw Table [v0.0.1]
 
 import React from "react"
 
@@ -27,7 +27,7 @@ TableRoot.displayName = "TableRoot"
 
 const Table = React.forwardRef<
   HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
+  React.TableHTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, forwardedRef) => (
   <table
     ref={forwardedRef}
@@ -55,7 +55,7 @@ TableHead.displayName = "TableHead"
 
 const TableHeaderCell = React.forwardRef<
   HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
+  React.ThHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, forwardedRef) => (
   <th
     ref={forwardedRef}
@@ -112,7 +112,7 @@ TableRow.displayName = "TableRow"
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
-  React.HTMLAttributes<HTMLTableCellElement>
+  React.TdHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, forwardedRef) => (
   <td
     ref={forwardedRef}

diff --git a/src/components/Table/changelog.md b/src/components/Table/changelog.md
@@ -1,5 +1,7 @@
 # Tremor Raw Table Changelog
 
-## 0.0.0
+## 0.0.1
 
 ### Changes
+
+* Improved types of table elements: Table, TableHeaderCell, TableCell
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
@@ -116,7 +116,7 @@ const Toast = React.forwardRef<
           // background color
           " bg-white dark:bg-[#090E1A]",
           // border color
-          "border-gray-200 dark:border-gray-900",
+          "border-gray-200 dark:border-gray-800",
           // swipe
           "data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
           // transition
@@ -132,7 +132,7 @@ const Toast = React.forwardRef<
             "flex flex-1 items-start gap-3 p-4",
             // border
             !disableDismiss || action
-              ? "border-r border-gray-200 dark:border-gray-900"
+              ? "border-r border-gray-200 dark:border-gray-800"
               : "",
           )}
         >
@@ -176,7 +176,7 @@ const Toast = React.forwardRef<
               >
                 {action.label}
               </ToastPrimitives.Action>
-              <div className="h-px w-full bg-gray-200 dark:bg-gray-900" />
+              <div className="h-px w-full bg-gray-200 dark:bg-gray-800" />
             </>
           )}
           {!disableDismiss && (

diff --git a/src/components/Toast/changelog.md b/src/components/Toast/changelog.md
@@ -1,5 +1,7 @@
 # Tremor Raw Toast Changelog
 
-## 0.0.0
+## 0.0.1
 
 ### Changes
+
+* Improved dark mode visbility
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,7 +21,7 @@ @@
     <br />
-    ![Tremor Banner](public/images/tremor_raw_banner_11.png)
+    ![Tremor Banner](public/images/tremor-raw-banner.png)
     <br />
@@ Expand Down @@