Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate to MUI v5 #254

Merged
merged 21 commits into from
Aug 9, 2024
Merged

Migrate to MUI v5 #254

merged 21 commits into from
Aug 9, 2024

Conversation

Vidminas
Copy link
Contributor

@Vidminas Vidminas commented Aug 3, 2024

I wanted to build on this extension adding components from Material UI v5, but currently, it uses Material UI v4. Figured I'd separate the migration from any of my new additions and contribute back to the original repo :)

Even if you don't need any MUI v5 components, there are a number of reasons to migrate (https://mui.com/material-ui/migration/migration-v4/):

Material UI v5 includes many bug fixes and improvements over v4.

Chief among these improvements is the new styling engine, which offers significant advancements in performance when it comes to dynamic styles, as well as a more enjoyable developer experience.

Additionally, v5 is the only version that fully supports React 18, so you will need to migrate to take advantage of the latest React features.

This also includes migration to the latest TypeScript version and migration from JSS to TSS, with better TypeScript support for styles.

I tested the changes manually with MS Edge on Google and Bing. There shouldn't be any visual or functional differences, before and after screenshots seemed identical:
image
image

One significant manual change was required in content.tsx and ResultsManagement.tsx -- the previous implementation was relying on the HTML structure of icon buttons which changed from material-ui v4 in mui v5:

material-ui v4 mui v5
<button> contains <span> with <svg> icon inside <button> contains <svg> directly
image image

Instead of attaching on click listeners, which pick the button from event target (button, svg, or path) based on their assumed HTML layout, I replaced it with passing a callback function through props. This also does away with needing to place data- attributes on HTML elements.

pistom and others added 20 commits September 16, 2023 21:35
Bumps [postcss](https://github.com/postcss/postcss) from 8.4.21 to 8.4.31.
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](postcss/postcss@8.4.21...8.4.31)

---
updated-dependencies:
- dependency-name: postcss
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Bumps [postcss](https://github.com/postcss/postcss) from 8.4.21 to 8.4.31.
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](postcss/postcss@8.4.21...8.4.31)

---
updated-dependencies:
- dependency-name: postcss
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Bumps [postcss](https://github.com/postcss/postcss) from 8.4.21 to 8.4.31.
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](postcss/postcss@8.4.21...8.4.31)

---
updated-dependencies:
- dependency-name: postcss
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
* Add web-ext and web-ext-types to dev dependencies

* Add package.json script for load:msedge

* Update README
@pistom pistom changed the base branch from master to release/4.4.2 August 8, 2024 13:21
@pistom
Copy link
Owner

pistom commented Aug 8, 2024

Hi, Very nice job. Thank you!
I will take the changes for the next release

@pistom pistom merged commit befc410 into pistom:release/4.4.2 Aug 9, 2024
@Vidminas Vidminas deleted the mui5 branch October 16, 2024 12:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants