From 35148a54f35aa69cf9f260e0f5f4fb05bd5c2f34 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Mon, 17 Apr 2023 02:48:11 +0200 Subject: [PATCH 01/24] feat(react-drawer): create body component --- .../react-drawer/etc/react-drawer.api.md | 27 ++++++ .../react-drawer/package.json | 3 +- .../react-drawer/src/DrawerBody.ts | 1 + .../src/components/Drawer/useDrawer.ts | 55 ++++-------- .../src/components/Drawer/useDrawerStyles.ts | 31 ++++--- .../components/DrawerBody/DrawerBody.test.tsx | 24 ++++++ .../src/components/DrawerBody/DrawerBody.tsx | 18 ++++ .../components/DrawerBody/DrawerBody.types.ts | 15 ++++ .../src/components/DrawerBody/index.ts | 5 ++ .../DrawerBody/renderDrawerBody.tsx | 12 +++ .../components/DrawerBody/useDrawerBody.ts | 25 ++++++ .../DrawerBody/useDrawerBodyStyles.ts | 50 +++++++++++ .../react-drawer/src/index.ts | 8 ++ .../DrawerBody/DrawerBodyBestPractices.md | 5 ++ .../DrawerBody/DrawerBodyDefault.stories.tsx | 85 +++++++++++++++++++ .../DrawerBody/DrawerBodyDescription.md | 0 .../stories/DrawerBody/index.stories.tsx | 18 ++++ .../react-drawer/tsconfig.lib.json | 4 +- 18 files changed, 334 insertions(+), 52 deletions(-) create mode 100644 packages/react-components/react-drawer/src/DrawerBody.ts create mode 100644 packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.test.tsx create mode 100644 packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx create mode 100644 packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.types.ts create mode 100644 packages/react-components/react-drawer/src/components/DrawerBody/index.ts create mode 100644 packages/react-components/react-drawer/src/components/DrawerBody/renderDrawerBody.tsx create mode 100644 packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBody.ts create mode 100644 packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.ts create mode 100644 packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyBestPractices.md create mode 100644 packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx create mode 100644 packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDescription.md create mode 100644 packages/react-components/react-drawer/stories/DrawerBody/index.stories.tsx diff --git a/packages/react-components/react-drawer/etc/react-drawer.api.md b/packages/react-components/react-drawer/etc/react-drawer.api.md index 37b6b074c19914..1f60fa6467cc7b 100644 --- a/packages/react-components/react-drawer/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/etc/react-drawer.api.md @@ -18,12 +18,30 @@ import type { SlotClassNames } from '@fluentui/react-utilities'; // @public export const Drawer: ForwardRefComponent; +// @public +export const DrawerBody: ForwardRefComponent; + +// @public (undocumented) +export const drawerBodyClassNames: SlotClassNames; + +// @public +export type DrawerBodyProps = ComponentProps & {}; + +// @public (undocumented) +export type DrawerBodySlots = { + root: Slot<'div'>; +}; + +// @public +export type DrawerBodyState = ComponentState; + // @public (undocumented) export const drawerClassNames: SlotClassNames; // @public export const drawerCSSVars: { size: string; + borderRadius: string; }; // @public @@ -49,9 +67,18 @@ export type DrawerState = ComponentState & Required JSX.Element | null; +// @public +export const renderDrawerBody_unstable: (state: DrawerBodyState) => JSX.Element; + // @public export const useDrawer_unstable: (props: DrawerProps, ref: React_2.Ref) => DrawerState; +// @public +export const useDrawerBody_unstable: (props: DrawerBodyProps, ref: React_2.Ref) => DrawerBodyState; + +// @public +export const useDrawerBodyStyles_unstable: (state: DrawerBodyState) => DrawerBodyState; + // @public export const useDrawerStyles_unstable: (state: DrawerState) => DrawerState; diff --git a/packages/react-components/react-drawer/package.json b/packages/react-components/react-drawer/package.json index d41f33f0ecb77b..44efe783c838f6 100644 --- a/packages/react-components/react-drawer/package.json +++ b/packages/react-components/react-drawer/package.json @@ -24,7 +24,8 @@ "type-check": "tsc -b tsconfig.json", "generate-api": "just-scripts generate-api", "storybook": "start-storybook", - "start": "yarn storybook" + "start": "yarn storybook", + "test-ssr": "test-ssr ./stories/**/*.stories.tsx" }, "devDependencies": { "@fluentui/eslint-plugin": "*", diff --git a/packages/react-components/react-drawer/src/DrawerBody.ts b/packages/react-components/react-drawer/src/DrawerBody.ts new file mode 100644 index 00000000000000..7c2ccd83c54666 --- /dev/null +++ b/packages/react-components/react-drawer/src/DrawerBody.ts @@ -0,0 +1 @@ +export * from './components/DrawerBody/index'; diff --git a/packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts b/packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts index 6d17a79d8787fd..9e4d7d4831d13f 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts +++ b/packages/react-components/react-drawer/src/components/Drawer/useDrawer.ts @@ -4,36 +4,6 @@ import { DialogProps } from '@fluentui/react-dialog'; import type { DrawerProps, DrawerState } from './Drawer.types'; -/** - * @internal - * Create the state required to render DrawerDialog. - * @param props - props from this instance of Drawer - */ -const useDrawerDialogProps = (props: DrawerProps) => { - const { open, onOpenChange, modal, children, ...otherProps } = props; - - const dialogProps = React.useMemo(() => { - return { - open, - onOpenChange, - modalType: modal ? 'modal' : 'non-modal', - children, - } as DialogProps; - }, [children, modal, onOpenChange, open]); - - const dialogSurfaceProps = React.useMemo(() => { - return { - ...otherProps, - children, - }; - }, [children, otherProps]); - - return { - dialog: dialogProps, - dialogSurface: dialogSurfaceProps, - }; -}; - /** * Create the state required to render Drawer. * @@ -50,8 +20,11 @@ export const useDrawer_unstable = (props: DrawerProps, ref: React.Ref { + return { + open, + onOpenChange, + modalType: modal ? 'modal' : 'non-modal', + children, + } as DialogProps; + }, [children, modal, onOpenChange, open]); + + const dialogSurfaceProps = { + ...otherProps, + children, + }; return { components: { @@ -76,8 +57,8 @@ export const useDrawer_unstable = (props: DrawerProps, ref: React.Ref = { */ export const drawerCSSVars = { size: '--fui-Drawer--size', + borderRadius: '--fui-Drawer--borderRadius', }; /** @@ -19,17 +20,31 @@ export const drawerCSSVars = { */ const useStyles = makeStyles({ root: { - ...shorthands.padding('16px'), - ...shorthands.borderRadius(0), + ...shorthands.borderRadius(`var(${drawerCSSVars.borderRadius})`), ...shorthands.border(0), + ...shorthands.overflow('hidden'), + + [drawerCSSVars.borderRadius]: 0, boxSizing: 'border-box', width: `var(${drawerCSSVars.size})`, maxWidth: 'calc(100vw - 48px)', height: 'auto', + display: 'flex', + flexDirection: 'column', + backgroundColor: tokens.colorNeutralBackground1, + }, + + overlay: { + position: 'fixed', top: 0, bottom: 0, - backgroundColor: tokens.colorNeutralBackground1, + }, + + inline: { + position: 'relative', + alignItems: 'stretch', + justifyContent: 'stretch', }, leftDrawer: { @@ -42,16 +57,6 @@ const useStyles = makeStyles({ left: 'auto', }, - overlay: { - position: 'fixed', - }, - - inline: { - position: 'relative', - alignItems: 'stretch', - justifyContent: 'stretch', - }, - inlineSeparatorLeft: { ...shorthands.borderRight('1px', 'solid', tokens.colorNeutralBackground3), }, diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.test.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.test.tsx new file mode 100644 index 00000000000000..5b2a912d41d320 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.test.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { DrawerBody } from './DrawerBody'; +import { isConformant } from '../../testing/isConformant'; + +describe('DrawerBody', () => { + isConformant({ + Component: DrawerBody, + displayName: 'DrawerBody', + }); + + it('renders a default state', () => { + const result = render(Default DrawerBody); + expect(result.container).toMatchInlineSnapshot(` +
+
+ Default DrawerBody +
+
+ `); + }); +}); diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx new file mode 100644 index 00000000000000..fb2691171d7c53 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useDrawerBody_unstable } from './useDrawerBody'; +import { renderDrawerBody_unstable } from './renderDrawerBody'; +import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles'; +import type { DrawerBodyProps } from './DrawerBody.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * DrawerBody component - TODO: add more docs + */ +export const DrawerBody: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useDrawerBody_unstable(props, ref); + + useDrawerBodyStyles_unstable(state); + return renderDrawerBody_unstable(state); +}); + +DrawerBody.displayName = 'DrawerBody'; diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.types.ts b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.types.ts new file mode 100644 index 00000000000000..6497c736411f28 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.types.ts @@ -0,0 +1,15 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; + +export type DrawerBodySlots = { + root: Slot<'div'>; +}; + +/** + * DrawerBody Props + */ +export type DrawerBodyProps = ComponentProps & {}; + +/** + * State used in rendering DrawerBody + */ +export type DrawerBodyState = ComponentState; diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/index.ts b/packages/react-components/react-drawer/src/components/DrawerBody/index.ts new file mode 100644 index 00000000000000..b8273e016d6ed6 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerBody/index.ts @@ -0,0 +1,5 @@ +export * from './DrawerBody'; +export * from './DrawerBody.types'; +export * from './renderDrawerBody'; +export * from './useDrawerBody'; +export * from './useDrawerBodyStyles'; diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/renderDrawerBody.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/renderDrawerBody.tsx new file mode 100644 index 00000000000000..99b84f8c31159a --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerBody/renderDrawerBody.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import { getSlots } from '@fluentui/react-utilities'; +import type { DrawerBodyState, DrawerBodySlots } from './DrawerBody.types'; + +/** + * Render the final JSX of DrawerBody + */ +export const renderDrawerBody_unstable = (state: DrawerBodyState) => { + const { slots, slotProps } = getSlots(state); + + return ; +}; diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBody.ts b/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBody.ts new file mode 100644 index 00000000000000..9ec54bd516fdd5 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBody.ts @@ -0,0 +1,25 @@ +import * as React from 'react'; +import { getNativeElementProps } from '@fluentui/react-utilities'; +import type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types'; + +/** + * Create the state required to render DrawerBody. + * + * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable, + * before being passed to renderDrawerBody_unstable. + * + * @param props - props from this instance of DrawerBody + * @param ref - reference to root HTMLElement of DrawerBody + */ +export const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref): DrawerBodyState => { + return { + components: { + root: 'div', + }, + + root: getNativeElementProps('div', { + ref, + ...props, + }), + }; +}; diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.ts b/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.ts new file mode 100644 index 00000000000000..9c5b84dc3109b9 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.ts @@ -0,0 +1,50 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; +import { tokens } from '@fluentui/react-theme'; + +export const drawerBodyClassNames: SlotClassNames = { + root: 'fui-DrawerBody', +}; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + ...shorthands.margin('-1px', 0), + ...shorthands.padding('1px', tokens.spacingHorizontalXXL), + ...shorthands.overflow('auto'), + ...shorthands.flex(1), + + // A "good hack" to display top and bottom borders based on the scroll position + backgroundImage: `linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}), + linear-gradient(to top, ${tokens.colorNeutralBackground1}, ${tokens.colorNeutralBackground1}), + linear-gradient(to top, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1}), + linear-gradient(to bottom, ${tokens.colorNeutralStroke1}, ${tokens.colorNeutralBackground1})`, + 'background-position': 'bottom center, top center, bottom center, top center', + backgroundRepeat: 'no-repeat', + backgroundColor: tokens.colorNeutralBackground1, + backgroundSize: '100% 2px, 100% 2px, 100% 1px, 100% 1px', + backgroundAttachment: 'local, local, scroll, scroll', + + ':last-child': { + paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`, + }, + + ':first-child': { + paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`, + }, + }, +}); + +/** + * Apply styling to the DrawerBody slots based on the state + */ +export const useDrawerBodyStyles_unstable = (state: DrawerBodyState): DrawerBodyState => { + const styles = useStyles(); + + state.root.className = mergeClasses(drawerBodyClassNames.root, styles.root, state.root.className); + + return state; +}; diff --git a/packages/react-components/react-drawer/src/index.ts b/packages/react-components/react-drawer/src/index.ts index 670be1266bb994..d86be8d8c5d5e3 100644 --- a/packages/react-components/react-drawer/src/index.ts +++ b/packages/react-components/react-drawer/src/index.ts @@ -9,3 +9,11 @@ export { } from './Drawer'; export type { DrawerProps, DrawerSlots, DrawerState } from './Drawer'; +export { + DrawerBody, + drawerBodyClassNames, + renderDrawerBody_unstable, + useDrawerBodyStyles_unstable, + useDrawerBody_unstable, +} from './DrawerBody'; +export type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from './DrawerBody'; diff --git a/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyBestPractices.md b/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyBestPractices.md new file mode 100644 index 00000000000000..08ff8ddeeb5f86 --- /dev/null +++ b/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyBestPractices.md @@ -0,0 +1,5 @@ +## Best practices + +### Do + +### Don't diff --git a/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx b/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx new file mode 100644 index 00000000000000..0cceeb797f80f6 --- /dev/null +++ b/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx @@ -0,0 +1,85 @@ +import * as React from 'react'; +import { Drawer, DrawerBody, DrawerBodyProps } from '@fluentui/react-drawer'; +import { makeStyles, shorthands, tokens } from '@fluentui/react-components'; + +const useStyles = makeStyles({ + root: { + display: 'flex', + rowGap: '24px', + columnGap: '24px', + }, + + drawer: { + height: '300px', + }, + + container: { + ...shorthands.padding(tokens.spacingHorizontalXXL), + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'center', + }, +}); + +const Header = (props: Partial) => { + const styles = useStyles(); + + return ( +
+ This is a header +
+ ); +}; + +const Footer = (props: Partial) => { + const styles = useStyles(); + + return ( +
+ +
+ ); +}; + +const Body = (props: Partial) => { + return ( + + 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 + aperiam, laborum labore excepturi nisi odio deserunt facilis error. Mollitia dolor quidem a. Lorem ipsum, dolor + sit amet consectetur adipisicing elit. Eius soluta ea repellendus voluptatum provident ad aut unde accusantium + sed. Officia qui praesentium repudiandae maxime molestias, non mollitia animi laboriosam quis. Lorem, ipsum dolor + sit amet consectetur adipisicing elit. Inventore, architecto eligendi earum dolor voluptas hic minima nihil porro + odio suscipit quaerat accusantium, aperiam, neque beatae ipsa explicabo consequatur cum quam? + + ); +}; + +export const Default = (props: Partial) => { + const styles = useStyles(); + + return ( +
+ + + + + +
+ + + + + +
+ + + +
+ +
+ +
+ ); +}; diff --git a/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDescription.md b/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDescription.md new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/react-components/react-drawer/stories/DrawerBody/index.stories.tsx b/packages/react-components/react-drawer/stories/DrawerBody/index.stories.tsx new file mode 100644 index 00000000000000..296cf279db8c63 --- /dev/null +++ b/packages/react-components/react-drawer/stories/DrawerBody/index.stories.tsx @@ -0,0 +1,18 @@ +import { DrawerBody } from '@fluentui/react-drawer'; + +import descriptionMd from './DrawerBodyDescription.md'; +import bestPracticesMd from './DrawerBodyBestPractices.md'; + +export { Default } from './DrawerBodyDefault.stories'; + +export default { + title: 'Preview Components/DrawerBody', + component: DrawerBody, + parameters: { + docs: { + description: { + component: [descriptionMd, bestPracticesMd].join('\n'), + }, + }, + }, +}; diff --git a/packages/react-components/react-drawer/tsconfig.lib.json b/packages/react-components/react-drawer/tsconfig.lib.json index 6f90cf95c005bd..e17f808c039339 100644 --- a/packages/react-components/react-drawer/tsconfig.lib.json +++ b/packages/react-components/react-drawer/tsconfig.lib.json @@ -16,7 +16,9 @@ "**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", - "**/*.stories.tsx" + "**/*.stories.tsx", + "**/*.cy.ts", + "**/*.cy.tsx" ], "include": ["./src/**/*.ts", "./src/**/*.tsx"] } From 34c596bc1c57cd8c0c009e2d1a47faa80df71800 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Mon, 17 Apr 2023 03:12:27 +0200 Subject: [PATCH 02/24] feat(react-drawer): create footer component --- .../react-drawer/etc/react-drawer.api.md | 52 +++++++++++++++++++ .../react-drawer/src/DrawerFooter.ts | 1 + .../DrawerFooter/DrawerFooter.test.tsx | 24 +++++++++ .../components/DrawerFooter/DrawerFooter.tsx | 18 +++++++ .../DrawerFooter/DrawerFooter.types.ts | 15 ++++++ .../src/components/DrawerFooter/index.ts | 5 ++ .../DrawerFooter/renderDrawerFooter.tsx | 12 +++++ .../DrawerFooter/useDrawerFooter.ts | 25 +++++++++ .../DrawerFooter/useDrawerFooterStyles.ts | 32 ++++++++++++ .../react-drawer/src/index.ts | 9 ++++ .../DrawerBody/DrawerBodyDefault.stories.tsx | 26 +++------- .../DrawerFooter/DrawerFooterBestPractices.md | 5 ++ .../DrawerFooterDefault.stories.tsx | 4 ++ .../DrawerFooter/DrawerFooterDescription.md | 0 .../stories/DrawerFooter/index.stories.tsx | 18 +++++++ 15 files changed, 228 insertions(+), 18 deletions(-) create mode 100644 packages/react-components/react-drawer/src/DrawerFooter.ts create mode 100644 packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.test.tsx create mode 100644 packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.tsx create mode 100644 packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.types.ts create mode 100644 packages/react-components/react-drawer/src/components/DrawerFooter/index.ts create mode 100644 packages/react-components/react-drawer/src/components/DrawerFooter/renderDrawerFooter.tsx create mode 100644 packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts create mode 100644 packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.ts create mode 100644 packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterBestPractices.md create mode 100644 packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterDefault.stories.tsx create mode 100644 packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterDescription.md create mode 100644 packages/react-components/react-drawer/stories/DrawerFooter/index.stories.tsx diff --git a/packages/react-components/react-drawer/etc/react-drawer.api.md b/packages/react-components/react-drawer/etc/react-drawer.api.md index 1f60fa6467cc7b..fa95151c91826c 100644 --- a/packages/react-components/react-drawer/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/etc/react-drawer.api.md @@ -44,6 +44,40 @@ export const drawerCSSVars: { borderRadius: string; }; +// @public +export const DrawerFooter: ForwardRefComponent; + +// @public (undocumented) +export const drawerFooterClassNames: SlotClassNames; + +// @public +export type DrawerFooterProps = ComponentProps & {}; + +// @public (undocumented) +export type DrawerFooterSlots = { + root: Slot<'div'>; +}; + +// @public +export type DrawerFooterState = ComponentState; + +// @public +export const DrawerHeader: ForwardRefComponent; + +// @public (undocumented) +export const drawerHeaderClassNames: SlotClassNames; + +// @public +export type DrawerHeaderProps = ComponentProps & {}; + +// @public (undocumented) +export type DrawerHeaderSlots = { + root: Slot<'div'>; +}; + +// @public +export type DrawerHeaderState = ComponentState; + // @public export type DrawerProps = ComponentProps> & { position?: 'left' | 'right'; @@ -70,6 +104,12 @@ 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 renderDrawerHeader_unstable: (state: DrawerHeaderState) => JSX.Element; + // @public export const useDrawer_unstable: (props: DrawerProps, ref: React_2.Ref) => DrawerState; @@ -79,6 +119,18 @@ export const useDrawerBody_unstable: (props: DrawerBodyProps, ref: React_2.Ref DrawerBodyState; +// @public +export const useDrawerFooter_unstable: (props: DrawerFooterProps, ref: React_2.Ref) => DrawerFooterState; + +// @public +export const useDrawerFooterStyles_unstable: (state: DrawerFooterState) => DrawerFooterState; + +// @public +export const useDrawerHeader_unstable: (props: DrawerHeaderProps, ref: React_2.Ref) => DrawerHeaderState; + +// @public +export const useDrawerHeaderStyles_unstable: (state: DrawerHeaderState) => DrawerHeaderState; + // @public export const useDrawerStyles_unstable: (state: DrawerState) => DrawerState; diff --git a/packages/react-components/react-drawer/src/DrawerFooter.ts b/packages/react-components/react-drawer/src/DrawerFooter.ts new file mode 100644 index 00000000000000..6ca07a8a8c50ec --- /dev/null +++ b/packages/react-components/react-drawer/src/DrawerFooter.ts @@ -0,0 +1 @@ +export * from './components/DrawerFooter/index'; diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.test.tsx b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.test.tsx new file mode 100644 index 00000000000000..5c57ecd254ac4f --- /dev/null +++ b/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(Default DrawerFooter); + expect(result.container).toMatchInlineSnapshot(` +
+
+ Default DrawerFooter +
+
+ `); + }); +}); diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.tsx b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.tsx new file mode 100644 index 00000000000000..daeef2bb7058f5 --- /dev/null +++ b/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 = React.forwardRef((props, ref) => { + const state = useDrawerFooter_unstable(props, ref); + + useDrawerFooterStyles_unstable(state); + return renderDrawerFooter_unstable(state); +}); + +DrawerFooter.displayName = 'DrawerFooter'; diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.types.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.types.ts new file mode 100644 index 00000000000000..250ca45abf3f21 --- /dev/null +++ b/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 & {}; + +/** + * State used in rendering DrawerFooter + */ +export type DrawerFooterState = ComponentState; diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/index.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/index.ts new file mode 100644 index 00000000000000..758980a51facdc --- /dev/null +++ b/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'; diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/renderDrawerFooter.tsx b/packages/react-components/react-drawer/src/components/DrawerFooter/renderDrawerFooter.tsx new file mode 100644 index 00000000000000..a9e3c41e44d4a7 --- /dev/null +++ b/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(state); + + return ; +}; diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts new file mode 100644 index 00000000000000..a2181d5c138932 --- /dev/null +++ b/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): DrawerFooterState => { + return { + components: { + root: 'footer', + }, + + root: getNativeElementProps('footer', { + ref, + ...props, + }), + }; +}; diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.ts new file mode 100644 index 00000000000000..b321edd1470e85 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.ts @@ -0,0 +1,32 @@ +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 = { + 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; +}; diff --git a/packages/react-components/react-drawer/src/index.ts b/packages/react-components/react-drawer/src/index.ts index d86be8d8c5d5e3..522a7d962237cc 100644 --- a/packages/react-components/react-drawer/src/index.ts +++ b/packages/react-components/react-drawer/src/index.ts @@ -17,3 +17,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'; diff --git a/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx b/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx index 0cceeb797f80f6..75b809c63766b9 100644 --- a/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx +++ b/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, DrawerHeader } from '@fluentui/react-drawer'; +import { Button, makeStyles } from '@fluentui/react-components'; const useStyles = makeStyles({ root: { @@ -12,32 +12,22 @@ const useStyles = makeStyles({ drawer: { height: '300px', }, - - container: { - ...shorthands.padding(tokens.spacingHorizontalXXL), - display: 'flex', - justifyContent: 'flex-start', - alignItems: 'center', - }, }); const Header = (props: Partial) => { - const styles = useStyles(); - return ( -
+ This is a header -
+ ); }; const Footer = (props: Partial) => { - const styles = useStyles(); - return ( -
- -
+ + + + ); }; diff --git a/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterBestPractices.md b/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterBestPractices.md new file mode 100644 index 00000000000000..08ff8ddeeb5f86 --- /dev/null +++ b/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterBestPractices.md @@ -0,0 +1,5 @@ +## Best practices + +### Do + +### Don't diff --git a/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterDefault.stories.tsx b/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterDefault.stories.tsx new file mode 100644 index 00000000000000..cda60cd73113cc --- /dev/null +++ b/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterDefault.stories.tsx @@ -0,0 +1,4 @@ +import * as React from 'react'; +import { DrawerFooter, DrawerFooterProps } from '@fluentui/react-drawer'; + +export const Default = (props: Partial) => ; diff --git a/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterDescription.md b/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterDescription.md new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/react-components/react-drawer/stories/DrawerFooter/index.stories.tsx b/packages/react-components/react-drawer/stories/DrawerFooter/index.stories.tsx new file mode 100644 index 00000000000000..e1894fcc42a686 --- /dev/null +++ b/packages/react-components/react-drawer/stories/DrawerFooter/index.stories.tsx @@ -0,0 +1,18 @@ +import { DrawerFooter } from '@fluentui/react-drawer'; + +import descriptionMd from './DrawerFooterDescription.md'; +import bestPracticesMd from './DrawerFooterBestPractices.md'; + +export { Default } from './DrawerFooterDefault.stories'; + +export default { + title: 'Preview Components/DrawerFooter', + component: DrawerFooter, + parameters: { + docs: { + description: { + component: [descriptionMd, bestPracticesMd].join('\n'), + }, + }, + }, +}; From fd5c39cf919d44f75c2a528428478a83ee8eb776 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Mon, 17 Apr 2023 03:13:22 +0200 Subject: [PATCH 03/24] docs: regenerate API --- .../react-drawer/etc/react-drawer.api.md | 28 +------------------ .../DrawerFooter/DrawerFooter.test.tsx | 4 +-- 2 files changed, 3 insertions(+), 29 deletions(-) diff --git a/packages/react-components/react-drawer/etc/react-drawer.api.md b/packages/react-components/react-drawer/etc/react-drawer.api.md index fa95151c91826c..4f4806f94bebd7 100644 --- a/packages/react-components/react-drawer/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/etc/react-drawer.api.md @@ -55,29 +55,12 @@ export type DrawerFooterProps = ComponentProps & {}; // @public (undocumented) export type DrawerFooterSlots = { - root: Slot<'div'>; + root: Slot<'footer'>; }; // @public export type DrawerFooterState = ComponentState; -// @public -export const DrawerHeader: ForwardRefComponent; - -// @public (undocumented) -export const drawerHeaderClassNames: SlotClassNames; - -// @public -export type DrawerHeaderProps = ComponentProps & {}; - -// @public (undocumented) -export type DrawerHeaderSlots = { - root: Slot<'div'>; -}; - -// @public -export type DrawerHeaderState = ComponentState; - // @public export type DrawerProps = ComponentProps> & { position?: 'left' | 'right'; @@ -107,9 +90,6 @@ export const renderDrawerBody_unstable: (state: DrawerBodyState) => JSX.Element; // @public export const renderDrawerFooter_unstable: (state: DrawerFooterState) => JSX.Element; -// @public -export const renderDrawerHeader_unstable: (state: DrawerHeaderState) => JSX.Element; - // @public export const useDrawer_unstable: (props: DrawerProps, ref: React_2.Ref) => DrawerState; @@ -125,12 +105,6 @@ export const useDrawerFooter_unstable: (props: DrawerFooterProps, ref: React_2.R // @public export const useDrawerFooterStyles_unstable: (state: DrawerFooterState) => DrawerFooterState; -// @public -export const useDrawerHeader_unstable: (props: DrawerHeaderProps, ref: React_2.Ref) => DrawerHeaderState; - -// @public -export const useDrawerHeaderStyles_unstable: (state: DrawerHeaderState) => DrawerHeaderState; - // @public export const useDrawerStyles_unstable: (state: DrawerState) => DrawerState; diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.test.tsx b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.test.tsx index 5c57ecd254ac4f..daedf947dd3c40 100644 --- a/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.test.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.test.tsx @@ -13,11 +13,11 @@ describe('DrawerFooter', () => { const result = render(Default DrawerFooter); expect(result.container).toMatchInlineSnapshot(`
-
Default DrawerFooter -
+
`); }); From 49e55d3f25d25b97e86a448b65ce98179d112890 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 18 Apr 2023 14:22:07 +0200 Subject: [PATCH 04/24] fix: remove .cy files from lib config --- packages/react-components/react-card/tsconfig.lib.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-components/react-card/tsconfig.lib.json b/packages/react-components/react-card/tsconfig.lib.json index e17f808c039339..6f90cf95c005bd 100644 --- a/packages/react-components/react-card/tsconfig.lib.json +++ b/packages/react-components/react-card/tsconfig.lib.json @@ -16,9 +16,7 @@ "**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", - "**/*.stories.tsx", - "**/*.cy.ts", - "**/*.cy.tsx" + "**/*.stories.tsx" ], "include": ["./src/**/*.ts", "./src/**/*.tsx"] } From ca1a06e3ffdf3e88dfba992625c0b1c8062ecccb Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 18 Apr 2023 14:24:20 +0200 Subject: [PATCH 05/24] fix: remove .cy files from lib config --- packages/react-components/react-card/tsconfig.lib.json | 4 +++- packages/react-components/react-drawer/tsconfig.lib.json | 4 +--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-components/react-card/tsconfig.lib.json b/packages/react-components/react-card/tsconfig.lib.json index 6f90cf95c005bd..e17f808c039339 100644 --- a/packages/react-components/react-card/tsconfig.lib.json +++ b/packages/react-components/react-card/tsconfig.lib.json @@ -16,7 +16,9 @@ "**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", - "**/*.stories.tsx" + "**/*.stories.tsx", + "**/*.cy.ts", + "**/*.cy.tsx" ], "include": ["./src/**/*.ts", "./src/**/*.tsx"] } diff --git a/packages/react-components/react-drawer/tsconfig.lib.json b/packages/react-components/react-drawer/tsconfig.lib.json index e17f808c039339..6f90cf95c005bd 100644 --- a/packages/react-components/react-drawer/tsconfig.lib.json +++ b/packages/react-components/react-drawer/tsconfig.lib.json @@ -16,9 +16,7 @@ "**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", - "**/*.stories.tsx", - "**/*.cy.ts", - "**/*.cy.tsx" + "**/*.stories.tsx" ], "include": ["./src/**/*.ts", "./src/**/*.tsx"] } From aee85b9f44f69608b0a7038ae05bdc9319c757e0 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 25 Apr 2023 14:29:19 +0200 Subject: [PATCH 06/24] fix: remove conflict code leftover --- packages/react-components/react-drawer/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react-components/react-drawer/package.json b/packages/react-components/react-drawer/package.json index 536dcab7503f71..ca0f37b72fa834 100644 --- a/packages/react-components/react-drawer/package.json +++ b/packages/react-components/react-drawer/package.json @@ -24,8 +24,7 @@ "type-check": "tsc -b tsconfig.json", "generate-api": "just-scripts generate-api", "storybook": "start-storybook", - "start": "yarn storybook", - "test-ssr": "test-ssr ./stories/**/*.stories.tsx" + "start": "yarn storybook" }, "devDependencies": { "@fluentui/eslint-plugin": "*", From b61d019212ee4d10276ca48a0bb515013c72f22b Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 25 Apr 2023 14:33:17 +0200 Subject: [PATCH 07/24] docs: remove TODO marks --- .../react-drawer/src/components/Drawer/Drawer.tsx | 2 +- .../react-drawer/src/components/DrawerBody/DrawerBody.tsx | 2 +- packages/react-components/react-drawer/src/index.ts | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx b/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx index 13ded85aa7b97c..8d0e913f7930b0 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx +++ b/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx @@ -6,7 +6,7 @@ import type { DrawerProps } from './Drawer.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; /** - * Drawer component - TODO: add more docs + * Drawer contains supplementary content and are used for complex creation, edit, or management experiences. */ export const Drawer: ForwardRefComponent = React.forwardRef((props, ref) => { const state = useDrawer_unstable(props, ref); diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx index fb2691171d7c53..f721fefa5d1f02 100644 --- a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx @@ -6,7 +6,7 @@ import type { DrawerBodyProps } from './DrawerBody.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; /** - * DrawerBody component - TODO: add more docs + * DrawerBody provides with a container for the main content of a Drawer. */ export const DrawerBody: ForwardRefComponent = React.forwardRef((props, ref) => { const state = useDrawerBody_unstable(props, ref); diff --git a/packages/react-components/react-drawer/src/index.ts b/packages/react-components/react-drawer/src/index.ts index d86be8d8c5d5e3..9a1bec39b7594f 100644 --- a/packages/react-components/react-drawer/src/index.ts +++ b/packages/react-components/react-drawer/src/index.ts @@ -1,4 +1,3 @@ -// TODO: replace with real exports export { Drawer, drawerCSSVars, From 2190a1f051e77d8b294852c2e6971a16b41d0c58 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 25 Apr 2023 14:48:37 +0200 Subject: [PATCH 08/24] docs: add TODO indicator --- .../react-drawer/stories/Drawer/DrawerBestPractices.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react-components/react-drawer/stories/Drawer/DrawerBestPractices.md b/packages/react-components/react-drawer/stories/Drawer/DrawerBestPractices.md index 08ff8ddeeb5f86..0a91ded0389bca 100644 --- a/packages/react-components/react-drawer/stories/Drawer/DrawerBestPractices.md +++ b/packages/react-components/react-drawer/stories/Drawer/DrawerBestPractices.md @@ -1,5 +1,11 @@ ## Best practices +TODO: To be added by a future contribution, when all the implementation of sub components is finished. + ### Do +TODO + ### Don't + +TODO From c9c3efde6be94cbe7e38f29382265c1b07880b0a Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 27 Apr 2023 14:41:02 +0200 Subject: [PATCH 09/24] feat: add support to override drawer body styles --- packages/react-components/react-drawer/package.json | 3 ++- .../react-drawer/src/components/DrawerBody/DrawerBody.tsx | 3 +++ .../src/CustomStyleHooksContext/CustomStyleHooksContext.ts | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-drawer/package.json b/packages/react-components/react-drawer/package.json index ca0f37b72fa834..2dbc980b5a5dcd 100644 --- a/packages/react-components/react-drawer/package.json +++ b/packages/react-components/react-drawer/package.json @@ -36,9 +36,10 @@ }, "dependencies": { "@fluentui/react-dialog": "^9.5.3", + "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", + "@fluentui/react-shared-contexts": "^9.3.3", "@fluentui/react-theme": "^9.1.7", "@fluentui/react-utilities": "^9.8.0", - "@fluentui/react-jsx-runtime": "9.0.0-alpha.2", "@griffel/react": "^1.5.2", "@swc/helpers": "^0.4.14" }, diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx index f721fefa5d1f02..54dc2c83c733bc 100644 --- a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx @@ -4,6 +4,7 @@ import { renderDrawerBody_unstable } from './renderDrawerBody'; import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles'; import type { DrawerBodyProps } from './DrawerBody.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * DrawerBody provides with a container for the main content of a Drawer. @@ -12,6 +13,8 @@ export const DrawerBody: ForwardRefComponent = React.forwardRef const state = useDrawerBody_unstable(props, ref); useDrawerBodyStyles_unstable(state); + useCustomStyleHook_unstable('useDrawerBodyStyles_unstable')(state); + return renderDrawerBody_unstable(state); }); diff --git a/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts b/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts index 33f69e86580c23..79b94e9913fe61 100644 --- a/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts +++ b/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts @@ -89,6 +89,7 @@ export type CustomStyleHooksContextValue = Partial<{ useDataGridHeaderStyles_unstable: CustomStyleHook; useDataGridHeaderCellStyles_unstable: CustomStyleHook; useDataGridSelectionCellStyles_unstable: CustomStyleHook; + useDrawerBodyStyles_unstable: CustomStyleHook; }>; /** From 5e7224b93cf7d9bfc7450c8f1fe59b70058ef1a3 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 27 Apr 2023 15:08:14 +0200 Subject: [PATCH 10/24] test: add cypress tests for scroll positions --- .../components/DrawerBody/DrawerBody.cy.tsx | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx new file mode 100644 index 00000000000000..2ded070a7f7950 --- /dev/null +++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +import { mount } from '@cypress/react'; +import type {} from '@cypress/react'; +import { FluentProvider } from '@fluentui/react-provider'; +import { webLightTheme } from '@fluentui/react-theme'; +import { Drawer, DrawerBody } from '@fluentui/react-drawer'; + +const mountFluent = (element: JSX.Element) => { + mount({element}); +}; + +function assertScrollPosition(element: HTMLElement, position: number) { + expect(element.scrollTop).to.equal(position); +} + +describe('DrawerBody', () => { + it('render drawer body component', () => { + mountFluent(); + + cy.get('#drawer-body').should('exist'); + }); + + it('scroll drawer body', () => { + const Example = () => ( + + + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, animi? Quos, eum pariatur. Labore magni + vel doloremque reiciendis, consequatur porro explicabo similique harum illo, ad hic, earum nobis accusantium + quasi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident eligendi impedit culpa ea ipsum + voluptate inventore labore, delectus nam veniam dolor debitis dolorem blanditiis in, natus deleniti illo. + Asperiores, porro. Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat obcaecati aperiam + recusandae. Pariatur dolorem cumque odit delectus voluptates ea ipsam culpa voluptate? Praesentium beatae + corrupti accusamus. Suscipit voluptas natus illo? + + + ); + + mountFluent(); + + cy.get('#drawer-body') + .scrollTo('bottom') + .should($e => assertScrollPosition($e[0], $e[0].scrollHeight - $e[0].clientHeight)); + + cy.get('#drawer-body') + .scrollTo('top') + .should($e => assertScrollPosition($e[0], 0)); + }); +}); From 7ea5df2ac89dc0ee92cbd7dcf809d40c958f4886 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 27 Apr 2023 15:50:43 +0200 Subject: [PATCH 11/24] fix: rename styles file to use the newer naming conventions --- .../react-drawer/src/components/DrawerBody/DrawerBody.tsx | 2 +- .../react-drawer/src/components/DrawerBody/index.ts | 2 +- .../{useDrawerBodyStyles.ts => useDrawerBodyStyles.styles.ts} | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename packages/react-components/react-drawer/src/components/DrawerBody/{useDrawerBodyStyles.ts => useDrawerBodyStyles.styles.ts} (100%) diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx index 54dc2c83c733bc..ced951f5b159c4 100644 --- a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { useDrawerBody_unstable } from './useDrawerBody'; import { renderDrawerBody_unstable } from './renderDrawerBody'; -import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles'; +import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles'; import type { DrawerBodyProps } from './DrawerBody.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/index.ts b/packages/react-components/react-drawer/src/components/DrawerBody/index.ts index b8273e016d6ed6..17a23b055f990e 100644 --- a/packages/react-components/react-drawer/src/components/DrawerBody/index.ts +++ b/packages/react-components/react-drawer/src/components/DrawerBody/index.ts @@ -2,4 +2,4 @@ export * from './DrawerBody'; export * from './DrawerBody.types'; export * from './renderDrawerBody'; export * from './useDrawerBody'; -export * from './useDrawerBodyStyles'; +export * from './useDrawerBodyStyles.styles'; diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.ts b/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.styles.ts similarity index 100% rename from packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.ts rename to packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBodyStyles.styles.ts From 8f7667884c0d80e2dc376e72945ec33bdc0bc1fa Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 27 Apr 2023 16:01:09 +0200 Subject: [PATCH 12/24] fix: prevent elements from stretching --- .../src/components/Drawer/useDrawerStyles.styles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts b/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts index 382b921157d606..0cb0c9d2d1f64e 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts +++ b/packages/react-components/react-drawer/src/components/Drawer/useDrawerStyles.styles.ts @@ -26,12 +26,14 @@ const useStyles = makeStyles({ [drawerCSSVars.borderRadius]: 0, - boxSizing: 'border-box', width: `var(${drawerCSSVars.size})`, maxWidth: 'calc(100vw - 48px)', height: 'auto', + boxSizing: 'border-box', display: 'flex', flexDirection: 'column', + alignItems: 'flex-start', + justifyContent: 'flex-start', backgroundColor: tokens.colorNeutralBackground1, }, @@ -43,8 +45,6 @@ const useStyles = makeStyles({ inline: { position: 'relative', - alignItems: 'stretch', - justifyContent: 'stretch', }, leftDrawer: { From 7035ce5a092e6a379c9bdf97b0fb5b77dee43f13 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 27 Apr 2023 16:02:51 +0200 Subject: [PATCH 13/24] feat: add support to override drawer styles --- .../react-drawer/src/components/Drawer/Drawer.tsx | 3 +++ .../src/CustomStyleHooksContext/CustomStyleHooksContext.ts | 1 + 2 files changed, 4 insertions(+) diff --git a/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx b/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx index 1674263fc5202b..5982cd3abc98a1 100644 --- a/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx +++ b/packages/react-components/react-drawer/src/components/Drawer/Drawer.tsx @@ -4,6 +4,7 @@ import { renderDrawer_unstable } from './renderDrawer'; import { useDrawerStyles_unstable } from './useDrawerStyles.styles'; import type { DrawerProps } from './Drawer.types'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * Drawer contains supplementary content and are used for complex creation, edit, or management experiences. @@ -12,6 +13,8 @@ export const Drawer: ForwardRefComponent = React.forwardRef((props, const state = useDrawer_unstable(props, ref); useDrawerStyles_unstable(state); + useCustomStyleHook_unstable('useDrawerStyles_unstable')(state); + return renderDrawer_unstable(state); }); diff --git a/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts b/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts index 79b94e9913fe61..c0695054d26c97 100644 --- a/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts +++ b/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts @@ -89,6 +89,7 @@ export type CustomStyleHooksContextValue = Partial<{ useDataGridHeaderStyles_unstable: CustomStyleHook; useDataGridHeaderCellStyles_unstable: CustomStyleHook; useDataGridSelectionCellStyles_unstable: CustomStyleHook; + useDrawerStyles_unstable: CustomStyleHook; useDrawerBodyStyles_unstable: CustomStyleHook; }>; From bf14755ef8beb13c52fd9f2e703d2b959d4bab79 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 27 Apr 2023 16:18:17 +0200 Subject: [PATCH 14/24] feat: add style overrides for upcoming drawer components --- ...ared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json diff --git a/change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json b/change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json new file mode 100644 index 00000000000000..7c672761835229 --- /dev/null +++ b/change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add style overrides for upcoming drawer components", + "packageName": "@fluentui/react-shared-contexts", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} From b2c81eb55b261d617d97090cbd1ccb1f2d299e63 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Thu, 27 Apr 2023 16:19:32 +0200 Subject: [PATCH 15/24] docs: update API --- .../react-shared-contexts/etc/react-shared-contexts.api.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md index 9f9695443505ce..34cfb47f5c4f08 100644 --- a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md +++ b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md @@ -92,6 +92,8 @@ export const CustomStyleHooksContext_unstable: React_2.Context | undefined>; // @public (undocumented) @@ -179,6 +181,8 @@ export type CustomStyleHooksContextValue_unstable = Partial<{ useDataGridHeaderStyles_unstable: CustomStyleHook; useDataGridHeaderCellStyles_unstable: CustomStyleHook; useDataGridSelectionCellStyles_unstable: CustomStyleHook; + useDrawerStyles_unstable: CustomStyleHook; + useDrawerBodyStyles_unstable: CustomStyleHook; }>; // @internal (undocumented) @@ -266,6 +270,8 @@ export const CustomStyleHooksProvider_unstable: React_2.Provider | undefined>; // @internal (undocumented) From 355e444e5e31038f5e3ec2d029a4c484cb42263c Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 2 May 2023 14:29:31 +0200 Subject: [PATCH 16/24] docs: update API --- .../react-components/react-provider/etc/react-provider.api.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md index cf515b46eb3990..b7e2f50274ebb5 100644 --- a/packages/react-components/react-provider/etc/react-provider.api.md +++ b/packages/react-components/react-provider/etc/react-provider.api.md @@ -105,6 +105,8 @@ export const FluentProvider: React_2.ForwardRefExoticComponent void; useDataGridHeaderCellStyles_unstable: (state: unknown) => void; useDataGridSelectionCellStyles_unstable: (state: unknown) => void; + useDrawerStyles_unstable: (state: unknown) => void; + useDrawerBodyStyles_unstable: (state: unknown) => void; }> | undefined; dir?: "ltr" | "rtl" | undefined; targetDocument?: Document | undefined; From d287cbb44aa343a11c13240fb0e87d4d1db4dcde Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 2 May 2023 22:56:52 +0200 Subject: [PATCH 17/24] fix: add missing change file --- ...eact-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json diff --git a/change/@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json b/change/@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json new file mode 100644 index 00000000000000..5d4d779063c634 --- /dev/null +++ b/change/@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add style overrides for upcoming drawer components", + "packageName": "@fluentui/react-provider", + "email": "marcosvmmoura@gmail.com", + "dependentChangeType": "patch" +} From c1958854a33531565ce812d0f0cd060092ae6d48 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 3 May 2023 15:09:46 +0200 Subject: [PATCH 18/24] test: merge tests --- .../src/components/DrawerBody/DrawerBody.cy.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx index 2ded070a7f7950..90d19d13e3ed52 100644 --- a/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx +++ b/packages/react-components/react-drawer/src/components/DrawerBody/DrawerBody.cy.tsx @@ -14,13 +14,7 @@ function assertScrollPosition(element: HTMLElement, position: number) { } describe('DrawerBody', () => { - it('render drawer body component', () => { - mountFluent(); - - cy.get('#drawer-body').should('exist'); - }); - - it('scroll drawer body', () => { + it('should render drawer body and be scrollable', () => { const Example = () => ( @@ -37,6 +31,7 @@ describe('DrawerBody', () => { mountFluent(); + cy.get('#drawer-body').should('exist'); cy.get('#drawer-body') .scrollTo('bottom') .should($e => assertScrollPosition($e[0], $e[0].scrollHeight - $e[0].clientHeight)); From 83cf4709f65520c1578b8cdae407fe9cb12253d8 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 3 May 2023 15:13:03 +0200 Subject: [PATCH 19/24] fix: add changefiles --- ...-react-provider-fc0c4816-12ec-40b0-9c82-432d8a196123.json} | 4 ++-- ...shared-contexts-1ce718e9-b07a-4dc1-a5cf-97d9baef17d9.json} | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) rename change/{@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json => @fluentui-react-provider-fc0c4816-12ec-40b0-9c82-432d8a196123.json} (58%) rename change/{@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json => @fluentui-react-shared-contexts-1ce718e9-b07a-4dc1-a5cf-97d9baef17d9.json} (59%) diff --git a/change/@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json b/change/@fluentui-react-provider-fc0c4816-12ec-40b0-9c82-432d8a196123.json similarity index 58% rename from change/@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json rename to change/@fluentui-react-provider-fc0c4816-12ec-40b0-9c82-432d8a196123.json index 5d4d779063c634..a760b5babf1dd7 100644 --- a/change/@fluentui-react-provider-d5d6ba04-fdeb-4003-be12-17ef140ed50c.json +++ b/change/@fluentui-react-provider-fc0c4816-12ec-40b0-9c82-432d8a196123.json @@ -1,6 +1,6 @@ { - "type": "patch", - "comment": "add style overrides for upcoming drawer components", + "type": "minor", + "comment": "feat: add style overrides for drawer components", "packageName": "@fluentui/react-provider", "email": "marcosvmmoura@gmail.com", "dependentChangeType": "patch" diff --git a/change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json b/change/@fluentui-react-shared-contexts-1ce718e9-b07a-4dc1-a5cf-97d9baef17d9.json similarity index 59% rename from change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json rename to change/@fluentui-react-shared-contexts-1ce718e9-b07a-4dc1-a5cf-97d9baef17d9.json index 7c672761835229..961ac6a2eb37ab 100644 --- a/change/@fluentui-react-shared-contexts-4e124152-f0bd-4310-9a56-2ce177884ec7.json +++ b/change/@fluentui-react-shared-contexts-1ce718e9-b07a-4dc1-a5cf-97d9baef17d9.json @@ -1,6 +1,6 @@ { - "type": "patch", - "comment": "add style overrides for upcoming drawer components", + "type": "minor", + "comment": "feat: add style overrides for drawer components", "packageName": "@fluentui/react-shared-contexts", "email": "marcosvmmoura@gmail.com", "dependentChangeType": "patch" From 26d32a4d4201df03fe28e908c56ac4561f8f0260 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 10 May 2023 15:58:06 +0200 Subject: [PATCH 20/24] fix: remove unused stories --- .../DrawerFooter/DrawerFooterBestPractices.md | 5 ----- .../DrawerFooterDefault.stories.tsx | 4 ---- .../DrawerFooter/DrawerFooterDescription.md | 0 .../stories/DrawerFooter/index.stories.tsx | 18 ------------------ 4 files changed, 27 deletions(-) delete mode 100644 packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterBestPractices.md delete mode 100644 packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterDefault.stories.tsx delete mode 100644 packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterDescription.md delete mode 100644 packages/react-components/react-drawer/stories/DrawerFooter/index.stories.tsx diff --git a/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterBestPractices.md b/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterDefault.stories.tsx b/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterDefault.stories.tsx deleted file mode 100644 index cda60cd73113cc..00000000000000 --- a/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterDefault.stories.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from 'react'; -import { DrawerFooter, DrawerFooterProps } from '@fluentui/react-drawer'; - -export const Default = (props: Partial) => ; diff --git a/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterDescription.md b/packages/react-components/react-drawer/stories/DrawerFooter/DrawerFooterDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components/react-drawer/stories/DrawerFooter/index.stories.tsx b/packages/react-components/react-drawer/stories/DrawerFooter/index.stories.tsx deleted file mode 100644 index e1894fcc42a686..00000000000000 --- a/packages/react-components/react-drawer/stories/DrawerFooter/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { DrawerFooter } from '@fluentui/react-drawer'; - -import descriptionMd from './DrawerFooterDescription.md'; -import bestPracticesMd from './DrawerFooterBestPractices.md'; - -export { Default } from './DrawerFooterDefault.stories'; - -export default { - title: 'Preview Components/DrawerFooter', - component: DrawerFooter, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; From 9b7494cf6dd64ebe50c746c84b3fd2d8897fd0d5 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 10 May 2023 16:00:25 +0200 Subject: [PATCH 21/24] fix: revert removal of classname --- .../stories/DrawerBody/DrawerBodyDefault.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx b/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx index c4716306b3cb3b..9063a6e672069c 100644 --- a/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx +++ b/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx @@ -16,7 +16,7 @@ const useStyles = makeStyles({ const Header = (props: Partial) => { return ( -
+
This is a header
); From 941ec46ef268b824f9d52a4a66858bdcd9c6d549 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Wed, 10 May 2023 16:01:17 +0200 Subject: [PATCH 22/24] fix: conflicts --- .../DrawerBody/DrawerBodyDefault.stories.tsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx b/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx index 9063a6e672069c..9aace8eb259ad6 100644 --- a/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx +++ b/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Drawer, DrawerBody, DrawerBodyProps, DrawerFooter } from '@fluentui/react-drawer'; -import { Button, makeStyles } from '@fluentui/react-components'; +import { Button, makeStyles, shorthands, tokens } from '@fluentui/react-components'; const useStyles = makeStyles({ root: { @@ -12,9 +12,19 @@ const useStyles = makeStyles({ drawer: { height: '300px', }, + + container: { + ...shorthands.padding(tokens.spacingHorizontalXXL), + + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'center', + }, }); -const Header = (props: Partial) => { +const Header = () => { + const styles = useStyles(); + return (
This is a header @@ -22,7 +32,7 @@ const Header = (props: Partial) => { ); }; -const Footer = (props: Partial) => { +const Footer = () => { return ( @@ -31,9 +41,9 @@ const Footer = (props: Partial) => { ); }; -const Body = (props: Partial) => { +const Body = () => { return ( - + 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 From 4e58a67acb1c67ce79cb5ec9f48944609b932dda Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 16 May 2023 19:44:37 +0200 Subject: [PATCH 23/24] fix: improve code readability --- .../src/components/DrawerFooter/DrawerFooter.types.ts | 2 +- .../src/components/DrawerFooter/useDrawerFooterStyles.ts | 1 + .../stories/DrawerBody/DrawerBodyDefault.stories.tsx | 1 - 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.types.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.types.ts index 250ca45abf3f21..2484933259ba78 100644 --- a/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.types.ts +++ b/packages/react-components/react-drawer/src/components/DrawerFooter/DrawerFooter.types.ts @@ -7,7 +7,7 @@ export type DrawerFooterSlots = { /** * DrawerFooter Props */ -export type DrawerFooterProps = ComponentProps & {}; +export type DrawerFooterProps = ComponentProps; /** * State used in rendering DrawerFooter diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.ts index b321edd1470e85..7e971c07a3a84e 100644 --- a/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.ts +++ b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooterStyles.ts @@ -13,6 +13,7 @@ export const drawerFooterClassNames: SlotClassNames = { const useStyles = makeStyles({ root: { ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalXXL, tokens.spacingVerticalXXL), + display: 'flex', justifyContent: 'flex-start', alignItems: 'center', diff --git a/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx b/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx index 9aace8eb259ad6..4a0862a16c28c4 100644 --- a/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx +++ b/packages/react-components/react-drawer/stories/DrawerBody/DrawerBodyDefault.stories.tsx @@ -15,7 +15,6 @@ const useStyles = makeStyles({ container: { ...shorthands.padding(tokens.spacingHorizontalXXL), - display: 'flex', justifyContent: 'flex-start', alignItems: 'center', From 1a305bbfb9fb9fec5ac02915cf56be7d1362917b Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 16 May 2023 19:57:57 +0200 Subject: [PATCH 24/24] fix: generate API --- packages/react-components/react-drawer/etc/react-drawer.api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-drawer/etc/react-drawer.api.md b/packages/react-components/react-drawer/etc/react-drawer.api.md index 7eab4725ea1b68..28dcbac986b6f1 100644 --- a/packages/react-components/react-drawer/etc/react-drawer.api.md +++ b/packages/react-components/react-drawer/etc/react-drawer.api.md @@ -51,7 +51,7 @@ export const DrawerFooter: ForwardRefComponent; export const drawerFooterClassNames: SlotClassNames; // @public -export type DrawerFooterProps = ComponentProps & {}; +export type DrawerFooterProps = ComponentProps; // @public (undocumented) export type DrawerFooterSlots = {