From cb507e9530a44ba58a95ea0efec5df7f0e6d830b Mon Sep 17 00:00:00 2001
From: Kelani Tolulope <kelanik8@gmail.com>
Date: Thu, 13 Apr 2023 16:13:44 +0100
Subject: [PATCH] Remove none from fill/justify options on tab configurator

---
 .../src/components/PageBlocks/Navigation/Base.vue   | 11 ++++++-----
 .../PageBlocks/Navigation/Configurator.vue          | 10 +++++-----
 .../compose/src/components/PageBlocks/TabsBase.vue  |  7 +++----
 .../src/components/PageBlocks/TabsConfigurator.vue  | 13 ++++++-------
 .../compose/types/page-block/navigation/index.ts    |  4 ++--
 lib/js/src/compose/types/page-block/tabs.ts         |  4 ++--
 locale/en/corteza-webapp-compose/block.yaml         | 10 ++++------
 7 files changed, 28 insertions(+), 31 deletions(-)

diff --git a/client/web/compose/src/components/PageBlocks/Navigation/Base.vue b/client/web/compose/src/components/PageBlocks/Navigation/Base.vue
index 0410e804f..59319a211 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/Base.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/Base.vue
@@ -6,11 +6,12 @@
   >
     <div class="h-100 w-100 card overflow-hidden bg-transparent">
       <b-nav
-        :tabs="options.display.appearance === 'tabs'"
-        :pills="options.display.appearance === 'pills'"
-        :small="options.display.appearance === 'small'"
-        :fill="options.display.fillJustify === 'fill'"
-        :justify="options.display.fillJustify === 'justify'"
+        v-bind="{
+          tabs: options.display.appearance === 'tabs',
+          pills: options.display.appearance === 'pills',
+          small: options.display.appearance === 'small',
+          justified: options.display.justify === 'justify'
+        }"
         :align="options.display.alignment"
         class="border-0 h-100"
       >
diff --git a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
index 873797bd4..a55b65e1d 100644
--- a/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Navigation/Configurator.vue
@@ -36,13 +36,13 @@
           >
             <b-form-group
               horizontal
-              :label="$t('navigation.fillJustify')"
+              :label="$t('navigation.justify')"
             >
               <b-form-radio-group
-                v-model="options.display.fillJustify"
+                v-model="options.display.justify"
                 buttons
                 button-variant="outline-primary"
-                :options="fillJustifyOptions"
+                :options="justifyOptions"
                 size="sm"
               />
             </b-form-group>
@@ -239,9 +239,9 @@ export default {
         { value: 'right', text: this.$t('navigation.right') },
       ],
 
