remove paddings in stories.ts

SchwarzIT · Sep 3, 2024 · 00f336b · 00f336b
1 parent 680ad65
commit 00f336b
Show file tree

Hide file tree

Showing 11 changed files with 14 additions and 129 deletions.
diff --git a/apps/demo-app/src/views/HomeView.vue b/apps/demo-app/src/views/HomeView.vue
@@ -280,30 +280,23 @@ const currentPage = ref(1);
         />
         <OnyxHeadline is="h2">Tooltip (auto alignment)</OnyxHeadline>
 
-        <div
-          :style="{
-            display: 'flex',
-            justifyContent: 'space-between',
-            width: '101%',
-            marginTop: '2rem',
-          }"
-        >
-          <OnyxTooltip v-if="show('OnyxTooltip')" text="Example tooltip text">
+        <div v-if="show('OnyxTooltip')">
+          <OnyxTooltip text="Example tooltip text">
             <template #default="{ trigger }">
               <OnyxButton label="Left" v-bind="trigger" />
             </template>
           </OnyxTooltip>
-          <OnyxTooltip v-if="show('OnyxTooltip')" text="Example tooltip text">
+          <OnyxTooltip text="Example tooltip text">
             <template #default="{ trigger }">
               <OnyxButton label="Center" v-bind="trigger" />
             </template>
           </OnyxTooltip>
-          <OnyxTooltip v-if="show('OnyxTooltip')" text="Example tooltip text">
+          <OnyxTooltip text="Example tooltip text">
             <template #default="{ trigger }">
               <OnyxButton label="Center" v-bind="trigger" />
             </template>
           </OnyxTooltip>
-          <OnyxTooltip v-if="show('OnyxTooltip')" text="Example tooltip text">
+          <OnyxTooltip text="Example tooltip text">
             <template #default="{ trigger }">
               <OnyxButton label="Right" v-bind="trigger" />
             </template>
@@ -346,4 +339,10 @@ const currentPage = ref(1);
 .state-info {
   color: var(--onyx-color-text-icons-neutral-soft);
 }
+.tooltip-container {
+  display: "flex";
+  justify-content: space-between;
+  width: "101%";
+  margin-top: "2rem";
+}
 </style>
diff --git a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.stories.ts b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.stories.ts
@@ -56,15 +56,6 @@ export const Required = {
     ...Default.args,
     required: true,
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding: 2rem 0 0 2.5rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 } satisfies Story;
 
 /**
@@ -112,13 +103,4 @@ export const CustomError = {
       longMessage: "Further explanation.",
     },
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding: 2rem 0 0 5rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 } satisfies Story;
diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.stories.ts b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.stories.ts
@@ -15,15 +15,6 @@ const meta: Meta<typeof OnyxCheckboxGroup> = {
     argTypes: {
       withCheckAll: { control: { type: "boolean" } },
     },
-    decorators: [
-      (story) => ({
-        components: { story },
-        template: `
-      <div style="padding-left: 1rem;">
-        <story />
-      </div>`,
-      }),
-    ],
   }),
 };
 

diff --git a/packages/sit-onyx/src/components/OnyxFormElement/OnyxFormElement.stories.ts b/packages/sit-onyx/src/components/OnyxFormElement/OnyxFormElement.stories.ts
@@ -19,7 +19,7 @@ const meta: Meta<typeof OnyxFormElement> = {
     decorators: [
       (story) => ({
         components: { story },
-        template: `<div style="max-width: 12rem; padding: 2rem 1rem">
+        template: `<div style="max-width: 12rem">
                     <story />
                    </div>`,
       }),

diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts
@@ -109,12 +109,6 @@ export const Maxlength: Story = {
     minlength: 5,
     withCounter: true,
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="padding: 0 0 4rem 4rem"> <story /> </div>`,
-    }),
-  ],
 };
 
 /**
@@ -162,12 +156,6 @@ export const CustomError: Story = {
     },
     placeholder: "Interact with me to show error",
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="padding-bottom: 2rem"> <story /> </div>`,
-    }),
-  ],
 };
 
 /**
@@ -178,12 +166,6 @@ export const WithLabelTooltip: Story = {
     label: "Label",
     labelTooltip: "More information",
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="padding-top: 2rem"> <story /> </div>`,
-    }),
-  ],
 };
 
 /**

diff --git a/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.stories.ts b/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.stories.ts
@@ -61,13 +61,4 @@ export const Required = {
     name: "radio-required",
     required: true,
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding: 2rem 0 0 2.5rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 } satisfies Story;
diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.stories.ts b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.stories.ts
@@ -100,15 +100,6 @@ export const Required = {
     modelValue: undefined,
     required: true,
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding-left: 2rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 } satisfies Story;
 
 /**
@@ -123,13 +114,4 @@ export const CustomError = {
       longMessage: "Further explanation.",
     },
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding-left: 2rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 } satisfies Story;
diff --git a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.stories.ts b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.stories.ts
@@ -122,12 +122,6 @@ export const WithMessage: Story = {
     message: "Example message",
     messageTooltip: "Additional info message",
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="padding-bottom: 2rem"> <story /> </div>`,
-    }),
-  ],
 };
 
 /**
@@ -138,12 +132,6 @@ export const WithLabelTooltip: Story = {
     ...Default.args,
     labelTooltip: "More information",
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="padding-top: 2rem"> <story /> </div>`,
-    }),
-  ],
 };
 
 /**

diff --git a/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.stories.ts b/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.stories.ts
@@ -44,15 +44,6 @@ export const Required = {
     ...Default.args,
     required: true,
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding: 2rem 0 0 1rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 } satisfies Story;
 
 /**
@@ -111,13 +102,4 @@ export const CustomError = {
       longMessage: "Further explanation.",
     },
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding: 2rem 0 0 4rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 } satisfies Story;
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.stories.ts b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.stories.ts
@@ -125,12 +125,6 @@ export const CustomError: Story = {
     },
     placeholder: "Interact with me to show error",
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="padding-bottom: 2rem"> <story /> </div>`,
-    }),
-  ],
 };
 
 /**
@@ -156,12 +150,6 @@ export const WithLabelTooltip: Story = {
     label: "Label",
     labelTooltip: "More Information",
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="padding-top: 2rem"> <story /> </div>`,
-    }),
-  ],
 };
 
 /**

diff --git a/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue b/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue
@@ -87,12 +87,12 @@ const tooltipClasses = computed(() => {
     "onyx-tooltip--danger": props.color === "danger",
     "onyx-tooltip--top": props.position === "top",
     "onyx-tooltip--bottom": props.position === "bottom",
-    ["onyx-tooltip--" + openDirection]: props.position === "auto",
+    ["onyx-tooltip--" + openDirection.value]: props.position === "auto",
     "onyx-tooltip--fit-parent": props.fitParent,
     "onyx-tooltip--hidden": !isVisible.value,
     "onyx-tooltip--float--left": props.float === "left",
     "onyx-tooltip--float--right": props.float === "right",
-    ["onyx-tooltip--float--" + wedgePosition]: wedgePosition && props.float === "auto",
+    ["onyx-tooltip--float--" + wedgePosition.value]: wedgePosition.value && props.float === "auto",
   };
 });