From f048d848a14fdd255cfabf1e32f8c55adc2622f0 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Fri, 1 Mar 2019 14:15:58 -0800
Subject: [PATCH] [change] Replace `outline` with `outline{Color,Style,Width}`
 styles

Rather than mix shortform and longform properties, the 'outline' property is
removed in favour of the longform properties. Support for `outlineOffset` is
also included.

Fix #1255
Close #1256
---
 .../src/exports/View/ViewStylePropTypes.js       |  7 +++++--
 .../storybook/1-components/View/ViewScreen.js    | 16 +++++++++++++---
 .../storybook/3-demos/Calculator/Calculator.js   |  3 +--
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/react-native-web/src/exports/View/ViewStylePropTypes.js b/packages/react-native-web/src/exports/View/ViewStylePropTypes.js
index 838ad65be..942c9c7f1 100644
--- a/packages/react-native-web/src/exports/View/ViewStylePropTypes.js
+++ b/packages/react-native-web/src/exports/View/ViewStylePropTypes.js
@@ -15,8 +15,9 @@ import InteractionPropTypes from '../../modules/InteractionPropTypes';
 import LayoutPropTypes from '../../modules/LayoutPropTypes';
 import ShadowPropTypes from '../../modules/ShadowPropTypes';
 import TransformPropTypes from '../../modules/TransformPropTypes';
-import { number, oneOf, string } from 'prop-types';
+import { number, oneOf, oneOfType, string } from 'prop-types';
 
+const stringOrNumber = oneOfType([string, number]);
 const overscrollBehaviorType = oneOf(['auto', 'contain', 'none']);
 
 const ViewStylePropTypes = {
@@ -47,8 +48,10 @@ const ViewStylePropTypes = {
   boxShadow: string,
   clip: string,
   filter: string,
-  outline: string,
   outlineColor: ColorPropType,
+  outlineOffset: stringOrNumber,
+  outlineStyle: string,
+  outlineWidth: stringOrNumber,
   overscrollBehavior: overscrollBehaviorType,
   overscrollBehaviorX: overscrollBehaviorType,
   overscrollBehaviorY: overscrollBehaviorType,
diff --git a/packages/website/storybook/1-components/View/ViewScreen.js b/packages/website/storybook/1-components/View/ViewScreen.js
index 458bac41b..abc941123 100644
--- a/packages/website/storybook/1-components/View/ViewScreen.js
+++ b/packages/website/storybook/1-components/View/ViewScreen.js
@@ -732,13 +732,23 @@ const stylePropTypes = [
   },
   {
     label: 'web',
-    name: 'outline',
+    name: 'outlineColor',
+    typeInfo: 'color'
+  },
+  {
+    label: 'web',
+    name: 'outlineOffset',
+    typeInfo: 'number | string'
+  },
+  {
+    label: 'web',
+    name: 'outlineStyle',
     typeInfo: 'string'
   },
   {
     label: 'web',
-    name: 'outlineColor',
-    typeInfo: 'color'
+    name: 'outlineWidth',
+    typeInfo: 'number | string'
   },
   {
     name: 'overflow',
diff --git a/packages/website/storybook/3-demos/Calculator/Calculator.js b/packages/website/storybook/3-demos/Calculator/Calculator.js
index 5e166888c..4045ac21c 100644
--- a/packages/website/storybook/3-demos/Calculator/Calculator.js
+++ b/packages/website/storybook/3-demos/Calculator/Calculator.js
@@ -126,8 +126,7 @@ const calculatorKeyStyles = StyleSheet.create({
     borderTopStyle: 'solid',
     borderRightWidth: 1,
     borderRightColor: '#666',
-    borderRightStyle: 'solid',
-    outline: 'none'
+    borderRightStyle: 'solid'
   },
   text: {
     fontWeight: '100',