feat(AppRoot): add layout

Добавляем новое свойство `layout: 'plain' | 'card'` Изменяем вид Group при mode="card" и sizeX="compact" - closed #3018
VKCOM · Aug 18, 2023 · 8055b8f · 8055b8f
1 parent 6399666
commit 8055b8f
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 5 deletions.
diff --git a/packages/vkui/src/components/AppRoot/AppRoot.tsx b/packages/vkui/src/components/AppRoot/AppRoot.tsx
@@ -28,6 +28,25 @@ const vkuiSizeXClassNames = {
   [SizeType.REGULAR]: 'vkui--sizeX-regular',
 };
 
+const vkuiLayoutClassNames = {
+  card: 'vkui--layout-card',
+  plain: 'vkui--layout-plain',
+};
+
+function containerClassNames(layout: AppRootProps['layout'], sizeX: SizeType | 'none'): string[] {
+  const classNames: string[] = [];
+
+  if (layout) {
+    classNames.push(vkuiLayoutClassNames[layout]);
+  }
+
+  if (sizeX !== SizeType.COMPACT) {
+    classNames.push(vkuiSizeXClassNames[sizeX]);
+  }
+
+  return classNames;
+}
+
 const INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;
 
 // Используйте classList, но будьте осторожны
@@ -45,6 +64,7 @@ export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
   portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;
   /** Disable portal for components */
   disablePortal?: boolean;
+  layout?: 'card' | 'plain';
 }
 
 /**
@@ -58,6 +78,7 @@ export const AppRoot = ({
   disablePortal,
   className,
   safeAreaInsets,
+  layout,
   ...props
 }: AppRootProps) => {
   const isKeyboardInputActive = useKeyboardInputTracker();
@@ -160,18 +181,20 @@ export const AppRoot = ({
     if (mode === 'partial') {
       return noop;
     }
-    const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;
+
+    const classNames = containerClassNames(layout, sizeX);
+
     const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;
 
-    if (className === null || !container) {
+    if (!classNames.length || !container) {
       return noop;
     }
 
-    container.classList.add(className);
+    container.classList.add(...classNames);
     return () => {
-      container.classList.remove(className);
+      container.classList.remove(...classNames);
     };
-  }, [sizeX]);
+  }, [sizeX, layout]);
 
   useIsomorphicLayoutEffect(() => {
     if (mode !== 'full' || appearance === undefined) {
@@ -196,6 +219,7 @@ export const AppRoot = ({
         keyboardInput: isKeyboardInputActive,
         mode,
         disablePortal,
+        layout,
       }}
     >
       <ScrollController elRef={rootRef}>

diff --git a/packages/vkui/src/components/AppRoot/AppRootContext.ts b/packages/vkui/src/components/AppRoot/AppRootContext.ts
@@ -7,6 +7,7 @@ export interface AppRootContextInterface {
   mode?: 'partial' | 'embedded' | 'full';
   keyboardInput?: boolean;
   disablePortal?: boolean;
+  layout?: 'card' | 'plain';
 }
 
 export const AppRootContext = React.createContext<AppRootContextInterface>({

diff --git a/packages/vkui/src/styles/common.css b/packages/vkui/src/styles/common.css
@@ -34,3 +34,11 @@
     background: var(--vkui--color_background);
   }
 }
+
+.vkui--layout-card {
+  background: var(--vkui--color_background);
+}
+
+.vkui--layout-plain {
+  background: var(--vkui--color_background_content);
+}