feat(react-drawer): create DrawerFooter component

packages/react-components/react-drawer/etc/react-drawer.api.md

@@ -44,6 +44,23 @@ export const drawerCSSVars: {
     borderRadius: string;
 };
 
+// @public
+export const DrawerFooter: ForwardRefComponent<DrawerFooterProps>;
+
+// @public (undocumented)
+export const drawerFooterClassNames: SlotClassNames<DrawerFooterSlots>;
+
+// @public
+export type DrawerFooterProps = ComponentProps<DrawerFooterSlots>;
+
+// @public (undocumented)
+export type DrawerFooterSlots = {
+    root: Slot<'footer'>;
+};
+
+// @public
+export type DrawerFooterState = ComponentState<DrawerFooterSlots>;
+
 // @public
 export type DrawerProps = ComponentProps<Partial<DrawerSlots>> & {
     position?: 'left' | 'right';
@@ -71,6 +88,9 @@ export const renderDrawer_unstable: (state: DrawerState) => JSX.Element | null;
 // @public
 export const renderDrawerBody_unstable: (state: DrawerBodyState) => JSX.Element;
 
+// @public
+export const renderDrawerFooter_unstable: (state: DrawerFooterState) => JSX.Element;
+
 // @public
 export const useDrawer_unstable: (props: DrawerProps, ref: React_2.Ref<HTMLElement>) => DrawerState;
 
@@ -80,6 +100,12 @@ export const useDrawerBody_unstable: (props: DrawerBodyProps, ref: React_2.Ref<H
 // @public
 export const useDrawerBodyStyles_unstable: (state: DrawerBodyState) => DrawerBodyState;
 
+// @public
+export const useDrawerFooter_unstable: (props: DrawerFooterProps, ref: React_2.Ref<HTMLElement>) => DrawerFooterState;
+
+// @public
+export const useDrawerFooterStyles_unstable: (state: DrawerFooterState) => DrawerFooterState;
+
 // @public
 export const useDrawerStyles_unstable: (state: DrawerState) => DrawerState;
 

packages/react-components/react-drawer/src/DrawerFooter.ts

@@ -0,0 +1 @@
+export * from './components/DrawerFooter/index';

packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.test.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { DrawerFooter } from './DrawerFooter';
+import { isConformant } from '../../testing/isConformant';
+
+describe('DrawerFooter', () => {
+  isConformant({
+    Component: DrawerFooter,
+    displayName: 'DrawerFooter',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<DrawerFooter>Default DrawerFooter</DrawerFooter>);
+    expect(result.container).toMatchInlineSnapshot(`
+      <div>
+        <footer
+          class="fui-DrawerFooter"
+        >
+          Default DrawerFooter
+        </footer>
+      </div>
+    `);
+  });
+});

packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useDrawerFooter_unstable } from './useDrawerFooter';
+import { renderDrawerFooter_unstable } from './renderDrawerFooter';
+import { useDrawerFooterStyles_unstable } from './useDrawerFooterStyles';
+import type { DrawerFooterProps } from './DrawerFooter.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * DrawerFooter component - TODO: add more docs
+ */
+export const DrawerFooter: ForwardRefComponent<DrawerFooterProps> = React.forwardRef((props, ref) => {
+  const state = useDrawerFooter_unstable(props, ref);
+
+  useDrawerFooterStyles_unstable(state);
+  return renderDrawerFooter_unstable(state);
+});
+
+DrawerFooter.displayName = 'DrawerFooter';

packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.types.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type DrawerFooterSlots = {
+  root: Slot<'footer'>;
+};
+
+/**
+ * DrawerFooter Props
+ */
+export type DrawerFooterProps = ComponentProps<DrawerFooterSlots>;
+
+/**
+ * State used in rendering DrawerFooter
+ */
+export type DrawerFooterState = ComponentState<DrawerFooterSlots>;

packages/react-components/react-drawer/src/components/DrawerFooter/index.ts

@@ -0,0 +1,5 @@
+export * from './DrawerFooter';
+export * from './DrawerFooter.types';
+export * from './renderDrawerFooter';
+export * from './useDrawerFooter';
+export * from './useDrawerFooterStyles';

