From b1fac6700cbad7e26b11ab7d0333e50b1ae25a3c Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Mon, 4 Feb 2019 11:41:01 +0000 Subject: [PATCH 1/3] Year example should be 4 characters wide --- src/components/date-input/date-input.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/date-input/date-input.yaml b/src/components/date-input/date-input.yaml index f7f96645ef..8c0acfed90 100644 --- a/src/components/date-input/date-input.yaml +++ b/src/components/date-input/date-input.yaml @@ -212,5 +212,5 @@ examples: autocomplete: bday-month - name: year - classes: govuk-input--width-2 + classes: govuk-input--width-4 autocomplete: bday-year From 5559d1d816d5e33bc541c6ff783221cc88f1f009 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Mon, 4 Feb 2019 13:14:12 +0000 Subject: [PATCH 2/3] Allow attributes on date input items --- CHANGELOG.md | 18 ++++++++++++ src/components/date-input/date-input.yaml | 32 +++++++++++++++++++++ src/components/date-input/template.njk | 5 ++-- src/components/date-input/template.test.js | 33 ++++++++++++++++++++++ 4 files changed, 85 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fd9b51c5a4..7e65c56776 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,24 @@ ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N)) +- Allow attributes on date inputs + + You can now provide attributes on day/month/year inputs (e.g. `data-example`) below: + ```js + {{ govukDateInput({ + items: [ + { + attributes: { + pattern: "[0-9]*", + "data-example": "value" + } + } + ] + }) }} + ``` + + ([PR #1172](https://github.com/alphagov/govuk-frontend/pull/1172)) + - Prevent horizontal jump as scrollbars appear As content vertical height grows (e.g. autocomplete results appear), browsers diff --git a/src/components/date-input/date-input.yaml b/src/components/date-input/date-input.yaml index 8c0acfed90..50db593e30 100644 --- a/src/components/date-input/date-input.yaml +++ b/src/components/date-input/date-input.yaml @@ -36,6 +36,10 @@ params: type: string required: false description: Classes to add to date input item. + - name: attributes + type: object + required: false + description: "HTML attributes (for example data attributes) to add to the date input tag. This overrides the default `{ pattern: '[0-9]*' }` so you will need to include this in your attributes." - name: hint type: object required: false @@ -214,3 +218,31 @@ examples: name: year classes: govuk-input--width-4 autocomplete: bday-year +- name: with input attributes + data: + id: dob-with-input-attributes + namePrefix: dob-with-input-attributes + fieldset: + legend: + text: What is your date of birth? + hint: + text: For example, 31 3 1980 + items: + - + name: day + classes: govuk-input--width-2 + attributes: + pattern: '[0-9]*' + data-example-day: day + - + name: month + classes: govuk-input--width-2 + attributes: + pattern: '[0-9]*' + data-example-month: month + - + name: year + classes: govuk-input--width-4 + attributes: + pattern: '[0-9]*' + data-example-year: year diff --git a/src/components/date-input/template.njk b/src/components/date-input/template.njk index a1e9df9dfb..809d45b48f 100644 --- a/src/components/date-input/template.njk +++ b/src/components/date-input/template.njk @@ -56,6 +56,7 @@ {%- if params.id %} id="{{ params.id }}"{% endif %}> {% for item in dateInputItems %}
+ {% set attributes = item.attributes if item.attributes else { pattern: "[0-9]*" } %} {{ govukInput({ label: { text: item.label if item.label else item.name | capitalize, @@ -67,9 +68,7 @@ value: item.value, type: "number", autocomplete: item.autocomplete, - attributes: { - pattern: "[0-9]*" - } + attributes: attributes }) | indent(6) | trim }}
{% endfor %} diff --git a/src/components/date-input/template.test.js b/src/components/date-input/template.test.js index 3e4c12cdb0..2d714332cd 100644 --- a/src/components/date-input/template.test.js +++ b/src/components/date-input/template.test.js @@ -76,6 +76,39 @@ describe('Date input', () => { expect($firstItemInput.attr('name')).toEqual('day') }) + it('renders with item attributes', () => { + const $ = render('date-input', { + items: [ + { + 'name': 'day', + 'attributes': { + 'data-example-day': 'day' + } + }, + { + 'name': 'month', + 'attributes': { + 'data-example-month': 'month' + } + }, + { + 'name': 'year', + 'attributes': { + 'data-example-year': 'year' + } + } + ] + }) + + const $input1 = $('.govuk-date-input__item:nth-of-type(1) input') + const $input2 = $('.govuk-date-input__item:nth-of-type(2) input') + const $input3 = $('.govuk-date-input__item:nth-of-type(3) input') + + expect($input1.attr('data-example-day')).toEqual('day') + expect($input2.attr('data-example-month')).toEqual('month') + expect($input3.attr('data-example-year')).toEqual('year') + }) + it('renders item with capitalised label text', () => { const $ = render('date-input', { items: [ From b863be549f502a6829a5d261976c3bcb8ebdf4d2 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Tue, 5 Mar 2019 12:52:33 +0000 Subject: [PATCH 3/3] Enable `pattern` attribute for input --- CHANGELOG.md | 14 +++++++++++--- src/components/date-input/date-input.yaml | 9 +++++---- src/components/date-input/template.njk | 4 ++-- src/components/date-input/template.test.js | 14 ++++++++++++++ src/components/input/input.yaml | 12 ++++++++++++ src/components/input/template.njk | 1 + 6 files changed, 45 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7e65c56776..48b3643238 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,15 +20,23 @@ ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N)) -- Allow attributes on date inputs +- Enable `pattern` attribute for input - You can now provide attributes on day/month/year inputs (e.g. `data-example`) below: + You can now set the `pattern` attribute on input fields using the component macros: + ```js + {{ govukInput({ + name: "example", + pattern: "[0-9]*" + }) }} + ``` + + As well as `pattern`, custom attributes can also be added on day/month/year inputs (e.g. `data-example`) shown below: ```js {{ govukDateInput({ items: [ { + pattern: "[0-9]*", attributes: { - pattern: "[0-9]*", "data-example": "value" } } diff --git a/src/components/date-input/date-input.yaml b/src/components/date-input/date-input.yaml index 50db593e30..f37b4f12c9 100644 --- a/src/components/date-input/date-input.yaml +++ b/src/components/date-input/date-input.yaml @@ -32,6 +32,10 @@ params: type: string required: false description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used. + - name: pattern + type: string + required: false + description: Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value. - name: classes type: string required: false @@ -39,7 +43,7 @@ params: - name: attributes type: object required: false - description: "HTML attributes (for example data attributes) to add to the date input tag. This overrides the default `{ pattern: '[0-9]*' }` so you will need to include this in your attributes." + description: HTML attributes (for example data attributes) to add to the date input tag. - name: hint type: object required: false @@ -232,17 +236,14 @@ examples: name: day classes: govuk-input--width-2 attributes: - pattern: '[0-9]*' data-example-day: day - name: month classes: govuk-input--width-2 attributes: - pattern: '[0-9]*' data-example-month: month - name: year classes: govuk-input--width-4 attributes: - pattern: '[0-9]*' data-example-year: year diff --git a/src/components/date-input/template.njk b/src/components/date-input/template.njk index 809d45b48f..b7d4cbacea 100644 --- a/src/components/date-input/template.njk +++ b/src/components/date-input/template.njk @@ -56,7 +56,6 @@ {%- if params.id %} id="{{ params.id }}"{% endif %}> {% for item in dateInputItems %}
- {% set attributes = item.attributes if item.attributes else { pattern: "[0-9]*" } %} {{ govukInput({ label: { text: item.label if item.label else item.name | capitalize, @@ -68,7 +67,8 @@ value: item.value, type: "number", autocomplete: item.autocomplete, - attributes: attributes + pattern: item.pattern if item.pattern else "[0-9]*", + attributes: item.attributes }) | indent(6) | trim }}
{% endfor %} diff --git a/src/components/date-input/template.test.js b/src/components/date-input/template.test.js index 2d714332cd..49805fd92b 100644 --- a/src/components/date-input/template.test.js +++ b/src/components/date-input/template.test.js @@ -154,6 +154,20 @@ describe('Date input', () => { expect($firstInput.attr('pattern')).toEqual('[0-9]*') }) + it('renders inputs with custom pattern attribute', () => { + const $ = render('date-input', { + items: [ + { + 'name': 'day', + 'pattern': '[0-8]*' + } + ] + }) + + const $firstInput = $('.govuk-date-input__item:first-child input') + expect($firstInput.attr('pattern')).toEqual('[0-8]*') + }) + it('renders item with implicit class for label', () => { const $ = render('date-input', { items: [ diff --git a/src/components/input/input.yaml b/src/components/input/input.yaml index a729dd53f5..41f9f1e9f4 100644 --- a/src/components/input/input.yaml +++ b/src/components/input/input.yaml @@ -47,6 +47,10 @@ params: type: string required: false description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used. +- name: pattern + type: string + required: false + description: Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value. - name: attributes type: object required: false @@ -162,3 +166,11 @@ examples: id: input-with-autocomplete-attribute name: postcode autocomplete: postal-code + - name: with pattern attribute + data: + label: + text: Numbers only + id: input-with-pattern-attribute + name: numbers-only + type: number + pattern: '[0-9]*' diff --git a/src/components/input/template.njk b/src/components/input/template.njk index 073cc298c8..9245ffab40 100644 --- a/src/components/input/template.njk +++ b/src/components/input/template.njk @@ -41,5 +41,6 @@ {%- if params.value %} value="{{ params.value}}"{% endif %} {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %} {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %} + {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>