85c13bb1f3
Summary: Pull Request resolved: https://github.com/facebook/flipper/pull/872 Move all the JS code related to desktop app to "desktop" subfolder. The structure of "desktop" folder: - `src` - JS code of Flipper desktop app executing in Electron Renderer (Chrome) process. This folder also contains all the Flipper plugins in subfolder "src/plugins". - `static` - JS code of Flipper desktop app bootstrapping executing in Electron Main (Node.js) process - `pkg` - Flipper packaging lib and CLI tool - `doctor` - Flipper diagnostics lib and CLI tool - `scripts` - Build scripts for Flipper desktop app - `headless` - Headless version of Flipper app - `headless-tests` - Integration tests running agains Flipper headless version Reviewed By: passy Differential Revision: D20249304 fbshipit-source-id: 9a51c63b51b92b758a02fc8ebf7d3d116770efe9
73 lines
2.2 KiB
Markdown
73 lines
2.2 KiB
Markdown
---
|
|
id: styling-components
|
|
title: Styling Components
|
|
---
|
|
|
|
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
|
|
|
|
For basic building blocks (views, texts, ...) you can use the styled object.
|
|
|
|
```javascript
|
|
import {styled} from 'flipper';
|
|
|
|
const MyView = styled.div({
|
|
fontSize: 10,
|
|
color: colors.red
|
|
});
|
|
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. Flippers components can be wrapped using the `styled` function which allows adding or overwriting existing style rules.
|
|
|
|
```javascript
|
|
import {FlexRow, styled} from 'flipper';
|
|
|
|
const Container = styled(FlexRow)({
|
|
alignItems: 'center',
|
|
});
|
|
|
|
class MyComponent extends Component {
|
|
render() {
|
|
return <Container>...</Container>;
|
|
}
|
|
}
|
|
```
|
|
|
|
## CSS
|
|
|
|
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.
|
|
|
|
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.div(
|
|
props => ({
|
|
fontSize: 10,
|
|
color: => (props.disabled ? colors.red : colors.black),
|
|
})
|
|
);
|
|
|
|
// usage
|
|
<MyView disabled />
|
|
```
|
|
|
|
Pseudo-classes can be used like this:
|
|
|
|
```javascript
|
|
'&:hover': {color: colors.red}`
|
|
```
|
|
|
|
## 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/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:
|
|
|
|
```javascript
|
|
import {colors} from 'flipper'
|
|
```
|