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