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

fix(TimePicker): Selection now works in locales that don't use "am"/"pm" in their time format #28469

Merged
merged 1 commit into from
Aug 3, 2023

Conversation

behowell
Copy link
Contributor

Previous Behavior

TimePicker selection does not work when using a locale that doesn't use the characters "am"/"pm" in the time format, such as Japanese. This happens because the TimePicker is attempting to parse the locale-formatted time string of the new value when the selection changes, using a parsing function that is not locale-aware.

New Behavior

Save the Date object in each of the ComboBox items used by TimePicker. When a new selection is made, use the Date object itself, rather than parsing the formatted time string.

Related Issue(s)

@codesandbox-ci
Copy link

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit edd5609:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

📊 Bundle size report

🤖 This report was generated against e3a0d071997ee796ba7d0931b6d3a5a341fb3921

@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@size-auditor
Copy link

size-auditor bot commented Jul 10, 2023

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-TimePicker 231.801 kB 231.873 kB ExceedsBaseline     72 bytes
office-ui-fabric-react fluentui-react-northstar-Debug 10.621 kB  Deleted       BelowBaseline     -10.621 kB
office-ui-fabric-react fluentui-react-northstar-Design 36.723 kB  Deleted       BelowBaseline     -36.723 kB
office-ui-fabric-react fluentui-react-northstar-SvgIcon 37.687 kB  Deleted       BelowBaseline     -37.687 kB
office-ui-fabric-react fluentui-react-northstar-Flex 48.871 kB  Deleted       BelowBaseline     -48.871 kB
office-ui-fabric-react fluentui-react-northstar-Animation 56.773 kB  Deleted       BelowBaseline     -56.773 kB
office-ui-fabric-react fluentui-react-northstar-Portal 59.811 kB  Deleted       BelowBaseline     -59.811 kB
office-ui-fabric-react fluentui-react-northstar-Grid 72.891 kB  Deleted       BelowBaseline     -72.891 kB
office-ui-fabric-react fluentui-react-northstar-Image 76.159 kB  Deleted       BelowBaseline     -76.159 kB
office-ui-fabric-react fluentui-react-northstar-Text 76.755 kB  Deleted       BelowBaseline     -76.755 kB
office-ui-fabric-react fluentui-react-northstar-TextArea 76.883 kB  Deleted       BelowBaseline     -76.883 kB
office-ui-fabric-react fluentui-react-northstar-Header 77.448 kB  Deleted       BelowBaseline     -77.448 kB
office-ui-fabric-react fluentui-react-northstar-Box 77.974 kB  Deleted       BelowBaseline     -77.974 kB
office-ui-fabric-react fluentui-react-northstar-Layout 78.055 kB  Deleted       BelowBaseline     -78.055 kB
office-ui-fabric-react fluentui-react-northstar-Video 78.187 kB  Deleted       BelowBaseline     -78.187 kB
office-ui-fabric-react fluentui-react-northstar-Segment 78.983 kB  Deleted       BelowBaseline     -78.983 kB
office-ui-fabric-react fluentui-react-northstar-Status 79.184 kB  Deleted       BelowBaseline     -79.184 kB
office-ui-fabric-react fluentui-react-northstar-Divider 79.414 kB  Deleted       BelowBaseline     -79.414 kB
office-ui-fabric-react fluentui-react-northstar-Reaction 80.16 kB  Deleted       BelowBaseline     -80.16 kB
office-ui-fabric-react fluentui-react-northstar-Skeleton 80.46 kB  Deleted       BelowBaseline     -80.46 kB
office-ui-fabric-react fluentui-react-northstar-Label 80.804 kB  Deleted       BelowBaseline     -80.804 kB
office-ui-fabric-react fluentui-react-northstar-ItemLayout 80.989 kB  Deleted       BelowBaseline     -80.989 kB
office-ui-fabric-react fluentui-react-northstar-Loader 81.579 kB  Deleted       BelowBaseline     -81.579 kB
office-ui-fabric-react fluentui-react-northstar-Breadcrumb 82.964 kB  Deleted       BelowBaseline     -82.964 kB
office-ui-fabric-react fluentui-react-northstar-Checkbox 83.063 kB  Deleted       BelowBaseline     -83.063 kB
office-ui-fabric-react fluentui-react-northstar-Avatar 83.329 kB  Deleted       BelowBaseline     -83.329 kB
office-ui-fabric-react fluentui-react-northstar-Table 84.172 kB  Deleted       BelowBaseline     -84.172 kB
office-ui-fabric-react fluentui-react-northstar-Embed 84.77 kB  Deleted       BelowBaseline     -84.77 kB
office-ui-fabric-react fluentui-react-northstar-Card 85.931 kB  Deleted       BelowBaseline     -85.931 kB
office-ui-fabric-react fluentui-react-northstar-Button 86.433 kB  Deleted       BelowBaseline     -86.433 kB
office-ui-fabric-react fluentui-react-northstar-RadioGroup 86.755 kB  Deleted       BelowBaseline     -86.755 kB
office-ui-fabric-react fluentui-react-northstar-Pill 86.879 kB  Deleted       BelowBaseline     -86.879 kB
office-ui-fabric-react fluentui-react-northstar-Slider 87.909 kB  Deleted       BelowBaseline     -87.909 kB
office-ui-fabric-react fluentui-react-northstar-Accordion 89.075 kB  Deleted       BelowBaseline     -89.075 kB
office-ui-fabric-react fluentui-react-northstar-Attachment 90.341 kB  Deleted       BelowBaseline     -90.341 kB
office-ui-fabric-react fluentui-react-northstar-Alert 91.103 kB  Deleted       BelowBaseline     -91.103 kB
office-ui-fabric-react fluentui-react-northstar-Tree 91.442 kB  Deleted       BelowBaseline     -91.442 kB
office-ui-fabric-react fluentui-react-northstar-Input 91.733 kB  Deleted       BelowBaseline     -91.733 kB
office-ui-fabric-react fluentui-react-northstar-List 92.24 kB  Deleted       BelowBaseline     -92.24 kB
office-ui-fabric-react fluentui-react-northstar-Provider 94.914 kB  Deleted       BelowBaseline     -94.914 kB
office-ui-fabric-react fluentui-react-northstar-Form 96.154 kB  Deleted       BelowBaseline     -96.154 kB
office-ui-fabric-react fluentui-react-northstar-Carousel 109.432 kB  Deleted       BelowBaseline     -109.432 kB
office-ui-fabric-react fluentui-react-northstar-Tooltip 112.1 kB  Deleted       BelowBaseline     -112.1 kB
office-ui-fabric-react fluentui-react-northstar-Dialog 117.057 kB  Deleted       BelowBaseline     -117.057 kB
office-ui-fabric-react fluentui-react-northstar-Menu 132.497 kB  Deleted       BelowBaseline     -132.497 kB
office-ui-fabric-react fluentui-react-northstar-Popup 138.468 kB  Deleted       BelowBaseline     -138.468 kB
office-ui-fabric-react fluentui-react-northstar-Chat 159.446 kB  Deleted       BelowBaseline     -159.446 kB
office-ui-fabric-react fluentui-react-northstar-MenuButton 168.377 kB  Deleted       BelowBaseline     -168.377 kB
office-ui-fabric-react fluentui-react-northstar-Toolbar 180.854 kB  Deleted       BelowBaseline     -180.854 kB
office-ui-fabric-react fluentui-react-northstar-SplitButton 184.697 kB  Deleted       BelowBaseline     -184.697 kB
office-ui-fabric-react fluentui-react-northstar-Datepicker 193.768 kB  Deleted       BelowBaseline     -193.768 kB
office-ui-fabric-react fluentui-react-northstar-Dropdown 203.774 kB  Deleted       BelowBaseline     -203.774 kB

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: e3a0d071997ee796ba7d0931b6d3a5a341fb3921 (build)

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 613 612 5000
Breadcrumb mount 1679 1686 1000
Checkbox mount 1642 1695 5000
CheckboxBase mount 1438 1480 5000
ChoiceGroup mount 2883 2859 5000
ComboBox mount 646 642 1000
CommandBar mount 6064 6146 1000
ContextualMenu mount 12775 11762 1000
DefaultButton mount 751 744 5000
DetailsRow mount 2140 2163 5000
DetailsRowFast mount 2147 2174 5000
DetailsRowNoStyles mount 2055 1986 5000
Dialog mount 2613 2630 1000
DocumentCardTitle mount 233 225 1000
Dropdown mount 2034 1965 5000
FocusTrapZone mount undefined err 5000
FocusZone mount 1077 1046 5000
GroupedList mount 41455 41303 2
GroupedList virtual-rerender 19723 19816 2
GroupedList virtual-rerender-with-unmount 50136 50353 2
GroupedListV2 mount 220 225 2
GroupedListV2 virtual-rerender 216 212 2
GroupedListV2 virtual-rerender-with-unmount 220 227 2
IconButton mount 1083 1080 5000
Label mount 330 335 5000
Layer mount 2718 2735 5000
Link mount 389 387 5000
MenuButton mount 933 942 5000
MessageBar mount 21676 21675 5000
Nav mount 1907 1920 1000
OverflowSet mount 782 788 5000
Panel mount 1751 1781 1000
Persona mount 744 762 1000
Pivot mount 863 872 1000
PrimaryButton mount 851 823 5000
Rating mount 4504 4598 5000
SearchBox mount 903 868 5000
Shimmer mount 1780 1826 5000
Slider mount 1306 1302 5000
SpinButton mount 2778 2803 5000
Spinner mount 371 386 5000
SplitButton mount 1792 1825 5000
Stack mount 408 402 5000
StackWithIntrinsicChildren mount 855 847 5000
StackWithTextChildren mount 2637 2629 5000
SwatchColorPicker mount 6024 6044 5000
TagPicker mount 1432 1413 5000
Text mount 382 363 5000
TextField mount 897 939 5000
ThemeProvider mount 818 814 5000
ThemeProvider virtual-rerender 587 580 5000
ThemeProvider virtual-rerender-with-unmount 1286 1273 5000
Toggle mount 588 635 5000
buttonNative mount 192 190 5000

