Menu: Add margin-left in vertical mode for Fluent and Material (DevExpress#29068)

Co-authored-by: Ruslan Farkhutdinov <[email protected]>

Author: r-farkhutdinov

apps/react-storybook/stories/menu/Menu.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Menu, MenuTypes } from 'devextreme-react/menu';
+import type { Meta, StoryObj } from '@storybook/react';
+import { menuItems } from './data';
+
+const meta: Meta<typeof Menu> = {
+    title: 'Components/Menu',
+    component: Menu,
+    parameters: {
+        layout: 'fullscreen',
+    }
+};
+
+type Story = StoryObj<typeof Menu>;
+
+const showSubmenuModes= ['onClick', 'onHover'] as const;
+const submenuDirectionOptions = ['auto', 'leftOrTop', 'rightOrBottom'] as const;
+
+const commonArgs: Story['args'] = {
+    showFirstSubmenuMode: showSubmenuModes[0],
+    submenuDirection: submenuDirectionOptions[0],
+    hideSubmenuOnMouseLeave: false,
+    adaptivityEnabled: false,
+};
+
+const argTypes = {
+    showFirstSubmenuMode: {
+        control: 'select',
+        options: showSubmenuModes,
+    },
+    submenuDirection: {
+        control: 'select',
+        options: submenuDirectionOptions,
+    },
+    hideSubmenuOnMouseLeave: {
+        control: 'boolean',
+    },
+    adaptivityEnabled: {
+        control: 'boolean',
+    },
+};
+
+export default meta;
+
+const createMenuStory = (orientation: MenuTypes.Orientation): Story => ({
+    args: { ...commonArgs, orientation },
+    argTypes,
+    render: (args) => <Menu dataSource={menuItems} {...args} />,
+});
+
+export const Horizontal: Story = createMenuStory('horizontal');
+export const Vertical: Story = createMenuStory('vertical');

apps/react-storybook/stories/menu/data.ts

@@ -0,0 +1,86 @@
+export const menuItems = [{
+    id: '1',
+    text: 'Video Players',
+    items: [{
+        id: '1_1',
+        text: 'HD Video Player',
+        price: 220,
+        icon: 'images/products/1-small.png',
+    }, {
+        id: '1_2',
+        text: 'SuperHD Video Player',
+        icon: 'images/products/2-small.png',
+        price: 270,
+    }],
+}, {
+    id: '2',
+    text: 'Televisions',
+    items: [{
+        id: '2_1',
+        text: 'SuperLCD 42',
+        icon: 'images/products/5-small.png',
+        price: 1200,
+    }, {
+        id: '2_2',
+        text: 'SuperLED 42',
+        icon: 'images/products/5-small.png',
+        price: 1450,
+    }, {
+        id: '2_3',
+        text: 'SuperLED 50',
+        icon: 'images/products/5-small.png',
+        price: 1600,
+    }, {
+        id: '2_4',
+        text: 'SuperLCD 55 (Not available)',
+        icon: 'images/products/5-small.png',
+        price: 1350,
+        disabled: true,
+    }, {
+        id: '2_5',
+        text: 'SuperLCD 70',
+        icon: 'images/products/5-small.png',
+        price: 4000,
+    }],
+}, {
+    id: '3',
+    text: 'Monitors',
+    items: [{
+        id: '3_1',
+        text: '19"',
+        items: [{
+            id: '3_1_1',
+            text: 'DesktopLCD 19',
+            icon: 'images/products/5-small.png',
+            price: 160,
+        }],
+    }, {
+        id: '3_2',
+        text: '21"',
+        items: [{
+            id: '3_2_1',
+            text: 'DesktopLCD 21',
+            icon: 'images/products/5-small.png',
+            price: 170,
+        }, {
+            id: '3_2_2',
+            text: 'DesktopLED 21',
+            icon: 'images/products/5-small.png',
+            price: 175,
+        }],
+    }],
+}, {
+    id: '4',
+    text: 'Projectors',
+    items: [{
+        id: '4_1',
+        text: 'Projector Plus',
+        icon: 'images/products/5-small.png',
+        price: 550,
+    }, {
+        id: '4_2',
+        text: 'Projector PlusHD',
+        icon: 'images/products/5-small.png',
+        price: 750,
+    }],
+}];