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

Jump to bottom

feat(plasma-ui/web/b2c): Toast add offset prop #336

Merged
merged 10 commits into from Feb 15, 2023
Merged

feat(plasma-ui/web/b2c): Toast add offset prop #336

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
832a87d
feat(plasma-ui): add offset prop in storybook
Yakutoc Feb 8, 2023
0c4c17e
feat(plasma-core): add offset prop
Yakutoc Feb 8, 2023
a37b248
feat(plasma-b2c): add offset prop in storybook
Yakutoc Feb 13, 2023
56c0f4f
feat(plasma-web): add offset prop in storybook
Yakutoc Feb 13, 2023
2ba0eec
docs(plasma-web): add offset prop in doc
Yakutoc Feb 13, 2023
ba69035
docs(plasma-ui): add offset prop in doc
Yakutoc Feb 13, 2023
6b15564
feat(plasma-core): add test for offset prop
Yakutoc Feb 15, 2023
7ec7327
chore(plasma-ui): add toast + offset snapshot
Yakutoc Feb 15, 2023
32d6a27
chore(plasma-web): add toast + offset snapshot
Yakutoc Feb 15, 2023
5f7feb9
chore(plasma-b2c): add toast + offset snapshot
Yakutoc Feb 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 9 additions & 1 deletion packages/plasma-b2c/src/components/Toast/Toast.stories.tsx
View file
Open in desktop
Expand Up @@ -25,6 +25,7 @@ interface LiveDemoProps extends ToastProps {
position: ToastPosition;
timeout: number;
fade: boolean;
offset: number;
}

const Container = styled.div`
Expand All @@ -33,7 +34,7 @@ const Container = styled.div`
padding: 1rem;
`;

export const LiveDemo: Story<LiveDemoProps> = ({ toastText, position, timeout, fade, enableContentLeft }) => {
export const LiveDemo: Story<LiveDemoProps> = ({ toastText, position, timeout, fade, enableContentLeft, offset }) => {
const { showToast, hideToast } = useToast();
const contentLeft = enableContentLeft && <IconClose size="xs" color={critical} />;

Expand All @@ -50,6 +51,7 @@ export const LiveDemo: Story<LiveDemoProps> = ({ toastText, position, timeout, f
contentLeft,
onHide: action('onHide'),
onShow: action('onShow'),
offset,
});
}}
>
Expand All @@ -66,6 +68,7 @@ LiveDemo.args = {
position: 'bottom',
timeout: 3000,
fade: false,
offset: 0,
};

LiveDemo.argTypes = {
Expand All @@ -75,6 +78,11 @@ LiveDemo.argTypes = {
options: ['top', 'bottom'],
},
},
offset: {
control: {
type: 'number',
},
},
};

LiveDemo.parameters = {
Expand Down
4 changes: 4 additions & 0 deletions packages/plasma-core/src/components/Toast/Toast.types.ts
View file
Open in desktop
Expand Up @@ -15,6 +15,10 @@ type ToastCommonParameters = {
* callback срабатывающий в момент события showToast
*/
onShow?: () => void;
/**
* Значение для дополнительно отступа блока подсказки, считается в rem.
*/
offset?: number;
};

export type ToastInfo = ToastCommonParameters & {
Expand Down
18 changes: 12 additions & 6 deletions packages/plasma-core/src/components/Toast/ToastController.tsx
View file
Open in desktop
Expand Up @@ -64,15 +64,15 @@ const StyledFade = styled(Fade)<{ isVisible: boolean }>`
`};
`;

const StyledRoot = styled.div<{ position: string; isVisible: boolean }>`
const StyledRoot = styled.div<{ $position: string; isVisible: boolean; $offset?: number }>`
position: fixed;
left: 50%;
z-index: 1000;
transform: translateX(-50%);

