TeachingPopover: Minor style changes

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"
+}

packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverButton/useTeachingPopoverButtonStyles.styles.ts

@@ -10,6 +10,9 @@ export const teachingPopoverButtonClassNames: SlotClassNames<TeachingPopoverButt
 };
 
 const useStyles = makeStyles({
+  root: {
+    minWidth: '96px',
+  },
   brandPrimary: {
     ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),
   },
@@ -63,7 +66,7 @@ export const useTeachingPopoverButtonStyles_unstable = (
 
   const isCarousel = totalPages > 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);
   }

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"
       >
         <path
-          d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+          d="m2.09 2.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L6 5.29l3.15-3.14a.5.5 0 1 1 .7.7L6.71 6l3.14 3.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L6 6.71 2.85 9.85a.5.5 0 0 1-.7-.7L5.29 6 2.15 2.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
           fill="currentColor"
         />
       </svg>

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: <Dismiss16Regular />,
+        children: <Dismiss12Regular />,
         role: 'img',
         onClick: onDismissButtonClick,
       },

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,

packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverPageCount/useTeachingPopoverPageCountStyles.styles.ts

@@ -12,6 +12,7 @@ export const teachingPopoverPageCountClassNames: SlotClassNames<TeachingPopoverP
 
 const useStyles = makeStyles({
   root: { display: 'flex', flexDirection: 'row', columnGap: '4px', alignItems: 'center' },
+  carouselText: { color: tokens.colorNeutralForeground3 },
   carouselIcon: {
     display: 'inline-block',
     ...shorthands.border(0),
@@ -45,10 +46,16 @@ export const useTeachingPopoverPageCountStyles_unstable = (state: TeachingPopove
   const styles = useStyles();
   const { appearance } = state;
 
+  const carouselTextMod = state.countStyle === 'text' && appearance !== 'brand' ? styles.carouselText : undefined;
   const carouselIconMod = appearance === 'brand' ? styles.carouselIconBrand : undefined;
   const carouselIconSelectedMod = appearance === 'brand' ? styles.carouselSelectedIconBrand : undefined;
 
-  state.root.className = mergeClasses(teachingPopoverPageCountClassNames.root, styles.root, state.root.className);
+  state.root.className = mergeClasses(
+    teachingPopoverPageCountClassNames.root,
+    carouselTextMod,
+    styles.root,
+    state.root.className,
+  );
 
   state.carouselIcon.className = mergeClasses(
     teachingPopoverPageCountClassNames.carouselIcon,

packages/react-components/react-teaching-popover-preview/src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts

@@ -10,9 +10,9 @@ export const teachingPopoverSurfaceClassNames: SlotClassNames<TeachingPopoverSur
 
 const useStyles = makeStyles({
   root: {
-    ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingVerticalL),
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-    maxWidth: '320px',
+    ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingVerticalL),
+    ...shorthands.borderRadius(tokens.borderRadiusXLarge),
+    ...shorthands.borderWidth('0px'),
     width: '320px',
     boxSizing: 'border-box',
   },
@@ -25,15 +25,11 @@ export const useTeachingPopoverSurfaceStyles_unstable = (
   state: TeachingPopoverSurfaceState,
 ): TeachingPopoverSurfaceState => {
   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;
 };