Skip to content

Commit

Permalink
feat(snackbar): improvement
Browse files Browse the repository at this point in the history
  • Loading branch information
akcent1132 committed Mar 14, 2024
1 parent e5bee1a commit b784c9e
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 10 deletions.
16 changes: 9 additions & 7 deletions packages/vkui/src/components/Snackbar/Snackbar.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,15 @@
padding-block-end: var(--vkui_internal--safe_area_inset_bottom);
}

.Snackbar--sizeY-regular .Snackbar__action {
margin-block-end: calc(
-1 * (
var(--vkui--size_button_small_height--regular) -
var(--vkui--font_subhead--line_height--regular)
) / 2
);
@media (--sizeY-regular) {
.Snackbar--sizeY-none.Snackbar--layout-vertical .Snackbar__action {
margin-block-end: calc(
-1 * (
var(--vkui--size_button_small_height--regular) -
var(--vkui--font_subhead--line_height--regular)
) / 2
);
}
}

/* iOS */
Expand Down
8 changes: 6 additions & 2 deletions packages/vkui/src/components/Snackbar/Snackbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@ import { RootComponent } from '../RootComponent/RootComponent';
import { Touch, TouchEvent } from '../Touch/Touch';
import { Basic, BasicProps } from './subcomponents/Basic/Basic';
import styles from './Snackbar.module.css';

const sizeYClassNames = {
none: styles['Snackbar--sizeY-none'],
regular: styles['Snackbar--sizeY-regular'],
};
export interface SnackbarProps extends HTMLAttributesWithRootRef<HTMLElement>, BasicProps {
/**
* Название кнопки действия в уведомлении
Expand Down Expand Up @@ -179,7 +182,7 @@ export const Snackbar = ({
closing && styles['Snackbar--closing'],
touched && styles['Snackbar--touched'],
isDesktop && styles['Snackbar--desktop'],
sizeY === 'regular' && styles['Snackbar--sizeY-regular'],
sizeY !== 'compact' && sizeYClassNames[sizeY],
)}
style={offsetY ? { ...style, bottom: offsetY } : style}
>
Expand All @@ -193,6 +196,7 @@ export const Snackbar = ({
<Basic
className={styles['Snackbar__snackbar']}
getRootRef={bodyElRef}
sizeY={sizeY}
layout={layout}
mode={mode}
before={before}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
overflow: hidden;
}

.Snackbar__action {
.Snackbar--layout-vertical .Snackbar__action {
margin-block-end: calc(
-1 * (
var(--vkui--size_button_small_height--compact) -
Expand All @@ -37,6 +37,26 @@
);
}

.Snackbar--sizeY-regular .Snackbar__action {
margin-block-end: calc(
-1 * (
var(--vkui--size_button_small_height--regular) -
var(--vkui--font_subhead--line_height--regular)
) / 2
);
}

@media (--sizeY-regular) {
.Snackbar--sizeY-none.Snackbar--layout-vertical .Snackbar__action {
margin-block-end: calc(
-1 * (
var(--vkui--size_button_small_height--regular) -
var(--vkui--font_subhead--line_height--regular)
) / 2
);
}
}

.Snackbar--layout-vertical .Snackbar__content {
flex-direction: column;
align-items: flex-start;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import { classNames } from '@vkontakte/vkjs';
import { SizeTypeValues } from '../../../../lib/adaptivity/constants';
import { HTMLAttributesWithRootRef } from '../../../../types';
import { RootComponent } from '../../../RootComponent/RootComponent';
import { Paragraph } from '../../../Typography/Paragraph/Paragraph';
Expand All @@ -11,6 +12,11 @@ const stylesLayout = {
horizontal: styles['Snackbar--layout-horizontal'],
};

const sizeYClassNames = {
none: styles['Snackbar--sizeY-none'],
regular: styles['Snackbar--sizeY-regular'],
};

export interface BasicProps {
/**
* Элемент действия.
Expand Down Expand Up @@ -47,6 +53,11 @@ export interface BasicProps {
* Не может использоваться одновременно с `action`
*/
subtitle?: React.ReactNode;

/**
* Параметр адаптивности для динамического расчета отступов
*/
sizeY?: SizeTypeValues | 'none';
}

export interface SnackbarBasicProps extends HTMLAttributesWithRootRef<HTMLDivElement>, BasicProps {}
Expand All @@ -59,6 +70,7 @@ export function Basic({
mode,
subtitle,
children,
sizeY,
...restProps
}: SnackbarBasicProps) {
const layout = after || subtitle ? 'vertical' : layoutProps;
Expand All @@ -69,6 +81,7 @@ export function Basic({
styles['Snackbar__body'],
stylesLayout[layout],
mode === 'dark' && styles['Snackbar--mode-dark'],
sizeY && sizeY !== 'compact' && sizeYClassNames[sizeY],
)}
{...restProps}
>
Expand Down

0 comments on commit b784c9e

Please sign in to comment.