jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update public docs to use Sandy

Browse Source 
Summary: This updates the docs of Flipper to use Sandy, rather than `FlipperPlugin` class. Restructured the docs a bit as a result.

Reviewed By: passy

Differential Revision: D24991285

fbshipit-source-id: 66d5760c25cf9cf3983515433dfd64348d51db3d
This commit is contained in:
Michel Weststrate
2020-11-16 13:08:05 -08:00
committed by Facebook GitHub Bot
parent da6d6593a5
commit cc438e60ad
12 changed files with 418 additions and 592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/extending/styling-components.mdx
View File

@@ -10,7 +10,7 @@ We are using [emotion](https://emotion.sh) to style our components. For more det
For basic building blocks (views, texts, ...) you can use the styled object.
```javascript
import {styled} from 'flipper';
import {styled} from 'flipper-plugin';
const MyView = styled.div({
fontSize: 10,
@@ -26,9 +26,9 @@ const MyInput = styled.input({ ... });
It's very common for components to require customizing Flipper's components in some way. For example changing colors, alignment, or wrapping behavior. Flippers components can be wrapped using the `styled` function which allows adding or overwriting existing style rules.
```javascript
import {FlexRow, styled} from 'flipper';
import {Layout, styled} from 'flipper-plugin';
const Container = styled(FlexRow)({
const Container = styled(Layout.Container)({
alignItems: 'center',
});
@@ -65,8 +65,9 @@ Pseudo-classes can be used like this:
## Colors
The colors module contains all standard colors used by Flipper. All the available colors are defined in [`desktop/src/ui/components/colors.tsx`](https://github.com/facebook/flipper/blob/master/desktop/app/src/ui/components/colors.tsx) with comments about suggested usage of them. And we strongly encourage to use them. They can be required like this:
The `theme` module contains all standard colors used by Flipper. All available colors can be previewed by starting Flipper and opening `View > Flipper Style Guide`.
The colors exposed here will handle dark mode automatically, so it is recommended to use those colors over hardcoded ones.
```javascript
import {colors} from 'flipper'
import {theme} from 'flipper'
```