[TabScrollButton] Add ability to change left and right icons #33863

pratikkarad · 2022-08-08T17:37:02Z

Closes #33235

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

mui-bot · 2022-08-08T17:42:36Z

Netlify deploy preview

https://deploy-preview-33863--material-ui.netlify.app/

@material-ui/core: parsed: +0.14% , gzip: +0.14%
@material-ui/lab: parsed: +0.28% , gzip: +0.24%

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 278b2bb

mnajdova

I basically have the same comment as on the other PR. We need to also have componentsProps for allowing adding additional props. @pratikkarad in order to speed up the review process & not have many distraction, can we focus on getting one of these PRs to the finish line first, and then follow up with the others.

pratikkarad · 2022-08-10T12:27:29Z

Sure, no problem 👍🏻

mnajdova

I apologize for the delayed review. I've left some comments, please have a look.

mnajdova · 2022-09-26T11:36:40Z

packages/mui-material/src/TabScrollButton/TabScrollButton.js


  const theme = useTheme();
  const isRtl = theme.direction === 'rtl';

  const ownerState = { isRtl, ...props };

  const classes = useUtilityClasses(ownerState);
+  const ScrollButtonStart = components.ScrollButtonStart;


Suggested change

const ScrollButtonStart = components.ScrollButtonStart;

const ScrollButtonStart = components.ScrollButtonStart ?? KeyboardArrowLeft;

mnajdova · 2022-09-26T11:37:04Z

packages/mui-material/src/TabScrollButton/TabScrollButton.js


  const theme = useTheme();
  const isRtl = theme.direction === 'rtl';

  const ownerState = { isRtl, ...props };

  const classes = useUtilityClasses(ownerState);
+  const ScrollButtonStart = components.ScrollButtonStart;
+  const ScrollButtonEnd = components.ScrollButtonEnd;


Suggested change

const ScrollButtonEnd = components.ScrollButtonEnd;

const ScrollButtonEnd = components.ScrollButtonEnd ?? KeyboardArrowRight;

mnajdova · 2022-09-26T11:37:46Z

packages/mui-material/src/TabScrollButton/TabScrollButton.js

+    components = {
+      ScrollButtonStart: KeyboardArrowLeft,
+      ScrollButtonEnd: KeyboardArrowRight,
+    },


Suggested change

components = {

ScrollButtonStart: KeyboardArrowLeft,

ScrollButtonEnd: KeyboardArrowRight,

},

components = {},

The main value with this is that, if developer apply only one, it would crash the component

mnajdova · 2022-09-26T11:39:07Z

packages/mui-material/src/TabScrollButton/TabScrollButton.js


  const theme = useTheme();
  const isRtl = theme.direction === 'rtl';

  const ownerState = { isRtl, ...props };

  const classes = useUtilityClasses(ownerState);
