Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

[terra-time-input] Added visual label and status message to announce invalid input #1942

Merged
merged 12 commits into from
Dec 20, 2023
Merged

[terra-time-input] Added visual label and status message to announce invalid input #1942

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5b30a4d
Update: status message
MadanKumarGovindaswamy Dec 12, 2023
f5effb1
update: language translations
MadanKumarGovindaswamy Dec 14, 2023
c1f8373
Merge branch 'main' into UXPLATFORM-10041/status-message
MadanKumarGovindaswamy Dec 14, 2023
05e3c1e
Update TimeInput.test.jsx.snap
MadanKumarGovindaswamy Dec 14, 2023
59d3408
Update CHANGELOG.md
MadanKumarGovindaswamy Dec 14, 2023
7097966
Update: add visual label to first example
MadanKumarGovindaswamy Dec 14, 2023
f1d8105
Update CHANGELOG.md
MadanKumarGovindaswamy Dec 14, 2023
b0a2976
Update: wdio error
MadanKumarGovindaswamy Dec 14, 2023
d0b9c83
Update packages/terra-framework-docs/CHANGELOG.md
MadanKumarGovindaswamy Dec 15, 2023
887af2a
Merge branch 'main' into UXPLATFORM-10041/status-message
MadanKumarGovindaswamy Dec 18, 2023
a9dc0db
Update: added label for doc examples
MadanKumarGovindaswamy Dec 18, 2023
a57c8e8
Merge branch 'main' into UXPLATFORM-10041/status-message
MadanKumarGovindaswamy Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified ...clinical-lowlight-theme/en/chrome_large/date-time-picker-spec/with_timezone.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../clinical-lowlight-theme/en/chrome_tiny/date-time-picker-spec/with_timezone.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...nce/terra-default-theme/en/chrome_large/date-time-picker-spec/with_timezone.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ence/terra-default-theme/en/chrome_tiny/date-time-picker-spec/with_timezone.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 4 additions & 1 deletion packages/terra-framework-docs/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,16 @@

## Unreleased

* Updated
* Updated `terra-time-input` example to have visual label.

## 1.53.0 - (December 18, 2023)

* Added
* Added FlowsheetDataGrid implementation guide.
* Added new Accessibility and Implementation guide for Terra Slider.
* Added implementation guide for `terra-table`.

* Changed
* Updated examples and tests for expand all/collapse all for `terra-folder-tree`.
* Updated `terra-theme-provider` examples to show the new ability to specify a theme density.
Expand Down
25 changes: 12 additions & 13 deletions ...s/terra-framework-docs/src/terra-dev-site/doc/time-input/example/TimeInputDefaultTime.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import React from 'react';
import TimeInput from 'terra-time-input';
import classNames from 'classnames/bind';
import styles from './TimeInputDocCommon.module.scss';

const cx = classNames.bind(styles);
import Field from 'terra-form-field';

