diff --git a/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/index.tsx b/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/index.tsx index 16da68bcb0..4c8a02c530 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/index.tsx +++ b/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/index.tsx @@ -28,10 +28,9 @@ import { debounce } from '@instructure/debounce' import type { Debounced } from '@instructure/debounce' import { getBoundingClientRect } from '@instructure/ui-dom-utils' import { omitProps } from '@instructure/ui-react-utils' -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 { @@ -45,7 +44,7 @@ parent: DrawerLayout id: DrawerLayout.Content --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) class DrawerContent extends Component { static readonly componentId = 'DrawerLayout.Content' diff --git a/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/styles.ts b/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/styles.ts index a915c7f12d..fd80bca20b 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/styles.ts +++ b/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/styles.ts @@ -22,7 +22,7 @@ * SOFTWARE. */ -import type { DrawerLayoutContentTheme } from '@instructure/shared-types' +import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes' import type { DrawerLayoutContentProps, DrawerLayoutContentStyleProps, @@ -36,12 +36,14 @@ import type { * 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} sharedTokens Shared token object that stores common values for the theme. * @param {Object} state the state of the component, the style is applied to * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: DrawerLayoutContentTheme, + componentTheme: NewComponentTypes['DrawerLayoutContent'], _props: DrawerLayoutContentProps, + _sharedTokens: SharedTokens, state: DrawerLayoutContentStyleProps ): DrawerLayoutContentStyle => { const { shouldTransition } = state diff --git a/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/theme.ts b/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/theme.ts deleted file mode 100644 index 531fe66925..0000000000 --- a/packages/ui-drawer-layout/src/DrawerLayout/DrawerContent/theme.ts +++ /dev/null @@ -1,42 +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 } from '@instructure/ui-themes' -import { DrawerLayoutContentTheme } 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): DrawerLayoutContentTheme => { - const { transitions } = theme - - return { - duration: transitions?.duration, - overflowY: 'auto' - } -} - -export default generateComponentTheme diff --git a/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/index.tsx b/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/index.tsx index a40785aa5b..d679e3ebf9 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/index.tsx +++ b/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/index.tsx @@ -24,7 +24,7 @@ import { Component } from 'react' -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import { textDirectionContextConsumer } from '@instructure/ui-i18n' import { Transition } from '@instructure/ui-motion' import type { TransitionType } from '@instructure/ui-motion' @@ -36,7 +36,6 @@ import type { PortalNode } from '@instructure/ui-portal' import { mirrorHorizontalPlacement } from '@instructure/ui-position' import generateStyle from './styles' -import generateComponentTheme from './theme' import { DrawerLayoutContext } from '../index' import { allowedProps } from './props' @@ -53,7 +52,7 @@ parent: DrawerLayout id: DrawerLayout.Tray --- **/ -@withStyle(generateStyle, generateComponentTheme) +@withStyle(generateStyle) @textDirectionContextConsumer() class DrawerTray extends Component< DrawerLayoutTrayProps, diff --git a/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/styles.ts b/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/styles.ts index 9b02f9b35e..ee1b728f48 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/styles.ts +++ b/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/styles.ts @@ -22,7 +22,7 @@ * SOFTWARE. */ -import type { DrawerLayoutTrayTheme } from '@instructure/shared-types' +import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes' import type { DrawerLayoutTrayProps, DrawerLayoutTrayStyleProps, @@ -36,12 +36,14 @@ import type { * 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} sharedTokens Shared token object that stores common values for the theme. * @param {Object} state the state of the component, the style is applied to * @return {Object} The final style object, which will be used in the component */ const generateStyle = ( - componentTheme: DrawerLayoutTrayTheme, + componentTheme: NewComponentTypes['DrawerLayoutTray'], props: DrawerLayoutTrayProps, + _sharedTokens: SharedTokens, state: DrawerLayoutTrayStyleProps ): DrawerLayoutTrayStyle => { const { border } = props diff --git a/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/theme.ts b/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/theme.ts deleted file mode 100644 index 1bfffaf67a..0000000000 --- a/packages/ui-drawer-layout/src/DrawerLayout/DrawerTray/theme.ts +++ /dev/null @@ -1,53 +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 } from '@instructure/ui-themes' -import { DrawerLayoutTrayTheme } 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): DrawerLayoutTrayTheme => { - const { colors, borders, stacking, shadows } = theme - - const componentVariables: DrawerLayoutTrayTheme = { - background: colors?.contrasts?.white1010, - borderColor: colors?.contrasts?.grey3045, - borderWidth: borders?.widthSmall, - borderStyle: borders?.style, - zIndex: stacking?.topmost, - boxShadow: shadows?.depth3, - overflowX: 'hidden', - overflowY: 'auto', - contentOverflowY: 'auto' - } - - return { - ...componentVariables - } -} - -export default generateComponentTheme diff --git a/packages/ui-drawer-layout/src/DrawerLayout/README.md b/packages/ui-drawer-layout/src/DrawerLayout/README.md index 3247468559..a3a6ebb9b4 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/README.md +++ b/packages/ui-drawer-layout/src/DrawerLayout/README.md @@ -57,8 +57,8 @@ type: example -
- + + A simple drawer layout @@ -84,7 +84,7 @@ type: example

{lorem.paragraph()}

 -
+ @@ -121,6 +121,7 @@ type: example textAlign="center" margin="large auto" padding="large" + background="primary" > -
- + + A nested drawer layout @@ -217,7 +218,7 @@ type: example

{lorem.paragraph()}

 -
+ diff --git a/packages/ui-drawer-layout/src/DrawerLayout/index.tsx b/packages/ui-drawer-layout/src/DrawerLayout/index.tsx index 0a81fe43e3..046df99c45 100644 --- a/packages/ui-drawer-layout/src/DrawerLayout/index.tsx +++ b/packages/ui-drawer-layout/src/DrawerLayout/index.tsx @@ -45,7 +45,7 @@ import type { import { DrawerTray } from './DrawerTray' import type { DrawerLayoutTrayProps } from './DrawerTray/props' -import { withStyleRework as withStyle } from '@instructure/emotion' +import { withStyle } from '@instructure/emotion' import generateStyle from './styles' import { allowedProps } from './props' @@ -67,7 +67,7 @@ category: components --- **/ @withDeterministicId() -@withStyle(generateStyle, null) +@withStyle(generateStyle) @textDirectionContextConsumer() class DrawerLayout extends Component { static readonly componentId = 'DrawerLayout'