refactor(component-library): improve email field

shopware · Jan 16, 2025 · 18700d3 · 18700d3
1 parent 555001d
commit 18700d3
Show file tree

Hide file tree

Showing 8 changed files with 745 additions and 151 deletions.
diff --git a/...s/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue b/...s/component-library/src/components/form/_internal/mt-field-copyable/mt-field-copyable.vue
@@ -1,19 +1,21 @@
 <template>
   <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events -->
-  <mt-icon
-    v-tooltip="{
-      message: tooltipText,
-      width: 220,
-      position: 'top',
-      showDelay: 300,
-      hideDelay: 0,
-    }"
-    class="mt-field-copyable"
-    name="regular-copy"
-    size="18"
-    @click="copyToClipboard"
-    @mouseleave="wasCopied = false"
-  />
+  <button>
+    <mt-icon
+      v-tooltip="{
+        message: tooltipText,
+        width: 220,
+        position: 'top',
+        showDelay: 300,
+        hideDelay: 0,
+      }"
+      class="mt-field-copyable"
+      name="regular-copy"
+      size="18"
+      @click="copyToClipboard"
+      @mouseleave="wasCopied = false"
+    />
+  </button>
 </template>
 
 <script lang="ts">

diff --git a/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue b/packages/component-library/src/components/form/_internal/mt-field-error/mt-field-error.vue
@@ -2,7 +2,7 @@
   <mt-text
     v-if="!!error"
     as="span"
-    size="2xs"
+    size="xs"
     color="color-text-critical-default"
     class="mt-field__error"
   >

diff --git a/packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.vue b/packages/component-library/src/components/form/_internal/mt-field-label/mt-field-label.vue
@@ -66,7 +66,7 @@ const classes = computed(() => [
 <style scoped>
 .mt-field-label {
   display: flex;
-  column-gap: 0.25rem;
+  column-gap: var(--scale-size-4);
   align-items: center;
   color: var(--color-text-primary-default);
   font-family: var(--font-family-body);
@@ -89,7 +89,7 @@ const classes = computed(() => [
 }
 
 .mt-field-label__inheritance-switch {
-  margin-right: 0.25rem;
+  margin-right: var(--scale-size-4);
 
   &:focus-visible {
     outline-offset: 0.25rem;

diff --git a/...omponent-library/src/components/form/mt-email-field/mt-email-field.interactive.stories.ts b/...omponent-library/src/components/form/mt-email-field/mt-email-field.interactive.stories.ts
@@ -8,25 +8,6 @@ export default {
   title: "Interaction Tests/Form/mt-email-field",
 } as MtEmailFieldMeta;
 
-export const TestInputValue: MtEmailFieldStory = {
-  name: "Should keep input value",
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    const TEST_EMAIL = "[email protected]";
-
-    await userEvent.type(canvas.getByRole("textbox"), TEST_EMAIL);
-    await userEvent.click(canvas.getByText("hidden"));
-
-    expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe(TEST_EMAIL);
-
-    // Input to be called once for each letter
-
-    expect(args.updateModelValue).toHaveBeenCalledTimes(18);
-
-    expect(args.change).toHaveBeenCalledWith(TEST_EMAIL);
-  },
-};
-
 export const VisualTestPrefix: MtEmailFieldStory = {
   name: "Should display prefix",
   args: {
@@ -63,18 +44,6 @@ export const VisualTestHint: MtEmailFieldStory = {
   },
 };
 
-export const TestLabel: MtEmailFieldStory = {
-  name: "Should display label",
-  args: {
-    label: "label",
-  },
-  play: ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-
-    expect(canvas.getByText(args.label!)).toBeDefined();
-  },
-};
-
 export const VisualTestDisabled: MtEmailFieldStory = {
   name: "Should disable",
   args: {
@@ -114,16 +83,17 @@ export const VisualTestError: MtEmailFieldStory = {
   },
 };
 
-export const VisualTestValidationError: MtEmailFieldStory = {
-  name: "Should validate email",
+export const VisualTestSmall: MtEmailFieldStory = {
+  name: "Should display small",
   args: {
-    modelValue: "admin@",
+    small: true,
   },
-  play: ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+};
 
-    expect(
-      canvas.getByText("Please enter a part following '@'. 'admin@' is incomplete."),
-    ).toBeDefined();
+export const TestShouldCopyValue: MtEmailFieldStory = {
+  name: "Should copy value",
+  args: {
+    modelValue: "Shopware",
+    copyable: true,
   },
 };