+  const ScrollButtonStart = components.ScrollButtonStart;
+  const ScrollButtonEnd = components.ScrollButtonEnd;
+  const getDefaultProps = (icon) => {


Suggested change

const getDefaultProps = (icon) => {

const getIconProps = (icon) => {

mnajdova · 2022-09-26T11:39:43Z

packages/mui-material/src/TabScrollButton/TabScrollButton.js

@@ -67,9 +94,9 @@ const TabScrollButton = React.forwardRef(function TabScrollButton(inProps, ref)
      {...other}
    >
      {direction === 'left' ? (
-        <KeyboardArrowLeft fontSize="small" />
+        <ScrollButtonStart {...getDefaultProps(ScrollButtonStart)} />


Suggested change

<ScrollButtonStart {...getDefaultProps(ScrollButtonStart)} />

<ScrollButtonStart {...getIconProps(ScrollButtonStart)} />

mnajdova · 2022-09-26T11:39:52Z

packages/mui-material/src/TabScrollButton/TabScrollButton.js

      ) : (
-        <KeyboardArrowRight fontSize="small" />
+        <ScrollButtonEnd {...getDefaultProps(ScrollButtonEnd)} />


Suggested change

<ScrollButtonEnd {...getDefaultProps(ScrollButtonEnd)} />

<ScrollButtonEnd {...getIconProps(ScrollButtonEnd)} />

mnajdova · 2022-09-26T11:40:55Z

packages/mui-material/src/TabScrollButton/TabScrollButton.test.js

@@ -48,5 +50,33 @@ describe('<TabScrollButton />', () => {
      );
      expect(getAllByTestId('KeyboardArrowRightIcon').length).to.equal(1);
    });
+
+    it('should render with the ArrowBackIcon icon', () => {


Suggested change

it('should render with the ArrowBackIcon icon', () => {

it('should render with the custom start icon', () => {

mnajdova · 2022-09-26T11:41:03Z

packages/mui-material/src/TabScrollButton/TabScrollButton.test.js

+      expect(getAllByTestId('ArrowBackIcon').length).to.equal(1);
+    });
+
+    it('should render with the ArrowForwardIcon icon', () => {


Suggested change

it('should render with the ArrowForwardIcon icon', () => {

it('should render with the end icon', () => {

mnajdova · 2022-09-26T11:41:22Z

packages/mui-material/src/Tabs/Tabs.js

+    components = {
+      ScrollButtonStart: KeyboardArrowLeft,
+      ScrollButtonEnd: KeyboardArrowRight,
+    },


Suggested change

components = {

ScrollButtonStart: KeyboardArrowLeft,

ScrollButtonEnd: KeyboardArrowRight,

},

components = {},

pratikkarad · 2022-09-27T06:33:33Z

Hi @mnajdova, I made changes in PR as suggested. I also tested locally it is working fine but failing on ci/circleci. Could you please advise, what is going wrong? Thanks!

pratikkarad · 2022-10-01T06:57:32Z

Hi @mnajdova, As per my understanding, we have removed the initialization of components prop from Tab.js

components = {
  ScrollButtonStart: KeyboardArrowLeft,
  ScrollButtonEnd: KeyboardArrowRight,
},

to

components = {},

that's why Argo is complaining about this because the start & end icon was hard coded before. Now it is trying to compare the before and after snapshots.

packages/mui-material/src/TabScrollButton/TabScrollButton.js

pratikkarad · 2022-10-14T15:19:45Z

I tried initializing the component prop in Tab.test.js, still, it is failing at circleci regression test.

Hi @mnajdova, As per my understanding, we have removed the initialization of components prop from Tab.js
components = {
  ScrollButtonStart: KeyboardArrowLeft,
  ScrollButtonEnd: KeyboardArrowRight,
},
to
components = {},
that's why Argo is complaining about this because the start & end icon was hard coded before. Now it is trying to compare the before and after snapshots.

As I suggested, I think initializing the component prop with default Icons may solve the issue. Any suggestions on this?
cc: @mnajdova, @michaldudak

michaldudak · 2022-10-26T09:39:36Z

Regression tests fail because they in your branch use the old SDK that's not supported anymore. Please marge in the latest master.

Signed-off-by: Marija Najdova <mnajdova@gmail.com>

pratikkarad · 2022-11-01T08:30:32Z

Hi @mnajdova, I've updated PR, PTAL.

mnajdova

@pratikkarad we've updated the props name to slots and slotProps accordingly. Would be great if we can follow this new convention. Also, I would use the description we have in the other components for these props, so that we are consistent. From technical point of view, I don't have any comments 👍

safeamiiir · 2023-03-09T17:12:33Z

Hi @mnajdova,
I was trying to find an issue to work on.
I found this PR only needs tiny name change, Can I push new commit into this branch and make it done?

As I understand we only need a naming change:
component -> slot
componentProps -> slotProps

ZeeshanTamboli · 2023-03-10T11:34:30Z

@safeamiiir Please go ahead.

ZeeshanTamboli

I made the appropriate and required changes.

Supported callback in slotsProps, improved unit tests, added TypeScript tests, and updated the documentation.

It looks good to me now!

Addressed

mnajdova reviewed Aug 10, 2022

View reviewed changes

pratikkarad requested a review from mnajdova August 29, 2022 11:29

oliviertassinari requested a review from hbjORbj as a code owner September 5, 2022 14:56

mnajdova previously requested changes Sep 26, 2022

View reviewed changes

pratikkarad requested a review from michaldudak as a code owner September 26, 2022 18:40

pratikkarad requested review from mnajdova and removed request for michaldudak and hbjORbj September 26, 2022 18:42

michaldudak added the component: tabs This is the name of the generic UI component, not the React module! label Oct 12, 2022

mnajdova reviewed Oct 14, 2022

View reviewed changes

packages/mui-material/src/TabScrollButton/TabScrollButton.js Outdated Show resolved Hide resolved

pratikkarad and others added 12 commits October 29, 2022 21:33

[TabScrollButton] Add components prop

d668a79

[TabScrollButton] Add unit tests

6cebe24

[TabScrollButton] Remove normalizedIcons

72fe3cb

[TabScrollButton] Add componentProps

7150edf

[TabScrollButton] Add unit tests for componentsProps

b907551

[TabScrollButton] Add componentsProps

ada6f8f

[TabScrollButton] Fix icon error

6451671

[TabScrollButton] remove default values of components

053167b

Restart CI

cc60325

Update packages/mui-material/src/TabScrollButton/TabScrollButton.js

a54388f

Signed-off-by: Marija Najdova <mnajdova@gmail.com>

[TabScrollButton] Initialize components in test

14c9b7c

[TabScrollButton] fix import order

452d117

pratikkarad force-pushed the table-scroll-button-33235 branch from cb5724e to 452d117 Compare October 29, 2022 16:07

pratikkarad requested a review from mnajdova October 29, 2022 16:30

mnajdova reviewed Nov 10, 2022

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 27, 2023

Merge branch 'master' into table-scroll-button-33235

7d7d6ff

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 10, 2023

pratikkarad added 2 commits March 10, 2023 17:17

[TabScrollButton] Update props

993ba8d

[TabScrollButton] Fix typos

eecec32

pratikkarad requested a review from mnajdova March 10, 2023 15:52

ZeeshanTamboli added 6 commits March 14, 2023 12:55

Merge branch 'master' into table-scroll-button-33235

c80614f

add Tabs and TabScrollButton tests

a87675e

add typescript tests

df73ed6

support slots and slotProps

6491ad0

Merge branch 'master' into table-scroll-button-33235

13d957a

improve slots types

68ecc34

ZeeshanTamboli added the new feature New feature or request label Mar 15, 2023

fix tests

278b2bb

ZeeshanTamboli approved these changes Mar 15, 2023

View reviewed changes

ZeeshanTamboli merged commit 6776631 into mui:master Mar 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TabScrollButton] Add ability to change left and right icons #33863

[TabScrollButton] Add ability to change left and right icons #33863

pratikkarad commented Aug 8, 2022

mui-bot commented Aug 8, 2022 •

edited

Loading

mnajdova left a comment

pratikkarad commented Aug 10, 2022

mnajdova left a comment

mnajdova Sep 26, 2022

mnajdova Sep 26, 2022

mnajdova Sep 26, 2022

mnajdova Sep 26, 2022

mnajdova Sep 26, 2022

mnajdova Sep 26, 2022

mnajdova Sep 26, 2022

mnajdova Sep 26, 2022

mnajdova Sep 26, 2022

pratikkarad commented Sep 27, 2022

pratikkarad commented Oct 1, 2022

pratikkarad commented Oct 14, 2022

michaldudak commented Oct 26, 2022

pratikkarad commented Nov 1, 2022

mnajdova left a comment

safeamiiir commented Mar 9, 2023

ZeeshanTamboli commented Mar 10, 2023

ZeeshanTamboli left a comment

	const ScrollButtonStart = components.ScrollButtonStart;
	const ScrollButtonStart = components.ScrollButtonStart ?? KeyboardArrowLeft;

	const ScrollButtonEnd = components.ScrollButtonEnd;
	const ScrollButtonEnd = components.ScrollButtonEnd ?? KeyboardArrowRight;

	const getDefaultProps = (icon) => {
	const getIconProps = (icon) => {

	<ScrollButtonStart {...getDefaultProps(ScrollButtonStart)} />
	<ScrollButtonStart {...getIconProps(ScrollButtonStart)} />

	<ScrollButtonEnd {...getDefaultProps(ScrollButtonEnd)} />
	<ScrollButtonEnd {...getIconProps(ScrollButtonEnd)} />

	it('should render with the ArrowBackIcon icon', () => {
	it('should render with the custom start icon', () => {

	it('should render with the ArrowForwardIcon icon', () => {
	it('should render with the end icon', () => {

[TabScrollButton] Add ability to change left and right icons #33863

[TabScrollButton] Add ability to change left and right icons #33863

Conversation

pratikkarad commented Aug 8, 2022

mui-bot commented Aug 8, 2022 • edited Loading

Netlify deploy preview

Bundle size report

mnajdova left a comment

Choose a reason for hiding this comment

pratikkarad commented Aug 10, 2022

mnajdova left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pratikkarad commented Sep 27, 2022

pratikkarad commented Oct 1, 2022

pratikkarad commented Oct 14, 2022

michaldudak commented Oct 26, 2022

pratikkarad commented Nov 1, 2022

mnajdova left a comment

Choose a reason for hiding this comment

safeamiiir commented Mar 9, 2023

ZeeshanTamboli commented Mar 10, 2023

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

mui-bot commented Aug 8, 2022 •

edited

Loading