MM-15709 certain aspect ratio of images cause pop on firefox

[sudheerDev]

Dimensions here are numbers and need to have px appended so that the styles are applied

https://mattermost.atlassian.net/browse/MM-15709

[jespino]

It is more straight forward and more "idiomatic" in react to set the length in pixels just as integers, and leave react to add the (px at the end).

Suggested change

	style={{verticalAlign: 'middle', maxHeight: `${dimensions.height}px`, maxWidth: `${dimensions.width}px`}}
	style={{verticalAlign: 'middle', maxHeight: dimensions.height, maxWidth: dimensions.width}}

[sudheerDev]

i am 0/5 on this but that does not seem "idiomatic" to me. Explicit declaration seemed more natural.

[sudheerDev]

React used to add px to string as well and now apparently they don't do it anymore. Just wondering if they stop deciding to that with numbers we have to all change of these instances. I was checking few issues in react where devs are suggesting to remove this. I feel we should keep it explicit by adding them @jespino

[sudheerDev]

At least it is being considered for adding a warning to explicitly add units in dev env facebook/react#13567

[jespino]

I think the discussion goes more in the way of do not explicitly add "px" for every single number and only do it for certain css properties, like Width, Height, Border, Margin and Padding (and all its variants). I still prefer to use numbers right away, but probably makes sense to hear a third opinion here. @bradjcoughlin what do you think about it?

[bradjcoughlin]

I'm 1/5 leaning towards specifying px for any property not on this list: https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59
as referenced in the React docs:
https://reactjs.org/docs/dom-elements.html#style

[jespino]

What that says is actually the opposite of that. It says, if you need other unit than px you must specify it, if not, you can use a regular number, and add the exceptions lists to clarify where it doesn't auto include the px.

[bradjcoughlin]

@jespino right. Not sure why I negated that statement : )

[sudheerDev]

@jespino I feel this would be hard as we have to check for supported properties while programming as well as when reviewing making this harder than needed. Is your suggestion to at-least add it for obvious properties? Final thoughts?

[jespino]

I think extra "thinking" is not needed. The approach is, if your unit is "px", you can use directly a number, if you need to specify the unit, you pass it explicitly. It will add the "px" for that properties where it makes sense, and leave as a number for the properties where it doesn't makes sense.

[jespino]

Proposed an improvement.

[sudheerDev]

@jespino @bradjcoughlin Changed the values to numbers. We kinda need this PR merged ASAP so QA can start testing few blocked tasks. We can continue with the discussion but can we go ahead with the PR if there are no functional changes required?. I can create a follow up PR if needed once we come to an agreement on the idiomatic way of doing this.