Add Drawer component styles and integrate into CAP theme

Author: pixel-perfectionist

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

@@ -0,0 +1,20 @@
+import {
+  makeStyles,
+  mergeClasses,
+  type DrawerState,
+} from '@fluentui/react-components';
+import { CAP_TOKENS } from '../../theme/CAPTheme';
+
+export const useDrawerStyles = makeStyles({
+  root: {
+    borderRadius: CAP_TOKENS['cap/ctrl/flyout/base-corner'],
+  },
+});
+
+export function useDrawerStylesHook(state: DrawerState): DrawerState {
+  const styles = useDrawerStyles();
+
+  state.root.className = mergeClasses(state.root.className, styles.root);
+
+  return state;
+}

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

@@ -0,0 +1,24 @@
+import {
+  makeStyles,
+  mergeClasses,
+  tokens,
+  type DrawerBodyState,
+} from '@fluentui/react-components';
+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']
+  },
+});
+
+export function useDrawerBodyStylesHook(
+  state: DrawerBodyState
+): DrawerBodyState {
+  const styles = useDrawerBodyStyles();
+
+  state.root.className = mergeClasses(state.root.className, styles.root);
+
+  return state;
+}

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

@@ -0,0 +1,26 @@
+import {
+  makeStyles,
+  mergeClasses,
+  type DrawerFooterState,
+} from '@fluentui/react-components';
+import { CAP_TOKENS } from '../../theme/CAPTheme';
+
+export const useDrawerFooterStyles = makeStyles({
+  root: {
+    justifyContent: CAP_TOKENS['fixme/ctrl/drawer/footer/content-alignment'],
+    paddingTop: CAP_TOKENS['cap/ctrl/flyout/Footer-Padding-top'],
+    paddingRight: CAP_TOKENS['cap/ctrl/flyout/Footer-Padding-bottom'],
+    paddingBottom: CAP_TOKENS['cap/ctrl/flyout/footer-Padding-Left'],
+    paddingLeft: CAP_TOKENS['cap/ctrl/flyout/footer-Padding-Right'],
+  },
+});
+
+export function useDrawerFooterStylesHook(
+  state: DrawerFooterState
+): DrawerFooterState {
+  const styles = useDrawerFooterStyles();
+
+  state.root.className = mergeClasses(state.root.className, styles.root);
+
+  return state;
+}

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

@@ -0,0 +1,26 @@
+import {
+  makeStyles,
+  mergeClasses,
+  tokens,
+  type DrawerHeaderState,
+} from '@fluentui/react-components';
+import { CAP_TOKENS } from '../../theme/CAPTheme';
+
+export const useDrawerHeaderStyles = makeStyles({
+  root: {
+    paddingTop: CAP_TOKENS['smtc/v1/ctrl/flyout/header/paddingTop'],
+    paddingRight: CAP_TOKENS['smtc/v1/ctrl/flyout/header/Padding-Right'],
+    paddingBottom: CAP_TOKENS['fixme/ctrl/drawer/header/padding-bottom'],
+    paddingLeft: CAP_TOKENS['smtc/v1/ctrl/flyout/header/Padding-Left'],
+  },
+});
+
+export function useDrawerHeaderStylesHook(
+  state: DrawerHeaderState
+): DrawerHeaderState {
+  const styles = useDrawerHeaderStyles();
+
+  state.root.className = mergeClasses(state.root.className, styles.root);
+
+  return state;
+}

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

@@ -0,0 +1,19 @@
+import {
+  makeStyles,
+  mergeClasses,
+  type DrawerHeaderNavigationState,
+} from '@fluentui/react-components';
+
+export const useDrawerHeaderNavigationStyles = makeStyles({
+  root: {},
+});
+
+export function useDrawerHeaderNavigationStylesHook(
+  state: DrawerHeaderNavigationState
+): DrawerHeaderNavigationState {
+  const styles = useDrawerHeaderNavigationStyles();
+
+  state.root.className = mergeClasses(state.root.className, styles.root);
+
+  return state;
+}

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

@@ -0,0 +1,32 @@
+import {
+  makeStyles,
+  mergeClasses,
+  type DrawerHeaderTitleState,
+} from '@fluentui/react-components';
+
+export const useDrawerHeaderTitleStyles = makeStyles({
+  root: {},
+  heading: {},
+  action: {},
+});
+
+export function useDrawerHeaderTitleStylesHook(
+  state: DrawerHeaderTitleState
+): DrawerHeaderTitleState {
+  const styles = useDrawerHeaderTitleStyles();
+
+  state.root.className = mergeClasses(state.root.className, styles.root);
+
+  if (state.heading) {
+    state.heading.className = mergeClasses(
+      state.heading.className,
+      styles.heading
+    );
+  }
+
+  if (state.action) {
+    state.action.className = mergeClasses(state.action.className, styles.action);
+  }
+
+  return state;
+}

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

@@ -0,0 +1,19 @@
+import {
+  makeStyles,
+  mergeClasses,
+  type InlineDrawerState,
+} from '@fluentui/react-components';
+
+export const useInlineDrawerStyles = makeStyles({
+  root: {},
+});
+
+export function useInlineDrawerStylesHook(
+  state: InlineDrawerState
+): InlineDrawerState {
+  const styles = useInlineDrawerStyles();
+
+  state.root.className = mergeClasses(state.root.className, styles.root);
+
+  return state;
+}

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

@@ -0,0 +1,25 @@
+import {
+  makeStyles,
+  mergeClasses,
+  type OverlayDrawerState,
+} from '@fluentui/react-components';
+
+export const useOverlayDrawerStyles = makeStyles({
+  root: {},
+  backdrop: {},
+});
+
+export function useOverlayDrawerStylesHook(
+  state: OverlayDrawerState
+): OverlayDrawerState {
+  const styles = useOverlayDrawerStyles();
+
+  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

@@ -1,6 +1,6 @@
 import { tokens } from '@fluentui/react-components';
 
-type TokenType = 'color' | 'dimension';
+type TokenType = 'color' | 'dimension' | 'shadow' | 'alignment';
 
 export interface TokenSchema {
   type: TokenType;
@@ -37,6 +37,7 @@ export function formatCAPTokenCssVar(varName: string): string {
  */
 const FluentExtendedTokens = {
   'fluent-ext/borderRadius2XLarge': { type: 'dimension' },
+  'fluent-ext/borderRadius3XLarge': { type: 'dimension' },
 } as const satisfies Record<AllowedTokenName, TokenSchema>;
 
 /**
@@ -94,6 +95,22 @@ const TooltipTokens = {} as const satisfies Record<
   TokenSchema
 >;
 
+const DrawerTokens = {
+  'cap/ctrl/flyout/base-corner': { type: 'dimension' },
+  'cap/ctrl/flyout/Elevation': { type: 'shadow' },
+  'smtc/v1/ctrl/flyout/header/paddingTop': { type: 'dimension' },
+  'smtc/v1/ctrl/flyout/header/Padding-Left': { type: 'dimension' },
+  'fixme/ctrl/drawer/header/padding-bottom': { type: 'dimension' },
+  'smtc/v1/ctrl/flyout/header/Padding-Right': { type: 'dimension' },
+  'cap/ctrl/flyout/body-Padding-Left': { type: 'dimension' },
+  'cap/ctrl/flyout/body-Padding-Right': { type: 'dimension' },
+  'cap/ctrl/flyout/Footer-Padding-top': { type: 'dimension' },
+  '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'}
+} as const satisfies Record<AllowedTokenName, TokenSchema>;
+
 export const CAPTokensSchema = {
   ...FluentExtendedTokens,
   ...ControlTokens,
@@ -104,6 +121,7 @@ export const CAPTokensSchema = {
   ...InputTokens,
   ...MenuTokens,
   ...TooltipTokens,
+  ...DrawerTokens
 } as const satisfies { [key: AllowedTokenName]: TokenSchema };
 
 export const CAP_TOKENS = Object.keys(CAPTokensSchema).reduce((acc, key) => {
@@ -117,6 +135,7 @@ export type CAPTheme = {
 export const CAP_THEME_DEFAULTS = {
   // fluent-ext
   'fluent-ext/borderRadius2XLarge': '12px',
+  'fluent-ext/borderRadius3XLarge': '16px',
 
   // smtc/v1
   'smtc/v1/ctrl/corner/rest': CAP_TOKENS['fluent-ext/borderRadius2XLarge'],
@@ -156,6 +175,22 @@ export const CAP_THEME_DEFAULTS = {
   'fixme/ctrl/card/header-padding-outside': tokens.spacingVerticalM,
   'fixme/ctrl/card/header-padding-inside': tokens.spacingVerticalS,
   'fixme/ctrl/card/footer-horizontal-gap': tokens.spacingHorizontalS,
+
+  // drawer
+  // Notes: Component Drawer at design specs and in code, tokens are using 'flyout'
+  'cap/ctrl/flyout/base-corner': CAP_TOKENS['fluent-ext/borderRadius3XLarge'],
+  'cap/ctrl/flyout/Elevation': tokens.shadow2,
+  'smtc/v1/ctrl/flyout/header/paddingTop': tokens.spacingVerticalL,
+  'smtc/v1/ctrl/flyout/header/Padding-Left': tokens.spacingHorizontalXL,
+  'fixme/ctrl/drawer/header/padding-bottom': '12px', // Not exist in design specs and in tokens
+  'smtc/v1/ctrl/flyout/header/Padding-Right': tokens.spacingHorizontalXL, // layout is different, required different value from design spec tokens.spacingHorizontalMNudge
+  'cap/ctrl/flyout/body-Padding-Left': tokens.spacingHorizontalXL,
+  'cap/ctrl/flyout/body-Padding-Right': tokens.spacingHorizontalXL,
+  'cap/ctrl/flyout/Footer-Padding-top': tokens.spacingVerticalXXL,
+  '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'
 } as const satisfies CAPTheme;
 
 export const CAP_THEME_TEAMS = {

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

@@ -5,9 +5,17 @@ import {
   CardFooterState,
   CardHeaderState,
   CardState,
+  DrawerBodyState,
+  DrawerFooterState,
+  DrawerHeaderNavigationState,
+  DrawerHeaderState,
+  DrawerHeaderTitleState,
+  DrawerState,
   FluentProvider,
   FluentProviderProps,
   InputState,
+  InlineDrawerState,
+  OverlayDrawerState,
   type Theme,
 } from '@fluentui/react-components';
 
@@ -18,6 +26,14 @@ import { useInputStylesHook } from '../components/Input/Input.styles';
 import { useCardStylesHook } from '../components/Card/Card.styles';
 import { useCardHeaderStylesHook } from '../components/Card/CardHeader.styles';
 import { useCardFooterStylesHook } from '../components/Card/CardFooter.styles';
+import { useDrawerStylesHook } from '../components/Drawer/Drawer.styles';
+import { useDrawerBodyStylesHook } from '../components/Drawer/DrawerBody.styles';
+import { useDrawerHeaderStylesHook } from '../components/Drawer/DrawerHeader.styles';
+import { useDrawerHeaderTitleStylesHook } from '../components/Drawer/DrawerHeaderTitle.styles';
+import { useDrawerHeaderNavigationStylesHook } from '../components/Drawer/DrawerHeaderNavigation.styles';
+import { useDrawerFooterStylesHook } from '../components/Drawer/DrawerFooter.styles';
+import { useInlineDrawerStylesHook } from '../components/Drawer/InlineDrawer.styles';
+import { useOverlayDrawerStylesHook } from '../components/Drawer/OverlayDrawer.styles';
 
 const customStyleHooks: NonNullable<
   FluentProviderProps['customStyleHooks_unstable']
@@ -30,6 +46,26 @@ const customStyleHooks: NonNullable<
     useCardHeaderStylesHook(state as CardHeaderState),
   useCardFooterStyles_unstable: (state) =>
     useCardFooterStylesHook(state as CardFooterState),
+  useDrawerStyles_unstable: (state) =>
+    useDrawerStylesHook(state as DrawerState),
+  useOverlayDrawerStyles_unstable: (state) =>
+    useOverlayDrawerStylesHook(state as OverlayDrawerState),
+  useDrawerOverlayStyles_unstable: (state) =>
+    useOverlayDrawerStylesHook(state as OverlayDrawerState),
+  useInlineDrawerStyles_unstable: (state) =>
+    useInlineDrawerStylesHook(state as InlineDrawerState),
+  useDrawerInlineStyles_unstable: (state) =>
+    useInlineDrawerStylesHook(state as InlineDrawerState),
+  useDrawerBodyStyles_unstable: (state) =>
+    useDrawerBodyStylesHook(state as DrawerBodyState),
+  useDrawerHeaderStyles_unstable: (state) =>
+    useDrawerHeaderStylesHook(state as DrawerHeaderState),
+  useDrawerHeaderTitleStyles_unstable: (state) =>
+    useDrawerHeaderTitleStylesHook(state as DrawerHeaderTitleState),
+  useDrawerHeaderNavigationStyles_unstable: (state) =>
+    useDrawerHeaderNavigationStylesHook(state as DrawerHeaderNavigationState),
+  useDrawerFooterStyles_unstable: (state) =>
+    useDrawerFooterStylesHook(state as DrawerFooterState),
   useInputStyles_unstable: (state) => useInputStylesHook(state as InputState),
 };