[Divider] Use border instead of background color (#18965)

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 };
+};

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' },

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;
+  }
+  ```

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: 'thin',
   },
   /* 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: 'thin',
   },
   /* Styles applied to the root element if `flexItem={true}`. */
   flexItem: {