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

[material-ui] Remove remaining IE11 code #42283

Merged
merged 10 commits into from
Jun 3, 2024

Conversation

DiegoAndai
Copy link
Member

@DiegoAndai DiegoAndai commented May 17, 2024

Material UI portion of #14420

Remove the remaining IE11-related code from the Material UI package.

@DiegoAndai DiegoAndai added the package: material-ui Specific to @mui/material label May 17, 2024
@DiegoAndai DiegoAndai self-assigned this May 17, 2024
@mui-bot
Copy link

mui-bot commented May 17, 2024

Netlify deploy preview

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

@material-ui/core: parsed: -0.22% 😍, gzip: -0.29% 😍
@material-ui/lab: parsed: -0.34% 😍, gzip: -0.39% 😍
TabList: parsed: -1.02% 😍, gzip: -0.97% 😍

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 1efe736

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 22, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 22, 2024
Copy link
Member Author

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

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

Explanation on some of the changes (some missing)

event.key === ' '
) {
keydownRef.current = true;
if (focusRipple && !event.repeat && focusVisible && rippleRef.current && event.key === ' ') {
Copy link
Member Author

Choose a reason for hiding this comment

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

Refactored with repeat: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat.

Screen.Recording.2024-05-22.at.12.02.45.mov

// technically the second keydown should be fire with repeat: true
// but that isn't implemented in IE11 so we shouldn't mock it here either
fireEvent.keyDown(button, { key: 'Enter' });
fireEvent.keyDown(button, { key: 'Enter', repeat: true });
Copy link
Member Author

Choose a reason for hiding this comment

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

Adjust according to above's (ButtonBase) refactor

@@ -117,7 +117,6 @@ const DialogPaper = styled(Paper, {
})(({ theme }) => ({
margin: 32,
position: 'relative',
overflowY: 'auto', // Fix IE11 issue, to remove at some point.
Copy link
Member Author

Choose a reason for hiding this comment

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

Introduced in #8877 to fix #8832.

Tested that it's working in Chrome, Firefox and Safari. Video from Chrome:

Screen.Recording.2024-05-22.at.14.25.12.mov

@@ -140,7 +139,6 @@ const DialogPaper = styled(Paper, {
style: {
display: 'inline-block',
verticalAlign: 'middle',
textAlign: 'left', // 'initial' doesn't work on IE11
Copy link
Member Author

Choose a reason for hiding this comment

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

Introduced in: https://github.com/mui/material-ui/pull/15896/files#diff-ceb6f0d9cdbe18a334a4162f10048041b9b83290105a22ffd611608d94b81960R71

ested that it's working in Chrome, Firefox, and Safari. Video from Chrome:

Screen.Recording.2024-05-22.at.14.33.05.mov

Copy link
Member

Choose a reason for hiding this comment

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

I'm probably missing something, but the text in your recording isn't left alingned?

Copy link
Member Author

Choose a reason for hiding this comment

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

You're right 😅 I probably just saw a big block of text and that it scrolled as expected and missed the alignment. Fixed in #42778.

Thanks for the catch.

@@ -79,7 +79,6 @@ const FilledInputRoot = styled(InputBaseRoot, {
'&::after': {
left: 0,
bottom: 0,
// Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
Copy link
Member Author

Choose a reason for hiding this comment

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

There are a bunch of these comments, which I think got copied and pasted from the original issue: cssinjs/jss#242 (comment)

We have other content: '""' occurrences in the codebase without the comment. I think it's not bad to have content: '""', so I just removed the comment.

// IE11 support, replace with Number.isNaN
// eslint-disable-next-line no-restricted-globals
if (isNaN(indicatorStyle[startIndicator]) || isNaN(indicatorStyle[size])) {
if (Number.isNaN(+indicatorStyle[startIndicator]) || Number.isNaN(+indicatorStyle[size])) {
Copy link
Member Author

Choose a reason for hiding this comment

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

Copy link
Member

@ZeeshanTamboli ZeeshanTamboli May 25, 2024

Choose a reason for hiding this comment

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

Actually we don't need to check for NaN global type since it will be never be NaN as per the logic. See discussion in #41709 especially #41709 (comment) and #41709 (comment). We can use a typeof number check safely.

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks for bringing this up, updated!

@@ -110,27 +110,6 @@ describe('<InputBase />', () => {
expect(handleFocus.callCount).to.equal(1);
});

// IE11 bug
Copy link
Member Author

Choose a reason for hiding this comment

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

Removed IE11 related test

@@ -48,7 +48,6 @@ const IconButtonRoot = styled(ButtonBase, {
fontSize: theme.typography.pxToRem(24),
padding: 8,
borderRadius: '50%',
overflow: 'visible', // Explicitly set the default value to solve a bug on IE11.
Copy link
Member Author

Choose a reason for hiding this comment

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

Introduced in #12743

Tested that it's working in Chrome, Firefox and Safari. Screenshot from Chrome:

Screenshot 2024-05-22 at 14 41 02

@@ -45,7 +45,6 @@ const InputAdornmentRoot = styled('div', {
overridesResolver,
})(({ theme }) => ({
display: 'flex',
height: '0.01em', // Fix IE11 flexbox alignment. To remove at some point.
Copy link
Member Author

Choose a reason for hiding this comment

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

Introduced in #12975

Tested it in Chrome, Firefox, and Safari. Screenshot in Chrome:

Screenshot 2024-05-23 at 16 16 02

animationName: 'mui-auto-fill-cancel',
animationDuration: '10ms',
'&::-webkit-input-placeholder': placeholder,
'&::-moz-placeholder': placeholder, // Firefox 19+
'&:-ms-input-placeholder': placeholder, // IE11
Copy link
Member Author

Choose a reason for hiding this comment

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

This and the other '&:-ms-input-placeholder' were added in the original InputBase: https://github.com/mui/material-ui/pull/12076/files#diff-a5f495d99c59823944e8c99682e25d509e79d427ab0442c71589da33e6f350f6R81

Tested it in Chrome, Firefox, and Safari. Screenshot in Chrome:

Screen.Recording.2024-05-23.at.16.33.57.mov

@@ -390,13 +387,6 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) {
}, [value, checkDirty, isControlled]);

const handleFocus = (event) => {
// Fix a bug with IE11 where the focus/blur events are triggered
Copy link
Member Author

Choose a reason for hiding this comment

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

Introduced in https://github.com/mui/material-ui/pull/12076/files#diff-a5f495d99c59823944e8c99682e25d509e79d427ab0442c71589da33e6f350f6R225

Tested it in Chrome, Firefox, and Safari. Screenshot in Chrome:

Screen.Recording.2024-05-23.at.16.39.35.mov

@@ -184,12 +184,11 @@ export const InputBaseInput = styled('input', {
display: 'block',
// Make the flex item shrink with Firefox
minWidth: 0,
width: '100%', // Fix IE11 width issue
Copy link
Member Author

Choose a reason for hiding this comment

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

@@ -35,10 +35,6 @@ export const StyledSelectSelect = styled('select')(({ theme }) => ({
// Reset Chrome style
borderRadius: 0,
},
// Remove IE11 arrow
Copy link
Member Author

Choose a reason for hiding this comment

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

Couldn't trace it further than https://github.com/mui/material-ui/pull/24698/files#diff-eca42ced51d2f5fc85b4932a8d16e28b815c6f193514d1f4101949e879970b12R53

Looks good in Chrome, Firefox, and Safari. Screenshot in Chrome:

Screenshot 2024-05-23 at 16 45 49

Copy link
Member

Choose a reason for hiding this comment

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

@@ -104,7 +104,6 @@ const StepLabelIconContainer = styled('span', {
slot: 'IconContainer',
overridesResolver: (props, styles) => styles.iconContainer,
})({
flexShrink: 0, // Fix IE11 issue
Copy link
Member Author

Choose a reason for hiding this comment

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

Introduced in #13375

Tested in Chrome, Firefox, and Safari. Screenshot in Chrome:

Screenshot 2024-05-23 at 16 47 21

@DiegoAndai DiegoAndai added on hold There is a blocker, we need to wait breaking change labels May 23, 2024
@DiegoAndai
Copy link
Member Author

On hold: #42358

@DiegoAndai DiegoAndai marked this pull request as ready for review May 24, 2024 21:55
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

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

Nice job adding explanations for each change. I raised one comment; the rest looks good. I also see it in the docs here and here.

Doesn't this close #14420?

@DiegoAndai
Copy link
Member Author

DiegoAndai commented May 27, 2024

Doesn't this close #14420?

Not yet, because there are still some occurrences in other packages and the docs, as you pointed out. I want to handle those separately. This PR only covers Material UI.

@DiegoAndai DiegoAndai removed the on hold There is a blocker, we need to wait label May 28, 2024
@@ -10,7 +10,6 @@ import { useRtl } from '@mui/system/RtlProvider';
import { styled, createUseThemeProps } from '../zero-styled';
import useTheme from '../styles/useTheme';
import debounce from '../utils/debounce';
import { getNormalizedScrollLeft, detectScrollType } from '../utils/scrollLeft';
Copy link
Member Author

Choose a reason for hiding this comment

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

These are no longer needed as negative has been standardized on all supported browsers: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft#browser_compatibility

Tested in Chrome, Safari, Firefox, and Edge. Recording from Edge:

Screen.Recording.2024-05-28.at.16.02.54.mov

Copy link
Member

Choose a reason for hiding this comment

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

Oh wow, they did, it has never been either to build great components, fewer weird browser bugs to fix 😄.

Copy link
Member Author

Choose a reason for hiding this comment

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

This reexport was only used in Tabs, and is no longer needed.

I'll handle the utils package in a separate PR.

Copy link
Member

@ZeeshanTamboli ZeeshanTamboli May 29, 2024

Choose a reason for hiding this comment

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

If this utility was only used in Material UI Tabs, why not remove it in this PR from the mui-utils package? Also, does this complete the third task in #40958?

Copy link
Member Author

@DiegoAndai DiegoAndai May 30, 2024

Choose a reason for hiding this comment

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

I would like to handle the mui-utils in a separate PR to have smaller PRs, making it easier to revert any issues on a package-per-package basis.

There is more IE11-related code in the utils; I don't want this PR to grow larger.

@@ -13,11 +13,6 @@ export default function ServerModal() {
flexGrow: 1,
minWidth: 300,
transform: 'translateZ(0)',
// The position fixed scoping doesn't work in IE11.
Copy link
Member Author

Choose a reason for hiding this comment

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

Introduced in #17972. Rolling back to original.

Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

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

What do you think about removing this warning? We no longer want to suggest using Material UI version 4.

@DiegoAndai
Copy link
Member Author

What do you think about removing this warning? We no longer want to suggest using Material UI version 4.

@ZeeshanTamboli Good catch. I agree; we officially do not support IE, so there is no need for the warning. Implemented.

@mbrookes
Copy link
Member

mbrookes commented Jun 2, 2024

Don't forget all the uses of Array.indexOf('some string') [===|!==] -1 as a substitute for Array.filter Array.includes.

Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

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

Looks good to me! 👍

@DiegoAndai DiegoAndai merged commit c0b30d0 into mui:next Jun 3, 2024
22 checks passed
@DiegoAndai DiegoAndai deleted the ie-11-removal-round branch June 3, 2024 16:48
@DiegoAndai
Copy link
Member Author

DiegoAndai commented Jun 3, 2024

Don't forget all the uses of Array.indexOf('some string') [===|!==] -1 as a substitute for Array.filter.

@mbrookes, thanks for the callout. Do you remember an example in particular so we can create a separate issue for it?

@mbrookes
Copy link
Member

mbrookes commented Jun 3, 2024

Sorry, I meant Array.includes, which IE 11 doesn't support.

These should find the Material-UI specific ones but there are plenty more:

Components
Docs

Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

Nice, thanks for simplifying the codebase 👍

@@ -10,7 +10,6 @@ import { useRtl } from '@mui/system/RtlProvider';
import { styled, createUseThemeProps } from '../zero-styled';
import useTheme from '../styles/useTheme';
import debounce from '../utils/debounce';
import { getNormalizedScrollLeft, detectScrollType } from '../utils/scrollLeft';
Copy link
Member

Choose a reason for hiding this comment

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

Oh wow, they did, it has never been either to build great components, fewer weird browser bugs to fix 😄.

@@ -35,10 +35,6 @@ export const StyledSelectSelect = styled('select')(({ theme }) => ({
// Reset Chrome style
borderRadius: 0,
},
// Remove IE11 arrow
Copy link
Member

Choose a reason for hiding this comment

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants