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.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.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));