Skip to content

Commit

Permalink
Refine NextLogo Accessibility and Styling (#74869)
Browse files Browse the repository at this point in the history 
This PR addresses the following issues and improvements:

1.	Apply a style reset to Storybook for consistency.

2.	Update NextLogo element from div to button to improve accessibility.

3.	Add a press effect to shrink NextLogo for better interactivity.

4. Ensure the pointer cursor is consistent across the entire NextLogo
area.

5.	Add a box shadow to NextLogo for improved visual depth.

6.	Optimize animation by refining speed and sequence.

7. Replace hardcoded colors with CSS variables to enable dark mode
support.

8.	Fix overflow issues with effects.

9.	Resolve black background overflow problem.

10.	Enhance SVG anti-aliasing for a cleaner appearance.

11. Center the logo by moving it to the right by 1 pixel. 

This PR serves as a fast-follow to
#74833
  • Loading branch information
@gaojude
gaojude authored Jan 14, 2025
1 parent 39c7ade commit 019afc3
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 91 deletions.
12 changes: 11 additions & 1 deletion ...xperimental/internal/components/Errors/dev-tools-indicator/internal/next-logo.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import type { Meta, StoryObj } from '@storybook/react'
import { NextLogo } from './next-logo'
import { withShadowPortal } from '../../../../storybook/with-shadow-portal'

const meta: Meta<typeof NextLogo> = {
component: NextLogo,
parameters: {
layout: 'centered',
},
args: {
onClick: () => alert('Clicked!'),
onClick: () => console.log('Clicked!'),
},
decorators: [withShadowPortal],
}

export default meta
Expand Down Expand Up @@ -69,3 +71,11 @@ export const Rendering: Story = {
isDevRendering: true,
},
}

export const RenderingWithError: Story = {
args: {
issueCount: 1,
isDevBuilding: false,
isDevRendering: true,
},
}
187 changes: 97 additions & 90 deletions ...erlay/_experimental/internal/components/Errors/dev-tools-indicator/internal/next-logo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react'
import { noop as css } from '../../../../../../internal/helpers/noop-template'

