Skip to content

Commit

Permalink
fix(Snackbar): z-index conflict with FixedFooterLayout (#897)
Browse files Browse the repository at this point in the history
  • Loading branch information
@atabel
atabel authored Sep 22, 2023
1 parent 71c5297 commit 0d86e02
Showing 1 changed file with 44 additions and 41 deletions.
85 changes: 44 additions & 41 deletions src/snackbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import * as styles from './snackbar.css';
import {sprinkles} from './sprinkles.css';
import {vars} from './skins/skin-contract.css';
import {getPrefixedDataAttributes} from './utils/dom';
import {Portal} from './portal';

import type {DataAttributes} from './utils/types';

Expand Down Expand Up @@ -58,54 +59,56 @@ const SnackbarComponent: React.FC<Props> = ({
}, [close, duration]);

return (
<div className={classNames(styles.snackbar, {[styles.snackbarOpen]: isOpen})}>
<div
role="alert"
className={classNames(
styles.wrapper,
type === 'CRITICAL' ? styles.wrapperCritical : styles.wrapperInfo,
{[styles.wrapperOpen]: isOpen}
)}
{...getPrefixedDataAttributes(dataAttributes, 'SnackBar')}
>
<Portal>
<div className={classNames(styles.snackbar, {[styles.snackbarOpen]: isOpen})}>
<div
role="alert"
className={classNames(
styles.content,
sprinkles({
flexDirection: hasLongButton ? 'column' : 'row',
alignItems: hasLongButton ? undefined : 'center',
})
styles.wrapper,
type === 'CRITICAL' ? styles.wrapperCritical : styles.wrapperInfo,
{[styles.wrapperOpen]: isOpen}
)}
{...getPrefixedDataAttributes(dataAttributes, 'SnackBar')}
>
<Text2 regular color={vars.colors.textPrimaryInverse}>
{message}
</Text2>
{buttonText && (
<div
className={classNames(
styles.button,
type === 'CRITICAL' ? styles.buttonCritical : styles.buttonInfo,
{[styles.longButton]: hasLongButton}
)}
>
<BaseTouchable
className={sprinkles({
border: 'none',
padding: 0,
background: 'transparent',
color: 'inherit',
})}
style={{lineHeight: 'inherit', fontWeight: 'inherit'}}
ref={buttonRef}
onPress={close}
<div
className={classNames(
styles.content,
sprinkles({
flexDirection: hasLongButton ? 'column' : 'row',
alignItems: hasLongButton ? undefined : 'center',
})
)}
>
<Text2 regular color={vars.colors.textPrimaryInverse}>
{message}
</Text2>
{buttonText && (
<div
className={classNames(
styles.button,
type === 'CRITICAL' ? styles.buttonCritical : styles.buttonInfo,
{[styles.longButton]: hasLongButton}
)}
>
{buttonText}
</BaseTouchable>
</div>
)}
<BaseTouchable
className={sprinkles({
border: 'none',
padding: 0,
background: 'transparent',
color: 'inherit',
})}
style={{lineHeight: 'inherit', fontWeight: 'inherit'}}
ref={buttonRef}
onPress={close}
>
{buttonText}
</BaseTouchable>
</div>
)}
</div>
</div>
</div>
</div>
</Portal>
);
};

Expand Down

1 comment on commit 0d86e02

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-7g93fvcka-tuentisre.vercel.app

Built with commit 0d86e02.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.