From 8298b189029cf45d773b5cef04fb216a6d0f24de Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Mon, 13 Jan 2025 17:39:57 +0100
Subject: [PATCH 01/18] updates color input UI for inline and micro

---
 .../@apostrophecms/asset/lib/globalIcons.js   |  3 +-
 .../ui/apos/components/AposInputColor.vue     | 43 ++++++++------
 .../color-field/ui/apos/lib/AposColorInfo.vue | 59 +++++++++++++++++++
 .../ui/apos/logic/AposInputColor.js           |  7 +++
 4 files changed, 92 insertions(+), 20 deletions(-)
 create mode 100644 modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue

diff --git a/modules/@apostrophecms/asset/lib/globalIcons.js b/modules/@apostrophecms/asset/lib/globalIcons.js
index 709f2ce368..9b6c5334ae 100644
--- a/modules/@apostrophecms/asset/lib/globalIcons.js
+++ b/modules/@apostrophecms/asset/lib/globalIcons.js
@@ -61,8 +61,8 @@ module.exports = {
   'format-list-numbered-icon': 'FormatListNumbered',
   'format-quote-close-icon': 'FormatQuoteClose',
   'format-strikethrough-variant-icon': 'FormatStrikethroughVariant',
-  'format-superscript-icon': 'FormatSuperscript',
   'format-subscript-icon': 'FormatSubscript',
+  'format-superscript-icon': 'FormatSuperscript',
   'format-text-icon': 'FormatText',
   'format-underline-icon': 'FormatUnderline',
   'help-circle-icon': 'HelpCircle',
@@ -122,5 +122,6 @@ module.exports = {
   'unfold-more-horizontal-icon': 'UnfoldMoreHorizontal',
   'video-icon': 'Video',
   'view-column-icon': 'ViewColumn',
+  'water-off-icon': 'WaterOff',
   'web-icon': 'Web'
 };
diff --git a/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue b/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue
index 8ec6be5dbd..b4dd410a78 100644
--- a/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue
+++ b/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue
@@ -8,6 +8,13 @@
   >
     <template #body>
       <div class="apos-input-color">
+        <AposColorInfo
+          v-if="next && isInline"
+          class="apos-input-color__info apos-input-color__info--inline"
+          :label="valueLabel"
+          :is-micro="isMicro"
+          @clear="clear"
+        />
         <div class="apos-input-color__ui">
           <AposContextMenu
             :button="buttonOptions"
@@ -24,17 +31,13 @@
             />
           </AposContextMenu>
         </div>
-        <div class="apos-input-color__info" data-apos-test="colorInfo">
-          {{ valueLabel }}
-          <AposButton
-            v-if="next"
-            type="quiet"
-            label="apostrophe:clear"
-            class="apos-input-color__clear"
-            :modifiers="['no-motion']"
-            @click="clear"
-          />
-        </div>
+        <AposColorInfo
+          v-if="next && !isInline"
+          class="apos-input-color__info"
+          :label="valueLabel"
+          :is-micro="isMicro"
+          @clear="clear"
+        />
       </div>
     </template>
   </AposInputWrapper>
@@ -42,8 +45,13 @@
 
 <script>
 import AposInputColorLogic from '../logic/AposInputColor';
+import AposColorInfo from '../lib/AposColorInfo.vue';
+
 export default {
   name: 'AposInputColor',
+  components: {
+    AposColorInfo
+  },
   mixins: [ AposInputColorLogic ]
 };
 </script>
@@ -54,16 +62,13 @@ export default {
     align-items: center;
   }
 
-  .apos-input-color__clear {
-    margin-left: 10px;
-  }
-
   .apos-input-color__info {
-    @include type-base;
+    margin-left: 15px;
 
-    & {
-      margin-left: 15px;
-      color: var(--a-text-primary);
+    &--inline {
+      margin-right: 10px;
+      margin-left: 0;
     }
   }
+
 </style>
diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue
new file mode 100644
index 0000000000..5a283df9f6
--- /dev/null
+++ b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="apos-color-info" data-apos-test="colorInfo">
+    <span v-if="!isMicro && label">
+      {{ label }}
+    </span>
+    <AposButton
+      v-if="!isMicro"
+      type="quiet"
+      :label="'apostrophe:clear'"
+      class="apos-color-info__clear-btn"
+      :modifiers="['no-motion']"
+      @click="emit('clear')"
+    />
+    <AposIndicator
+      v-else
+      class="apos-color-info__clear-icon"
+      icon="water-off-icon"
+      @click="emit('clear')"
+    />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  isMicro: {
+    type: Boolean,
+    default: false
+  },
+  label: {
+    type: String,
+    default: null
+  }
+});
+
+const emit = defineEmits([ 'clear' ]);
+</script>
+
+<style lang="scss">
+  .apos-color-info {
+    @include type-base;
+
+    & {
+      color: var(--a-text-primary);
+    }
+  }
+
+  .apos-color-info__clear-btn {
+    margin-left: 10px;
+  }
+
+  .apos-color-info__clear-icon {
+    cursor: pointer;
+    color: var(--a-base-2);
+
+    &:hover {
+      color: var(--a-primary);
+    }
+  }
+</style>
diff --git a/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js b/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js
index d294107d50..e280df8f63 100644
--- a/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js
+++ b/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js
@@ -16,6 +16,12 @@ export default {
     };
   },
   computed: {
+    isMicro() {
+      return this.modifiers.includes('micro');
+    },
+    isInline() {
+      return this.modifiers.includes('inline');
+    },
     pickerValue() {
       return this.next || this.defaultValue;
     },
@@ -48,6 +54,7 @@ export default {
     }
   },
   mounted() {
+    console.log('this.modifiers', this.modifiers);
     if (!this.next) {
       this.next = '';
     }

From f476f1fab426a7c3f88ade674d1a00a05e8563ce Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Mon, 13 Jan 2025 18:02:34 +0100
Subject: [PATCH 02/18] less space between clear icon and the swatch

---
 .../color-field/ui/apos/components/AposInputColor.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue b/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue
index b4dd410a78..e2ae055dfa 100644
--- a/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue
+++ b/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue
@@ -66,7 +66,7 @@ export default {
     margin-left: 15px;
 
     &--inline {
-      margin-right: 10px;
+      margin-right: 5px;
       margin-left: 0;
     }
   }

From c1794ecdf57c686be7b8cdcd0ab705def9340d64 Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Mon, 13 Jan 2025 18:03:24 +0100
Subject: [PATCH 03/18] in inline mode, field info has no witdth limit, just a
 margin right to not end up to close to right elem

---
 .../schema/ui/apos/components/AposInputWrapper.vue         | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
index 2fd2ce1e4a..5635c00785 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
@@ -240,13 +240,8 @@ export default {
     margin-bottom: 0;
   }
 
-  .apos-field__info,
-  .apos-input-wrapper {
-    width: 48%;
-  }
-
   .apos-field__info {
-    margin-right: 4%;
+    margin-right: 30px;
   }
 
   &.apos-field--range {

From 60974e83e7533294b5a42a43ecd507953c319c23 Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Tue, 14 Jan 2025 17:52:56 +0100
Subject: [PATCH 04/18] adds fieldModifiers prop to AposSchema for field type
 specific modifiers

---
 .../schema/ui/apos/logic/AposSchema.js            | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposSchema.js b/modules/@apostrophecms/schema/ui/apos/logic/AposSchema.js
index 076e69e4c0..9341dd8097 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposSchema.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposSchema.js
@@ -53,12 +53,18 @@ export default {
         return getConditionTypesObject();
       }
     },
+    // Modifiers applied to all fields
     modifiers: {
       type: Array,
       default() {
         return [];
       }
     },
+    // Modifiers applied to specified field types
+    fieldModifiers: {
+      type: Object,
+      default: () => ({})
+    },
     triggerValidation: Boolean,
     utilityRail: {
       type: Boolean,
@@ -128,10 +134,7 @@ export default {
               data: this.modelValue.data[item.name]
             },
             serverError: this.serverErrors && this.serverErrors[item.name],
-            modifiers: [
-              ...(this.modifiers || []),
-              ...(item.modifiers || [])
-            ]
+            modifiers: this.computeModifiers(item)
           }
         };
       }, {});
