feat(datetimepicker): new DateTimePicker component #1072

enricoberti · 2020-04-07T13:27:04Z

Closes #854 closes #1114

Summary

Supports presets, relative and absolute times
Presets and relative options are configurable

Change List (commits, features, bugs, etc)

Known item to be addressed after this PR is through: RTL support

Acceptance Test (how to verify the PR)

?path=/story/watson-iot-experimental-datetime-picker--default and sibling stories

netlify · 2020-04-07T13:35:43Z

Deploy preview for carbon-addons-iot-react ready!

Built with commit a6cde9a

https://deploy-preview-1072--carbon-addons-iot-react.netlify.app

davidicus · 2020-04-07T18:03:32Z

@enricoberti this is looking great! I did see one small bug. If you click on your start and end date for custom range. Then click on any date under the selected. It will start to increment the end date by months. Also if you click cancel and then try to go back in the calendar selections are still there and not cleared.

JordanWSmith15 · 2020-04-07T19:02:52Z

@enricoberti Looking great! A few scenarios to consider checking that will cause problems that Graphite has had to fix for the Dropdown component:

When positioned near the bottom of a page, the editing dialog should expand upwards, rather than below the page fold. Example at bottom of this storybook: https://pages.github.ibm.com/maximo-app-framework/graphite/react/storybook/?path=/story/components-%E2%9C%93-dropdown--dropdown
Plan for issues with z-index. It would be good to demonstrate what this does inside of a modal, for instance. The editing dialog of this component should overlap the modal buttons and expand outside of a modal, rather than cause an internal scroll: See dropdown 2: https://pages.github.ibm.com/maximo-app-framework/graphite/react/storybook/?path=/story/components-%E2%9C%93-dropdown--datasource-dropdown-on-a-dialog

enricoberti · 2020-04-08T08:57:01Z

thanks @davidicus and @JordanWSmith15, valid feedback! fixing the issues now

stuckless

This was very good. Lots of globalization issues to address.

I did notice a couple of things...

when entering times there is no validation there... I can enter abcd and doesn't care.
I did have a couple of dates that didn't fit in the from -> to header and it just bleeded into the icons... these need to be ellipsised
I could not really figure out how the ranging worked. What I tried originally was just to click and drag to select a rang but that didn't work. Does the PAL talk about what the expectations are here for selecting ranges. I could never really figure out how to set the start and end. It seemed like one date was always fixed, so every click would create a range to the point or from the point. It could be the sample I was using, not sure.

src/components/DateTimePicker/DateTimePicker.jsx

enricoberti · 2020-04-10T12:20:21Z

thank you for the feedback @stuckless ! i pushed a few changes:

a bit more documentation on the returned object
i18n
better cancelation flow
date time mask
ellipsis on overflowing text
filter out non HH:mm characters on the timepickerspinner

tay1orjones

In addition to these comments,

I don't see a new snapshot being added for this component. Even though it's under experimental, I think we still generate snaps for those components?
The component needs to be added to the central entrypoint index.js as well
- The publicAPI snapshot should update to include the new component
- The storybook welcome story snapshot, the exports table should be modified to include the new export.

tay1orjones · 2020-04-14T16:17:47Z

src/components/DateTimePicker/DateTimePicker.jsx

+  /*
+  {
+    kind: String // the type of selection, one of PICKER_KINDS (PRESET, RELATIVE, ABSOLUTE)
+    preset: {
+      label: String // the label of the selected preset
+      offset: Number // the offset in minute
+    },
+    relative: {
+      start: Date // the start point in time
+      end: Date // the end point in time
+      lastNumber: Number // quantity of interval
+      lastInterval: String // one of INTERVAL_VALUES
+      relativeToWhen: String // one of RELATIVE_VALUES, indicates to what point in time the selection is relative to
+      relativeToTime: String // in the HH:MM format
+    },
+    absolute: {
+      start: Date // the start point in time
+      end: Date // the end point in time
+      startDate: String // start date in the mask or default format
+      startTime: String // in the HH:MM format
+      endDate:  // end date in the mask or default format
+      endTime: String // in the HH:MM format
+    },
+  } */


This documentation is prone to being outdated as the component changes. Instead, this object should be logged out in the action logger within storybook when the callback is called.

If it is already being logged out in the action panel, we can delete that code comment section

src/components/DateTimePicker/DateTimePicker.jsx

src/components/DateTimePicker/DateTimePicker.story.jsx

src/components/DateTimePicker/DateTimePicker.jsx

src/components/DateTimePicker/_date-time-picker.scss

src/components/DateTimePicker/DateTimePicker.jsx

davidicus · 2020-04-14T20:18:38Z

Minor RTL issue when picking a custom range

davidicus · 2020-04-22T19:30:06Z

src/components/DateTimePicker/_date-time-picker.scss

