From 29dd6c730b9c35ae40f56b62934c9cfc3c10e2e4 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 5 May 2023 16:03:49 -0700 Subject: [PATCH 1/7] fix: Update bounds on resize. --- .../src/stories/Coachmark.stories.tsx | 34 +++++++++++++++++-- .../components/Coachmark/Coachmark.base.tsx | 33 ++++++++++++------ 2 files changed, 54 insertions(+), 13 deletions(-) diff --git a/apps/vr-tests/src/stories/Coachmark.stories.tsx b/apps/vr-tests/src/stories/Coachmark.stories.tsx index 220bf4bae29e02..77ba21697ef06b 100644 --- a/apps/vr-tests/src/stories/Coachmark.stories.tsx +++ b/apps/vr-tests/src/stories/Coachmark.stories.tsx @@ -6,7 +6,28 @@ import { Coachmark, DirectionalHint, TeachingBubbleContent, Fabric } from '@flue import { useId } from '@fluentui/react-hooks'; import { DefaultButton } from '@fluentui/react/lib/Button'; -const CoachmarkUsage = ({ isCollapsed = true }: { isCollapsed?: boolean }) => { +const directionalHints = [ + DirectionalHint.topLeftEdge, + DirectionalHint.topCenter, + DirectionalHint.topRightEdge, + DirectionalHint.bottomLeftEdge, + DirectionalHint.bottomCenter, + DirectionalHint.bottomRightEdge, + DirectionalHint.leftTopEdge, + DirectionalHint.leftCenter, + DirectionalHint.leftBottomEdge, + DirectionalHint.rightTopEdge, + DirectionalHint.rightCenter, + DirectionalHint.rightBottomEdge, +]; + +const CoachmarkUsage = ({ + isCollapsed = true, + directionalHint = DirectionalHint.rightTopEdge, +}: { + isCollapsed?: boolean; + directionalHint?: DirectionalHint; +}) => { const targetId = useId(); return ( <> @@ -16,7 +37,7 @@ const CoachmarkUsage = ({ isCollapsed = true }: { isCollapsed?: boolean }) => { ); + }) + .addStory('Positioning', () => { + return ( +
+ {directionalHints.map((directionalHint, index) => ( + + ))} +
+ ); }); diff --git a/packages/react/src/components/Coachmark/Coachmark.base.tsx b/packages/react/src/components/Coachmark/Coachmark.base.tsx index 6ffe5df171362a..c19af462278e25 100644 --- a/packages/react/src/components/Coachmark/Coachmark.base.tsx +++ b/packages/react/src/components/Coachmark/Coachmark.base.tsx @@ -243,10 +243,22 @@ function useListeners( useOnEvent(document, 'focus', dismissOnLostFocus, true); } +// function useGetBounds(props: ICoachmarkProps): IRectangle | undefined { +// // const async = useAsync(); +// const [bounds, setBounds] = React.useState(); + +// React.useEffect(() => { +// setBounds(getBounds(props.isPositionForced, props.positioningContainerProps)); +// }, [props.isPositionForced, props.positioningContainerProps]); + +// return bounds; +// } + function useProximityHandlers( props: ICoachmarkProps, translateAnimationContainer: React.RefObject, openCoachmark: () => void, + setBounds: (bounds: IRectangle | undefined) => void, ) { const { setTimeout, clearTimeout } = useSetTimeout(); @@ -285,6 +297,7 @@ function useProximityHandlers( timeoutIds.push( setTimeout((): void => { setTargetElementRect(); + setBounds(getBounds(props.isPositionForced, props.positioningContainerProps)); }, 100), ); }); @@ -402,15 +415,6 @@ function useDeprecationWarning(props: ICoachmarkProps) { } } -function useGetBounds(props: ICoachmarkProps): IRectangle | undefined { - const async = useAsync(); - const [bounds, setBounds] = React.useState(); - React.useEffect(() => { - async.requestAnimationFrame(() => setBounds(getBounds(props.isPositionForced, props.positioningContainerProps))); - }, [async, props.isPositionForced, props.positioningContainerProps]); - return bounds; -} - const COMPONENT_NAME = 'CoachmarkBase'; export const CoachmarkBase: React.FunctionComponent = React.forwardRef< @@ -426,14 +430,21 @@ export const CoachmarkBase: React.FunctionComponent = React.for const [isCollapsed, openCoachmark] = useCollapsedState(props, entityInnerHostElementRef); const [beakPositioningProps, transformOrigin] = useBeakPosition(props, targetAlignment, targetPosition); const [isMeasuring, entityInnerHostRect] = useEntityHostMeasurements(props, entityInnerHostElementRef); + const [bounds, setBounds] = React.useState( + getBounds(props.isPositionForced, props.positioningContainerProps), + ); const alertText = useAriaAlert(props); const entityHost = useAutoFocus(props); useListeners(props, translateAnimationContainer, openCoachmark); useComponentRef(props); - useProximityHandlers(props, translateAnimationContainer, openCoachmark); + useProximityHandlers(props, translateAnimationContainer, openCoachmark, setBounds); useDeprecationWarning(props); + React.useEffect(() => { + setBounds(getBounds(props.isPositionForced, props.positioningContainerProps)); + }, [props.isPositionForced, props.positioningContainerProps]); + const { beaconColorOne, beaconColorTwo, @@ -484,7 +495,7 @@ export const CoachmarkBase: React.FunctionComponent = React.for finalHeight={finalHeight} ref={forwardedRef} onPositioned={onPositioned} - bounds={useGetBounds(props)} + bounds={bounds} {...positioningContainerProps} >
From 35f2746baffd046cf5a86528913fff4da909d53b Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 5 May 2023 16:05:05 -0700 Subject: [PATCH 2/7] change file --- ...luentui-react-832db8c4-2962-4daf-bf3b-81e8e5b8dd48.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-832db8c4-2962-4daf-bf3b-81e8e5b8dd48.json diff --git a/change/@fluentui-react-832db8c4-2962-4daf-bf3b-81e8e5b8dd48.json b/change/@fluentui-react-832db8c4-2962-4daf-bf3b-81e8e5b8dd48.json new file mode 100644 index 00000000000000..f1059f31391f96 --- /dev/null +++ b/change/@fluentui-react-832db8c4-2962-4daf-bf3b-81e8e5b8dd48.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix(Coachmark): Fix positioning regression and update bounds on resize.", + "packageName": "@fluentui/react", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} From c470236cc414d761c5d6618ed555e5eb26b92b33 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 5 May 2023 16:09:52 -0700 Subject: [PATCH 3/7] remove comment --- .../react/src/components/Coachmark/Coachmark.base.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/react/src/components/Coachmark/Coachmark.base.tsx b/packages/react/src/components/Coachmark/Coachmark.base.tsx index c19af462278e25..d79fed83bb199f 100644 --- a/packages/react/src/components/Coachmark/Coachmark.base.tsx +++ b/packages/react/src/components/Coachmark/Coachmark.base.tsx @@ -243,17 +243,6 @@ function useListeners( useOnEvent(document, 'focus', dismissOnLostFocus, true); } -// function useGetBounds(props: ICoachmarkProps): IRectangle | undefined { -// // const async = useAsync(); -// const [bounds, setBounds] = React.useState(); - -// React.useEffect(() => { -// setBounds(getBounds(props.isPositionForced, props.positioningContainerProps)); -// }, [props.isPositionForced, props.positioningContainerProps]); - -// return bounds; -// } - function useProximityHandlers( props: ICoachmarkProps, translateAnimationContainer: React.RefObject, From 21d5c5058f8b9e5dcc8e5215e2236bf6aa366122 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 5 May 2023 16:49:53 -0700 Subject: [PATCH 4/7] fixing vr-tests --- .../src/react/Coachmark/Coachmark.Basic.Example.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/react-examples/src/react/Coachmark/Coachmark.Basic.Example.tsx b/packages/react-examples/src/react/Coachmark/Coachmark.Basic.Example.tsx index 6312fa7d413d5b..cbbec9ee6d8fae 100644 --- a/packages/react-examples/src/react/Coachmark/Coachmark.Basic.Example.tsx +++ b/packages/react-examples/src/react/Coachmark/Coachmark.Basic.Example.tsx @@ -6,6 +6,7 @@ import { IDropdownOption, TeachingBubbleContent, mergeStyleSets, + Modal, } from '@fluentui/react'; import { DefaultButton, IButtonProps } from '@fluentui/react/lib/Button'; import { useBoolean } from '@fluentui/react-hooks'; @@ -15,9 +16,12 @@ const classNames = mergeStyleSets({ maxWidth: '400px', }, buttonContainer: { - marginTop: '30px', + marginTop: '300px', display: 'inline-block', }, + base: { + backgroundColor: 'lightgray', + }, }); const buttonProps: IButtonProps = { @@ -65,7 +69,7 @@ export const CoachmarkBasicExample: React.FunctionComponent = () => { ); return ( - <> +
{ { )} - + ); }; From cc9f1e138129980d02ee6185405aebf08d590f4a Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Mon, 8 May 2023 10:02:25 -0700 Subject: [PATCH 5/7] updating stories --- .../src/stories/Coachmark.stories.tsx | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/apps/vr-tests/src/stories/Coachmark.stories.tsx b/apps/vr-tests/src/stories/Coachmark.stories.tsx index 77ba21697ef06b..46d413783c51fc 100644 --- a/apps/vr-tests/src/stories/Coachmark.stories.tsx +++ b/apps/vr-tests/src/stories/Coachmark.stories.tsx @@ -10,15 +10,15 @@ const directionalHints = [ DirectionalHint.topLeftEdge, DirectionalHint.topCenter, DirectionalHint.topRightEdge, - DirectionalHint.bottomLeftEdge, - DirectionalHint.bottomCenter, - DirectionalHint.bottomRightEdge, - DirectionalHint.leftTopEdge, - DirectionalHint.leftCenter, - DirectionalHint.leftBottomEdge, DirectionalHint.rightTopEdge, DirectionalHint.rightCenter, DirectionalHint.rightBottomEdge, + DirectionalHint.bottomRightEdge, + DirectionalHint.bottomCenter, + DirectionalHint.bottomLeftEdge, + DirectionalHint.leftBottomEdge, + DirectionalHint.leftCenter, + DirectionalHint.leftTopEdge, ]; const CoachmarkUsage = ({ @@ -110,10 +110,22 @@ storiesOf('Coachmark', module) }) .addStory('Positioning', () => { return ( -
+
{directionalHints.map((directionalHint, index) => ( - +
+ +
))}
); }); + +const gridStyles: React.CSSProperties = { + display: 'grid', + gridTemplateAreas: `". 1 2 3 ." + "12 . . . 4" + "11 . . . 5" + "10 . . . 6" + ". 9 8 7 ."`, + gap: '20px', +}; From 26e60596e7be68266a6df45f27d7f02b9987ca95 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Mon, 8 May 2023 10:30:49 -0700 Subject: [PATCH 6/7] restoring files --- .../src/stories/Coachmark.stories.tsx | 131 ------------------ .../Coachmark/Coachmark.Basic.Example.tsx | 11 +- 2 files changed, 3 insertions(+), 139 deletions(-) delete mode 100644 apps/vr-tests/src/stories/Coachmark.stories.tsx diff --git a/apps/vr-tests/src/stories/Coachmark.stories.tsx b/apps/vr-tests/src/stories/Coachmark.stories.tsx deleted file mode 100644 index 46d413783c51fc..00000000000000 --- a/apps/vr-tests/src/stories/Coachmark.stories.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import * as React from 'react'; -import { Steps, StoryWright } from 'storywright'; -import { storiesOf } from '@storybook/react'; -import { TestWrapperDecorator } from '../utilities/index'; -import { Coachmark, DirectionalHint, TeachingBubbleContent, Fabric } from '@fluentui/react'; -import { useId } from '@fluentui/react-hooks'; -import { DefaultButton } from '@fluentui/react/lib/Button'; - -const directionalHints = [ - DirectionalHint.topLeftEdge, - DirectionalHint.topCenter, - DirectionalHint.topRightEdge, - DirectionalHint.rightTopEdge, - DirectionalHint.rightCenter, - DirectionalHint.rightBottomEdge, - DirectionalHint.bottomRightEdge, - DirectionalHint.bottomCenter, - DirectionalHint.bottomLeftEdge, - DirectionalHint.leftBottomEdge, - DirectionalHint.leftCenter, - DirectionalHint.leftTopEdge, -]; - -const CoachmarkUsage = ({ - isCollapsed = true, - directionalHint = DirectionalHint.rightTopEdge, -}: { - isCollapsed?: boolean; - directionalHint?: DirectionalHint; -}) => { - const targetId = useId(); - return ( - <> -
- -
- - - Welcome to the land of Coachmarks! - - - - ); -}; - -storiesOf('Coachmark', module) - .addDecorator(TestWrapperDecorator) - .addDecorator(story => - // prettier-ignore - - {story()} - , - ) - .addStory('Collapsed', () => ( - - - - )) - .addStory('Rendering Coachmark attached to a rectangle', () => { - const rectangle = { - left: 50, - right: 150, - top: 50, - bottom: 100, - }; - const divStyles: React.CSSProperties = { - background: 'red', - position: 'absolute', - left: rectangle.left, - top: rectangle.top, - width: rectangle.right - rectangle.left, - height: rectangle.bottom - rectangle.top, - }; - const positioningContainerProps = { directionalHint: DirectionalHint.topCenter }; - - return ( - <> -
- - - ); - }) - .addStory('Positioning', () => { - return ( -
- {directionalHints.map((directionalHint, index) => ( -
- -
- ))} -
- ); - }); - -const gridStyles: React.CSSProperties = { - display: 'grid', - gridTemplateAreas: `". 1 2 3 ." - "12 . . . 4" - "11 . . . 5" - "10 . . . 6" - ". 9 8 7 ."`, - gap: '20px', -}; diff --git a/packages/react-examples/src/react/Coachmark/Coachmark.Basic.Example.tsx b/packages/react-examples/src/react/Coachmark/Coachmark.Basic.Example.tsx index cbbec9ee6d8fae..6312fa7d413d5b 100644 --- a/packages/react-examples/src/react/Coachmark/Coachmark.Basic.Example.tsx +++ b/packages/react-examples/src/react/Coachmark/Coachmark.Basic.Example.tsx @@ -6,7 +6,6 @@ import { IDropdownOption, TeachingBubbleContent, mergeStyleSets, - Modal, } from '@fluentui/react'; import { DefaultButton, IButtonProps } from '@fluentui/react/lib/Button'; import { useBoolean } from '@fluentui/react-hooks'; @@ -16,12 +15,9 @@ const classNames = mergeStyleSets({ maxWidth: '400px', }, buttonContainer: { - marginTop: '300px', + marginTop: '30px', display: 'inline-block', }, - base: { - backgroundColor: 'lightgray', - }, }); const buttonProps: IButtonProps = { @@ -69,7 +65,7 @@ export const CoachmarkBasicExample: React.FunctionComponent = () => { ); return ( - + <>
{ { )} - + ); }; From 49e0ecb1a17e5d4b2ad516937b555c4742de7921 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Mon, 8 May 2023 10:32:00 -0700 Subject: [PATCH 7/7] restoring previous files --- .../src/stories/Coachmark.stories.tsx | 89 +++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 apps/vr-tests/src/stories/Coachmark.stories.tsx diff --git a/apps/vr-tests/src/stories/Coachmark.stories.tsx b/apps/vr-tests/src/stories/Coachmark.stories.tsx new file mode 100644 index 00000000000000..220bf4bae29e02 --- /dev/null +++ b/apps/vr-tests/src/stories/Coachmark.stories.tsx @@ -0,0 +1,89 @@ +import * as React from 'react'; +import { Steps, StoryWright } from 'storywright'; +import { storiesOf } from '@storybook/react'; +import { TestWrapperDecorator } from '../utilities/index'; +import { Coachmark, DirectionalHint, TeachingBubbleContent, Fabric } from '@fluentui/react'; +import { useId } from '@fluentui/react-hooks'; +import { DefaultButton } from '@fluentui/react/lib/Button'; + +const CoachmarkUsage = ({ isCollapsed = true }: { isCollapsed?: boolean }) => { + const targetId = useId(); + return ( + <> +
+ +
+ + + Welcome to the land of Coachmarks! + + + + ); +}; + +storiesOf('Coachmark', module) + .addDecorator(TestWrapperDecorator) + .addDecorator(story => + // prettier-ignore + + {story()} + , + ) + .addStory('Collapsed', () => ( + + + + )) + .addStory('Rendering Coachmark attached to a rectangle', () => { + const rectangle = { + left: 50, + right: 150, + top: 50, + bottom: 100, + }; + const divStyles: React.CSSProperties = { + background: 'red', + position: 'absolute', + left: rectangle.left, + top: rectangle.top, + width: rectangle.right - rectangle.left, + height: rectangle.bottom - rectangle.top, + }; + const positioningContainerProps = { directionalHint: DirectionalHint.topCenter }; + + return ( + <> +
+ + + ); + });