Skip to content

Commit

Permalink
fix(plasma-new-hope): fix Notification layout with long text
Browse files Browse the repository at this point in the history
  • Loading branch information
@kayman233
kayman233 committed Dec 18, 2023
1 parent 133d3c5 commit 5048e82
Show file tree
Hide file tree
Showing 26 changed files with 172 additions and 70 deletions.
Binary file modified ...ion/Notification.component-test.tsx/plasma-web Notification -- default.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...tion/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...n/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ion/Notification.component-test.tsx/plasma-web Notification -- default.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...tion/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...n/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 8 additions & 2 deletions packages/plasma-b2c/src/components/Notification/Notification.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,14 @@ export const config = {
${notificationTokens.contentPaddingBottom}: 0rem;
${notificationTokens.contentPaddingLeft}: 0.25rem;
${notificationTokens.textboxPaddingTop}: 0rem;
${notificationTokens.contentPaddingTopWithoutIcon}: 0.25rem;
${notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon}: 1rem;
${notificationTokens.textboxPaddingTop}: 0.1875rem;
${notificationTokens.textboxPaddingRight}: 0.125rem;
${notificationTokens.textboxPaddingBottom}: 0.375rem;
${notificationTokens.textboxPaddingLeft}: 0.125rem;
${notificationTokens.textboxPaddingTopWithLeftIcon}: 0.1875rem;
${notificationTokens.textboxPaddingRightWithCloseIcon}: 1.625rem;
${notificationTokens.textboxGap}: 0.25rem;
Expand All @@ -31,6 +33,7 @@ export const config = {
${notificationTokens.buttonsMarginTop}: 0.375rem;
${notificationTokens.contentLeftIconSize}: 1.5rem;
${notificationTokens.contentLeftIconMargin}: 0.375rem;
${notificationTokens.contentTopIconMargin}: 0.5rem;
Expand All @@ -49,6 +52,7 @@ export const config = {
${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height);
${notificationTokens.closeIconColor}: var(--plasma-colors-tertiary);
${notificationTokens.closeIconColorOnHover}: var(--plasma-colors-primary);
${notificationTokens.horizontalLayoutGap}: 0.375rem;
${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem;
Expand All @@ -71,6 +75,7 @@ export const config = {
${notificationTokens.closeIconRight}: 0.5rem;
${notificationTokens.padding}: 0.375rem;
${notificationTokens.textboxPaddingTopWithTopIcon}: 0rem;
${notificationTokens.contentPaddingTop}: 0.125rem;
${notificationTokens.contentPaddingRight}: 0.25rem;
Expand All @@ -84,6 +89,7 @@ export const config = {
${notificationTokens.closeIconRight}: 1rem;
${notificationTokens.padding}: 0.5625rem 1rem 1rem 1rem;
${notificationTokens.textboxPaddingTopWithTopIcon}: 0.1875rem;
${notificationTokens.contentPaddingTop}: 0.25rem;
${notificationTokens.contentPaddingRight}: 0rem;
Expand Down
19 changes: 13 additions & 6 deletions packages/plasma-b2c/src/components/Notification/Notification.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,14 @@ import { Button } from '../Button/Button';
import { Modal } from '../Modal';
import { PopupBaseProvider } from '../PopupBase';

import { Notification, addNotification, NotificationsProvider, NotificationIconPlacement, NotificationProps } from '.';
import {
Notification,
addNotification,
NotificationsProvider,
NotificationIconPlacement,
NotificationProps,
NotificationLayout,
} from '.';

const titles = ['Выполнено', 'Внимание', 'Ошибка'];
const texts = ['SSH ключ успешно скопирован', 'Нельзя скопировать SSH ключ', 'Не удалось скопировать SSH ключ'];
Expand Down Expand Up @@ -41,9 +48,9 @@ interface StoryDefaultProps {
children: string;
showCloseIcon: boolean;
showLeftIcon: boolean;
layout: 'vertical' | 'horizontal';
layout: NotificationLayout;
size: 'xs' | 'xs';
iconPlacement: 'top' | 'left';
iconPlacement: NotificationIconPlacement;
}

const ButtonsWrapper = styled.div`
Expand Down Expand Up @@ -115,17 +122,17 @@ export const Default: StoryObj<StoryDefaultProps> = {

type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
timeout: number;
layout: 'vertical' | 'horizontal';
layout: NotificationLayout;
size: 'xs' | 'xxs';
iconPlacement: 'top' | 'left';
iconPlacement: NotificationIconPlacement;
};

const StoryLiveDemo = ({ timeout, ...rest }: StoryLiveDemoProps) => {
const count = useRef(0);
const handleClick = useCallback(() => {
addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
count.current++;
}, [count]);
}, [count, rest]);

return (
<NotificationsProvider>
Expand Down
34 changes: 25 additions & 9 deletions packages/plasma-new-hope/src/components/Notification/Notification.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { css } from '@linaria/core';
import { styled } from '@linaria/react';

import { applyHyphens } from '../../mixins';
import { buttonConfig } from '../Button';
import { component, mergeConfig } from '../../engines';

import { classes, tokens } from './Notification.tokens';
import { CloseIconType, IconPlacementType, placements } from './Notification.types';
Expand All @@ -10,13 +12,20 @@ export const StyledNotification = css`
width: fit-content;
`;

export const CloseIconWrapper = styled.div`
const mergedButtonConfig = mergeConfig(buttonConfig);
const Button = component(mergedButtonConfig);

export const CloseIconWrapper = styled(Button)`
position: absolute;
width: 1.5rem;
height: 1.5rem;
color: var(${tokens.closeIconColor});
:hover {
color: var(${tokens.closeIconColorOnHover});
}
&.${classes.horizontal} {
position: relative;
}
Expand Down Expand Up @@ -48,8 +57,8 @@ export const ButtonsWrapper = styled.div<IconPlacementType>`
`;

export const IconWrapper = styled.div<IconPlacementType>`
width: 1.5rem;
height: 1.5rem;
width: var(${tokens.contentLeftIconSize});
height: var(${tokens.contentLeftIconSize});
margin-right: ${({ iconPlacement }) =>
iconPlacement === placements.left ? `var(${tokens.contentLeftIconMargin})` : 'unset'};
Expand All @@ -67,7 +76,11 @@ export const ContentBox = styled.div<IconPlacementType>`
// issue #909
display: ${({ iconPlacement }) => (iconPlacement === placements.left ? 'flex' : 'block')};
padding-top: ${({ iconPlacement }) =>
iconPlacement ? `var(${tokens.contentPaddingTop})` : `var(${tokens.contentPaddingTopWithoutIcon})`};
&.${classes.horizontal} {
padding: unset;
display: flex;
align-items: center;
flex-grow: 1;
Expand All @@ -79,15 +92,18 @@ export const TextBox = styled.div<CloseIconType & IconPlacementType>`
var(${tokens.textboxPaddingLeft});
padding-top: ${({ iconPlacement }) =>
iconPlacement === placements.left
? `var(${tokens.textboxPaddingTopWithLeftIcon})`
!iconPlacement || iconPlacement === placements.top
? `var(${tokens.textboxPaddingTopWithTopIcon})`
: `var(${tokens.textboxPaddingTop})`};
padding-right: ${({ showCloseIcon }) =>
showCloseIcon ? `var(${tokens.textboxPaddingRightWithCloseIcon})` : `var(${tokens.textboxPaddingRight})`};
padding-right: ${({ showCloseIcon, iconPlacement }) =>
showCloseIcon && iconPlacement !== placements.top
? `var(${tokens.textboxPaddingRightWithCloseIcon})`
: `var(${tokens.textboxPaddingRight})`};
display: flex;
flex-direction: column;
row-gap: var(${tokens.textboxGap});
word-break: break-word;
&.${classes.horizontal} {
padding: unset;
Expand Down Expand Up @@ -120,11 +136,11 @@ export const StyledItemWrapper = styled.div<{ isHidden: boolean }>`
margin-top: 1rem;
opacity: 1;
&&.show {
&&.${classes.notificationItemOpened} {
animation: 0.4s showAnimation ease-out;
}
&&.hide {
&&.${classes.notificationItemHidden} {
animation: 0.4s hideAnimation ease-out;
}
Expand Down
13 changes: 12 additions & 1 deletion packages/plasma-new-hope/src/components/Notification/Notification.tokens.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ export const classes = {
horizontal: 'notification-layout-horizontal',
vertical: 'notification-layout-vertical',
oneLine: 'notification-one-line-textbox',
withoutIcon: 'notification-without-icon',
withoutCloseIcon: 'notification-without-close-icon',

notificationItemOpened: 'notification-item-opened',
notificationItemHidden: 'notification-item-hidden',
};

export const tokens = {
Expand All @@ -23,24 +28,29 @@ export const tokens = {
paddingOneLineTextbox: '--plasma-notification-padding-one-line-textbox',
horizontalLayoutGap: '--plasma-notification-horizontal-layout-gap',
horizontalLayoutLeftIconMargin: '--plasma-notification-horizontal-layout-left-icon-margin',
horizontalLayoutRightPaddingWithoutCloseIcon:
'--plasma-notification-horizontal-layout-right-padding-without-close-icon',

contentPaddingTop: '--plasma-notification-content-padding-top',
contentPaddingRight: '--plasma-notification-content-padding-right',
contentPaddingBottom: '--plasma-notification-content-padding-bottom',
contentPaddingLeft: '--plasma-notification-content-padding-left',

contentPaddingTopWithoutIcon: '--plasma-notification-content-padding-top-without-icon',

textboxPaddingTop: '--plasma-notification-textbox-padding-top',
textboxPaddingRight: '--plasma-notification-textbox-padding-right',
textboxPaddingBottom: '--plasma-notification-textbox-padding-bottom',
textboxPaddingLeft: '--plasma-notification-textbox-padding-left',

textboxPaddingTopWithLeftIcon: '--plasma-notification-textbox-padding-top-with-left-icon',
textboxPaddingTopWithTopIcon: '--plasma-notification-textbox-padding-top-with-top-icon',
textboxPaddingRightWithCloseIcon: '--plasma-notification-textbox-padding-right-with-close-icon',
textboxGap: '--plasma-notification-textbox-gap',

buttonsMarginTop: '--plasma-notification-buttons-margin-top',
buttonsMarginLeft: '--plasma-notification-buttons-margin-left',

contentLeftIconSize: '--plasma-notification-content-left-icon-size',
contentLeftIconMargin: '--plasma-notification-content-left-icon-margin',
contentTopIconMargin: '--plasma-notification-content-top-icon-margin',

Expand All @@ -65,4 +75,5 @@ export const tokens = {
closeIconTop: '--plasma-notification-close-icon-top',
closeIconRight: '--plasma-notification-close-icon-right',
closeIconColor: '--plasma-notification-close-icon-color',
closeIconColorOnHover: '--plasma-notification-close-icon-color-on-hover',
};
23 changes: 15 additions & 8 deletions packages/plasma-new-hope/src/components/Notification/Notification.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { forwardRef } from 'react';
import React, { forwardRef, useMemo } from 'react';

import { RootProps } from '../../engines';
import { cx } from '../../utils';
Expand Down Expand Up @@ -53,6 +53,10 @@ export const notificationRoot = (Root: RootProps<HTMLDivElement, NotificationPro

const isOneLine = !content || !title;
const oneLineClass = isOneLine ? classes.oneLine : undefined;
const withoutIconClass = icon ? undefined : classes.withoutIcon;
const withoutCloseIconClass = showCloseIcon ? undefined : classes.withoutCloseIcon;

const IconPlacementInternal = useMemo(() => (icon ? iconPlacement : undefined), [icon, iconPlacement]);

return (
<Root
Expand All @@ -65,21 +69,21 @@ export const notificationRoot = (Root: RootProps<HTMLDivElement, NotificationPro
aria-atomic={ariaAtomic}
{...rest}
>
<Wrapper className={cx(classes.wrapper, getLayoutClass(layout), oneLineClass)}>
<Wrapper className={cx(classes.wrapper, getLayoutClass(layout), oneLineClass, withoutCloseIconClass)}>
<ContentBox
iconPlacement={iconPlacement}
className={cx(classes.contentBox, getLayoutClass(layout))}
iconPlacement={IconPlacementInternal}
className={cx(classes.contentBox, getLayoutClass(layout), withoutIconClass)}
>
{icon && (
<IconWrapper
iconPlacement={iconPlacement}
iconPlacement={IconPlacementInternal}
className={cx(classes.icon, getLayoutClass(layout))}
>
{icon}
</IconWrapper>
)}
<TextBox
iconPlacement={iconPlacement}
iconPlacement={IconPlacementInternal}
showCloseIcon={showCloseIcon}
className={cx(classes.textbox, getLayoutClass(layout))}
>
Expand All @@ -89,16 +93,19 @@ export const notificationRoot = (Root: RootProps<HTMLDivElement, NotificationPro
</ContentBox>
{actions && (
<ButtonsWrapper
iconPlacement={iconPlacement}
iconPlacement={IconPlacementInternal}
className={cx(classes.buttonsWrapper, getLayoutClass(layout))}
>
{actions}
</ButtonsWrapper>
)}

{showCloseIcon && (
<CloseIconWrapper
className={cx(classes.closeIcon, getLayoutClass(layout))}
view="clear"
size="s"
onClick={onCloseButtonClick}
className={cx(classes.closeIcon, getLayoutClass(layout))}
>
<IconCross size="s" color="inherit" />
</CloseIconWrapper>
Expand Down
12 changes: 10 additions & 2 deletions packages/plasma-new-hope/src/components/Notification/Notification.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,20 @@ import { HTMLAttributes, ReactNode, RefAttributes } from 'react';

import { ComponentConfig, PropsType, Variants } from '../../engines/types';

export type NotificationLayout = 'horizontal' | 'vertical';
export const layouts = {
horizontal: 'horizontal',
vertical: 'vertical',
};

export type NotificationIconPlacement = 'top' | 'left';
export type NotificationLayout = keyof typeof layouts;

export const placements = {
top: 'top',
left: 'left',
};

export type NotificationIconPlacement = keyof typeof placements;

export type LayoutType = {
layout?: NotificationLayout;
};
Expand Down Expand Up @@ -62,6 +64,12 @@ export interface NotificationProps extends AsProps, HTMLAttributes<HTMLDivElemen
* Колбек при нажатии на кнопку закрытия.
*/
onCloseButtonClick?: () => void;
/**
* @deprecated
* Не влияет на отображение компонента.
* Статус компонента Notification.
*/
status?: string;

/**
* Вид Notification.
Expand Down
5 changes: 4 additions & 1 deletion packages/plasma-new-hope/src/components/Notification/NotificationsPortal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { cx } from '../../utils';
import { NotificationsState, NotificationsEvents, closeNotification } from './NotificationsStore';
import { NotificationPortalProps, NotificationProps } from './Notification.types';
import { StyledItemWrapper, StyledRoot } from './Notification.styles';
import { classes } from './Notification.tokens';

// issue #823
const Popup = component(popupConfig);
Expand All @@ -31,7 +32,9 @@ export const NotificationsPortal: FC<NotificationPortalProps> = ({ config, frame
{notifications.map(({ id, isHidden, ...rest }) => (
<StyledItemWrapper
key={id}
className={cx(isHidden ? 'hide' : 'show')}
className={cx(
isHidden ? classes.notificationItemHidden : classes.notificationItemOpened,
)}
isHidden={isHidden || false}
>
<Notification
Expand Down
10 changes: 3 additions & 7 deletions packages/plasma-new-hope/src/components/Notification/utils/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
import { classes } from '../Notification.tokens';
import { layouts } from '../Notification.types';
import { NotificationLayout } from '../Notification.types';

export const getLayoutClass = (layout?: string) => {
export const getLayoutClass = (layout?: NotificationLayout) => {
if (!layout) {
return undefined;
}

if (layout === layouts.horizontal) {
return classes.horizontal;
}

return classes.vertical;
return classes[layout];
};
3 changes: 3 additions & 0 deletions packages/plasma-new-hope/src/components/Notification/variations/_layout/base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ export const base = css`
.${classes.wrapper}.${classes.horizontal} {
padding: var(${tokens.horizontalLayoutPadding});
&.${classes.withoutCloseIcon} {
padding-right: var(${tokens.horizontalLayoutRightPaddingWithoutCloseIcon});
}
}
.${classes.wrapper}.${classes.horizontal}.${classes.oneLine} {
Expand Down
3 changes: 3 additions & 0 deletions packages/plasma-new-hope/src/components/Notification/variations/_size/base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@ export const base = css`
.${classes.contentBox}.${classes.vertical} {
padding: var(${tokens.contentPaddingTop}) var(${tokens.contentPaddingRight}) var(${tokens.contentPaddingBottom})
var(${tokens.contentPaddingLeft});
&.${classes.withoutIcon} {
padding-top: var(${tokens.contentPaddingTopWithoutIcon});
}
}
.${classes.closeIcon}.${classes.vertical} {
Expand Down
Loading

0 comments on commit 5048e82

Please sign in to comment.