react-examples - Updates styles from makeStylesCompat to makeStyles (m…

…icrosoft#17522)

* react-examples - Updates styles from makeStylesCompat to makeStyle

* Change files

change/@fluentui-react-examples-98100a6e-20e0-4f27-a6ac-b2f144542ef6.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "react-examples - Updates styles from makeStylesCompat to makeStyle",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-examples/src/react-avatar/Avatar/Avatar.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { AvatarExamples } from '@fluentui/example-data';
 import { Button, SpinButton, Stack, ThemeProvider } from '@fluentui/react';
-import { Avatar, AvatarProps, AvatarState, renderAvatar, useAvatar, useAvatarStyles } from '@fluentui/react-avatar';
+import { Avatar, AvatarProps, renderAvatar, useAvatar, useAvatarStyles } from '@fluentui/react-avatar';
 import { useBoolean } from '@fluentui/react-hooks';
 import {
   CalendarIcon,
@@ -17,7 +17,7 @@ import {
   SkypeMinusIcon,
   TelemarketerIcon,
 } from '@fluentui/react-icons-mdl2';
-import { ax, makeStylesCompat } from '@fluentui/react-make-styles';
+import { ax, makeStyles } from '@fluentui/react-make-styles';
 
 import { StoryExample } from '../utils/StoryExample';
 
@@ -222,40 +222,51 @@ export const CustomSizes = () => (
   </StoryExample>
 );
 
-const useRobotAvatarRootStyles = makeStylesCompat<AvatarState>([
-  [null, { borderRadius: '0' }],
-  [s => s.size === 20, { width: '24px' }],
-  [s => s.size === 24, { width: '28px' }],
-  [s => s.size === 28, { width: '32px' }],
-  [s => s.size === 32, { width: '36px' }],
-  [s => s.size === 36, { width: '40px' }],
-  [s => s.size === 40, { width: '44px' }],
-  [s => s.size === 48, { width: '56px' }],
-  [s => s.size === 56, { width: '64px' }],
-  [s => s.size === 64, { width: '72px' }],
-  [s => s.size === 72, { width: '80px' }],
-  [s => s.size === 96, { width: '108px' }],
-  [s => s.size === 120, { width: '128px' }],
-  [s => s.size === 128, { width: '136px' }],
-]);
-
-const useRobotAvatarLabelStyles = makeStylesCompat<AvatarState>([
-  [
-    null,
-    {
-      background: `url('${examples.hexagon}') 0px/contain no-repeat`,
-      borderRadius: '0',
-    },
-  ],
-]);
+const useRobotAvatarStyles = makeStyles({
+  root: { borderRadius: '0' },
+  size20: { width: '24px' },
+  size24: { width: '28px' },
+  size28: { width: '32px' },
+  size32: { width: '36px' },
+  size36: { width: '40px' },
+  size40: { width: '44px' },
+  size48: { width: '56px' },
+  size56: { width: '64px' },
+  size64: { width: '72px' },
+  size72: { width: '80px' },
+  size96: { width: '108px' },
+  size120: { width: '128px' },
+  size128: { width: '136px' },
+  label: {
+    background: `url('${examples.hexagon}') 0px/contain no-repeat`,
+    borderRadius: '0',
+  },
+});
 
 const RobotAvatar = React.forwardRef((props: AvatarProps, ref: React.Ref<HTMLElement>) => {
   const state = useAvatar(props, ref, {
     icon: <ChatBotIcon />,
   });
+  const styles = useRobotAvatarStyles();
 
-  state.className = ax(useRobotAvatarRootStyles(state), state.className);
-  state.label.className = ax(useRobotAvatarLabelStyles(state), state.label.className);
+  state.className = ax(
+    styles.root,
+    state.size === 20 && styles.size20,
+    state.size === 24 && styles.size24,
+    state.size === 28 && styles.size28,
+    state.size === 32 && styles.size32,
+    state.size === 36 && styles.size36,
+    state.size === 40 && styles.size40,
+    state.size === 48 && styles.size48,
+    state.size === 56 && styles.size56,
+    state.size === 64 && styles.size64,
+    state.size === 72 && styles.size72,
+    state.size === 96 && styles.size96,
+    state.size === 120 && styles.size120,
+    state.size === 128 && styles.size128,
+    state.className,
+  );
+  state.label.className = ax(styles.label, state.label.className);
 
   useAvatarStyles(state);
 

packages/react-examples/src/react-avatar/utils/StoryExample.tsx

@@ -1,32 +1,26 @@
 import * as React from 'react';
-import { makeStylesCompat } from '@fluentui/react-make-styles';
+import { makeStyles } from '@fluentui/react-make-styles';
 
-const useStoryExampleRoot = makeStylesCompat([
-  [
-    null,
-    theme => ({
-      padding: '10px',
-      fontFamily: theme.global.type.fontFamilies.base,
-      color: theme.alias.color.neutral.neutralForeground1,
-      background: theme.alias.color.neutral.neutralBackground1,
-    }),
-  ],
-]);
+const useStyles = makeStyles({
+  root: theme => ({
+    padding: '10px',
+    fontFamily: theme.global.type.fontFamilies.base,
+    color: theme.alias.color.neutral.neutralForeground1,
+    background: theme.alias.color.neutral.neutralBackground1,
+  }),
+  content: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    '> *': { margin: '4px' },
+  },
+});
 
-const useStoryExampleContent = makeStylesCompat([
-  [
-    null,
-    {
-      display: 'flex',
-      flexWrap: 'wrap',
-      '> *': { margin: '4px' },
-    },
-  ],
-]);
-
-export const StoryExample = ({ title, children }: React.PropsWithChildren<{ title: string }>) => (
-  <div className={useStoryExampleRoot({})}>
-    <h2>{title}</h2>
-    <div className={useStoryExampleContent({})}>{children}</div>
-  </div>
-);
+export const StoryExample = ({ title, children }: React.PropsWithChildren<{ title: string }>) => {
+  const styles = useStyles();
+  return (
+    <div className={styles.root}>
+      <h2>{title}</h2>
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+};

packages/react-examples/src/react-divider/Divider/Divider.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ax, makeStylesCompat } from '@fluentui/react-make-styles';
+import { ax, makeStyles } from '@fluentui/react-make-styles';
 import { ClockIcon } from '@fluentui/react-icons-mdl2';
 import { Divider, DividerProps } from '@fluentui/react-divider';
 
@@ -10,48 +10,45 @@ export interface DividerStoryProps {
   className?: string;
 }
 
-const useCssClasses = makeStylesCompat([
-  [
-    null,
-    theme => ({
-      margin: `10px 10px 60px 10px`,
+const useStyles = makeStyles({
+  root: theme => ({
+    margin: `10px 10px 60px 10px`,
+    padding: 0,
+    backgroundColor: theme.alias.color.neutral.neutralBackground1,
+    '&>.story': {
+      margin: 0,
       padding: 0,
-      backgroundColor: theme.alias.color.neutral.neutralBackground1,
-      '&>.story': {
-        margin: 0,
-        padding: 0,
-        maxWidth: `100%`,
-        fontFamily: `'Segoe UI', Tahoma, Geneva, Verdana, sans-serif`,
-      },
-      label: {
-        fontWeight: 600,
-        lineHeight: `28px`,
-        margin: `10px 0`,
-      },
-      '& .item': {
-        flex: 1,
-        display: `flex`,
-        alignItems: `flex-start`,
-        flexDirection: `column`,
-        justifyContent: `center`,
-        margin: `10px 0`,
-        width: `100%`,
-        maxWidth: `100%`,
-      },
-      '& .vertical label': {
-        flexShrink: 1,
-        flexGrow: 0,
-        flexBasis: `100%`,
-      },
-      '& .verticalContent': {
-        display: `flex`,
-        flexDirection: `row`,
-        alignSelf: `stretch`,
-        border: `dashed 1px #d0d0d0`,
-      },
-    }),
-  ],
-]);
+      maxWidth: `100%`,
+      fontFamily: `'Segoe UI', Tahoma, Geneva, Verdana, sans-serif`,
+    },
+    label: {
+      fontWeight: 600,
+      lineHeight: `28px`,
+      margin: `10px 0`,
+    },
+    '& .item': {
+      flex: 1,
+      display: `flex`,
+      alignItems: `flex-start`,
+      flexDirection: `column`,
+      justifyContent: `center`,
+      margin: `10px 0`,
+      width: `100%`,
+      maxWidth: `100%`,
+    },
+    '& .vertical label': {
+      flexShrink: 1,
+      flexGrow: 0,
+      flexBasis: `100%`,
+    },
+    '& .verticalContent': {
+      display: `flex`,
+      flexDirection: `row`,
+      alignSelf: `stretch`,
+      border: `dashed 1px #d0d0d0`,
+    },
+  }),
+});
 
 const DividerStory = (props?: DividerStoryProps) => {
   return (
@@ -63,9 +60,9 @@ const DividerStory = (props?: DividerStoryProps) => {
 };
 
 const DividerExamples = (props: DividerProps) => {
-  const classNames = useCssClasses({});
+  const styles = useStyles();
   return (
-    <div className={classNames}>
+    <div className={styles.root}>
       <div className="story">
         <h2>Horizontal Divider</h2>
         <DividerStory label="Default">

packages/react-examples/src/react-make-styles/MakeStylesCompat/Basic.stories.tsx

@@ -1,51 +1,40 @@
-import { ax, makeStylesCompat } from '@fluentui/react-make-styles';
+import { ax, makeStyles } from '@fluentui/react-make-styles';
 import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme, teamsLightTheme } from '@fluentui/react-theme';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-const useBasicStyles = makeStylesCompat<{ primary?: boolean }>([
-  [
-    null,
-    theme => ({
-      border: `5px solid ${theme.alias.color.neutral.neutralStroke1}`,
-      backgroundColor: theme.alias.color.neutral.neutralBackground1,
-      color: theme.alias.color.neutral.neutralForeground1,
+const useStyles = makeStyles({
+  basic: theme => ({
+    border: `5px solid ${theme.alias.color.neutral.neutralStroke1}`,
+    backgroundColor: theme.alias.color.neutral.neutralBackground1,
+    color: theme.alias.color.neutral.neutralForeground1,
 
-      margin: '5px',
-      padding: '5px',
-    }),
-  ],
-  [
-    s => s.primary,
-    theme => ({
-      borderColor: theme.alias.color.neutral.brandForeground,
-      color: theme.alias.color.neutral.brandForeground,
-    }),
-  ],
-]);
-
-const useOverrideStyles = makeStylesCompat<{}>([
-  [
-    null,
-    () => ({
-      color: 'red',
-      borderColor: 'red',
-    }),
-  ],
-]);
+    margin: '5px',
+    padding: '5px',
+  }),
+  primary: theme => ({
+    borderColor: theme.alias.color.neutral.brandForeground,
+    color: theme.alias.color.neutral.brandForeground,
+  }),
+  overrides: {
+    color: 'red',
+    borderColor: 'red',
+  },
+});
 
 const Container: React.FC<{ className?: string; primary?: boolean }> = props => {
-  const className = ax(useBasicStyles({ primary: props.primary }), props.className);
+  const styles = useStyles();
+  const className = ax(styles.basic, props.primary && styles.primary, props.className);
 
   return <div className={className}>{props.children}</div>;
 };
 
 const ContainerWithOverrides: React.FC = props => {
-  const className = useOverrideStyles({});
+  const styles = useStyles();
 
   return (
-    <Container className={className} primary>
+    <Container className={styles.overrides} primary>
       {props.children}
     </Container>
   );

packages/react-examples/src/react-menu/MenuList/MenuList.stories.tsx

@@ -13,26 +13,23 @@ import {
   MenuListProps,
 } from '@fluentui/react-menu';
 import { CutIcon, PasteIcon, EditIcon, AcceptIcon } from '@fluentui/react-icons-mdl2';
-import { makeStylesCompat } from '@fluentui/react-make-styles';
+import { makeStyles } from '@fluentui/react-make-styles';
+
+const useStyles = makeStyles({
+  container: theme => ({
+    backgroundColor: theme.alias.color.neutral.neutralBackground1,
+    minWidth: '128px',
+    minHeight: '48px',
+    maxWidth: '128px',
+    boxShadow: `${theme.alias.shadow.shadow16}`,
+    paddingTop: '4px',
+    paddingBottom: '4px',
+  }),
+});
 
-const useContainerStyles = makeStylesCompat([
-  // This should eventually be the popup container styles
-  [
-    null,
-    theme => ({
-      backgroundColor: theme.alias.color.neutral.neutralBackground1,
-      minWidth: '128px',
-      minHeight: '48px',
-      maxWidth: '128px',
-      boxShadow: `${theme.alias.shadow.shadow16}`,
-      paddingTop: '4px',
-      paddingBottom: '4px',
-    }),
-  ],
-]);
 const Container: React.FC = props => {
-  const classNames = useContainerStyles({});
-  return <div className={classNames}>{props.children}</div>;
+  const styles = useStyles();
+  return <div className={styles.container}>{props.children}</div>;
 };
 
 export const MenuListExample = () => (