Fixes: Mobile - Fix small select field height and "More" icons in art…

…icles

app/frontend/apps/mobile/components/CommonButtonGroup/CommonButtonGroup.story.vue

@@ -12,7 +12,7 @@ const alert = () => window.alert('click')
     <CommonButtonGroup
       :options="[
         { label: 'link %s', labelPlaceholder: ['text'], link: '/example' },
-        { label: 'button', onAction: alert, selected: true },
+        { label: 'button', onAction: alert },
         {
           label: 'with-icon',
           onAction: alert,

app/frontend/apps/mobile/components/CommonButtonGroup/CommonButtonGroup.vue

@@ -5,10 +5,18 @@ import { type Props as IconProps } from '@shared/components/CommonIcon/CommonIco
 import type { CommonButtonOption } from './types'
 
 export interface Props {
+  modelValue?: string | number
+  mode?: 'full' | 'compressed'
   options: CommonButtonOption[]
 }
 
-defineProps<Props>()
+withDefaults(defineProps<Props>(), {
+  mode: 'compressed',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value?: string | number): void
+}>()
 
 const getIconProps = (option: CommonButtonOption): IconProps => {
   if (!option.icon) return {} as IconProps
@@ -17,19 +25,32 @@ const getIconProps = (option: CommonButtonOption): IconProps => {
   }
   return option.icon
 }
+
+const onButtonClick = (option: CommonButtonOption) => {
+  if (option.disabled) return
+  option.onAction?.()
+  emit('update:modelValue', option.value)
+}
 </script>
 
 <template>
-  <div class="flex w-full gap-3">
+  <div
+    class="flex max-w-[100vw] overflow-x-auto"
+    :class="{ 'w-full': mode === 'full' }"
+  >
     <Component
       :is="option.link ? 'CommonLink' : 'button'"
       v-for="option of options"
       :key="option.label"
       :disabled="option.disabled"
       :link="option.link"
-      class="flex flex-1 flex-col items-center justify-center gap-1 rounded-xl bg-gray-500 p-2 text-white"
-      :class="{ 'bg-gray-200': option.selected }"
-      @click="!option.disabled && option.onAction?.()"
+      class="flex flex-col items-center justify-center gap-1 rounded-xl bg-gray-500 py-1 px-3 text-base text-white ltr:mr-2 rtl:ml-2"
+      :class="{
+        'bg-gray-600/50 text-white/30': option.disabled,
+        'bg-gray-200': option.value != null && modelValue === option.value,
+        'flex-1': mode === 'full',
+      }"
+      @click="onButtonClick(option)"
     >
       <CommonIcon v-if="option.icon" v-bind="getIconProps(option)" decorative />
       <span>{{ $t(option.label, ...(option.labelPlaceholder || [])) }}</span>

app/frontend/apps/mobile/components/CommonButtonGroup/__tests__/CommonButtonGroup.spec.ts

@@ -11,13 +11,24 @@ describe('buttons group', () => {
     const onAction = vi.fn()
 
     const options: CommonButtonOption[] = [
-      { label: 'link %s', labelPlaceholder: ['text'], link: '/example' },
-      { label: 'button', onAction, selected: true },
-      { label: 'with-icon', onAction, icon: 'mobile-home', disabled: true },
+      {
+        label: 'link %s',
+        labelPlaceholder: ['text'],
+        link: '/example',
+        value: 'link',
+      },
+      { label: 'button', onAction, value: 'button' },
+      {
+        label: 'with-icon',
+        onAction,
+        icon: 'mobile-home',
+        disabled: true,
+        value: 'icon',
+      },
     ]
 
     const view = renderComponent(CommonButtonGroup, {
-      props: { options },
+      props: { options, modelValue: 'button' },
       router: true,
       store: true,
     })

app/frontend/apps/mobile/components/CommonButtonGroup/types.ts

@@ -4,10 +4,10 @@ import { type Props as IconProps } from '@shared/components/CommonIcon/CommonIco
 
 export interface CommonButtonOption {
   link?: string
+  value?: string | number
   onAction?(): void | Promise<void>
   label: string
   labelPlaceholder?: string[]
   disabled?: boolean
-  selected?: boolean
   icon?: string | IconProps
 }

app/frontend/apps/mobile/components/CommonSelect/CommonSelect.vue

@@ -9,7 +9,7 @@ import CommonSelectItem from './CommonSelectItem.vue'
 export interface Props {
   // we cannot move types into separate file, because Vue would not be able to
   // transform these into runtime types
-  modelValue?: string | number | boolean | (string | number | boolean)[]
+  modelValue?: string | number | boolean | (string | number | boolean)[] | null
   options: SelectOption[]
   /**
    * Do not modify local value

app/frontend/apps/mobile/components/CommonSelect/CommonSelectItem.vue

@@ -50,6 +50,8 @@ const label = computed(() => {
         'opacity-30': option.disabled,
       }"
       size="base"
+      :aria-hidden="!selected"
+      :aria-label="$t('Selected')"
       :name="selected ? 'mobile-check-box-yes' : 'mobile-check-box-no'"
       class="mr-3 text-white/50"
     />
@@ -88,6 +90,8 @@ const label = computed(() => {
         invisible: !selected,
         'opacity-30': option.disabled,
       }"
+      :aria-label="$t('Selected')"
+      :aria-hidden="!selected"
       size="tiny"
       name="mobile-check"
     />

app/frontend/apps/mobile/components/CommonSelectPill/CommonSelectPill.vue

@@ -0,0 +1,63 @@
+<!-- Copyright (C) 2012-2022 Zammad Foundation, https://zammad-foundation.org/ -->
+
+<script setup lang="ts">
+import CommonSelect from '@mobile/components/CommonSelect/CommonSelect.vue'
+import type { SelectOption } from '@shared/components/Form/fields/FieldSelect/types'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  modelValue?: string | number | boolean | (string | number | boolean)[] | null
+  options: SelectOption[]
+  placeholder?: string
+  multiple?: boolean
+  noClose?: boolean
+  noOptionsLabelTranslation?: boolean
+}>()
+
+const emit = defineEmits<{
+  (
+    event: 'update:modelValue',
+    value: string | number | (string | number)[],
+  ): void
+  (e: 'select', option: SelectOption): void
+}>()
+
+const dialogProps = computed(() => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { placeholder, ...dialogProps } = props
+  return dialogProps
+})
+
+const defaultLabel = computed(() => {
+  const option = props.options.find(
+    (option) => option.value === props.modelValue,
+  )
+  return option?.label || props.placeholder || ''
+})
+</script>
+
+<template>
+  <CommonSelect
+    #default="{ open }"
+    v-bind="dialogProps"
+    @update:model-value="emit('update:modelValue', $event)"
+    @select="emit('select', $event)"
+  >
+    <button
+      type="button"
+      class="inline-flex w-auto cursor-pointer rounded-lg bg-gray-600 py-1 ltr:pl-2 ltr:pr-1 rtl:pr-2 rtl:pl-1"
+      @click="open"
+      @keydown.space="open"
+    >
+      <slot>
+        {{ defaultLabel }}
+      </slot>
+      <CommonIcon
+        class="self-center"
+        name="mobile-caret-down"
+        size="tiny"
+        decorative
+      />
+    </button>
+  </CommonSelect>
+</template>