From 9d73e62ec091cf87f2b25b402eb7df6a9cc2cd7e Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Mon, 27 Mar 2023 15:52:35 -0700 Subject: [PATCH 01/10] adding bundle size fixture and vr-tests --- apps/vr-tests-react-components/package.json | 1 + .../src/stories/DatePickerCompat.tsx | 44 +++++++++++++++++++ .../bundle-size/DatePicker.fixture.js | 7 +++ 3 files changed, 52 insertions(+) create mode 100644 apps/vr-tests-react-components/src/stories/DatePickerCompat.tsx create mode 100644 packages/react-components/react-datepicker-compat/bundle-size/DatePicker.fixture.js diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index eb581fcc1bd980..930acb4038ed61 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -27,6 +27,7 @@ "@fluentui/react-card": "^9.0.4", "@fluentui/react-checkbox": "^9.1.6", "@fluentui/react-combobox": "^9.2.6", + "@fluentui/react-datepicker": "0.0.0-alpha.0", "@fluentui/react-dialog": "^9.4.2", "@fluentui/react-divider": "^9.2.6", "@fluentui/react-field": "9.0.0-alpha.28", diff --git a/apps/vr-tests-react-components/src/stories/DatePickerCompat.tsx b/apps/vr-tests-react-components/src/stories/DatePickerCompat.tsx new file mode 100644 index 00000000000000..a631c3a6a28603 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/DatePickerCompat.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; +import { Steps, StoryWright } from 'storywright'; +import { DatePicker, DateRangeType } from '@fluentui/react-datepicker-compat'; +import { storiesOf } from '@storybook/react'; +import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; + +storiesOf('DatePicker Compat', module) + .addDecorator(TestWrapperDecoratorFixedWidth) + .addDecorator(story => ( + + {story()} + + )) + .addStory('default', () => , { + includeHighContrast: true, + includeDarkMode: true, + includeRtl: true, + }); + +storiesOf('DatePicker Compat', module) + .addDecorator(TestWrapperDecoratorFixedWidth) + .addStory('DateRange: day', () => ( + + )) + .addStory('DateRange: work week', () => ( + + )) + .addStory('DateRange: week', () => ( + + )) + .addStory('DateRange: month', () => ( + + )) + .addStory('allowTextInput', () => ) + .addStory('Required', () => ) + .addStory('Underlined', () => ) + .addStory('Underlined and required', () => ) + .addStory('With label', () => ); diff --git a/packages/react-components/react-datepicker-compat/bundle-size/DatePicker.fixture.js b/packages/react-components/react-datepicker-compat/bundle-size/DatePicker.fixture.js new file mode 100644 index 00000000000000..43471fd2a0a59d --- /dev/null +++ b/packages/react-components/react-datepicker-compat/bundle-size/DatePicker.fixture.js @@ -0,0 +1,7 @@ +import { DatePicker } from '@fluentui/react-datepicker-compat'; + +console.log(DatePicker); + +export default { + name: 'DatePicker Compat', +}; From 02a494d4f77ed22188d1aaa76072a50ab0dee8ef Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 29 Mar 2023 08:17:50 -0700 Subject: [PATCH 02/10] adding dependency to vr-tests --- apps/vr-tests-react-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index 930acb4038ed61..c54158c26cfdd7 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -27,7 +27,7 @@ "@fluentui/react-card": "^9.0.4", "@fluentui/react-checkbox": "^9.1.6", "@fluentui/react-combobox": "^9.2.6", - "@fluentui/react-datepicker": "0.0.0-alpha.0", + "@fluentui/react-datepicker-compat": "0.0.0-alpha.0", "@fluentui/react-dialog": "^9.4.2", "@fluentui/react-divider": "^9.2.6", "@fluentui/react-field": "9.0.0-alpha.28", From 78ae13701dc701abb41bb6686d5983d565ad2308 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 29 Mar 2023 10:12:56 -0700 Subject: [PATCH 03/10] adding more tests --- .../src/stories/DatePickerCompat.tsx | 61 +++++++++++++++---- 1 file changed, 48 insertions(+), 13 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/DatePickerCompat.tsx b/apps/vr-tests-react-components/src/stories/DatePickerCompat.tsx index a631c3a6a28603..7527c25cc43b53 100644 --- a/apps/vr-tests-react-components/src/stories/DatePickerCompat.tsx +++ b/apps/vr-tests-react-components/src/stories/DatePickerCompat.tsx @@ -20,23 +20,58 @@ storiesOf('DatePicker Compat', module) .addStory('default', () => , { includeHighContrast: true, includeDarkMode: true, - includeRtl: true, }); storiesOf('DatePicker Compat', module) .addDecorator(TestWrapperDecoratorFixedWidth) - .addStory('DateRange: day', () => ( - - )) - .addStory('DateRange: work week', () => ( - - )) - .addStory('DateRange: week', () => ( - - )) - .addStory('DateRange: month', () => ( - - )) + .addStory( + 'DateRange: day', + () => , + { + includeDarkMode: true, + includeHighContrast: true, + }, + ) + .addStory( + 'DateRange: work week', + () => , + { + includeDarkMode: true, + includeHighContrast: true, + }, + ) + .addStory( + 'DateRange: week', + () => , + { + includeDarkMode: true, + includeHighContrast: true, + }, + ) + .addStory( + 'DateRange: month', + () => , + { + includeDarkMode: true, + includeHighContrast: true, + }, + ) + .addStory( + 'marked dates', + () => ( + [new Date('3/15/2023'), new Date('3/10/2023')] }, + }} + popover={{ open: true }} + /> + ), + { + includeDarkMode: true, + includeHighContrast: true, + }, + ) .addStory('allowTextInput', () => ) .addStory('Required', () => ) .addStory('Underlined', () => ) From ad885f1d0d30ce7172a9d467945883b1bc4f2ace Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 29 Mar 2023 10:45:37 -0700 Subject: [PATCH 04/10] adding .stories extension --- .../{DatePickerCompat.tsx => DatePickerCompat.stories.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename apps/vr-tests-react-components/src/stories/{DatePickerCompat.tsx => DatePickerCompat.stories.tsx} (100%) diff --git a/apps/vr-tests-react-components/src/stories/DatePickerCompat.tsx b/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx similarity index 100% rename from apps/vr-tests-react-components/src/stories/DatePickerCompat.tsx rename to apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx From ed289ef5aeb5e215698364e609ca870394a91a43 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 29 Mar 2023 11:15:08 -0700 Subject: [PATCH 05/10] adding bundle-size script --- packages/react-components/react-datepicker-compat/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-components/react-datepicker-compat/package.json b/packages/react-components/react-datepicker-compat/package.json index c3784d45833972..863901a7fead2a 100644 --- a/packages/react-components/react-datepicker-compat/package.json +++ b/packages/react-components/react-datepicker-compat/package.json @@ -14,6 +14,7 @@ "license": "MIT", "scripts": { "build": "just-scripts build", + "bundle-size": "bundle-size measure", "clean": "just-scripts clean", "code-style": "just-scripts code-style", "e2e": "cypress run --component", From 2293358a3b29eb327d87fdfa1d988e28fb9ee9d1 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 29 Mar 2023 11:20:03 -0700 Subject: [PATCH 06/10] changes requested --- .../src/stories/DatePickerCompat.stories.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx index 7527c25cc43b53..fa83a91cdc7b21 100644 --- a/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx @@ -1,8 +1,11 @@ import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; -import { DatePicker, DateRangeType } from '@fluentui/react-datepicker-compat'; +import { DatePicker as DatePickerBase, DateRangeType } from '@fluentui/react-datepicker-compat'; import { storiesOf } from '@storybook/react'; import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; +import type { DatePickerProps } from '@fluentui/react-datepicker-compat'; + +const DatePicker = (props: DatePickerProps) => ; storiesOf('DatePicker Compat', module) .addDecorator(TestWrapperDecoratorFixedWidth) @@ -33,7 +36,7 @@ storiesOf('DatePicker Compat', module) }, ) .addStory( - 'DateRange: work week', + 'DateRange: week', () => , { includeDarkMode: true, @@ -41,7 +44,7 @@ storiesOf('DatePicker Compat', module) }, ) .addStory( - 'DateRange: week', + 'DateRange: work week', () => , { includeDarkMode: true, @@ -60,7 +63,6 @@ storiesOf('DatePicker Compat', module) 'marked dates', () => ( [new Date('3/15/2023'), new Date('3/10/2023')] }, }} From b9c2eb46938150b789ee23aca7a38b9d47485b92 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 29 Mar 2023 14:52:59 -0700 Subject: [PATCH 07/10] cropping examples and fixing today --- .../src/stories/DatePickerCompat.stories.tsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx index fa83a91cdc7b21..5f46698cc4eba3 100644 --- a/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx @@ -2,13 +2,20 @@ import * as React from 'react'; import { Steps, StoryWright } from 'storywright'; import { DatePicker as DatePickerBase, DateRangeType } from '@fluentui/react-datepicker-compat'; import { storiesOf } from '@storybook/react'; -import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator'; +import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator'; import type { DatePickerProps } from '@fluentui/react-datepicker-compat'; -const DatePicker = (props: DatePickerProps) => ; +const DatePicker = (props: DatePickerProps) => { + const today = new Date('3/15/2023'); + return ( +
+ +
+ ); +}; storiesOf('DatePicker Compat', module) - .addDecorator(TestWrapperDecoratorFixedWidth) + .addDecorator(TestWrapperDecorator) .addDecorator(story => ( , { includeHighContrast: true, includeDarkMode: true, - }); - -storiesOf('DatePicker Compat', module) - .addDecorator(TestWrapperDecoratorFixedWidth) + }) .addStory( 'DateRange: day', () => , From 823d73637d2a53df776c9ef428a07df6da267f85 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 30 Mar 2023 11:47:12 -0700 Subject: [PATCH 08/10] fixing week days and adding vr test --- .../components/CalendarDayGrid/useCalendarDayGridStyles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts index 1404ba5aa76779..d7f9c5f10dc62b 100644 --- a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts +++ b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts @@ -73,7 +73,7 @@ const useTableStyles = makeStyles({ const useDayCellStyles = makeStyles({ base: { - color: tokens.colorNeutralForeground3, + color: tokens.colorNeutralForeground1, cursor: 'pointer', fontSize: tokens.fontSizeBase200, fontWeight: tokens.fontWeightRegular, @@ -175,7 +175,7 @@ const useWeekNumberCellStyles = makeStyles({ ...shorthands.borderColor(tokens.colorNeutralStroke2), ...shorthands.borderRight('1px', 'solid'), boxSizing: 'border-box', - color: tokens.colorNeutralBackgroundStatic, + color: tokens.colorNeutralForeground4, fontSize: tokens.fontSizeBase200, fontWeight: tokens.fontWeightRegular, height: '28px', From 9988d9e400337ca9d79e0e29876fcab4bf49c3a4 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 30 Mar 2023 11:50:28 -0700 Subject: [PATCH 09/10] adding vr test for show week numberS --- .../src/stories/DatePickerCompat.stories.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx index 5f46698cc4eba3..fa7e76afdb3ece 100644 --- a/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx @@ -78,6 +78,10 @@ storiesOf('DatePicker Compat', module) includeHighContrast: true, }, ) + .addStory('showWeekNumbers', () => , { + includeDarkMode: true, + includeHighContrast: true, + }) .addStory('allowTextInput', () => ) .addStory('Required', () => ) .addStory('Underlined', () => ) From a1a9816983970e43c6d78e28220124442c8a50e1 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 30 Mar 2023 15:56:27 -0700 Subject: [PATCH 10/10] requested changes --- .../src/stories/DatePickerCompat.stories.tsx | 41 ++++++++----------- 1 file changed, 16 insertions(+), 25 deletions(-) diff --git a/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx index fa7e76afdb3ece..a6dcf7050d5791 100644 --- a/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx @@ -30,31 +30,22 @@ storiesOf('DatePicker Compat', module) .addStory('default', () => , { includeHighContrast: true, includeDarkMode: true, - }) - .addStory( - 'DateRange: day', - () => , - { - includeDarkMode: true, - includeHighContrast: true, - }, - ) - .addStory( - 'DateRange: week', - () => , - { - includeDarkMode: true, - includeHighContrast: true, - }, - ) - .addStory( - 'DateRange: work week', - () => , - { - includeDarkMode: true, - includeHighContrast: true, - }, - ) + }); + +storiesOf('DatePicker Compat', module) + .addDecorator(TestWrapperDecorator) + .addDecorator(story => ( + {story()} + )) + .addStory('DateRange: day', () => ( + + )) + .addStory('DateRange: week', () => ( + + )) + .addStory('DateRange: work week', () => ( + + )) .addStory( 'DateRange: month', () => ,