fix(Coachmark): Remove positioning regression and update bounds on resize #27782

sopranopillow · 2023-05-05T23:06:52Z

Previous Behavior

Coachmark would position its beak incorrectly when using right/left center alignment as described in #27280. It would also look detached from the DOM pair as described in #25415 when zooming in.

New Behavior

Coachmark now updates its bounds if a resize event is caught. This will fix the issue with Coachmark looking detached from the DOM pair.

An async request animation frame was removed where a regression with the positioning on left/right center would happen. Refer to the previous PR #26725 that introduced it.

Related Issue(s)

Fixes [Bug]: Coachmark is not positioning correctly when using "right/left center" #27280

size-auditor · 2023-05-05T23:21:27Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-Coachmark	86.74 kB	86.775 kB	35 bytes

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: 3aecae7fc8af9dc0c4de35f58a61b76ab9e9a659 (build)

codesandbox-ci · 2023-05-05T23:21:40Z

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 49e0ecb:

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

fabricteam · 2023-05-05T23:23:03Z

📊 Bundle size report

_{🤖 This report was generated against 3aecae7fc8af9dc0c4de35f58a61b76ab9e9a659}

apps/vr-tests/src/stories/Coachmark.stories.tsx

fabricteam · 2023-05-05T23:38:33Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	797	802	5000
Breadcrumb	mount	2056	2091	1000
Checkbox	mount	2109	2091	5000
CheckboxBase	mount	1834	1864	5000
ChoiceGroup	mount	3571	3563	5000
ComboBox	mount	788	807	1000
CommandBar	mount	7797	7796	1000
ContextualMenu	mount	13571	13943	1000
DefaultButton	mount	922	948	5000
DetailsRow	mount	2676	2684	5000
DetailsRowFast	mount	2659	2682	5000
DetailsRowNoStyles	mount	2460	2449	5000
Dialog	mount	3290	3227	1000
DocumentCardTitle	mount	303	302	1000
Dropdown	mount	2477	2455	5000
FocusTrapZone	mount	1418	1432	5000
FocusZone	mount	1378	1385	5000
GroupedList	mount	45646	45644	2
GroupedList	virtual-rerender	22146	22095	2
GroupedList	virtual-rerender-with-unmount	64859	62657	2
GroupedListV2	mount	290	302	2
GroupedListV2	virtual-rerender	266	280	2
GroupedListV2	virtual-rerender-with-unmount	296	294	2
IconButton	mount	1318	1334	5000
Label	mount	461	458	5000
Layer	mount	3419	3456	5000
Link	mount	523	529	5000
MenuButton	mount	1164	1173	5000
MessageBar	mount	26314	26323	5000
Nav	mount	2372	2352	1000
OverflowSet	mount	1004	1027	5000
Panel	mount	2155	2198	1000
Persona	mount	922	927	1000
Pivot	mount	1084	1073	1000
PrimaryButton	mount	1077	1050	5000
Rating	mount	5746	5812	5000
SearchBox	mount	1124	1114	5000
Shimmer	mount	2358	2343	5000
Slider	mount	1652	1687	5000
SpinButton	mount	3439	3420	5000
Spinner	mount	544	525	5000
SplitButton	mount	2202	2199	5000
Stack	mount	534	551	5000
StackWithIntrinsicChildren	mount	1098	1090	5000
StackWithTextChildren	mount	3386	3397	5000
SwatchColorPicker	mount	7428	7438	5000
TagPicker	mount	1694	1762	5000
Text	mount	503	512	5000
TextField	mount	1130	1143	5000
ThemeProvider	mount	1024	1032	5000
ThemeProvider	virtual-rerender	816	812	5000
ThemeProvider	virtual-rerender-with-unmount	1544	1548	5000
Toggle	mount	797	792	5000
buttonNative	mount	253	254	5000

…to coachmark/fix

…entui into coachmark/fix

msft-fluent-ui-bot · 2023-05-09T07:39:31Z

🎉@fluentui/react@v8.109.3 has been released which incorporates this pull request.:tada:

Handy links:

