Merge pull request #1323 from naymspace/feature/improve-alignment

Improve alignment documentation

Author: krns

demo/lib/demo_web/live/invoice_live.ex

@@ -33,8 +33,7 @@ defmodule DemoWeb.InvoiceLive do
       },
       amount: %{
         module: Backpex.Fields.Currency,
-        label: "Amount",
-        align: :right
+        label: "Amount"
       }
     ]
   end

demo/lib/demo_web/live/post_live.ex

@@ -110,7 +110,8 @@ defmodule DemoWeb.PostLive do
         module: Backpex.Fields.Textarea,
         label: "Body",
         rows: 10,
-        except: [:index]
+        except: [:index, :resource_action],
+        align_label: :center
       },
       published: %{
         module: Backpex.Fields.Boolean,
@@ -122,8 +123,7 @@ defmodule DemoWeb.PostLive do
         module: Backpex.Fields.Boolean,
         label: "Show likes",
         select: dynamic([post: p], fragment("? > 0", p.likes)),
-        align: :center,
-        except: [:index, :show]
+        except: [:index, :resource_action, :show]
       },
       likes: %{
         module: Backpex.Fields.Number,

demo/lib/demo_web/live/product_live.ex

@@ -51,8 +51,7 @@ defmodule DemoWeb.ProductLive do
           assigns ->
             ~H"<p>{Backpex.HTML.pretty_value(@value)}</p>"
         end,
-        except: [:index, :resource_action],
-        align: :center
+        except: [:index, :resource_action]
       },
       name: %{
         module: Backpex.Fields.Text,

demo/lib/demo_web/live/user_live.ex

@@ -77,7 +77,7 @@ defmodule DemoWeb.UserLive do
           assigns ->
             ~H'<img class="h-10 w-auto" src={file_url(@value)} />'
         end,
-        align: :center
+        align_label: :center
       },
       username: %{
         module: Backpex.Fields.Text,

guides/fields/alignment.md

@@ -1,10 +1,10 @@
 # Alignment
 
-It is possible to align the fields of a resource in the index view and the labels of the fields in the edit view.
+It is possible to align the field values of a resource on index views and the labels of the fields on edit views.
 
-## Field Alignment (Index View)
+## Field Alignment (Index Views)
 
-You can align the fields of a resource in the index view by setting the `align` option in the field configuration.
+You can align the field values of a resource on index views by setting the `align` option in the field configuration.
 
 The following alignments are supported: `:left`, `:center` and `:right`
 
@@ -14,19 +14,19 @@ The following alignments are supported: `:left`, `:center` and `:right`
 @impl Backpex.LiveResource
 def fields do
 [
-    %{
-        ...,
-        align: :center
-    }
+  %{
+    ...,
+    align: :center
+  }
 ]
 end
 ```
 
-The example above will align the field to the center in the index view.
+The example above will center the field value on the index view.
 
-## Label Alignment (Edit View)
+## Label Alignment (Form Views)
 
-You can align the labels of the fields in the edit view by setting the `label_align` option in the field configuration.
+You can align the labels of the fields on form views by setting the `label_align` option in the field configuration.
 
 The following label orientations are supported: `:top`, `:center` and `:bottom`.
 
@@ -35,12 +35,12 @@ The following label orientations are supported: `:top`, `:center` and `:bottom`.
 @impl Backpex.LiveResource
 def fields do
 [
-    %{
-        ...,
-        align_label: :top
-    }
+  %{
+    ...,
+    align_label: :top
+  }
 ]
 end
 ```
 
-The example above will align the label to the top in the edit view.
+The example above will align the label to the top on the form view.

lib/backpex/field.ex

@@ -34,11 +34,11 @@ defmodule Backpex.Field do
       type: :atom
     ],
     align: [
-      doc: "Align the fields of a resource in the index view.",
+      doc: "Align the field value on index views.",
       type: {:in, [:left, :center, :right]}
     ],
     align_label: [
-      doc: "Align the labels of the fields in the edit view.",
+      doc: "Align the label of the field on form views.",
       type: {:or, [{:in, [:top, :center, :bottom]}, {:fun, 1}]}
     ],
     searchable: [

lib/backpex/fields/upload.ex

@@ -379,7 +379,7 @@ defmodule Backpex.Fields.Upload do
                   ~H'<p><%= Backpex.HTML.pretty_value(@value) %></p>'
               end,
               except: [:index, :resource_action],
-              align: :center
+              align_label: :center
             },
             ...
           ]