feat(ui-file-drop): migrate to new theming system

packages/ui-file-drop/src/FileDrop/index.tsx

@@ -37,13 +37,12 @@ import {
 import { accepts, getAcceptList } from './utils/accepts'
 import { getEventFiles } from './utils/getEventFiles'
 
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 import { allowedProps } from './props'
-import type { FileDropProps, FileDropState, FileDropStyleProps } from './props'
-
+import type { FileDropProps, FileDropState } from './props'
+import type { StyleParams } from './styles'
 function keyEventIsClickButton(e: React.KeyboardEvent) {
   return e.keyCode === keycode.codes.space || e.keyCode === keycode.codes.enter
 }
@@ -54,7 +53,7 @@ category: components
 ---
 **/
 @withDeterministicId()
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 class FileDrop extends Component<FileDropProps, FileDropState> {
   static readonly componentId = 'FileDrop'
 
@@ -90,8 +89,9 @@ class FileDrop extends Component<FileDropProps, FileDropState> {
     else return fileLikeItem
   }
 
-  makeStyleProps = (): FileDropStyleProps => {
+  makeStyleProps = (): StyleParams => {
     return {
+      ...this.props,
       functionallyDisabled: this.functionallyDisabled,
       visuallyDisabled: this.interaction === 'disabled',
       dragRejected: this.state.isDragRejected || this.invalid,

packages/ui-file-drop/src/FileDrop/styles.ts

@@ -22,31 +22,33 @@
  * SOFTWARE.
  */
 
-import type { FileDropTheme } from '@instructure/shared-types'
 import type { FileDropProps, FileDropStyleProps, FileDropStyle } from './props'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
+
+type StyleParams = FileDropProps & FileDropStyleProps
 
 /**
  * ---
  * private: true
  * ---
  * Generates the style object from the theme and provided additional information
  * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
+ * @param  {Object} params the props and state of the component, the style is applied to
+ * @param  {Object} sharedTokens Shared tokens from the theme
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: FileDropTheme,
-  props: FileDropProps,
-  state: FileDropStyleProps
+  componentTheme: NewComponentTypes['FileDrop'],
+  params: StyleParams,
+  _sharedTokens: SharedTokens
 ): FileDropStyle => {
-  const { height } = props
   const {
+    height,
     functionallyDisabled,
     visuallyDisabled,
     dragRejected,
     dragAccepted
-  } = state
+  } = params
 
   const dragAcceptedStyle = dragAccepted
     ? {
@@ -110,6 +112,7 @@ const generateStyle = (
     fileDropLabelContent: {
       label: 'fileDrop__labelContent',
       display: 'block',
+      backgroundColor: componentTheme.backgroundColor,
       boxSizing: 'border-box',
       zIndex: 1,
       textAlign: 'center',
@@ -134,3 +137,4 @@ const generateStyle = (
 }
 
 export default generateStyle
+export type { StyleParams }