${({ position, isVisible }) => css`
${position}: 5rem;
animation: 300ms ${isVisible ? showAnimation(position) : hideAnimation(position)};
${({ $position, isVisible, $offset = 0 }) => css`
${$position}: ${$offset + 5}rem;
animation: 300ms ${isVisible ? showAnimation($position) : hideAnimation($position)};
`};

display: flex;
Expand All @@ -89,7 +89,7 @@ const StyledRoot = styled.div<{ position: string; isVisible: boolean }>`
* Создаёт <div />, который внутри себя содержит тост.
* Цикл: show => timeout => hide.
*/
export const ToastController: React.FC<ToastInfo> = ({ role, text, contentLeft, position, timeout, fade }) => {
export const ToastController: React.FC<ToastInfo> = ({ role, text, contentLeft, position, timeout, fade, offset }) => {
const { hideToast } = useToast();
const [isVisible, setIsVisible] = useState(true);
const hideTimeout = useRef<number | null>(null);
Expand Down Expand Up @@ -131,7 +131,13 @@ export const ToastController: React.FC<ToastInfo> = ({ role, text, contentLeft,
return (
<>
{fade && <StyledFade isVisible={isVisible} placement={position} />}
<StyledRoot key={toastKey} position={position} isVisible={isVisible} onAnimationEnd={animationEndHandler}>
<StyledRoot
key={toastKey}
$position={position}
$offset={offset}
isVisible={isVisible}
onAnimationEnd={animationEndHandler}
>
<Toast role={role} text={text} contentLeft={contentLeft} />
</StyledRoot>
</>
Expand Down
2 changes: 2 additions & 0 deletions packages/plasma-core/src/components/Toast/ToastProvider.tsx
View file
Open in desktop
Expand Up @@ -32,6 +32,7 @@ export const ToastProvider = ({ children }: { children: ReactNode }) => {
role,
onHide,
onShow,
offset,
} = getShowToastCallSignature(args);

setValue({
Expand All @@ -43,6 +44,7 @@ export const ToastProvider = ({ children }: { children: ReactNode }) => {
role,
onHide,
onShow,
offset,
});

if (onShow) {
Expand Down
12 changes: 11 additions & 1 deletion packages/plasma-ui/src/components/Toast/Toast.stories.tsx
View file
Open in desktop
Expand Up @@ -24,15 +24,18 @@ interface LiveDemoProps extends ToastProps {
timeout: number;
fade: boolean;
enableContentLeft: boolean;
offset?: number;
}

const Container = styled.div`
position: relative;
z-index: 10000;
display: flex;
gap: 0.5rem;
padding: 1rem;
`;

export const LiveDemo: Story<LiveDemoProps> = ({ role, text, position, timeout, fade, enableContentLeft }) => {
export const LiveDemo: Story<LiveDemoProps> = ({ role, text, position, timeout, fade, enableContentLeft, offset }) => {
const { showToast, hideToast } = useToast();
const contentLeft = enableContentLeft && <IconClose size="xs" color={critical} />;

Expand All @@ -50,6 +53,7 @@ export const LiveDemo: Story<LiveDemoProps> = ({ role, text, position, timeout,
role,
onHide: action('onHide'),
onShow: action('onShow'),
offset,
});
}}
>
Expand All @@ -66,6 +70,7 @@ LiveDemo.args = {
position: 'bottom',
timeout: 10000,
fade: true,
offset: 0,
};

LiveDemo.argTypes = {
Expand All @@ -81,6 +86,11 @@ LiveDemo.argTypes = {
options: ['top', 'bottom'],
},
},
offset: {
control: {
type: 'number',
},
},
};

LiveDemo.parameters = {
Expand Down
10 changes: 9 additions & 1 deletion packages/plasma-web/src/components/Toast/Toast.stories.tsx
View file
Open in desktop
Expand Up @@ -22,6 +22,7 @@ interface LiveDemoProps extends ToastProps {
position: ToastPosition;
timeout: number;
fade: boolean;
offset?: number;
}

const Container = styled.div`
Expand All @@ -30,7 +31,7 @@ const Container = styled.div`
padding: 1rem;
`;

export const LiveDemo: Story<LiveDemoProps> = ({ toastText, position, timeout, fade }) => {
export const LiveDemo: Story<LiveDemoProps> = ({ toastText, position, timeout, fade, offset }) => {
const { showToast, hideToast } = useToast();

return (
Expand All @@ -45,6 +46,7 @@ export const LiveDemo: Story<LiveDemoProps> = ({ toastText, position, timeout, f
fade,
onHide: action('onHide'),
onShow: action('onShow'),
offset,
});
}}
>
Expand All @@ -60,6 +62,7 @@ LiveDemo.args = {
position: 'bottom',
timeout: 3000,
fade: false,
offset: 0,
};

LiveDemo.argTypes = {
Expand All @@ -69,6 +72,11 @@ LiveDemo.argTypes = {
options: ['top', 'bottom'],
},
},
offset: {
control: {
type: 'number',
},
},
};

LiveDemo.parameters = {
Expand Down
2 changes: 2 additions & 0 deletions website/plasma-ui-docs/docs/components/Toast.mdx
View file
Open in desktop
Expand Up @@ -104,6 +104,8 @@ export interface Options {
onHide?: () => void;
// callback срабатывающий в момент события showToast
onShow?: () => void;
// Значение для дополнительно отступа блока подсказки, считается в rem.
offset?: number;
}
```

Expand Down
2 changes: 2 additions & 0 deletions website/plasma-web-docs/docs/components/Toast.mdx
View file
Open in desktop
Expand Up @@ -104,6 +104,8 @@ export interface Options {
onHide?: () => void;
// callback срабатывающий в момент события showToast
onShow?: () => void;
// Значение для дополнительно отступа блока подсказки, считается в rem.
offset?: number;
}
```

Expand Down