Maintenance: Desktop - Align form field link with agreed design.

.cypress/utils.ts

@@ -1,11 +1,14 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
 import { merge } from 'lodash-es'
+import { initializeAppName } from '#shared/composables/useAppName.ts'
 import initializeStore from '#shared/stores/index.ts'
 import initializeGlobalComponents from '#shared/initializer/globalComponents.ts'
 import initializeGlobalProperties from '#shared/initializer/globalProperties.ts'
 import { initializeForm, initializeFormFields } from '#mobile/form/index.ts'
+import { initializeGlobalComponentStyles } from '#mobile/initializer/initializeGlobalComponentStyles.ts'
 import { initializeMobileIcons } from '#mobile/initializer/initializeMobileIcons.ts'
+import { initializeMobileVisuals } from '#mobile/initializer/mobileVisuals.ts'
 
 // imported only for types
 // for some reason adding it to tsconfig doesn't work
@@ -35,12 +38,15 @@ export const mountComponent: typeof mount = (
   options: any,
 ): Cypress.Chainable => {
   const plugins = []
+  plugins.push(() => { initializeAppName('mobile') })
   plugins.push(initializeStore)
+  plugins.push(initializeGlobalComponentStyles)
   plugins.push(initializeGlobalComponents)
   plugins.push(initializeGlobalProperties)
-  plugins.push(initializeMobileIcons())
+  plugins.push(initializeMobileIcons)
   plugins.push(initializeForm)
   plugins.push(initializeFormFields)
+  plugins.push(initializeMobileVisuals)
   plugins.push((app: App) => router.install(app))
 
   return cy.mount(component, merge({ global: { plugins } }, options))

app/frontend/apps/desktop/form/index.ts

@@ -10,6 +10,7 @@ import type {
 } from '#shared/types/form.ts'
 import type { ImportGlobEagerOutput } from '#shared/types/utils.ts'
 import { initializeFormClasses } from '#shared/components/Form/initializeFormClasses.ts'
+import { initializeFieldLinkClasses } from '#shared/components/Form/initializeFieldLinkClasses.ts'
 import { initializeToggleClasses } from '#shared/components/Form/fields/FieldToggle/initializeToggleClasses.ts'
 import { getCoreDesktopClasses } from './theme/global/getCoreDesktopClasses.ts'
 
@@ -49,6 +50,12 @@ export const initializeFormFields = () => {
     loading: 'my-9 fill-yellow-300',
   })
 
+  initializeFieldLinkClasses({
+    container: 'formkit-link',
+    base: 'ms-3 mb-2.5',
+    link: 'hover:rounded-sm hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 dark:hover:outline-blue-900',
+  })
+
   initializeToggleClasses({
     track:
       'bg-stone-200 dark:bg-gray-500 ring-1 ring-neutral-100 dark:ring-gray-900 hover:outline hover:outline-1 hover:outline-offset-2 hover:outline-blue-600 dark:hover:outline-blue-900 focus:outline focus:outline-1 focus:outline-offset-2 focus:outline-blue-800 hover:focus:outline-blue-800 dark:hover:focus:outline-blue-800 formkit-invalid:outline formkit-invalid:outline-1 formkit-invalid:outline-offset-2 formkit-invalid:outline-red-500 dark:hover:formkit-invalid:outline-red-500 formkit-errors:outline formkit-errors:outline-1 formkit-errors:outline-offset-2 formkit-errors:outline-red-500 dark:hover:formkit-errors:outline-red-500',

app/frontend/apps/desktop/initializer/3RD-PARTY-ICONS.md

@@ -1,5 +1,6 @@
 # Third Party Icons (`desktop`)
 
+- `assets/backspace.svg`
 - `assets/box-arrow-up-right.svg`
 - `assets/check-all.svg`
 - `assets/check-circle-outline.svg`
@@ -15,6 +16,7 @@
 - `assets/info-circle.svg`
 - `assets/key.svg`
 - `assets/moon.svg`
+- `assets/person-add.svg`
 - `assets/phone.svg`
 - `assets/search.svg`
 - `assets/spinner.svg`

app/frontend/apps/desktop/pages/home/views/Playground.vue

@@ -124,6 +124,8 @@ const formSchema = [
     clearable: true,
     props: {
       options: [...alphabetOptions.value, ...[longOption.value]],
+      link: '/',
+      linkIcon: 'person-add',
     },
   },
   {

app/frontend/apps/mobile/form/index.ts

@@ -10,6 +10,7 @@ import type {
 } from '#shared/types/form.ts'
 import type { ImportGlobEagerOutput } from '#shared/types/utils.ts'
 import { initializeFormClasses } from '#shared/components/Form/initializeFormClasses.ts'
+import { initializeFieldLinkClasses } from '#shared/components/Form/initializeFieldLinkClasses.ts'
 import { initializeToggleClasses } from '#shared/components/Form/fields/FieldToggle/initializeToggleClasses.ts'
 import getCoreClasses from './theme/global/getCoreMobileClasses.ts'
 
@@ -37,6 +38,12 @@ export const initializeFormFields = () => {
     loading: 'my-4',
   })
 
+  initializeFieldLinkClasses({
+    container: 'formkit-link flex items-center py-2',
+    base: 'border-white/10 ltr:border-l ltr:pl-1 rtl:border-r rtl:pr-1',
+    link: 'h-10 w-12',
+  })
+
   initializeToggleClasses({
     track:
       'bg-gray-300 border border-transparent focus-within:ring-1 focus-within:ring-white focus-within:ring-opacity-75 focus:outline-none formkit-invalid:border-solid formkit-invalid:border-red',

app/frontend/cypress/shared/components/Form/fields/FieldEditor/editor-signature.cy.ts

@@ -65,6 +65,7 @@ describe('correctly adds signature', () => {
         })
     })
   })