@@ -339,6 +342,10 @@ export default {
     generateItemUniqueKey(field) {
       return `${field.name}:${field._id ?? ''}:${this.modelValue?.data?._id ?? ''}`;
 
+    },
+    computeModifiers(field) {
+      const fieldModifiers = this.fieldModifiers[field.type] || this.modifiers;
+      return [ ...new Set(fieldModifiers.concat(field.modifiers || [])) ];
     }
   }
 };

From d3afe1c56566fa59c103f0b3571d4f0ab5cc3ef9 Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Tue, 14 Jan 2025 17:53:49 +0100
Subject: [PATCH 05/18] adds new slot info on input wrapper

---
 .../ui/apos/components/AposInputWrapper.vue   | 58 ++++++++++---------
 .../schema/ui/apos/logic/AposInputWrapper.js  |  3 +
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
index 5635c00785..d1c95f490d 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
@@ -37,9 +37,7 @@
               data-apos-test="field-tag"
             />
             <span
-              v-if="
-                (field.help || field.htmlHelp) && displayOptions.helpTooltip
-              "
+              v-if="(field.help || field.htmlHelp) && displayOptions.helpTooltip"
               data-apos-test="field-help-tooltip"
               class="apos-field__help-tooltip"
             >
@@ -64,27 +62,32 @@
               />
             </span>
           </span>
