docs: add dir and writing mode (#6703)

Добавляем для сторибука возможность переключать направление текста
VKCOM · Mar 18, 2024 · 591794f · 591794f
1 parent 3370c72
commit 591794f
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 3 deletions.
diff --git a/packages/vkui/.storybook/preview.ts b/packages/vkui/.storybook/preview.ts
@@ -73,6 +73,27 @@ const preview: Preview = {
       description: 'Hide "after" prop of PanelHeader for custom floating "after" element',
       defaultValue: false,
     },
+    direction: {
+      name: 'Direction',
+      description: "Attribute indicating the directionality of the element's text",
+      defaultValue: 'ltr',
+      toolbar: {
+        items: [
+          { value: 'ltr', icon: 'menu', title: 'ltr' },
+          { value: 'rtl', icon: 'menualt', title: 'rtl' },
+        ],
+      },
+    },
+    writingMode: {
+      name: 'Writing mode',
+      description:
+        'Sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress',
+      defaultValue: 'horizontal-tb',
+      toolbar: {
+        icon: 'redirect',
+        items: ['horizontal-tb', 'vertical-rl', 'vertical-lr'],
+      },
+    },
   },
   argTypes: {
     getRef: { control: false },

diff --git a/packages/vkui/scripts/postcss.js b/packages/vkui/scripts/postcss.js
@@ -26,6 +26,7 @@ function makePostcssPlugins({
   isProduction = process.env.NODE_ENV === 'production',
   isCssModulesFile = false,
   isESNext = false,
+  isStorybook = process.env.SANDBOX === '.storybook',
 } = {}) {
   const plugins = [
     // Обработка css импортов
@@ -55,7 +56,7 @@ function makePostcssPlugins({
   // Обработка CSS Logical
   //
   // https://caniuse.com/css-logical-props
-  if (!isESNext) {
+  if (!isESNext && !isStorybook) {
     plugins.push(postcssLogical());
   }
 

diff --git a/packages/vkui/src/components/AppRoot/AppRoot.module.css b/packages/vkui/src/components/AppRoot/AppRoot.module.css
@@ -1,5 +1,6 @@
 .AppRoot {
   block-size: 100%;
+  inline-size: 100%;
 }
 
 .AppRoot--pointer-has-not {

diff --git a/packages/vkui/src/storybook/VKUIDecorators.tsx b/packages/vkui/src/storybook/VKUIDecorators.tsx
@@ -23,7 +23,14 @@ const CenteredStyle: React.CSSProperties = {
 const channel = addons.getChannel();
 
 export const withVKUIWrapper: Decorator = (Component, context) => {
-  const { platform, appearance, hasPointer = false, hasCustomPanelHeaderAfter } = context.globals;
+  const {
+    platform,
+    appearance,
+    hasPointer = false,
+    hasCustomPanelHeaderAfter,
+    direction,
+    writingMode,
+  } = context.globals;
 
   // eslint-disable-next-line no-restricted-properties, react-hooks/rules-of-hooks
   React.useLayoutEffect(() => {
@@ -38,14 +45,19 @@ export const withVKUIWrapper: Decorator = (Component, context) => {
 
   const { centered } = context.parameters;
 
+  const style: React.CSSProperties = {
+    writingMode,
+    ...(centered ? CenteredStyle : {}),
+  };
+
   return (
     <ConfigProvider
       platform={platform}
       appearance={appearance}
       hasCustomPanelHeaderAfter={hasCustomPanelHeaderAfter}
     >
       <AdaptivityProvider hasPointer={hasPointer}>
-        <AppRoot style={centered ? CenteredStyle : undefined}>
+        <AppRoot style={style} dir={direction}>
           <Component />
         </AppRoot>
       </AdaptivityProvider>