Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storybook: Add DateTimePicker #22024

Closed
wants to merge 2 commits into from
Closed

Conversation

marekhrabe
Copy link
Contributor

Description

Adds a simple story for the DateTimePicker.

How has this been tested?

In the storybook, npm run storybook:dev

Screenshots

Screenshot 2020-05-01 at 12 50 15

Types of changes

New feature (non-breaking change which adds functionality)

@marekhrabe marekhrabe added [Package] Components /packages/components Storybook Storybook and its stories for components labels May 1, 2020
@marekhrabe marekhrabe self-assigned this May 1, 2020
@github-actions
Copy link

github-actions bot commented May 1, 2020

Size Change: +7.87 kB (0%)

Total Size: 833 kB

Filename Size Change
build/annotations/index.js 3.62 kB -4 B (0%)
build/api-fetch/index.js 3.39 kB -688 B (20%) 🎉
build/autop/index.js 2.83 kB +2 B (0%)
build/block-directory/index.js 6.59 kB -11 B (0%)
build/block-directory/style-rtl.css 764 B +4 B (0%)
build/block-directory/style.css 764 B +3 B (0%)
build/block-editor/index.js 104 kB -2.81 kB (2%)
build/block-editor/style-rtl.css 10.8 kB +648 B (5%) 🔍
build/block-editor/style.css 10.8 kB +645 B (5%) 🔍
build/block-library/editor-rtl.css 7.19 kB +75 B (1%)
build/block-library/editor.css 7.19 kB +75 B (1%)
build/block-library/index.js 118 kB +3.31 kB (2%)
build/block-library/style-rtl.css 7.48 kB +259 B (3%)
build/block-library/style.css 7.48 kB +257 B (3%)
build/block-serialization-default-parser/index.js 1.88 kB +2 B (0%)
build/blocks/index.js 48.1 kB +19 B (0%)
build/components/index.js 182 kB +2.71 kB (1%)
build/components/style-rtl.css 17.1 kB +137 B (0%)
build/components/style.css 17 kB +140 B (0%)
build/compose/index.js 6.67 kB +10 B (0%)
build/core-data/index.js 11.4 kB -19 B (0%)
build/data-controls/index.js 1.29 kB +3 B (0%)
build/data/index.js 8.42 kB -12 B (0%)
build/date/index.js 5.47 kB -4 B (0%)
build/dom-ready/index.js 569 B +1 B
build/dom/index.js 3.1 kB +1 B
build/edit-navigation/index.js 5.77 kB +1.72 kB (29%) 🚨
build/edit-navigation/style-rtl.css 709 B +224 B (31%) 🚨
build/edit-navigation/style.css 708 B +223 B (31%) 🚨
build/edit-post/index.js 28.1 kB +4 B (0%)
build/edit-post/style-rtl.css 12.2 kB +23 B (0%)
build/edit-post/style.css 12.2 kB +23 B (0%)
build/edit-site/index.js 12 kB +657 B (5%) 🔍
build/edit-site/style-rtl.css 5.22 kB +39 B (0%)
build/edit-site/style.css 5.22 kB +39 B (0%)
build/edit-widgets/index.js 7.87 kB +101 B (1%)
build/edit-widgets/style-rtl.css 4.69 kB +29 B (0%)
build/edit-widgets/style.css 4.69 kB +29 B (0%)
build/editor/editor-styles-rtl.css 425 B -3 B (0%)
build/editor/editor-styles.css 428 B -3 B (0%)
build/editor/index.js 44.3 kB +24 B (0%)
build/element/index.js 4.65 kB -1 B
build/format-library/index.js 7.63 kB +4 B (0%)
build/hooks/index.js 2.13 kB -2 B (0%)
build/i18n/index.js 3.56 kB -1 B
build/is-shallow-equal/index.js 711 B +1 B
build/keyboard-shortcuts/index.js 2.51 kB -2 B (0%)
build/keycodes/index.js 1.94 kB -2 B (0%)
build/list-reusable-blocks/index.js 3.13 kB +4 B (0%)
build/media-utils/index.js 5.29 kB +1 B
build/notices/index.js 1.79 kB -4 B (0%)
build/nux/index.js 3.4 kB +3 B (0%)
build/plugins/index.js 2.56 kB +4 B (0%)
build/primitives/index.js 1.5 kB -1 B
build/redux-routine/index.js 2.85 kB +5 B (0%)
build/rich-text/index.js 14.8 kB -13 B (0%)
build/server-side-render/index.js 2.68 kB -3 B (0%)
build/shortcode/index.js 1.7 kB +1 B
build/token-list/index.js 1.28 kB +1 B
build/url/index.js 4.02 kB +2 B (0%)
build/warning/index.js 1.14 kB -1 B
build/wordcount/index.js 1.17 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/blob/index.js 620 B 0 B
build/block-library/theme-rtl.css 683 B 0 B
build/block-library/theme.css 685 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/deprecated/index.js 772 B 0 B
build/editor/style-rtl.css 5.07 kB 0 B
build/editor/style.css 5.08 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/html-entities/index.js 622 B 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/priority-queue/index.js 789 B 0 B
build/viewport/index.js 1.84 kB 0 B

compressed-size-action

@marekhrabe marekhrabe added the Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code label May 1, 2020
Copy link
Contributor

@earnjam earnjam left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is overlap between this and #22043.

As part of fixing a bug, that one adds the DateTimePicker to the storybook. But it also adds TimePicker and DatePicker as separate isolated components. Difference in this one is the use of state. Perhaps we can combine the two?

Copy link
Contributor

@brentswisher brentswisher left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking great, thank you for your work! One very minor change, if you could move the const is12Hour to the _default() function, and then in DateTimePickerWithState accept and pass on props to <DateTimePicker>. (If that doesn't make sense take a look at the checkbox-control story for an example of what I mean.)

To be clear, this will function the same as your code. The only reason for the change is it makes it more clear to end-users in storybook what is happening when viewing the code in the docs panel. Otherwise, all they see is <DateTimePickerWithState />: Components___DateTimePicker_-_Default_⋅_Storybook

@marekhrabe
Copy link
Contributor Author

@brentswisher this makes sense. after my update:

Screenshot 2020-05-15 at 11 18 41

@gziolo
Copy link
Member

gziolo commented Dec 18, 2020

I have just discovered that the same story was added in another PR:

const DateTimePickerWithState = ( { is12Hour } ) => {
const [ date, setDate ] = useState();
return (
<DateTimePicker
currentDate={ date }
onChange={ setDate }
is12Hour={ is12Hour }
/>
);
};
export const _default = () => {
const is12Hour = boolean( 'Is 12 hour (shows AM/PM)', false );
return <DateTimePickerWithState is12Hour={ is12Hour } />;
};

Let's close this PR. @marekhrabe, it looks like you landed 😄

@gziolo gziolo closed this Dec 18, 2020
@gziolo gziolo deleted the add/date-time-picker-story branch December 18, 2020 07:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Good First Review A PR that's suitable for someone looking to contribute for the first time by reviewing code [Package] Components /packages/components Storybook Storybook and its stories for components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants