Merge pull request #1192 from ItzNotABug/add-helper-text-to-attribute…

…-creation-modal Add Helper Text to Attribute Creation Modal
appwrite · Nov 26, 2024 · 4623e8e · 4623e8e
2 parents c7560e3 + 32e18ad
commit 4623e8e
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 58 deletions.
diff --git a/...t-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte b/...t-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
@@ -77,20 +77,28 @@
     $: handleDefaultState($required || $array);
 </script>
 
-<InputNumber
-    id="min"
-    label="Min"
-    placeholder="Enter size"
-    bind:value={data.min}
-    step="any"
-    required={editing} />
-<InputNumber
-    id="max"
-    label="Max"
-    placeholder="Enter size"
-    bind:value={data.max}
-    step="any"
-    required={editing} />
+<div>
+    <ul class="u-flex u-gap-16">
+        <li class="u-flex-basis-50-percent">
+            <InputNumber
+                id="min"
+                label="Min"
+                placeholder="Enter size"
+                bind:value={data.min}
+                step="any"
+                required={editing} />
+        </li>
+        <li class="u-flex-basis-50-percent">
+            <InputNumber
+                id="max"
+                label="Max"
+                placeholder="Enter size"
+                bind:value={data.max}
+                step="any"
+                required={editing} />
+        </li>
+    </ul>
+</div>
 <InputNumber
     id="default"
     label="Default value"

diff --git a/...[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte b/...[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
@@ -77,18 +77,27 @@
     $: handleDefaultState($required || $array);
 </script>
 
-<InputNumber
-    id="min"
-    label="Min"
-    placeholder="Enter size"
-    bind:value={data.min}
-    required={editing} />
-<InputNumber
-    id="max"
-    label="Max"
-    placeholder="Enter size"
-    bind:value={data.max}
-    required={editing} />
+<div>
+    <ul class="u-flex u-gap-16">
+        <li class="u-flex-basis-50-percent">
+            <InputNumber
+                id="min"
+                label="Min"
+                placeholder="Enter size"
+                bind:value={data.min}
+                required={editing} />
+        </li>
+
+        <li class="u-flex-basis-50-percent">
+            <InputNumber
+                id="max"
+                label="Max"
+                placeholder="Enter size"
+                bind:value={data.max}
+                required={editing} />
+        </li>
+    </ul>
+</div>
 <InputNumber
     id="default"
     label="Default value"

diff --git a/...ect]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte b/...ect]/databases/database-[database]/collection-[collection]/attributes/relationship.svelte
@@ -157,30 +157,32 @@
     </ul>
 </li>
 
-<InputSelectSearch
-    id="related"
-    label="Related Collection"
-    name="collections"
-    bind:search
-    bind:value={data.relatedCollection}
-    required
-    interactiveOutput={!editing}
-    placeholder="Select a collection"
-    disabled={editing}
-    options={collections?.map((n) => ({ value: n.$id, label: n.$id, data: [n.name] })) ?? []}
-    on:select={updateKeyName}
-    let:option={o}>
-    <SelectSearchItem data={o.data}>
-        {o.label}
-    </SelectSearchItem>
-    <svelte:fragment slot="output" let:option={o}>
-        <output class="input-text" class:is-read-only={editing}>
-            <SelectSearchItem data={o.data}>
-                {o.label}
-            </SelectSearchItem>
-        </output>
-    </svelte:fragment>
-</InputSelectSearch>
+<div>
+    <InputSelectSearch
+        id="related"
+        label="Related Collection"
+        name="collections"
+        bind:search
+        bind:value={data.relatedCollection}
+        required
+        interactiveOutput={!editing}
+        placeholder="Select a collection"
+        disabled={editing}
+        options={collections?.map((n) => ({ value: n.$id, label: n.$id, data: [n.name] })) ?? []}
+        on:select={updateKeyName}
+        let:option={o}>
+        <SelectSearchItem data={o.data}>
+            {o.label}
+        </SelectSearchItem>
+        <svelte:fragment slot="output" let:option={o}>
+            <output class="input-text" class:is-read-only={editing}>
+                <SelectSearchItem data={o.data}>
+                    {o.label}
+                </SelectSearchItem>
+            </output>
+        </svelte:fragment>
+    </InputSelectSearch>
+</div>
 
 {#if data?.relatedCollection}
     <div>
@@ -192,13 +194,11 @@
             autofocus
             required />
 
-        <div class="u-flex u-gap-4 u-margin-block-start-8 u-small u-cross-center">
+        <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
             <span
                 class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
                 aria-hidden="true" />
-            <span class="text u-line-height-1-5">
-                Allowed characters: alphanumeric, hyphen, non-leading underscore, period
-            </span>
+            <span class="text u-line-height-1-5">Allowed characters: a-z, A-Z, 0-9, -, .</span>
         </div>
     </div>
     {#if way === 'two'}
@@ -211,12 +211,13 @@
                 required
                 readonly={editing} />
 
-            <div class="u-flex u-gap-4 u-margin-block-start-8 u-small u-cross-center">
+            <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
                 <span
                     class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
                     aria-hidden="true" />
                 <span class="text u-line-height-1-5">
-                    Allowed characters: alphanumeric, hyphen, non-leading underscore, period
+                    Allowed characters: a-z, A-Z, 0-9, -, . Once created, attribute key cannot be
+                    adjusted to maintain data integrity.
                 </span>
             </div>
         </div>

diff --git a/...ct-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte b/...ct-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
@@ -90,12 +90,12 @@
                     autofocus
                     required />
 
-                <div class="u-flex u-gap-4 u-margin-block-start-8 u-small u-cross-center">
+                <div class="u-flex u-gap-4 u-margin-block-start-8 u-small">
                     <span
                         class="icon-info u-cross-center u-margin-block-start-2 u-line-height-1 u-icon-small"
                         aria-hidden="true" />
                     <span class="text u-line-height-1-5">
-                        Allowed characters: alphanumeric, hyphen, non-leading underscore, period
+                        Allowed characters: alphanumeric, hyphen, non-leading underscore, period.
                     </span>
                 </div>
             </div>