fix: add space for storybook examples (#1423)

Gives space to the customError storybook examples so the tooltip won't be cut off.
SchwarzIT · Jun 26, 2024 · aa624a5 · aa624a5
1 parent 688ac31
commit aa624a5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/apps/alpha-test-app/src/components/form-demo/FormDemo.vue b/apps/alpha-test-app/src/components/form-demo/FormDemo.vue
@@ -32,18 +32,9 @@ export type FormData = Partial<{
 const formState = defineModel<FormData>();
 
 const selectOptions = [
-  {
-    value: "apple",
-    label: "Apple",
-  },
-  {
-    value: "banana",
-    label: "Banana",
-  },
-  {
-    value: "strawberry",
-    label: "Strawberry",
-  },
+  { value: "apple", label: "Apple" },
+  { value: "banana", label: "Banana" },
+  { value: "strawberry", label: "Strawberry" },
 ];
 
 const customErrorExample = ref("");

diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts
@@ -153,7 +153,7 @@ export const HiddenLabel = {
  * This example shows an input with a custom error message.
  * Will only be shown after user interaction.
  */
-export const CustomError = {
+export const CustomError: Story = {
   args: {
     ...Default.args,
     customError: {
@@ -162,7 +162,13 @@ export const CustomError = {
     },
     placeholder: "Interact with me to show error",
   },
-} satisfies Story;
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `<div style="padding-bottom: 2rem"> <story /> </div>`,
+    }),
+  ],
+};
 
 /**
  * This example shows an input with info label tooltip.

diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.stories.ts b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.stories.ts
@@ -116,7 +116,7 @@ export const HiddenLabel = {
  * This example shows a textarea with a custom error message.
  * Will only be shown after user interaction.
  */
-export const CustomError = {
+export const CustomError: Story = {
   args: {
     ...Default.args,
     customError: {
@@ -125,7 +125,13 @@ export const CustomError = {
     },
     placeholder: "Interact with me to show error",
   },
-} satisfies Story;
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `<div style="padding-bottom: 2rem"> <story /> </div>`,
+    }),
+  ],
+};
 
 /**
  * This example shows a textarea with custom autosize settings (min=2 rows, max=12 rows).