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 (
-
+
-
+
-
+