Feature: Mobile - Add toggle field

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

@@ -88,8 +88,8 @@ test('can update default object', async () => {
   const test = view.getByLabelText('Test Field')
 
   expect(name).toHaveValue(organization.name)
-  expect(shared).toHaveValue('yes')
-  expect(domainAssignment).toHaveValue('no')
+  expect(shared).toBeChecked()
+  expect(domainAssignment).not.toBeChecked()
   expect(domain).toHaveValue(organization.domain)
   expect(active).not.toBeChecked()
   expect(textarea).toHaveValue(attributeValues.textarea.value)
@@ -98,12 +98,7 @@ test('can update default object', async () => {
   await view.events.type(name, ' 2')
 
   await view.events.click(shared)
-  let selectOptions = view.getAllByRole('option')
-  await view.events.click(selectOptions[1])
-
   await view.events.click(domainAssignment)
-  selectOptions = view.getAllByRole('option')
-  await view.events.click(selectOptions[0])
 
   await view.events.type(domain, 'some-domain@domain.me')
   await view.events.click(active)

app/frontend/apps/mobile/components/layout/LayoutBottomNavigation.vue

@@ -70,7 +70,7 @@ const notificationCount = computed(() => {
 <style scoped lang="scss">
 .user-active {
   .user-avatar {
-    @apply outline outline-2 outline-blue;
+    @apply ring-2 ring-blue;
   }
 }
 

app/frontend/apps/mobile/form/theme/global/getCoreClasses.ts

@@ -61,12 +61,22 @@ const getCoreClasses: FormThemeExtension = (classes: FormThemeClasses) => {
     }),
     checkbox: {
       outer: 'formkit-invalid:bg-red-dark',
-      wrapper: `${classes.checkbox?.wrapper || ''} w-full justify-between`,
+      wrapper: `${
+        classes.checkbox?.wrapper || ''
+      } ltr:pl-2 rtl:pr-2 w-full justify-between`,
       label: `${classes.checkbox?.label || ''} formkit-required:required`,
+      input: ` ${
+        classes.checkbox?.input || ''
+      } h-4 w-4 border-[1.5px] border-white rounded-sm bg-transparent focus:border-blue focus:bg-blue-highlight checked:focus:color-blue checked:bg-blue checked:border-blue checked:focus:bg-blue checked:hover:bg-blue`,
     },
     toggle: {
-      wrapper: `${classes.toggle?.wrapper || ''} w-full justify-between`,
-      label: `${classes.toggle?.label || ''} formkit-required:required`,
+      ...classes.toggle,
+      outer: `${classes.toggle?.outer || ''} px-2 formkit-invalid:bg-red-dark`,
+      wrapper: `${classes.toggle?.wrapper || ''} inline-flex w-full h-14 px-2`,
+      label: `${
+        classes.toggle?.label || ''
+      } flex items-center w-full h-full text-base cursor-pointer formkit-required:required`,
+      inner: `${classes.toggle?.inner || ''} flex items-center h-full`,
     },
     tags: addBlockFloatingLabel(classes.tags),
     select: addSelectLabel(classes.select),

app/frontend/apps/mobile/pages/playground/views/PlaygroundOverview.vue

@@ -15,6 +15,20 @@ const linkSchemaRaw = [
     name: 'textarea',
     label: 'Textarea',
   },
+  {
+    type: 'toggle',
+    name: 'toggle',
+    label: 'Toggle',
+    required: true,
+    // disabled: true,
+    props: {
+      value: false,
+      variants: {
+        true: 'Yes',
+        false: 'No',
+      },
+    },
+  },
   {
     type: 'text',
     name: 'some_input',