packages/react-components/react-drawer/src/components/DrawerFooter/renderDrawerFooter.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import type { DrawerFooterState, DrawerFooterSlots } from './DrawerFooter.types';
+
+/**
+ * Render the final JSX of DrawerFooter
+ */
+export const renderDrawerFooter_unstable = (state: DrawerFooterState) => {
+  const { slots, slotProps } = getSlots<DrawerFooterSlots>(state);
+
+  return <slots.root {...slotProps.root} />;
+};

packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';
+
+/**
+ * Create the state required to render DrawerFooter.
+ *
+ * The returned state can be modified with hooks such as useDrawerFooterStyles_unstable,
+ * before being passed to renderDrawerFooter_unstable.
+ *
+ * @param props - props from this instance of DrawerFooter
+ * @param ref - reference to root HTMLElement of DrawerFooter
+ */
+export const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Ref<HTMLElement>): DrawerFooterState => {
+  return {
+    components: {
+      root: 'footer',
+    },
+
+    root: getNativeElementProps('footer', {
+      ref,
+      ...props,
+    }),
+  };
+};

packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.ts

@@ -0,0 +1,33 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import type { DrawerFooterSlots, DrawerFooterState } from './DrawerFooter.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import { tokens } from '@fluentui/react-theme';
+
+export const drawerFooterClassNames: SlotClassNames<DrawerFooterSlots> = {
+  root: 'fui-DrawerFooter',
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalXXL, tokens.spacingVerticalXXL),
+
+    display: 'flex',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    columnGap: tokens.spacingHorizontalS,
+  },
+});
+
+/**
+ * Apply styling to the DrawerFooter slots based on the state
+ */
+export const useDrawerFooterStyles_unstable = (state: DrawerFooterState): DrawerFooterState => {
+  const styles = useStyles();
+
+  state.root.className = mergeClasses(drawerFooterClassNames.root, styles.root, state.root.className);
+
+  return state;
+};

packages/react-components/react-drawer/src/index.ts

@@ -16,3 +16,12 @@ export {
   useDrawerBody_unstable,
 } from './DrawerBody';
 export type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from './DrawerBody';
+
+export {
+  DrawerFooter,
+  drawerFooterClassNames,
+  renderDrawerFooter_unstable,
+  useDrawerFooterStyles_unstable,
+  useDrawerFooter_unstable,
+} from './DrawerFooter';
+export type { DrawerFooterProps, DrawerFooterSlots, DrawerFooterState } from './DrawerFooter';

packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Drawer, DrawerBody, DrawerBodyProps } from '@fluentui/react-drawer';
-import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+import { Drawer, DrawerBody, DrawerBodyProps, DrawerFooter } from '@fluentui/react-drawer';
+import { Button, makeStyles, shorthands, tokens } from '@fluentui/react-components';
 
 const useStyles = makeStyles({
   root: {
@@ -21,7 +21,7 @@ const useStyles = makeStyles({
   },
 });
 
-const Header = (props: Partial<DrawerBodyProps>) => {
+const Header = () => {
   const styles = useStyles();
 
   return (
@@ -31,19 +31,18 @@ const Header = (props: Partial<DrawerBodyProps>) => {
   );
 };
 
-const Footer = (props: Partial<DrawerBodyProps>) => {
-  const styles = useStyles();
-
+const Footer = () => {
   return (
-    <footer className={styles.container}>
-      <button>Button</button>
-    </footer>
+    <DrawerFooter>
+      <Button appearance="primary">Primary</Button>
+      <Button>Secondary</Button>
+    </DrawerFooter>
   );
 };
 
-const Body = (props: Partial<DrawerBodyProps>) => {
+const Body = () => {
   return (
-    <DrawerBody {...props}>
+    <DrawerBody>
       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus nam aut amet similique, iure vel voluptates
       cum cumque repellendus perferendis maiores officia unde in? Autem neque sequi maiores eum omnis. Lorem ipsum,
       dolor sit amet consectetur adipisicing elit. Perspiciatis ipsam explicabo tempora ipsum saepe nam. Eum aliquid