-      fillJustifyOptions: [
-        { value: 'fill', text: this.$t('navigation.fill') },
+      justifyOptions: [
         { value: 'justify', text: this.$t('navigation.justify') },
+        { value: 'none', text: this.$t('navigation.none') },
       ],
 
       backgroundColors: [
diff --git a/client/web/compose/src/components/PageBlocks/TabsBase.vue b/client/web/compose/src/components/PageBlocks/TabsBase.vue
index 258980dc5..0152f8771 100644
--- a/client/web/compose/src/components/PageBlocks/TabsBase.vue
+++ b/client/web/compose/src/components/PageBlocks/TabsBase.vue
@@ -21,8 +21,7 @@
       :content-class="contentClass"
       v-bind="{
         align: block.options.style.alignment,
-        fill: block.options.style.fillJustify === 'fill',
-        justified: block.options.style.fillJustify === 'justify',
+        justified: block.options.style.justify === 'justify',
         pills: block.options.style.appearance === 'pills',
         tabs: block.options.style.appearance === 'tabs',
         small: block.options.style.appearance === 'small',
@@ -125,8 +124,8 @@ export default {
 
   methods: {
     getTitleItemClass (index) {
-      const { fillJustify, alignment } = this.block.options.style
-      return `order-${index} text-truncate text-${alignment} ${fillJustify !== 'none' ? 'flex-fill' : ''}`
+      const { justify, alignment } = this.block.options.style
+      return `order-${index} text-truncate text-${alignment} ${justify !== 'none' ? 'flex-fill' : ''}`
     },
 
     getTabTitle ({ title, block = {} }, tabIndex) {
diff --git a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
index de71f30ed..ca9757b22 100644
--- a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
@@ -72,10 +72,10 @@
         cols="12"
         md="4"
       >
-        <b-form-group :label="$t('tabs.style.fillJustify.label')">
+        <b-form-group :label="$t('tabs.style.justify.label')">
           <b-form-radio-group
-            v-model="block.options.style.fillJustify"
-            :options="style.fillJustify"
+            v-model="block.options.style.justify"
+            :options="style.justifyOptions"
             buttons
             button-variant="outline-primary"
             size="sm"
@@ -279,10 +279,9 @@ export default {
           { text: this.$t('tabs.style.alignment.right'), value: 'right' },
         ],
 
-        fillJustify: [
-          { text: this.$t('tabs.style.fillJustify.fill'), value: 'fill' },
-          { text: this.$t('tabs.style.fillJustify.justify'), value: 'justify' },
-          { text: this.$t('tabs.style.fillJustify.none'), value: 'none' },
+        justifyOptions: [
+          { text: this.$t('tabs.style.justify.justify'), value: 'justify' },
+          { text: this.$t('tabs.style.justify.none'), value: 'none' },
         ],
 
         orientation: [
diff --git a/lib/js/src/compose/types/page-block/navigation/index.ts b/lib/js/src/compose/types/page-block/navigation/index.ts
index 16d8a8915..13f9bc014 100644
--- a/lib/js/src/compose/types/page-block/navigation/index.ts
+++ b/lib/js/src/compose/types/page-block/navigation/index.ts
@@ -7,7 +7,7 @@ const kind = 'Navigation'
 interface DisplayOptions {
   appearance: string;
   alignment: string;
-  fillJustify: string;
+  justify: string;
 }
 
 interface Options {
@@ -20,7 +20,7 @@ const defaults: Readonly<Options> = Object.freeze({
   display: {
     appearance: 'pills',
     alignment: 'center',
-    fillJustify: 'fill',
+    justify: 'justify',
   },
   navigationItems: [],
   magnifyOption: '',
diff --git a/lib/js/src/compose/types/page-block/tabs.ts b/lib/js/src/compose/types/page-block/tabs.ts
index d89c6b365..885fe0ae0 100644
--- a/lib/js/src/compose/types/page-block/tabs.ts
+++ b/lib/js/src/compose/types/page-block/tabs.ts
@@ -6,7 +6,7 @@ const kind = 'Tabs'
 interface Style {
   appearance: string;
   alignment: string;
-  fillJustify: string;
+  justify: string;
   orientation: string;
   position: string;
 }
@@ -26,7 +26,7 @@ const defaults: Readonly<Options> = Object.freeze({
   style: {
     appearance: 'tabs',
     alignment: 'center',
-    fillJustify: 'justify',
+    justify: 'justify',
     orientation: 'horizontal',
     position: 'start',
   },
diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
index 5b3d2cd69..532805203 100644
--- a/locale/en/corteza-webapp-compose/block.yaml
+++ b/locale/en/corteza-webapp-compose/block.yaml
@@ -586,7 +586,7 @@ navigation:
   displayOptions: Display options
   appearance: Appearance
   alignment: Alignment
-  fillJustify: Fill and Justify
+  justify: Justify
   fieldLabel: Label
   enabled: Enabled
   openIn: Open in
@@ -608,8 +608,7 @@ navigation:
   right: Right
   bottom: Bottom
   top: Top
-  fill: Fill
-  justify: Justify
+  None: None
   primary: Primary
   secondary: Secondary
   success: Success
@@ -765,9 +764,8 @@ tabs:
       left: Left
       center: Center
       right: Right
-    fillJustify:
-      label: Fill or Justify
-      fill: Fill
+    justify:
+      label: Justify
       justify: Justify
       none: None
     orientation: