From 3bdc4a39c3e022740f13c83c7de5072ce8ed44ce Mon Sep 17 00:00:00 2001 From: Peter Pal Hudak Date: Mon, 15 Dec 2025 18:19:26 +0100 Subject: [PATCH] feat(ui-file-drop): migrate to new theming system INSTUI-4793 --- packages/ui-file-drop/src/FileDrop/index.tsx | 12 ++-- packages/ui-file-drop/src/FileDrop/styles.ts | 20 ++++--- packages/ui-file-drop/src/FileDrop/theme.ts | 60 -------------------- 3 files changed, 18 insertions(+), 74 deletions(-) delete mode 100644 packages/ui-file-drop/src/FileDrop/theme.ts diff --git a/packages/ui-file-drop/src/FileDrop/index.tsx b/packages/ui-file-drop/src/FileDrop/index.tsx index a162f591a0..a9478c7343 100644 --- a/packages/ui-file-drop/src/FileDrop/index.tsx +++ b/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 { static readonly componentId = 'FileDrop' @@ -90,8 +89,9 @@ class FileDrop extends Component { else return fileLikeItem } - makeStyleProps = (): FileDropStyleProps => { + makeStyleProps = (): StyleParams => { return { + ...this.props, functionallyDisabled: this.functionallyDisabled, visuallyDisabled: this.interaction === 'disabled', dragRejected: this.state.isDragRejected || this.invalid, diff --git a/packages/ui-file-drop/src/FileDrop/styles.ts b/packages/ui-file-drop/src/FileDrop/styles.ts index 3466d6d6c7..2362ea014f 100644 --- a/packages/ui-file-drop/src/FileDrop/styles.ts +++ b/packages/ui-file-drop/src/FileDrop/styles.ts @@ -22,8 +22,10 @@ * 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 /** * --- @@ -31,22 +33,22 @@ import type { FileDropProps, FileDropStyleProps, FileDropStyle } from './props' * --- * 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 } diff --git a/packages/ui-file-drop/src/FileDrop/theme.ts b/packages/ui-file-drop/src/FileDrop/theme.ts deleted file mode 100644 index 55d923c06b..0000000000 --- a/packages/ui-file-drop/src/FileDrop/theme.ts +++ /dev/null @@ -1,60 +0,0 @@ -/* - * The MIT License (MIT) - * - * Copyright (c) 2015 - present Instructure, Inc. - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in all - * copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ - -import type { Theme, ThemeSpecificStyle } from '@instructure/ui-themes' -import { FileDropTheme } from '@instructure/shared-types' - -/** - * Generates the theme object for the component from the theme and provided additional information - * @param {Object} theme The actual theme object. - * @return {Object} The final theme object with the overrides and component variables - */ -const generateComponentTheme = (theme: Theme): FileDropTheme => { - const { colors, borders, key: themeName } = theme - - const themeSpecificStyle: ThemeSpecificStyle = { - canvas: { - hoverBorderColor: theme['ic-brand-primary'], - acceptedColor: theme['ic-brand-primary'] - } - } - - const componentVariables: FileDropTheme = { - backgroundColor: colors?.contrasts?.white1010, - borderRadius: borders?.radiusLarge, - borderWidth: borders?.widthMedium, - borderStyle: 'dashed', - borderColor: colors?.contrasts?.grey1424, - hoverBorderColor: colors?.contrasts?.blue4570, - acceptedColor: colors?.contrasts?.blue4570, - rejectedColor: colors?.contrasts?.red4570 - } - - return { - ...componentVariables, - ...themeSpecificStyle[themeName] - } -} - -export default generateComponentTheme