Pl-134/bug/required marker (#135)

* Read the required state to evaluate showing the required marker * Update tests * Update versions * Fix doc typo * Update version
ArthurClemens · Oct 7, 2023 · 716d3fc · 716d3fc
1 parent 6e93363
commit 716d3fc
Show file tree

Hide file tree

Showing 15 changed files with 58 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.5.4
+
+Fixed a bug where the required marker would always be displayed, regardless of the field's required state.
+
 ## 0.5.3
 
 Downgraded `phoenix_live_view` version to `0.19`; both `0.19` and `0.20` should be compatible.

diff --git a/assets/package.json b/assets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "primer-live",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "JavaScript and CSS for PrimerLive",
   "license": "MIT",
   "repository": {},

diff --git a/lib/component.ex b/lib/component.ex
@@ -2906,7 +2906,8 @@ defmodule PrimerLive.Component do
       form: form,
       field: field,
       validation_marker_class: validation_marker_class,
-      caption: caption
+      caption: caption,
+      required?: required?
     } = AttributeHelpers.common_input_attrs(assigns)
 
     classes = %{
@@ -2973,7 +2974,9 @@ defmodule PrimerLive.Component do
       end
 
     has_header_label = label && label !== "Nil"
-    has_required_marker = !is_nil(assigns.required_marker) && assigns.required_marker !== ""
+
+    show_required_marker =
+      required? && !is_nil(assigns.required_marker) && assigns.required_marker !== ""
 
     control_attributes =
       AttributeHelpers.append_attributes(rest, [
@@ -2985,7 +2988,7 @@ defmodule PrimerLive.Component do
       |> assign(:classes, classes)
       |> assign(:control_attributes, control_attributes)
       |> assign(:has_header_label, has_header_label)
-      |> assign(:has_required_marker, has_required_marker)
+      |> assign(:show_required_marker, show_required_marker)
       |> assign(:label, label)
       |> assign(:caption, caption)
 
@@ -2994,7 +2997,7 @@ defmodule PrimerLive.Component do
       <%= if @has_header_label do %>
         <div class={@classes.header}>
           <%= @label %>
-          <%= if @has_required_marker do %>
+          <%= if @show_required_marker do %>
             <span aria-hidden="true"><%= @required_marker %></span>
           <% end %>
         </div>
@@ -7152,14 +7155,9 @@ defmodule PrimerLive.Component do
   PromptDeclarationHelpers.prompt_options()
   PromptDeclarationHelpers.phx_click_touch()
   PromptDeclarationHelpers.toggle_slot("the select menu component")
-
-  attr(:is_aligned_end, :boolean,
-    default: false,
-    doc: "Aligns the menu to the end (at the right in left-to-right langages)."
-  )
+  DeclarationHelpers.is_aligned_end("the menu")
 
   attr(:is_right_aligned, :boolean, doc: "Deprecated: use `is_aligned_end`. Since 0.5.1.")
-
   attr(:is_borderless, :boolean, default: false, doc: "Removes the borders between list items.")
 
   DeclarationHelpers.class()
@@ -7791,8 +7789,7 @@ defmodule PrimerLive.Component do
   PromptDeclarationHelpers.prompt_options()
   PromptDeclarationHelpers.phx_click_touch()
   PromptDeclarationHelpers.toggle_slot("the menu component")
-
-  attr(:is_aligned_end, :boolean, default: false, doc: "Aligns the menu to the right.")
+  DeclarationHelpers.is_aligned_end("the menu")
 
   attr(:is_right_aligned, :boolean, doc: "Deprecated: use `is_aligned_end`. Since 0.5.1.")
 

diff --git a/lib/helpers/attribute_helpers.ex b/lib/helpers/attribute_helpers.ex
@@ -697,6 +697,7 @@ defmodule PrimerLive.Helpers.AttributeHelpers do
     %{
       message: message,
       valid?: valid?,
+      required?: required?,
       ignore_errors?: ignore_errors?,
       caption: caption
     } = field_state
@@ -736,6 +737,7 @@ defmodule PrimerLive.Helpers.AttributeHelpers do
     %{
       message: message,
       valid?: valid?,
+      required?: required?,
       ignore_errors?: ignore_errors?,
       show_message?: show_message?,
       validation_message_id: validation_message_id,

diff --git a/lib/helpers/declaration_helpers.ex b/lib/helpers/declaration_helpers.ex
@@ -187,6 +187,19 @@ defmodule PrimerLive.Helpers.DeclarationHelpers do
     end
   end
 
+  defmacro is_aligned_end(the_element) do
+    quote do
+      attr(:is_aligned_end, :boolean,
+        default: false,
+        doc:
+          """
+          Aligns {the_element} to the end (at the right in left-to-right languages).
+          """
+          |> String.replace("{the_element}", unquote(the_element))
+      )
+    end
+  end
+
   # link attr
 
   defmacro href do

diff --git a/mix.exs b/mix.exs
@@ -4,7 +4,7 @@ defmodule PrimerLive.MixProject do
   def project do
     [
       app: :primer_live,
-      version: "0.5.3",
+      version: "0.5.4",
       homepage_url: "https://github.com/ArthurClemens/primer_live",
       description: description(),
       package: package(),

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "primer-live",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "JavaScript and CSS for PrimerLive",
   "license": "MIT",
   "module": "./priv/static/primer-live.esm.js",

diff --git a/test/components/checkbox_group_test.exs b/test/components/checkbox_group_test.exs
@@ -79,7 +79,7 @@ defmodule PrimerLive.TestComponents.CheckboxGroupTest do
              """
              <form>
              <div class="FormControl pl-FormControl--input-group">
-             <div class="form-group-header"><label class="FormControl-label">Role</label><span aria-hidden="true">*</span></div>
+             <div class="form-group-header"><label class="FormControl-label">Role</label></div>
              <div class="FormControl-caption">Select one</div>
              <div class="pl-FormControl--input-group__container"><span class="FormControl-checkbox-wrap"><input
              name="role-caption[]" type="hidden" value="false" /><input class="FormControl-checkbox"
@@ -124,7 +124,7 @@ defmodule PrimerLive.TestComponents.CheckboxGroupTest do
              """
              <form method="post">
              <div class="FormControl pl-FormControl--input-group pl-invalid">
-             <div class="form-group-header"><label class="FormControl-label">Statuses</label><span aria-hidden="true">*</span>
+             <div class="form-group-header"><label class="FormControl-label">Statuses</label>
              </div>
              <div class="pl-FormControl--input-group__container"><span class="FormControl-checkbox-wrap pl-invalid"><input
              name="todo[statuses][]" type="hidden" value="false" /><input class="FormControl-checkbox"
@@ -177,7 +177,7 @@ defmodule PrimerLive.TestComponents.CheckboxGroupTest do
              """
              <form method="post">
              <div class="FormControl pl-FormControl--input-group pl-invalid">
-             <div class="form-group-header"><label class="FormControl-label">Statuses</label><span aria-hidden="true">*</span>
+             <div class="form-group-header"><label class="FormControl-label">Statuses</label>
              </div>
              <div class="pl-FormControl--input-group__container"><span class="FormControl-checkbox-wrap pl-invalid"><input
              name="todo[statuses][]" type="hidden" value="false" /><input class="FormControl-checkbox"

diff --git a/test/components/form_control_test.exs b/test/components/form_control_test.exs
@@ -52,7 +52,7 @@ defmodule PrimerLive.TestComponents.FormControlTest do
            |> format_html() ==
              """
              <div class="FormControl">
-             <div class="form-group-header"><label class="FormControl-label">First name</label><span aria-hidden="true">*</span></div>inputs
+             <div class="form-group-header"><label class="FormControl-label">First name</label></div>inputs
              </div>
              """
              |> format_html()
@@ -67,7 +67,7 @@ defmodule PrimerLive.TestComponents.FormControlTest do
            |> format_html() ==
              """
              <div class="FormControl">
-             <div class="form-group-header"><label class="FormControl-label">First name</label><span aria-hidden="true">*</span></div>inputs
+             <div class="form-group-header"><label class="FormControl-label">First name</label></div>inputs
              </div>
              """
              |> format_html()
@@ -167,7 +167,7 @@ defmodule PrimerLive.TestComponents.FormControlTest do
            |> format_html() ==
              """
              <div class="FormControl my-form-control group-x control-x pl-neutral">
-             <div class="form-group-header header-x"><label class="FormControl-label label-x">First name</label><span aria-hidden="true">*</span></div>inputs
+             <div class="form-group-header header-x"><label class="FormControl-label label-x">First name</label></div>inputs
              </div>
              """
              |> format_html()

diff --git a/test/components/form_group_deprecated_test.exs b/test/components/form_group_deprecated_test.exs
@@ -42,7 +42,7 @@ defmodule PrimerLive.TestComponents.FormGroupDeprecatedTest do
            |> format_html() ==
              """
              <div class="FormControl form-group">
-             <div class="form-group-header"><label class="FormControl-label">First name</label><span aria-hidden="true">*</span></div>inputs
+             <div class="form-group-header"><label class="FormControl-label">First name</label></div>inputs
              </div>
              """
              |> format_html()
@@ -57,7 +57,7 @@ defmodule PrimerLive.TestComponents.FormGroupDeprecatedTest do
            |> format_html() ==
              """
              <div class="FormControl form-group">
-             <div class="form-group-header"><label class="FormControl-label">First name</label><span aria-hidden="true">*</span></div>inputs
+             <div class="form-group-header"><label class="FormControl-label">First name</label></div>inputs
              </div>
              """
              |> format_html()
@@ -127,7 +127,7 @@ defmodule PrimerLive.TestComponents.FormGroupDeprecatedTest do
            |> format_html() ==
              """
              <div class="FormControl form-group my-form-group group-x control-x pl-neutral">
-             <div class="form-group-header header-x"><label class="FormControl-label label-x">First name</label><span aria-hidden="true">*</span></div>inputs
+             <div class="form-group-header header-x"><label class="FormControl-label label-x">First name</label></div>inputs
              </div>
              """
              |> format_html()

diff --git a/test/components/radio_group_test.exs b/test/components/radio_group_test.exs
@@ -79,7 +79,7 @@ defmodule PrimerLive.TestComponents.RadioGroupTest do
              """
              <form>
              <div class="FormControl pl-FormControl--input-group">
-             <div class="form-group-header"><label class="FormControl-label">Role</label><span aria-hidden="true">*</span></div>
+             <div class="form-group-header"><label class="FormControl-label">Role</label></div>
              <div class="FormControl-caption">Select one</div>
              <div class="pl-FormControl--input-group__container"><span class="FormControl-radio-wrap"><input
              class="FormControl-radio" id="role-caption_admin" name="role-caption" type="radio" value="admin" /><span
@@ -123,7 +123,7 @@ defmodule PrimerLive.TestComponents.RadioGroupTest do
              """
              <form method="post">
              <div class="FormControl pl-FormControl--input-group pl-invalid">
-             <div class="form-group-header"><label class="FormControl-label">Statuses</label><span aria-hidden="true">*</span>
+             <div class="form-group-header"><label class="FormControl-label">Statuses</label>
              </div>
              <div class="pl-FormControl--input-group__container"><span class="FormControl-radio-wrap pl-invalid"><input
              class="FormControl-radio" id="in-progress-derived-label" name="todo[statuses]" type="radio"
@@ -174,7 +174,7 @@ defmodule PrimerLive.TestComponents.RadioGroupTest do
              """
              <form method="post">
              <div class="FormControl pl-FormControl--input-group pl-invalid">
-             <div class="form-group-header"><label class="FormControl-label">Statuses</label><span aria-hidden="true">*</span>
+             <div class="form-group-header"><label class="FormControl-label">Statuses</label>
              </div>
              <div class="pl-FormControl--input-group__container"><span class="FormControl-radio-wrap pl-invalid"><input
              class="FormControl-radio" id="in-progress-custom-label" name="todo[statuses]" type="radio"

diff --git a/test/components/select_test.exs b/test/components/select_test.exs
@@ -350,7 +350,7 @@ defmodule PrimerLive.TestComponents.SelectTest do
              </select></div>
              <div class="FormControl-caption">Caption</div>
              <div class="FormControl">
-             <div class="form-group-header"><label class="FormControl-label" for="count">Count</label><span aria-hidden="true">*</span></div>
+             <div class="form-group-header"><label class="FormControl-label" for="count">Count</label></div>
              <div class="FormControl-select-wrap"><select class="FormControl-select FormControl-medium" id="count" name="count">
              <option value="One">One</option>
              <option value="Two">Two</option>

diff --git a/test/components/text_input_test.exs b/test/components/text_input_test.exs
@@ -219,7 +219,7 @@ defmodule PrimerLive.TestComponents.TextInputTest do
              <input class="FormControl-input FormControl-medium" type="text" />
              <div class="FormControl-caption">Caption</div>
              <div class="FormControl">
-             <div class="form-group-header"><label class="FormControl-label"></label><span aria-hidden="true">*</span></div><input
+             <div class="form-group-header"><label class="FormControl-label"></label></div><input
              class="FormControl-input FormControl-medium" type="text" />
              <div class="FormControl-caption">Caption</div>
              </div>
@@ -237,7 +237,7 @@ defmodule PrimerLive.TestComponents.TextInputTest do
            |> format_html() ==
              """
              <div class="FormControl">
-             <div class="form-group-header"><label class="FormControl-label" for="user_first_name">First name</label><span aria-hidden="true">*</span></div><input
+             <div class="form-group-header"><label class="FormControl-label" for="user_first_name">First name</label></div><input
              class="FormControl-input FormControl-medium" id="user_first_name" name="user[first_name]" type="text" />
              </div>
              """
@@ -253,7 +253,7 @@ defmodule PrimerLive.TestComponents.TextInputTest do
            |> format_html() ==
              """
              <div class="FormControl form-group">
-             <div class="form-group-header"><label class="FormControl-label" for="user_first_name">First name</label><span aria-hidden="true">*</span></div><input
+             <div class="form-group-header"><label class="FormControl-label" for="user_first_name">First name</label></div><input
              class="FormControl-input FormControl-medium" id="user_first_name" name="user[first_name]" type="text" />
              </div>
              """
@@ -269,7 +269,7 @@ defmodule PrimerLive.TestComponents.TextInputTest do
            |> format_html() ==
              """
              <div class="FormControl form-group">
-             <div class="form-group-header"><label class="FormControl-label" for="xyz">First name</label><span aria-hidden="true">*</span></div><input
+             <div class="form-group-header"><label class="FormControl-label" for="xyz">First name</label></div><input
              class="FormControl-input FormControl-medium" id="xyz" name="user[first_name]" type="text" />
              </div>
              """
@@ -293,7 +293,7 @@ defmodule PrimerLive.TestComponents.TextInputTest do
            |> format_html() ==
              """
              <div class="FormControl">
-             <div class="form-group-header"><label class="FormControl-label" for="user_first_name">Some label</label><span aria-hidden="true">*</span></div><input
+             <div class="form-group-header"><label class="FormControl-label" for="user_first_name">Some label</label></div><input
              class="FormControl-input FormControl-medium" id="user_first_name" name="user[first_name]" type="text" />
              </div>
              """
@@ -317,7 +317,7 @@ defmodule PrimerLive.TestComponents.TextInputTest do
            |> format_html() ==
              """
              <div class="FormControl form-group">
-             <div class="form-group-header"><label class="FormControl-label" for="user_first_name">Some label</label><span aria-hidden="true">*</span></div><input
+             <div class="form-group-header"><label class="FormControl-label" for="user_first_name">Some label</label></div><input
              class="FormControl-input FormControl-medium" id="user_first_name" name="user[first_name]" type="text" />
              </div>
              """
@@ -426,7 +426,7 @@ defmodule PrimerLive.TestComponents.TextInputTest do
            |> format_html() ==
              """
              <div class="FormControl pl-FormControl-disabled">
-             <div class="form-group-header"><label class="FormControl-label" for="first_name">First name</label><span aria-hidden="true">*</span></div><input
+             <div class="form-group-header"><label class="FormControl-label" for="first_name">First name</label></div><input
                class="FormControl-input FormControl-medium" disabled id="first_name" name="first_name" type="text" />
              </div>
              """
@@ -553,14 +553,14 @@ defmodule PrimerLive.TestComponents.TextInputTest do
              <div class="FormControl-caption caption-x">Caption</div>
              </div>
              <div class="FormControl group-x control-x">
-             <div class="form-group-header header-x"><label class="FormControl-label label-x"></label><span aria-hidden="true">*</span></div>
+             <div class="form-group-header header-x"><label class="FormControl-label label-x"></label></div>
              <div class="FormControl-input-wrap FormControl-input-wrap--leadingVisual input_wrap-x"><span
              class="FormControl-input-leadingVisualWrap"><svg class="octicon" xmlns="http://www.w3.org/2000/svg" width="16"
              height="16" viewBox="0 0 16 16">STRIPPED_SVG_PATHS</svg></span><input
              class="FormControl-input FormControl-medium input-x my-text-input" type="text" /></div>
              </div>
              <div class="FormControl group-x control-x">
-             <div class="form-group-header header-x"><label class="FormControl-label label-x"></label><span aria-hidden="true">*</span></div>
+             <div class="form-group-header header-x"><label class="FormControl-label label-x"></label></div>
              <div class="FormControl-input-wrap FormControl-input-wrap--trailingAction input_wrap-x"><input
              class="FormControl-input FormControl-medium input-x my-text-input" type="text" /><span
              class="FormControl-input-trailingAction"><button aria-label="Clear" class="btn-octicon" type="button"><span class="pl-button__content"><svg