Skip to content

fix: v8 Calendar focus outline clipping in HCM#26723

Merged
smhigley merged 3 commits intomicrosoft:masterfrom
smhigley:calendar-focus-hcm
Feb 14, 2023
Merged

fix: v8 Calendar focus outline clipping in HCM#26723
smhigley merged 3 commits intomicrosoft:masterfrom
smhigley:calendar-focus-hcm

Conversation

@smhigley
Copy link
Contributor

@smhigley smhigley commented Feb 6, 2023

Previous Behavior

Since cells are positioned and give an z-index value, the focus indicator outline in high contrast mode was getting clipped by cells after it in the DOM:
image

New Behavior

This gives cells a transparent bg in high contrast mode, so the focus and hover indicators do not get clipped. The hover and pressed styles keep their bg, so when a cell is hovered, it will still (intentionally) override any adjacent cell outlines (e.g. so hovering a cell next to a focused cell doesn't give you weird overlapping double lines):
image
image

Related Issue(s)

@smhigley smhigley self-assigned this Feb 6, 2023
@smhigley smhigley requested a review from a team as a code owner February 6, 2023 22:07
@size-auditor
Copy link

size-auditor bot commented Feb 6, 2023

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-WeeklyDayPicker 96.966 kB 96.971 kB ExceedsBaseline     5 bytes
office-ui-fabric-react fluentui-react-DatePicker 175.717 kB 175.722 kB ExceedsBaseline     5 bytes
office-ui-fabric-react fluentui-react-Calendar 116.604 kB 116.609 kB ExceedsBaseline     5 bytes

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

Baseline commit: 22ecddb787ec8626605eb9cd79d8905d93ed179f (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 6, 2023

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

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

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 6, 2023

📊 Bundle size report

🤖 This report was generated against 0b35790d67cad33bd1d52d2418fcca6ef8b4a710

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 6, 2023

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1212 1197 5000
Breadcrumb mount 2848 2894 1000
Checkbox mount 2662 2660 5000
CheckboxBase mount 2362 2384 5000
ChoiceGroup mount 4278 4298 5000
ComboBox mount 1189 1182 1000
CommandBar mount 9522 9563 1000
ContextualMenu mount 13187 12975 1000
DefaultButton mount 1379 1403 5000
DetailsRow mount 3323 3276 5000
DetailsRowFast mount 3302 3301 5000
DetailsRowNoStyles mount 3179 3095 5000
Dialog mount 2941 2974 1000
DocumentCardTitle mount 589 590 1000
Dropdown mount 3196 3144 5000
FocusTrapZone mount 1956 1956 5000
FocusZone mount 1989 1890 5000
GroupedList mount 1853 2059 2
GroupedList virtual-rerender 1082 1103 2
GroupedList virtual-rerender-with-unmount 1591 1604 2
GroupedListV2 mount 566 570 2
GroupedListV2 virtual-rerender 550 549 2
GroupedListV2 virtual-rerender-with-unmount 557 572 2
IconButton mount 1803 1807 5000
Label mount 753 754 5000
Layer mount 4216 4185 5000
Link mount 878 861 5000
MenuButton mount 1626 1609 5000
MessageBar mount 2347 2334 5000
Nav mount 3330 3079 1000
OverflowSet mount 1421 1403 5000
Panel mount 2513 2497 1000
Persona mount 1291 1299 1000
Pivot mount 1564 1519 1000
PrimaryButton mount 1503 1505 5000
Rating mount 6957 6961 5000
SearchBox mount 1482 1508 5000
Shimmer mount 2968 2930 5000
Slider mount 2083 2107 5000
SpinButton mount 4308 4237 5000
Spinner mount 825 838 5000
SplitButton mount 2818 2863 5000
Stack mount 855 858 5000
StackWithIntrinsicChildren mount 2265 2274 5000
StackWithTextChildren mount 4936 4925 5000
SwatchColorPicker mount 9469 9563 5000
TagPicker mount 2356 2349 5000
TeachingBubble mount 79644 80166 5000
Text mount 813 822 5000
TextField mount 1538 1591 5000
ThemeProvider mount 1445 1459 5000
ThemeProvider virtual-rerender 1141 1144 5000
ThemeProvider virtual-rerender-with-unmount 2000 2002 5000
Toggle mount 1149 1149 5000
buttonNative mount 533 551 5000

@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@smhigley smhigley added this pull request to the merge queue Feb 13, 2023
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to no response for status checks Feb 14, 2023
@smhigley smhigley merged commit ef43ec5 into microsoft:master Feb 14, 2023
spmonahan pushed a commit to spmonahan/fluentui that referenced this pull request Feb 15, 2023
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.

5 participants