fix(theming): make params in styles functions required (#2235)

* -moved changes from useStyles hook

* -updated changelog
-fixed ProviderConsumer test

Author: mnajdova

CHANGELOG.md

@@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Fix event lister leak in `FocusZone` @miroslavstastny ([#2227](https://github.com/microsoft/fluent-ui-react/pull/2227))
+- Fix styleParam to always be required in the styles functions @layershifter, @mnajdova ([#2235](https://github.com/microsoft/fluent-ui-react/pull/2235))
 
 <!--------------------------------[ v0.43.0 ]------------------------------- -->
 ## [v0.43.0](https://github.com/microsoft/fluent-ui-react/tree/v0.43.0) (2020-01-08)

packages/react/test/specs/components/Provider/ProviderConsumer-test.tsx

@@ -1,10 +1,19 @@
-import { ThemeInput } from '@fluentui/styles'
+import { ComponentStyleFunctionParam, emptyTheme, ThemeInput } from '@fluentui/styles'
 import * as React from 'react'
 import { mount } from 'enzyme'
 
 import Provider from 'src/components/Provider/Provider'
 import ProviderConsumer from 'src/components/Provider/ProviderConsumer'
 
+const styleParam: ComponentStyleFunctionParam = {
+  disableAnimations: false,
+  displayName: 'Test',
+  props: {},
+  rtl: false,
+  theme: emptyTheme,
+  variables: {},
+}
+
 describe('ProviderConsumer', () => {
   test('is exported', () => {
     expect(require('src/index.ts').ProviderConsumer).toEqual(ProviderConsumer)
@@ -49,7 +58,7 @@ describe('ProviderConsumer', () => {
               // componentStyles
               expect(preparedTheme).toHaveProperty('componentStyles.Button.root')
               expect(preparedTheme.componentStyles.Button.root).toBeInstanceOf(Function)
-              expect(preparedTheme.componentStyles.Button.root()).toMatchObject(
+              expect(preparedTheme.componentStyles.Button.root(styleParam)).toMatchObject(
                 inputTheme.componentStyles.Button.root,
               )
 

packages/styles/src/types.ts

@@ -201,7 +201,7 @@ export interface ComponentStyleFunctionParam<
 }
 
 export type ComponentSlotStyleFunction<TProps = {}, TVars = {}> = (
-  styleParam?: ComponentStyleFunctionParam<TProps, TVars>,
+  styleParam: ComponentStyleFunctionParam<TProps, TVars>,
 ) => ICSSInJSStyle
 
 export interface ComponentSlotStylesPrepared<TProps = {}, TVars = {}>

packages/styles/test/mergeThemes/mergeComponentStyles-test.ts

@@ -1,8 +1,17 @@
-import { ComponentStyleFunctionParam, withDebugId } from '@fluentui/styles'
+import { ComponentStyleFunctionParam, emptyTheme, withDebugId } from '@fluentui/styles'
 
 import * as debugEnabled from '../../src/debugEnabled'
 import { mergeComponentStyles__PROD, mergeComponentStyles__DEV } from '../../src/mergeThemes'
 
+const styleParam: ComponentStyleFunctionParam = {
+  disableAnimations: false,
+  displayName: 'Test',
+  props: {},
+  rtl: false,
+  theme: emptyTheme,
+  variables: {},
+}
+
 describe('mergeComponentStyles', () => {
   let originalDebugEnabled
 
@@ -154,7 +163,7 @@ describe('mergeComponentStyles', () => {
 
       const merged = mergeComponentStyles__PROD(target, source)
 
-      const resolvedRoot = merged.root()
+      const resolvedRoot = merged.root(styleParam)
       expect(resolvedRoot._debug).toBe(undefined)
     })
   })
@@ -172,7 +181,7 @@ describe('mergeComponentStyles', () => {
 
       const merged = mergeComponentStyles__DEV(target, source)
 
-      const resolvedRoot = merged.root()
+      const resolvedRoot = merged.root(styleParam)
       expect(resolvedRoot._debug).toBe(undefined)
     })
   })
@@ -199,7 +208,7 @@ describe('mergeComponentStyles', () => {
           _debug: [{ styles: { a: 'tA', b: 'tB' } }, { styles: { a: 'sA', c: { deep: 'vC' } } }],
         })
 
-        const resolvedIcon = merged.icon()
+        const resolvedIcon = merged.icon(styleParam)
         expect(resolvedIcon).toMatchObject({
           _debug: [{ styles: { d: 'sD' } }],
         })
@@ -210,7 +219,7 @@ describe('mergeComponentStyles', () => {
         const source = withDebugId({ root: { a: 'sA', c: { deep: 'c' } } }, 'source')
 
         const merged = mergeComponentStyles__DEV(target, source)
-        const resolvedRoot = merged.root()
+        const resolvedRoot = merged.root(styleParam)
         expect(resolvedRoot).toMatchObject({
           _debug: [{ debugId: 'target' }, { debugId: 'source' }],
         })
@@ -243,7 +252,7 @@ describe('mergeComponentStyles', () => {
         )
 
         const merged1 = mergeComponentStyles__DEV(target, source1, source2)
-        const resolvedRoot1 = merged1.root()
+        const resolvedRoot1 = merged1.root(styleParam)
         expect(resolvedRoot1).toMatchObject({
           _debug: [{ debugId: 'target' }, { debugId: 'source1' }, { debugId: 'source2' }],
         })
@@ -252,7 +261,7 @@ describe('mergeComponentStyles', () => {
           mergeComponentStyles__DEV(target, source1),
           source2,
         )
-        const resolvedRoot2 = merged2.root()
+        const resolvedRoot2 = merged2.root(styleParam)
         expect(resolvedRoot2).toMatchObject({
           _debug: [{ debugId: 'target' }, { debugId: 'source1' }, { debugId: 'source2' }],
         })
@@ -261,7 +270,7 @@ describe('mergeComponentStyles', () => {
           target,
           mergeComponentStyles__DEV(source1, source2),
         )
-        const resolvedRoot3 = merged3.root()
+        const resolvedRoot3 = merged3.root(styleParam)
         expect(resolvedRoot3).toMatchObject({
           _debug: [{ debugId: 'target' }, { debugId: 'source1' }, { debugId: 'source2' }],
         })

packages/styles/test/mergeThemes/mergeThemes-test.ts

@@ -5,10 +5,20 @@ import {
   mergeStyles,
   ThemeInput,
   withDebugId,
+  emptyTheme,
 } from '@fluentui/styles'
 
 import * as debugEnabled from '../../src/debugEnabled'
 
+const styleParam: ComponentStyleFunctionParam = {
+  disableAnimations: false,
+  displayName: 'Test',
+  props: {},
+  rtl: false,
+  theme: emptyTheme,
+  variables: {},
+}
+
 describe('mergeThemes', () => {
   test(`always returns an object`, () => {
     expect(mergeThemes({}, {})).toMatchObject({})
@@ -244,7 +254,7 @@ describe('mergeThemes', () => {
 
       const merged = mergeThemes(target, source)
 
-      expect(merged.componentStyles.Button.root()).toMatchObject({
+      expect(merged.componentStyles.Button.root(styleParam)).toMatchObject({
         display: 'inline-block',
         color: 'blue',
         '::before': {