Skip to content

Commit

Permalink
[dev-overlay] change dev indicator position by next config option (#7…
Browse files Browse the repository at this point in the history 
…6077)

### What?

This PR uses the `devIndicators.position` option to set the position of the dev indicator.
The default option is changed from `"bottom-right"` to `"bottom-left"` to sync the previous dev indicator behavior, but have covered backward compatibility for the default position of old overlay's build activity indicator.

### Success Criteria

- [x] Does setting `buildActivityPosition` correctly set the dev indicator position?
- [x] Does setting the `position` correctly set the dev indicator position?
- [x] Does it default to `"bottom-left"`?
- [x] Does the dev indicator popover display properly based on the `position`?

Backwards Compatible:

> Are there any breaking changes?

- [x]  Is the position `"bottom-right"` on the old overlay if the user hasn't set the `position`?
- [x] Is the position `"bottom-right"` on the old overlay if the user hasn't set the `buildActivityPosition`?
- [x] Does the position follow the `position` option?
- [x] Does the position follow the `buildActivityPosition` option?

https://github.com/user-attachments/assets/a5dba705-1b9d-4470-80e6-1952b22c2f46

Closes NDX-838
  • Loading branch information
@devjiwonchoi
devjiwonchoi authored Feb 17, 2025
1 parent 698220d commit c2085df
Show file tree
Hide file tree
Showing 11 changed files with 203 additions and 153 deletions.
4 changes: 2 additions & 2 deletions packages/next/src/build/webpack/plugins/define-env-plugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,8 +239,8 @@ export function getDefineEnv({
'process.env.__NEXT_TRAILING_SLASH': config.trailingSlash,
'process.env.__NEXT_BUILD_INDICATOR':
config.devIndicators.buildActivity ?? true,
'process.env.__NEXT_BUILD_INDICATOR_POSITION':
config.devIndicators.position ?? 'bottom-right',
'process.env.__NEXT_DEV_INDICATOR_POSITION':
config.devIndicators.position ?? 'bottom-left',
'process.env.__NEXT_STRICT_MODE':
config.reactStrictMode === null ? false : config.reactStrictMode,
'process.env.__NEXT_STRICT_MODE_APP':
Expand Down
7 changes: 7 additions & 0 deletions ...perimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@ const meta: Meta<typeof DevToolsIndicator> = {
parameters: {
layout: 'centered',
},
argTypes: {
position: {
control: 'select',
options: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
defaultValue: 'bottom-left',
},
},
decorators: [
withShadowPortal,
// Test for high z-index
Expand Down
170 changes: 162 additions & 8 deletions ...rlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,28 @@ import { Cross, NextLogo } from './internal/next-logo'
import { useIsDevBuilding } from '../../../../../../../dev/dev-build-indicator/internal/initialize-for-new-overlay'
import { useIsDevRendering } from './internal/dev-render-indicator'
import { useDelayedRender } from '../../../hooks/use-delayed-render'
import { noop as css } from '../../../helpers/noop-template'

// TODO: add E2E tests to cover different scenarios

const INDICATOR_POSITION =
(process.env
.__NEXT_DEV_INDICATOR_POSITION as typeof window.__NEXT_DEV_INDICATOR_POSITION) ||
'bottom-left'

type DevToolsIndicatorPosition = typeof INDICATOR_POSITION

export function DevToolsIndicator({
state,
errorCount,
setIsErrorOverlayOpen,
position = INDICATOR_POSITION,
}: {
state: OverlayState
errorCount: number
setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>
// Technically this prop isn't needed, but useful for testing.
position?: DevToolsIndicatorPosition
}) {
const [isDevToolsIndicatorOpen, setIsDevToolsIndicatorOpen] = useState(true)

Expand All @@ -32,6 +43,7 @@ export function DevToolsIndicator({
}}
setIsErrorOverlayOpen={setIsErrorOverlayOpen}
isTurbopack={!!process.env.TURBOPACK}
position={position}
/>
)
)
Expand All @@ -54,13 +66,15 @@ function DevToolsPopover({
issueCount,
isStaticRoute,
isTurbopack,
position,
hide,
setIsErrorOverlayOpen,
}: {
issueCount: number
isStaticRoute: boolean
semver: string | undefined
isTurbopack: boolean
position: DevToolsIndicatorPosition
hide: () => void
setIsErrorOverlayOpen: Dispatch<SetStateAction<boolean>>
}) {
Expand Down Expand Up @@ -174,12 +188,19 @@ function DevToolsPopover({
}, ANIMATE_OUT_DURATION_MS)
}

const [vertical, horizontal] = position.split('-', 2)

return (
<Toast
data-nextjs-toast
style={{
boxShadow: 'none',
zIndex: 2147483647,
// Reset the toast component's default positions.
bottom: 'initial',
left: 'initial',
[vertical]: 'var(--size-2_5)',
[horizontal]: 'var(--size-5)',
}}
>
<NextLogo
Expand All @@ -206,13 +227,15 @@ function DevToolsPopover({
aria-orientation="vertical"
aria-label="Next.js Dev Tools Items"
tabIndex={-1}
className="menu"
className="dev-tools-indicator-menu"
onKeyDown={onMenuKeydown}
data-rendered={rendered}
style={
{
'--animate-out-duration-ms': `${ANIMATE_OUT_DURATION_MS}ms`,
'--animate-out-timing-function': ANIMATE_OUT_TIMING_FUNCTION,
[vertical]: 'calc(100% + var(--size-gap))',
[horizontal]: 0,
} as React.CSSProperties
}
>
Expand All @@ -223,7 +246,7 @@ function DevToolsPopover({
setSelectedIndex,
}}
>
<div className="inner">
<div className="dev-tools-indicator-inner">
{issueCount > 0 && (
<MenuItem
index={0}
Expand All @@ -249,7 +272,7 @@ function DevToolsPopover({
)}
</div>

<div className="footer">
<div className="dev-tools-indicator-footer">
<MenuItem
data-hide-dev-tools
label="Hide Dev Tools"
Expand Down Expand Up @@ -296,7 +319,7 @@ function MenuItem({

return (
<div
className="item"
className="dev-tools-indicator-item"
data-index={index}
data-selected={selected}
onClick={click}
Expand All @@ -317,16 +340,19 @@ function MenuItem({
tabIndex={selected ? 0 : -1}
{...props}
>
<span className="label">{label}</span>
<span className="value">{value}</span>
<span className="dev-tools-indicator-label">{label}</span>
<span className="dev-tools-indicator-value">{value}</span>
</div>
)
}

function IssueCount({ children }: { children: number }) {
return (
<span className="issueCount" data-has-issues={children > 0}>
<span className="indicator" />
<span
className="dev-tools-indicator-issue-count"
data-has-issues={children > 0}
>
<span className="dev-tools-indicator-issue-count-indicator" />
{children}
</span>
)
Expand Down Expand Up @@ -431,3 +457,131 @@ function ExternalIcon() {
</svg>
)
}

export const DEV_TOOLS_INDICATOR_STYLES = css`
.dev-tools-indicator-menu {
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
align-items: flex-start;
background: var(--color-background-100);
border: 1px solid var(--color-gray-alpha-400);
background-clip: padding-box;
box-shadow: var(--shadow-menu);
border-radius: var(--rounded-xl);
position: absolute;
font-family: var(--font-stack-sans);
z-index: 1000;
overflow: hidden;
opacity: 0;
outline: 0;
min-width: 248px;
transition: opacity var(--animate-out-duration-ms)
var(--animate-out-timing-function);
&[data-rendered='true'] {
opacity: 1;
scale: 1;
}
}
.dev-tools-indicator-inner {
padding: 6px;
width: 100%;
}
.dev-tools-indicator-item {
display: flex;
align-items: center;
padding: 8px 6px;
height: 36px;
border-radius: 6px;
text-decoration: none !important;
user-select: none;
&:focus-visible {
outline: 0;
}
}
.dev-tools-indicator-footer {
background: var(--color-background-200);
padding: 6px;
border-top: 1px solid var(--color-gray-400);
width: 100%;
}
.dev-tools-indicator-item[data-selected='true'] {
cursor: pointer;
background-color: var(--color-gray-200);
}
.dev-tools-indicator-label {
font-size: var(--size-font-small);
line-height: var(--size-5);
color: var(--color-gray-1000);
}
.dev-tools-indicator-value {
font-size: var(--size-font-small);
line-height: var(--size-5);
color: var(--color-gray-900);
margin-left: auto;
}
.dev-tools-indicator-issue-count {
--color-primary: var(--color-gray-800);
--color-secondary: var(--color-gray-100);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 41px;
height: 24px;
background: var(--color-background-100);
border: 1px solid var(--color-gray-alpha-400);
background-clip: padding-box;
box-shadow: var(--shadow-small);
padding: 2px;
color: var(--color-gray-1000);
border-radius: 128px;
font-weight: 500;
font-size: 13px;
font-variant-numeric: tabular-nums;
&[data-has-issues='true'] {
--color-primary: var(--color-red-800);
--color-secondary: var(--color-red-100);
}
.dev-tools-indicator-issue-count-indicator {
width: 8px;
height: 8px;
background: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-secondary);
border-radius: 50%;
}
}
.dev-tools-indicator-shortcut {
display: flex;
gap: var(--size-1);
kbd {
width: var(--size-5);
height: var(--size-5);
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--rounded-md);
border: 1px solid var(--color-gray-400);
font-family: var(--font-stack-sans);
background: var(--color-background-100);
color: var(--color-gray-1000);
text-align: center;
font-size: var(--size-font-smaller);
line-height: var(--size-4);
}
}
`
Loading

0 comments on commit c2085df

Please sign in to comment.