interface Props extends React.ComponentProps<'svg'> {
interface Props extends React.ComponentProps<'button'> {
issueCount: number
onClick: () => void
isDevBuilding: boolean
Expand All @@ -16,6 +16,7 @@ export const NextLogo = ({
...props
}: Props) => {
const [isLoading, setIsLoading] = useState(false)
const [isPressed, setIsPressed] = useState(false)

// Only shows the loading state after a 200ms delay when building or rendering,
// to avoid flashing the loading state for quick updates
Expand All @@ -31,47 +32,71 @@ export const NextLogo = ({
}, [isDevBuilding, isDevRendering])

return (
<div onClick={onClick} style={{ position: 'relative' }}>
<button
onClick={onClick}
style={{
position: 'relative',
cursor: 'pointer',
userSelect: 'none',
backdropFilter: 'blur(48px)',
boxShadow:
'0px 24px 32px -8px #0000001A, 0px 8px 16px -4px #0000001A, 0px 1px 1px 0px #00000026',
borderRadius: '50%',
transition: 'transform 0.1s ease',
transform: isPressed ? 'scale(0.95)' : 'scale(1)',
}}
onMouseDown={() => setIsPressed(true)}
onMouseUp={() => setIsPressed(false)}
onMouseLeave={() => setIsPressed(false)}
{...props}
>
<style>
{css`
.path0 {
animation: draw0 2s ease-in-out infinite;
animation: draw0 1.5s ease-in-out infinite;
}
.path1 {
animation: draw1 1.5s ease-out infinite;
animation-delay: 0.3s;
}
.paused {
stroke-dashoffset: 0;
}
@keyframes draw0 {
0% {
0%,
25% {
stroke-dashoffset: -29.6;
}
25%,
50% {
stroke-dashoffset: 0;
}
50%,
75% {
stroke-dashoffset: 0;
}
75%,
100% {
stroke-dashoffset: 29.6;
}
}
.path1 {
animation: draw1 2s ease-out infinite;
animation-delay: 0.5s;
}
@keyframes draw1 {
0% {
0%,
20% {
stroke-dashoffset: -11.6;
}
25% {
stroke-dashoffset: 0;
}
20%,
50% {
stroke-dashoffset: 0;
}
50%,
75% {
stroke-dashoffset: 11.6;
stroke-dashoffset: 0;
}
75%,
100% {
stroke-dashoffset: 11.6;
}
Expand All @@ -88,16 +113,14 @@ export const NextLogo = ({
right: '-5px',
width: '20px',
height: '20px',
background: '#551A1E',
background: 'var(--color-red-300)',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: '#FF6369',
color: 'var(--color-red-900)',
fontSize: '12px',
fontWeight: 'bold',
cursor: 'pointer',
userSelect: 'none',
}}
>
{issueCount}
Expand All @@ -110,76 +133,60 @@ export const NextLogo = ({
viewBox="0 0 40 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
style={{ shapeRendering: 'geometricPrecision' }}
>
<g filter="url(#filter0_bdddi_1457_6023)">
<rect
x="0"
y="0"
width="40"
height="40"
rx="20"
fill="#333333"
shapeRendering="crispEdges"
/>
<rect
x="0"
y="0"
width="40"
height="40"
rx="20"
fill={issueCount > 0 ? '#E5484D' : 'black'}
fillOpacity="0.8"
shapeRendering="crispEdges"
/>
<g filter="url(#filter1_i_1457_6023)">
<rect
x="1.5"
y="1.5"
width="37"
height="37"
rx="18.5"
stroke="url(#paint0_angular_1457_6023)"
strokeOpacity="0.8"
/>
<rect
x="1.5"
y="1.5"
width="37"
height="37"
rx="18.5"
stroke="white"
strokeOpacity="0.2"
style={{ mixBlendMode: 'multiply' }}
/>
<rect
x="2"
y="2"
width="36"
height="36"
rx="18"
fill={issueCount > 0 ? '#CA2A30' : '#2A2A2A'}
/>
<defs>
<clipPath id="circleClip">
<circle cx="20" cy="20" r="20" />
</clipPath>
</defs>

<g transform="translate(12, 12)">
<path
className={isLoading ? 'path0' : 'paused'}
d="M13.3 15.2 L2.34 1 V12.6"
fill="none"
stroke="url(#paint0_linear_1357_10853)"
strokeWidth="1.86"
mask="url(#mask0)"
strokeDasharray="29.6"
strokeDashoffset="29.6"
<g clipPath="url(#circleClip)">
<g filter="url(#filter0_bdddi_1457_6023)">
<circle cx="20" cy="20" r="20" fill={'black'} fillOpacity="0.8" />
<g filter="url(#filter1_i_1457_6023)">
<circle
cx="20"
cy="20"
r="18.5"
stroke="url(#paint0_angular_1457_6023)"
strokeOpacity="0.8"
/>
<path
className={isLoading ? 'path1' : 'paused'}
d="M11.825 1.5 V13.1"
strokeWidth="1.86"
stroke="url(#paint1_linear_1357_10853)"
strokeDasharray="11.6"
strokeDashoffset="11.6"
<circle
cx="20"
cy="20"
r="18.5"
stroke="white"
strokeOpacity="0.2"
style={{ mixBlendMode: 'multiply' }}
/>
<circle
cx="20"
cy="20"
r="18"
fill={issueCount > 0 ? '#CA2A30' : '#2A2A2A'}
/>

<g transform="translate(13, 12)">
<path
className={isLoading ? 'path0' : 'paused'}
d="M13.3 15.2 L2.34 1 V12.6"
fill="none"
stroke="url(#paint0_linear_1357_10853)"
strokeWidth="1.86"
mask="url(#mask0)"
strokeDasharray="29.6"
strokeDashoffset="29.6"
/>
<path
className={isLoading ? 'path1' : 'paused'}
d="M11.825 1.5 V13.1"
strokeWidth="1.86"
stroke="url(#paint1_linear_1357_10853)"
strokeDasharray="11.6"
strokeDashoffset="11.6"
/>
</g>
</g>
</g>
</g>
Expand Down Expand Up @@ -235,10 +242,10 @@ export const NextLogo = ({

<filter
id="filter0_bdddi_1457_6023"
x="-2"
y="-2"
width="44"
height="44"
x="0"
y="0"
width="40"
height="40"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
Expand Down Expand Up @@ -390,6 +397,6 @@ export const NextLogo = ({
</radialGradient>
</defs>
</svg>
</div>
</button>
)
}
13 changes: 13 additions & 0 deletions ...s/next/src/client/components/react-dev-overlay/_experimental/internal/styles/CssReset.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,9 @@ export function CssReset() {
line-height: 1.5;
color: var(--color-font);
text-align: left;
}
:host:not(button) {
background-color: #fff;
}
Expand Down Expand Up @@ -226,13 +229,23 @@ export function CssReset() {
button {
border-radius: 0;
border: 0;
padding: 0;
margin: 0;
background: none;
appearance: none;
-webkit-appearance: none;
}
button:focus {
outline: 1px dotted;
outline: 5px auto -webkit-focus-ring-color;
}
button:focus:not(:focus-visible) {
outline: none;
}
input,
button,
select,
Expand Down

0 comments on commit 019afc3

Please sign in to comment.