class timeInput extends React.Component {
constructor(props) {
Expand All @@ -19,15 +16,17 @@ class timeInput extends React.Component {
render() {
return (
<div>
<p>
Time Provided:
<span className={cx('time-wrapper')}>{this.state.time}</span>
</p>
<TimeInput
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
/>
<Field
label={`Entered Time: ${this.state.time}`}
htmlFor="time-input-value"
>
<TimeInput
a11yLabel="Entered Time"
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
/>
</Field>
</div>
);
}
Expand Down
27 changes: 13 additions & 14 deletions ...a-framework-docs/src/terra-dev-site/doc/time-input/example/TimeInputDefaultTwelveHour.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import React from 'react';
import TimeInput from 'terra-time-input/lib/TimeInput';
import TimeUtil from 'terra-time-input/lib/TimeUtil';
import classNames from 'classnames/bind';
import styles from './TimeInputDocCommon.module.scss';

const cx = classNames.bind(styles);
import Field from 'terra-form-field';

class timeInput extends React.Component {
constructor(props) {
Expand All @@ -20,16 +17,18 @@ class timeInput extends React.Component {
render() {
return (
<div>
<p>
Time Provided:
<span className={cx('time-wrapper')}>{this.state.time}</span>
</p>
<TimeInput
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
variant={TimeUtil.FORMAT_12_HOUR}
/>
<Field
label={`Entered Time: ${this.state.time}`}
htmlFor="time-input-value"
>
<TimeInput
a11yLabel="Entered Time"
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
variant={TimeUtil.FORMAT_12_HOUR}
/>
</Field>
</div>
);
}
Expand Down
5 changes: 0 additions & 5 deletions ...a-framework-docs/src/terra-dev-site/doc/time-input/example/TimeInputDocCommon.module.scss
View file
Open in desktop

This file was deleted.

23 changes: 11 additions & 12 deletions ...terra-framework-docs/src/terra-dev-site/doc/time-input/example/TimeInputNoDefaultTime.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import React from 'react';
import TimeInput from 'terra-time-input';
import classNames from 'classnames/bind';
import styles from './TimeInputDocCommon.module.scss';

const cx = classNames.bind(styles);
import Field from 'terra-form-field';

class timeInput extends React.Component {
constructor(props) {
Expand All @@ -19,14 +16,16 @@ class timeInput extends React.Component {
render() {
return (
<div>
<p>
Time Provided:
<span className={cx('time-wrapper')}>{this.state.time}</span>
</p>
<TimeInput
name="time-input-default"
onChange={this.handleTimeChange}
/>
<Field
label={`Enter Time: ${this.state.time}`}
htmlFor="time-input-value"
>
<TimeInput
a11yLabel="Enter Time"
name="time-input-default"
onChange={this.handleTimeChange}
/>
</Field>
</div>
);
}
Expand Down
27 changes: 13 additions & 14 deletions ...framework-docs/src/terra-dev-site/doc/time-input/example/TimeInputNoDefaultTwelveHour.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import React from 'react';
import TimeInput from 'terra-time-input/lib/TimeInput';
import TimeUtil from 'terra-time-input/lib/TimeUtil';
import classNames from 'classnames/bind';
import styles from './TimeInputDocCommon.module.scss';

const cx = classNames.bind(styles);
import Field from 'terra-form-field';

class timeInput extends React.Component {
constructor(props) {
Expand All @@ -20,16 +17,18 @@ class timeInput extends React.Component {
render() {
return (
<div>
<p>
Time Provided:
<span className={cx('time-wrapper')}>{this.state.time}</span>
</p>
<TimeInput
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
variant={TimeUtil.FORMAT_12_HOUR}
/>
<Field
label={`Enter Time: ${this.state.time}`}
htmlFor="time-input-value"
>
<TimeInput
a11yLabel="Enter Time"
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
variant={TimeUtil.FORMAT_12_HOUR}
/>
</Field>
</div>
);
}
Expand Down
27 changes: 13 additions & 14 deletions packages/terra-framework-docs/src/terra-dev-site/doc/time-input/example/TimeInputSeconds.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import React from 'react';
import TimeInput from 'terra-time-input';
import classNames from 'classnames/bind';
import styles from './TimeInputDocCommon.module.scss';

const cx = classNames.bind(styles);
import Field from 'terra-form-field';

class timeInput extends React.Component {
constructor(props) {
Expand All @@ -19,16 +16,18 @@ class timeInput extends React.Component {
render() {
return (
<div>
<p>
Time Provided:
<span className={cx('time-wrapper')}>{this.state.time}</span>
</p>
<TimeInput
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
showSeconds
/>
<Field
label={`Enter Time: ${this.state.time}`}
htmlFor="time-input-value"
>
<TimeInput
a11yLabel="Enter Time"
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
showSeconds
/>
</Field>
</div>
);
}
Expand Down
31 changes: 15 additions & 16 deletions ...a-framework-docs/src/terra-dev-site/doc/time-input/example/TimeInputSecondsIncomplete.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import React from 'react';
import TimeInput from 'terra-time-input';
import classNames from 'classnames/bind';
import styles from './TimeInputDocCommon.module.scss';

const cx = classNames.bind(styles);
import Field from 'terra-form-field';

class timeInput extends React.Component {
constructor(props) {
Expand All @@ -19,18 +16,20 @@ class timeInput extends React.Component {
render() {
return (
<div>
<p>
Time Provided:
<span className={cx('time-wrapper')}>{this.state.time}</span>
</p>
<TimeInput
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
showSeconds
isIncomplete
required
/>
<Field
label={`Enter Time: ${this.state.time}`}
htmlFor="time-input-value"
>
<TimeInput
a11yLabel="Enter Time"
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
showSeconds
isIncomplete
required
/>
</Field>
</div>
);
}
Expand Down
29 changes: 14 additions & 15 deletions ...erra-framework-docs/src/terra-dev-site/doc/time-input/example/TimeInputSecondsInvalid.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import React from 'react';
import TimeInput from 'terra-time-input';
import classNames from 'classnames/bind';
import styles from './TimeInputDocCommon.module.scss';

const cx = classNames.bind(styles);
import Field from 'terra-form-field';

class timeInput extends React.Component {
constructor(props) {
Expand All @@ -19,17 +16,19 @@ class timeInput extends React.Component {
render() {
return (
<div>
<p>
Time Provided:
<span className={cx('time-wrapper')}>{this.state.time}</span>
</p>
<TimeInput
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
showSeconds
isInvalid
/>
<Field
label={`Enter Time: ${this.state.time}`}
htmlFor="time-input-value"
>
<TimeInput
a11yLabel="Enter Time"
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
showSeconds
isInvalid
/>
</Field>
</div>
);
}
Expand Down
29 changes: 14 additions & 15 deletions ...a-framework-docs/src/terra-dev-site/doc/time-input/example/TimeInputSecondsTwelveHour.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import React from 'react';
import TimeInput from 'terra-time-input/lib/TimeInput';
import TimeUtil from 'terra-time-input/lib/TimeUtil';
import classNames from 'classnames/bind';
import styles from './TimeInputDocCommon.module.scss';

const cx = classNames.bind(styles);
import Field from 'terra-form-field';

class timeInput extends React.Component {
constructor(props) {
Expand All @@ -20,17 +17,19 @@ class timeInput extends React.Component {
render() {
return (
<div>
<p>
Time Provided:
<span className={cx('time-wrapper')}>{this.state.time}</span>
</p>
<TimeInput
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
showSeconds
variant={TimeUtil.FORMAT_12_HOUR}
/>
<Field
label={`Enter Time: ${this.state.time}`}
htmlFor="time-input-value"
>
<TimeInput
a11yLabel="Enter Time"
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
showSeconds
variant={TimeUtil.FORMAT_12_HOUR}
/>
</Field>
</div>
);
}
Expand Down
27 changes: 13 additions & 14 deletions ...-framework-docs/src/terra-dev-site/doc/time-input/example/TimeInputSecondsWithDefault.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
import React from 'react';
import TimeInput from 'terra-time-input';
import classNames from 'classnames/bind';
import styles from './TimeInputDocCommon.module.scss';

const cx = classNames.bind(styles);
import Field from 'terra-form-field';

class timeInput extends React.Component {
constructor(props) {
Expand All @@ -19,16 +16,18 @@ class timeInput extends React.Component {
render() {
return (
<div>
<p>
Time Provided:
<span className={cx('time-wrapper')}>{this.state.time}</span>
</p>
<TimeInput
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
showSeconds
/>
<Field
label={`Entered Time: ${this.state.time}`}
htmlFor="time-input-value"
>
<TimeInput
a11yLabel="Entered Time"
name="time-input-value"
value={this.state.time}
onChange={this.handleTimeChange}
showSeconds
/>
</Field>
</div>
);
}
Expand Down
3 changes: 3 additions & 0 deletions packages/terra-time-input/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

* Changed
* Updated screen response to announce when invalid time is entered.

## 4.59.0 - (December 18, 2023)

* Changed
Expand Down
Loading
Loading