[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

Author: necolas

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,

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',

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',