From bb5c3262c0cee215db4f1e81896d856617912c43 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Thu, 19 Sep 2024 16:59:43 +0200
Subject: [PATCH 1/3] move mt-link to composition api

---
 .../mt-link/mt-link.interactive.stories.ts    |  9 +-
 .../navigation/mt-link/mt-link.stories.ts     |  4 +-
 .../components/navigation/mt-link/mt-link.vue | 98 +++++--------------
 3 files changed, 31 insertions(+), 80 deletions(-)

diff --git a/packages/component-library/src/components/navigation/mt-link/mt-link.interactive.stories.ts b/packages/component-library/src/components/navigation/mt-link/mt-link.interactive.stories.ts
index 374602f5d..d1d9dbf38 100644
--- a/packages/component-library/src/components/navigation/mt-link/mt-link.interactive.stories.ts
+++ b/packages/component-library/src/components/navigation/mt-link/mt-link.interactive.stories.ts
@@ -1,5 +1,4 @@
-import { within } from "@storybook/test";
-import { expect } from "@storybook/test";
+import { expect, userEvent, within } from "@storybook/test";
 
 import meta, { type MtLinkMeta, type MtLinkStory } from "./mt-link.stories";
 
@@ -27,11 +26,11 @@ export const VisualTestRenderExternalLinkDisabled: MtLinkStory = {
   args: {
     disabled: true,
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
 
-    const link = canvas.getByText("Link");
+    await userEvent.click(canvas.getByRole("link"));
 
-    expect(getComputedStyle(link).pointerEvents).toEqual("none");
+    expect(args.click).not.toHaveBeenCalled();
   },
 };
diff --git a/packages/component-library/src/components/navigation/mt-link/mt-link.stories.ts b/packages/component-library/src/components/navigation/mt-link/mt-link.stories.ts
index 548cf4d38..0352588ac 100644
--- a/packages/component-library/src/components/navigation/mt-link/mt-link.stories.ts
+++ b/packages/component-library/src/components/navigation/mt-link/mt-link.stories.ts
@@ -4,13 +4,13 @@ import { fn } from "@storybook/test";
 import MtLink from "./mt-link.vue";
 import type { SlottedMeta } from "@/_internal/story-helper";
 
