[docs] Codesandbox has missing files

[MmtBkn]

Hello,

It's great to have code sandbox in docs. It'll save me a lot of time while prototyping.

I realized that, drawers(completely) and components with images are not working properly.

Avatar;

Drawer;
https://material-ui.com/demos/drawers/
https://codesandbox.io/s/zpro6nj7m

Gridlist;
https://codesandbox.io/s/r4mk39vkxq

etc.

Thank you for your effort.

[lukePeavey]

@mbrookes @oliviertassinari Is ok if I do some work on this issue?

[oliviertassinari]

We use an import to avoid code duplication between the demos. It was done on purpose. I don't think that the issue should change the tradeoff. The best option I can think of is to disable the codesandbox link for those demos.

[lukePeavey]

@oliviertassinari Sorry, I should have been more clear. I wasn't talking about modifying the demos. I thought there would be some way to include external files when creating the sandbox, so i meant that i would work on that.

[lukePeavey]

@oliviertassinari Would something like this be possibility?
Commit 3d7ffaa

If not, i can take care of removing the sandbox links on these pages for now.

[oliviertassinari]

@lukePeavey Thanks for giving a shot at the issue and exploring it! I still think that the simplest option is to disable the codesandbox like by adding some explicit params in the .md. I don't think that having codesandbox working everywhere worth the extra complexity.

[lukePeavey]

Ok, that makes sense.

[mbrookes]

Add Button to the list, due the use of the internal Link component.

Now fixed.

[oliviertassinari]

Ok, #9521 is setting up the infrastructure needed for hiding the codesandox button on the conflicting demos.

[lukePeavey]

Ok, #9521 is setting up the infrastructure needed for hiding the codesandox button on the conflicting demos.

Could i take care of adding this option to the rest of demos (Drawer + GridList)?

[oliviertassinari]

@lukePeavey It would be awesome. I'm not sure which demos need it.

[oliviertassinari]

@lukePeavey Raised an interesting point. We have some weird HTTP 414 in:

• Stepper (HorizontalNonLinearAlternativeLabel)
• Popover (AnchorPlayground)
• Table (EnhancedTabled)

[oliviertassinari]

I don't understand. This PR #9491 was lost along the way. We need to apply it back! Then we can close this issue 🎉 .

[lukePeavey]

One more thing before you close this...

This might be a separate issue, but /static/ images also don't work in code sandbox. This affects a number of demos including Chips, Avatar, Button, Card.

[lukePeavey]

Would it work to replace relative urls to /static/ with absolute urls in the sandbox content?
https://github.com/mui-org/material-ui/blob/627ffda5b565b6a6be99d3c429438e4a2c559ffd/docs/src/modules/components/Demo.js#L101

[oliviertassinari]

Would it work to replace relative urls to /static/ with absolute urls in the sandbox content?

Oh, it's something you added in a previous PR. Yeah. It's a simple fix :).

[lukePeavey]

Ok, cool