Skip to content

Commit

Permalink
fix: Elevation context wrapping
Browse files Browse the repository at this point in the history
  • Loading branch information
@peter-sanderson
peter-sanderson committed Sep 27, 2024
1 parent f6ae97e commit 03347b5
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 69 deletions.
2 changes: 1 addition & 1 deletion packages/components/src/components/NewModal/NewModal.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export const NewModal: StoryObj<NewModalProps> = {
heading: 'Modal heading',
description: 'Modal description',
children:
'Quos delectus veritatis est doloribus dolor. Odit fugit omnis magni ipsam quia rem aut. Et alias sint non. Consequuntur dignissimos veritatis debitis corporis esse. Quaerat voluptatem unde aut. Iusto laborum omnis quis amet atque. Sint culpa delectus non soluta temporibus saepe. Sequi saepe corrupti aliquam ut sit assumenda aspernatur consequuntur. Ut est ullam iusto facilis voluptatibus. Sit est cum quos. Quasi deleniti non fugit iste alias consequuntur. Ullam ad ut culpa est reiciendis molestiae. Reiciendis ab veritatis a totam inventore nihil voluptatem occaecati. Quisquam atque odit quia nam. Laboriosam rem et ut. Maxime qui voluptatem voluptatem.',
'Quos delectus veritatis est doloribus dolor. Odit fugit omnis magni ipsam quia rem aut. Et alias sint non. Consequuntur dignissimos veritatis debitis corporis esse. Quaerat voluptatem unde aut. Iusto laborum omnis quis amet atque. Sint culpa delectus non soluta temporibus saepe. Sequi saepe corrupti aliquam ut sit assumenda aspernatur consequuntur. Ut est ullam iusto facilis voluptatibus. Sit est cum quos. Quasi deleniti non fugit iste alias consequuntur. Ullam ad ut culpa est reiciendis molestiae. Reiciendis ab veritatis a totam inventore nihil voluptatem occaecati. Quisquam atque odit quia nam. Laboriosam rem et ut. Maxime qui voluptatem voluptatem. Quos delectus veritatis est doloribus dolor. Odit fugit omnis magni ipsam quia rem aut. Et alias sint non. Consequuntur dignissimos veritatis debitis corporis esse. Quaerat voluptatem unde aut. Iusto laborum omnis quis amet atque. Sint culpa delectus non soluta temporibus saepe. Sequi saepe corrupti aliquam ut sit assumenda aspernatur consequuntur. Ut est ullam iusto facilis voluptatibus. Sit est cum quos. Quasi deleniti non fugit iste alias consequuntur. Ullam ad ut culpa est reiciendis molestiae. Reiciendis ab veritatis a totam inventore nihil voluptatem occaecati. Quisquam atque odit quia nam. Laboriosam rem et ut. Maxime qui voluptatem voluptatem. Quos delectus veritatis est doloribus dolor. Odit fugit omnis magni ipsam quia rem aut. Et alias sint non. Consequuntur dignissimos veritatis debitis corporis esse. Quaerat voluptatem unde aut. Iusto laborum omnis quis amet atque. Sint culpa delectus non soluta temporibus saepe. Sequi saepe corrupti aliquam ut sit assumenda aspernatur consequuntur. Ut est ullam iusto facilis voluptatibus. Sit est cum quos. Quasi deleniti non fugit iste alias consequuntur. Ullam ad ut culpa est reiciendis molestiae. Reiciendis ab veritatis a totam inventore nihil voluptatem occaecati. Quisquam atque odit quia nam. Laboriosam rem et ut. Maxime qui voluptatem voluptatem. Quos delectus veritatis est doloribus dolor. Odit fugit omnis magni ipsam quia rem aut. Et alias sint non. Consequuntur dignissimos veritatis debitis corporis esse. Quaerat voluptatem unde aut. Iusto laborum omnis quis amet atque. Sint culpa delectus non soluta temporibus saepe. Sequi saepe corrupti aliquam ut sit assumenda aspernatur consequuntur. Ut est ullam iusto facilis voluptatibus. Sit est cum quos. Quasi deleniti non fugit iste alias consequuntur. Ullam ad ut culpa est reiciendis molestiae. Reiciendis ab veritatis a totam inventore nihil voluptatem occaecati. Quisquam atque odit quia nam. Laboriosam rem et ut. Maxime qui voluptatem voluptatem.',
bottomContent: 'bottomContent' as unknown as JSX.Element,
onCancel: 'withCallback' as unknown as () => void,
onBackClick: 'withCallback' as unknown as () => void,
Expand Down
142 changes: 74 additions & 68 deletions packages/components/src/components/NewModal/NewModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ import {
borders,
Elevation,
mapElevationToBackground,
mapElevationToBackgroundToken,
prevElevation,
spacingsPx,
} from '@trezor/theme';

import { IconButton } from '../buttons/IconButton/IconButton';
import { Text } from '../typography/Text/Text';
import { H3 } from '../typography/Heading/Heading';
import { ElevationContext } from '../ElevationContext/ElevationContext';
import { ElevationContext, useElevation } from '../ElevationContext/ElevationContext';
import { useScrollShadow } from '../../utils/useScrollShadow';
import { NewModalButton } from './NewModalButton';
import { NewModalContext } from './NewModalContext';
Expand Down Expand Up @@ -131,7 +131,7 @@ type NewModalProps = AllowedFrameProps & {
'data-testid'?: string;
};

const NewModalBase = ({
const _NewModalBase = ({
children,
variant = 'primary',
size = 'medium',
Expand All @@ -147,7 +147,9 @@ const NewModalBase = ({
const frameProps = pickAndPrepareFrameProps(rest, allowedNewModalFrameProps);
const { scrollElementRef, onScroll, ShadowContainer, ShadowTop, ShadowBottom } =
useScrollShadow();
const modalBackgroundColor = mapElevationToBackgroundToken({ $elevation: MODAL_ELEVATION });

const { elevation } = useElevation();

const hasHeader = onBackClick || onCancel || heading || description;

useEvent('keydown', (e: KeyboardEvent) => {
Expand All @@ -157,74 +159,78 @@ const NewModalBase = ({
});

return (
<ElevationContext baseElevation={MODAL_ELEVATION}>
<NewModalContext.Provider value={{ variant }}>
<Container
$elevation={MODAL_ELEVATION}
$size={size}
onClick={e => e.stopPropagation()}
data-testid={dataTest}
{...frameProps}
>
{hasHeader && (
<Header>
{onBackClick && (
<IconButton
variant="tertiary"
icon="caretLeft"
data-testid="@modal/back-button"
onClick={onBackClick}
size="small"
/>
)}

<HeadingContainer>
{heading && <Heading>{heading}</Heading>}
{description && (
<Text variant="tertiary" typographyStyle="hint">
{description}
</Text>
)}
</HeadingContainer>

{onCancel && (
<IconButton
variant="tertiary"
icon="close"
data-testid="@modal/close-button"
onClick={onCancel}
size="small"
/>
)}
</Header>
<Container
$elevation={elevation}
$size={size}
onClick={e => e.stopPropagation()}
data-testid={dataTest}
{...frameProps}
>
{hasHeader && (
<Header>
{onBackClick && (
<IconButton
variant="tertiary"
icon="caretLeft"
data-testid="@modal/back-button"
onClick={onBackClick}
size="small"
/>
)}
<ShadowContainer>
<ShadowTop backgroundColor={modalBackgroundColor} />
<ScrollContainer onScroll={onScroll} ref={scrollElementRef}>
<Body id={NEW_MODAL_CONTENT_ID}>
{icon && (
<IconWrapper
$variant={variant}
$size={ICON_SIZE}
$isPushedTop={
!!onCancel && !heading && !description && !onBackClick
}
>
<Icon name={icon} size={ICON_SIZE} variant={variant} />
</IconWrapper>
)}
{children}
</Body>
</ScrollContainer>
<ShadowBottom backgroundColor={modalBackgroundColor} />
</ShadowContainer>
{bottomContent && <Footer>{bottomContent}</Footer>}
</Container>
</NewModalContext.Provider>
</ElevationContext>

<HeadingContainer>
{heading && <Heading>{heading}</Heading>}
{description && (
<Text variant="tertiary" typographyStyle="hint">
{description}
</Text>
)}
</HeadingContainer>

{onCancel && (
<IconButton
variant="tertiary"
icon="close"
data-testid="@modal/close-button"
onClick={onCancel}
size="small"
/>
)}
</Header>
)}
<ShadowContainer>
<ShadowTop />
<ScrollContainer onScroll={onScroll} ref={scrollElementRef}>
<Body id={NEW_MODAL_CONTENT_ID}>
{icon && (
<IconWrapper
$variant={variant}
$size={ICON_SIZE}
$isPushedTop={
!!onCancel && !heading && !description && !onBackClick
}
>
<Icon name={icon} size={ICON_SIZE} variant={variant} />
</IconWrapper>
)}
{children}
</Body>
</ScrollContainer>
<ShadowBottom />
</ShadowContainer>
{bottomContent && <Footer>{bottomContent}</Footer>}
</Container>
);
};

const NewModalBase = (props: NewModalProps) => (
<ElevationContext baseElevation={prevElevation[MODAL_ELEVATION]}>
<NewModalContext.Provider value={{ variant: props.variant }}>
<_NewModalBase {...props} />
</NewModalContext.Provider>
</ElevationContext>
);

const NewModal = (props: NewModalProps) => {
const { alignment, onCancel } = props;

Expand Down

0 comments on commit 03347b5

Please sign in to comment.