From 3292248ff0bb85935e157ddfc8e0ea035990e1e0 Mon Sep 17 00:00:00 2001 From: Joe Lim Date: Sat, 7 Oct 2017 09:28:28 -0700 Subject: [PATCH 1/4] add shorthand for specifying pixel values in style props to docs --- content/docs/reference-dom-elements.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 025cf3dd..70db2469 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -88,6 +88,18 @@ function ComponentWithTransition() { Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W". +When specifying a pixel value for your inline style prop, React automatically appends the string "px" for you after your number value, so this works: + +```js +const divStyle = { + height: 10 // rendered as "height:10px" +}; + +function HelloWorldComponent() { + return
Hello World!
; +} +``` + ### suppressContentEditableWarning Normally, there is a warning when an element with children is also marked as `contentEditable`, because it won't work. This attribute suppresses that warning. Don't use this unless you are building a library like [Draft.js](https://facebook.github.io/draft-js/) that manages `contentEditable` manually. From b0db2aad22ab69e122769c97248c04b154b90ab0 Mon Sep 17 00:00:00 2001 From: Joe Lim Date: Sun, 8 Oct 2017 13:47:05 -0700 Subject: [PATCH 2/4] include notes on unitless props --- content/docs/reference-dom-elements.md | 30 ++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index 70db2469..de87c278 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -99,6 +99,36 @@ function HelloWorldComponent() { return
Hello World!
; } ``` +Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix: + +- `animationIterationCount` +- `boxFlex` +- `boxFlexGroup` +- `boxOrdinalGroup` +- `columnCount` +- `fillOpacity` +- `flex` +- `flexGrow` +- `flexPositive` +- `flexShrink` +- `flexNegative` +- `flexOrder` +- `fontWeight` +- `lineClamp` +- `lineHeight` +- `opacity` +- `order` +- `orphans` +- `stopOpacity` +- `strokeDashoffset` +- `strokeOpacity` +- `strokeWidth` +- `tabSize` +- `widows` +- `zIndex` +- `zoom` + +See [unitless properties](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59) for more examples. ### suppressContentEditableWarning From b333f92d765b9128c9465aaa636f9652c7c5edca Mon Sep 17 00:00:00 2001 From: Joe Lim Date: Sun, 8 Oct 2017 13:49:23 -0700 Subject: [PATCH 3/4] fix minor formatting issue --- content/docs/reference-dom-elements.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index de87c278..aeacd66d 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -99,6 +99,7 @@ function HelloWorldComponent() { return
Hello World!
; } ``` + Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix: - `animationIterationCount` From f3aea257766603912d3354e9466ca53052992bb7 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Mon, 9 Oct 2017 14:27:13 -0700 Subject: [PATCH 4/4] Wording nits --- content/docs/reference-dom-elements.md | 49 ++++++-------------------- 1 file changed, 11 insertions(+), 38 deletions(-) diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md index aeacd66d..fb010ca6 100644 --- a/content/docs/reference-dom-elements.md +++ b/content/docs/reference-dom-elements.md @@ -88,48 +88,21 @@ function ComponentWithTransition() { Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W". -When specifying a pixel value for your inline style prop, React automatically appends the string "px" for you after your number value, so this works: +React will automatically append a "px" suffix to certain inline style properties. For example: ```js -const divStyle = { - height: 10 // rendered as "height:10px" -}; - -function HelloWorldComponent() { - return
Hello World!
; -} +// This: +
+ Hello World! +
; + +// Becomes: +
+ Hello World! +
``` -Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of properties that won't get the automatic "px" suffix: - -- `animationIterationCount` -- `boxFlex` -- `boxFlexGroup` -- `boxOrdinalGroup` -- `columnCount` -- `fillOpacity` -- `flex` -- `flexGrow` -- `flexPositive` -- `flexShrink` -- `flexNegative` -- `flexOrder` -- `fontWeight` -- `lineClamp` -- `lineHeight` -- `opacity` -- `order` -- `orphans` -- `stopOpacity` -- `strokeDashoffset` -- `strokeOpacity` -- `strokeWidth` -- `tabSize` -- `widows` -- `zIndex` -- `zoom` - -See [unitless properties](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59) for more examples. +Not all style properties are converted to pixel strings though. Certain ones remain unitless (eg `zoom`, `order`, `flex`). A complete list of unitless properties can be seen [here](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59). ### suppressContentEditableWarning