MM-16906 Fix styles for size_aware_image component (mattermost#3093)

Revanth47 · Jul 11, 2019 · 12571eb · 12571eb
1 parent b32f03d
commit 12571eb
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/components/__snapshots__/size_aware_image.test.jsx.snap b/components/__snapshots__/size_aware_image.test.jsx.snap
@@ -34,22 +34,22 @@ exports[`components/SizeAwareImage should render a placeholder and has loader wh
  <button
  aria-label="file thumbnail"
  className="style--none"
+ style={
+ Object {
+ "height": 1,
+ "overflow": "hidden",
+ "position": "absolute",
+ "top": 0,
+ "visibility": "hidden",
+ "width": 1,
+ }
+ }
  >
  <img
  alt="image placeholder"
  onError={[Function]}
  onLoad={[Function]}
  src="https://example.com/image.png"
- style={
- Object {
- "height": 1,
- "overflow": "hidden",
- "position": "absolute",
- "top": 0,
- "visibility": "hidden",
- "width": 1,
- }
- }
  />
  </button>
 </Fragment>

diff --git a/components/size_aware_image.jsx b/components/size_aware_image.jsx
@@ -127,6 +127,8 @@ export default class SizeAwareImage extends React.PureComponent {
  Reflect.deleteProperty(props, 'onImageLoaded');
  Reflect.deleteProperty(props, 'onImageLoadFail');
 
+ //The css hack here for loading images in the background can be removed after IE11 is dropped in 5.16v
+ //We can go back to https://github.com/mattermost/mattermost-webapp/pull/2924/files
  if (!this.state.loaded && dimensions) {
  imageStyleChangesOnLoad = {position: 'absolute', top: 0, height: 1, width: 1, visibility: 'hidden', overflow: 'hidden'};
  }
@@ -138,14 +140,14 @@ export default class SizeAwareImage extends React.PureComponent {
  {...props}
  aria-label={ariaLabelImage}
  className='style--none'
+ style={imageStyleChangesOnLoad}
  >
  <img
  className={this.props.className}
  alt='image placeholder'
  src={src}
  onError={this.handleError}
  onLoad={this.handleLoad}
- style={imageStyleChangesOnLoad}
  />
  </button>
  </React.Fragment>

diff --git a/components/size_aware_image.test.jsx b/components/size_aware_image.test.jsx
@@ -24,12 +24,12 @@ describe('components/SizeAwareImage', () => {
 
  loadImage.mockReturnValue(() => ({}));
 
- test('should render an svg when first mounted with dimensions and img display set to position absolute', () => {
+ test('should render an svg when first mounted with dimensions and button display set to position absolute', () => {
  const wrapper = mount(<SizeAwareImage {...baseProps}/>);
 
  const viewBox = wrapper.find('svg').prop('viewBox');
  expect(viewBox).toEqual('0 0 300 200');
- const style = wrapper.find('img').prop('style');
+ const style = wrapper.find('button').prop('style');
  expect(style).toHaveProperty('position', 'absolute');
  expect(style).toHaveProperty('visibility', 'hidden');
  });
@@ -52,11 +52,11 @@ describe('components/SizeAwareImage', () => {
  expect(wrapper).toMatchSnapshot();
  });
 
- test('should not have position absolute on image in loaded state', () => {
+ test('should not have position absolute on button when image is in loaded state', () => {
  const wrapper = mount(<SizeAwareImage {...baseProps}/>);
  wrapper.setState({loaded: true, error: false});
 
- const style = wrapper.find('img').prop('style');
+ const style = wrapper.find('button').prop('style');
  expect(style).not.toHaveProperty('position', 'absolute');
  });