From 19ff3b00298d83b75717c77a0bbe19847b22c006 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Mon, 8 Jan 2024 14:31:23 -0800 Subject: [PATCH 1/5] Minor TeachingPopover style updates and sizing --- .../useTeachingPopoverButtonStyles.styles.ts | 5 ++++- .../useTeachingPopoverHeader.tsx | 4 ++-- .../useTeachingPopoverHeaderStyles.styles.ts | 14 +++++++------- .../useTeachingPopoverSurfaceStyles.styles.ts | 10 ++++++---- 4 files changed, 19 insertions(+), 14 deletions(-) diff --git a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverButton/useTeachingPopoverButtonStyles.styles.ts b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverButton/useTeachingPopoverButtonStyles.styles.ts index e018d40eb5486..eb18da56df5f2 100644 --- a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverButton/useTeachingPopoverButtonStyles.styles.ts +++ b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverButton/useTeachingPopoverButtonStyles.styles.ts @@ -10,6 +10,9 @@ export const teachingPopoverButtonClassNames: SlotClassNames 1; const styles = useStyles(); - state.root.className = mergeClasses(teachingPopoverButtonClassNames.root, state.root.className); + state.root.className = mergeClasses(teachingPopoverButtonClassNames.root, state.root.className, styles.root); if (state.icon) { state.icon.className = mergeClasses(teachingPopoverButtonClassNames.icon, state.icon.className); } diff --git a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx index e4c154e9a68cc..30e5e09de4968 100644 --- a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx +++ b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities'; import type { TeachingPopoverHeaderProps, TeachingPopoverHeaderState } from './TeachingPopoverHeader.types'; -import { Dismiss16Regular, Lightbulb16Regular } from '@fluentui/react-icons'; +import { Dismiss12Regular, Lightbulb16Regular } from '@fluentui/react-icons'; import { usePopoverContext_unstable } from '@fluentui/react-popover'; import { useTeachingPopoverContext_unstable } from '../../TeachingPopoverContext'; @@ -56,7 +56,7 @@ export const useTeachingPopoverHeader_unstable = ( dismissButton: slot.optional(dismissButton, { renderByDefault: true, defaultProps: { - children: , + children: , role: 'img', onClick: onDismissButtonClick, }, diff --git a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.ts b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.ts index b2a4c5dfb7960..b4ea139e429d0 100644 --- a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.ts +++ b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverHeader/useTeachingPopoverHeaderStyles.styles.ts @@ -18,7 +18,7 @@ const useStyles = makeStyles({ fontWeight: tokens.fontWeightSemibold, fontSize: tokens.fontSizeBase200, lineHeight: tokens.lineHeightBase200, - paddingBottom: tokens.spacingVerticalSNudge, + paddingBottom: tokens.spacingVerticalXS, alignItems: 'center', marginTop: tokens.spacingHorizontalNone, marginBottom: tokens.spacingHorizontalNone, @@ -44,15 +44,16 @@ const useStyles = makeStyles({ borderBottomRightRadius: tokens.borderRadiusNone, }), marginInlineStart: 'auto', + ...shorthands.padding(tokens.spacingVerticalXS, tokens.spacingHorizontalXS), }, dismissBrand: { color: tokens.colorNeutralForegroundOnBrand, }, icon: { - height: tokens.lineHeightBase200, - width: 'auto', - lineHeight: tokens.lineHeightBase500, - fontSize: tokens.fontSizeBase500, + height: tokens.fontSizeBase200, + width: tokens.fontSizeBase200, + lineHeight: tokens.lineHeightBase200, + fontSize: tokens.fontSizeBase200, alignItems: 'center', boxSizing: 'content-box', display: 'inline-flex', @@ -62,8 +63,7 @@ const useStyles = makeStyles({ position: 'relative', backgroundColor: tokens.colorTransparentBackground, color: tokens.colorNeutralForeground2, - paddingRight: tokens.spacingHorizontalXS, - marginTop: tokens.spacingVerticalXS, + marginRight: tokens.spacingHorizontalXS, }, iconBrand: { color: tokens.colorNeutralForegroundOnBrand, diff --git a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts index b0251770ca72c..4b3def7984cb8 100644 --- a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts +++ b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts @@ -10,9 +10,9 @@ export const teachingPopoverSurfaceClassNames: SlotClassNames { const styles = useStyles(); + // State will be mutated, keep a reference to root className + const oldRootClassName = state.root.className; const updatedState = usePopoverSurfaceStyles_unstable(state); // Make sure to merge teaching bubble surface on top of popover styles @@ -32,7 +34,7 @@ export const useTeachingPopoverSurfaceStyles_unstable = ( teachingPopoverSurfaceClassNames.root, updatedState.root.className, styles.root, - state.root.className, + oldRootClassName, ); return updatedState; From 7b06153e67626ef99f8afa8684a357fd0ecbc4eb Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Mon, 8 Jan 2024 14:39:39 -0800 Subject: [PATCH 2/5] Add changefile --- ...pover-preview-0453b62f-53e5-4efd-a6c1-c3c45f09ca15.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-teaching-popover-preview-0453b62f-53e5-4efd-a6c1-c3c45f09ca15.json diff --git a/change/@fluentui-react-teaching-popover-preview-0453b62f-53e5-4efd-a6c1-c3c45f09ca15.json b/change/@fluentui-react-teaching-popover-preview-0453b62f-53e5-4efd-a6c1-c3c45f09ca15.json new file mode 100644 index 0000000000000..9f9ebb9741bd5 --- /dev/null +++ b/change/@fluentui-react-teaching-popover-preview-0453b62f-53e5-4efd-a6c1-c3c45f09ca15.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Small style updates, changing 16px icons to 12px, slight padding changes", + "packageName": "@fluentui/react-teaching-popover-preview", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} From 64f2f9e75d036c91caecaf2a432db343c6738427 Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Tue, 9 Jan 2024 09:49:52 -0800 Subject: [PATCH 3/5] Fix up text on default carousel --- .../useTeachingPopoverPageCountStyles.styles.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverPageCount/useTeachingPopoverPageCountStyles.styles.ts b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverPageCount/useTeachingPopoverPageCountStyles.styles.ts index 111ed979326ce..cf6bbcefd4cb2 100644 --- a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverPageCount/useTeachingPopoverPageCountStyles.styles.ts +++ b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverPageCount/useTeachingPopoverPageCountStyles.styles.ts @@ -12,6 +12,7 @@ export const teachingPopoverPageCountClassNames: SlotClassNames Date: Tue, 9 Jan 2024 10:36:02 -0800 Subject: [PATCH 4/5] Correct order of styles --- .../useTeachingPopoverButtonStyles.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverButton/useTeachingPopoverButtonStyles.styles.ts b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverButton/useTeachingPopoverButtonStyles.styles.ts index eb18da56df5f2..08cb358f31a8a 100644 --- a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverButton/useTeachingPopoverButtonStyles.styles.ts +++ b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverButton/useTeachingPopoverButtonStyles.styles.ts @@ -66,7 +66,7 @@ export const useTeachingPopoverButtonStyles_unstable = ( const isCarousel = totalPages > 1; const styles = useStyles(); - state.root.className = mergeClasses(teachingPopoverButtonClassNames.root, state.root.className, styles.root); + state.root.className = mergeClasses(teachingPopoverButtonClassNames.root, styles.root, state.root.className); if (state.icon) { state.icon.className = mergeClasses(teachingPopoverButtonClassNames.icon, state.icon.className); } From f1d64462b4da612fcb5ec7d944c237cedc8d1c0d Mon Sep 17 00:00:00 2001 From: Mitch-At-Work Date: Tue, 9 Jan 2024 11:09:31 -0800 Subject: [PATCH 5/5] Fix up style order --- .../TeachingPopoverHeader.test.tsx.snap | 8 ++++---- .../useTeachingPopoverSurfaceStyles.styles.ts | 14 ++++---------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverHeader/__snapshots__/TeachingPopoverHeader.test.tsx.snap b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverHeader/__snapshots__/TeachingPopoverHeader.test.tsx.snap index 864e7c31e5b1f..0e9b197fc8706 100644 --- a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverHeader/__snapshots__/TeachingPopoverHeader.test.tsx.snap +++ b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverHeader/__snapshots__/TeachingPopoverHeader.test.tsx.snap @@ -33,13 +33,13 @@ exports[`TeachingPopoverHeader renders a default state 1`] = ` aria-hidden="true" class="" fill="currentColor" - height="16" - viewBox="0 0 16 16" - width="16" + height="12" + viewBox="0 0 12 12" + width="12" xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts index 4b3def7984cb8..1c7eca229e1ad 100644 --- a/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts +++ b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts @@ -25,17 +25,11 @@ export const useTeachingPopoverSurfaceStyles_unstable = ( state: TeachingPopoverSurfaceState, ): TeachingPopoverSurfaceState => { const styles = useStyles(); - // State will be mutated, keep a reference to root className - const oldRootClassName = state.root.className; - const updatedState = usePopoverSurfaceStyles_unstable(state); - // Make sure to merge teaching bubble surface on top of popover styles - updatedState.root.className = mergeClasses( - teachingPopoverSurfaceClassNames.root, - updatedState.root.className, - styles.root, - oldRootClassName, - ); + // Make sure to merge teaching bubble surface prior to popover styles + state.root.className = mergeClasses(teachingPopoverSurfaceClassNames.root, styles.root, state.root.className); + + const updatedState = usePopoverSurfaceStyles_unstable(state); return updatedState; };