From b86f14a526b92839383cfe843f42111bcccbb97c Mon Sep 17 00:00:00 2001 From: Minjee Son <104430030+iammminzzy@users.noreply.github.com> Date: Sat, 30 Mar 2024 00:06:13 +0000 Subject: [PATCH] [docs] Stop mentioning IE 11 --- .../material/components/app-bar/app-bar.md | 2 +- docs/data/material/components/cards/cards.md | 4 ---- docs/data/material/components/lists/lists.md | 1 - .../material/components/progress/progress.md | 23 ------------------- .../data/material/components/slider/slider.md | 14 ----------- docs/data/material/components/table/table.md | 1 - .../supported-platforms.md | 20 +++------------- .../minimizing-bundle-size.md | 11 +-------- .../migration/migration-v4/migration-v4.md | 2 +- 9 files changed, 6 insertions(+), 72 deletions(-) diff --git a/docs/data/material/components/app-bar/app-bar.md b/docs/data/material/components/app-bar/app-bar.md index cadf49e610d6ea..10ea9272ec4390 100644 --- a/docs/data/material/components/app-bar/app-bar.md +++ b/docs/data/material/components/app-bar/app-bar.md @@ -62,7 +62,7 @@ A prominent app bar. When you render the app bar position fixed, the dimension of the element doesn't impact the rest of the page. This can cause some part of your content to be invisible, behind the app bar. Here are 3 possible solutions: -1. You can use `position="sticky"` instead of fixed. ⚠️ sticky is not supported by IE 11. +1. You can use `position="sticky"` instead of fixed. 2. You can render a second `` component: ```jsx diff --git a/docs/data/material/components/cards/cards.md b/docs/data/material/components/cards/cards.md index 764ce8c558cb8f..fa18974f8bd743 100644 --- a/docs/data/material/components/cards/cards.md +++ b/docs/data/material/components/cards/cards.md @@ -59,10 +59,6 @@ By default, we use the combination of a `
` element and a _background image_ {{"demo": "ImgMediaCard.js", "bg": true}} -:::warning -When `component="img"`, CardMedia relies on `object-fit` for centering the image. It's not supported by IE 11. -::: - ## Primary action Often a card allow users to interact with the entirety of its surface to trigger its main action, be it an expansion, a link to another screen or some other behavior. The action area of the card can be specified by wrapping its contents in a `CardActionArea` component. diff --git a/docs/data/material/components/lists/lists.md b/docs/data/material/components/lists/lists.md index 9a9e213a003db5..0f9fd925005ecb 100644 --- a/docs/data/material/components/lists/lists.md +++ b/docs/data/material/components/lists/lists.md @@ -97,7 +97,6 @@ The switch is the secondary action and a separate target. Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader. This feature relies on CSS sticky positioning. -(⚠️ no IE 11 support) {{"demo": "PinnedSubheaderList.js", "bg": true}} diff --git a/docs/data/material/components/progress/progress.md b/docs/data/material/components/progress/progress.md index a21cf09fa9e0ce..74893d02d8496a 100644 --- a/docs/data/material/components/progress/progress.md +++ b/docs/data/material/components/progress/progress.md @@ -127,26 +127,3 @@ If you need to perform 30 re-renders per second or more, we recommend disabling transition: none; } ``` - -### IE 11 - -The circular progress component animation on IE 11 is degraded. -The stroke dash animation is not working (equivalent to `disableShrink`) and the circular animation wobbles. -You can solve the latter with: - -```css -.MuiCircularProgress-indeterminate { - animation: circular-rotate 1.4s linear infinite; -} - -@keyframes circular-rotate { - 0% { - transform: rotate(0deg); - /* Fix IE 11 wobbly */ - transform-origin: 50% 50%; - } - 100% { - transform: rotate(360deg); - } -} -``` diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md index 2420303b5989cb..3c902577906cd6 100644 --- a/docs/data/material/components/slider/slider.md +++ b/docs/data/material/components/slider/slider.md @@ -151,17 +151,3 @@ However, you need to make sure that: - Each thumb has a user-friendly text for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop. - -## Limitations - -### IE 11 - -The slider's value label is not centered in IE 11. -The alignment is not handled to make customizations easier with the latest browsers. -You can solve the issue with: - -```css -.MuiSlider-valueLabel { - left: calc(-50% - 4px); -} -``` diff --git a/docs/data/material/components/table/table.md b/docs/data/material/components/table/table.md index 51a333e5c0d763..948ff6a25f8dda 100644 --- a/docs/data/material/components/table/table.md +++ b/docs/data/material/components/table/table.md @@ -88,7 +88,6 @@ The `ActionsComponent` prop of the `TablePagination` component allows the implem Here is an example of a table with scrollable rows and fixed column headers. It leverages the `stickyHeader` prop. -(⚠️ no IE 11 support) {{"demo": "StickyHeadTable.js", "bg": true}} diff --git a/docs/data/material/getting-started/supported-platforms/supported-platforms.md b/docs/data/material/getting-started/supported-platforms/supported-platforms.md index 51b971f5c4e50e..c490ec2d5b4e8d 100644 --- a/docs/data/material/getting-started/supported-platforms/supported-platforms.md +++ b/docs/data/material/getting-started/supported-platforms/supported-platforms.md @@ -9,9 +9,9 @@ You don't need to provide any JavaScript polyfill as it manages unsupported brow -| Edge | Firefox | Chrome | Safari (macOS) | Safari (iOS) | IE | -| :----- | :------ | :----- | :------------- | :----------- | :------------------- | -| >= 121 | >= 115 | >= 109 | >= 15.4 | >= 15.4 | 11 (partial support) | +| Edge | Firefox | Chrome | Safari (macOS) | Safari (iOS) | +| :----- | :------ | :----- | :------------- | :----------- | +| >= 121 | >= 115 | >= 109 | >= 15.4 | >= 15.4 | @@ -21,20 +21,6 @@ Because Googlebot uses a web rendering service (WRS) to index the page content, [WRS regularly updates the rendering engine it uses](https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html). You can expect Material UI's components to render without major issues. -### IE 11 - -Material UI provides **partial** supports for IE 11. Be aware of the following: - -- Some of the components have no support. For instance, the new components, the data grid, the date picker. -- Some of the components have degraded support. For instance, the outlined input border radius is missing, the combobox doesn't remove diacritics, the circular progress animation is wobbling. -- The documentation itself might crash. -- You need to install the [legacy bundle](/material-ui/guides/minimizing-bundle-size/#legacy-bundle). -- You might need to install polyfills. For instance for the [popper.js transitive dependency](https://popper.js.org/docs/v2/browser-support/#ie11). - -Overall, the library doesn't prioritize the support of IE 11 if it harms the most common use cases. For instance, we will close new issues opened about IE 11 and might not merge pull requests that improve IE 11 support. - -v6 will completely remove the support of IE 11. - ## Server diff --git a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md index cb2301cd5b3387..c38c47545c3c00 100644 --- a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md +++ b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md @@ -214,10 +214,7 @@ It will perform the following diffs: The packages published on npm are **transpiled** with [Babel](https://github.com/babel/babel), optimized for performance with the [supported platforms](/material-ui/getting-started/supported-platforms/). -Custom bundles are also available: - -- [Modern bundle](#modern-bundle) -- [Legacy bundle](#legacy-bundle) +A [modern bundle](#modern-bundle) is also available. ### How to use custom bundles? @@ -264,9 +261,3 @@ A great way to use these bundles is to configure bundler aliases, for example wi The modern bundle can be found under the [`/modern` folder](https://unpkg.com/@mui/material/modern/). It targets the latest released versions of evergreen browsers (Chrome, Firefox, Safari, Edge). This can be used to make separate bundles targeting different browsers. - -### Legacy bundle - -If you need to support IE 11 you cannot use the default or modern bundle without transpilation. -However, you can use the legacy bundle found under the [`/legacy` folder](https://unpkg.com/@mui/material/legacy/). -You don't need any additional polyfills. diff --git a/docs/data/material/migration/migration-v4/migration-v4.md b/docs/data/material/migration/migration-v4/migration-v4.md index 6feaca110bff0c..9f3ae3bd35d719 100644 --- a/docs/data/material/migration/migration-v4/migration-v4.md +++ b/docs/data/material/migration/migration-v4/migration-v4.md @@ -67,7 +67,7 @@ The default bundle supports the following minimum versions: - and more (see [.browserslistrc (`stable` entry)](https://github.com/mui/material-ui/blob/v5.0.0/.browserslistrc#L11)) Material UI no longer supports IE 11. -If you need to support IE 11, check out our [legacy bundle](/material-ui/guides/minimizing-bundle-size/#legacy-bundle). +If you need to support IE 11, check out our [legacy bundle](https://v5.mui.com/material-ui/guides/minimizing-bundle-size/#legacy-bundle). ## Update React & TypeScript version