Kurt Cobain

irsyadadl · Sep 8, 2024 · a23b425 · a23b425
1 parent 8afc129
commit a23b425
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/components/docs/collections/table-sorting-demo.tsx b/components/docs/collections/table-sorting-demo.tsx
@@ -47,15 +47,13 @@ export default function TableSortingDemo() {
         onSortChange={list.sort}
       >
         <Table.Header>
-          <Table.Column id="title" isRowHeader allowsSorting>
+          <Table.Column id="title" isRowHeader>
             Title
           </Table.Column>
           <Table.Column id="director" allowsSorting>
             Director
           </Table.Column>
-          <Table.Column id="producer" allowsSorting>
-            Producer
-          </Table.Column>
+          <Table.Column id="producer">Producer</Table.Column>
           <Table.Column id="release_date" allowsSorting>
             Release Date
           </Table.Column>

diff --git a/components/ui/table.tsx b/components/ui/table.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { IconChevronLgDown, IconChevronLgUp, IconFilterAsc, IconHamburger } from "justd-icons"
+import { IconChevronLgDown, IconHamburger } from "justd-icons"
 import type {
   CellProps,
   ColumnProps,
@@ -32,11 +32,13 @@ const table = tv({
       "whitespace-nowrap allows-sorting:cursor-pointer px-3 py-3 text-left dragging:cursor-grabbing font-medium outline-none [&:has([slot=selection])]:pr-0",
     header: "border-b x32",
     row: "tr group relative cursor-default border-b text-fg/70 outline-none ring-primary focus-visible:ring-1 selected:bg-primary/15",
-    cell: "whitespace-nowrap px-3 py-3 outline-none"
+    cell: "whitespace-nowrap group px-3 py-3 outline-none",
+    cellIcon:
+      "flex-none rounded bg-secondary text-fg [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:size-3.5 [&>[data-slot=icon]]:transition-transform [&>[data-slot=icon]]:duration-200 size-[1.15rem] grid place-content-center shrink-0"
   }
 })
 
-const { root, header, column, row, cell } = table()
+const { root, header, column, row, cell, cellIcon } = table()
 
 interface TableProps extends TablePrimitiveProps {
   className?: string
@@ -70,18 +72,15 @@ interface TableColumnProps extends ColumnProps {
 
 const TableColumn = ({ children, className, ...props }: TableColumnProps) => (
   <Column {...props} className={column({ className })}>
-    {({ allowsSorting, sortDirection }) => (
-      <div className="flex [&>[data-slot=icon]]:shrink-0 items-center gap-2">
+    {({ allowsSorting, sortDirection, isHovered }) => (
+      <div className="flex [&_[data-slot=icon]]:shrink-0 items-center gap-2">
         <>
           {children}
-          {allowsSorting &&
-            (sortDirection === undefined ? (
-              <IconFilterAsc className="h-3" />
-            ) : sortDirection === "ascending" ? (
-              <IconChevronLgUp className="h-3" />
-            ) : (
-              <IconChevronLgDown className="h-3" />
-            ))}
+          {allowsSorting && (
+            <span className={cellIcon({ className: isHovered ? "bg-secondary-fg/10" : "" })}>
+              <IconChevronLgDown className={sortDirection === "ascending" ? "rotate-180" : ""} />
+            </span>
+          )}
         </>
       </div>
     )}

diff --git a/resources/content/docs/prologue/release-notes.mdx b/resources/content/docs/prologue/release-notes.mdx
@@ -11,6 +11,11 @@ If you don't see the release you're looking for, please run `npx justd-cli@lates
 ## 2024
 This all changes are made on the 2024 release.
 
+## September 08
+- Fix bug about `forwardedRef` in `Drawer`
+- Redesign `Table` sorting
+- Fix colors page in hex format
+
 ## September 07
 - Add `tabular-nums` to every component that needs it
 - Consistently background color for all "field / input" component.