From 716657bed3a0498ac2458ec0b53f9e3bfa46da0d Mon Sep 17 00:00:00 2001
From: Andrey Medvedev <andr.medv.spb@gmail.com>
Date: Wed, 31 Jul 2024 18:39:16 +0300
Subject: [PATCH] Add List playground.

To make sure item content doesn't exceed the list
---
 .../components/List/List.e2e-playground.tsx   | 35 +++++++++++++++++++
 .../vkui/src/components/List/List.e2e.tsx     |  7 ++++
 2 files changed, 42 insertions(+)
 create mode 100644 packages/vkui/src/components/List/List.e2e-playground.tsx
 create mode 100644 packages/vkui/src/components/List/List.e2e.tsx

diff --git a/packages/vkui/src/components/List/List.e2e-playground.tsx b/packages/vkui/src/components/List/List.e2e-playground.tsx
new file mode 100644
index 0000000000..772395638c
--- /dev/null
+++ b/packages/vkui/src/components/List/List.e2e-playground.tsx
@@ -0,0 +1,35 @@
+import { ComponentPlayground, type ComponentPlaygroundProps } from '@vkui-e2e/playground-helpers';
+import { Avatar } from '../Avatar/Avatar';
+import { Cell } from '../Cell/Cell';
+import { List, ListProps } from './List';
+
+export const ListPlayground = (props: ComponentPlaygroundProps) => {
+  return (
+    <ComponentPlayground
+      {...props}
+      propSets={[
+        {
+          gap: [0, 20],
+        },
+      ]}
+    >
+      {(props: ListProps) => (
+        <div style={{ padding: 20 }}>
+          <List {...props}>
+            <Cell before={<Avatar />} draggable mode="removable">
+              Lorem
+            </Cell>
+            <Cell before={<Avatar />} draggable mode="removable">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+              incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+              exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+              dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+              mollit anim id est laborum.
+            </Cell>
+          </List>
+        </div>
+      )}
+    </ComponentPlayground>
+  );
+};
diff --git a/packages/vkui/src/components/List/List.e2e.tsx b/packages/vkui/src/components/List/List.e2e.tsx
new file mode 100644
index 0000000000..163c40cfe8
--- /dev/null
+++ b/packages/vkui/src/components/List/List.e2e.tsx
@@ -0,0 +1,7 @@
+import { test } from '@vkui-e2e/test';
+import { ListPlayground } from './List.e2e-playground';
+
+test('List', async ({ mount, expectScreenshotClippedToContent, componentPlaygroundProps }) => {
+  await mount(<ListPlayground {...componentPlaygroundProps} />);
+  await expectScreenshotClippedToContent();
+});