feat(Panel): Add mode (#6678)

Добавляем новое свойство `mode` для `Panel`, по аналогии с [Group](https://github.com/VKCOM/VKUI/blob/f7f6dea253a241610b1036bb4f9fb9655d8b0e10/packages/vkui/src/components/Group/Group.tsx#L69-L75).
Подразумевается использование вместе с Group, чтобы точечно задавать стиль card для Group с верным фоном, а не только для всего макета, как можно делать сейчас со свойством [layout](https://github.com/VKCOM/VKUI/blob/f7f6dea253a241610b1036bb4f9fb9655d8b0e10/packages/vkui/src/components/AppRoot/AppRoot.tsx#L49-L53) из `AppRoot`.


Изменения
- убрали прозрачность фона у Panel в режиме адаптивности `regular`. Не очень понятна причина по которой это раньше было добавлено. Судя по 71e1293, это связано со многоколоночным режимом, но что именно пытались решить не понятно, точнее не понятно актуально ли это сейчас или нет. 
  Пока же, судя по коду, с прозрачностью фон становится идентичным тому, который задаёт `AppRoot` по стилям из common.css.
https://github.com/VKCOM/VKUI/blob/f7f6dea253a241610b1036bb4f9fb9655d8b0e10/packages/vkui/src/styles/common.css#L28-L36
То есть замена прозрачности на явные токены, которые идентичны AppRoot, визуально для приложений ничего не меняет, но у прощает css.

packages/vkui/src/components/Panel/Panel.e2e-playground.tsx

@@ -48,3 +48,29 @@ export const PanelPlayground = (props: ComponentPlaygroundProps) => {
     </ComponentPlayground>
   );
 };
+
+export const PanelModePlayground = (props: ComponentPlaygroundProps) => {
+  return (
+    <ComponentPlayground
+      {...props}
+      propSets={[
+        {
+          $adaptivity: 'x',
+          mode: ['plain', 'card', undefined],
+        },
+      ]}
+    >
+      {(props: PanelProps) => (
+        <Panel {...props}>
+          <div style={{ padding: '8px' }}>
+            <Group mode={props.mode}>
+              <div style={{ minHeight: '100px', minWidth: '100px' }}>
+                Text within Group with mode {props.mode}
+              </div>
+            </Group>
+          </div>
+        </Panel>
+      )}
+    </ComponentPlayground>
+  );
+};

packages/vkui/src/components/Panel/Panel.e2e.tsx

@@ -1,14 +1,27 @@
 import * as React from 'react';
 import { test } from '@vkui-e2e/test';
-import { PanelPlayground } from './Panel.e2e-playground';
+import { PanelModePlayground, PanelPlayground } from './Panel.e2e-playground';
 
-test.use({
-  adaptivityProviderProps: {
-    sizeX: 'regular',
-  },
+test.describe('Panel', () => {
+  test.use({
+    adaptivityProviderProps: {
+      sizeX: 'regular',
+    },
+  });
+  test('default', async ({ mount, expectScreenshotClippedToContent, componentPlaygroundProps }) => {
+    await mount(<PanelPlayground {...componentPlaygroundProps} />);
+    await expectScreenshotClippedToContent();
+  });
 });
 
-test('Panel', async ({ mount, expectScreenshotClippedToContent, componentPlaygroundProps }) => {
-  await mount(<PanelPlayground {...componentPlaygroundProps} />);
-  await expectScreenshotClippedToContent();
+test.describe('Panel', () => {
+  test.use({
+    onlyForBrowsers: ['webkit'],
+    onlyForPlatforms: ['ios'],
+  });
+
+  test('mode', async ({ mount, expectScreenshotClippedToContent, componentPlaygroundProps }) => {
+    await mount(<PanelModePlayground {...componentPlaygroundProps} />);
+    await expectScreenshotClippedToContent();
+  });
 });

packages/vkui/src/components/Panel/Panel.module.css

@@ -97,24 +97,21 @@
   margin-block-start: -1px;
 }
 
-.Panel .Panel__in,
-.Panel::before {
+.Panel--mode-none .Panel__in,
+.Panel--mode-none::before,
+.Panel--mode-plain .Panel__in,
+.Panel--mode-plain::before {
   background-color: var(--vkui--color_background_content);
 }
 
-.Panel--layout-card .Panel__in,
-.Panel--layout-card::before {
+.Panel--mode-card .Panel__in,
+.Panel--mode-card::before {
   background-color: var(--vkui--color_background);
 }
 
-.Panel--sizeX-regular .Panel__in,
-.Panel--sizeX-regular::before {
-  background-color: transparent;
-}
-
 @media (--sizeX-regular) {
-  .Panel--sizeX-none .Panel__in,
-  .Panel--sizeX-none::before {
-    background-color: transparent;
+  .Panel--mode-none .Panel__in,
+  .Panel--mode-none::before {
+    background-color: var(--vkui--color_background);
   }
 }

packages/vkui/src/components/Panel/Panel.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { SizeTypeValues } from '../../lib/adaptivity';
 import { NavIdProps } from '../../lib/getNavId';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { AppRootContext } from '../AppRoot/AppRootContext';
@@ -16,16 +17,41 @@ const sizeXClassNames = {
   ['regular']: styles['Panel--sizeX-regular'],
 };
 
+const stylesMode = {
+  none: styles['Panel--mode-none'],
+  plain: styles['Panel--mode-plain'],
+  card: styles['Panel--mode-card'],
+};
+
 export interface PanelProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {
   centered?: boolean;
+  /**
+   * Тип оформления панели.
+   *
+   * Позволяет переопределить тип оформления панели,
+   * заданный через адаптивность или свойство layout у [AppRoot](https://vkcom.github.io/VKUI/#/AppRoot),
+   * глобально задающим тип оформления макета.
+   *
+   * Если установлен `card` - Panel имеет фон отличный от фона контента.
+   * Позволяет компоненту [Group](https://vkcom.github.io/VKUI/#/Group) со свойством mode='card' точечно выглядеть как карточка.
+   * Тип `plain` — соответствует фону по умолчанию.
+   */
+  mode?: 'plain' | 'card';
 }
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Panel
  */
-export const Panel = ({ centered = false, children, nav, ...restProps }: PanelProps) => {
+export const Panel = ({
+  centered = false,
+  children,
+  nav,
+  mode: modeProp,
+  ...restProps
+}: PanelProps) => {
   const { sizeX = 'none' } = useAdaptivity();
-  const { layout } = React.useContext(AppRootContext);
+
+  const mode = usePanelMode(modeProp, sizeX);
 
   return (
     <NavPanelIdContext.Provider value={restProps.id || nav}>
@@ -35,7 +61,7 @@ export const Panel = ({ centered = false, children, nav, ...restProps }: PanelPr
           styles['Panel'],
           sizeXClassNames[sizeX],
           centered && 'vkuiInternalPanel--centered',
-          layout === 'card' && styles['Panel--layout-card'],
+          stylesMode[mode],
         )}
       >
         <Touch
@@ -50,3 +76,24 @@ export const Panel = ({ centered = false, children, nav, ...restProps }: PanelPr
     </NavPanelIdContext.Provider>
   );
 };
+
+function usePanelMode(
+  modeProp: PanelProps['mode'],
+  sizeX: SizeTypeValues | 'none',
+): 'plain' | 'card' | 'none' {
+  const { layout } = React.useContext(AppRootContext);
+
+  if (modeProp) {
+    return modeProp;
+  }
+
+  if (layout) {
+    return layout;
+  }
+
+  if (sizeX !== 'none') {
+    return sizeX === 'regular' ? 'card' : 'plain';
+  }
+
+  return 'none';
+}

packages/vkui/src/components/Panel/Readme.md

@@ -1,6 +1,6 @@
 `Panel` – это контейнер для контента.
 
-```jsx
+```jsx { "props": { "layout": false, "showLayoutSelect": true, "adaptivity": true } }
 const Example = () => {
   const [activePanel, setActivePanel] = React.useState('panel1');
 

packages/vkui/src/styles/common.css

@@ -35,6 +35,14 @@
   }
 }
 
+.vkui--layout-card {
+  background: var(--vkui--color_background);
+}
+
+.vkui--layout-plain {
+  background: var(--vkui--color_background_content);
+}
+
 .vkui--sizeY-compact {
   --vkui_internal--panel_header_height: var(--vkui--size_panel_header_height--compact);
 }
@@ -44,15 +52,6 @@
     --vkui_internal--panel_header_height: var(--vkui--size_panel_header_height--compact);
   }
 }
-
-.vkui--layout-card {
-  background: var(--vkui--color_background);
-}
-
-.vkui--layout-plain {
-  background: var(--vkui--color_background_content);
-}
-
 /* отключаем нативный pull-to-refresh при взаимодействии с компонентом
  * PullToRefresh или при открывании модалки */
 .vkui--disable-overscroll-behavior {