[DevOverlay] Add Pagination (#74583)

This PR added style for pagination and has no logic difference. Changed the filename from `ErrorPagination` to `error-overlay-pagination` for consistency. ### Light ![CleanShot 2025-01-07 at 21 37 29](https://github.com/user-attachments/assets/dd7d63e8-cb1c-4c5b-bd10-939501e2ef1d) ### Dark ![CleanShot 2025-01-07 at 21 37 37](https://github.com/user-attachments/assets/41012b6a-9d9c-4463-863b-8a200d4fc057) Closes NDX-576
vercel · Jan 10, 2025 · ae431f2 · ae431f2
1 parent 67c3d7a
commit ae431f2
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 128 deletions.
diff --git a/...ents/react-dev-overlay/_experimental/internal/components/Errors/ErrorPagination/styles.ts b/...ents/react-dev-overlay/_experimental/internal/components/Errors/ErrorPagination/styles.ts
diff --git a/...nternal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx b/...nternal/components/Errors/error-overlay-floating-header/error-overlay-floating-header.tsx
@@ -1,7 +1,7 @@
 import type { ReadyRuntimeError } from '../../../helpers/get-error-by-type'
 import type { VersionInfo } from '../../../../../../../../server/dev/parse-version-info'
 
-import { ErrorPagination } from '../ErrorPagination/ErrorPagination'
+import { ErrorOverlayPagination } from '../error-overlay-pagination/error-overlay-pagination'
 import { VersionStalenessInfo } from '../../VersionStalenessInfo'
 import { noop as css } from '../../../helpers/noop-template'
 
@@ -21,7 +21,7 @@ export function ErrorOverlayFloatingHeader({
   return (
     <div className="error-overlay-floating-header">
       {/* TODO: better passing data instead of nullish coalescing */}
-      <ErrorPagination
+      <ErrorOverlayPagination
         readyErrors={readyErrors ?? []}
         activeIdx={activeIdx ?? 0}
         onActiveIndexChange={setActiveIndex ?? (() => {})}
@@ -39,7 +39,7 @@ export const styles = css`
 
     width: 100%;
     position: absolute;
-    transform: translateY(-32px);
+    transform: translateY(-42px);
 
     outline: none;
 

diff --git a/...rorPagination/ErrorPagination.stories.tsx → ...tion/error-overlay-pagination.stories.tsx b/...rorPagination/ErrorPagination.stories.tsx → ...tion/error-overlay-pagination.stories.tsx
@@ -1,19 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import { ErrorPagination } from './ErrorPagination'
+import { ErrorOverlayPagination } from './error-overlay-pagination'
 import { withShadowPortal } from '../../../storybook/with-shadow-portal'
 import { useState } from 'react'
 
-const meta: Meta<typeof ErrorPagination> = {
-  title: 'ErrorPagination',
-  component: ErrorPagination,
+const meta: Meta<typeof ErrorOverlayPagination> = {
+  title: 'ErrorOverlayPagination',
+  component: ErrorOverlayPagination,
   parameters: {
     layout: 'centered',
   },
   decorators: [withShadowPortal],
 }
 
 export default meta
-type Story = StoryObj<typeof ErrorPagination>
+type Story = StoryObj<typeof ErrorOverlayPagination>
 
 // Mock errors for stories
 const mockErrors = [
@@ -38,10 +38,10 @@ const mockErrors = [
 ]
 
 export const SingleError: Story = {
-  render: function ErrorPaginationStory() {
+  render: function ErrorOverlayPaginationStory() {
     const [activeIdx, setActiveIdx] = useState(0)
     return (
-      <ErrorPagination
+      <ErrorOverlayPagination
         activeIdx={activeIdx}
         readyErrors={[mockErrors[0]]}
         onActiveIndexChange={setActiveIdx}
@@ -51,10 +51,10 @@ export const SingleError: Story = {
 }
 
 export const MultipleErrors: Story = {
-  render: function ErrorPaginationStory() {
+  render: function ErrorOverlayPaginationStory() {
     const [activeIdx, setActiveIdx] = useState(1)
     return (
-      <ErrorPagination
+      <ErrorOverlayPagination
         activeIdx={activeIdx}
         readyErrors={mockErrors}
         onActiveIndexChange={setActiveIdx}
@@ -64,14 +64,27 @@ export const MultipleErrors: Story = {
 }
 
 export const LastError: Story = {
-  render: function ErrorPaginationStory() {
+  render: function ErrorOverlayPaginationStory() {
     const [activeIdx, setActiveIdx] = useState(2)
     return (
-      <ErrorPagination
+      <ErrorOverlayPagination
         activeIdx={activeIdx}
         readyErrors={mockErrors}
         onActiveIndexChange={setActiveIdx}
       />
     )
   },
 }
+
+export const VeryManyErrors: Story = {
+  render: function ErrorOverlayPaginationStory() {
+    const [activeIdx, setActiveIdx] = useState(1233)
+    return (
+      <ErrorOverlayPagination
+        activeIdx={activeIdx}
+        readyErrors={Array(780).fill(mockErrors).flat()}
+        onActiveIndexChange={setActiveIdx}
+      />
+    )
+  },
+}
diff --git a/...rrors/ErrorPagination/ErrorPagination.tsx → ...y-pagination/error-overlay-pagination.tsx b/...rrors/ErrorPagination/ErrorPagination.tsx → ...y-pagination/error-overlay-pagination.tsx
@@ -1,5 +1,7 @@
 import type { ReadyRuntimeError } from '../../../helpers/get-error-by-type'
+
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { noop as css } from '../../../helpers/noop-template'
 import { LeftArrow } from '../../../icons/LeftArrow'
 import { RightArrow } from '../../../icons/RightArrow'
 
@@ -9,7 +11,7 @@ type ErrorPaginationProps = {
   onActiveIndexChange: (index: number) => void
 }
 
-export function ErrorPagination({
+export function ErrorOverlayPagination({
   readyErrors,
   activeIdx,
   onActiveIndexChange,
@@ -114,35 +116,99 @@ export function ErrorPagination({
   }, [nav, activeIdx, readyErrors.length])
 
   return (
-    <div data-nextjs-dialog-left-right>
-      <nav ref={onNav}>
-        <button
-          ref={buttonLeft}
-          type="button"
-          disabled={activeIdx === 0}
-          aria-disabled={activeIdx === 0}
-          onClick={handlePrevious}
-        >
-          <LeftArrow title="previous" />
-        </button>
-        <button
-          ref={buttonRight}
-          type="button"
-          disabled={activeIdx === readyErrors.length - 1}
-          aria-disabled={activeIdx === readyErrors.length - 1}
-          onClick={handleNext}
+    <>
+      {readyErrors.length > 0 && (
+        <nav
+          className="error-overlay-pagination dialog-exclude-closing-from-outside-click"
+          ref={onNav}
         >
-          <RightArrow title="next" />
-        </button>
-        <small>
-          <span>{activeIdx + 1}</span> of{' '}
-          <span data-nextjs-dialog-header-total-count>
-            {readyErrors.length}
-          </span>
-          {' issue'}
-          {readyErrors.length < 2 ? '' : 's'}
-        </small>
-      </nav>
-    </div>
+          <button
+            ref={buttonLeft}
+            type="button"
+            disabled={activeIdx === 0}
+            aria-disabled={activeIdx === 0}
+            onClick={handlePrevious}
+            className="error-overlay-pagination-button"
+          >
+            <LeftArrow
+              title="previous"
+              className="error-overlay-pagination-button-icon"
+            />
+          </button>
+          <div className="error-overlay-pagination-count">
+            <span>{activeIdx + 1}/</span>
+            <span data-nextjs-dialog-header-total-count>
+              {readyErrors.length}
+            </span>
+          </div>
+          <button
+            ref={buttonRight}
+            type="button"
+            disabled={activeIdx === readyErrors.length - 1}
+            aria-disabled={activeIdx === readyErrors.length - 1}
+            onClick={handleNext}
+            className="error-overlay-pagination-button"
+          >
+            <RightArrow
+              title="next"
+              className="error-overlay-pagination-button-icon"
+            />
+          </button>
+        </nav>
+      )}
+    </>
   )
 }
+
+export const styles = css`
+  .error-overlay-pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: 4px;
+    gap: 8px;
+    background: var(--color-background-100);
+    box-shadow: var(--shadow-sm);
+
+    border: 1px solid var(--color-gray-400);
+    border-radius: var(--rounded-full);
+  }
+
+  .error-overlay-pagination-count {
+    color: var(--color-gray-900);
+    text-align: center;
+    font-size: var(--size-font-small);
+    font-weight: 500;
+    line-height: 16px;
+  }
+
+  .error-overlay-pagination-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    padding: 4px;
+    background: var(--color-gray-300);
+
+    border: none;
+    border-radius: var(--rounded-full);
+
+    &:focus {
+      outline: none;
+    }
+
+    &:not(:disabled):active {
+      background: var(--color-gray-500);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  .error-overlay-pagination-button-icon {
+    color: var(--color-gray-1000);
+  }
+`
diff --git a/...s/next/src/client/components/react-dev-overlay/_experimental/internal/icons/LeftArrow.tsx b/...s/next/src/client/components/react-dev-overlay/_experimental/internal/icons/LeftArrow.tsx
@@ -1,13 +1,25 @@
-export function LeftArrow({ title }: { title: string }) {
+export function LeftArrow({
+  title,
+  className,
+}: {
+  title?: string
+  className?: string
+}) {
   return (
-    <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      className={className}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <title>{title}</title>
       <path
-        d="M6.99996 1.16666L1.16663 6.99999L6.99996 12.8333M12.8333 6.99999H1.99996H12.8333Z"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.46963 13.7804L6.99996 14.3108L8.06062 13.2501L7.53029 12.7198L3.56062 8.75011H14.25H15V7.25011H14.25H3.56062L7.53029 3.28044L8.06062 2.75011L6.99996 1.68945L6.46963 2.21978L1.39641 7.29301C1.00588 7.68353 1.00588 8.3167 1.39641 8.70722L6.46963 13.7804Z"
+        fill="currentColor"
       />
     </svg>
   )

diff --git a/.../next/src/client/components/react-dev-overlay/_experimental/internal/icons/RightArrow.tsx b/.../next/src/client/components/react-dev-overlay/_experimental/internal/icons/RightArrow.tsx
@@ -1,13 +1,25 @@
-export function RightArrow({ title }: { title: string }) {
+export function RightArrow({
+  title,
+  className,
+}: {
+  title?: string
+  className?: string
+}) {
   return (
-    <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      className={className}
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <title>{title}</title>
       <path
-        d="M6.99996 1.16666L12.8333 6.99999L6.99996 12.8333M1.16663 6.99999H12H1.16663Z"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9.53033 2.21978L9 1.68945L7.93934 2.75011L8.46967 3.28044L12.4393 7.25011H1.75H1V8.75011H1.75H12.4393L8.46967 12.7198L7.93934 13.2501L9 14.3108L9.53033 13.7804L14.6036 8.70722C14.9941 8.3167 14.9941 7.68353 14.6036 7.29301L9.53033 2.21978Z"
+        fill="currentColor"
       />
     </svg>
   )

diff --git a/...src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx b/...src/client/components/react-dev-overlay/_experimental/internal/styles/ComponentStyles.tsx
@@ -2,7 +2,7 @@ import { styles as codeFrame } from '../components/CodeFrame/styles'
 import { styles as dialog } from '../components/Dialog'
 import { styles as errorLayout } from '../components/Errors/error-overlay-layout/error-overlay-layout'
 import { styles as bottomStacks } from '../components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks'
-import { styles as pagination } from '../components/Errors/ErrorPagination/styles'
+import { styles as pagination } from '../components/Errors/error-overlay-pagination/error-overlay-pagination'
 import { styles as overlay } from '../components/Overlay/styles'
 import { styles as footer } from '../components/Errors/error-overlay-footer/styles'
 import { styles as terminal } from '../components/Terminal/styles'