Apply code formatting and fixable ESLint issues

packages/component-library/.storybook/preview.ts

@@ -55,12 +55,6 @@ const preview: Preview = {
         { name: "dark", value: DARK_THEME_BACKGROUND_VALUE },
       ],
     },
-    options: {
-      storySort: (a, b) => {
-        // Sort the stories by their id alphabetically
-        return a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true });
-      },
-    },
   },
 
   decorators: [

packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.vue

@@ -36,7 +36,7 @@
         v-model="colorValue"
         aria-label="colorpicker-color-value"
         class="mt-colorpicker__input"
-        spellcheck="false"
+        :spellcheck="false"
         :disabled="disabled"
         :readonly="readonly"
         @click="onClickInput"
@@ -101,7 +101,7 @@
                 class="mt-colorpicker__colorpicker-input is--hex"
                 aria-label="hex-value"
                 type="text"
-                spellcheck="false"
+                :spellcheck="false"
               />
               <mt-text
                 v-if="colorLabels"

packages/component-library/src/components/form/mt-text-editor/mt-text-editor.interactive.stories.ts

@@ -663,8 +663,11 @@ export const SetLink: MtTextEditorStory = defineStory({
     // Click on button with aria-label "Link"
     await userEvent.click(canvas.getByLabelText("Link"));
 
+    // Get body
+    const body = within(document.body);
+
     // Set link url
-    const linkInput = canvas.getByLabelText("Link URL");
+    const linkInput = body.getByLabelText("Link URL");
     await userEvent.clear(linkInput);
     await userEvent.type(linkInput, "https://www.shopware.com");
 
@@ -675,7 +678,7 @@ export const SetLink: MtTextEditorStory = defineStory({
     await userEvent.click(targetCheckbox);
 
     // Click on button with text "Apply link"
-    await userEvent.click(canvas.getByText("Apply link"));
+    await userEvent.click(body.getByText("Apply link"));
 
     // Wait until args was triggered with new content
     await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
@@ -698,16 +701,19 @@ export const InsertTable: MtTextEditorStory = defineStory({
     // Click on button with aria-label "Table"
     await userEvent.click(canvas.getByLabelText("Table"));
 
+    // Get body
+    const body = within(document.body);
+
     // Set table columns
-    const columnsInput = canvas.getByLabelText("Columns");
+    const columnsInput = body.getByLabelText("Columns");
     await userEvent.type(columnsInput, "{selectall}{backspace}4");
 
     // Set table rows
-    const rowsInput = canvas.getByLabelText("Rows");
+    const rowsInput = body.getByLabelText("Rows");
     await userEvent.type(rowsInput, "{selectall}{backspace}2");
 
     // Click on button with text "Insert table"
-    await userEvent.click(canvas.getByText("Insert table"));
+    await userEvent.click(body.getByText("Insert table"));
 
     // Wait until args was triggered with new content
     await waitUntil(() => args.updateModelValue?.mock?.calls?.length > 0);
@@ -730,16 +736,23 @@ export const VisualTestShowContextualButtons: MtTextEditorStory = defineStory({
     // Click on button with aria-label "Table"
     await userEvent.click(canvas.getByLabelText("Table"));
 
+    // Get body
+    const body = within(document.body);
+
+    // Wait until modal transition is finished
+    await waitUntil(() => document.body.querySelector("div[role='dialog']"));
+    await waitUntil(() => !document.body.querySelector(".modal-enter-active"));
+
     // Set table columns
-    const columnsInput = canvas.getByLabelText("Columns");
+    const columnsInput = body.getByLabelText("Columns");
     await userEvent.type(columnsInput, "{selectall}{backspace}4");
 
     // Set table rows
-    const rowsInput = canvas.getByLabelText("Rows");
+    const rowsInput = body.getByLabelText("Rows");
     await userEvent.type(rowsInput, "{selectall}{backspace}2");
 
     // Click on button with text "Insert table"
-    await userEvent.click(canvas.getByText("Insert table"));
+    await userEvent.click(body.getByText("Insert table"));
 
     // Wait until modal is closed
     await waitUntil(() => !document.body.querySelector("div[role='dialog']"));

packages/component-library/src/components/overlay/mt-modal/mt-modal.spec.ts

@@ -94,36 +94,6 @@ describe("mt-modal", () => {
     expect(onChange).toHaveBeenNthCalledWith(1, true);
   });
 
-  it("opens the modal when clicking the trigger when 'isOpen' gets changed", async () => {
-    // GIVEN
-    const onChange = vi.fn();
-
-    const result = render({
-      components: { MtModal, MtModalRoot, MtModalTrigger },
-      setup() {
-        const isOpen = ref(false);
-        return { onChange, isOpen };
-      },
-      template: `
-      <button @click="isOpen = !isOpen">Toggle modal</button>
-<mt-modal-root @change="onChange" :isOpen="isOpen">
-  <mt-modal title='title'>mt-modal works!</mt-modal>
-</mt-modal-root>`,
-    });
-
-    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
-
-    // WHEN
-    await fireEvent.click(screen.getByRole("button"));
-
-    console.log(result.container.innerHTML);
-
-    // THEN
-    const modal = screen.queryByRole("dialog");
-    expect(modal).toBeInTheDocument();
-    expect(onChange).toHaveBeenNthCalledWith(1, true);
-  });
-
   it("closes the modal", async () => {
     const onChange = vi.fn();
 

packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue

@@ -234,7 +234,7 @@ export default defineComponent({
         return {
           id: column.property,
           label: column.label,
-          parentGroup: (column.visible ?? true) ? "visible" : "hidden",
+          parentGroup: column.visible ?? true ? "visible" : "hidden",
           position: column.position,
           isVisible: column.visible ?? true,
           isHidable: isPrimaryColumn(column) ? false : true,