Merge branch 'main' into next-38027/fix-datepicker-not-emit-value-ent…

…ered-manual

.changeset/flat-toys-grin.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Replace mt-popover-deprecated in mt-colorpicker

.vscode/tasks.json

@@ -0,0 +1,13 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Run storybook",
+      "type": "shell",
+      "command": "pnpm --filter @shopware-ag/meteor-component-library run storybook",
+      "group": "build"
+    }
+  ]
+}

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

@@ -27,7 +27,7 @@ export const VisualTestOpenColorpicker: MtColorpickerStory = {
     // todo: figure out what element this is
     // Look inside the popover
     const popover = within(
-      document.getElementsByClassName("mt-popover-deprecated__wrapper")[0] as HTMLElement,
+      document.getElementsByClassName("mt-floating-ui__content")[0] as HTMLElement,
     );
 
     const colorRange = popover.getByLabelText("colorpicker-color-range") as HTMLInputElement;
@@ -70,7 +70,7 @@ export const VisualTestChangeColorpickerColor: MtColorpickerStory = {
 
     // Look inside the popover
     const popover = within(
-      document.getElementsByClassName("mt-popover-deprecated__wrapper")[0] as HTMLElement,
+      document.getElementsByClassName("mt-floating-ui__content")[0] as HTMLElement,
     );
 
     const colorRange = popover.getByLabelText("colorpicker-color-range") as HTMLInputElement;
@@ -143,7 +143,7 @@ export const VisualTestChangeColorpickerOutputHex: MtColorpickerStory = {
 
     // Look inside the popover
     const popover = within(
-      document.getElementsByClassName("mt-popover-deprecated__wrapper")[0] as HTMLElement,
+      document.getElementsByClassName("mt-floating-ui__content")[0] as HTMLElement,
     );
 
     const hexInput = popover.getByLabelText("hex-value") as HTMLInputElement;
@@ -171,7 +171,7 @@ export const VisualTestChangeColorpickerOutputHsl: MtColorpickerStory = {
 
     // Look inside the popover
     const popover = within(
-      document.getElementsByClassName("mt-popover-deprecated__wrapper")[0] as HTMLElement,
+      document.getElementsByClassName("mt-floating-ui__content")[0] as HTMLElement,
     );
 
     const hexInput = popover.getByLabelText("hex-value") as HTMLInputElement;
@@ -199,7 +199,7 @@ export const VisualTestChangeColorpickerOutputRgb: MtColorpickerStory = {
 
     // Look inside the popover
     const popover = within(
-      document.getElementsByClassName("mt-popover-deprecated__wrapper")[0] as HTMLElement,
+      document.getElementsByClassName("mt-floating-ui__content")[0] as HTMLElement,
     );
 
     const hexInput = popover.getByLabelText("hex-value") as HTMLInputElement;
@@ -228,7 +228,7 @@ export const VisualTestChangeColorpickerOutputHexAlpha: MtColorpickerStory = {
 
     // Look inside the popover
     const popover = within(
-      document.getElementsByClassName("mt-popover-deprecated__wrapper")[0] as HTMLElement,
+      document.getElementsByClassName("mt-floating-ui__content")[0] as HTMLElement,
     );
 
     const hexInput = popover.getByLabelText("hex-value") as HTMLInputElement;
@@ -257,7 +257,7 @@ export const VisualTestChangeColorpickerOutputHslAlpha: MtColorpickerStory = {
 
     // Look inside the popover
     const popover = within(
-      document.getElementsByClassName("mt-popover-deprecated__wrapper")[0] as HTMLElement,
+      document.getElementsByClassName("mt-floating-ui__content")[0] as HTMLElement,
     );
 
     const hexInput = popover.getByLabelText("hex-value") as HTMLInputElement;
@@ -286,7 +286,7 @@ export const VisualTestChangeColorpickerOutputRgbAlpha: MtColorpickerStory = {
 
     // Look inside the popover
     const popover = within(
-      document.getElementsByClassName("mt-popover-deprecated__wrapper")[0] as HTMLElement,
+      document.getElementsByClassName("mt-floating-ui__content")[0] as HTMLElement,
     );
 
     const hexInput = popover.getByLabelText("hex-value") as HTMLInputElement;
@@ -314,7 +314,7 @@ export const VisualTestColorpickerWithoutAlpha: MtColorpickerStory = {
 
     // Look inside the popover
     const popover = within(
-      document.getElementsByClassName("mt-popover-deprecated__wrapper")[0] as HTMLElement,
+      document.getElementsByClassName("mt-floating-ui__content")[0] as HTMLElement,
     );
 
     const hexInput = popover.getByLabelText("hex-value") as HTMLInputElement;
@@ -340,7 +340,7 @@ export const VisualTestColorpickerDisabled: MtColorpickerStory = {
     await userEvent.click(pickerToggle);
 
     // Expect no popover
-    expect(document.getElementsByClassName("mt-popover-deprecated__wrapper").length).toEqual(0);
+    expect(document.getElementsByClassName("mt-floating-ui__content").length).toEqual(0);
   },
 };
 
@@ -391,7 +391,7 @@ export const VisualTestColorpickerDisabledColorLabels: MtColorpickerStory = {
 
     // Look inside the popover
     const popover = within(
-      document.getElementsByClassName("mt-popover-deprecated__wrapper")[0] as HTMLElement,
+      document.getElementsByClassName("mt-floating-ui__content")[0] as HTMLElement,
     );
 
     const hexInput = popover.getByLabelText("hex-value") as HTMLInputElement;

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

@@ -42,10 +42,11 @@
         @click="onClickInput"
       />
 
-      <mt-popover-deprecated
-        v-if="visible"
+      <mt-floating-ui
+        :isOpened="visible"
         class="mt-colorpicker__colorpicker-position"
         :z-index="zIndex"
+        :offset="-12"
       >
         <div class="mt-colorpicker__colorpicker">
           <div
@@ -197,7 +198,7 @@
             </div>
           </div>
         </div>
-      </mt-popover-deprecated>
+      </mt-floating-ui>
     </template>
 
     <template #error>
@@ -212,16 +213,16 @@ import type { PropType } from "vue";
 import { defineComponent } from "vue";
 import { debounce } from "lodash-es";
 import MtBaseField from "../_internal/mt-base-field/mt-base-field.vue";
-import MtPopoverDeprecated from "../../_internal/mt-popover-deprecated/mt-popover-deprecated.vue";
+import MtFloatingUi from "../../_internal/mt-floating-ui/mt-floating-ui.vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
 
 export default defineComponent({
   name: "MtColorpicker",
 
   components: {
-    "mt-popover-deprecated": MtPopoverDeprecated,
     "mt-base-field": MtBaseField,
     "mt-text": MtText,
+    "mt-floating-ui": MtFloatingUi,
   },
 
   props: {