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

Polish error feedback row #74880

Open
wants to merge 2 commits into
base: canary
Choose a base branch
from
Open

Polish error feedback row #74880

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d7448c5
Update error-overlay-layout.stories.tsx
gaojude Jan 14, 2025
e80b873
fix
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
2 changes: 1 addition & 1 deletion ...imental/internal/components/Errors/error-overlay-footer/error-feedback/error-feedback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@ export function ErrorFeedback({ errorCode }: ErrorFeedbackProps) {
export const styles = css`
.error-feedback {
display: flex;
align-items: center;
gap: var(--size-gap);
white-space: nowrap;
}
.error-feedback-thanks {
Expand Down
14 changes: 9 additions & 5 deletions ...ay/_experimental/internal/components/Errors/error-overlay-footer/error-overlay-footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { styles as feedbackStyles } from './error-feedback/error-feedback'
import { noop as css } from '../../../helpers/noop-template'

export type ErrorOverlayFooterProps = {
errorCode: string
footerMessage?: string
errorCode: string | undefined
footerMessage: string | undefined
}

export function ErrorOverlayFooter({
Expand All @@ -13,17 +13,21 @@ export function ErrorOverlayFooter({
}: ErrorOverlayFooterProps) {
return (
<footer className="error-overlay-footer">
<p className="error-overlay-footer-message">{footerMessage}</p>
<ErrorFeedback errorCode={errorCode} />
{footerMessage ? (
<p className="error-overlay-footer-message">{footerMessage}</p>
) : null}
{errorCode ? <ErrorFeedback errorCode={errorCode} /> : null}
</footer>
)
}

export const styles = css`
.error-overlay-footer {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;

gap: var(--size-gap);
padding: var(--size-3);
background: var(--color-background-200);
border-top: 1px solid var(--color-gray-400);
Expand Down
28 changes: 27 additions & 1 deletion ...rimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ export const Default: Story = {
installed: '15.0.0',
staleness: 'fresh',
},
children: "Module not found: Cannot find module './missing-module'",
children: (
<div style={{ margin: '1rem' }}>
Module not found: Cannot find module './missing-module'
</div>
),
},
}

Expand All @@ -32,3 +36,25 @@ export const Turbopack: Story = {
isTurbopack: true,
},
}

export const NoErrorCode: Story = {
args: {
...Default.args,
errorCode: undefined,
},
}

export const WithLongFooterMessage: Story = {
args: {
...Default.args,
footerMessage:
'This is a very long footer message that demonstrates how the footer handles lengthy text. It could contain important information about the error or additional context for debugging.',
},
}

export const WithShortFooterMessage: Story = {
args: {
...Default.args,
footerMessage: 'A brief error description.',
},
}
3 changes: 1 addition & 2 deletions ...ay/_experimental/internal/components/Errors/error-overlay-layout/error-overlay-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,9 @@ export function ErrorOverlayLayout({
<ErrorOverlayDialogBody>{children}</ErrorOverlayDialogBody>

<DialogFooter>
{/* TODO: errorCode should not be undefined whatsoever */}
<ErrorOverlayFooter
footerMessage={footerMessage}
errorCode={errorCode!}
errorCode={errorCode}
/>
<ErrorOverlayBottomStacks
errorsCount={readyErrors?.length ?? 0}
Expand Down
Loading