feat(Snackbar): Let layout prop to take priority (#6731)

Из-за того, что свойство `layout` играет роль только если не выполнено одно из условий (в том числе `isDesktop`), то задать желаемый `layout` для того чтобы `action` был на десктопе горизонтально невозможно. Хотя нам ничего не мешает сохранить условие, но дать приоритет именно значению переданному через свойство `layout`. https://github.com/VKCOM/VKUI/blob/cb0cc188b4d543062312f518102da266c56533f9/packages/vkui/src/components/Snackbar/Snackbar.tsx#L171
VKCOM · Mar 26, 2024 · e201dc7 · e201dc7
1 parent 74951d0
commit e201dc7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/packages/vkui/src/components/Snackbar/Snackbar.test.tsx b/packages/vkui/src/components/Snackbar/Snackbar.test.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
+import { ViewWidth } from '../../lib/adaptivity';
 import { baselineComponent } from '../../testing/utils';
+import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
 import { Snackbar } from './Snackbar';
+import styles from './Snackbar.module.css';
 
 describe('Snackbar', () => {
   baselineComponent((props) => <Snackbar onClose={jest.fn()} {...props} />);
@@ -11,4 +14,27 @@ describe('Snackbar', () => {
 
     expect(screen.getByTestId('snackbar').style.bottom).toBe('200px');
   });
+
+  it('renders in horizontal layout on desktop if layout prop is set', () => {
+    const { container, rerender } = render(
+      <AdaptivityProvider viewWidth={ViewWidth.DESKTOP}>
+        <Snackbar action="Close me" onClose={jest.fn()}>
+          Text message
+        </Snackbar>
+      </AdaptivityProvider>,
+    );
+
+    // renders in vertical layout on desktop by default
+    expect(container.querySelector(`.${styles['Snackbar--layout-vertical']}`)).not.toBeNull();
+    expect(container.querySelector(`.${styles['Snackbar--layout-horizontal']}`)).toBeNull();
+
+    rerender(
+      <Snackbar layout="horizontal" action="Close me" onClose={jest.fn()}>
+        Text message
+      </Snackbar>,
+    );
+    // renders in horizontal layout on desktop according to layout prop
+    expect(container.querySelector(`.${styles['Snackbar--layout-vertical']}`)).toBeNull();
+    expect(container.querySelector(`.${styles['Snackbar--layout-horizontal']}`)).not.toBeNull();
+  });
 });
diff --git a/packages/vkui/src/components/Snackbar/Snackbar.tsx b/packages/vkui/src/components/Snackbar/Snackbar.tsx
@@ -45,7 +45,7 @@ export interface SnackbarProps extends HTMLAttributesWithRootRef<HTMLElement>, B
  */
 export const Snackbar = ({
   children,
-  layout: layoutProps = 'horizontal',
+  layout: layoutProps,
   action,
   before,
   after,
@@ -168,7 +168,7 @@ export const Snackbar = ({
 
   React.useEffect(() => closeTimeout.set(), [closeTimeout]);
 
-  const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;
+  const layout = layoutProps || (after || isDesktop || subtitle ? 'vertical' : 'horizontal');
 
   return (
     <AppRootPortal>

diff --git a/packages/vkui/src/components/Snackbar/subcomponents/Basic/Basic.tsx b/packages/vkui/src/components/Snackbar/subcomponents/Basic/Basic.tsx
@@ -31,7 +31,8 @@ export interface BasicProps {
 
   /**
    * Варианты расположения кнопки действия
-   * Игнорируется на десктопах и при наличии элементов `after` или `subtitle`
+   * По умолчанию на десктопах, или при наличии элементов `after` или `subtitle`
+   * имеет значение `vertical`, в остальных случаях `horizontal`
    */
   layout?: 'vertical' | 'horizontal';
 
@@ -58,7 +59,7 @@ export interface BasicProps {
 export interface SnackbarBasicProps extends HTMLAttributesWithRootRef<HTMLDivElement>, BasicProps {}
 
 export function Basic({
-  layout: layoutProps = 'horizontal',
+  layout: layoutProps,
   action,
   after,
   before,
@@ -68,7 +69,7 @@ export function Basic({
   ...restProps
 }: SnackbarBasicProps) {
   const { sizeY = 'none' } = useAdaptivity();
-  const layout = after || subtitle ? 'vertical' : layoutProps;
+  const layout = layoutProps || (after || subtitle ? 'vertical' : 'horizontal');
 
   return (
     <RootComponent