[Button][base] Drop `component` prop #36677

mnajdova · 2023-03-29T08:55:39Z

This PR removes the component prop from the ButtonUnstyled component. The motivation for this is that there is a duplicated API for setting the root slot (through the component prop and through the slots.root prop). The difference between these two APIs is that the component prop makes the component polymorphic, which means that you can send the root component's props on the ButtonUnstyled component directly, without getting typescript issues. However, this has shown to have a big performance implications when doing the type checks (see some existing issues for the Material UI's components). One of #36679

BREAKING CHANGE

It will be covered by codemod, see #36831

For Base UI components, the component prop value should be moved to slots.root:

 <Button
-  component="span"
+  slots={{ root: "span" }}
 />

If using TypeScript, you should add the custom component type as a generic on the Button component.

-<Button
+<Button<typeof CustomComponent>
   slots={{ root: CustomComponent }}
   customProp="foo"
 />

mui-bot · 2023-03-29T08:58:13Z

Netlify deploy preview

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against b7d62fb

packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts

…nent-prop

mnajdova · 2023-04-18T10:01:48Z

test/utils/describeConformanceUnstyled.tsx

@@ -165,6 +165,10 @@ function testSlotsProp(element: React.ReactElement, getOptions: () => UnstyledCo
  });

  it('uses the component provided in the `component` prop when both `component` and `slots.root` are provided', () => {
+    if (skip && skip.indexOf('componentProp') >= 0) {


This test should be run only if we are not skipping the component prop test.

packages/mui-base/src/utils/OverridableComponent.ts

mnajdova · 2023-04-18T10:08:19Z

packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx

-  /**
-   * @ignore
-   */
-  onBlur: PropTypes.func,


@michaldudak I think we should go the other way around and explicitly define these props in the ButtonUnstyledProps interface, as if a custom component is used, that does not have these props in the props interface, there will be a typescript error, which would be a bug in my opinion.

I'm not sure if I understand you correctly. Why would there be a TS error? We don't actually use these props anywhere. Also in ButtonUnstyled.spec.tsx we have a case with CustomComponent that don't have these defined and it works fine.

We don't have with custom component. For e.g. this is failing:

<ButtonUnstyled<typeof CustomComponent> slots={{ root: CustomComponent }} stringProp="test" numberProp={0} onClick={() => {}} />

OK, I get it now. It's an interesting problem. The ButtonUnstyled doesn't handle (or require) the click (or several other) events, so strictly speaking, it's unnecessary. It's necessary in the slots.root, though, but there is no way of enforcing it.
In other words, even if we had onClick in ButtonUnstyledProps, it would be possible to provide CustomComponent that ignores its onClick prop and effectively create a broken button.

Here is a failing test: https://app.circleci.com/pipelines/github/mui/material-ui/95773/workflows/1ec2c63d-7103-4340-b894-909bf873b7a0/jobs/509209

I think we should update the types to add these event handlers.

A couple of thoughts I have about this:

How do we decide which events to define explicitly?

If they are defined explicitly, we will lose polymorphism in their parameters. We'll have to type them as either MouseEventHandler<Element> or MouseEventHandler<HTMLButtonElement>. In either case, another test will fail (the last one from the .spec suite).

If we use this pattern, we should also update all the other components

I see your point. I've added ts-expect-error directive on the new test, so that in the future, if we decide to handle this, we have some record that it was an intended decision. We can discuss it separately tough in the future.

michaldudak · 2023-04-18T12:14:23Z

packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.tsx

I wonder if the ButtonUnstyled definition shouldn't be function ButtonUnstyled(props: ButtonUnstyledProps, forwardedRef: React.ForwardedRef<any>) (without the generics). This way, we get strongly typed props inside the component definition. Nothing would change with the exported definition as we cast it to PloymorphicComponent anyway.

I like the explicitness that we have now. We can open a separate issue for this and see what other things I guess. It's anyway internal change

…ova/material-ui into base/remove-component-prop

mnajdova · 2023-04-25T10:36:09Z

@samuelsycamore do we want to still keep the "Unstyled" in the title for the base pages, for e.g. https://deploy-preview-36677--material-ui.netlify.app/base/react-button/ vs https://mui.com/base/react-button/. I would vote for keeping only Button, as we are talking about the concept of button that is implemented trough component and hook.

michaldudak · 2023-04-25T10:57:11Z

packages/api-docs-builder/ApiBuilders/ComponentApiBuilder.ts

@@ -682,22 +685,25 @@ export default async function generateComponentApi(
  // eslint-disable-next-line no-console
  console.log('Built API docs for', reactApi.name);

+  const normalizedApiPathname = reactApi.apiPathname.replace(/\\/g, '/');
+  const noramlizedFilename = reactApi.filename.replace(/\\/g, '/');


Suggested change

const noramlizedFilename = reactApi.filename.replace(/\\/g, '/');

const normalizedFilename = reactApi.filename.replace(/\\/g, '/');

michaldudak · 2023-04-25T11:07:06Z

docs/data/base/components/button/button.md

+The same applies for props specific to custom primitive elements:
+
+```tsx
+<Button<'svg'> viewBox="0 0 24 24" />


It should be:

Suggested change

<Button<'svg'> viewBox="0 0 24 24" />

<Button<'svg'> slots={{ root: 'svg' }} viewBox="0 0 24 24" />

but technically, this won't render anything as the svg should have something inside.
Perhaps an example with another element would work better, such as:

Suggested change

<Button<'svg'> viewBox="0 0 24 24" />

<Button<'img'> slots={{ root: 'img' }} src="button.png" />

hbjORbj · 2023-04-25T11:16:03Z

I think this should no longer appear.

mui-base/src/Button/Button.spec.tsx

michaldudak · 2023-04-25T11:23:00Z

@hbjORbj, you may have your TS definitions cached from another branch (the Button definition says it's an OverridableComponent, which is no longer the case). Restart the TS server, and the error should be gone.

hbjORbj · 2023-04-25T11:33:00Z

@michaldudak Yes it's gone ;) thanks

hbjORbj

looks good!

samuelsycamore · 2023-04-25T15:45:12Z

@samuelsycamore do we want to still keep the "Unstyled" in the title for the base pages, for e.g. https://deploy-preview-36677--material-ui.netlify.app/base/react-button/ vs https://mui.com/base/react-button/. I would vote for keeping only Button, as we are talking about the concept of button that is implemented trough component and hook.

Agreed, I think it's better to drop "Unstyled" from the name wherever it comes up. From a branding perspective, I'd much rather teach our users to call it a "Base UI Button" than an "Unstyled Button."

packages/mui-base/src/Button/Button.spec.tsx

docs/data/base/guides/overriding-component-structure/overriding-component-structure.md

Signed-off-by: Benny Joo <sldisek783@gmail.com>

hbjORbj · 2023-04-26T08:53:11Z

I made the final touches. Will merge it once CIs all pass.

[ButtonUnstyled] Drop component prop

c955845

mnajdova added breaking change component: button This is the name of the generic UI component, not the React module! package: base-ui Specific to @mui/base labels Mar 29, 2023

mnajdova added 2 commits March 29, 2023 11:04

docs:typescript:formatted

8e7ebda

Fix lint issues

615cfaf

mnajdova requested a review from michaldudak March 29, 2023 09:20

Fix tests related to the changes of the conformance test suite

3b88d2d

mnajdova marked this pull request as ready for review March 29, 2023 10:01

michaldudak reviewed Mar 29, 2023

View reviewed changes

packages/mui-base/src/ButtonUnstyled/ButtonUnstyled.types.ts Outdated Show resolved Hide resolved

mnajdova mentioned this pull request Mar 29, 2023

[RFC] Drop the component prop from all Base UI components #36679

Closed

19 tasks

mnajdova added 2 commits March 29, 2023 12:55

Use React.ButtonHTMLAttributes

42c3a54

remove ButtonUnstyledTypeMap usages

abb7d98

mnajdova requested a review from michaldudak March 30, 2023 09:47

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

mnajdova added the on hold There is a blocker, we need to wait label Mar 31, 2023

michaldudak added 3 commits April 14, 2023 12:02

Merge branch 'master' into base/remove-component-prop

7eecd8a

Created a Base UI version of OverridableComponent

aced6ee

Merge remote-tracking branch 'upstream/master' into base/remove-compo…

b96cc6f

…nent-prop

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

revert some test changes, cleanup code

1aca46b

mnajdova commented Apr 18, 2023

View reviewed changes

packages/mui-base/src/utils/OverridableComponent.ts Outdated Show resolved Hide resolved

mnajdova commented Apr 18, 2023

View reviewed changes

Rename the OverridableComponent to PolymorphicComponent

ee4fdb7

michaldudak reviewed Apr 18, 2023

View reviewed changes

mnajdova added 3 commits April 18, 2023 14:16

Fixed regressions in names

f49956d

update the spec tests

c709d0c

Fix lint issues

d61f431

Merge branch 'base/remove-component-prop' of https://github.com/mnajd…

8c7a61e

…ova/material-ui into base/remove-component-prop

michaldudak reviewed Apr 25, 2023

View reviewed changes

hbjORbj added 2 commits April 25, 2023 12:13

address comments

920a682

use single quote

508a008

prettier

2bb9245

hbjORbj approved these changes Apr 25, 2023

View reviewed changes

michaldudak approved these changes Apr 25, 2023

View reviewed changes

hbjORbj reviewed Apr 26, 2023

View reviewed changes

packages/mui-base/src/Button/Button.spec.tsx Show resolved Hide resolved

hbjORbj reviewed Apr 26, 2023

View reviewed changes

docs/data/base/guides/overriding-component-structure/overriding-component-structure.md Outdated Show resolved Hide resolved

hbjORbj reviewed Apr 26, 2023

View reviewed changes

docs/data/base/guides/overriding-component-structure/overriding-component-structure.md Outdated Show resolved Hide resolved

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

hbjORbj mentioned this pull request Apr 26, 2023

[Badge][base] Drop component prop #37028

Merged

1 task

michaldudak changed the title ~~[ButtonUnstyled] Drop component prop~~ [Button][base] Drop component prop Apr 26, 2023

michaldudak added this to the MUI Base stable release milestone Apr 26, 2023

hbjORbj added 4 commits April 26, 2023 09:47

remove unstyled from overriding component structure doc

fbfbd3c

add 1 more ts test

9ce855e

resolve merge conflict

e089918

Merge branch 'master' into base/remove-component-prop

b7d62fb

Signed-off-by: Benny Joo <sldisek783@gmail.com>

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

hbjORbj enabled auto-merge (squash) April 26, 2023 08:53

hbjORbj merged commit 95f93e7 into mui:master Apr 26, 2023

mnajdova mentioned this pull request May 4, 2023

[base][Button] Button's mouse event is of type any in 5.12.3 #37157

Closed

2 tasks

michaldudak mentioned this pull request May 4, 2023

[typescript][base] Fix types of components callbacks parameters #37169

Merged

binh1298 pushed a commit to binh1298/material-ui that referenced this pull request May 17, 2023

[Button][base] Drop component prop (mui#36677)

2b07a0d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Button][base] Drop `component` prop #36677

[Button][base] Drop `component` prop #36677

mnajdova commented Mar 29, 2023 •

edited by hbjORbj

Loading

mui-bot commented Mar 29, 2023 •

edited

Loading

mnajdova Apr 18, 2023

mnajdova Apr 18, 2023

michaldudak Apr 18, 2023

mnajdova Apr 18, 2023

michaldudak Apr 18, 2023

mnajdova Apr 18, 2023

michaldudak Apr 18, 2023

mnajdova Apr 18, 2023

michaldudak Apr 18, 2023

mnajdova Apr 18, 2023

mnajdova commented Apr 25, 2023

michaldudak Apr 25, 2023

hbjORbj Apr 25, 2023

michaldudak Apr 25, 2023

hbjORbj Apr 25, 2023

hbjORbj commented Apr 25, 2023

michaldudak commented Apr 25, 2023 •

edited

Loading

hbjORbj commented Apr 25, 2023

hbjORbj left a comment

samuelsycamore commented Apr 25, 2023 •

edited

Loading

hbjORbj commented Apr 26, 2023

	const noramlizedFilename = reactApi.filename.replace(/\\/g, '/');
	const normalizedFilename = reactApi.filename.replace(/\\/g, '/');

	<Button<'svg'> viewBox="0 0 24 24" />
	<Button<'svg'> slots={{ root: 'svg' }} viewBox="0 0 24 24" />

	<Button<'svg'> viewBox="0 0 24 24" />
	<Button<'img'> slots={{ root: 'img' }} src="button.png" />

[Button][base] Drop component prop #36677

[Button][base] Drop component prop #36677

Conversation

mnajdova commented Mar 29, 2023 • edited by hbjORbj Loading

BREAKING CHANGE

mui-bot commented Mar 29, 2023 • edited Loading

Netlify deploy preview

Bundle size report

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

mnajdova commented Apr 25, 2023

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

hbjORbj commented Apr 25, 2023

michaldudak commented Apr 25, 2023 • edited Loading

hbjORbj commented Apr 25, 2023

hbjORbj left a comment

Choose a reason for hiding this comment

samuelsycamore commented Apr 25, 2023 • edited Loading

hbjORbj commented Apr 26, 2023

[Button][base] Drop `component` prop #36677

[Button][base] Drop `component` prop #36677

mnajdova commented Mar 29, 2023 •

edited by hbjORbj

Loading

mui-bot commented Mar 29, 2023 •

edited

Loading

michaldudak commented Apr 25, 2023 •

edited

Loading

samuelsycamore commented Apr 25, 2023 •

edited

Loading