[v12] feat(ui-drawer-layout): rework DrawerLayout

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<DrawerLayoutContentProps> {
   static readonly componentId = 'DrawerLayout.Content'
 

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

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,

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

packages/ui-drawer-layout/src/DrawerLayout/README.md

@@ -57,8 +57,8 @@ type: example
             </View>
           </DrawerLayout.Tray>
           <DrawerLayout.Content label="Drawer content example">
-            <div style={{ background: 'white', height: '100%' }}>
-              <View as="div" padding="x-large">
+            <View as="div" height="100%" background="primary">
+              <View as="div" padding="x-large" background="primary">
                 <Heading border="bottom">A simple drawer layout</Heading>
                 <Grid startAt="medium" vAlign="middle" colSpacing="none">
                   <Grid.Row>
@@ -84,7 +84,7 @@ type: example
                   <p>{lorem.paragraph()}</p>
                 </Text>
               </View>
-            </div>
+            </View>
           </DrawerLayout.Content>
         </DrawerLayout>
       </View>
@@ -121,6 +121,7 @@ type: example
               textAlign="center"
               margin="large auto"
               padding="large"
+              background="primary"
             >
               <CloseButton
                 placement="end"
@@ -168,8 +169,8 @@ type: example
                 </View>
               </DrawerLayout.Tray>
               <DrawerLayout.Content label="Drawer content example containing a responsive ">
-                <div style={{ background: 'white', height: '100%' }}>
-                  <View as="div" padding="x-large">
+                <View as="div" background="primary" height='100%'>
+                  <View as="div" padding="x-large"      background="primary">
                     <Heading border="bottom">A nested drawer layout</Heading>
                     <Grid startAt="medium" vAlign="middle" colSpacing="none">
                       <Grid.Row>
@@ -217,7 +218,7 @@ type: example
                       <p>{lorem.paragraph()}</p>
                     </Text>
                   </View>
-                </div>
+                </View>
               </DrawerLayout.Content>
             </DrawerLayout>
           </DrawerLayout.Content>

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<DrawerLayoutProps, DrawerLayoutState> {
   static readonly componentId = 'DrawerLayout'