Material-ui: [Docs] List example failing due to missing MobileTearSheet

[c0debreaker]

Module not found: Error: Cannot resolve 'file' or 'directory' ../../../MobileTearSheet in /Users/admin/repos/asp-log-viewer/app/assets/js

I temporarily made a workaround by changing <MobileTearSheet> to <div>

[mbrookes]

MobileTearSheet is an internal component designed to indicate that the example is truncated. We need to change the path from relative to absolute so the example works externally, but @oliviertassinari should we also add a comment on the code examples to use a div instead?

[mbrookes]

We need to change the path from relative to absolute

Oh, no that won't help of course since the MobileTearSheet component isn't in the npm.

[oliviertassinari]

This component was removed in the next branch. We will no longer have the issue 🎉 .
@mbrookes Sorry, I know you liked it.

[mbrookes]

@oliviertassinari Don't worry, I'm putting it back! 😈

[StephanBijzitter]

But uhmmm, why was it removed? ;-(

[mbrookes]

@StephanBijzitter MobileTearSheet is an internal docs component that adds the zigzag-bottomed outline to List examples. Since it is used in the examples it can cause confusion when the example code is copy pasted.

If we are to maintain the appearance of the examples for the `next branch, we'll have to find an implementation that doesn't have that dependancy.

[Yene-Me]

is not real helpful when the example give does not work :(

[BALEHOK]

Having MobileTearSheet in docs is really confusing. Using <div> instead solves the problem.

[Ashkin]

I was really hoping to use <MobileTearSheet> for displaying a receipt 🙁

[shashankKeshava]

Paper can be used to overcome this issue

const style = {
    width: 400,
    margin: 20,
    display: 'inline-block',
  };


export default function ListCard() {
    return (
        <Paper style={style} zDepth={3}>
            <List>
                <ListItem primaryText="Inbox" leftIcon={< ContentInbox />}/>
                <ListItem primaryText="Starred" leftIcon={< ActionGrade />}/>
                <ListItem primaryText="Sent mail" leftIcon={< ContentSend />}/>
                <ListItem primaryText="Drafts" leftIcon={< ContentDrafts />}/>
                <ListItem primaryText="Inbox" leftIcon={< ContentInbox />}/>
            </List>
        </Paper>
    )
}

Output: