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

docs update

Browse Source 
Summary: update docs to match new styling API and rename from Sonar to Flipper.

Reviewed By: passy

Differential Revision: D10107270

fbshipit-source-id: 75d7a06c88795aa1d3dce8f135f3a9c21d5d038d
This commit is contained in:
Daniel Büchele
2018-09-28 10:33:18 -07:00
committed by Facebook Github Bot
parent 2ef79d1e94
commit 9d2713cdc0
2 changed files with 55 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
docs/styling-components.md
View File

@@ -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 <MyComponent.Container>...</MyComponent.Container>;
return <Container>...</Container>;
}
}
```
@@ -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
<MyView disabled />
```
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'
```