forked from microsoft/semanticworkbench
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
adds new "frontdoor" conversation-first UX exploration for workbench …
…app (microsoft#178) This is the first merge of the new UX exploration, it'll remain accessible at `/frontdoor` while we test and refine further, before becoming the new default experience at the root path. You can return to the current dashboard via the menu with your profile in the upper right corner of the screen.
- Loading branch information
Showing
60 changed files
with
3,005 additions
and
783 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -164,6 +164,7 @@ | |
| "fastapi", | ||
| "fileversion", | ||
| "fluentui", | ||
| "frontdoor", | ||
| "getfixturevalue", | ||
| "griffel", | ||
| "hashkey", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| # Semantic Workbench App Dev Guide | ||
|
|
||
| This is an early collection of notes for conventions being put in place for the development of the Semantic Workbench React/Typescript web app. | ||
|
|
||
| ## Design System | ||
|
|
||
| The Semantic Workbench app uses the Fluent UI React v9 and Fluent Copilot component libraries. | ||
|
|
||
| Fluent UI React v9: | ||
|
|
||
| - Docs: https://react.fluentui.dev/ | ||
| - GitHub: https://github.com/microsoft/fluentui | ||
|
|
||
| Fluent Copilot (formerly Fluent AI): | ||
|
|
||
| - Docs: https://ai.fluentui.dev/ | ||
| - GitHub: https://github.com/microsoft/fluentai | ||
|
|
||
| ### Styling components | ||
|
|
||
| Create a `useClasses` function that returns an object of classnames using the `mergeStyle` function from the `@fluentui/react` package. Within your component, create a `const classes = useClasses();` and use the classnames in the component. | ||
|
|
||
| Sample: | ||
|
|
||
| ``` | ||
| import { mergeStyle } from '@fluentui/react'; | ||
| const useClasses = { | ||
| root: mergeStyle({ | ||
| color: 'red', | ||
| }), | ||
| }; | ||
| const MyButton = () => { | ||
| const classes = useClasses(); | ||
| return ( | ||
| <div className={classes.root}> | ||
| <Button> | ||
| Click me | ||
| </Button> | ||
| </div> | ||
| ); | ||
| }; | ||
| ``` | ||
|
|
||
| Docs: | ||
|
|
||
| - Fluent: Styling components: https://react.fluentui.dev/?path=/docs/concepts-developer-styling-components--docs | ||
| - Griffel: https://griffel.js.org/ | ||
|
|
||
| ### Z-index | ||
|
|
||
| Use the Fluent tokens for z-index. | ||
|
|
||
| - zIndex values | ||
| - .zIndexBackground = 0 | ||
| - .zIndexContent = 1 | ||
| - .zIndexOverlay = 1000 | ||
| - .zIndexPopup = 2000 | ||
| - .zIndexMessage = 3000 | ||
| - .zIndexFloating = 4000 | ||
| - .zIndexPriority = 5000 | ||
| - .zIndexDebug = 6000 | ||
|
|
||
| Sample: | ||
|
|
||
| ``` | ||
| import { mergeStyles, tokens } from '@fluentui/react'; | ||
| const useClasses = { | ||
| root: mergeStyle({ | ||
| position: 'relative', | ||
| zIndex: tokens.zIndexContent, | ||
| }), | ||
| }; | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { | ||
| Button, | ||
| Dialog, | ||
| DialogActions, | ||
| DialogBody, | ||
| DialogContent, | ||
| DialogOpenChangeData, | ||
| DialogOpenChangeEvent, | ||
| DialogSurface, | ||
| DialogTitle, | ||
| DialogTrigger, | ||
| } from '@fluentui/react-components'; | ||
| import React from 'react'; | ||
|
|
||
| export interface DialogControlContent { | ||
| open?: boolean; | ||
| defaultOpen?: boolean; | ||
| trigger?: React.ReactElement; | ||
| classNames?: { | ||
| dialogSurface?: string; | ||
| dialogContent?: string; | ||
| }; | ||
| title?: string; | ||
| content?: React.ReactNode; | ||
| closeLabel?: string; | ||
| additionalActions?: React.ReactElement[]; | ||
| onOpenChange?: (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void; | ||
| } | ||
|
|
||
| export const DialogControl: React.FC<DialogControlContent> = (props) => { | ||
| const { open, defaultOpen, trigger, classNames, title, content, closeLabel, additionalActions, onOpenChange } = | ||
| props; | ||
|
|
||
| return ( | ||
| <Dialog open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}> | ||
| <DialogTrigger>{trigger}</DialogTrigger> | ||
| <DialogSurface className={classNames?.dialogSurface}> | ||
| <DialogBody> | ||
| {title && <DialogTitle>{title}</DialogTitle>} | ||
| {content && <DialogContent className={classNames?.dialogContent}>{content}</DialogContent>} | ||
| <DialogActions> | ||
| <DialogTrigger> | ||
| <Button appearance={additionalActions ? 'secondary' : 'primary'}> | ||
| {closeLabel ?? 'Close'} | ||
| </Button> | ||
| </DialogTrigger> | ||
| {additionalActions?.map((action, index) => ( | ||
| <DialogTrigger key={index}>{action}</DialogTrigger> | ||
| ))} | ||
| </DialogActions> | ||
| </DialogBody> | ||
| </DialogSurface> | ||
| </Dialog> | ||
| ); | ||
| }; |
Oops, something went wrong.