Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refine NextLogo Accessibility and Styling #74869

Merged
merged 10 commits into from
Jan 14, 2025
+121 −91
Merged

Refine NextLogo Accessibility and Styling #74869

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d6ef05d
fix animation sequence, speed, and positioning
gaojude Jan 13, 2025
74727d7
Update next-logo.stories.tsx
gaojude Jan 14, 2025
1d1c6ef
maybe improve anti-aliasing
gaojude Jan 14, 2025
eb3a338
fix pointer
gaojude Jan 14, 2025
e687120
Update next-logo.stories.tsx
gaojude Jan 14, 2025
6661bed
fix issue count circle count
gaojude Jan 14, 2025
4d7a047
change to button
gaojude Jan 14, 2025
977c1ca
fix visual overflow
gaojude Jan 14, 2025
98ab440
add box shadow
gaojude Jan 14, 2025
47a65b3
shrink upon pressing
gaojude Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion ...xperimental/internal/components/Errors/dev-tools-indicator/internal/next-logo.stories.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading