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

@@ -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'
+```

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<State> {
   static title = 'My Plugin';
   static id = 'my-plugin';
 
-  static Red = styled.view({
-    backgroundColor: colors.red,
-  });
-
-  static Blue = styled.view({
-    backgroundColor: colors.blue,
-  });
-
   render() {
     return (
       <FlexRow fill={true}>
-        <MyFlipperPlugin.Red fill={true} />
+        <Red fill={true} />
 
         <Sidebar position="right" width={400} minWidth={300}>
-          <MyFlipperPlugin.Blue fill={true} />
+          <Blue fill={true} />
         </Sidebar>
       </FlexRow>
     );
@@ -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<State> {
   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 (
       <FlexRow fill={true}>
-        <MyFlipperPlugin.Red fill={true} />
+        <Red fill={true} />
 
         <Sidebar position="right" width={400} minWidth={300}>
           <FlexColumn>
             <Panel heading={'Blue'} floating={false}>
-              <MyFlipperPlugin.Blue />
+              <Blue />
             </Panel>
 
             <Panel heading={'Green'} floating={false}>
-              <MyFlipperPlugin.Green />
+              <Green />
             </Panel>
           </FlexColumn>
         </Sidebar>