+    transition: background-color $duration--fast-01 carbon--motion(standard);
+    .#{$iot-prefix}--date-time-picker__field {
+      background: none;
+      -webkit-appearance: none;


I just noticed that were are using vender prefixes here and there are few places were we should be using tokens and rems. I have opened a new issue to track this as to not hold up this component. #1114

…enrico-854-datetimepicker

Enrico has pushed requested changes.

tay1orjones · 2020-04-22T21:02:02Z

🎉 This PR is included in version 2.70.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

feat(datetimepicker): new DateTimePicker component

572c34a

enricoberti requested review from blechner, bryancboyd, cgirani, davidicus, filipecorrea, jessieyan, leetosc, scottdickerson, sstone2423, stuckless, tay1orjones and tomklapiscak as code owners April 7, 2020 13:27

stuckless previously requested changes Apr 8, 2020

View reviewed changes

enricoberti added 5 commits April 8, 2020 16:26

feat(datetimepicker): add documentation for the returned object

e5da303

feat(datetimepicker): add support for i18n

adf3dce

feat(datetimepicker): add date/time mask and ellipsis

e0dfac8

fix(timepickerspinner): filter out non standard characters

3b743a6

fix(datetimepicker): better cancelation flow

041f60f

fix(datetimepicker): better absolute date picking

595753a

tay1orjones requested changes Apr 14, 2020

View reviewed changes

enricoberti added 3 commits April 15, 2020 16:07

feat(datetimepicker): added carbon-motion and PR fixes

ed5a089

feat(datetimepicker): fix Jest exceptions

bc0624b

feat(datetimepicker): tentative fix for carbon-motion import

c4f5019

enricoberti and others added 4 commits April 17, 2020 15:35

feat(datetimepicker): use carbon motion durations

28d3794

Merge branch 'master' into enrico-854-datetimepicker

f1b9456

feat(datetimepicker): move to i18n arrays of labels

783a7ad

Merge branch 'master' into enrico-854-datetimepicker

9419fed

tay1orjones approved these changes Apr 22, 2020

View reviewed changes

tay1orjones added status: one more review 👀 status: ready for review 👀 and removed status: ready for review 👀 labels Apr 22, 2020

davidicus approved these changes Apr 22, 2020

View reviewed changes

davidicus reviewed Apr 22, 2020

View reviewed changes

davidicus removed the status: one more review 👀 label Apr 22, 2020

davidicus added 2 commits April 22, 2020 15:48

Merge branch 'master' of github.com:IBM/carbon-addons-iot-react into …

62b9f61

…enrico-854-datetimepicker

fix(datepicker): fix issues in stylesheet

f73aa12

fix(datepicker): remove vender prefixes

a6cde9a

davidicus merged commit b3d81b7 into master Apr 22, 2020

davidicus deleted the enrico-854-datetimepicker branch April 22, 2020 20:52

tay1orjones added the released label Apr 22, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(datetimepicker): new DateTimePicker component #1072

feat(datetimepicker): new DateTimePicker component #1072

enricoberti commented Apr 7, 2020 •

edited by davidicus

Loading

netlify bot commented Apr 7, 2020 •

edited

Loading

davidicus commented Apr 7, 2020 •

edited

Loading

JordanWSmith15 commented Apr 7, 2020 •

edited

Loading

enricoberti commented Apr 8, 2020

stuckless left a comment

enricoberti commented Apr 10, 2020

tay1orjones left a comment •

edited

Loading

tay1orjones Apr 14, 2020

tay1orjones Apr 14, 2020

davidicus commented Apr 14, 2020

davidicus Apr 22, 2020

tay1orjones commented Apr 22, 2020

feat(datetimepicker): new DateTimePicker component #1072

feat(datetimepicker): new DateTimePicker component #1072

Conversation

enricoberti commented Apr 7, 2020 • edited by davidicus Loading

netlify bot commented Apr 7, 2020 • edited Loading

davidicus commented Apr 7, 2020 • edited Loading

JordanWSmith15 commented Apr 7, 2020 • edited Loading

enricoberti commented Apr 8, 2020

stuckless left a comment

Choose a reason for hiding this comment

enricoberti commented Apr 10, 2020

tay1orjones left a comment • edited Loading

Choose a reason for hiding this comment

tay1orjones Apr 14, 2020

Choose a reason for hiding this comment

tay1orjones Apr 14, 2020

Choose a reason for hiding this comment

davidicus commented Apr 14, 2020

davidicus Apr 22, 2020

Choose a reason for hiding this comment

tay1orjones commented Apr 22, 2020

enricoberti commented Apr 7, 2020 •

edited by davidicus

Loading

netlify bot commented Apr 7, 2020 •

edited

Loading

davidicus commented Apr 7, 2020 •

edited

Loading

JordanWSmith15 commented Apr 7, 2020 •

edited

Loading

tay1orjones left a comment •

edited

Loading