feat: add center (#6951)

- closed #6587
VKCOM · May 28, 2024 · 6518741 · 6518741
1 parent d3f531e
commit 6518741
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 17 deletions.
diff --git a/packages/vkui/src/components/ActionSheet/ActionSheet.stories.tsx b/packages/vkui/src/components/ActionSheet/ActionSheet.stories.tsx
@@ -47,7 +47,7 @@ export const Base: Story = {
     ) : null;
 
     return (
-      <SplitLayout style={{ justifyContent: 'center' }} popout={popout}>
+      <SplitLayout center popout={popout}>
         <SplitCol width="100%" maxWidth="560px" stretchedOnMobile autoSpaced>
           <Placeholder stretched>
             <Button getRootRef={baseToggleRef} onClick={() => setVisible(true)}>

diff --git a/packages/vkui/src/components/Alert/Alert.stories.tsx b/packages/vkui/src/components/Alert/Alert.stories.tsx
@@ -21,7 +21,7 @@ export const Playground: StoryObj<AlertProps> = {
     const popout = visible ? <Alert {...args} onClose={() => setVisible(false)} /> : null;
 
     return (
-      <SplitLayout style={{ justifyContent: 'center' }} popout={popout}>
+      <SplitLayout center popout={popout}>
         <SplitCol width="100%" maxWidth="560px" stretchedOnMobile autoSpaced>
           <Placeholder stretched>
             <Button onClick={() => setVisible(true)}>Открыть</Button>

diff --git a/packages/vkui/src/components/Epic/Epic.stories.tsx b/packages/vkui/src/components/Epic/Epic.stories.tsx
@@ -52,10 +52,7 @@ export const Example: Story = {
     const hasHeader = platform !== 'vkcom';
 
     return (
-      <SplitLayout
-        header={hasHeader && <PanelHeader delimiter="none" />}
-        style={{ justifyContent: 'center' }}
-      >
+      <SplitLayout header={hasHeader && <PanelHeader delimiter="none" />} center>
         {viewWidth.tabletPlus && (
           <SplitCol className={viewWidth.tabletPlus.className} fixed width={280} maxWidth={280}>
             <Panel>

diff --git a/packages/vkui/src/components/Epic/Readme.md b/packages/vkui/src/components/Epic/Readme.md
@@ -28,10 +28,7 @@ const Example = () => {
   const hasHeader = platform !== 'vkcom';
 
   return (
-    <SplitLayout
-      header={hasHeader && <PanelHeader delimiter="none" />}
-      style={{ justifyContent: 'center' }}
-    >
+    <SplitLayout header={hasHeader && <PanelHeader delimiter="none" />} center>
       {viewWidth.tabletPlus && (
         <SplitCol className={viewWidth.tabletPlus.className} fixed width={280} maxWidth={280}>
           <Panel>

diff --git a/packages/vkui/src/components/PanelHeaderContext/Readme.md b/packages/vkui/src/components/PanelHeaderContext/Readme.md
@@ -16,10 +16,7 @@ const Example = () => {
   const hasHeader = platform !== 'vkcom';
 
   return (
-    <SplitLayout
-      style={{ justifyContent: 'center' }}
-      header={hasHeader && <PanelHeader delimiter="none" />}
-    >
+    <SplitLayout center header={hasHeader && <PanelHeader delimiter="none" />}>
       <SplitCol width="100%" maxWidth="560px" stretchedOnMobile autoSpaced>
         <View activePanel="context2">
           <Panel id="context2">

diff --git a/packages/vkui/src/components/SplitCol/SplitCol.stories.tsx b/packages/vkui/src/components/SplitCol/SplitCol.stories.tsx
@@ -32,7 +32,7 @@ export const Playground: Story = {
     const [panel, setPanel] = React.useState(panels[0]);
 
     return (
-      <SplitLayout style={{ justifyContent: 'center' }}>
+      <SplitLayout center>
         <SplitCol {...args}>
           <View activePanel={panel}>
             <Panel id={panels[0]}>

diff --git a/packages/vkui/src/components/SplitLayout/Readme.md b/packages/vkui/src/components/SplitLayout/Readme.md
@@ -38,7 +38,7 @@ const Example = () => {
 
   return (
     <SplitLayout
-      style={{ justifyContent: 'center' }}
+      center
       header={!isVKCOM && <PanelHeader delimiter="none" />}
       popout={popout}
       modal={modalRoot}

diff --git a/packages/vkui/src/components/SplitLayout/SplitLayout.module.css b/packages/vkui/src/components/SplitLayout/SplitLayout.module.css
@@ -25,3 +25,7 @@
     -1 * (var(--vkui_internal--panel_header_height) + var(--vkui_internal--safe_area_inset_top))
   );
 }
+
+.SplitLayout--center {
+  justify-content: center;
+}
diff --git a/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx b/packages/vkui/src/components/SplitLayout/SplitLayout.stories.tsx
@@ -73,7 +73,7 @@ export const Example: Story = {
 
     return (
       <SplitLayout
-        style={{ justifyContent: 'center' }}
+        center
         header={!isVKCOM && <PanelHeader delimiter="none" />}
         popout={popout}
         modal={modalRoot}

diff --git a/packages/vkui/src/components/SplitLayout/SplitLayout.tsx b/packages/vkui/src/components/SplitLayout/SplitLayout.tsx
@@ -17,6 +17,10 @@ export interface SplitLayoutProps
    */
   modal?: React.ReactNode;
   header?: React.ReactNode;
+  /**
+   * Центрирует контент.
+   */
+  center?: boolean;
 }
 
 /**
@@ -30,6 +34,7 @@ export const SplitLayout = ({
   getRootRef,
   getRef,
   className,
+  center,
   ...restProps
 }: SplitLayoutProps) => {
   const platform = usePlatform();
@@ -39,6 +44,7 @@ export const SplitLayout = ({
       className={classNames(
         styles['SplitLayout'],
         platform === 'ios' && styles['SplitLayout--ios'],
+        center && styles['SplitLayout--center'],
       )}
       popout={popout}
       modal={modal}