Skip to content

[TouchRipple] Convert to function component#16522

Merged
eps1lon merged 11 commits into
mui:masterfrom
joshwooding:touchripple-function-component
Jul 14, 2019
Merged

[TouchRipple] Convert to function component#16522
eps1lon merged 11 commits into
mui:masterfrom
joshwooding:touchripple-function-component

Conversation

@joshwooding

Copy link
Copy Markdown
Collaborator

Last component conversion for #15231

@joshwooding joshwooding added type: new feature Expand the scope of the product to solve a new problem. TouchRipple labels Jul 8, 2019
Comment thread packages/material-ui/src/ButtonBase/TouchRipple.test.js Outdated
Comment thread packages/material-ui/src/ButtonBase/TouchRipple.test.js Outdated
@mui-pr-bot

mui-pr-bot commented Jul 8, 2019

Copy link
Copy Markdown

@material-ui/core: parsed: -0.08% 😍, gzip: -0.18% 😍
@material-ui/lab: parsed: -1.05% 😍, gzip: -0.95% 😍

Details of bundle changes.

Comparing: f3383e8...9edddc7

bundle parsed diff gzip diff prev parsed current parsed prev gzip current gzip
@material-ui/core -0.08% -0.18% 327,763 327,505 90,314 90,147
@material-ui/core/Paper -0.01% -0.06% 68,477 68,473 20,407 20,395
@material-ui/core/Paper.esm -0.00% +0.01% 🔺 61,761 61,758 19,190 19,191
@material-ui/core/Popper 0.00% -0.05% 28,942 28,942 10,407 10,402
@material-ui/core/Textarea 0.00% -0.08% 5,505 5,505 2,365 2,363
@material-ui/core/TrapFocus 0.00% 0.00% 3,753 3,753 1,576 1,576
@material-ui/core/styles/createMuiTheme -0.01% -0.02% 16,160 16,158 5,813 5,812
@material-ui/core/useMediaQuery 0.00% -0.27% 2,595 2,595 1,104 1,101
@material-ui/lab -1.05% -0.95% 138,027 136,581 42,562 42,158
@material-ui/styles -0.01% -0.06% 51,887 51,882 15,384 15,375
@material-ui/system 0.00% +0.09% 🔺 15,576 15,576 4,432 4,436
Button -1.79% -1.73% 81,161 79,710 24,779 24,350
Modal -0.03% +0.02% 🔺 14,551 14,546 5,102 5,103
Portal 0.00% -0.25% 3,471 3,471 1,573 1,569
Slider -0.01% -0.00% 75,100 75,095 23,309 23,308
colorManipulator 0.00% 0.00% 3,904 3,904 1,543 1,543
docs.landing 0.00% 0.00% 54,338 54,338 13,762 13,762
docs.main -0.03% -0.04% 647,863 647,671 204,220 204,146
packages/material-ui/build/umd/material-ui.production.min.js -0.07% -0.07% 300,178 299,976 86,044 85,983

Generated by 🚫 dangerJS against 9edddc7

@joshwooding

Copy link
Copy Markdown
Collaborator Author

Any ideas on how to fix the Error: No suitable component definition found. error?

Comment thread packages/material-ui/src/ButtonBase/TouchRipple.js Outdated
Comment thread packages/material-ui/src/ButtonBase/TouchRipple.js
Comment thread packages/material-ui/src/ButtonBase/TouchRipple.test.js Outdated
@joshwooding joshwooding mentioned this pull request Jul 9, 2019
29 tasks
@oliviertassinari

Copy link
Copy Markdown
Member

Should it close #15231?

@joshwooding

Copy link
Copy Markdown
Collaborator Author

Should it close #15231?

I think #15231 should stay open a little longer, just until we remove some .defaultPropss and It looks like Menu still uses setRef

@joshwooding
joshwooding force-pushed the touchripple-function-component branch from c8957e0 to 303b5ad Compare July 9, 2019 19:30
@joshwooding
joshwooding force-pushed the touchripple-function-component branch from 745fc74 to 5890bea Compare July 9, 2019 20:56
@joshwooding
joshwooding force-pushed the touchripple-function-component branch from 5890bea to 9abc9b1 Compare July 9, 2019 20:58

@oliviertassinari oliviertassinari left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm so happy to see the hooks milestone soon come to an end. It will free us time to undertake new efforts :).
For the ref part. I don't have a strong preference for any strategy. I have never seen anyone use the TouchRipple directly, but it's always possible. I would hope people use the ButtonBase if they need a ripple animation. TouchRippleProps was allowed for CSS customization (as far as I remember). The fact that people have to import the component with @material-ui/core/ButtonBase/TouchRipple is concerning. The other face that it's not exported in the index.j barrel could suggest that the component is in a weird semi-private/public state.

Comment thread packages/material-ui/src/ButtonBase/TouchRipple.js
Comment thread packages/material-ui/src/ButtonBase/TouchRipple.js
@eps1lon

eps1lon commented Jul 10, 2019

Copy link
Copy Markdown
Member

I have never seen anyone use the TouchRipple directly, but it's always possible. I would hope people use the ButtonBase if they need a ripple animation.

The ref part is in fact required by the ButtonBase.

Agree with the TouchRippleProps part. Those should not be exposed since we already have utility props in the form of disableRipple or disableFocusRipple.

Comment thread packages/material-ui/src/ButtonBase/TouchRipple.js
@oliviertassinari oliviertassinari added component: ButtonBase The React component. and removed TouchRipple labels Jul 11, 2019
@joshwooding
joshwooding force-pushed the touchripple-function-component branch from bc5c63d to 9abc9b1 Compare July 11, 2019 21:46
@eps1lon

eps1lon commented Jul 12, 2019

Copy link
Copy Markdown
Member

Got an idea for the test. I'm not a fan of abstracting assertions. These are comfortable for writing but make reading difficult. Code should be optimized for readability.

Comment thread packages/material-ui/src/ButtonBase/TouchRipple.test.js
Comment thread packages/material-ui/src/ButtonBase/TouchRipple.test.js Outdated
@oliviertassinari

oliviertassinari commented Jul 12, 2019

Copy link
Copy Markdown
Member

Code should be optimized for readability

@eps1lon This is an interesting topic! I would argue that it depends on the context. I see a couple of different cases for us:

  • Core component: Maintainers probably spend x10 more time reading the logic than modifying it. Users probably spend x100 more time reading our sources than modifying it.
  • Material-UI component users, I would expect a wide spectrum, from one shoot contractors that don't look back to large enterprise. The ratio probably ranges from x1/5 to x50, with a predominance of "don't look back" users.
  • Our tests. I spend most of my time writing and reading them. Maybe the ratio is closer to x2.

This is based on my own experience, not a source of truth, the point I want to make is that we might have to balance between 3 states.

  • Optimize the API for writing
  • Optimize the source for reading
  • Keep a balance in the tests for writing and reading

Does it make sense, do you see a flaw in this reasoning?

@eps1lon

eps1lon commented Jul 12, 2019

Copy link
Copy Markdown
Member

Does it make sense, do you see a flaw in this reasoning?

No other than it's just guesswork. Just wondering why you wrote this down since it agrees with everything I said. It even doubles down by arguing users read our source code 100x more which means readable code is even more important. So I'm not sure what you're trying say other than: I agree.

@oliviertassinari

Copy link
Copy Markdown
Member

Ok, perfect, we are aligned.

@eps1lon
eps1lon merged commit 1f06b38 into mui:master Jul 14, 2019
@joshwooding
joshwooding deleted the touchripple-function-component branch November 12, 2019 22:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: ButtonBase The React component. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants