From 7c7d909d811919c809736447df0f5837195605e3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 18 Jul 2023 08:56:16 +0100
Subject: [PATCH] Update validation editor setting to be full width and have
 descriptive text

---
 .../ValidationEditor/ValidationEditor.svelte  | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte
index 6c62c9f5af..6db24e8d69 100644
--- a/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationEditor.svelte
@@ -8,16 +8,29 @@
   export let componentDefinition
   export let type
 
+  const dispatch = createEventDispatcher()
   let drawer
 
-  const dispatch = createEventDispatcher()
+  $: text = getText(value)
+
   const save = () => {
     dispatch("change", value)
     drawer.hide()
   }
+
+  const getText = rules => {
+    if (!rules?.length) {
+      return "No rules set"
+    } else {
+      return `${rules.length} rule${rules.length === 1 ? "" : "s"} set`
+    }
+  }
 </script>
 
-<ActionButton on:click={drawer.show}>Configure validation</ActionButton>
+<div class="validation-editor">
+  <ActionButton on:click={drawer.show}>{text}</ActionButton>
+</div>
+
 <Drawer bind:this={drawer} title="Validation Rules">
   <svelte:fragment slot="description">
     Configure validation rules for this field.
@@ -31,3 +44,9 @@
     {componentDefinition}
   />
 </Drawer>
+
+<style>
+  .validation-editor :global(.spectrum-ActionButton) {
+    width: 100%;
+  }
+</style>