-          <span
-            data-apos-test="field-meta-wrapper"
-            class="apos-field__label-meta"
-          >
-            <slot name="meta">
-              <component
-                :is="name"
-                v-for="{ name, namespace, data } in metaComponents"
-                :key="name"
-                :field="field"
-                :items="items"
-                :namespace="namespace"
-                :meta="data"
-                :meta-raw="meta"
-                :data-apos-test-component="name"
-                :data-apos-test-namespace="namespace"
-                data-apos-test="field-meta"
-                @replace-field-value="replaceFieldValue"
-              />
-            </slot>
-          </span>
+          <div>
+            <div v-if="hasExtraInfo" class="apos-field__label-extra-info">
+              <slot name="info" />
+            </div>
+            <span
+              data-apos-test="field-meta-wrapper"
+              class="apos-field__label-meta"
+            >
+              <slot name="meta">
+                <component
+                  :is="name"
+                  v-for="{ name, namespace, data } in metaComponents"
+                  :key="name"
+                  :field="field"
+                  :items="items"
+                  :namespace="namespace"
+                  :meta="data"
+                  :meta-raw="meta"
+                  :data-apos-test-component="name"
+                  :data-apos-test-namespace="namespace"
+                  data-apos-test="field-meta"
+                  @replace-field-value="replaceFieldValue"
+                />
+              </slot>
+            </span>
+          </div>
         </component>
         <!-- eslint-disable vue/no-v-html -->
         <p
@@ -92,7 +95,6 @@
           class="apos-field__help"
           v-html="$t(field.help || field.htmlHelp)"
         />
-        <!-- eslint-enable vue/no-v-html -->
         <slot name="additional" />
       </div>
       <slot name="body" />
@@ -104,7 +106,7 @@
         {{ getTranslatedErrorMessage(errorMessage) }}
       </div>
     </component>
-    <!-- CSS Escape hatch for additional interfaces like relatipnship managers -->
+    <!-- CSS Escape hatch for additional interfaces like relationship managers -->
     <slot name="secondary" />
   </div>
 </template>
@@ -190,6 +192,10 @@ export default {
   }
 }
 
+.apos-field__label-meta:empty {
+  display: none;
+}
+
 .apos-field__help {
   @include type-base;
 
diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposInputWrapper.js b/modules/@apostrophecms/schema/ui/apos/logic/AposInputWrapper.js
index 7b286fdc16..d642a72781 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposInputWrapper.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposInputWrapper.js
@@ -143,6 +143,9 @@ export default {
             data: meta[namespace] || {}
           };
         });
