microsoft / fluentui-react-native Goto Github PK
View Code? Open in Web Editor NEWA react-native component library that implements the Fluent Design System.
Home Page: https://developer.microsoft.com/fluentui
License: MIT License
A react-native component library that implements the Fluent Design System.
Home Page: https://developer.microsoft.com/fluentui
License: MIT License
Currently none of the packages are being published or really tracked for versions. We need to add publishing support and change management support, likely using beachball.
Look at ways of removing the need to use renderSlot, instead moving to a *jsx helper syntax without creating the closures that withSlots creates.
The repo should have scripts for creating new component packages with the correct structure.
Is there plans to support drop downs soon?
The Fabric Web folks have a Box in their ThemeProvider to apply the background color to the region covered by the ThemeProvider. It seems like we might want to do this as well with a View. See ThemeProvider and Box here:
I just added a bunch of stuff around the Native Module, Theme Provider, and hooks for the Theme Context.
It'd be good to go back and do a pass at documenting everything.
All exported controls from packages like experimental-web-controls should also export example usages of the controls. This makes it easier to map those directly into demo apps and more fully document them.
A potential folder structure may look something like
-- Controls-Package
---- Example-Control
------ index.ts
------ examples
------- base
------ styles
------ types
------ example-control.tsx
------ tests
There's a couple different issues that can be improved with the expo playground in apps/playground.
With a PR our for #24, I'm adding an issue to track documentation work. It would be nice to have a documentation generation system. The API-extractor docs note that for simple cases using the api-documenter package (https://www.npmjs.com/package/@microsoft/api-documenter) may be sufficient.
Currently all builds are full builds...which is fine right now as they only take about 20 seconds total. As the repo grows this will be problematic.
The Text control needs better documentation added to its Text.mdx documentation file. It doesn't need to be very complicated, but it does need API, prop, and usage documentation.
https://github.com/microsoft/fluentui-react-native/tree/master/apps/fluent-tester
Current instructions:
Then go into apps\fluent-tester folder:
cd apps\fluent-tester
Build the FluentUI Tester bundle:
yarn bundle
Launch the FluentUI Tester app:
yarn run-win32
But they should be cd apps\fluent-tester\win32
Right now this is a stub but there should be an implementation for these platforms. This will be necessary for getting our button code to run correctly on those platforms.
The Separator control needs better documentation added to its Separator.mdx documentation file. It doesn't need to be very complicated, but it does need API, prop, and usage documentation.
The Stack component needs better documentation added to its Stack.mdx documentation file. It doesn't need to be very complicated, but it does need API, prop, and usage documentation.
This repo should be called fluent-ui-react-native
for consistency with the fluent-ui-react
sister repo (not fluentui-react-native
).
Add README.md file in the directory.
Currently the build scripts are extremely rudimentary. We should do the following:
According to Fluent design website, the Windows Button should look like this:
But currently, it looks like this:
Creating this issue to track this inconsistency. Please let me know if you have any questions.
The Button control needs better documentation added to its Button.mdx documentation file. It doesn't need to be very complicated, but it does need API, prop, and usage documentation.
immutable-merge
is incredibly core to most of the work that goes on in this repository, making sure it is performant and that the code is as tight as possible is a worthy work item
A size auditor to check against bundle size change (as fabric-react does) would be really nice to have.
We have just tasks for api-extraction, but it is not currently configured.
An attempt at this was done in the documentation folder using docz but it seems highly unstable and doesn't actually work. We should find some solution, likely involving gatsby, to do auto documentation.
Ideally this also includes support for mdx files.
There is a likely bug in immutable merge with array handling. Initially the checks for typeof entry === 'object' were calls to an _isPlainObject function which would omit arrays. It isn't this simple though because styles can be arrays or plain objects.
The routine ultimately needs to exclude arrays (allow the last value to win) except in the case where there is a handler function defined.
This should be validated by new test cases in the unit tests...once jest is running correctly.
Symbols seem copy-able in the babel transpilation down to ES5. Currently I'm deleting the old theme settings cache in resolvePartialTheme
@JasonVMo FYI.
The Pressable component needs better documentation added to its Pressable.mdx documentation file. It doesn't need to be very complicated, but it does need API, prop, and usage documentation.
The CI Loop should trigger builds on pull requests into master. There is additional work here to run code formatting and linting to make sure our repo stays clean.
Hello, I'm trying to use some snippets from the tester code but I can't seem to find where the fluentui-react-native/stack exists
Failures in beachball may not fail the CI jobs. Upgrading to 1.15.1 will fix this.
We have a few win32 components in another repo. This issue just tracks moving them here.
Some level of code formatting, beyond what linters provide, is a good start
The FocusTrapZone control needs better documentation added to its FocusTrapZone.mdx documentation file. It doesn't need to be very complicated, but it does need API, prop, and usage documentation.
Right now we send an event when the platform theme changes and custom theme definitions can be functional rather than a static JSON object, but the functional theme definition only takes a parent theme and the theme object has no obvious place for the Office theme setting.
A simple solution is simply providing a "name" to the theme object which the platform theme can fill in. This work isn't hard, it's more of a "how exactly do we want this API to look" type question than anything.
Repro:
Note:
Use Live Reload also doesn't work, but there is no crash
We're publishing to a public npm feed, anyway, so how private is it?
Have we crossed whatever threshold we needed that justifies making it public?
Look at the customize syntax to see if settings objects can be specified directly without expanding the types too much.
Welcome Build 2020 participants! Did you get a chance to try out the Fluent UI React Native library
or watch our Build 2020 talk? If so, we want to hear your feedback! The library is still in its early stages, but we wanted to show developers the direction we're taking things, and get early feedback on how we can make this even more useful to you moving forward.
Feel free to leave feedback on any of the following (and please keep feedback constructive and respectful):
Thank you,
The Fluent UI React Native team
This is the new industry standard and also lets us use a number of additional community plugins that only target JS
Now that #16 is closed, this issue will track incremental updates to the set of tslint rules we follow.
Add a README.md for this package
This should have:
We need an easy API for consumers of primitive components to create StyleSheets that can reference theme values and regenerate in response to theme changes.
The FocusTrapZone control needs better documentation added to its FocusTrapZone.mdx documentation file. It doesn't need to be very complicated, but it does need API, prop, and usage documentation.
The library needs a demo app to include in the readme/getting started instructions. The purpose of this demo app is to give folks a quick way to download and use our package in a prepackaged environment, for people that don't have an existing react-native app to add our package to. Examples:
interface IFooSlotProps {
root: { someRequiredString: string; someOptionalString?: string };
}
export const MyFooComponent = compose<IFooProps, IFooSlotProps>({
...restOfComposeOptions,
render: (Slots: ISlots<IFooSlotProps>, data: IFooRenderData, ...children: React.Component[]) : JSX.Element => {
return <Slots.root />
}
})
In the example above the JSX for <Slots.root />
fails to compile because it's missing someRequiredString, even though it should have been baked into the slot props as part of usePrepareProps.
Jason suggested fixing this might be as simple as adding a Partial<>
around TProps
in _createSlotRenderFunction
Basically this:
type foo = IExtractSlotProps<{ slotProps: { root: ViewProps } }>;
// foo.root is object not ViewProps
Adopting the new versions of @uifabricshared libraries forced me to introduce this work around to some components:
compose(
...otherstuff,
settings,
slots: {
root: ReactNative.View,
content: ReactNative.Text
},
styles: {
root: [], // Empty array
content: [foregroundColorTokens, textTokens]
}
);
Without the empty array of style operations, the root slot settings get dropped from the final slot props.
We should make a pass through the various packages to ensure we are using references such as "react-native": "^0.60" rather than specific versions. This should be done for everything in the repo.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.