Migrate to material-ui v4

[helfi92]

Closes #36.

[helfi92]

Do you know why this style broke in latest material-ui? It’d be good to know why.

[edil-it-them]

I added marginRight: 0 to expandIcon that overrides .MuiIconButton-edgeEnd css rule with marginRight: -12px.
My commit made so many changes in yarn.lock. Is it ok?

[helfi92]

I added marginRight: 0 to expandIcon that overrides .MuiIconButton-edgeEnd css rule with marginRight: -12px.

What I'm trying to understand is why it was working in previous material-ui but broke in material v4.

My commit made so many changes in yarn.lock. Is it ok?

Yeah, that's okay.

[edil-it-them]

Do you know why this style broke in latest material-ui? It’d be good to know why.

I'm trying to find it in material-ui changelog and documentation. Don't understand why expandIcon gets edgeEnd now. It's too late in my timezone, I'll try to find it tomorrow

[helfi92]

Sounds good.

[edil-it-them]

This PR added edge props to IconButton in material-ui v4, default value is false. But expandIcon in ExpansionPanelSummary adds edge: 'end' to Icon as default. May be it's material-ui bug )
We can add IconButtonProps={{edge:"false"}} prop to ExpandPanelSummary and we can remove extra classes

[helfi92]

We can add IconButtonProps={{edge:"false"}} prop to ExpandPanelSummary and we can remove extra classes

I like this solution. Let's do it :)

[helfi92]

Code looks good but I just found two other regressions when comparing to https://hassanali.me/material-ui-treeview/ :(

1. Spacing between edge and the button

Before

After

2. Items too close to each other

Before

After

[edil-it-them]

I'm not sure about padding between items, but it must work after overrides in theme.js.
I can't run yarn start:styleguide, cause this warning
theme.js not working in http://localhost:5000/ development server(

[helfi92]

Does yarn run styleguidist server work?

[helfi92]

Another thing you can try is rm -rf node_modules/ && yarn && yarn start:styleguide.

[edil-it-them]

Another thing you can try is rm -rf node_modules/ && yarn && yarn start:styleguide
Does yarn run styleguidist server work?

I've tried both, not working. Catch the same error

[helfi92]

I've tried both, not working. Catch the same error

Ah, it's possible that you introduced code that doesn't compile. Check git status for any code introduced by accident like an extra comma or something.

[edil-it-them]

import StyleGuide from 'react-styleguidist/lib/client/rsg-components/StyleGuide/StyleGuideRenderer'; Works for me

There are two more regressions
Before

After

It seems like after migration css rules work different

In old version .makeStyles-panelExpanded override .MuiExpansionPanel-root.Mui-expanded
Should we change it?

[helfi92]

In old version .makeStyles-panelExpanded override .MuiExpansionPanel-root.Mui-expanded
Should we change it?

Yes please :)

[edil-it-them]

I followed this example to make it work correctly

[helfi92]

Lovely! The only thing missing as far as i can tell is to fix the code text color:

The property keys are hard to see.

[edil-it-them]

Is it OK now?

[helfi92]

Yeah, looks good :) Do you know why this happened by any chance?

[edil-it-them]

React styleguide now uses Prism for codeviewer and these values are default. So I changed some of these values in theme.js
In demo styleguide uses CodeMirror for codeviewer

[helfi92]

Awesome work @Rolikasi. Thank you for the help!

[helfi92]

Released in material-ui-treeview@4.0.0 🎉

[edil-it-them]

Woohoo!!!