Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "chore: scaffold DialogContent component",
"packageName": "@fluentui/react-dialog",
"email": "[email protected]",
"dependentChangeType": "none"
}
Original file line number Diff line number Diff line change
@@ -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"
}
}

This file was deleted.

29 changes: 29 additions & 0 deletions packages/react-components/react-dialog/etc/react-dialog.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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'>;

Expand Down Expand Up @@ -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;

Expand All @@ -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;

Expand Down
5 changes: 2 additions & 3 deletions packages/react-components/react-dialog/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "*",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './components/DialogContent/index';
Original file line number Diff line number Diff line change
@@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -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';
Original file line number Diff line number Diff line change
@@ -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>;
Original file line number Diff line number Diff line change
@@ -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>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export * from './DialogContent';
export * from './DialogContent.types';
export * from './renderDialogContent';
export * from './useDialogContent';
export * from './useDialogContentStyles';
Original file line number Diff line number Diff line change
@@ -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} />;
};
Original file line number Diff line number Diff line change
@@ -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,
}),
};
};
Original file line number Diff line number Diff line change
@@ -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;
};
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
11 changes: 10 additions & 1 deletion packages/react-components/react-dialog/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
4 changes: 2 additions & 2 deletions packages/react-components/react-dialog/tsconfig.lib.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Comment on lines +7 to +8
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it expected?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's a part of the updated migration generator which is when during create-component command

"inlineSources": true,
"types": ["static-assets", "environment"]
},
Expand Down