refactor(ui): apply popover mappings

akveo · Apr 8, 2019 · 130aa7a · 130aa7a
1 parent 55fe0c9
commit 130aa7a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/src/framework/ui/common/mapping.json b/src/framework/ui/common/mapping.json
@@ -1444,7 +1444,20 @@
     "Popover": {
       "meta": {
         "scope": "all",
-        "parameters": {},
+        "parameters": {
+          "minWidth": {
+            "type": "number"
+          },
+          "minHeight": {
+            "type": "number"
+          },
+          "borderRadius": {
+            "type": "number"
+          },
+          "backgroundColor": {
+            "type": "string"
+          }
+        },
         "appearances": {
           "default": {
             "default": true
@@ -1455,7 +1468,12 @@
       },
       "appearances": {
         "default": {
-          "mapping": {}
+          "mapping": {
+            "minWidth": 56,
+            "minHeight": 32,
+            "borderRadius": 8,
+            "backgroundColor": "color-white"
+          }
         }
       }
     },

diff --git a/src/framework/ui/popover/popover.component.tsx b/src/framework/ui/popover/popover.component.tsx
@@ -96,7 +96,7 @@ export class Popover extends React.Component<Props, State> {
   private getComponentStyle = (source: StyleType): StyleType => {
     return {
       child: {},
-      popover: {},
+      popover: source,
     };
   };
 

diff --git a/src/framework/ui/popover/popoverView.component.tsx b/src/framework/ui/popover/popoverView.component.tsx
@@ -25,7 +25,7 @@ export class PopoverView extends React.Component<Props> {
 
   static defaultProps: Partial<Props> = {
     placement: PLACEMENT_DEFAULT.rawValue,
-    indicatorOffset: 0,
+    indicatorOffset: 8,
   };
 
   private getComponentStyle = (source: StyleType, placement: Placement): StyleType => {

diff --git a/src/playground/src/ui/screen/popover.component.tsx b/src/playground/src/ui/screen/popover.component.tsx
@@ -118,6 +118,7 @@ export default withStyles(PopoverScreen, (theme: ThemeType) => ({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    backgroundColor: 'lightgray',
   },
   componentContainer: {
     margin: 32,