From 15b29ea8f14aded413c5df191b0ed966c36b2c1c Mon Sep 17 00:00:00 2001
From: Michal Jaworski <mikejav@users.noreply.github.com>
Date: Mon, 23 Dec 2019 16:45:49 +0100
Subject: [PATCH 1/3] switch divider from block's content to border based

---
 packages/material-ui/src/Divider/Divider.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js
index ec1a38b75c5b8f..88d2716c3a2414 100644
--- a/packages/material-ui/src/Divider/Divider.js
+++ b/packages/material-ui/src/Divider/Divider.js
@@ -7,11 +7,12 @@ import { fade } from '../styles/colorManipulator';
 export const styles = (theme) => ({
   /* Styles applied to the root element. */
   root: {
-    height: 1,
     margin: 0, // Reset browser default style.
-    border: 'none',
     flexShrink: 0,
-    backgroundColor: theme.palette.divider,
+    borderWidth: 0,
+    borderStyle: 'solid',
+    borderColor: theme.palette.divider,
+    borderBottomWidth: 1,
   },
   /* Styles applied to the root element if `absolute={true}`. */
   absolute: {
@@ -26,7 +27,7 @@ export const styles = (theme) => ({
   },
   /* Styles applied to the root element if `light={true}`. */
   light: {
-    backgroundColor: fade(theme.palette.divider, 0.08),
+    borderColor: fade(theme.palette.divider, 0.08),
   },
   /* Styles applied to the root element if `variant="middle"`. */
   middle: {
@@ -36,7 +37,8 @@ export const styles = (theme) => ({
   /* Styles applied to the root element if `orientation="vertical"`. */
   vertical: {
     height: '100%',
-    width: 1,
+    borderBottomWidth: 0,
+    borderRightWidth: 1,
   },
   /* Styles applied to the root element if `flexItem={true}`. */
   flexItem: {

From a28a218e39e26fb6429c6495d7012a1b8a0885ba Mon Sep 17 00:00:00 2001
From: Michal Jaworski <mikejav@users.noreply.github.com>
Date: Thu, 26 Dec 2019 00:24:52 +0100
Subject: [PATCH 2/3] change border width - 1px to thin

---
 packages/material-ui/src/Divider/Divider.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/material-ui/src/Divider/Divider.js b/packages/material-ui/src/Divider/Divider.js
index 88d2716c3a2414..a6d9282b23307e 100644
--- a/packages/material-ui/src/Divider/Divider.js
+++ b/packages/material-ui/src/Divider/Divider.js
@@ -12,7 +12,7 @@ export const styles = (theme) => ({
     borderWidth: 0,
     borderStyle: 'solid',
     borderColor: theme.palette.divider,
-    borderBottomWidth: 1,
+    borderBottomWidth: 'thin',
   },
   /* Styles applied to the root element if `absolute={true}`. */
   absolute: {
@@ -38,7 +38,7 @@ export const styles = (theme) => ({
   vertical: {
     height: '100%',
     borderBottomWidth: 0,
-    borderRightWidth: 1,
+    borderRightWidth: 'thin',
   },
   /* Styles applied to the root element if `flexItem={true}`. */
   flexItem: {

From f86d5814ad6919eb6db3fa8f6246d1fe1e6b2c10 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 13 Jun 2020 20:30:42 +0200
Subject: [PATCH 3/3] [docs] Add breaking change in upgrade guide

---
 docs/pages/guides/migration-v4.js             | 20 +++++++
 docs/src/pages.js                             |  1 +
 .../pages/guides/migration-v4/migration-v4.md | 57 +++++++++++++++++++
 3 files changed, 78 insertions(+)
 create mode 100644 docs/pages/guides/migration-v4.js
 create mode 100644 docs/src/pages/guides/migration-v4/migration-v4.md

diff --git a/docs/pages/guides/migration-v4.js b/docs/pages/guides/migration-v4.js
new file mode 100644
index 00000000000000..8d294dbac222d9
--- /dev/null
+++ b/docs/pages/guides/migration-v4.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'guides/migration-v4';
+const requireDemo = require.context('docs/src/pages/guides/migration-v4', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/guides/migration-v4',
+  false,
+  /\.(js|md|tsx)$/,
+);
+
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};
diff --git a/docs/src/pages.js b/docs/src/pages.js
index f5e94275bf0f96..b4a6ff327704f6 100644
--- a/docs/src/pages.js
+++ b/docs/src/pages.js
@@ -186,6 +186,7 @@ const pages = [
       { pathname: '/guides/composition' },
       { pathname: '/guides/server-rendering' },
       { pathname: '/guides/responsive-ui', title: 'Responsive UI' },
+      { pathname: '/guides/migration-v4', title: 'Migration From v4' },
       { pathname: '/guides/migration-v3', title: 'Migration From v3' },
       { pathname: '/guides/migration-v0x', title: 'Migration From v0.x' },
       { pathname: '/guides/testing' },
diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
new file mode 100644
index 00000000000000..56627b7f3c2d85
--- /dev/null
+++ b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -0,0 +1,57 @@
+# Migration from v3 to v4
+
+<p class="description">Yeah, v4 has been released!</p>
+
+Looking for the v4 docs? [Find them here](https://material-ui.com/versions/).
+
+> This document is a work in progress.
+Have you upgraded your site and run into something that's not covered here?
+[Add your changes on GitHub](https://github.com/mui-org/material-ui/blob/master/docs/src/pages/guides/migration-v3/migration-v3.md).
+
+## Introduction
+
+This is a reference for upgrading your site from Material-UI v4 to v5.
+While there's a lot covered here, you probably won't need to do everything for your site.
+We'll do our best to keep things easy to follow, and as sequential as possible so you can quickly get rocking on v5!
+
+## Why you should migrate
+
+This documentation page covers the *how* of migrating from v4 to v5.
+The *why* is covered in the [release blog post on Medium](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701).
+
+## Updating your dependencies
+
+The very first thing you will need to do is to update your dependencies.
+
+### Update Material-UI version
+
+You need to update your `package.json` to use the latest version of Material-UI.
+
+```json
+"dependencies": {
+  "@material-ui/core": "^5.0.0"
+}
+```
+
+Or run
+
+```sh
+npm install @material-ui/core
+
+or
+
+yarn add @material-ui/core
+```
+
+## Handling breaking changes
+
+### Divider
+
+- [Divider] Use border instead of background color. It prevents inconsistent height on scaled screens. For people customizing the color of the border, the change requires changing the override CSS property:
+
+  ```diff
+  .MuiDivider-root {
+  - background-color: #f00;
+  + border-color: #f00;
+  }
+  ```
\ No newline at end of file