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 00000000000000..9f9ebb9741bd50 --- /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" +} 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 e018d40eb5486e..08cb358f31a8a3 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, styles.root, state.root.className); 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/__snapshots__/TeachingPopoverHeader.test.tsx.snap b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverHeader/__snapshots__/TeachingPopoverHeader.test.tsx.snap index 864e7c31e5b1f9..0e9b197fc87064 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/TeachingPopoverHeader/useTeachingPopoverHeader.tsx b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverHeader/useTeachingPopoverHeader.tsx index e4c154e9a68ccb..30e5e09de49680 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 b2a4c5dfb79607..b4ea139e429d00 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/TeachingPopoverPageCount/useTeachingPopoverPageCountStyles.styles.ts b/packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverPageCount/useTeachingPopoverPageCountStyles.styles.ts index 111ed979326ce3..cf6bbcefd4cb29 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 { const styles = useStyles(); - 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, - state.root.className, - ); + // 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; };