+    },
+    hasExtraInfo() {
+      return this.$slots.info;
     }
   },
   mounted: function () {

From 3e5a92d26819a864d653b272ce82037125d46725 Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Tue, 14 Jan 2025 18:17:00 +0100
Subject: [PATCH 06/18] adds input range UI field style for micro

---
 .../ui/apos/components/AposInputRange.vue     | 53 +++++++++++++++++--
 .../schema/ui/apos/logic/AposInputRange.js    |  3 ++
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
index 1dffca0090..31dd5087fe 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
@@ -6,6 +6,24 @@
     :uid="uid"
     :display-options="displayOptions"
   >
+    <template v-if="isMicro" #info>
+      <div
+        class="apos-range__value"
+        aria-hidden="true"
+      >
+        <AposIndicator
+          v-if="isSet"
+          class="apos-range__clear"
+          icon="close-icon"
+          @click="unset"
+        />
+        <div class="apos-range__label">
+          <span v-if="isSet">
+            {{ valueLabel }}
+          </span>
+        </div>
+      </div>
+    </template>
     <template #body>
       <div class="apos-input-wrapper">
         <div v-apos-tooltip="tooltip" class="apos-range">
@@ -19,7 +37,7 @@
             class="apos-range__input"
             :disabled="field.readOnly"
           >
-          <div class="apos-range__scale">
+          <div v-if="!isMicro" class="apos-range__scale">
             <span>
               <span class="apos-sr-only">
                 {{ $t('apostrophe:minLabel') }}
@@ -35,6 +53,7 @@
           </div>
         </div>
         <div
+          v-if="!isMicro"
           class="apos-range__value"
           aria-hidden="true"
           :class="{'apos-is-unset': !isSet}"
@@ -80,14 +99,42 @@ export default {
       pointer-events: none;
     }
 
-    .apos-range__clear {
-      margin-left: 5px;
+    .apos-field--micro & {
+      display: flex;
+      padding-top: 0;
+      min-width: auto;
+    }
+  }
+
+  .apos-range__label {
+    padding: 5px;
+    border-radius: 5px;
+    border: 1px solid var(--a-base-8);
+
+    .apos-field--micro & {
+      min-width: 40px;
+      min-height: 25px;
+      box-sizing: border-box;
+    }
+  }
+
+  .apos-range__clear {
+    margin-left: 5px;
+
+    .apos-field--micro & {
+      cursor: pointer;
+      margin-right: 5px;
+      margin-left: 0;
     }
   }
 
   .apos-range {
     flex-grow: 1;
     margin-right: 20px;
+
+    .apos-field--micro & {
+      margin-right: 0;
+    }
   }
 
   .apos-range__scale {
diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js b/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js
index 5ca16fd01a..a34b9981b7 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js
@@ -9,6 +9,9 @@ export default {
     };
   },
   computed: {
+    isMicro() {
+      return this.modifiers.includes('micro');
+    },
     minLabel() {
       return this.field.min + this.unit;
     },

From 87caaeccabcf7445ec69709582ca3589f0f6ad92 Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Tue, 14 Jan 2025 18:17:04 +0100
Subject: [PATCH 07/18] removes log

---
 .../@apostrophecms/color-field/ui/apos/logic/AposInputColor.js   | 1 -
 1 file changed, 1 deletion(-)

diff --git a/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js b/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js
index e280df8f63..94fde78aa4 100644
--- a/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js
+++ b/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js
@@ -54,7 +54,6 @@ export default {
     }
   },
   mounted() {
-    console.log('this.modifiers', this.modifiers);
     if (!this.next) {
       this.next = '';
     }

From 57325f59d7cf130ce3c59d5cfbeb3e2e3a23703c Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Wed, 15 Jan 2025 10:34:34 +0100
Subject: [PATCH 08/18] updates input padding for micro

---
 modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss b/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
index 3521271473..c460b67221 100644
--- a/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
+++ b/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
@@ -21,7 +21,7 @@
     // Some  browser styles set `textarea` to monospace.
     resize: none;
   }
-  
+
   &::placeholder {
     color: var(--a-base-4);
     font-style: italic;
@@ -106,7 +106,7 @@
 
 .apos-field.apos-field--micro {
   .apos-input {
-    padding: 10px;
+    padding: 7px;
     font-size: var(--a-type-small);
   }
 

From 7966b3d1255ffe021ed171ca6af05b9ab8be8a4d Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Wed, 15 Jan 2025 11:16:27 +0100
Subject: [PATCH 09/18] updates fields spacing when micro

---
 .../schema/ui/apos/components/AposInputRange.vue            | 6 +++++-
 modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss  | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
index 31dd5087fe..f62db742f1 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
@@ -155,7 +155,7 @@ export default {
   // adapted from http://danielstern.ca/range.css/#/
   .apos-range__input {
     width: 100%;
-    margin: 5px 0;
+    margin: 5px 0; // Question: Shoud we keep that margin? It creates more space than for other fields.
     background-color: transparent;
     /* stylelint-disable-next-line property-no-vendor-prefix */
     -webkit-appearance: none;
@@ -168,6 +168,10 @@ export default {
         color: var(--a-text-primary);
       }
     }
+
+    .apos-field--micro {
+      margin: 0;
+    }
   }
 
   .apos-range__input[disabled] {
diff --git a/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss b/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
index c460b67221..4a7ea3b3d3 100644
--- a/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
+++ b/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
@@ -115,6 +115,7 @@
   }
 
   .apos-field__label {
+    margin-bottom: 7px; // Does it makes sense to update label margin for micro fields (or it's just about style?) or maybe makes more sense to update in palette since we can mix styles
     font-size: var(--a-type-small);
     font-weight: 500;
   }

From 398d136490c49736232eb7120b0b41893fc9cccd Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Wed, 15 Jan 2025 17:53:06 +0100
Subject: [PATCH 10/18] removes commented question

---
 .../@apostrophecms/schema/ui/apos/components/AposInputRange.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
index f62db742f1..9e7089775b 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
@@ -155,7 +155,7 @@ export default {
   // adapted from http://danielstern.ca/range.css/#/
   .apos-range__input {
     width: 100%;
-    margin: 5px 0; // Question: Shoud we keep that margin? It creates more space than for other fields.
+    margin: 5px 0;
     background-color: transparent;
     /* stylelint-disable-next-line property-no-vendor-prefix */
     -webkit-appearance: none;

From f476d980defcdfc293f6b27907417d828ae96acc Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Wed, 15 Jan 2025 17:53:27 +0100
Subject: [PATCH 11/18] improves spacing on inline fields (label will shrink if
 wrapper takes more space)

---
 .../schema/ui/apos/components/AposInputWrapper.vue       | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
index d1c95f490d..035625d003 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue
@@ -241,6 +241,7 @@ export default {
 .apos-field--inline {
   display: flex;
   align-items: center;
+  justify-content: space-between;
 
   .apos-field__label {
     margin-bottom: 0;
@@ -250,6 +251,14 @@ export default {
     margin-right: 30px;
   }
 
+  .apos-field__info {
+    flex-shrink: 1;
+  }
+
+  .apos-input-wrapper {
+    flex-grow: 1;
+  }
+
   &.apos-field--range {
     display: block;
 

From 70be652a16b0a9cdbecab931d9da620dc31f1b9e Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Thu, 16 Jan 2025 14:12:33 +0100
Subject: [PATCH 12/18] makes input range using numbers directly

---
 .../ui/apos/components/AposInputRange.vue     |  2 +-
 .../schema/ui/apos/logic/AposInputRange.js    | 29 +++++++++----------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
index 9e7089775b..c23e48ae68 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
@@ -29,7 +29,7 @@
         <div v-apos-tooltip="tooltip" class="apos-range">
           <input
             :id="uid"
-            v-model="next"
+            v-model.number="next"
             type="range"
             :min="field.min"
             :max="field.max"
diff --git a/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js b/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js
index a34b9981b7..f2fbd4b4df 100644
--- a/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js
+++ b/modules/@apostrophecms/schema/ui/apos/logic/AposInputRange.js
@@ -5,6 +5,7 @@ export default {
   mixins: [ AposInputMixin ],
   data() {
     return {
+      next: this.initNext(),
       unit: this.field.unit || ''
     };
   },
@@ -24,27 +25,26 @@ export default {
     isSet() {
       // Detect whether or not a range is currently unset
       // Use this flag to hide/show UI elements
-      if (this.next >= this.field.min) {
+      if (typeof this.next === 'number' && this.next >= this.field.min) {
         return true;
       } else {
         return false;
       }
     }
   },
-  mounted() {
-    // The range spec defaults to a value of midway between the min and max
-    // Example: a range with an unset value and a min of 0 and max of 100 will become 50
-    // This does not allow ranges to go unset :(
-    if (!this.next && this.next !== 0) {
-      this.unset();
-    }
-  },
   methods: {
-    // Default to a value outside the range when no def is defined,
-    // to be used as a flag.
-    // The value will be set to null later in validation
+    initNext() {
+      if (this.modelValue && typeof this.modelValue.data === 'number') {
+        return this.modelValue.data;
+      }
+
+      return this.getDefault();
+    },
     unset() {
-      this.next = typeof this.field.def === 'number'
+      this.next = this.getDefault();
+    },
+    getDefault() {
+      return typeof this.field.def === 'number'
         ? this.field.def
         : this.field.min - 1;
     },
@@ -55,9 +55,6 @@ export default {
         }
       }
       return false;
-    },
-    convert(value) {
-      return parseFloat(value);
     }
   }
 };

From 5770316defef1d43a2f637c3827e35b56ae94d91 Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Thu, 16 Jan 2025 18:07:22 +0100
Subject: [PATCH 13/18] adds changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a22f2d2d5..684a8bf312 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,6 +18,8 @@
 ### Changes
 
 * The `pickerOptions` sub property of a color field's configuration has been merged with it's parent `options` object.
+* Reworks `inline` and `micro` UI of some fields (color, range, select). Improve global inline style.
+* Makes the range input being a number all the time instead of a string that we convert manually.
 
 ## 4.11.2 (2024-12-29)
 

From 642d53ae63b5f69388170f29f76e50c5c954383f Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Mon, 20 Jan 2025 16:16:45 +0100
Subject: [PATCH 14/18] PRO-7023: adjust micro range for now, will be an input
 later

---
 .../ui/apos/components/AposInputRange.vue     | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
index c23e48ae68..bc454c1997 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
@@ -17,7 +17,7 @@
           icon="close-icon"
           @click="unset"
         />
-        <div class="apos-range__label">
+        <div class="apos-range__value-input">
           <span v-if="isSet">
             {{ valueLabel }}
           </span>
@@ -106,16 +106,16 @@ export default {
     }
   }
 
-  .apos-range__label {
-    padding: 5px;
+  .apos-range__value-input {
+    display: inline-flex;
+    align-items: center;
+    padding: 5px 0 5px 5px;
     border-radius: 5px;
-    border: 1px solid var(--a-base-8);
-
-    .apos-field--micro & {
-      min-width: 40px;
-      min-height: 25px;
-      box-sizing: border-box;
-    }
+    // TODO: Restaure when it becomes an input
+    /* border: 1px solid var(--a-base-8); */
+    min-width: 40px;
+    min-height: 25px;
+    box-sizing: border-box;
   }
 
   .apos-range__clear {

From 7cdd27bb44270b9c5fa7e5425a6d404e938973a0 Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Tue, 21 Jan 2025 15:38:32 +0100
Subject: [PATCH 15/18] lint fixes

---
 .../schema/ui/apos/components/AposInputRange.vue            | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
index bc454c1997..d0b6521d96 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
@@ -108,14 +108,16 @@ export default {
 
   .apos-range__value-input {
     display: inline-flex;
+    box-sizing: border-box;
     align-items: center;
     padding: 5px 0 5px 5px;
     border-radius: 5px;
-    // TODO: Restaure when it becomes an input
+
+    /* TODO: Restaure when it becomes an input */
+
     /* border: 1px solid var(--a-base-8); */
     min-width: 40px;
     min-height: 25px;
-    box-sizing: border-box;
   }
 
   .apos-range__clear {

From cd19f5070f219159ef2d4a6117ce19924c93d36b Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Tue, 21 Jan 2025 16:31:08 +0100
Subject: [PATCH 16/18] removes range micro min-width of label value display

---
 .../schema/ui/apos/components/AposInputRange.vue             | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
index d0b6521d96..353f351cad 100644
--- a/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
+++ b/modules/@apostrophecms/schema/ui/apos/components/AposInputRange.vue
@@ -112,11 +112,6 @@ export default {
     align-items: center;
     padding: 5px 0 5px 5px;
     border-radius: 5px;
-
-    /* TODO: Restaure when it becomes an input */
-
-    /* border: 1px solid var(--a-base-8); */
-    min-width: 40px;
     min-height: 25px;
   }
 

From 6b4e5a98e8358dedd7666d3facaf65f4e2749a9a Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Wed, 22 Jan 2025 10:14:16 +0100
Subject: [PATCH 17/18] fixes color input

---
 .../ui/apos/components/AposInputColor.vue     |  8 ++++----
 .../color-field/ui/apos/lib/AposColorInfo.vue | 19 +++++++++++--------
 .../ui/apos/logic/AposInputColor.js           |  7 -------
 3 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue b/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue
index e2ae055dfa..f1da01d3fd 100644
--- a/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue
+++ b/modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue
@@ -9,9 +9,9 @@
     <template #body>
       <div class="apos-input-color">
         <AposColorInfo
-          v-if="next && isInline"
+          v-if="isInline"
           class="apos-input-color__info apos-input-color__info--inline"
-          :label="valueLabel"
+          :value="next"
           :is-micro="isMicro"
           @clear="clear"
         />
@@ -32,9 +32,9 @@
           </AposContextMenu>
         </div>
         <AposColorInfo
-          v-if="next && !isInline"
+          v-if="!isInline"
           class="apos-input-color__info"
-          :label="valueLabel"
+          :value="next"
           :is-micro="isMicro"
           @clear="clear"
         />
diff --git a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue
index 5a283df9f6..41f4eb82ac 100644
--- a/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue
+++ b/modules/@apostrophecms/color-field/ui/apos/lib/AposColorInfo.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="apos-color-info" data-apos-test="colorInfo">
-    <span v-if="!isMicro && label">
+    <span v-if="!isMicro">
       {{ label }}
     </span>
     <AposButton
-      v-if="!isMicro"
+      v-if="!isMicro && value"
       type="quiet"
       :label="'apostrophe:clear'"
       class="apos-color-info__clear-btn"
@@ -12,7 +12,7 @@
       @click="emit('clear')"
     />
     <AposIndicator
-      v-else
+      v-else-if="value"
       class="apos-color-info__clear-icon"
       icon="water-off-icon"
       @click="emit('clear')"
@@ -21,17 +21,20 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: null
+  },
   isMicro: {
     type: Boolean,
     default: false
-  },
-  label: {
-    type: String,
-    default: null
   }
 });
 
+const label = computed(() => props.value || 'None Selected');
 const emit = defineEmits([ 'clear' ]);
 </script>
 
diff --git a/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js b/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js
index 94fde78aa4..c511c8b639 100644
--- a/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js
+++ b/modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js
@@ -39,13 +39,6 @@ export default {
     options() {
       return this.field?.options || {};
     },
-    valueLabel() {
-      if (this.next) {
-        return this.next;
-      } else {
-        return 'None Selected';
-      }
-    },
     classList() {
       return [
         'apos-input-wrapper',

From 85a6110d18d106fdb5435f75d242e106ebcc0bf8 Mon Sep 17 00:00:00 2001
From: Jed <vjeudy@protonmail.com>
Date: Wed, 22 Jan 2025 16:12:01 +0100
Subject: [PATCH 18/18] removes comment

---
 modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss b/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
index 4a7ea3b3d3..5014fd6f04 100644
--- a/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
+++ b/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss
@@ -115,7 +115,7 @@
   }
 
   .apos-field__label {
-    margin-bottom: 7px; // Does it makes sense to update label margin for micro fields (or it's just about style?) or maybe makes more sense to update in palette since we can mix styles
+    margin-bottom: 7px;
     font-size: var(--a-type-small);
     font-weight: 500;
   }