remove mt popover deprecated (#281)

* replace mt-popover-deprecated in mt-colorpicker * update snapshots --------- Co-authored-by: alastair-simon <[email protected]>
shopware · Sep 11, 2024 · 5a5e797 · 5a5e797
1 parent 016b511
commit 5a5e797
Show file tree

Hide file tree

Showing 14 changed files with 22 additions and 16 deletions.
diff --git a/.changeset/flat-toys-grin.md b/.changeset/flat-toys-grin.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Replace mt-popover-deprecated in mt-colorpicker
diff --git a/...action-tests-form-mt-colorpicker--visual-test-change-colorpicker-color-snap.png b/...action-tests-form-mt-colorpicker--visual-test-change-colorpicker-color-snap.png
diff --git a/...s-form-mt-colorpicker--visual-test-change-colorpicker-output-hex-alpha-snap.png b/...s-form-mt-colorpicker--visual-test-change-colorpicker-output-hex-alpha-snap.png
diff --git a/...n-tests-form-mt-colorpicker--visual-test-change-colorpicker-output-hex-snap.png b/...n-tests-form-mt-colorpicker--visual-test-change-colorpicker-output-hex-snap.png
diff --git a/...s-form-mt-colorpicker--visual-test-change-colorpicker-output-hsl-alpha-snap.png b/...s-form-mt-colorpicker--visual-test-change-colorpicker-output-hsl-alpha-snap.png
diff --git a/...n-tests-form-mt-colorpicker--visual-test-change-colorpicker-output-hsl-snap.png b/...n-tests-form-mt-colorpicker--visual-test-change-colorpicker-output-hsl-snap.png
diff --git a/...s-form-mt-colorpicker--visual-test-change-colorpicker-output-rgb-alpha-snap.png b/...s-form-mt-colorpicker--visual-test-change-colorpicker-output-rgb-alpha-snap.png
diff --git a/...n-tests-form-mt-colorpicker--visual-test-change-colorpicker-output-rgb-snap.png b/...n-tests-form-mt-colorpicker--visual-test-change-colorpicker-output-rgb-snap.png
diff --git a/...sts-form-mt-colorpicker--visual-test-colorpicker-disabled-color-labels-snap.png b/...sts-form-mt-colorpicker--visual-test-colorpicker-disabled-color-labels-snap.png
diff --git a/...nteraction-tests-form-mt-colorpicker--visual-test-colorpicker-readonly-snap.png b/...nteraction-tests-form-mt-colorpicker--visual-test-colorpicker-readonly-snap.png
diff --git a/...ction-tests-form-mt-colorpicker--visual-test-colorpicker-without-alpha-snap.png b/...ction-tests-form-mt-colorpicker--visual-test-colorpicker-without-alpha-snap.png
diff --git a/...__/interaction-tests-form-mt-colorpicker--visual-test-open-colorpicker-snap.png b/...__/interaction-tests-form-mt-colorpicker--visual-test-open-colorpicker-snap.png
diff --git a/...omponent-library/src/components/form/mt-colorpicker/mt-colorpicker.interactive.stories.ts b/...omponent-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;

diff --git a/packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.vue b/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: {