-
Notifications
You must be signed in to change notification settings - Fork 27.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[DevOverlay] Implement New Overlay Layout with Bottom Stacks (#74466)
This PR added the bottom stacks. ### Light/Dark Mode Testing Plan Toggle the device system theme. We might want to consider handling it as a state.  ### Light https://github.com/user-attachments/assets/7d880449-aedf-45d8-a011-0d27670819fe ### Dark https://github.com/user-attachments/assets/d92c8e14-e2c0-4339-ac9a-61e4204304ce Closes NDX-570
- Loading branch information
1 parent
bd96b91
commit e5f60d6
Showing
6 changed files
with
168 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
...nal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import type { Meta, StoryObj } from '@storybook/react' | ||
| import { ErrorOverlayBottomStacks } from './error-overlay-bottom-stacks' | ||
| import { withShadowPortal } from '../../../storybook/with-shadow-portal' | ||
|
|
||
| const meta: Meta<typeof ErrorOverlayBottomStacks> = { | ||
| title: 'ErrorOverlayBottomStacks', | ||
| component: ErrorOverlayBottomStacks, | ||
| parameters: { | ||
| layout: 'fullscreen', | ||
| }, | ||
| decorators: [withShadowPortal], | ||
| } | ||
|
|
||
| export default meta | ||
| type Story = StoryObj<typeof ErrorOverlayBottomStacks> | ||
|
|
||
| export const SingleStack: Story = { | ||
| args: { | ||
| errorsCount: 2, | ||
| activeIdx: 0, | ||
| }, | ||
| } | ||
|
|
||
| export const DoubleStacks: Story = { | ||
| args: { | ||
| errorsCount: 3, | ||
| activeIdx: 0, | ||
| }, | ||
| } |
105 changes: 105 additions & 0 deletions
105
...al/internal/components/Errors/error-overlay-bottom-stacks/error-overlay-bottom-stacks.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import { noop as css } from '../../../helpers/noop-template' | ||
|
|
||
| export type ErrorOverlayBottomStacksProps = { | ||
| errorsCount: number | ||
| activeIdx: number | ||
| } | ||
|
|
||
| export function ErrorOverlayBottomStacks({ | ||
| errorsCount, | ||
| activeIdx, | ||
| }: ErrorOverlayBottomStacksProps) { | ||
| return ( | ||
| <div className="error-overlay-bottom-stacks-wrapper"> | ||
| {errorsCount > 1 && ( | ||
| <div | ||
| className={`error-overlay-bottom-stack-1 ${ | ||
| errorsCount - activeIdx > 1 ? '' : 'stack-slide-up' | ||
| }`} | ||
| aria-hidden="true" | ||
| /> | ||
| )} | ||
|
|
||
| {errorsCount > 2 && ( | ||
| <div | ||
| className={`error-overlay-bottom-stack-2 ${ | ||
| errorsCount - activeIdx > 2 ? '' : 'stack-slide-up' | ||
| }`} | ||
| aria-hidden="true" | ||
| /> | ||
| )} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export const styles = css` | ||
| .error-overlay-bottom-stacks-wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| width: 100%; | ||
| margin-right: auto; | ||
| margin-left: auto; | ||
| outline: none; | ||
| @media (min-width: 576px) { | ||
| max-width: 540px; | ||
| } | ||
| @media (min-width: 768px) { | ||
| max-width: 720px; | ||
| } | ||
| @media (min-width: 992px) { | ||
| max-width: 960px; | ||
| } | ||
| } | ||
| .error-overlay-bottom-stack-1, | ||
| .error-overlay-bottom-stack-2 { | ||
| padding: 0.75rem; | ||
| align-self: center; | ||
| border: 1px solid var(--color-gray-400); | ||
| border-radius: var(--rounded-xl); | ||
| margin-top: -1rem; /* 16px */ | ||
| box-shadow: var(--shadow-md); | ||
| background: var(--color-background-200); | ||
| animation: stack-slide-down 0.3s ease-out forwards; | ||
| transform-origin: top center; | ||
| } | ||
| .error-overlay-bottom-stack-1 { | ||
| z-index: 49; | ||
| width: calc(100% - 1.5rem); /* 24px */ | ||
| } | ||
| .error-overlay-bottom-stack-2 { | ||
| z-index: 48; | ||
| width: calc(100% - 3rem); /* 48px */ | ||
| } | ||
| @keyframes stack-slide-down { | ||
| from { | ||
| opacity: 0; | ||
| transform: translateY(-50%); | ||
| } | ||
| to { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
| .stack-slide-up { | ||
| animation: stack-slide-up 0.3s ease-out forwards; | ||
| } | ||
| @keyframes stack-slide-up { | ||
| from { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| to { | ||
| opacity: 0; | ||
| transform: translateY(-50%); | ||
| } | ||
| } | ||
| ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters