From 9d2713cdc09baeda85962d367ed0cc602e26b16a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20B=C3=BCchele?= Date: Fri, 28 Sep 2018 10:33:18 -0700 Subject: [PATCH] docs update Summary: update docs to match new styling API and rename from Sonar to Flipper. Reviewed By: passy Differential Revision: D10107270 fbshipit-source-id: 75d7a06c88795aa1d3dce8f135f3a9c21d5d038d --- docs/styling-components.md | 55 +++++++++++++++++------------------- docs/ui-components.md | 58 +++++++++++++++++++------------------- 2 files changed, 55 insertions(+), 58 deletions(-) diff --git a/docs/styling-components.md b/docs/styling-components.md index 258d3fe9d..c4c11ae35 100644 --- a/docs/styling-components.md +++ b/docs/styling-components.md @@ -4,7 +4,7 @@ title: Styling Components sidebar_label: Styling Components --- -We use a styled-component based approach to styling our views. This means styles are defined in JavaScript and are written as CSS-stylesheets to the DOM. A component and its styles are coupled. Styled components can extend another to inherit their styles. +We are using [emotion](https://emotion.sh) to style our components. For more details on how this works, please refer to emotion's documentation. We heavily use their [Styled Components](https://emotion.sh/docs/styled) approach, which allows you to extend our built-in components. ## Basic tags @@ -13,35 +13,28 @@ For basic building blocks (views, texts, ...) you can use the styled object. ```javascript import {styled} from 'flipper'; -const MyView = styled.view({ +const MyView = styled('div')({ fontSize: 10, color: colors.red }); -const MyText = styled.text({ ... }); -const MyImage = styled.image({ ... }); -const MyInput = styled.input({ ... }); -``` - -But you can use any other HTML-tags like this: - -```javascript -styled.customHTMLTag('canvas', { ... }); -``` +const MyText = styled('span')({ ... }); +const MyImage = styled('img')({ ... }); +const MyInput = styled('input')({ ... }); ## Extending Flipper Components -It's very common for components to require customizing Flipper's components in some way. For example changing colors, alignment, or wrapping behavior. There is a `extends` method on all styled components which allows adding or overwriting existing style rules. - -For these use cases when a styled component is only used within the context of a single component we encourage declaring it as a inner static instance. This makes it clear where the component is used and avoids polluting the global namespace. +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 -class MyComponent extends Component { - static Container = FlexRow.extends({ - alignItems: 'center', - }); +import {FlexRow, styled} from 'flipper'; +const Container = styled(FlexRow)({ + alignItems: 'center', +}); + +class MyComponent extends Component { render() { - return ...; + return ...; } } ``` @@ -50,18 +43,18 @@ class MyComponent extends Component { The CSS-in-JS object passed to the styled components takes just any CSS rule, with the difference that it uses camel cased keys for the properties. Pixel-values can be numbers, any other values need to be strings. -Dynamic values also can be functions, receiving the react props as argument. (Make sure to add properties passed to a component to the `ignoredAttributes` array to not be written to the DOM as an attribute.) +The style object can also be returned from a function for dynamic values. Props can be passed to the styled component using React. ```javascript -const MyView = styled.view( - { +const MyView = styled('div')( + props => ({ fontSize: 10, - color: props => (props.disabled ? colors.red : colors.black), - }, - { - ignoredAttributes: ['disabled'], - } + color: => (props.disabled ? colors.red : colors.black), + }) ); + +// usage + ``` Pseudo-classes can be used like this: @@ -72,4 +65,8 @@ 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 `src/ui/components/colors.js` with comments about suggested usage of them. And we strongly encourage to use them. +The colors module contains all standard colors used by Flipper. All the available colors are defined in `src/ui/components/colors.js` with comments about suggested usage of them. And we strongly encourage to use them. They can be required like this: + +```javascript +import {colors} from 'flipper' +``` diff --git a/docs/ui-components.md b/docs/ui-components.md index ba219c283..1be2e014d 100644 --- a/docs/ui-components.md +++ b/docs/ui-components.md @@ -29,7 +29,7 @@ To control other flexbox properties than the direction you can extend existing c ```javascript import {FlexRow, styled} from 'flipper'; -const CenterFlexRow = FlexRow.extends({ +const CenterFlexRow = styled(FlexRow)({ justifyContent: 'center', }); @@ -44,7 +44,7 @@ The `Text` component is available to render any text in your plugin. To render h ```javascript import {Text, styled, colors} from 'flipper'; -const Title = Text.extends({ +const Title = styled(Text)({ color: colors.red, }); @@ -75,25 +75,25 @@ import {FlipperPlugin} from 'flipper'; type State = {}; +const Red = styled('div')({ + backgroundColor: colors.red, +}); + +const Blue = styled('div')({ + backgroundColor: colors.blue, +}); + export default class MyFlipperPlugin extends FlipperPlugin { static title = 'My Plugin'; static id = 'my-plugin'; - static Red = styled.view({ - backgroundColor: colors.red, - }); - - static Blue = styled.view({ - backgroundColor: colors.blue, - }); - render() { return ( - + - + ); @@ -118,37 +118,37 @@ import { type State = {}; +const Red = styled('div')({ + backgroundColor: colors.red, +}); + +const Blue = styled('div')({ + backgroundColor: colors.blue, + height: 200, +}); + +const Green = styled('div')({ + backgroundColor: colors.green, + height: 200, +}); + export default class MyFlipperPlugin extends FlipperPlugin { static title = 'My Plugin'; static id = 'my-plugin'; - static Red = styled.view({ - backgroundColor: colors.red, - }); - - static Blue = styled.view({ - backgroundColor: colors.blue, - height: 200, - }); - - static Green = styled.view({ - backgroundColor: colors.green, - height: 200, - }); - render() { return ( - + - + - +