Skip to content

fix: Allowing DatePicker to be focusable within FocusZones by default#25428

Merged
khmakoto merged 4 commits intomicrosoft:masterfrom
khmakoto:datePickerInFocusZones
Oct 28, 2022
Merged

fix: Allowing DatePicker to be focusable within FocusZones by default#25428
khmakoto merged 4 commits intomicrosoft:masterfrom
khmakoto:datePickerInFocusZones

Conversation

@khmakoto
Copy link
Member

Previous Behavior

DatePickers were skipped within FocusZones because the data-is-focusable attribute needed for a component to work within a FocusZone was not passed to it.

Before

New Behavior

DatePickers are now focusable within FocusZones because the data-is-focusable attribute is added to them in this PR.

After

Related Issue(s)

Fixes 15509

@khmakoto khmakoto added Component: DatePicker Fluent UI react (v8) Issues about @fluentui/react (v8) labels Oct 27, 2022
@khmakoto khmakoto requested a review from a team as a code owner October 27, 2022 22:26
@khmakoto khmakoto self-assigned this Oct 27, 2022
@fabricteam
Copy link
Collaborator

fabricteam commented Oct 27, 2022

📊 Bundle size report

🤖 This report was generated against 277d440d579167614823f740f58758f05cb40ca2

@size-auditor
Copy link

size-auditor bot commented Oct 27, 2022

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-DatePicker 175.196 kB 175.366 kB ExceedsBaseline     170 bytes

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

Baseline commit: 277d440d579167614823f740f58758f05cb40ca2 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 27, 2022

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 d1328f2:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 27, 2022

Perf Analysis (@fluentui/react)

Scenario Render type Master Ticks PR Ticks Iterations Status
StackWithIntrinsicChildren mount 2349 2439 5000 Possible regression
StackWithTextChildren mount 4740 4953 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1178 1194 5000
Breadcrumb mount 2991 2973 1000
Checkbox mount 2646 2646 5000
CheckboxBase mount 2366 2355 5000
ChoiceGroup mount 4465 4359 5000
ComboBox mount 1279 1278 1000
CommandBar mount 9587 9598 1000
ContextualMenu mount 11457 11282 1000
DefaultButton mount 1385 1393 5000
DetailsRow mount 3605 3602 5000
DetailsRowFast mount 3595 3608 5000
DetailsRowNoStyles mount 3419 3452 5000
Dialog mount 3060 3055 1000
DocumentCardTitle mount 565 583 1000
Dropdown mount 3213 3234 5000
FocusTrapZone mount 2003 2044 5000
FocusZone mount 2002 1983 5000
GroupedList mount 52375 59132 2
GroupedList virtual-rerender 24973 24912 2
GroupedList virtual-rerender-with-unmount 94437 94104 2
GroupedListV2 mount 545 553 2
GroupedListV2 virtual-rerender 542 550 2
GroupedListV2 virtual-rerender-with-unmount 557 562 2
IconButton mount 1909 1928 5000
Label mount 724 739 5000
Layer mount 4186 4330 5000
Link mount 833 825 5000
MenuButton mount 1660 1715 5000
MessageBar mount 2349 2307 5000
Nav mount 3303 3263 1000
OverflowSet mount 1358 1380 5000
Panel mount 2621 2567 1000
Persona mount 1266 1306 1000
Pivot mount 1629 1661 1000
PrimaryButton mount 1515 1502 5000
Rating mount 7052 6978 5000
SearchBox mount 1491 1508 5000
Shimmer mount 2876 2832 5000
Slider mount 2095 2086 5000
SpinButton mount 4658 4651 5000
Spinner mount 801 829 5000
SplitButton mount 3060 3108 5000
Stack mount 826 825 5000
StackWithIntrinsicChildren mount 2349 2439 5000 Possible regression
StackWithTextChildren mount 4740 4953 5000 Possible regression
SwatchColorPicker mount 10529 10386 5000
TagPicker mount 2659 2698 5000
TeachingBubble mount 88338 89084 5000
Text mount 793 792 5000
TextField mount 1597 1597 5000
ThemeProvider mount 1514 1539 5000
ThemeProvider virtual-rerender 1084 1103 5000
ThemeProvider virtual-rerender-with-unmount 2137 2141 5000
Toggle mount 1110 1103 5000
buttonNative mount 548 548 5000

@khmakoto khmakoto merged commit 6c136eb into microsoft:master Oct 28, 2022
@khmakoto khmakoto deleted the datePickerInFocusZones branch October 28, 2022 00:22
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Oct 31, 2022
* master: (22 commits)
  fix(react-menu): removes exposing of internal type FluentTriggerComponent (microsoft#25410)
  fix(react-popover): removes exposing of internal type FluentTriggerComponent (microsoft#25411)
  applying package updates
  fix(react-tooltip): removes exposing of internal type FluentTriggerComponent (microsoft#25409)
  chore: Reducing bundle size of Stack by moving selector used in multiple places to local const (microsoft#25429)
  docs(rfcs): Simple component implementation (microsoft#25139)
  Fix migration publishing (microsoft#25422)
  Integrate storywright for story tests - As part of exploring screener alternative (microsoft#25399)
  fix(react-utilities): exposes internal methods used in API surface (microsoft#25406)
  fix(react-dialog): removes exposing of internal type FluentTriggerComponent (microsoft#25408)
  fix(react-context-selector): exposes internal type ContextSelector (microsoft#25404)
  fix(react-aria): exposes internal leaking types (microsoft#25403)
  fix(react-shared-contexts): exposes internal leaks used in the API surface (microsoft#25405)
  fix(react-positioning): exposes new typings to avoid exposing internal methods (microsoft#25407)
  applying package updates
  fix: Allowing DatePicker to be focusable within FocusZones by default (microsoft#25428)
  fix: Pad in slider so the thumb does not render outside the bounds of the root element (microsoft#25378)
  feat: Add enableScopedSelectors prop to Stack that, when true, makes the Stack styles selectors be more scoped to not be as expensive in style recalculation (microsoft#25397)
  fix(react-avatar): Remove gaps between AvatarGroupItem/OveflowButton and its outline (microsoft#25382)
  fix: Combobox text attribute ignored when empty string is passed (microsoft#24665)
  ...
NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022
…microsoft#25428)

* fix: Allowing DatePicker to be focusable within FocusZones by default.

* Adding change file.

* Adding ability to override data-is-focusable.

* Fixing ssr-tests issue.

Co-authored-by: KHMakoto <humberto_makoto@hotmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Component: DatePicker Fluent UI react (v8) Issues about @fluentui/react (v8)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants