From ae13873c2cb9a932bd4f82bcec4dad96c8eed56c Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Wed, 19 Apr 2017 16:33:36 -0700 Subject: [PATCH] [change] move 'a', 'button', 'ul' style resets to createDOMProps Custom styles resets for the 'a', 'button', and 'ul' DOM elements are now conditionally applied by 'createDOMProps'. This reduces the number of classes on most Views and ensures that 'createDOMElement' (not just 'View' or 'Text') generates views with their styles reset. --- .../renderApplication-test.js.snap | 14 ++++---- .../__snapshots__/index-test.js.snap | 8 ++--- .../__snapshots__/index-test.js.snap | 32 +++++++++---------- .../__snapshots__/index-test.js.snap | 24 +++++++------- src/components/Text/index.js | 7 ---- .../__snapshots__/index-test.js.snap | 16 +++++----- src/components/View/index.js | 14 +------- .../__snapshots__/index-test.js.snap | 6 ++++ src/modules/createDOMProps/index.js | 30 +++++++++++++++-- 9 files changed, 82 insertions(+), 69 deletions(-) diff --git a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap index 69e0b2f5..8ae91ad2 100644 --- a/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap +++ b/src/apis/AppRegistry/__tests__/__snapshots__/renderApplication-test.js.snap @@ -22,8 +22,14 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit .rn-position-bnwqim{position:relative} .rn-right-zchlnj{right:0px} .rn-top-ipm5af{top:0px} -.rn-alignItems-1oszu61{-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch} +.rn-appearance-30o5oe{-moz-appearance:none;-webkit-appearance:none;appearance:none} .rn-backgroundColor-wib322{background-color:transparent} +.rn-color-homxoj{color:inherit} +.rn-font-1lw9tu2{font:inherit} +.rn-textAlign-1ttztb7{text-align:inherit} +.rn-textDecoration-bauka4{text-decoration:none} +.rn-listStyle-1ebb2ja{list-style:none} +.rn-alignItems-1oszu61{-webkit-align-items:stretch;-webkit-box-align:stretch;align-items:stretch} .rn-borderTopStyle-1efd50x{border-top-style:solid} .rn-borderRightStyle-14skgim{border-right-style:solid} .rn-borderBottomStyle-rull8r{border-bottom-style:solid} @@ -33,13 +39,10 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit .rn-borderBottomWidth-ndvcnb{border-bottom-width:0px} .rn-borderLeftWidth-gxnn5r{border-left-width:0px} .rn-boxSizing-deolkf{box-sizing:border-box} -.rn-color-homxoj{color:inherit} .rn-display-6koalj{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex} .rn-flexShrink-1qe8dj5{-webkit-flex-shrink:0;flex-shrink:0} .rn-flexBasis-1mlwlqe{-webkit-flex-basis:auto;flex-basis:auto} .rn-flexDirection-eqz5dr{-webkit-box-direction:normal;-webkit-box-orient:vertical;-webkit-flex-direction:column;flex-direction:column} -.rn-font-1lw9tu2{font:inherit} -.rn-listStyle-1ebb2ja{list-style:none} .rn-marginTop-1mnahxq{margin-top:0px} .rn-marginRight-61z16t{margin-right:0px} .rn-marginBottom-p1pxzi{margin-bottom:0px} @@ -50,9 +53,6 @@ input::-webkit-inner-spin-button,input::-webkit-outer-spin-button,input::-webkit .rn-paddingRight-9aemit{padding-right:0px} .rn-paddingBottom-1mdbw0j{padding-bottom:0px} .rn-paddingLeft-gy4na3{padding-left:0px} -.rn-textAlign-1ttztb7{text-align:inherit} -.rn-textDecoration-bauka4{text-decoration:none} -.rn-appearance-30o5oe{-moz-appearance:none;-webkit-appearance:none;appearance:none} .rn-zIndex-1lgpqti{z-index:0} .rn-zIndex-1wyyakw{z-index:-1} " diff --git a/src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap b/src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap index 59452565..d32f3be3 100644 --- a/src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap +++ b/src/components/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap @@ -4,11 +4,11 @@ exports[`components/ActivityIndicator default render 1`] = `
`; exports[`components/Image prop "accessibilityLabel" 1`] = `
`; exports[`components/Image prop "accessible" 1`] = `
`; exports[`components/Image prop "children" 1`] = `
`; exports[`components/Image prop "resizeMode" value "cover" 1`] = `
`; exports[`components/Image prop "resizeMode" value "none" 1`] = `
`; exports[`components/Image prop "resizeMode" value "stretch" 1`] = `
`; exports[`components/Image prop "resizeMode" value "undefined" 1`] = `
`; exports[`components/Image prop "style" correctly supports "resizeMode" property 1`] = `
`; exports[`components/Image prop "testID" 1`] = `
`; exports[`components/Image sets correct accessibility role" 1`] = `
`; diff --git a/src/components/Switch/__tests__/__snapshots__/index-test.js.snap b/src/components/Switch/__tests__/__snapshots__/index-test.js.snap index 0a23f44f..630bf2fe 100644 --- a/src/components/Switch/__tests__/__snapshots__/index-test.js.snap +++ b/src/components/Switch/__tests__/__snapshots__/index-test.js.snap @@ -2,15 +2,15 @@ exports[`components/Switch disabled when "false" a default checkbox is rendered 1`] = `
@@ -13,7 +13,7 @@ exports[`components/View prop "children" 1`] = ` exports[`components/View prop "hitSlop" handles partial offsets 1`] = `
`; exports[`components/View rendered element is a "div" by default 1`] = `
`; exports[`components/View rendered element is a "span" when inside 1`] = ` `; diff --git a/src/components/View/index.js b/src/components/View/index.js index 8764a7b9..f00dc098 100644 --- a/src/components/View/index.js +++ b/src/components/View/index.js @@ -54,9 +54,8 @@ class View extends Component { } = this.props; const { isInAButtonView } = this.context; - const isButton = AccessibilityUtil.propsToAriaRole(this.props) === 'button'; - otherProps.style = [styles.initial, isButton && styles.buttonOnly, style]; + otherProps.style = [styles.initial, style]; if (hitSlop) { const hitSlopStyle = calculateHitSlopStyle(hitSlop); @@ -84,21 +83,10 @@ const styles = StyleSheet.create({ margin: 0, padding: 0, position: 'relative', - // button and anchor resets - backgroundColor: 'transparent', - color: 'inherit', - font: 'inherit', - textAlign: 'inherit', - textDecorationLine: 'none', - // list reset - listStyle: 'none', // fix flexbox bugs minHeight: 0, minWidth: 0 }, - buttonOnly: { - appearance: 'none' - }, // this zIndex ordering positions the hitSlop above the View but behind // its children hasHitSlop: { diff --git a/src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap b/src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap index 8da2a6f7..d0eeb4fa 100644 --- a/src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap +++ b/src/modules/createDOMElement/__tests__/__snapshots__/index-test.js.snap @@ -14,6 +14,7 @@ exports[`modules/createDOMElement prop "accessibilityLiveRegion" 1`] = ` exports[`modules/createDOMElement prop "accessibilityRole" button 1`] = `