Merge pull request #37 from ministryofjustice/inputmode

Change input number to text, and add inputmode
ministryofjustice · Aug 28, 2019 · 4fb994b · 4fb994b
2 parents 53ca7e7 + 65eecbb
commit 4fb994b
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 56 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,22 @@
+# 4.1.0
+
+* Markup will produce inputs with `type="text" inputmode="numeric"`.  
+These are semantically correct and provides a better experience in most browsers, including mobile. More details in [this thread](https://github.com/alphagov/govuk-frontend/issues/1449#issuecomment-504006087)
+
+This change **might** break your code if you target the input (in javascript, CSS or cucumber for example) by `type="number"`.
+
+# 4.0.1
+
+* Allow alternative i18n locales. [Read more details](https://github.com/ministryofjustice/gov_uk_date_fields/pull/36)
+
+# 4.0.0
+
+* **BREAKING CHANGE**: Support for new design system
+* The gem will produce markup and style classes in line with the new [design system](https://design-system.service.gov.uk/components/date-input/)
+* The gem will pick all the strings from i18n locales, and the ability to pass hardcoded strings has been removed
+* There is no longer an option to show a 'today' button, and thus all related javascript has been removed
+* Removed the stylesheet file, as all the styling is now coming from the design system
+
+# Older versions
+
+Please refer to the [releases page](https://github.com/ministryofjustice/gov_uk_date_fields/releases) and the [commits history](https://github.com/ministryofjustice/gov_uk_date_fields/commits/master).
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,47 +1,47 @@
 PATH
   remote: .
   specs:
-    gov_uk_date_fields (4.0.1)
-      rails (>= 5.0)
+    gov_uk_date_fields (4.1.0)
+      rails (>= 5.0.7.2)
 
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (5.0.2)
-      actionpack (= 5.0.2)
+    actioncable (5.0.7.2)
+      actionpack (= 5.0.7.2)
       nio4r (>= 1.2, < 3.0)
       websocket-driver (~> 0.6.1)
-    actionmailer (5.0.2)
-      actionpack (= 5.0.2)
-      actionview (= 5.0.2)
-      activejob (= 5.0.2)
+    actionmailer (5.0.7.2)
+      actionpack (= 5.0.7.2)
+      actionview (= 5.0.7.2)
+      activejob (= 5.0.7.2)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (5.0.2)
-      actionview (= 5.0.2)
-      activesupport (= 5.0.2)
+    actionpack (5.0.7.2)
+      actionview (= 5.0.7.2)
+      activesupport (= 5.0.7.2)
       rack (~> 2.0)
       rack-test (~> 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.2)
-    actionview (5.0.2)
-      activesupport (= 5.0.2)
+    actionview (5.0.7.2)
+      activesupport (= 5.0.7.2)
       builder (~> 3.1)
       erubis (~> 2.7.0)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.0.3)
-    activejob (5.0.2)
-      activesupport (= 5.0.2)
+    activejob (5.0.7.2)
+      activesupport (= 5.0.7.2)
       globalid (>= 0.3.6)
-    activemodel (5.0.2)
-      activesupport (= 5.0.2)
-    activerecord (5.0.2)
-      activemodel (= 5.0.2)
-      activesupport (= 5.0.2)
+    activemodel (5.0.7.2)
+      activesupport (= 5.0.7.2)
+    activerecord (5.0.7.2)
+      activemodel (= 5.0.7.2)
+      activesupport (= 5.0.7.2)
       arel (~> 7.0)
-    activesupport (5.0.2)
+    activesupport (5.0.7.2)
       concurrent-ruby (~> 1.0, >= 1.0.2)
-      i18n (~> 0.7)
+      i18n (>= 0.7, < 2)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
     ansi (1.5.0)
@@ -64,7 +64,7 @@ GEM
       mini_mime (>= 0.1.1)
     metaclass (0.0.4)
     method_source (0.8.2)
-    mini_mime (1.0.1)
+    mini_mime (1.0.2)
     mini_portile2 (2.4.0)
     minitest (5.11.3)
     minitest-reporters (1.1.7)
@@ -74,8 +74,8 @@ GEM
       ruby-progressbar
     mocha (1.1.0)
       metaclass (~> 0.0.1)
-    nio4r (2.3.1)
-    nokogiri (1.10.1)
+    nio4r (2.5.0)
+    nokogiri (1.10.4)
       mini_portile2 (~> 2.4.0)
     pg (0.18.4)
     pry (0.11.0)
@@ -87,17 +87,17 @@ GEM
     rack (2.0.6)
     rack-test (0.6.3)
       rack (>= 1.0)
-    rails (5.0.2)
-      actioncable (= 5.0.2)
-      actionmailer (= 5.0.2)
-      actionpack (= 5.0.2)
-      actionview (= 5.0.2)
-      activejob (= 5.0.2)
-      activemodel (= 5.0.2)
-      activerecord (= 5.0.2)
-      activesupport (= 5.0.2)
-      bundler (>= 1.3.0, < 2.0)
-      railties (= 5.0.2)
+    rails (5.0.7.2)
+      actioncable (= 5.0.7.2)
+      actionmailer (= 5.0.7.2)
+      actionpack (= 5.0.7.2)
+      actionview (= 5.0.7.2)
+      activejob (= 5.0.7.2)
+      activemodel (= 5.0.7.2)
+      activerecord (= 5.0.7.2)
+      activesupport (= 5.0.7.2)
+      bundler (>= 1.3.0)
+      railties (= 5.0.7.2)
       sprockets-rails (>= 2.0.0)
     rails-controller-testing (1.0.1)
       actionpack (~> 5.x)
@@ -108,13 +108,13 @@ GEM
       nokogiri (~> 1.6)
     rails-html-sanitizer (1.0.4)
       loofah (~> 2.2, >= 2.2.2)
-    railties (5.0.2)
-      actionpack (= 5.0.2)
-      activesupport (= 5.0.2)
+    railties (5.0.7.2)
+      actionpack (= 5.0.7.2)
+      activesupport (= 5.0.7.2)
       method_source
       rake (>= 0.8.7)
       thor (>= 0.18.1, < 2.0)
-    rake (12.3.2)
+    rake (12.3.3)
     ruby-progressbar (1.8.1)
     sprockets (3.7.2)
       concurrent-ruby (~> 1.0)

diff --git a/README.md b/README.md
@@ -358,9 +358,10 @@ the following HTML with gem version >= 3.1.0 and < 4.0.0:
 
 and the following HTML with gem version >= 4.0.0: [html fixture](test/dummy/test/fixtures/files/date_fields_no_error.html)
 
-See other examples in the file `test/form_fields_test.rb
-`
+See other examples in the file `test/form_fields_test.rb`
+
+Please note, version 4.0.0 and 4.0.1 will produce inputs with `type="number"` whereas versions >= 4.1.0 will produce inputs with `type="text" inputmode="numeric"`. These are semantically correct and provides a better experience in most browsers, including mobile.
+
 ## Licencing
 
 This project rocks and uses MIT-LICENSE.
-
diff --git a/gov_uk_date_fields.gemspec b/gov_uk_date_fields.gemspec
@@ -20,5 +20,5 @@ Gem::Specification.new do |s|
   s.require_paths = ["lib"]
   s.test_files = Dir["test/**/*"]
 
-  s.add_dependency 'rails', '>= 5.0'
+  s.add_dependency 'rails', '>= 5.0.7.2'
 end
diff --git a/lib/gov_uk_date_fields/form_fields.rb b/lib/gov_uk_date_fields/form_fields.rb
@@ -51,7 +51,7 @@ def generate_input_for(name, value, width: 2)
         content_tag(:div, class: 'govuk-form-group') do
           %Q|
             <label class="govuk-label govuk-date-input__label" for="#{html_id(name)}">#{localized_label(name)}</label>
-            <input class="#{css_class}" id="#{html_id(name)}" name="#{html_name(name)}" value="#{value}" type="number" pattern="[0-9]*">
+            <input class="#{css_class}" id="#{html_id(name)}" name="#{html_name(name)}" value="#{value}" type="text" inputmode="numeric" pattern="[0-9]*">
           |.html_safe
         end
       end

diff --git a/lib/gov_uk_date_fields/version.rb b/lib/gov_uk_date_fields/version.rb
@@ -1,3 +1,3 @@
 module GovUkDateFields
-  VERSION = "4.0.1"
+  VERSION = "4.1.0"
 end
diff --git a/test/dummy/test/controllers/employees_controller_test.rb b/test/dummy/test/controllers/employees_controller_test.rb
@@ -74,7 +74,8 @@ class EmployeesControllerTest < ActionController::TestCase
     get :edit, params: { id: @employee }
 
     assert_select 'input#employee_dob_dd' do
-      assert_select '[type=?]','number'
+      assert_select '[type=?]','text'
+      assert_select '[inputmode=?]','numeric'
       assert_select '[pattern=?]','[0-9]*'
     end
   end

diff --git a/test/dummy/test/fixtures/files/date_fields_error.html b/test/dummy/test/fixtures/files/date_fields_error.html
@@ -13,23 +13,23 @@ <h1 class="govuk-fieldset__heading">
                     <label class="govuk-label govuk-date-input__label" for="employee_dob_dd">
                         Day
                     </label>
-                    <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="employee_dob_dd" name="employee[dob_dd]" value="" type="number" pattern="[0-9]*">
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="employee_dob_dd" name="employee[dob_dd]" value="" type="text" inputmode="numeric" pattern="[0-9]*">
                 </div>
             </div>
             <div class="govuk-date-input__item">
                 <div class="govuk-form-group">
                     <label class="govuk-label govuk-date-input__label" for="employee_dob_mm">
                         Month
                     </label>
-                    <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="employee_dob_mm" name="employee[dob_mm]" value="" type="number" pattern="[0-9]*">
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2 govuk-input--error" id="employee_dob_mm" name="employee[dob_mm]" value="" type="text" inputmode="numeric" pattern="[0-9]*">
                 </div>
             </div>
             <div class="govuk-date-input__item">
                 <div class="govuk-form-group">
                     <label class="govuk-label govuk-date-input__label" for="employee_dob_yyyy">
                         Year
                     </label>
-                    <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="employee_dob_yyyy" name="employee[dob_yyyy]" value="" type="number" pattern="[0-9]*">
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-4 govuk-input--error" id="employee_dob_yyyy" name="employee[dob_yyyy]" value="" type="text" inputmode="numeric" pattern="[0-9]*">
                 </div>
             </div>
         </div>

diff --git a/test/dummy/test/fixtures/files/date_fields_no_error.html b/test/dummy/test/fixtures/files/date_fields_no_error.html
@@ -12,23 +12,23 @@ <h1 class="govuk-fieldset__heading">
                     <label class="govuk-label govuk-date-input__label" for="employee_dob_dd">
                         Day
                     </label>
-                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="employee_dob_dd" name="employee[dob_dd]" value="7" type="number" pattern="[0-9]*">
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="employee_dob_dd" name="employee[dob_dd]" value="7" type="text" inputmode="numeric" pattern="[0-9]*">
                 </div>
             </div>
             <div class="govuk-date-input__item">
                 <div class="govuk-form-group">
                     <label class="govuk-label govuk-date-input__label" for="employee_dob_mm">
                         Month
                     </label>
-                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="employee_dob_mm" name="employee[dob_mm]" value="12" type="number" pattern="[0-9]*">
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="employee_dob_mm" name="employee[dob_mm]" value="12" type="text" inputmode="numeric" pattern="[0-9]*">
                 </div>
             </div>
             <div class="govuk-date-input__item">
                 <div class="govuk-form-group">
                     <label class="govuk-label govuk-date-input__label" for="employee_dob_yyyy">
                         Year
                     </label>
-                    <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="employee_dob_yyyy" name="employee[dob_yyyy]" value="1963" type="number" pattern="[0-9]*">
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="employee_dob_yyyy" name="employee[dob_yyyy]" value="1963" type="text" inputmode="numeric" pattern="[0-9]*">
                 </div>
             </div>
         </div>

diff --git a/test/dummy/test/fixtures/files/date_fields_no_heading.html b/test/dummy/test/fixtures/files/date_fields_no_heading.html
@@ -10,23 +10,23 @@
                     <label class="govuk-label govuk-date-input__label" for="employee_dob_dd">
                         Day
                     </label>
-                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="employee_dob_dd" name="employee[dob_dd]" value="7" type="number" pattern="[0-9]*">
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="employee_dob_dd" name="employee[dob_dd]" value="7" type="text" inputmode="numeric" pattern="[0-9]*">
                 </div>
             </div>
             <div class="govuk-date-input__item">
                 <div class="govuk-form-group">
                     <label class="govuk-label govuk-date-input__label" for="employee_dob_mm">
                         Month
                     </label>
-                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="employee_dob_mm" name="employee[dob_mm]" value="12" type="number" pattern="[0-9]*">
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="employee_dob_mm" name="employee[dob_mm]" value="12" type="text" inputmode="numeric" pattern="[0-9]*">
                 </div>
             </div>
             <div class="govuk-date-input__item">
                 <div class="govuk-form-group">
                     <label class="govuk-label govuk-date-input__label" for="employee_dob_yyyy">
                         Year
                     </label>
-                    <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="employee_dob_yyyy" name="employee[dob_yyyy]" value="1963" type="number" pattern="[0-9]*">
+                    <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="employee_dob_yyyy" name="employee[dob_yyyy]" value="1963" type="text" inputmode="numeric" pattern="[0-9]*">
                 </div>
             </div>
         </div>