@behowell behowell merged commit 1d1aa7c into microsoft:master Aug 3, 2023
@behowell behowell deleted the v8/timepicker/localization-fix branch August 3, 2023 20:57
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 7, 2023
* master:
  chore(cxe-prg): migrate to new slot API (microsoft#28752)
  chore(teams-prg): migrate to new slot API (microsoft#28751)
  chore: re-export slot and assertSlots methods (microsoft#28755)
  Docs(react-tree): Improve docs and stories (microsoft#28741)
  feat: implements nested tree selection (microsoft#28668)
  applying package updates
  applying package updates
  feature(react-utilities): implements new slot methods (`slot` and `assertSlots`) (microsoft#28373)
  fix(TimePicker): Selection now works in locales that don't use "am"/"pm" in their time format (microsoft#28469)
  bugfix: ensures controlled state works properly + (microsoft#28665)
  feat(tokens): Add status color tokens (microsoft#28006)
  feat(tokens): Add colorBrandStroke2Contrast and colorNeutralStrokeAlpha2 (microsoft#28638)
  Made BreadcrumbButton consistent with Item and Link (microsoft#28672)
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Aug 7, 2023
* master:
  chore(cxe-prg): migrate to new slot API (microsoft#28752)
  chore(teams-prg): migrate to new slot API (microsoft#28751)
  chore: re-export slot and assertSlots methods (microsoft#28755)
  Docs(react-tree): Improve docs and stories (microsoft#28741)
  feat: implements nested tree selection (microsoft#28668)
  applying package updates
  applying package updates
  feature(react-utilities): implements new slot methods (`slot` and `assertSlots`) (microsoft#28373)
  fix(TimePicker): Selection now works in locales that don't use "am"/"pm" in their time format (microsoft#28469)
  bugfix: ensures controlled state works properly + (microsoft#28665)
  feat(tokens): Add status color tokens (microsoft#28006)
  feat(tokens): Add colorBrandStroke2Contrast and colorNeutralStrokeAlpha2 (microsoft#28638)
  Made BreadcrumbButton consistent with Item and Link (microsoft#28672)
  fix(EventListener): do not use `defaultProps` (microsoft#28725)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: TimePicker selection is not working using useHour12 property on a browser displaying Japanese language.
5 participants