[EmptyState] component within content context not displaying svg image

Shopify / polaris

Shopify’s design system to help us work together to build a great experience for all of our merchants.

https://polaris.shopify.com

Other

5.8k stars 1.17k forks source link

[EmptyState] component within content context not displaying svg image #2611

Closed meandillar closed 1 year ago

meandillar commented 4 years ago

Issue summary

I am using an EmptyState component within a Card. When using an svg the image is 0 x 0 pixels meaning it isn't visible.

Expected behavior

Image should be visible.

Actual behavior

Image is 0 x 0 pixels. This is fixed by giving the wrapping container Polaris-EmptyState__ImageContainer a width, for example, of 100%

Specifications

Are you using the React components? (Y/N): Y
Polaris version number: 4.9.1
Browser: Chrome
Device: Macbook Pro
Operating System: Catalina

ghost commented 4 years ago

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

AndrewMusgrave commented 4 years ago

Reproduction: https://codesandbox.io/s/intelligent-bas-2w98s cc / @chloerice Could this be related to any of your empty state work? Or could your work be fixing this?

ConduciveMammal commented 4 years ago

I'm also getting this issue with SVG images. There's seemingly no way to specify a width for the image.

aaronadamsCA commented 3 years ago

As of Polaris 6 my SVG images disappeared from EmptyState.

I'm injecting this CSS to work around the issue:

.Polaris-EmptyState__ImageContainer {
  width: 24rem;
}

What's happening here:

The empty state component uses a flexbox column.
Unlike a regular block element, a child of a flex column starts at 0 width, and then grows to the width of its children.
A PNG img defaults to its own width, but an SVG img defaults to its parent's width. This is 0.
The container takes the width of its children. This is also 0.
It appears somebody tried using flex-basis: 50% to give the image container width; but flex-basis works along the flex axis, so when flex-direction is a column, this controls height instead.

AndrewMusgrave commented 3 years ago

cc/ @alex-page @kyledurand

devopsangel commented 3 years ago

I have sort of the same issue too. Somehow my margin-left got -70%

Ended up injecting too.

.Polaris-EmptyState__Image {
    margin-left: -0% !important;
}

marc-firebrand commented 3 years ago

Also getting this issue with an SVG in an EmptyState, will inject the css to workaround the issue but would be good to get a fix.

alex-page commented 3 years ago

Hey folks, if anyone wants to make a PR to look into resolving this problem I would be happy to review it.

shameelabd commented 3 years ago

Just bumping this, also ran into it. When spinning up a new service via the services-db quick start, the default code makes use of an EmptyState component with an svg, and its not displaying anything. Sample branch: empty-state-broken-demo.

SVG's dont work (weather its a remote url or a local file), however other file types seem to work fine

github-actions[bot] commented 1 year ago

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action. → If there's no activity within a week, then a bot will automatically close this. Thanks for helping to improve Shopify's design system and dev experience.