+
   it('add bottom signature when content is already there', () => {
     mountEditor()
 
@@ -95,6 +96,7 @@ describe('correctly adds signature', () => {
           })
       })
   })
+
   it('add signature before marker', () => {
     const originalBody = html`<p data-marker="signature-before"></p>
       <blockquote type="cite">
@@ -120,7 +122,9 @@ describe('correctly adds signature', () => {
         'contain.html',
         '<p data-marker="signature-before"><br class="ProseMirror-trailingBreak"></p><blockquote ',
       )
-      .type('text')
+      .type('{moveToStart}text')
+
+    cy.findByRole('textbox')
       .should('contain.html', '<p>text</p><div data-signature')
       .then(resolveContext)
       .then((context) => {

app/frontend/shared/components/Form/FormFieldLink.vue

@@ -2,23 +2,36 @@
 
 <script setup lang="ts">
 import type { RouteLocationRaw } from 'vue-router'
+import { getFieldLinkClasses } from './initializeFieldLinkClasses.ts'
 
-defineProps<{
-  link: RouteLocationRaw
-}>()
+withDefaults(
+  defineProps<{
+    link: RouteLocationRaw
+    linkIcon?: string
+  }>(),
+  {
+    linkIcon: 'form-field-link',
+  },
+)
+
+const classMap = getFieldLinkClasses()
 </script>
 
 <template>
-  <div
-    class="flex h-full items-center border-white/10 focus:outline-none ltr:border-l ltr:pl-1 rtl:border-r rtl:pr-1"
-  >
-    <CommonLink
-      v-if="link"
-      :link="link"
-      class="flex h-10 w-12 items-center justify-center"
-      open-in-new-tab
+  <div :class="classMap.container">
+    <div
+      :class="classMap.base"
+      class="flex h-full items-center focus:outline-none"
     >
-      <CommonIcon name="form-field-link" decorative size="small" />
-    </CommonLink>
+      <CommonLink
+        v-if="link"
+        :link="link"
+        :class="classMap.link"
+        class="flex items-center justify-center"
+        open-in-new-tab
+      >
+        <CommonIcon :name="linkIcon" size="small" decorative />
+      </CommonLink>
+    </div>
   </div>
 </template>

app/frontend/shared/components/Form/initializeFieldLinkClasses.ts

@@ -0,0 +1,16 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+import type { FieldLinkClassMap } from './types.ts'
+
+// Provide your own map with the following keys, the values given here are just examples.
+let linkClasses: FieldLinkClassMap = {
+  container: 'field-link-container',
+  base: 'field-link-base',
+  link: 'field-link-link',
+}
+
+export const initializeFieldLinkClasses = (classes: FieldLinkClassMap) => {
+  linkClasses = classes
+}
+
+export const getFieldLinkClasses = () => linkClasses

app/frontend/shared/components/Form/types.ts

@@ -264,3 +264,6 @@ export interface FormStep {
 
 export type FormClass = 'loading'
 export type FormClassMap = Record<FormClass, string>
+
+export type FieldLinkClass = 'container' | 'base' | 'link'
+export type FieldLinkClassMap = Record<FieldLinkClass, string>

app/frontend/shared/form/features/addLink.ts

@@ -1,11 +1,15 @@
 // Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
 
 import type { FormKitNode } from '@formkit/core'
+import { useAppName } from '#shared/composables/useAppName.ts'
 
 const addLink = (node: FormKitNode) => {
   const { props } = node
 
-  node.addProps(['link'])
+  node.addProps(['link', 'linkIcon'])
+
+  // The padding below is specific to mobile field layout only.
+  if (useAppName() !== 'mobile') return
 
   const toggleLink = (isLink: boolean) => {
     if (isLink) {

app/frontend/shared/form/sections/link.ts

@@ -9,18 +9,11 @@ export const link = createSection(
   'link',
   () =>
     ({
-      $el: 'div',
+      $cmp: markRaw(FormFieldLink),
       if: '$link',
-      attrs: {
-        class: 'formkit-link flex items-center py-2',
+      props: {
+        link: '$link',
+        linkIcon: '$linkIcon',
       },
-      children: [
-        {
-          $cmp: markRaw(FormFieldLink),
-          props: {
-            link: '$link',
-          },
-        },
-      ],
     }) as unknown as FormKitSchemaNode,
 )