Proposal: Introduce react-fluentui-examples project #189
Conversation
|
I think we should consider a way to get these examples served by the official docsite. It would be good to have a single source of truth here. One of the big issues with v0 prototypes was that they were not discoverable |
| ReactDOM.createRoot(document.getElementById('root')!).render( | ||
| <React.StrictMode> | ||
| <FluentProvider theme={webLightTheme}> | ||
| <Example /> |
There was a problem hiding this comment.
Let's add some kind of mounting/routing support - Otherwise there's too much barrier for someone to contribute the 2nd,3rd
| # yarn lockfile v1 | ||
|
|
||
|
|
||
| "@babel/runtime@^7.1.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7": |
There was a problem hiding this comment.
individual packages in contrib should not have a lockfile and all deps should be in the root lockfile
| @@ -0,0 +1,29 @@ | |||
| { | |||
| "name": "react-fluentui-examples-list-active-element", | |||
There was a problem hiding this comment.
There's no build infra in the contrib repro to handle application type projects, as all the infra is built around publishable packages. The task runner (NX) isn't even integrated to this package and it maintains its own dependencies.
I'd suggest to move it out to another /apps folder on the root to keep the separation from the publishable packages
| onAction={onAction} | ||
| data-value={name} | ||
| aria-label={name} | ||
| onFocus={onFocus} |
There was a problem hiding this comment.
please test this with JAWS browser mode as that doesn't send focus events as you navigate.
Also, try with at least windows touch screen device if you are still able to change the value with just tap
| value={name} | ||
| className={mergeClasses( | ||
| classes.item, | ||
| activeItem === name && classes.itemActive |
There was a problem hiding this comment.
should there also be aria-selected or some other aria prop indicating the selection state?
Motivation
Historically, in the effort of supporting our partners, we've built a lot of examples in Stackblitz displaying how to use our components in a particular use case. These use cases don't usually (ever?) make it back to the original docsite, even though others could potentially benefit from them too. The reasons for this are multiple:
The problem with the current approach is that these carefully crafted examples end in up
/dev/nulleventually because we forget about them, or don't know about their existence in the first place. Having one place where we could store these, link to them and let the user quickly run them and play with them would be benefitial.Other attempts
The Fluent UI v0 already has a concept of this, they call it Prototypes. This means that the idea behind this concept has been validated in the past, has proven useful and we should strive to provide a similar solution for our V9 docs.
How this works
The main ideas behind this PR are:
Visit the project here
Other considerations
react-fluentui-examplesbe just one package and examples just storybook? Storybook has limitations, the current approach (each example is its own package) is similar to maintain, use in Stackblitz and provides more flexibility though.Footnote
Before this gets merged, all of the links should be updated to target the
mainbranch. Right now for the sake of validating the PR and the usage, it points to this PR branch.