From 4b90591fd488a357fb3d41f2a34675be9a925b4e Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 4 Jul 2019 16:26:24 +0200 Subject: [PATCH] feat: add support for #date-picker `form-row` context --- .../src/components/date-picker/DatePicker.js | 18 ++++++- .../__snapshots__/DatePicker.test.js.snap | 2 +- .../date-picker/style/_date-picker.scss | 23 +++++++++ .../themes/dnb-date-picker-theme-ui.scss | 6 ++- .../src/components/form-row/FormRow.js | 2 +- .../stories/components/DatePicker.js | 49 ++++++++++--------- 6 files changed, 71 insertions(+), 29 deletions(-) diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js index 9ea81b8baa3..c40d90551a4 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js +++ b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js @@ -18,6 +18,7 @@ import { import { format, parse, differenceInCalendarDays } from 'date-fns' import nbLocale from 'date-fns/locale/nb' +import Context from '../../shared/Context' import FormLabel from '../form-label/FormLabel' import FormStatus from '../form-status/FormStatus' import DatePickerRange from './DatePickerRange' @@ -92,6 +93,7 @@ export const propTypes = { link: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), sync: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), label: PropTypes.string, + label_direction: PropTypes.oneOf(['horizontal', 'vertical']), disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), status: PropTypes.string, status_state: PropTypes.string, @@ -137,6 +139,7 @@ export const defaultProps = { link: false, sync: true, label: null, + label_direction: null, disabled: null, status: null, status_state: 'error', @@ -156,6 +159,7 @@ export default class DatePicker extends PureComponent { static propTypes = propTypes static defaultProps = defaultProps static renderProps = renderProps + static contextType = Context static blurDelay = 201 // some ms more than "dropdownSlideDown 200ms" @@ -458,6 +462,7 @@ export default class DatePicker extends PureComponent { const { label, + label_direction, only_month, hide_navigation_buttons, show_input /* eslint-disable-line */, @@ -521,16 +526,25 @@ export default class DatePicker extends PureComponent { const inputParams = { ['aria-expanded']: opened } + const wrapperParams = { + className: classnames( + 'dnb-date-picker__wrapper', + status && `dnb-date-picker__status--${status_state}`, + label_direction && `dnb-date-picker--${label_direction}` + ) + } + validateDOMAttributes(this.props, pickerParams) validateDOMAttributes(null, inputParams) return ( - <> + {label && ( )} @@ -626,7 +640,7 @@ export default class DatePicker extends PureComponent { - + ) } } diff --git a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap index 0544e59cb6e..4bb881697bf 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap +++ b/packages/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap @@ -70,7 +70,7 @@ exports[`DatePicker component have to match snapshot 1`] = ` sync={true} > .dnb-form-label { + // vertical align the current font + margin-top: 0.25rem; + } + } } diff --git a/packages/dnb-ui-lib/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss b/packages/dnb-ui-lib/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss index 56a85615ced..3e5c3dcd285 100644 --- a/packages/dnb-ui-lib/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss +++ b/packages/dnb-ui-lib/src/components/date-picker/style/themes/dnb-date-picker-theme-ui.scss @@ -146,10 +146,12 @@ } /* stylelint-disable */ - &:not(#{&}--opened)#{&}__status--error + &__status--error + &:not(#{&}--opened) .dnb-input__shell:not([data-input-state='focus']) &__input, - &:not(#{&}--opened)#{&}__status--error + &__status--error + &:not(#{&}--opened) .dnb-input__shell:not([data-input-state='focus']) &__input ~ &--separator { diff --git a/packages/dnb-ui-lib/src/components/form-row/FormRow.js b/packages/dnb-ui-lib/src/components/form-row/FormRow.js index 9d079930180..5bae20f92f8 100644 --- a/packages/dnb-ui-lib/src/components/form-row/FormRow.js +++ b/packages/dnb-ui-lib/src/components/form-row/FormRow.js @@ -183,7 +183,7 @@ export default class FormRow extends PureComponent { size, direction, vertical, - label_direction: vertical ? 'vertical' : direction, + label_direction: isTrue(vertical) ? 'vertical' : direction, disabled } }) diff --git a/packages/dnb-ui-lib/stories/components/DatePicker.js b/packages/dnb-ui-lib/stories/components/DatePicker.js index 6d818e9f863..187a0a11fcf 100644 --- a/packages/dnb-ui-lib/stories/components/DatePicker.js +++ b/packages/dnb-ui-lib/stories/components/DatePicker.js @@ -7,7 +7,7 @@ import React, { useState } from 'react' import { Wrapper, Box } from '../helpers' // import styled from '@emotion/styled' -import { DatePicker } from '../../src/components' +import { DatePicker, FormRow } from '../../src/components' export default [ 'DatePicker', @@ -17,28 +17,31 @@ export default [ - { - console.log('on_change', props) - }} - on_submit={props => { - console.log('on_submit', props) - }} - on_cancel={props => { - console.log('on_cancel', props) - }} - status="Please select a valid date" - /> + + { + console.log('on_change', props) + }} + on_submit={props => { + console.log('on_submit', props) + }} + on_cancel={props => { + console.log('on_cancel', props) + }} + status="Please select a valid date" + /> +