Improve email field

packages/component-library/src/components/form/_internal/mt-field-affix/mt-field-affix.vue

@@ -0,0 +1,38 @@
+<template>
+  <div :class="['mt-field-affix', `mt-field-affix--${type}`]">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  type: "prefix" | "suffix";
+}>();
+</script>
+
+<style scoped>
+.mt-field-affix {
+  display: grid;
+  place-items: center;
+  padding-inline: var(--scale-size-12);
+  color: var(--color-text-primary-default);
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-2xs);
+  line-height: var(--line-height-2xs);
+  font-weight: var(--font-weight-medium);
+  background: var(--color-interaction-secondary-dark);
+  height: 100%;
+}
+
+.mt-field-affix--suffix {
+  border-inline-start: 1px solid var(--color-border-primary-default);
+  border-top-right-radius: var(--border-radius-xs);
+  border-bottom-right-radius: var(--border-radius-xs);
+}
+
+.mt-field-affix--prefix {
+  border-inline-end: 1px solid var(--color-border-primary-default);
+  border-top-left-radius: var(--border-radius-xs);
+  border-bottom-left-radius: var(--border-radius-xs);
+}
+</style>

packages/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">

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"
   >

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

@@ -1,4 +1,4 @@
-import { within, userEvent } from "@storybook/test";
+import { within, userEvent, fn } from "@storybook/test";
 import { expect } from "@storybook/test";
 
 import meta, { type MtEmailFieldMeta, type MtEmailFieldStory } from "./mt-email-field.stories";
@@ -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,42 @@ 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 }) => {
+};
+
+export const TestShouldCopyValue: MtEmailFieldStory = {
+  name: "Should copy value",
+  args: {
+    modelValue: "[email protected]",
+    copyable: true,
+  },
+  async play({ canvasElement }) {
+    window.navigator.clipboard.writeText = fn();
     const canvas = within(canvasElement);
 
-    expect(
-      canvas.getByText("Please enter a part following '@'. 'admin@' is incomplete."),
-    ).toBeDefined();
+    await userEvent.click(canvas.getByRole("button", { name: "Copy to clipboard" }));
+    expect(window.navigator.clipboard.writeText).toHaveBeenCalledOnce();
+  },
+};
+
+export const VisualTestLinkedInheritanec: MtEmailFieldStory = {
+  name: "Linked inheritance",
+  args: {
+    isInheritanceField: true,
+    isInherited: true,
+    modelValue: "[email protected]",
+  },
+};
+
+export const VisualTestUnlinkedInheritance: MtEmailFieldStory = {
+  name: "Unlinked inheritance",
+  args: {
+    isInheritanceField: true,
+    isInherited: false,
+    modelValue: "[email protected]",
   },
 };