From 205582a09f19b7e7f96976a3275698e536678c65 Mon Sep 17 00:00:00 2001
From: Ka-wai Wong <wong.kwd@gmail.com>
Date: Tue, 24 Jul 2018 19:09:31 -0500
Subject: [PATCH 1/2] Add additional device options to addon-viewport

---
 .../manager/components/tests/Panel.test.js    |  2 +-
 addons/viewport/src/shared/index.js           | 51 +++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/addons/viewport/src/manager/components/tests/Panel.test.js b/addons/viewport/src/manager/components/tests/Panel.test.js
index ba83302ebdbb..e12dd740e63f 100644
--- a/addons/viewport/src/manager/components/tests/Panel.test.js
+++ b/addons/viewport/src/manager/components/tests/Panel.test.js
@@ -360,7 +360,7 @@ describe('Viewport/Panel', () => {
     });
 
     it('passes the children', () => {
-      expect(select.props().children).toHaveLength(8);
+      expect(select.props().children).toHaveLength(15);
     });
 
     it('onChange it updates the viewport', () => {
diff --git a/addons/viewport/src/shared/index.js b/addons/viewport/src/shared/index.js
index 95ec4889aae7..dbfd969a09a8 100644
--- a/addons/viewport/src/shared/index.js
+++ b/addons/viewport/src/shared/index.js
@@ -40,6 +40,20 @@ export const INITIAL_VIEWPORTS = {
     },
     type: 'mobile',
   },
+  iphone8p: {
+    name: 'iPhone 7 Plus',
+    styles: {
+      height: '960px',
+      width: '540px',
+    },
+  },
+  iphonex: {
+    name: 'iPhone X',
+    styles: {
+      height: '1218px',
+      width: '563px',
+    },
+  },
   ipad: {
     name: 'iPad',
     styles: {
@@ -48,6 +62,22 @@ export const INITIAL_VIEWPORTS = {
     },
     type: 'tablet',
   },
+  ipad10p: {
+    name: 'iPad Pro 10.5-in',
+    styles: {
+      height: '1112px',
+      width: '834px',
+    },
+    type: 'tablet',
+  },
+  ipad12p: {
+    name: 'iPad Pro 12.9-in',
+    styles: {
+      height: '1366px',
+      width: '1024px',
+    },
+    type: 'tablet',
+  },
   galaxys5: {
     name: 'Galaxy S5',
     styles: {
@@ -56,6 +86,13 @@ export const INITIAL_VIEWPORTS = {
     },
     type: 'mobile',
   },
+  galaxys9: {
+    name: 'Galaxy S9',
+    styles: {
+      height: '1480px',
+      width: '720px',
+    },
+  },
   nexus5x: {
     name: 'Nexus 5X',
     styles: {
@@ -72,5 +109,19 @@ export const INITIAL_VIEWPORTS = {
     },
     type: 'mobile',
   },
+  pixel: {
+    name: 'Pixel',
+    styles: {
+      height: '960px',
+      width: '540px',
+    },
+  },
+  pixelxl: {
+    name: 'Pixel XL',
+    styles: {
+      height: '1280px',
+      width: '720px',
+    },
+  },
 };
 export const DEFAULT_VIEWPORT = 'responsive';

From 0534cdfd2e0d208825ddecc56b60254d52c97215 Mon Sep 17 00:00:00 2001
From: Ka-wai Wong <wong.kwd@gmail.com>
Date: Wed, 25 Jul 2018 07:26:12 -0500
Subject: [PATCH 2/2] Add types to mobile devices in addon-viewport

---
 addons/viewport/src/shared/index.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/addons/viewport/src/shared/index.js b/addons/viewport/src/shared/index.js
index dbfd969a09a8..f4b6c625dd3c 100644
--- a/addons/viewport/src/shared/index.js
+++ b/addons/viewport/src/shared/index.js
@@ -46,6 +46,7 @@ export const INITIAL_VIEWPORTS = {
       height: '960px',
       width: '540px',
     },
+    type: 'mobile',
   },
   iphonex: {
     name: 'iPhone X',
@@ -53,6 +54,7 @@ export const INITIAL_VIEWPORTS = {
       height: '1218px',
       width: '563px',
     },
+    type: 'mobile',
   },
   ipad: {
     name: 'iPad',
@@ -92,6 +94,7 @@ export const INITIAL_VIEWPORTS = {
       height: '1480px',
       width: '720px',
     },
+    type: 'mobile',
   },
   nexus5x: {
     name: 'Nexus 5X',
@@ -115,6 +118,7 @@ export const INITIAL_VIEWPORTS = {
       height: '960px',
       width: '540px',
     },
+    type: 'mobile',
   },
   pixelxl: {
     name: 'Pixel XL',
@@ -122,6 +126,7 @@ export const INITIAL_VIEWPORTS = {
       height: '1280px',
       width: '720px',
     },
+    type: 'mobile',
   },
 };
 export const DEFAULT_VIEWPORT = 'responsive';