diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 77206c8d..825974cc 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,25 +1,24 @@ # Contributing to this project The issue tracker is the preferred channel for [bug reports](#bugs), -[features requests](#features) and [submitting pull -requests](#pull-requests). +[features requests](#features), and [submitting pull requests](#pull-requests). ## Bug reports A bug is a _demonstrable problem_ that is caused by the code in the repository. -Good bug reports are extremely helpful - thank you! +Good bug reports are extremely helpful - thank you! You can compare the +behaviour against that expected with React Native by using the [React Native +Playground](https://rnplay.org/) Guidelines for bug reports: 1. **Use the GitHub issue search** — check if the issue has already been - reported. + reported or fixed in `master`. -2. **Check if the issue has been fixed** — try to reproduce it using the - latest `master` or development branch in the repository. - -3. **Isolate the problem** — create a [reduced test - case](http://css-tricks.com/reduced-test-cases/) and a live example. +2. **Isolate the problem** — create a [reduced test + case](http://css-tricks.com/reduced-test-cases/) using this + [codepen](https://codepen.io/necolas/pen/PZzwBR?editors=001). A good bug report contains as much detail as possible. What is your environment? What steps will reproduce the issue? What browser(s) and OS @@ -49,9 +48,9 @@ Example: ## Feature requests Feature requests are welcome. But take a moment to find out whether your idea -fits with the scope and aims of the project. It's up to *you* to make a strong -case to convince the project's developers of the merits of this feature. Please -provide as much detail and context as possible. +fits with the scope and aims of the project (i.e., is this for parity with +React Native? does it make sense on the Web?). Please provide as much detail +and context as you think is necessary to make your case. @@ -70,7 +69,8 @@ Development commands: * `npm run build` – build the library * `npm run examples` – start the dev server and develop against live examples * `npm run lint` – run the linter -* `npm run test` – run the linter and unit tests +* `npm run test:watch` – run and watch the unit tests +* `npm test` – run the linter and unit tests Please follow this process for submitting a patch: diff --git a/README.md b/README.md index e234f975..7ce9e2be 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,9 @@ [React Native][react-native-url] components and APIs for the Web. +Try it out in the [React Native for Web +Playground](http://codepen.io/necolas/pen/PZzwBR) on CodePen. + * [Discord: #react-native-web on reactiflux][discord-url] * [Gitter: react-native-web][gitter-url] @@ -71,7 +74,7 @@ const styles = StyleSheet.create({ width: 40, }, text: { - flex: 1, + flexGrow: 1, justifyContent: 'center' }, title: { @@ -174,7 +177,6 @@ flexbox][flexbox-guide-url]. ### Media Queries, pseudo-classes, and pseudo-elements - Changing styles and/or the render tree in response to device adaptation can be controlled in JavaScript, e.g., [react-media-queries](https://github.com/bloodyowl/react-media-queries), @@ -185,7 +187,7 @@ benefit of co-locating breakpoint-specific DOM and style changes. Pseudo-classes like `:hover` and `:focus` can be implemented with the `onHover` and `onFocus` events. -Pseudo-elements are not supported. +Pseudo-elements are not supported; elements can be used instead. ## Accessibility diff --git a/src/components/CoreComponent/index.js b/src/components/CoreComponent/index.js index 7d01f5c6..58c54d3a 100644 --- a/src/components/CoreComponent/index.js +++ b/src/components/CoreComponent/index.js @@ -21,14 +21,11 @@ const roleComponents = { class CoreComponent extends React.Component { static propTypes = { accessibilityLabel: PropTypes.string, - accessibilityLiveRegion: PropTypes.oneOf(['assertive', 'off', 'polite']), + accessibilityLiveRegion: PropTypes.oneOf([ 'assertive', 'off', 'polite' ]), accessibilityRole: PropTypes.string, accessible: PropTypes.bool, className: PropTypes.string, - component: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.string - ]), + component: PropTypes.oneOfType([ PropTypes.func, PropTypes.string ]), style: PropTypes.object, testID: PropTypes.string, type: PropTypes.string