From 53bfdae9915142b04e4d0841b999eaaf6df17245 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 26 Sep 2023 09:33:28 +0200 Subject: [PATCH 1/4] fix: Context menu close should restore focus Fixes regression from #28530 The `contextMenuProps` aren't really for just the context menu but common props for all menus fter the refactor in #25044. We should probably revisit the menu trigger code and clean it up but this fix is more urgent --- .../src/components/Menu/Menu.cy.tsx | 21 ++++++++++-- .../components/MenuTrigger/useMenuTrigger.ts | 2 +- .../stories/Menu/MenuDefault.stories.tsx | 14 ++++++-- .../etc/react-message-bar-preview.api.md | 33 +++++++++++++++++++ .../src/Messagebar.ts | 1 + .../components/Messagebar/Messagebar.test.tsx | 18 ++++++++++ .../src/components/Messagebar/Messagebar.tsx | 18 ++++++++++ .../components/Messagebar/Messagebar.types.ts | 17 ++++++++++ .../__snapshots__/Messagebar.test.tsx.snap | 11 +++++++ .../src/components/Messagebar/index.ts | 5 +++ .../Messagebar/renderMessagebar.tsx | 15 +++++++++ .../components/Messagebar/useMessagebar.ts | 31 +++++++++++++++++ .../Messagebar/useMessagebarStyles.styles.ts | 33 +++++++++++++++++++ .../react-message-bar-preview/src/index.ts | 9 ++++- .../Messagebar/MessagebarBestPractices.md | 5 +++ .../Messagebar/MessagebarDefault.stories.tsx | 4 +++ .../Messagebar/MessagebarDescription.md | 0 .../stories/Messagebar/index.stories.tsx | 18 ++++++++++ 18 files changed, 248 insertions(+), 7 deletions(-) create mode 100644 packages/react-components/react-message-bar-preview/src/Messagebar.ts create mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.test.tsx create mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.tsx create mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.types.ts create mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/__snapshots__/Messagebar.test.tsx.snap create mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/index.ts create mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/renderMessagebar.tsx create mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebar.ts create mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebarStyles.styles.ts create mode 100644 packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarBestPractices.md create mode 100644 packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarDefault.stories.tsx create mode 100644 packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarDescription.md create mode 100644 packages/react-components/react-message-bar-preview/stories/Messagebar/index.stories.tsx diff --git a/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx b/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx index 617f80aa28b02a..cd14d6a0d19d53 100644 --- a/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx +++ b/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx @@ -1069,7 +1069,9 @@ describe('Context menu', () => { .get(menuTriggerSelector) .click() .get(menuSelector) - .should('not.exist'); + .should('not.exist') + .get(menuTriggerSelector) + .should('have.focus'); }); it('should close on scroll outside', () => { @@ -1081,6 +1083,21 @@ describe('Context menu', () => { .get('body') .trigger('wheel') .get(menuSelector) - .should('not.exist'); + .should('not.exist') + .get(menuTriggerSelector) + .should('have.focus'); + }); + + it('should restore focus on escape', () => { + mount(); + cy.get(menuTriggerSelector) + .rightclick() + .get(menuSelector) + .should('exist') + .focused() + .type('{esc}') + .should('not.exist') + .get(menuTriggerSelector) + .should('have.focus'); }); }); diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts b/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts index 6235d7a072834b..cbb66c8d5348d0 100644 --- a/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts +++ b/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts @@ -127,6 +127,7 @@ export const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerSta id: triggerId, ...child?.props, ref: useMergedRefs(triggerRef, child?.ref), + ...restoreFocusTargetAttribute, onMouseEnter: useEventCallback(mergeCallbacks(child?.props.onMouseEnter, onMouseEnter)), onMouseLeave: useEventCallback(mergeCallbacks(child?.props.onMouseLeave, onMouseLeave)), onContextMenu: useEventCallback(mergeCallbacks(child?.props.onContextMenu, onContextMenu)), @@ -136,7 +137,6 @@ export const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerSta const triggerChildProps = { 'aria-haspopup': 'menu', 'aria-expanded': !open && !isSubmenu ? undefined : open, - ...restoreFocusTargetAttribute, ...contextMenuProps, onClick: useEventCallback(mergeCallbacks(child?.props.onClick, onClick)), onKeyDown: useEventCallback(mergeCallbacks(child?.props.onKeyDown, onKeyDown)), diff --git a/packages/react-components/react-menu/stories/Menu/MenuDefault.stories.tsx b/packages/react-components/react-menu/stories/Menu/MenuDefault.stories.tsx index bb6837eade01a1..46fcfdb4163c9a 100644 --- a/packages/react-components/react-menu/stories/Menu/MenuDefault.stories.tsx +++ b/packages/react-components/react-menu/stories/Menu/MenuDefault.stories.tsx @@ -1,11 +1,19 @@ import * as React from 'react'; -import { Button, Menu, MenuTrigger, MenuList, MenuItem, MenuPopover } from '@fluentui/react-components'; +import { + Button, + Menu, + MenuTrigger, + MenuList, + MenuItem, + MenuPopover, + useRestoreFocusTarget, +} from '@fluentui/react-components'; export const Default = () => ( - + - + diff --git a/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md b/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md index e4cc48f2a1684a..fd53268143f851 100644 --- a/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md +++ b/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md @@ -4,6 +4,39 @@ ```ts +import type { ComponentProps } from '@fluentui/react-utilities'; +import type { ComponentState } from '@fluentui/react-utilities'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import * as React_2 from 'react'; +import type { Slot } from '@fluentui/react-utilities'; +import type { SlotClassNames } from '@fluentui/react-utilities'; + +// @public +export const Messagebar: ForwardRefComponent; + +// @public (undocumented) +export const messagebarClassNames: SlotClassNames; + +// @public +export type MessagebarProps = ComponentProps & {}; + +// @public (undocumented) +export type MessagebarSlots = { + root: Slot<'div'>; +}; + +// @public +export type MessagebarState = ComponentState; + +// @public +export const renderMessagebar_unstable: (state: MessagebarState) => JSX.Element; + +// @public +export const useMessagebar_unstable: (props: MessagebarProps, ref: React_2.Ref) => MessagebarState; + +// @public +export const useMessagebarStyles_unstable: (state: MessagebarState) => MessagebarState; + // (No @packageDocumentation comment for this package) ``` diff --git a/packages/react-components/react-message-bar-preview/src/Messagebar.ts b/packages/react-components/react-message-bar-preview/src/Messagebar.ts new file mode 100644 index 00000000000000..3c978364da1701 --- /dev/null +++ b/packages/react-components/react-message-bar-preview/src/Messagebar.ts @@ -0,0 +1 @@ +export * from './components/Messagebar/index'; diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.test.tsx b/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.test.tsx new file mode 100644 index 00000000000000..3eae7ed9bc6b28 --- /dev/null +++ b/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.test.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { isConformant } from '../../testing/isConformant'; +import { Messagebar } from './Messagebar'; + +describe('Messagebar', () => { + isConformant({ + Component: Messagebar, + displayName: 'Messagebar', + }); + + // TODO add more tests here, and create visual regression tests in /apps/vr-tests + + it('renders a default state', () => { + const result = render(Default Messagebar); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.tsx b/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.tsx new file mode 100644 index 00000000000000..dfa94545ae03ec --- /dev/null +++ b/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { useMessagebar_unstable } from './useMessagebar'; +import { renderMessagebar_unstable } from './renderMessagebar'; +import { useMessagebarStyles_unstable } from './useMessagebarStyles.styles'; +import type { MessagebarProps } from './Messagebar.types'; + +/** + * Messagebar component - TODO: add more docs + */ +export const Messagebar: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useMessagebar_unstable(props, ref); + + useMessagebarStyles_unstable(state); + return renderMessagebar_unstable(state); +}); + +Messagebar.displayName = 'Messagebar'; diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.types.ts b/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.types.ts new file mode 100644 index 00000000000000..e46e6cedd5e312 --- /dev/null +++ b/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.types.ts @@ -0,0 +1,17 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; + +export type MessagebarSlots = { + root: Slot<'div'>; +}; + +/** + * Messagebar Props + */ +export type MessagebarProps = ComponentProps & {}; + +/** + * State used in rendering Messagebar + */ +export type MessagebarState = ComponentState; +// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from MessagebarProps. +// & Required> diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/__snapshots__/Messagebar.test.tsx.snap b/packages/react-components/react-message-bar-preview/src/components/Messagebar/__snapshots__/Messagebar.test.tsx.snap new file mode 100644 index 00000000000000..634349218d3e15 --- /dev/null +++ b/packages/react-components/react-message-bar-preview/src/components/Messagebar/__snapshots__/Messagebar.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Messagebar renders a default state 1`] = ` +
+
+ Default Messagebar +
+
+`; diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/index.ts b/packages/react-components/react-message-bar-preview/src/components/Messagebar/index.ts new file mode 100644 index 00000000000000..04c33a7ea9e782 --- /dev/null +++ b/packages/react-components/react-message-bar-preview/src/components/Messagebar/index.ts @@ -0,0 +1,5 @@ +export * from './Messagebar'; +export * from './Messagebar.types'; +export * from './renderMessagebar'; +export * from './useMessagebar'; +export * from './useMessagebarStyles.styles'; diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/renderMessagebar.tsx b/packages/react-components/react-message-bar-preview/src/components/Messagebar/renderMessagebar.tsx new file mode 100644 index 00000000000000..9f2521fa25b9a0 --- /dev/null +++ b/packages/react-components/react-message-bar-preview/src/components/Messagebar/renderMessagebar.tsx @@ -0,0 +1,15 @@ +/** @jsxRuntime automatic */ +/** @jsxImportSource @fluentui/react-jsx-runtime */ + +import { assertSlots } from '@fluentui/react-utilities'; +import type { MessagebarState, MessagebarSlots } from './Messagebar.types'; + +/** + * Render the final JSX of Messagebar + */ +export const renderMessagebar_unstable = (state: MessagebarState) => { + assertSlots(state); + + // TODO Add additional slots in the appropriate place + return ; +}; diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebar.ts b/packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebar.ts new file mode 100644 index 00000000000000..5e4cb59b2616a2 --- /dev/null +++ b/packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebar.ts @@ -0,0 +1,31 @@ +import * as React from 'react'; +import { getNativeElementProps, slot } from '@fluentui/react-utilities'; +import type { MessagebarProps, MessagebarState } from './Messagebar.types'; + +/** + * Create the state required to render Messagebar. + * + * The returned state can be modified with hooks such as useMessagebarStyles_unstable, + * before being passed to renderMessagebar_unstable. + * + * @param props - props from this instance of Messagebar + * @param ref - reference to root HTMLElement of Messagebar + */ +export const useMessagebar_unstable = (props: MessagebarProps, ref: React.Ref): MessagebarState => { + 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: slot.always( + getNativeElementProps('div', { + ref, + ...props, + }), + { elementType: 'div' }, + ), + }; +}; diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebarStyles.styles.ts b/packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebarStyles.styles.ts new file mode 100644 index 00000000000000..4a39e0d3c11184 --- /dev/null +++ b/packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebarStyles.styles.ts @@ -0,0 +1,33 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import type { SlotClassNames } from '@fluentui/react-utilities'; +import type { MessagebarSlots, MessagebarState } from './Messagebar.types'; + +export const messagebarClassNames: SlotClassNames = { + root: 'fui-Messagebar', + // TODO: add class names for all slots on MessagebarSlots. + // Should be of the form `: 'fui-Messagebar__` +}; + +/** + * 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 Messagebar slots based on the state + */ +export const useMessagebarStyles_unstable = (state: MessagebarState): MessagebarState => { + const styles = useStyles(); + state.root.className = mergeClasses(messagebarClassNames.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; +}; diff --git a/packages/react-components/react-message-bar-preview/src/index.ts b/packages/react-components/react-message-bar-preview/src/index.ts index cb0ff5c3b541f6..1ab5965f5c4804 100644 --- a/packages/react-components/react-message-bar-preview/src/index.ts +++ b/packages/react-components/react-message-bar-preview/src/index.ts @@ -1 +1,8 @@ -export {}; +export { + Messagebar, + messagebarClassNames, + renderMessagebar_unstable, + useMessagebarStyles_unstable, + useMessagebar_unstable, +} from './Messagebar'; +export type { MessagebarProps, MessagebarSlots, MessagebarState } from './Messagebar'; diff --git a/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarBestPractices.md b/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarBestPractices.md new file mode 100644 index 00000000000000..08ff8ddeeb5f86 --- /dev/null +++ b/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarBestPractices.md @@ -0,0 +1,5 @@ +## Best practices + +### Do + +### Don't diff --git a/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarDefault.stories.tsx b/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarDefault.stories.tsx new file mode 100644 index 00000000000000..fd995542f1623c --- /dev/null +++ b/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarDefault.stories.tsx @@ -0,0 +1,4 @@ +import * as React from 'react'; +import { Messagebar, MessagebarProps } from '@fluentui/react-message-bar-preview'; + +export const Default = (props: Partial) => ; diff --git a/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarDescription.md b/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarDescription.md new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/react-components/react-message-bar-preview/stories/Messagebar/index.stories.tsx b/packages/react-components/react-message-bar-preview/stories/Messagebar/index.stories.tsx new file mode 100644 index 00000000000000..45b2099e1a3cfd --- /dev/null +++ b/packages/react-components/react-message-bar-preview/stories/Messagebar/index.stories.tsx @@ -0,0 +1,18 @@ +import { Messagebar } from '@fluentui/react-message-bar-preview'; + +import descriptionMd from './MessagebarDescription.md'; +import bestPracticesMd from './MessagebarBestPractices.md'; + +export { Default } from './MessagebarDefault.stories'; + +export default { + title: 'Preview Components/Messagebar', + component: Messagebar, + parameters: { + docs: { + description: { + component: [descriptionMd, bestPracticesMd].join('\n'), + }, + }, + }, +}; From 83be85982bec8a227f175cffee05f12c68ea5aae Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 26 Sep 2023 09:38:07 +0200 Subject: [PATCH 2/4] changefile --- ...ui-react-menu-afb66643-49cf-4a58-a947-2645694572a3.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-menu-afb66643-49cf-4a58-a947-2645694572a3.json diff --git a/change/@fluentui-react-menu-afb66643-49cf-4a58-a947-2645694572a3.json b/change/@fluentui-react-menu-afb66643-49cf-4a58-a947-2645694572a3.json new file mode 100644 index 00000000000000..07bcc941d409f4 --- /dev/null +++ b/change/@fluentui-react-menu-afb66643-49cf-4a58-a947-2645694572a3.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Context menu close should restore focus", + "packageName": "@fluentui/react-menu", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} From f7391d64f6b0c76a3242dfafd2119867c70e6c43 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 26 Sep 2023 09:48:23 +0200 Subject: [PATCH 3/4] revert --- .../etc/react-message-bar-preview.api.md | 33 ------------------- .../src/Messagebar.ts | 1 - .../components/Messagebar/Messagebar.test.tsx | 18 ---------- .../src/components/Messagebar/Messagebar.tsx | 18 ---------- .../components/Messagebar/Messagebar.types.ts | 17 ---------- .../__snapshots__/Messagebar.test.tsx.snap | 11 ------- .../src/components/Messagebar/index.ts | 5 --- .../Messagebar/renderMessagebar.tsx | 15 --------- .../components/Messagebar/useMessagebar.ts | 31 ----------------- .../Messagebar/useMessagebarStyles.styles.ts | 33 ------------------- .../react-message-bar-preview/src/index.ts | 9 +---- .../Messagebar/MessagebarBestPractices.md | 5 --- .../Messagebar/MessagebarDefault.stories.tsx | 4 --- .../Messagebar/MessagebarDescription.md | 0 .../stories/Messagebar/index.stories.tsx | 18 ---------- 15 files changed, 1 insertion(+), 217 deletions(-) delete mode 100644 packages/react-components/react-message-bar-preview/src/Messagebar.ts delete mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.test.tsx delete mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.tsx delete mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.types.ts delete mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/__snapshots__/Messagebar.test.tsx.snap delete mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/index.ts delete mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/renderMessagebar.tsx delete mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebar.ts delete mode 100644 packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebarStyles.styles.ts delete mode 100644 packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarBestPractices.md delete mode 100644 packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarDefault.stories.tsx delete mode 100644 packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarDescription.md delete mode 100644 packages/react-components/react-message-bar-preview/stories/Messagebar/index.stories.tsx diff --git a/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md b/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md index fd53268143f851..e4cc48f2a1684a 100644 --- a/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md +++ b/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md @@ -4,39 +4,6 @@ ```ts -import type { ComponentProps } from '@fluentui/react-utilities'; -import type { ComponentState } from '@fluentui/react-utilities'; -import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import * as React_2 from 'react'; -import type { Slot } from '@fluentui/react-utilities'; -import type { SlotClassNames } from '@fluentui/react-utilities'; - -// @public -export const Messagebar: ForwardRefComponent; - -// @public (undocumented) -export const messagebarClassNames: SlotClassNames; - -// @public -export type MessagebarProps = ComponentProps & {}; - -// @public (undocumented) -export type MessagebarSlots = { - root: Slot<'div'>; -}; - -// @public -export type MessagebarState = ComponentState; - -// @public -export const renderMessagebar_unstable: (state: MessagebarState) => JSX.Element; - -// @public -export const useMessagebar_unstable: (props: MessagebarProps, ref: React_2.Ref) => MessagebarState; - -// @public -export const useMessagebarStyles_unstable: (state: MessagebarState) => MessagebarState; - // (No @packageDocumentation comment for this package) ``` diff --git a/packages/react-components/react-message-bar-preview/src/Messagebar.ts b/packages/react-components/react-message-bar-preview/src/Messagebar.ts deleted file mode 100644 index 3c978364da1701..00000000000000 --- a/packages/react-components/react-message-bar-preview/src/Messagebar.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/Messagebar/index'; diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.test.tsx b/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.test.tsx deleted file mode 100644 index 3eae7ed9bc6b28..00000000000000 --- a/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.test.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { isConformant } from '../../testing/isConformant'; -import { Messagebar } from './Messagebar'; - -describe('Messagebar', () => { - isConformant({ - Component: Messagebar, - displayName: 'Messagebar', - }); - - // TODO add more tests here, and create visual regression tests in /apps/vr-tests - - it('renders a default state', () => { - const result = render(Default Messagebar); - expect(result.container).toMatchSnapshot(); - }); -}); diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.tsx b/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.tsx deleted file mode 100644 index dfa94545ae03ec..00000000000000 --- a/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; -import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import { useMessagebar_unstable } from './useMessagebar'; -import { renderMessagebar_unstable } from './renderMessagebar'; -import { useMessagebarStyles_unstable } from './useMessagebarStyles.styles'; -import type { MessagebarProps } from './Messagebar.types'; - -/** - * Messagebar component - TODO: add more docs - */ -export const Messagebar: ForwardRefComponent = React.forwardRef((props, ref) => { - const state = useMessagebar_unstable(props, ref); - - useMessagebarStyles_unstable(state); - return renderMessagebar_unstable(state); -}); - -Messagebar.displayName = 'Messagebar'; diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.types.ts b/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.types.ts deleted file mode 100644 index e46e6cedd5e312..00000000000000 --- a/packages/react-components/react-message-bar-preview/src/components/Messagebar/Messagebar.types.ts +++ /dev/null @@ -1,17 +0,0 @@ -import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; - -export type MessagebarSlots = { - root: Slot<'div'>; -}; - -/** - * Messagebar Props - */ -export type MessagebarProps = ComponentProps & {}; - -/** - * State used in rendering Messagebar - */ -export type MessagebarState = ComponentState; -// TODO: Remove semicolon from previous line, uncomment next line, and provide union of props to pick from MessagebarProps. -// & Required> diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/__snapshots__/Messagebar.test.tsx.snap b/packages/react-components/react-message-bar-preview/src/components/Messagebar/__snapshots__/Messagebar.test.tsx.snap deleted file mode 100644 index 634349218d3e15..00000000000000 --- a/packages/react-components/react-message-bar-preview/src/components/Messagebar/__snapshots__/Messagebar.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Messagebar renders a default state 1`] = ` -
-
- Default Messagebar -
-
-`; diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/index.ts b/packages/react-components/react-message-bar-preview/src/components/Messagebar/index.ts deleted file mode 100644 index 04c33a7ea9e782..00000000000000 --- a/packages/react-components/react-message-bar-preview/src/components/Messagebar/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './Messagebar'; -export * from './Messagebar.types'; -export * from './renderMessagebar'; -export * from './useMessagebar'; -export * from './useMessagebarStyles.styles'; diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/renderMessagebar.tsx b/packages/react-components/react-message-bar-preview/src/components/Messagebar/renderMessagebar.tsx deleted file mode 100644 index 9f2521fa25b9a0..00000000000000 --- a/packages/react-components/react-message-bar-preview/src/components/Messagebar/renderMessagebar.tsx +++ /dev/null @@ -1,15 +0,0 @@ -/** @jsxRuntime automatic */ -/** @jsxImportSource @fluentui/react-jsx-runtime */ - -import { assertSlots } from '@fluentui/react-utilities'; -import type { MessagebarState, MessagebarSlots } from './Messagebar.types'; - -/** - * Render the final JSX of Messagebar - */ -export const renderMessagebar_unstable = (state: MessagebarState) => { - assertSlots(state); - - // TODO Add additional slots in the appropriate place - return ; -}; diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebar.ts b/packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebar.ts deleted file mode 100644 index 5e4cb59b2616a2..00000000000000 --- a/packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebar.ts +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import { getNativeElementProps, slot } from '@fluentui/react-utilities'; -import type { MessagebarProps, MessagebarState } from './Messagebar.types'; - -/** - * Create the state required to render Messagebar. - * - * The returned state can be modified with hooks such as useMessagebarStyles_unstable, - * before being passed to renderMessagebar_unstable. - * - * @param props - props from this instance of Messagebar - * @param ref - reference to root HTMLElement of Messagebar - */ -export const useMessagebar_unstable = (props: MessagebarProps, ref: React.Ref): MessagebarState => { - 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: slot.always( - getNativeElementProps('div', { - ref, - ...props, - }), - { elementType: 'div' }, - ), - }; -}; diff --git a/packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebarStyles.styles.ts b/packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebarStyles.styles.ts deleted file mode 100644 index 4a39e0d3c11184..00000000000000 --- a/packages/react-components/react-message-bar-preview/src/components/Messagebar/useMessagebarStyles.styles.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { makeStyles, mergeClasses } from '@griffel/react'; -import type { SlotClassNames } from '@fluentui/react-utilities'; -import type { MessagebarSlots, MessagebarState } from './Messagebar.types'; - -export const messagebarClassNames: SlotClassNames = { - root: 'fui-Messagebar', - // TODO: add class names for all slots on MessagebarSlots. - // Should be of the form `: 'fui-Messagebar__` -}; - -/** - * 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 Messagebar slots based on the state - */ -export const useMessagebarStyles_unstable = (state: MessagebarState): MessagebarState => { - const styles = useStyles(); - state.root.className = mergeClasses(messagebarClassNames.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; -}; diff --git a/packages/react-components/react-message-bar-preview/src/index.ts b/packages/react-components/react-message-bar-preview/src/index.ts index 1ab5965f5c4804..cb0ff5c3b541f6 100644 --- a/packages/react-components/react-message-bar-preview/src/index.ts +++ b/packages/react-components/react-message-bar-preview/src/index.ts @@ -1,8 +1 @@ -export { - Messagebar, - messagebarClassNames, - renderMessagebar_unstable, - useMessagebarStyles_unstable, - useMessagebar_unstable, -} from './Messagebar'; -export type { MessagebarProps, MessagebarSlots, MessagebarState } from './Messagebar'; +export {}; diff --git a/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarBestPractices.md b/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarDefault.stories.tsx b/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarDefault.stories.tsx deleted file mode 100644 index fd995542f1623c..00000000000000 --- a/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarDefault.stories.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import * as React from 'react'; -import { Messagebar, MessagebarProps } from '@fluentui/react-message-bar-preview'; - -export const Default = (props: Partial) => ; diff --git a/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarDescription.md b/packages/react-components/react-message-bar-preview/stories/Messagebar/MessagebarDescription.md deleted file mode 100644 index e69de29bb2d1d6..00000000000000 diff --git a/packages/react-components/react-message-bar-preview/stories/Messagebar/index.stories.tsx b/packages/react-components/react-message-bar-preview/stories/Messagebar/index.stories.tsx deleted file mode 100644 index 45b2099e1a3cfd..00000000000000 --- a/packages/react-components/react-message-bar-preview/stories/Messagebar/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Messagebar } from '@fluentui/react-message-bar-preview'; - -import descriptionMd from './MessagebarDescription.md'; -import bestPracticesMd from './MessagebarBestPractices.md'; - -export { Default } from './MessagebarDefault.stories'; - -export default { - title: 'Preview Components/Messagebar', - component: Messagebar, - parameters: { - docs: { - description: { - component: [descriptionMd, bestPracticesMd].join('\n'), - }, - }, - }, -}; From b92fd5d9f2ba1806160b0eb89ee41a22d2b19b52 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Tue, 26 Sep 2023 09:49:07 +0200 Subject: [PATCH 4/4] revert --- .../stories/Menu/MenuDefault.stories.tsx | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/packages/react-components/react-menu/stories/Menu/MenuDefault.stories.tsx b/packages/react-components/react-menu/stories/Menu/MenuDefault.stories.tsx index 46fcfdb4163c9a..bb6837eade01a1 100644 --- a/packages/react-components/react-menu/stories/Menu/MenuDefault.stories.tsx +++ b/packages/react-components/react-menu/stories/Menu/MenuDefault.stories.tsx @@ -1,19 +1,11 @@ import * as React from 'react'; -import { - Button, - Menu, - MenuTrigger, - MenuList, - MenuItem, - MenuPopover, - useRestoreFocusTarget, -} from '@fluentui/react-components'; +import { Button, Menu, MenuTrigger, MenuList, MenuItem, MenuPopover } from '@fluentui/react-components'; export const Default = () => ( - + - +