Misc fixes (#10345)

* Fix some issues with component and screen settings layout

* Fix issue with component setting labels when multi-line

* Remove early termination of form validation when encountering an errored field

* Update free logo badge to be a sticky footer

* Close side panels when clicking on links

packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionEditor.svelte

@@ -90,6 +90,7 @@
 
 <style>
   .action-count {
+    padding-top: 6px;
     padding-bottom: var(--spacing-s);
     font-weight: 600;
   }

packages/builder/src/components/design/settings/controls/PropertyControl.svelte

@@ -81,7 +81,9 @@
   class:highlighted={highlighted && nullishValue}
 >
   {#if label && !labelHidden}
-    <Label size="M">{label}</Label>
+    <div class="label">
+      <Label size="M">{label}</Label>
+    </div>
   {/if}
   <div id={`${key}-prop-control`} class="control">
     <svelte:component
@@ -109,7 +111,7 @@
     position: relative;
     display: grid;
     grid-template-columns: 90px 1fr;
-    align-items: center;
+    align-items: start;
     transition: background 130ms ease-out, border-color 130ms ease-out;
     border-left: 4px solid transparent;
     margin: 0 calc(-1 * var(--spacing-xl));
@@ -123,6 +125,10 @@
     background: var(--spectrum-global-color-gray-300);
     border-color: var(--spectrum-global-color-static-red-600);
   }
+  .label {
+    margin-top: 16px;
+    transform: translateY(-50%);
+  }
   .control {
     position: relative;
   }

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte

@@ -124,7 +124,7 @@
       label: "Navigation",
       control: Toggle,
       props: {
-        text: "Show navigation",
+        text: "Show nav",
         disabled: !!$selectedScreen.layoutId,
       },
     },

packages/client/manifest.json

