Change files

Author: pixel-perfectionist

change/@fluentui-contrib-react-cap-theme-36aedc1a-dae3-4802-9c76-18d01047248b.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Add Drawer component styles and integrate into CAP theme",
+  "packageName": "@fluentui-contrib/react-cap-theme",
+  "email": "olkatruk@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/react-cap-theme/src/components/Drawer/Drawer.styles.ts

@@ -8,6 +8,7 @@ import { CAP_TOKENS } from '../../theme/CAPTheme';
 export const useDrawerStyles = makeStyles({
   root: {
     borderRadius: CAP_TOKENS['cap/ctrl/flyout/base-corner'],
+    boxShadow: CAP_TOKENS['cap/ctrl/flyout/Elevation']
   },
 });
 

packages/react-cap-theme/src/components/Drawer/DrawerBody.styles.ts

@@ -9,7 +9,7 @@ import { CAP_TOKENS } from '../../theme/CAPTheme';
 export const useDrawerBodyStyles = makeStyles({
   root: {
     paddingLeft: CAP_TOKENS['cap/ctrl/flyout/body-Padding-Left'],
-    paddingRight: CAP_TOKENS['cap/ctrl/flyout/body-Padding-Right']
+    paddingRight: CAP_TOKENS['cap/ctrl/flyout/body-Padding-Right'],
   },
 });
 

packages/react-cap-theme/src/components/Drawer/DrawerHeaderTitle.styles.ts

@@ -25,7 +25,10 @@ export function useDrawerHeaderTitleStylesHook(
   }
 
   if (state.action) {
-    state.action.className = mergeClasses(state.action.className, styles.action);
+    state.action.className = mergeClasses(
+      state.action.className,
+      styles.action
+    );
   }
 
   return state;

packages/react-cap-theme/src/components/Drawer/OverlayDrawer.styles.ts

@@ -6,7 +6,6 @@ import {
 
 export const useOverlayDrawerStyles = makeStyles({
   root: {},
-  backdrop: {},
 });
 
 export function useOverlayDrawerStylesHook(
@@ -16,10 +15,5 @@ export function useOverlayDrawerStylesHook(
 
   state.root.className = mergeClasses(state.root.className, styles.root);
 
-  const backdrop = state.root.backdrop;
-  if (backdrop) {
-    backdrop.className = mergeClasses(backdrop.className, styles.backdrop);
-  }
-
   return state;
 }

packages/react-cap-theme/src/theme/CAPTheme.tsx

@@ -108,7 +108,7 @@ const DrawerTokens = {
   'cap/ctrl/flyout/Footer-Padding-bottom': { type: 'dimension' },
   'cap/ctrl/flyout/footer-Padding-Left': { type: 'dimension' },
   'cap/ctrl/flyout/footer-Padding-Right': { type: 'dimension' },
-  'fixme/ctrl/drawer/footer/content-alignment': { type: 'alignment'}
+  'fixme/ctrl/drawer/footer/content-alignment': { type: 'alignment' },
 } as const satisfies Record<AllowedTokenName, TokenSchema>;
 
 export const CAPTokensSchema = {
@@ -121,7 +121,7 @@ export const CAPTokensSchema = {
   ...InputTokens,
   ...MenuTokens,
   ...TooltipTokens,
-  ...DrawerTokens
+  ...DrawerTokens,
 } as const satisfies { [key: AllowedTokenName]: TokenSchema };
 
 export const CAP_TOKENS = Object.keys(CAPTokensSchema).reduce((acc, key) => {
@@ -190,7 +190,7 @@ export const CAP_THEME_DEFAULTS = {
   'cap/ctrl/flyout/Footer-Padding-bottom': tokens.spacingVerticalXL,
   'cap/ctrl/flyout/footer-Padding-Left': tokens.spacingHorizontalXL,
   'cap/ctrl/flyout/footer-Padding-Right': tokens.spacingHorizontalXL,
-  'fixme/ctrl/drawer/footer/content-alignment': 'flex-end'
+  'fixme/ctrl/drawer/footer/content-alignment': 'flex-end',
 } as const satisfies CAPTheme;
 
 export const CAP_THEME_TEAMS = {

packages/react-cap-theme/stories/StorybookUtils.tsx

@@ -94,7 +94,9 @@ export const CAPThemeExamples = ({
       <div className={styles.themeLabel}>Showing: {selectedTheme.label}</div>
       {examples.map((example) => (
         <div className={styles.row} key={example.title}>
-          {example.title && (<div className={styles.example}>{example.title}</div>)}
+          {example.title && (
+            <div className={styles.example}>{example.title}</div>
+          )}
           <div className={styles.rendered}>
             {renderExample(example, selectedTheme.variant)}
           </div>

packages/react-cap-theme/stories/components/Drawer.stories.tsx

@@ -17,11 +17,7 @@ const drawerBodyText = [
   'Eum aliquid aperiam, laborum labore excepturi nisi odio deserunt facilis error. Mollitia dolor quidem a.',
 ].join(' ');
 
-const DrawerContent = ({
-  onClose,
-}: {
-  onClose: () => void;
-}) => (
+const DrawerContent = ({ onClose }: { onClose: () => void }) => (
   <>
     <DrawerHeader>
       <DrawerHeaderTitle
@@ -37,7 +33,11 @@ const DrawerContent = ({
         Title goes here
       </DrawerHeaderTitle>
     </DrawerHeader>
-    <DrawerBody tabIndex={0} role="group" aria-label="Example scrolling content">
+    <DrawerBody
+      tabIndex={0}
+      role="group"
+      aria-label="Example scrolling content"
+    >
       {drawerBodyText}
     </DrawerBody>
     <DrawerFooter>
@@ -75,14 +75,18 @@ const PositionExample = ({
   );
 };
 
-export const CAPDrawerStory = ({ size, position }: { size: DrawerProps['size'], position: DrawerProps['position'] }) => {
+export const CAPDrawerStory = ({
+  size,
+  position,
+}: {
+  size: DrawerProps['size'];
+  position: DrawerProps['position'];
+}) => {
   return (
     <CAPThemeExamples
       examples={[
         {
-          render: () => (
-            <PositionExample size={size} position={position} />
-          ),
+          render: () => <PositionExample size={size} position={position} />,
         },
       ]}
     />