[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
necolas · Mar 12, 2019 · f048d84 · f048d84
1 parent c68b532
commit f048d84
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git 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
@@ -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
@@ -126,8 +126,7 @@ const calculatorKeyStyles = StyleSheet.create({
     borderTopStyle: 'solid',
     borderRightWidth: 1,
     borderRightColor: '#666',
-    borderRightStyle: 'solid',
-    outline: 'none'
+    borderRightStyle: 'solid'
   },
   text: {
     fontWeight: '100',