[SpeedDialAction] Convert to hook

[adeelibr]

This PR is related to a small portion of #15231

Converted SpeedDialAction to a functional component.

I searched the thread & found that no one was working on this component, hence I picked this ticket up. 😄

• I have followed (at least) the PR section of the contributing guide.

[mui-pr-bot]

@material-ui/lab: parsed: -1.60% 😍, gzip: -2.18% 😍

Details of bundle changes.

Comparing: 3bbf941...a744d21

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	-0.05%	-0.02%	319,998	319,850	88,297	88,280
@material-ui/core/Paper	-0.00%	-0.02%	68,292	68,290	20,371	20,367
@material-ui/core/Paper.esm	-0.00%	+0.02% 🔺	61,574	61,573	19,162	19,166
@material-ui/core/Popper	-0.01%	+0.06% 🔺	28,945	28,942	10,401	10,407
@material-ui/core/Textarea	-0.04%	0.00%	5,507	5,505	2,362	2,362
@material-ui/core/TrapFocus	0.00%	0.00%	3,753	3,753	1,579	1,579
@material-ui/core/styles/createMuiTheme	0.00%	0.00%	16,010	16,010	5,790	5,790
@material-ui/core/useMediaQuery	-0.08%	+0.09% 🔺	2,597	2,595	1,103	1,104
@material-ui/lab	-1.60%	-2.18%	140,286	138,040	43,459	42,513
@material-ui/styles	0.00%	-0.07%	51,699	51,699	15,346	15,336
@material-ui/system	+0.05% 🔺	+0.09% 🔺	15,420	15,428	4,390	4,394
Button	-0.00%	+0.12% 🔺	84,443	84,441	25,723	25,753
Modal	-0.02%	+0.04% 🔺	14,534	14,531	5,087	5,089
Portal	-0.06%	+0.32% 🔺	3,473	3,471	1,573	1,578
Slider	-0.00%	+0.04% 🔺	75,108	75,107	23,306	23,315
colorManipulator	0.00%	0.00%	3,904	3,904	1,544	1,544
docs.landing	0.00%	+0.01% 🔺	54,338	54,338	13,762	13,763
docs.main	0.00%	0.00%	646,957	646,957	203,886	203,886
packages/material-ui/build/umd/material-ui.production.min.js	0.00%	0.00%	292,982	292,982	84,082	84,082

Generated by 🚫 dangerJS against a744d21

[adeelibr]

@joshwooding I can't seem to understand why the tests in SpeedDial are failing, can you kindly point me in the right direction as to what I am messing up.

[oliviertassinari]

@adeelibr I will have a quick look, see if I can help. @joshwooding is on holidays 🏖.

[oliviertassinari]

@adeelibr Ok, I have found the issue, it was the keydown event no correctly applied. The fix was:

@@ -272,7 +272,7 @@ describe.only('<SpeedDial />', () => {
      if (actionIndex === -1) {
        return getDialButton();
      }
-     return wrapper.find(SpeedDialAction).at(actionIndex);
+     return wrapper.find(SpeedDialAction).at(actionIndex).find(Fab);
    };

updated

[eps1lon]

In general it's better to focus the element in question first and then apply a keydown to document.activeElement. That way you can test that the component in question is focusable and you prevent creating tests cases that will never happen in the browser.

[adeelibr]

Thank you for the help, I was stuck on this for 2 days. How silly of me. 😄

[eps1lon]

@adeelibr Could you rebase this with the latest master? We made some changes to the build pipeline that aren't included here yet. Those are required to pass.

[adeelibr]

@adeelibr Could you rebase this with the latest master? We made some changes to the build pipeline that aren't included here yet. Those are required to pass.

I am sorry for the late response, I have done a rebase =)

[adeelibr]

This commit had so much for me to learn 773ae51 Thank you @oliviertassinari 🎉

[oliviertassinari]

This commit was a bit off topic from the initial purpose of the pull request. The last time I have tried to remove keycode, I had the tests failing, and didn't want to spend the time looking at why. This time, we had an opportunity to batch the effort :).

[oliviertassinari]

@adeelibr Thank you