@@ -4462,10 +4462,8 @@
             ]
           },
           {
-            "label": "On click",
             "type": "event",
             "label": "On click",
-            "labelHidden": true,
             "key": "onClickTitleButton",
             "nested": true,
             "dependsOn": {

packages/client/src/components/ClientApp.svelte

@@ -16,6 +16,7 @@
     themeStore,
     appStore,
     devToolsStore,
+    environmentStore,
   } from "stores"
   import NotificationDisplay from "components/overlay/NotificationDisplay.svelte"
   import ConfirmationDisplay from "components/overlay/ConfirmationDisplay.svelte"
@@ -34,6 +35,8 @@
   import KeyboardManager from "components/preview/KeyboardManager.svelte"
   import DevToolsHeader from "components/devtools/DevToolsHeader.svelte"
   import DevTools from "components/devtools/DevTools.svelte"
+  import FreeFooter from "components/FreeFooter.svelte"
+  import licensing from "../licensing"
 
   // Provide contexts
   setContext("sdk", SDK)
@@ -186,6 +189,10 @@
                       <DevTools />
                     {/if}
                   </div>
+
+                  {#if !$builderStore.inBuilder && licensing.logoEnabled() && $environmentStore.cloud}
+                    <FreeFooter />
+                  {/if}
                 </div>
 
                 <!-- Preview and dev tools utilities  -->

packages/client/src/components/FreeFooter.svelte

@@ -0,0 +1,34 @@
+<script>
+  import { Link } from "@budibase/bbui"
+</script>
+
+<div class="free-footer">
+  <Link
+    href="https://www.budibase.com/?utm_source=budibase-apps-public-screens&utm_medium=badge&utm_campaign=made-in-budibase"
+    target="_blank"
+  >
+    Made with <span>Budibase</span>
+  </Link>
+</div>
+
+<style>
+  .free-footer {
+    flex: 0 0 auto;
+    padding: 16px 20px;
+    border-top: 1px solid var(--spectrum-global-color-gray-300);
+    background: var(--spectrum-alias-background-color-primary);
+    display: flex;
+    justify-content: flex-end;
+  }
+  .free-footer :global(.spectrum-Link) {
+    text-decoration: none;
+    color: var(--spectrum-global-color-gray-900);
+    transition: color 130ms ease-out;
+  }
+  .free-footer :global(.spectrum-Link):hover {
+    color: var(--spectrum-global-color-blue-400);
+  }
+  span {
+    font-weight: bold;
+  }
+</style>

packages/client/src/components/FreeLogo.svelte

@@ -1,42 +0,0 @@
-<script>
-  import { Link } from "@budibase/bbui"
-</script>
-
-<Link
-  href="https://www.budibase.com/?utm_source=budibase-apps-public-screens&utm_medium=badge&utm_campaign=made-in-budibase"
-  target="_blank"
->
-  <div>
-    <img src="https://i.imgur.com/Xhdt1YP.png" alt="Budibase" />
-    <p>Made with Budibase</p>
-  </div>
-</Link>
-
-<style>
-  div {
-    position: fixed;
-    right: 20px;
-    bottom: 20px;
-    padding: 10px;
-    border-radius: 5px;
-    background: var(--spectrum-alias-background-color-primary);
-    z-index: 999999 !important;
-    visibility: visible !important;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid;
-    border-color: var(--spectrum-global-color-gray-300) !important;
-    height: 45px;
-  }
-
-  p {
-    text-decoration: none;
-    color: var(--spectrum-global-color-gray-900);
-  }
-
-  img {
-    height: 20px;
-    margin-right: 10px;
-  }
-</style>

packages/client/src/components/app/Layout.svelte

@@ -5,8 +5,6 @@
   import { FieldTypes } from "constants"
   import active from "svelte-spa-router/active"
   import { RoleUtils } from "@budibase/frontend-core"
-  import FreeLogo from "../FreeLogo.svelte"
-  import licensing from "../../licensing"
 
   const sdk = getContext("sdk")
   const {
@@ -15,7 +13,6 @@
     linkable,
     builderStore,
     currentRole,
-    environmentStore,
     sidePanelStore,
   } = sdk
   const component = getContext("component")
@@ -237,11 +234,6 @@
         </div>
       </div>
     {/if}
-
-    {#if !$builderStore.inBuilder && licensing.logoEnabled() && $environmentStore.cloud}
-      <FreeLogo />
-    {/if}
-
     <div class="main-wrapper">
       <div class="main size--{pageWidthClass}">
         <slot />

packages/client/src/components/app/Link.svelte

@@ -1,7 +1,8 @@
 <script>
   import { getContext } from "svelte"
 
-  const { linkable, styleable, builderStore } = getContext("sdk")
+  const { linkable, styleable, builderStore, sidePanelStore } =
+    getContext("sdk")
   const component = getContext("component")
 
   export let url
@@ -103,6 +104,7 @@
         class:italic
         class:underline
         class="align--{align || 'left'} size--{size || 'M'}"
+        on:click={sidePanelStore.actions.close}
       >
         {componentText}
       </a>

packages/client/src/components/app/forms/InnerForm.svelte

@@ -221,9 +221,17 @@
       return fieldInfo
     },
     validate: () => {
-      return fields
+      const stepFields = fields.filter(
-        .filter(field => get(field).step === get(currentStep))
+        field => get(field).step === get(currentStep)
-        .every(field => get(field).fieldApi.validate())
+      )
+      // We want to validate every field (even if validation fails early) to
+      // ensure that all fields are populated with errors if invalid
+      let valid = true
+      stepFields.forEach(field => {
+        const fieldValid = get(field).fieldApi.validate()
+        valid = valid && fieldValid
+      })
+      return valid
     },
     reset: () => {
       // Reset the form by resetting each individual field
@@ -275,7 +283,7 @@
 
       // Skip if the value is the same
       if (!skipCheck && fieldState.value === value) {
-        return false
+        return true
       }
 
       // Update field state

packages/client/src/components/context/DeviceBindingsProvider.svelte

@@ -21,11 +21,11 @@
   }
 
   onMount(() => {
-    resizeObserver.observe(document.getElementById("clip-root"))
+    resizeObserver.observe(document.getElementById("app-body"))
   })
 
   onDestroy(() => {
-    resizeObserver.unobserve(document.getElementById("clip-root"))
+    resizeObserver.unobserve(document.getElementById("app-body"))
   })
 </script>