* master: feat(react-drawer): create DrawerBody component (microsoft#27581) feat(react-tree): TreeItem itemType restructure (microsoft#27799) feat: Implement state management for toasts (microsoft#27800) bugfix: fix VisibleFlatTreeItemGenerator omitting visible items (microsoft#27802) fix: overflowManager should always dispatch initial state (microsoft#27756) fix(react-badge): Remove white border around presence badge when on a dark background (microsoft#27780) react-tags: rename dismissable to dismissible (microsoft#27798) chore: update ownership of react-tags (microsoft#27795) applying package updates feat(react-tags): Replace `avatar` prop with `media`; polish styles for spacing (microsoft#27725) RFC appearance migration (microsoft#24181) chore(react-skeleton): Release react-skeleton to stable (microsoft#27767) fix(Coachmark): Remove positioning regression and update bounds on resize (microsoft#27782) applying package updates fix(v8): explicitly publish dist folder after node 16 upgrade (microsoft#27769)

* feat/drawer-header: fix: add changefiles feat(react-drawer): create DrawerBody component (microsoft#27581) feat(react-tree): TreeItem itemType restructure (microsoft#27799) feat: Implement state management for toasts (microsoft#27800) bugfix: fix VisibleFlatTreeItemGenerator omitting visible items (microsoft#27802) fix: overflowManager should always dispatch initial state (microsoft#27756) fix(react-badge): Remove white border around presence badge when on a dark background (microsoft#27780) react-tags: rename dismissable to dismissible (microsoft#27798) chore: update ownership of react-tags (microsoft#27795) applying package updates feat(react-tags): Replace `avatar` prop with `media`; polish styles for spacing (microsoft#27725) RFC appearance migration (microsoft#24181) chore(react-skeleton): Release react-skeleton to stable (microsoft#27767) fix(Coachmark): Remove positioning regression and update bounds on resize (microsoft#27782) applying package updates fix(v8): explicitly publish dist folder after node 16 upgrade (microsoft#27769)

* master: (29 commits) feat(react-drawer): create DrawerBody component (microsoft#27581) feat(react-tree): TreeItem itemType restructure (microsoft#27799) feat: Implement state management for toasts (microsoft#27800) bugfix: fix VisibleFlatTreeItemGenerator omitting visible items (microsoft#27802) fix: overflowManager should always dispatch initial state (microsoft#27756) fix(react-badge): Remove white border around presence badge when on a dark background (microsoft#27780) react-tags: rename dismissable to dismissible (microsoft#27798) chore: update ownership of react-tags (microsoft#27795) applying package updates feat(react-tags): Replace `avatar` prop with `media`; polish styles for spacing (microsoft#27725) RFC appearance migration (microsoft#24181) chore(react-skeleton): Release react-skeleton to stable (microsoft#27767) fix(Coachmark): Remove positioning regression and update bounds on resize (microsoft#27782) applying package updates fix(v8): explicitly publish dist folder after node 16 upgrade (microsoft#27769) applying package updates fix: do not use outlineStyle: none in createCustomFocusIndicatorStyle (microsoft#26089) fix: Scale pulse animation with percentages and flip wave animation's direction (microsoft#27654) Publish dist folder that got removed due to node 16 upgrade (microsoft#27764) fix(scripts-update-release-notes): properly handle git for-each-ref cmd call to not fail release notes update (microsoft#27757) ...

sopranopillow added 2 commits May 5, 2023 16:03

fix: Update bounds on resize.

29dd6c7

change file

35f2746

msft-fluent-ui-bot added the Component: Coachmark label May 5, 2023

msft-fluent-ui-bot assigned bsunderhus May 5, 2023

msft-fluent-ui-bot added the Area: Components label May 5, 2023

remove comment

c470236

sopranopillow assigned sopranopillow and unassigned bsunderhus May 5, 2023

fabricteam reviewed May 5, 2023

View reviewed changes

apps/vr-tests/src/stories/Coachmark.stories.tsx Outdated Show resolved Hide resolved

fixing vr-tests

21d5c50

micahgodbolt approved these changes May 8, 2023

View reviewed changes

micahgodbolt and others added 6 commits May 8, 2023 08:15

Merge branch 'master' into coachmark/fix

835a813

updating stories

cc9f1e1

Merge branch 'master' of https://www.github.com/microsoft/fluentui in…

5244c2a

…to coachmark/fix

Merge branch 'coachmark/fix' of github.com-personal:sopranopillow/flu…

f99f549

…entui into coachmark/fix

restoring files

26e6059

restoring previous files

49e0ecb

sopranopillow marked this pull request as ready for review May 8, 2023 17:36

sopranopillow requested review from a team as code owners May 8, 2023 17:36

sopranopillow merged commit 347e2f6 into microsoft:master May 8, 2023

sopranopillow deleted the coachmark/fix branch May 8, 2023 18:14

msft-fluent-ui-bot mentioned this pull request May 9, 2023

[Bug]: Coachmark is not positioning correctly when using "right/left center" #27280

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(Coachmark): Remove positioning regression and update bounds on resize #27782

fix(Coachmark): Remove positioning regression and update bounds on resize #27782

sopranopillow commented May 5, 2023 •

edited

Loading

size-auditor bot commented May 5, 2023 •

edited

Loading

codesandbox-ci bot commented May 5, 2023 •

edited

Loading

fabricteam commented May 5, 2023 •

edited

Loading

fabricteam commented May 5, 2023 •

edited

Loading

msft-fluent-ui-bot commented May 9, 2023

fix(Coachmark): Remove positioning regression and update bounds on resize #27782

fix(Coachmark): Remove positioning regression and update bounds on resize #27782

Conversation

sopranopillow commented May 5, 2023 • edited Loading

Previous Behavior

New Behavior

Related Issue(s)

size-auditor bot commented May 5, 2023 • edited Loading

Asset size changes

codesandbox-ci bot commented May 5, 2023 • edited Loading

fabricteam commented May 5, 2023 • edited Loading

📊 Bundle size report

fabricteam commented May 5, 2023 • edited Loading

Perf Analysis (@fluentui/react)

msft-fluent-ui-bot commented May 9, 2023

sopranopillow commented May 5, 2023 •

edited

Loading

size-auditor bot commented May 5, 2023 •

edited

Loading

codesandbox-ci bot commented May 5, 2023 •

edited

Loading

fabricteam commented May 5, 2023 •

edited

Loading

fabricteam commented May 5, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)