From 923c2a7ee20c22fd8554ab8ccf85ce30b004e610 Mon Sep 17 00:00:00 2001
From: taitus <sebastia.roig@gmail.com>
Date: Wed, 30 Mar 2022 16:27:30 +0200
Subject: [PATCH] Check labels styles

We are use a display: block style for labels containing check boxes inside
them, and the label has a width of 100%.

This means that clicking on the blank space on the right of the label text
will check/uncheck the checkbox. To avoid this behaviour we modify the
"display" attribute of the labels.

In order to prevent unexpected behaviour in terms_of_service form labels,
we add specific css for this case when define a checkbox within the
.actions class.
---
 app/assets/stylesheets/layout.scss       |  4 ++++
 app/assets/stylesheets/mixins/forms.scss |  5 +++++
 lib/consul_form_builder.rb               |  5 ++++-
 spec/lib/consul_form_builder_spec.rb     | 11 ++++++++++-
 4 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index d26617846..b4eecfd5f 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1063,6 +1063,10 @@ form {
     line-height: $line-height;
   }
 
+  .checkbox-label {
+    display: table;
+  }
+
   fieldset legend {
     font-weight: bold;
   }
diff --git a/app/assets/stylesheets/mixins/forms.scss b/app/assets/stylesheets/mixins/forms.scss
index c321b6acb..3a6b85df1 100644
--- a/app/assets/stylesheets/mixins/forms.scss
+++ b/app/assets/stylesheets/mixins/forms.scss
@@ -170,6 +170,11 @@
     @include breakpoint(medium) {
       width: 75%;
     }
+
+    label {
+      margin-left: auto;
+      margin-right: auto;
+    }
   }
 }
 
diff --git a/lib/consul_form_builder.rb b/lib/consul_form_builder.rb
index 5eb292079..e9868185e 100644
--- a/lib/consul_form_builder.rb
+++ b/lib/consul_form_builder.rb
@@ -25,7 +25,10 @@ class ConsulFormBuilder < FoundationRailsHelper::FormBuilder
     else
       label = tag.span sanitize(label_text(attribute, options[:label])), class: "checkbox"
 
-      super(attribute, options.merge(label: label, label_options: label_options_for(options)))
+      super(attribute, options.merge(
+        label: label,
+        label_options: { class: "checkbox-label" }.merge(label_options_for(options))
+      ))
     end
   end
 
diff --git a/spec/lib/consul_form_builder_spec.rb b/spec/lib/consul_form_builder_spec.rb
index 7cc39d7c5..d8d9adf5f 100644
--- a/spec/lib/consul_form_builder_spec.rb
+++ b/spec/lib/consul_form_builder_spec.rb
@@ -4,7 +4,7 @@ describe ConsulFormBuilder do
   before do
     dummy_model = Class.new do
       include ActiveModel::Model
-      attr_accessor :title, :quality
+      attr_accessor :title, :quality, :published
     end
 
     stub_const("DummyModel", dummy_model)
@@ -75,6 +75,15 @@ describe ConsulFormBuilder do
     end
   end
 
+  describe "#check_box" do
+    it "adds a checkbox-label class to the label by default" do
+      render builder.check_box(:published)
+
+      expect(page).to have_css "label", count: 1
+      expect(page).to have_css ".checkbox-label"
+    end
+  end
+
   attr_reader :content
 
   def render(content)