fast furious

irsyadadl · Aug 16, 2024 · 9ac1f96 · 9ac1f96
1 parent 70eb072
commit 9ac1f96
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 35 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/docs/generated/previews.json b/components/docs/generated/previews.json
diff --git a/components/docs/navigation/pagination-demo.tsx b/components/docs/navigation/pagination-demo.tsx
@@ -6,15 +6,15 @@ export default function PaginationDemo() {
   return (
     <Pagination>
       <Pagination.List>
-        <Pagination.Item role="first" href="#" />
-        <Pagination.Item role="previous" href="#" />
+        <Pagination.Item variant="first" href="#" />
+        <Pagination.Item variant="previous" href="#" />
         <Pagination.Item href="#">1</Pagination.Item>
         <Pagination.Item href="#" isCurrent>
           2
         </Pagination.Item>
-        <Pagination.Item role="ellipsis" />
-        <Pagination.Item role="next" href="#" />
-        <Pagination.Item role="last" href="#" />
+        <Pagination.Item variant="ellipsis" />
+        <Pagination.Item variant="next" href="#" />
+        <Pagination.Item variant="last" href="#" />
       </Pagination.List>
     </Pagination>
   )

diff --git a/components/docs/navigation/pagination-dynamic-demo.tsx b/components/docs/navigation/pagination-dynamic-demo.tsx
@@ -7,12 +7,12 @@ export default function PaginationDynamicDemo() {
   return (
     <Pagination>
       <Pagination.List>
-        <Pagination.Item role="first" href="#" />
-        <Pagination.Item role="previous" href="#" />
+        <Pagination.Item variant="first" href="#" />
+        <Pagination.Item variant="previous" href="#" />
         <Pagination.Section aria-label="Pagination Segment" className="rounded-lg lg:hidden border">
-          <Pagination.Item role="label">1</Pagination.Item>
-          <Pagination.Item role="separator" />
-          <Pagination.Item className="text-muted-fg" role="label">
+          <Pagination.Item variant="label">1</Pagination.Item>
+          <Pagination.Item variant="separator" />
+          <Pagination.Item className="text-muted-fg" variant="label">
             10
           </Pagination.Item>
         </Pagination.Section>
@@ -27,8 +27,8 @@ export default function PaginationDynamicDemo() {
             </Pagination.Item>
           )}
         </Pagination.Section>
-        <Pagination.Item role="next" href="#" />
-        <Pagination.Item role="last" href="#" />
+        <Pagination.Item variant="next" href="#" />
+        <Pagination.Item variant="last" href="#" />
       </Pagination.List>
     </Pagination>
   )

diff --git a/components/docs/navigation/simple-pagination-demo.tsx b/components/docs/navigation/simple-pagination-demo.tsx
@@ -6,17 +6,17 @@ export default function SimplePaginationDemo() {
   return (
     <Pagination>
       <Pagination.List>
-        <Pagination.Item role="first" href="#" />
-        <Pagination.Item role="previous" href="#" />
+        <Pagination.Item variant="first" href="#" />
+        <Pagination.Item variant="previous" href="#" />
         <Pagination.Section aria-label="Pagination Segment" className="rounded-lg border">
-          <Pagination.Item role="label">1</Pagination.Item>
-          <Pagination.Item role="separator" />
-          <Pagination.Item className="text-muted-fg" role="label">
+          <Pagination.Item variant="label">1</Pagination.Item>
+          <Pagination.Item variant="separator" />
+          <Pagination.Item className="text-muted-fg" variant="label">
             10
           </Pagination.Item>
         </Pagination.Section>
-        <Pagination.Item role="next" href="#" />
-        <Pagination.Item role="last" href="#" />
+        <Pagination.Item variant="next" href="#" />
+        <Pagination.Item variant="last" href="#" />
       </Pagination.List>
     </Pagination>
   )

diff --git a/components/docs/surfaces/card-table-demo.tsx b/components/docs/surfaces/card-table-demo.tsx
@@ -55,12 +55,12 @@ export default function CardTableDemo() {
       <Card.Footer>
         <Pagination>
           <Pagination.List>
-            <Pagination.Item role="first" />
-            <Pagination.Item role="previous" />
+            <Pagination.Item variant="first" />
+            <Pagination.Item variant="previous" />
             <Pagination.Section className="lg:hidden rounded-lg border">
-              <Pagination.Item role="label">1</Pagination.Item>
-              <Pagination.Item role="separator" />
-              <Pagination.Item className="text-muted-fg" role="label">
+              <Pagination.Item variant="label">1</Pagination.Item>
+              <Pagination.Item variant="separator" />
+              <Pagination.Item className="text-muted-fg" variant="label">
                 {users.length}
               </Pagination.Item>
             </Pagination.Section>
@@ -71,8 +71,8 @@ export default function CardTableDemo() {
                 </Pagination.Item>
               )}
             </Pagination.Section>
-            <Pagination.Item role="next" />
-            <Pagination.Item role="last" />
+            <Pagination.Item variant="next" />
+            <Pagination.Item variant="last" />
           </Pagination.List>
         </Pagination>
       </Card.Footer>

diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx
@@ -101,11 +101,11 @@ interface PaginationItemProps extends ListBoxItemProps {
   shape?: 'square' | 'circle'
   appearance?: 'solid' | 'outline' | 'plain'
   isCurrent?: boolean
-  role?: 'label' | 'separator' | 'ellipsis' | 'default' | 'last' | 'first' | 'previous' | 'next'
+  variant?: 'label' | 'separator' | 'ellipsis' | 'default' | 'last' | 'first' | 'previous' | 'next'
 }
 
 const PaginationItem = ({
-  role = 'default',
+  variant = 'default',
   size = 'square-petite',
   appearance = 'outline',
   intent,
@@ -125,7 +125,7 @@ const PaginationItem = ({
   const renderPaginationIndicator = (indicator: React.ReactNode) =>
     renderListItem(
       {
-        textValue: role,
+        textValue: variant,
         'aria-current': isCurrent ? 'page' : undefined,
         isDisabled: isCurrent,
         className: cn(
@@ -141,7 +141,7 @@ const PaginationItem = ({
       indicator
     )
 
-  switch (role) {
+  switch (variant) {
     case 'label':
       return renderListItem(
         {

diff --git a/resources/content/docs/prologue/release-notes.mdx b/resources/content/docs/prologue/release-notes.mdx
@@ -10,6 +10,11 @@ Below is a list of all the releases that have been made to Just D.
 If you don't see the release you're looking for, please run `npx justd-cli@latest diff` to see the changes. Not sure? Look at this [installation page](/docs/getting-started/installation#diff).
 ## 2024
 This all changes are made on the 2024 release.
+
+### August 16
+- Fix pagination to use `variant` instead of `role`
+- Add relative to the menu checkbox and radio
+
 ### August 15
 - Replace all `composeRenderProps` to `cr`
 - Tooltip now is Compound component