Skip to content
This repository has been archived by the owner on Mar 13, 2024. It is now read-only.

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

Merged
merged 2 commits into from
May 22, 2019
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8fa16ac
MM-155703 certain aspect ratio of images cause pop on firefox
sudheerDev May 20, 2019
f085113
remove string convertion and keep maxHeight and maxWidth as numbers
sudheerDev May 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/__snapshots__/size_aware_image.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ exports[`components/SizeAwareImage should render a placeholder and has loader wh
<svg
style={
Object {
"maxHeight": "200",
"maxWidth": "300",
"maxHeight": "200px",
"maxWidth": "300px",
"verticalAlign": "middle",
}
}
Expand Down
2 changes: 1 addition & 1 deletion components/size_aware_image.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export default class SizeAwareImage extends React.PureComponent {
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
style={{verticalAlign: 'middle', maxHeight: `${dimensions.height}`, maxWidth: `${dimensions.width}`}}
style={{verticalAlign: 'middle', maxHeight: `${dimensions.height}px`, maxWidth: `${dimensions.width}px`}}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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}}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@sudheerDev sudheerDev May 21, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor

@bradjcoughlin bradjcoughlin May 22, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@sudheerDev sudheerDev May 22, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

/>
</div>
);
Expand Down