Skip to content

Commit

Permalink
[APPIII-2106] Separate DateField inputs with slashes (#274)
Browse files Browse the repository at this point in the history 
* separate datefield inputs with slashes

* update snapshot

* add aria hidden, unmagic the magic

* derive separator height from input values
  • Loading branch information
@scitech
scitech authored Aug 17, 2018
1 parent 1dba444 commit bac797f
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 10 deletions.
16 changes: 15 additions & 1 deletion packages/core/src/components/DateField/DateField.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export class DateField extends React.PureComponent {
{this.props.label}
</FormLabel>

<div className="ds-l-form-row">
<div className="ds-l-form-row ds-u-align-items--end">
<TextField
{...sharedDateFieldProps}
fieldClassName={classNames('ds-c-field--month', {
Expand All @@ -106,6 +106,13 @@ export class DateField extends React.PureComponent {
value={this.props.monthValue}
aria-describedby={labelId}
/>
<span
aria-hidden="true"
role="presentation"
className="ds-c-datefield__separator"
>
/
</span>
<TextField
{...sharedDateFieldProps}
fieldClassName={classNames('ds-c-field--day', {
Expand All @@ -123,6 +130,13 @@ export class DateField extends React.PureComponent {
value={this.props.dayValue}
aria-describedby={labelId}
/>
<span
aria-hidden="true"
role="presentation"
className="ds-c-datefield__separator"
>
/
</span>
<TextField
{...sharedDateFieldProps}
fieldClassName={classNames('ds-c-field--year', {
Expand Down
11 changes: 10 additions & 1 deletion packages/core/src/components/DateField/DateField.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,17 @@ Markup:
<span class="ds-u-font-weight--bold">Date of birth</span>
<span class="ds-c-field__hint">For example: 4 28 1986</span>
</legend>
<div class="ds-l-form-row">
<div class="ds-l-form-row ds-u-align-items--end">
<div class="ds-l-col--auto">
<label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="month">Month</label>
<input class="ds-c-field ds-c-field--month" type="number" min="1" max="12" id="month" name="birthdate[month]">
</div>
<span aria-hidden="true" role="presentation" class="ds-c-datefield__separator">/</span>
<div class="ds-l-col--auto">
<label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="day">Day</label>
<input class="ds-c-field ds-c-field--day" type="number" min="1" max="31" id="day" name="birthdate[day]">
</div>
<span aria-hidden="true" role="presentation" class="ds-c-datefield__separator">/</span>
<div class="ds-l-col--auto">
<label class="ds-c-label ds-u-font-weight--normal ds-u-margin-top--1" for="year">Year</label>
<input class="ds-c-field ds-c-field--year" type="number" min="1900" max="2000" id="year" name="birthdate[year]">
Expand All @@ -46,6 +48,13 @@ Style guide: components.date-field
width: 6ch; // provide additional spacing for browser UI
}

.ds-c-datefield__separator {
font-size: $h2-font-size;
line-height: $input-line-height * $base-font-size; // vertical dimensions should match adjacent inputs
margin: ($input-border-width + $spacer-half) 0;
padding: $input-padding 0;
}

/*
`<DateField>`
Expand Down
128 changes: 120 additions & 8 deletions packages/core/src/components/DateField/__snapshots__/DateField.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ exports[`DateField has custom yearMax and yearMin 1`] = `
</span>
</legend>
<div
className="ds-l-form-row"
className="ds-l-form-row ds-u-align-items--end"
>
<div
className="ds-u-clearfix ds-l-col--auto"
Expand Down Expand Up @@ -53,6 +53,13 @@ exports[`DateField has custom yearMax and yearMin 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -83,6 +90,13 @@ exports[`DateField has custom yearMax and yearMin 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -145,7 +159,7 @@ exports[`DateField has errorMessage 1`] = `
</span>
</legend>
<div
className="ds-l-form-row"
className="ds-l-form-row ds-u-align-items--end"
>
<div
className="ds-u-clearfix ds-l-col--auto"
Expand Down Expand Up @@ -177,6 +191,13 @@ exports[`DateField has errorMessage 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -207,6 +228,13 @@ exports[`DateField has errorMessage 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -262,7 +290,7 @@ exports[`DateField has invalid day 1`] = `
</span>
</legend>
<div
className="ds-l-form-row"
className="ds-l-form-row ds-u-align-items--end"
>
<div
className="ds-u-clearfix ds-l-col--auto"
Expand Down Expand Up @@ -294,6 +322,13 @@ exports[`DateField has invalid day 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -324,6 +359,13 @@ exports[`DateField has invalid day 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -379,7 +421,7 @@ exports[`DateField has invalid month 1`] = `
</span>
</legend>
<div
className="ds-l-form-row"
className="ds-l-form-row ds-u-align-items--end"
>
<div
className="ds-u-clearfix ds-l-col--auto"
Expand Down Expand Up @@ -411,6 +453,13 @@ exports[`DateField has invalid month 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -441,6 +490,13 @@ exports[`DateField has invalid month 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -496,7 +552,7 @@ exports[`DateField has invalid year 1`] = `
</span>
</legend>
<div
className="ds-l-form-row"
className="ds-l-form-row ds-u-align-items--end"
>
<div
className="ds-u-clearfix ds-l-col--auto"
Expand Down Expand Up @@ -528,6 +584,13 @@ exports[`DateField has invalid year 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -558,6 +621,13 @@ exports[`DateField has invalid year 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -615,7 +685,7 @@ exports[`DateField has requirementLabel 1`] = `
</span>
</legend>
<div
className="ds-l-form-row"
className="ds-l-form-row ds-u-align-items--end"
>
<div
className="ds-u-clearfix ds-l-col--auto"
Expand Down Expand Up @@ -647,6 +717,13 @@ exports[`DateField has requirementLabel 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -677,6 +754,13 @@ exports[`DateField has requirementLabel 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -732,7 +816,7 @@ exports[`DateField is inversed 1`] = `
</span>
</legend>
<div
className="ds-l-form-row"
className="ds-l-form-row ds-u-align-items--end"
>
<div
className="ds-u-clearfix ds-l-col--auto"
Expand Down Expand Up @@ -764,6 +848,13 @@ exports[`DateField is inversed 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -794,6 +885,13 @@ exports[`DateField is inversed 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -849,7 +947,7 @@ exports[`DateField renders with all defaultProps 1`] = `
</span>
</legend>
<div
className="ds-l-form-row"
className="ds-l-form-row ds-u-align-items--end"
>
<div
className="ds-u-clearfix ds-l-col--auto"
Expand Down Expand Up @@ -881,6 +979,13 @@ exports[`DateField renders with all defaultProps 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down Expand Up @@ -911,6 +1016,13 @@ exports[`DateField renders with all defaultProps 1`] = `
value={undefined}
/>
</div>
<span
aria-hidden="true"
className="ds-c-datefield__separator"
role="presentation"
>
/
</span>
<div
className="ds-u-clearfix ds-l-col--auto"
>
Expand Down

0 comments on commit bac797f

Please sign in to comment.