feat(styles): typing improvements (#2312)

* -typing improvements

* -typing improvements

Author: mnajdova

CHANGELOG.md

@@ -28,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Restricted prop set in the `List` & `ListItem` @layershifter ([#2238](https://github.com/microsoft/fluent-ui-react/pull/2238))
 - Remove `mountDocument` prop in `Popup` & `MenuButton` components @layershifter ([#2286](https://github.com/microsoft/fluent-ui-react/pull/2286))
 - Remove `toRefObject` function @layershifter ([#2287](https://github.com/microsoft/fluent-ui-react/pull/2287))
+- Add typing `ComponentSlotStylesResolved`, that replaces the incorrect `ComponentSlotStylesPrepared` in the return value of `useStyles`, `renderComponent`, `createComponent` @mnajdova ([#2312](https://github.com/microsoft/fluent-ui-react/pull/2312))
 
 ### Fixes
 - Fix styleParam to always be required in the styles functions @layershifter, @mnajdova ([#2235](https://github.com/microsoft/fluent-ui-react/pull/2235))

packages/react-bindings/src/hooks/useStyles.ts

@@ -1,6 +1,6 @@
 import {
   ComponentSlotStyle,
-  ComponentSlotStylesPrepared,
+  ComponentSlotStylesResolved,
   ComponentVariablesInput,
   DebugData,
   emptyTheme,
@@ -27,7 +27,7 @@ type UseStylesOptions<StyleProps extends PrimitiveProps> = {
 
 type UseStylesResult = {
   classes: ComponentSlotClasses
-  styles: ComponentSlotStylesPrepared
+  styles: ComponentSlotStylesResolved
 }
 
 type InlineStyleProps<StyleProps> = {

packages/react-bindings/src/styles/getStyles.ts

@@ -2,6 +2,7 @@ import {
   callable,
   ComponentSlotStylesInput,
   ComponentSlotStylesPrepared,
+  ComponentSlotStylesResolved,
   ComponentStyleFunctionParam,
   ComponentVariablesObject,
   DebugData,
@@ -37,7 +38,7 @@ type GetStylesOptions = StylesContextValue<{
 export type GetStylesResult = {
   classes: ComponentSlotClasses
   variables: ComponentVariablesObject
-  styles: ComponentSlotStylesPrepared
+  styles: ComponentSlotStylesResolved
   theme: StylesContextValue['theme']
 }
 

packages/react/src/components/Chat/ChatItem.tsx

@@ -18,7 +18,7 @@ import {
 } from '../../utils'
 import Box, { BoxProps } from '../Box/Box'
 
-import { ComponentSlotStylesPrepared } from '@fluentui/styles'
+import { ComponentSlotStylesResolved } from '@fluentui/styles'
 import ChatMessage from './ChatMessage'
 
 export interface ChatItemSlotClassNames {
@@ -86,7 +86,7 @@ class ChatItem extends UIComponent<WithAsProp<ChatItemProps>, any> {
     )
   }
 
-  renderChatItem(styles: ComponentSlotStylesPrepared) {
+  renderChatItem(styles: ComponentSlotStylesResolved) {
     const { gutter, contentPosition } = this.props
     const gutterElement =
       gutter &&

packages/react/src/components/Chat/ChatMessage.tsx

@@ -40,7 +40,7 @@ import { MenuItemProps } from '../Menu/MenuItem'
 import Text, { TextProps } from '../Text/Text'
 import Reaction, { ReactionProps } from '../Reaction/Reaction'
 import { ReactionGroupProps } from '../Reaction/ReactionGroup'
-import { ComponentSlotStylesPrepared } from '@fluentui/styles'
+import { ComponentSlotStylesResolved } from '@fluentui/styles'
 
 export interface ChatMessageSlotClassNames {
   actionMenu: string
@@ -212,7 +212,7 @@ class ChatMessage extends UIComponent<WithAsProp<ChatMessageProps>, ChatMessageS
 
   renderActionMenu(
     actionMenu: ChatMessageProps['actionMenu'],
-    styles: ComponentSlotStylesPrepared,
+    styles: ComponentSlotStylesResolved,
   ) {
     const { unstable_overflow: overflow, positionActionMenu } = this.props
     const { messageNode } = this.state

packages/react/src/utils/createComponent.tsx

@@ -3,7 +3,7 @@ import {
   ReactAccessibilityBehavior,
   AccessibilityActionHandlers,
 } from '@fluentui/react-bindings'
-import { ComponentSlotStylesPrepared } from '@fluentui/styles'
+import { ComponentSlotStylesResolved } from '@fluentui/styles'
 import * as _ from 'lodash'
 import * as React from 'react'
 
@@ -14,7 +14,7 @@ export interface CreateComponentRenderConfig {
   accessibility: ReactAccessibilityBehavior
   classes: ComponentSlotClasses
   rtl: boolean
-  styles: ComponentSlotStylesPrepared
+  styles: ComponentSlotStylesResolved
 }
 
 export interface CreateComponentConfig<P> {

packages/react/src/utils/renderComponent.tsx

@@ -11,7 +11,7 @@ import {
 } from '@fluentui/react-bindings'
 import {
   emptyTheme,
-  ComponentSlotStylesPrepared,
+  ComponentSlotStylesResolved,
   ComponentVariablesObject,
   DebugData,
   PropsWithVarsAndStyles,
@@ -28,7 +28,7 @@ export interface RenderResultConfig<P> {
   classes: ComponentSlotClasses
   unhandledProps: Props
   variables: ComponentVariablesObject
-  styles: ComponentSlotStylesPrepared
+  styles: ComponentSlotStylesResolved
   accessibility: ReactAccessibilityBehavior
   rtl: boolean
   theme: ThemePrepared

packages/styles/src/types.ts

@@ -188,6 +188,8 @@ export interface ComponentSlotStylesInput<TProps = {}, TVars = {}>
 export interface ComponentSlotStylesPrepared<TProps = {}, TVars = {}>
   extends Record<string, ComponentSlotStyleFunction<TProps, TVars>> {}
 
+export interface ComponentSlotStylesResolved extends Record<string, ICSSInJSStyle> {}
+
 export interface ComponentStyleFunctionParam<
   TProps extends PropsWithVarsAndStyles = PropsWithVarsAndStyles,
   TVars extends ComponentVariablesObject = ComponentVariablesObject