-export type MtLinkMeta = SlottedMeta<typeof MtLink, "default" | "close">;
+export type MtLinkMeta = SlottedMeta<typeof MtLink, "default" | "close" | "click">;
 
 export default {
   title: "Components/Navigation/mt-link",
   component: MtLink,
   args: {
-    as: "router-link",
+    as: "a",
     default: "Link",
     to: "/",
     variant: "primary",
diff --git a/packages/component-library/src/components/navigation/mt-link/mt-link.vue b/packages/component-library/src/components/navigation/mt-link/mt-link.vue
index 02db535f9..9b2e8bde0 100644
--- a/packages/component-library/src/components/navigation/mt-link/mt-link.vue
+++ b/packages/component-library/src/components/navigation/mt-link/mt-link.vue
@@ -1,88 +1,41 @@
 <template>
   <component
     :is="as"
-    class="mt-link"
-    :class="linkClasses"
+    :class="[
+      'mt-link',
+      `mt-link--${variant}`,
+      {
+        'mt-link--disabled': disabled,
+      },
+    ]"
     :aria-disabled="disabled"
+    role="link"
     :tabindex="disabled ? -1 : 0"
     v-bind="to ? { ...$attrs, to } : $attrs"
-    @click="onClick"
+    @click="disabled ? undefined : $emit('click', $event)"
   >
     <slot />
   </component>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
-import type { PropType } from "vue";
-
-export default defineComponent({
-  name: "MtLink",
-
-  props: {
-    /**
-     * Set the element type of the link
-     */
-    as: {
-      type: String,
-      required: false,
-      default: "router-link",
-    },
-
-    /**
-     * Set the to prop of the router/nuxt-link
-     */
-    to: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-
-    /**
-     * Render the link in various styles
-     */
-    variant: {
-      type: String as PropType<"primary" | "critical">,
-      required: false,
-      default: "primary",
-      validator(value: string) {
-        if (!value.length) {
-          return true;
-        }
-        return ["primary", "critical"].includes(value);
-      },
-    },
-
-    /**
-     * Make the link unclickable
-     */
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  computed: {
-    linkClasses() {
-      return {
-        [`mt-link--${this.variant}`]: !!this.variant,
-        "mt-link--disabled": this.disabled,
-      };
-    },
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    to?: string;
+    as?: string;
+    variant?: "primary" | "critical";
+    disabled?: boolean;
+  }>(),
+  {
+    as: "router-link",
+    variant: "primary",
+    disabled: false,
   },
+);
 
-  methods: {
-    onClick(event: MouseEvent) {
-      if (this.disabled) {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        return;
-      }
-
-      this.$emit("click", event);
-    },
-  },
-});
+defineEmits<{
+  (e: "click", event: MouseEvent): void;
+}>();
 </script>
 
 <style scoped>
@@ -99,7 +52,6 @@ export default defineComponent({
 
 .mt-link:is(:disabled, .mt-link--disabled) {
   cursor: not-allowed;
-  pointer-events: none;
 }
 
 .mt-link--primary {

From 2f0a66600a312d286d7f0d422be3bf04de2f3f0f Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 25 Sep 2024 09:26:38 +0200
Subject: [PATCH 2/3] remove default margin from base field

---
 .changeset/tender-llamas-sleep.md             |  5 +++
 .../_internal/mt-base-field/mt-base-field.vue | 34 +++++++++++--------
 2 files changed, 25 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/tender-llamas-sleep.md

diff --git a/.changeset/tender-llamas-sleep.md b/.changeset/tender-llamas-sleep.md
new file mode 100644
index 000000000..3eaa9d27b
--- /dev/null
+++ b/.changeset/tender-llamas-sleep.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Remove default margin from base field, hidden by future flag
diff --git a/packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue b/packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue
index e3d59e2a7..174c710ca 100644
--- a/packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue
+++ b/packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue
@@ -1,5 +1,17 @@
 <template>
-  <div class="mt-field" :class="classes">
+  <div
+    class="mt-field"
+    :class="[
+      {
+        'has--error': hasError,
+        'is--disabled': disabled,
+        'is--inherited': isInherited,
+        'has--focus': hasFocus,
+        'mt-field--future-remove-default-margin': future.removeDefaultMargin,
+      },
+      mtBlockSize,
+    ]"
+  >
     <div class="mt-field__label">
       <mt-inheritance-switch
         v-if="isInheritanceField"
@@ -59,6 +71,7 @@ import useEmptySlotCheck from "../../../../composables/useEmptySlotCheck";
 import MtValidationMixin from "../../../../mixins/validation.mixin";
 import MtFormFieldMixin from "../../../../mixins/form-field.mixin";
 import { createId } from "../../../../utils/id";
+import { useFutureFlags } from "@/composables/useFutureFlags";
 
 export default defineComponent({
   name: "MtBaseField",
@@ -209,19 +222,6 @@ export default defineComponent({
       };
     },
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    classes(): any[] {
-      return [
-        {
-          "has--error": this.hasError,
-          "is--disabled": this.disabled,
-          "is--inherited": this.isInherited,
-          "has--focus": this.hasFocus,
-        },
-        this.mtBlockSize,
-      ];
-    },
-
     mtBlockSize(): string {
       return `mt-field--${this.size}`;
     },
@@ -233,9 +233,11 @@ export default defineComponent({
 
   setup() {
     const { hasSlotContent } = useEmptySlotCheck();
+    const future = useFutureFlags();
 
     return {
       hasSlotContent,
+      future,
     };
   },
 });
@@ -471,4 +473,8 @@ $mt-field-transition:
     }
   }
 }
+
+.mt-field--future-remove-default-margin {
+  margin-bottom: 0;
+}
 </style>

From dd42b3b9d0ea9f7554d512979606de105f201c03 Mon Sep 17 00:00:00 2001
From: Nils <haberkamp.n@gmail.com>
Date: Wed, 25 Sep 2024 09:49:39 +0200
Subject: [PATCH 3/3] migrate pagination over to plain CSS

---
 .../mt-pagination/mt-pagination.vue           | 142 ++++++++----------
 1 file changed, 61 insertions(+), 81 deletions(-)

diff --git a/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue b/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue
index 59f45370d..f84d906b7 100644
--- a/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue
+++ b/packages/component-library/src/components/table-and-list/mt-pagination/mt-pagination.vue
@@ -19,7 +19,7 @@
       >
         <span class="visually-hidden">{{ $t("mt-pagination.firstPage") }}</span>
 
-        <mt-icon name="regular-double-chevron-left-s" aria-hidden="true" />
+        <mt-icon name="regular-double-chevron-left-s" size="0.5rem" aria-hidden="true" />
       </button>
 
       <button
@@ -30,7 +30,7 @@
       >
         <span class="visually-hidden">{{ $t("mt-pagination.previousPage") }}</span>
 
-        <mt-icon name="regular-chevron-left-s" aria-hidden="true" />
+        <mt-icon name="regular-chevron-left-s" size="0.5rem" aria-hidden="true" />
       </button>
 
       <input
@@ -53,7 +53,7 @@
       >
         <span class="visually-hidden">{{ $t("mt-pagination.nextPage") }}</span>
 
-        <mt-icon name="regular-chevron-right-s" aria-hidden="true" />
+        <mt-icon name="regular-chevron-right-s" size="0.5rem" aria-hidden="true" />
       </button>
 
       <button
@@ -64,7 +64,7 @@
       >
         <span class="visually-hidden">{{ $t("mt-pagination.lastPage") }}</span>
 
-        <mt-icon name="regular-double-chevron-right-s" aria-hidden="true" />
+        <mt-icon name="regular-double-chevron-right-s" size="0.5rem" aria-hidden="true" />
       </button>
     </div>
   </div>
@@ -165,104 +165,84 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style scoped>
 .mt-pagination {
   display: flex;
   align-items: baseline;
   gap: 12px;
 
-  &__controls {
-    display: inline-flex;
-    border-radius: var(--border-radius-xs);
-    border: 1px solid var(--color-border-primary-default);
+  & :last-child {
+    border-top-right-radius: var(--border-radius-xs);
+    border-bottom-right-radius: var(--border-radius-xs);
   }
 
-  &__info-text {
-    color: var(--color-text-tertiary-default);
-    font-size: var(--font-size-xs);
-    line-height: var(--font-line-height-xs);
-    font-family: var(--font-family-body);
+  & :first-child {
+    border-top-left-radius: var(--border-radius-xs);
+    border-bottom-left-radius: var(--border-radius-xs);
   }
+}
 
-  #meteor-icon-kit__regular-double-chevron-left-s {
-    width: 8px !important;
-    height: 7.5px !important;
-  }
+.mt-pagination__controls {
+  display: inline-flex;
+  border-radius: var(--border-radius-xs);
+  border: 1px solid var(--color-border-primary-default);
+}
 
-  #meteor-icon-kit__regular-chevron-left-s {
-    width: 4px !important;
-    height: 7.5px !important;
-  }
+.mt-pagination__info-text {
+  color: var(--color-text-tertiary-default);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-xs);
+  font-family: var(--font-family-body);
+}
 
-  #meteor-icon-kit__regular-chevron-right-s {
-    width: 4px !important;
-    height: 7.5px !important;
+.mt-pagination__button {
+  border-right: 1px solid var(--color-border-primary-default);
+  color: var(--color-icon-primary-default);
+  height: 2rem;
+  width: 2.5rem;
+  display: grid;
+  place-items: center;
+  transition: all 0.15s ease-out;
+
+  &:focus-visible {
+    outline: 1px solid var(--color-border-brand-selected);
+    background-color: var(--color-interaction-secondary-hover);
   }
 
-  #meteor-icon-kit__regular-double-chevron-right-s {
-    width: 8px !important;
-    height: 7.5px !important;
+  &:hover:not(:disabled) {
+    background-color: var(--color-interaction-secondary-hover);
   }
 
-  &__button {
-    border-right: 1px solid var(--color-border-primary-default);
-    color: var(--color-icon-primary-default);
-    height: 2rem;
-    width: 2.5rem;
-    display: grid;
-    place-items: center;
-    transition: all 0.15s ease-out;
-
-    &:focus-visible {
-      outline: 1px solid var(--color-border-brand-selected);
-      background-color: var(--color-interaction-secondary-hover);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--color-interaction-secondary-hover);
-    }
-
-    &:last-of-type {
-      border-right: none;
-    }
-
-    &:disabled {
-      background-color: var(--color-interaction-secondary-disabled);
-      cursor: not-allowed;
-    }
+  &:last-of-type {
+    border-right: none;
   }
 
-  :last-child {
-    border-top-right-radius: var(--border-radius-xs);
-    border-bottom-right-radius: var(--border-radius-xs);
+  &:disabled {
+    background-color: var(--color-interaction-secondary-disabled);
+    cursor: not-allowed;
   }
+}
 
-  :first-child {
-    border-top-left-radius: var(--border-radius-xs);
-    border-bottom-left-radius: var(--border-radius-xs);
+.mt-pagination__current-page-input {
+  all: unset;
+  width: auto;
+  border-right: 1px solid var(--color-border-primary-default);
+  padding: 0 12px;
+  color: var(--color-text-primary-default);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-xs);
+  font-family: var(--font-family-body);
+  font-feature-settings: "tnum";
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
   }
 
-  &__current-page-input {
-    all: unset;
-    width: auto;
-    border-right: 1px solid var(--color-border-primary-default);
-    padding: 0 12px;
-    color: var(--color-text-primary-default);
-    font-size: var(--font-size-xs);
-    line-height: var(--font-line-height-xs);
-    font-family: var(--font-family-body);
-    font-feature-settings: "tnum";
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    /* Firefox */
-    &[type="number"] {
-      -moz-appearance: textfield;
-    }
+  /* Firefox */
+  &[type="number"] {
+    -moz-appearance: textfield;
   }
 }
 </style>