diff --git a/CHANGELOG.md b/CHANGELOG.md
index 945ebb928b..97b4c0f966 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,7 @@
# Changelog
+## v2.4.1
+
+* Add optional label to input field
## v2.4.0
diff --git a/README.md b/README.md
index 72e6f66d15..f8d87b0d54 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,7 @@ export default function Form() {
Use only the input field
diff --git a/examples/datepicker.js b/examples/datepicker.js
index 3501098ad3..b12c9cae9e 100644
--- a/examples/datepicker.js
+++ b/examples/datepicker.js
@@ -63,7 +63,8 @@ class DatepickerExample extends React.Component {
language="nb"
minDate="01.01.2016"
maxDate="31.12.2018"
- inputProps={ { className: 'customClass', id: 'custom-input-id' } }
+ inputProps={ { className: 'customClass' } }
+ label={ 'Label not attached to input.' }
/>
@@ -74,7 +75,8 @@ class DatepickerExample extends React.Component {
language="en"
minDate="01.01.2016"
maxDate="31.12.2018"
- inputProps={ { className: 'customClass', id: 'custom-input-id' } }
+ inputProps={ { className: 'customClass', id: 'unique-id' } }
+ label={ 'A long label which is attached to the input' }
ariaInvalid={ false }
calendarAbove={ true }
/>
diff --git a/package.json b/package.json
index f95af10ece..988da68542 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ffe-datepicker-react",
- "version": "2.4.0",
+ "version": "2.4.1",
"main": "lib/ffe-datepicker-react.js",
"scripts": {
"build": "babel -d lib/. --ignore=*.test.js src/.",
diff --git a/src/datepicker/ffe-datepicker.js b/src/datepicker/ffe-datepicker.js
index 5dc5e7ed6d..f79a428180 100644
--- a/src/datepicker/ffe-datepicker.js
+++ b/src/datepicker/ffe-datepicker.js
@@ -206,53 +206,64 @@ export default class FFEDatepicker extends React.Component {
{ 'ffe-calendar--datepicker--above': this.props.calendarAbove }
);
return (
-
{ this._datepickerNode = c; } }
- className="ffe-datepicker"
- tabIndex={ -1 }
- role="button"
- >
-
this.props.onChange(evt.target.value) }
- onKeyDown={ this.onInputKeydown }
- value={ this.props.value }
- inputProps={ inputProps }
- ref={ c => { this.dateInputRef = c; } }
- ariaInvalid={ this.ariaInvalid() }
- />
-
- {
- this.state.ariaInvalid &&
-
- { this.state.errorMessage }
-
- }
-
- {
- this.state.displayDatePicker &&
-
+
+ { this.props.label &&
+
}
+
{ this._datepickerNode = c; } }
+ className="ffe-datepicker"
+ tabIndex={ -1 }
+ role="button"
+ >
+
this.props.onChange(evt.target.value) }
+ onKeyDown={ this.onInputKeydown }
+ value={ this.props.value }
+ inputProps={ inputProps }
+ ref={ c => { this.dateInputRef = c; } }
+ ariaInvalid={ this.ariaInvalid() }
+ />
+
+ {
+ this.state.ariaInvalid &&
+
+ { this.state.errorMessage }
+
+ }
+
+ {
+ this.state.displayDatePicker &&
+
+ }
+
);
}
}
FFEDatepicker.propTypes = {
+ label: PropTypes.string,
value: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
language: PropTypes.string.isRequired,
diff --git a/src/datepicker/ffe-datepicker.test.js b/src/datepicker/ffe-datepicker.test.js
index cb396fe35c..b2d4c87f2a 100644
--- a/src/datepicker/ffe-datepicker.test.js
+++ b/src/datepicker/ffe-datepicker.test.js
@@ -30,7 +30,7 @@ describe('', () => {
});
it('renders a wrapper for the datepicker components', () =>
- expect(wrapper).to.have.className('ffe-datepicker'));
+ expect(wrapper).to.have.descendants('.ffe-datepicker'));
it('contains a single DateInput component', () =>
expect(wrapper).to.have.exactly(1).descendants(DateInput));