chore(react-dialog): scaffold DialogContent component (#24844)

* chore: scaffold DialogContent component

* chore: updates API

* bugfix: exports DialogSurfaceElement

change/@fluentui-react-dialog-d69ce942-a1c5-4bc6-83b5-c91a69d5c2b5.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: scaffold DialogContent component",
+  "packageName": "@fluentui/react-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/react-components/react-dialog/config/api-extractor.json

@@ -1,5 +1,9 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
   "extends": "@fluentui/scripts/api-extractor/api-extractor.common.v-next.json",
-  "mainEntryPointFilePath": "<projectFolder>/dist/types/index.d.ts"
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "",
+    "publicTrimmedFilePath": "<projectFolder>/dist/index.d.ts"
+  }
 }

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

@@ -62,6 +62,23 @@ export type DialogBodySlots = {
 // @public
 export type DialogBodyState = ComponentState<DialogBodySlots>;
 
+// @public
+export const DialogContent: ForwardRefComponent<DialogContentProps>;
+
+// @public (undocumented)
+export const dialogContentClassNames: SlotClassNames<DialogContentSlots>;
+
+// @public
+export type DialogContentProps = ComponentProps<DialogContentSlots> & {};
+
+// @public (undocumented)
+export type DialogContentSlots = {
+    root: Slot<'div'>;
+};
+
+// @public
+export type DialogContentState = ComponentState<DialogContentSlots>;
+
 // @public (undocumented)
 export type DialogOpenChangeData = {
     type: 'dialogCancel';
@@ -111,6 +128,9 @@ export const DialogSurface: ForwardRefComponent<DialogSurfaceProps>;
 // @public (undocumented)
 export const dialogSurfaceClassNames: SlotClassNames<DialogSurfaceSlots>;
 
+// @public
+export type DialogSurfaceElement = HTMLDialogElement | HTMLDivElement;
+
 // @public
 export type DialogSurfaceProps = Omit<ComponentProps<DialogSurfaceSlots>, 'open' | 'onCancel' | 'onClose'>;
 
@@ -173,6 +193,9 @@ export const renderDialogActions_unstable: (state: DialogActionsState) => JSX.El
 // @public
 export const renderDialogBody_unstable: (state: DialogBodyState) => JSX.Element;
 
+// @public
+export const renderDialogContent_unstable: (state: DialogContentState) => JSX.Element;
+
 // @public
 export const renderDialogSurface_unstable: (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => JSX.Element;
 
@@ -197,6 +220,12 @@ export const useDialogBody_unstable: (props: DialogBodyProps, ref: React_2.Ref<H
 // @public
 export const useDialogBodyStyles_unstable: (state: DialogBodyState) => DialogBodyState;
 
+// @public
+export const useDialogContent_unstable: (props: DialogContentProps, ref: React_2.Ref<HTMLElement>) => DialogContentState;
+
+// @public
+export const useDialogContentStyles_unstable: (state: DialogContentState) => DialogContentState;
+
 // @public
 export const useDialogSurface_unstable: (props: DialogSurfaceProps, ref: React_2.Ref<DialogSurfaceElement>) => DialogSurfaceState;
 

packages/react-components/react-dialog/package.json

@@ -22,10 +22,9 @@
     "test": "jest --passWithNoTests",
     "e2e": "cypress run --component",
     "e2e:local": "cypress open --component",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-dialog/src && yarn docs",
     "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",

packages/react-components/react-dialog/src/DialogContent.ts

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

packages/react-components/react-dialog/src/components/DialogContent/DialogContent.test.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { DialogContent } from './DialogContent';
+import { isConformant } from '../../common/isConformant';
+
+describe('DialogContent', () => {
+  isConformant({
+    Component: DialogContent,
+    displayName: 'DialogContent',
+  });
+
+  // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+  it('renders a default state', () => {
+    const result = render(<DialogContent>Default DialogContent</DialogContent>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useDialogContent_unstable } from './useDialogContent';
+import { renderDialogContent_unstable } from './renderDialogContent';
+import { useDialogContentStyles_unstable } from './useDialogContentStyles';
+import type { DialogContentProps } from './DialogContent.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * DialogContent component - TODO: add more docs
+ */
+export const DialogContent: ForwardRefComponent<DialogContentProps> = React.forwardRef((props, ref) => {
+  const state = useDialogContent_unstable(props, ref);
+
+  useDialogContentStyles_unstable(state);
+  return renderDialogContent_unstable(state);
+});
+
+DialogContent.displayName = 'DialogContent';

packages/react-components/react-dialog/src/components/DialogContent/DialogContent.types.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type DialogContentSlots = {
+  root: Slot<'div'>;
+};
+
+/**
+ * DialogContent Props
+ */
+export type DialogContentProps = ComponentProps<DialogContentSlots> & {};
+
+/**
+ * State used in rendering DialogContent
+ */
+export type DialogContentState = ComponentState<DialogContentSlots>;

packages/react-components/react-dialog/src/components/DialogContent/__snapshots__/DialogContent.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogContent renders a default state 1`] = `
+<div>
+  <div
+    class="fui-DialogContent"
+  >
+    Default DialogContent
+  </div>
+</div>
+`;

packages/react-components/react-dialog/src/components/DialogContent/index.ts

@@ -0,0 +1,5 @@
+export * from './DialogContent';
+export * from './DialogContent.types';
+export * from './renderDialogContent';
+export * from './useDialogContent';
+export * from './useDialogContentStyles';

packages/react-components/react-dialog/src/components/DialogContent/renderDialogContent.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import type { DialogContentState, DialogContentSlots } from './DialogContent.types';
+
+/**
+ * Render the final JSX of DialogContent
+ */
+export const renderDialogContent_unstable = (state: DialogContentState) => {
+  const { slots, slotProps } = getSlots<DialogContentSlots>(state);
+
+  // TODO Add additional slots in the appropriate place
+  return <slots.root {...slotProps.root} />;
+};

packages/react-components/react-dialog/src/components/DialogContent/useDialogContent.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { getNativeElementProps } from '@fluentui/react-utilities';
+import type { DialogContentProps, DialogContentState } from './DialogContent.types';
+
+/**
+ * Create the state required to render DialogContent.
+ *
+ * The returned state can be modified with hooks such as useDialogContentStyles_unstable,
+ * before being passed to renderDialogContent_unstable.
+ *
+ * @param props - props from this instance of DialogContent
+ * @param ref - reference to root HTMLElement of DialogContent
+ */
+export const useDialogContent_unstable = (
+  props: DialogContentProps,
+  ref: React.Ref<HTMLElement>,
+): DialogContentState => {
+  return {
+    // TODO add appropriate props/defaults
+    components: {
+      // TODO add each slot's element type or component
+      root: 'div',
+    },
+    // TODO add appropriate slots, for example:
+    // mySlot: resolveShorthand(props.mySlot),
+    root: getNativeElementProps('div', {
+      ref,
+      ...props,
+    }),
+  };
+};

packages/react-components/react-dialog/src/components/DialogContent/useDialogContentStyles.ts

@@ -0,0 +1,33 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import type { DialogContentSlots, DialogContentState } from './DialogContent.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+export const dialogContentClassNames: SlotClassNames<DialogContentSlots> = {
+  root: 'fui-DialogContent',
+  // TODO: add class names for all slots on DialogContentSlots.
+  // Should be of the form `<slotName>: 'fui-DialogContent__<slotName>`
+};
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    // TODO Add default styles for the root element
+  },
+
+  // TODO add additional classes for different states and/or slots
+});
+
+/**
+ * Apply styling to the DialogContent slots based on the state
+ */
+export const useDialogContentStyles_unstable = (state: DialogContentState): DialogContentState => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(dialogContentClassNames.root, styles.root, state.root.className);
+
+  // TODO Add class names to slots, for example:
+  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
+
+  return state;
+};

packages/react-components/react-dialog/src/components/DialogSurface/DialogSurface.types.ts

@@ -15,7 +15,9 @@ export type DialogSurfaceSlots = {
   root: NonNullable<Slot<'dialog', 'div'>>;
 };
 
-/** @internal */
+/**
+ * Union between all possible semantic element that represent a DialogSurface
+ */
 export type DialogSurfaceElement = HTMLDialogElement | HTMLDivElement;
 
 /** @internal */

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

@@ -55,4 +55,13 @@ export {
   useDialogSurfaceStyles_unstable,
   renderDialogSurface_unstable,
 } from './DialogSurface';
-export type { DialogSurfaceProps, DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface';
+export type { DialogSurfaceProps, DialogSurfaceSlots, DialogSurfaceState, DialogSurfaceElement } from './DialogSurface';
+
+export {
+  DialogContent,
+  dialogContentClassNames,
+  useDialogContent_unstable,
+  useDialogContentStyles_unstable,
+  renderDialogContent_unstable,
+} from './DialogContent';
+export type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent';

packages/react-components/react-dialog/tsconfig.lib.json

@@ -3,9 +3,9 @@
   "compilerOptions": {
     "noEmit": false,
     "lib": ["ES2019", "dom"],
-    "outDir": "dist",
     "declaration": true,
-    "declarationDir": "dist/types",
+    "declarationDir": "../../../dist/out-tsc/types",
+    "outDir": "../../../dist/out-tsc",
     "inlineSources": true,
     "types": ["static-assets", "environment"]
   },