From 89876936d8965da4b251a2b5e84e5fee0b15f990 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 30 Dec 2019 11:29:41 +0100 Subject: [PATCH 01/15] [TableSortLabel] Sort asc by default (#19013) --- docs/pages/api/table-sort-label.md | 2 +- .../pages/components/tables/EnhancedTable.js | 6 ++--- .../pages/components/tables/EnhancedTable.tsx | 6 ++--- .../src/TableSortLabel/TableSortLabel.js | 5 ++-- .../src/TableSortLabel/TableSortLabel.test.js | 7 ----- tslint.json | 26 +++++++++---------- 6 files changed, 23 insertions(+), 29 deletions(-) diff --git a/docs/pages/api/table-sort-label.md b/docs/pages/api/table-sort-label.md index fcd273d9185150..ce80868cb3a170 100644 --- a/docs/pages/api/table-sort-label.md +++ b/docs/pages/api/table-sort-label.md @@ -27,7 +27,7 @@ A button based label for placing inside `TableCell` for column sorting. | active | bool | false | If `true`, the label will have the active styling (should be true for the sorted column). | | children | node | | Label contents, the arrow will be appended automatically. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | -| direction | 'asc'
| 'desc' | 'desc' | The current sort direction. | +| direction | 'asc'
| 'desc' | 'asc' | The current sort direction. | | hideSortIcon | bool | false | Hide sort icon when active is false. | | IconComponent | elementType | ArrowDownwardIcon | Sort icon to use. | diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js index 5edb0b1ee43bf0..d59aa3f73a9f55 100644 --- a/docs/src/pages/components/tables/EnhancedTable.js +++ b/docs/src/pages/components/tables/EnhancedTable.js @@ -99,7 +99,7 @@ function EnhancedTableHead(props) { > {headCell.label} @@ -221,8 +221,8 @@ export default function EnhancedTable() { const [rowsPerPage, setRowsPerPage] = React.useState(5); const handleRequestSort = (event, property) => { - const isDesc = orderBy === property && order === 'desc'; - setOrder(isDesc ? 'asc' : 'desc'); + const isAsc = orderBy === property && order === 'asc'; + setOrder(isAsc ? 'desc' : 'asc'); setOrderBy(property); }; diff --git a/docs/src/pages/components/tables/EnhancedTable.tsx b/docs/src/pages/components/tables/EnhancedTable.tsx index 45ed8603c69f1d..54645d21c50740 100644 --- a/docs/src/pages/components/tables/EnhancedTable.tsx +++ b/docs/src/pages/components/tables/EnhancedTable.tsx @@ -134,7 +134,7 @@ function EnhancedTableHead(props: EnhancedTableProps) { > {headCell.label} @@ -249,8 +249,8 @@ export default function EnhancedTable() { const [rowsPerPage, setRowsPerPage] = React.useState(5); const handleRequestSort = (event: React.MouseEvent, property: keyof Data) => { - const isDesc = orderBy === property && order === 'desc'; - setOrder(isDesc ? 'asc' : 'desc'); + const isAsc = orderBy === property && order === 'asc'; + setOrder(isAsc ? 'desc' : 'asc'); setOrderBy(property); }; diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.js index fe160a6207d747..c3845ebce2cb9d 100644 --- a/packages/material-ui/src/TableSortLabel/TableSortLabel.js +++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.js @@ -20,7 +20,7 @@ export const styles = theme => ({ '&:hover': { color: theme.palette.text.secondary, '& $icon': { - opacity: 1, + opacity: 0.5, }, }, '&$active': { @@ -36,6 +36,7 @@ export const styles = theme => ({ active: {}, /* Styles applied to the icon component. */ icon: { + fontSize: 18, marginRight: 4, marginLeft: 4, opacity: 0, @@ -63,7 +64,7 @@ const TableSortLabel = React.forwardRef(function TableSortLabel(props, ref) { children, classes, className, - direction = 'desc', + direction = 'asc', hideSortIcon = false, IconComponent = ArrowDownwardIcon, ...other diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js index 6dc81a39f6bc75..e741d93997a4ff 100644 --- a/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js +++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js @@ -48,13 +48,6 @@ describe('', () => { assert.strictEqual(iconChildren.length, 1); }); - it('by default should have desc direction class', () => { - const wrapper = shallow(); - const icon = wrapper.find(`.${classes.icon}`).first(); - assert.strictEqual(icon.hasClass(classes.iconDirectionAsc), false); - assert.strictEqual(icon.hasClass(classes.iconDirectionDesc), true); - }); - it('when given direction desc should have desc direction class', () => { const wrapper = shallow(); const icon = wrapper.find(`.${classes.icon}`).first(); diff --git a/tslint.json b/tslint.json index b52e1378e01e9c..d3f9df017d02c4 100644 --- a/tslint.json +++ b/tslint.json @@ -1,15 +1,15 @@ { - "defaultSeverity": "error", - "extends": ["dtslint/dtslint.json"], - "jsRules": {}, - "rules": { - "deprecation": true, - "file-name-casing": false, - "no-boolean-literal-compare": false, - "no-empty-interface": false, - "no-unnecessary-callback-wrapper": false, - "no-unnecessary-generics": false, - "no-redundant-jsdoc": false, - "semicolon": [true, "always", "ignore-bound-class-methods"] - } + "defaultSeverity": "error", + "extends": ["dtslint/dtslint.json"], + "jsRules": {}, + "rules": { + "deprecation": true, + "file-name-casing": false, + "no-boolean-literal-compare": false, + "no-empty-interface": false, + "no-unnecessary-callback-wrapper": false, + "no-unnecessary-generics": false, + "no-redundant-jsdoc": false, + "semicolon": [true, "always", "ignore-bound-class-methods"] + } } From c76876cf09ce258f4adc6ed361496159207e76db Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 30 Dec 2019 11:42:39 +0100 Subject: [PATCH 02/15] [core] Batch small changes (#19016) --- docs/pages/api/autocomplete.md | 4 +-- docs/src/modules/components/Ad.js | 36 ++++++++++++------- .../modules/components/AppTableOfContents.js | 2 +- docs/src/modules/components/MarkdownDocs.js | 13 ++++++- .../src/modules/components/MarkdownElement.js | 2 +- docs/src/modules/components/bootstrap.js | 4 --- docs/src/pages/components/app-bar/app-bar.md | 8 ++--- .../src/Autocomplete/Autocomplete.js | 4 +-- .../src/useAutocomplete/useAutocomplete.d.ts | 4 +-- .../src/useAutocomplete/useAutocomplete.js | 19 ++++++---- .../src/elementAcceptingRef.test.js | 2 +- .../src/elementTypeAcceptingRef.test.js | 2 +- packages/material-ui/src/SvgIcon/SvgIcon.js | 2 +- .../material-ui/src/SvgIcon/SvgIcon.test.js | 2 +- 14 files changed, 63 insertions(+), 41 deletions(-) diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index a5e80992a6812a..d244b1094203d4 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -59,9 +59,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | loadingText | node | 'Loading…' | Text to display when in a loading state.
For localization purposes, you can use the provided [translations](/guides/localization/). | | multiple | bool | false | If `true`, `value` must be an array and the menu will support multiple selections. | | noOptionsText | node | 'No options' | Text to display when there are no options.
For localization purposes, you can use the provided [translations](/guides/localization/). | -| onChange | func | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: any) => void`
*event:* The event source of the callback
*value:* null | +| onChange | func | | Callback fired when the value changes.

**Signature:**
`function(event: object, value: any) => void`
*event:* The event source of the callback.
*value:* null | | onClose | func | | Callback fired when the popup requests to be closed. Use in controlled mode (see open).

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | -| onInputChange | func | | Callback fired when the input value changes.

**Signature:**
`function(event: object, value: string, reason: string) => void`
*event:* The event source of the callback.
*value:* The new value of the text input
*reason:* Can be: "input" (user input), "reset" (programmatic change), `"clear"`. | +| onInputChange | func | | Callback fired when the input value changes.

**Signature:**
`function(event: object, value: string, reason: string) => void`
*event:* The event source of the callback.
*value:* The new value of the text input.
*reason:* Can be: "input" (user input), "reset" (programmatic change), `"clear"`. | | onOpen | func | | Callback fired when the popup requests to be opened. Use in controlled mode (see open).

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | | open | bool | | Control the popup` open state. | | openText | string | 'Open' | Override the default text for the *open popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js index 1ae7a9d1237403..35ff6f637d4be2 100644 --- a/docs/src/modules/components/Ad.js +++ b/docs/src/modules/components/Ad.js @@ -25,9 +25,11 @@ const styles = theme => ({ }, }); -function getAdblock(classes, t) { +function Adblock(props) { + const t = useSelector(state => state.options.t); + return ( - + {t('likeMui')} @@ -86,9 +88,9 @@ const inHouseAds = [ function Ad(props) { const { classes } = props; - const t = useSelector(state => state.options.t); const timerAdblock = React.useRef(); + const { current: randomSplit } = React.useRef(Math.random()); const [adblock, setAdblock] = React.useState(null); const [carbonOut, setCarbonOut] = React.useState(null); const [codeFundOut, setCodeFundOut] = React.useState(null); @@ -157,11 +159,11 @@ function Ad(props) { children = ; } - if (adblock) { + if (!children && adblock) { minHeight = 'auto'; if (Math.random() < 0.2) { - children = getAdblock(classes, t); + children = ; } else { children = ; } @@ -171,7 +173,7 @@ function Ad(props) { if (carbonOut || codeFundOut) { children = ; minHeight = 'auto'; - } else if (Math.random() < 0.35) { + } else if (randomSplit < 0.35) { children = ; } else { children = ; @@ -180,8 +182,8 @@ function Ad(props) { React.useEffect(() => { // Avoid a flood of events. - if (Math.random < 0.1) { - return null; + if (Math.random() < 0.9) { + return undefined; } const delay = setTimeout(() => { @@ -192,9 +194,17 @@ function Ad(props) { } else if (children.type === AdCarbon) { type = 'carbon'; } else if (children.type === AdInHouse) { - type = 'in-house'; + if (!adblock && codeFundOut) { + type = 'in-house-codefund'; + } else if (!adblock && carbonOut) { + type = 'in-house-carbon'; + } else { + type = 'in-house'; + } + } else if (children.type === Adblock) { + type = 'in-house-adblock'; } else { - type = 'disable-adblock'; + return; } window.ga('send', { @@ -212,12 +222,12 @@ function Ad(props) { eventLabel: children.props.ad.name, }); } - }, 2000); + }, 2500); return () => { clearTimeout(delay); }; - }, [children.type, children.props.ad]); + }, [children.type, children.props.ad, codeFundOut, carbonOut, adblock]); return ( @@ -230,4 +240,4 @@ Ad.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styles)(Ad); +export default React.memo(withStyles(styles)(Ad)); diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js index dcdb4affcef377..fe2b1b88142cf7 100644 --- a/docs/src/modules/components/AppTableOfContents.js +++ b/docs/src/modules/components/AppTableOfContents.js @@ -1,7 +1,7 @@ /* eslint-disable react/no-danger */ import React from 'react'; import PropTypes from 'prop-types'; -import marked from 'marked'; +import marked from 'marked/lib/marked'; import throttle from 'lodash/throttle'; import clsx from 'clsx'; import Box from '@material-ui/core/Box'; diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index e9bfe485480100..128135f6794032 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -90,6 +90,17 @@ function flattenPages(pages, current = []) { }, current); } +// To replace with .findIndex() once we stop IE 11 support. +function findIndex(array, comp) { + for (let i = 0; i < array.length; i += 1) { + if (comp(array[i])) { + return i; + } + } + + return -1; +} + function MarkdownDocs(props) { const { blog, @@ -145,7 +156,7 @@ function MarkdownDocs(props) { const { activePage, pages } = React.useContext(PageContext); const pageList = flattenPages(pages); - const currentPageNum = pageList.findIndex(page => page.pathname === activePage.pathname); + const currentPageNum = findIndex(pageList, page => page.pathname === activePage.pathname); const currentPage = pageList[currentPageNum]; const prevPage = pageList[currentPageNum - 1]; const nextPage = pageList[currentPageNum + 1]; diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 1060b55a3a914b..91a4a90983c91f 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { useSelector } from 'react-redux'; -import marked from 'marked'; +import marked from 'marked/lib/marked'; import { withStyles } from '@material-ui/core/styles'; import textToHash from 'docs/src/modules/utils/textToHash'; import prism from 'docs/src/modules/components/prism'; diff --git a/docs/src/modules/components/bootstrap.js b/docs/src/modules/components/bootstrap.js index 388d2055e07a45..c38ff34eba52e2 100644 --- a/docs/src/modules/components/bootstrap.js +++ b/docs/src/modules/components/bootstrap.js @@ -1,7 +1,3 @@ -// Use the same helper as Babel to avoid bundle bloat. -import 'core-js/modules/es6.array.find-index'; -import 'core-js/modules/es6.set'; - // Disable auto highlighting // https://github.com/PrismJS/prism/issues/765 if (process.browser) { diff --git a/docs/src/pages/components/app-bar/app-bar.md b/docs/src/pages/components/app-bar/app-bar.md index f1974133828bb7..048f6b9221e339 100644 --- a/docs/src/pages/components/app-bar/app-bar.md +++ b/docs/src/pages/components/app-bar/app-bar.md @@ -43,7 +43,7 @@ A prominent app bar. ## Bottom App Bar -{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} ## Fixed placement @@ -93,19 +93,19 @@ You can use the `useScrollTrigger()` hook to respond to user scroll actions. The app bar hides on scroll down to leave more space for reading. -{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} ### Elevate App Bar The app bar elevates on scroll to communicate that the user is not at the top of the page. -{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} ### Back to top A floating action buttons appears on scroll to make it easy to get back to the top of the page. -{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true, "maxWidth": 500}} +{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} ### `useScrollTrigger([options]) => trigger` diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 791ac759c9e54b..0e8021b84ad31b 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -636,7 +636,7 @@ Autocomplete.propTypes = { /** * Callback fired when the value changes. * - * @param {object} event The event source of the callback + * @param {object} event The event source of the callback. * @param {any} value */ onChange: PropTypes.func, @@ -651,7 +651,7 @@ Autocomplete.propTypes = { * Callback fired when the input value changes. * * @param {object} event The event source of the callback. - * @param {string} value The new value of the text input + * @param {string} value The new value of the text input. * @param {string} reason Can be: "input" (user input), "reset" (programmatic change), `"clear"`. */ onInputChange: PropTypes.func, diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts index 4d0e062c9011b0..1a706f55746125 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts @@ -132,7 +132,7 @@ export interface UseAutocompleteProps { /** * Callback fired when the value changes. * - * @param {object} event The event source of the callback + * @param {object} event The event source of the callback. * @param {any} value */ onChange?: (event: React.ChangeEvent<{}>, value: any) => void; @@ -147,7 +147,7 @@ export interface UseAutocompleteProps { * Callback fired when the input value changes. * * @param {object} event The event source of the callback. - * @param {string} value The new value of the text input + * @param {string} value The new value of the text input. * @param {string} reason Can be: "input" (user input), "reset" (programmatic change), `"clear"`. */ onInputChange?: (event: React.ChangeEvent<{}>, value: any, reason: 'input' | 'reset') => void; diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index 1b0cd74fc523c9..e17e10b8a95426 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -61,6 +61,17 @@ export function createFilterOptions(config = {}) { }; } +// To replace with .findIndex() once we stop IE 11 support. +function findIndex(array, comp) { + for (let i = 0; i < array.length; i += 1) { + if (comp(array[i])) { + return i; + } + } + + return -1; +} + const defaultFilterOptions = createFilterOptions(); // Number of options to jump in list box when pageup and pagedown keys are used. @@ -424,13 +435,7 @@ export default function useAutocomplete(props) { const item = newValue; newValue = Array.isArray(value) ? [...value] : []; - let itemIndex = -1; - // To replace with .findIndex() once we stop IE 11 support. - for (let i = 0; i < newValue.length; i += 1) { - if (getOptionSelected(item, newValue[i])) { - itemIndex = i; - } - } + const itemIndex = findIndex(newValue, valueItem => getOptionSelected(item, valueItem)); if (itemIndex === -1) { newValue.push(item); diff --git a/packages/material-ui-utils/src/elementAcceptingRef.test.js b/packages/material-ui-utils/src/elementAcceptingRef.test.js index 2fb4053c2016af..d0994ce2f18429 100644 --- a/packages/material-ui-utils/src/elementAcceptingRef.test.js +++ b/packages/material-ui-utils/src/elementAcceptingRef.test.js @@ -20,7 +20,7 @@ describe('elementAcceptingRef', () => { } before(() => { - mount = createMount(); + mount = createMount({ strict: true }); }); after(() => { diff --git a/packages/material-ui-utils/src/elementTypeAcceptingRef.test.js b/packages/material-ui-utils/src/elementTypeAcceptingRef.test.js index 0b6a7039c40111..da8f7c8328dac6 100644 --- a/packages/material-ui-utils/src/elementTypeAcceptingRef.test.js +++ b/packages/material-ui-utils/src/elementTypeAcceptingRef.test.js @@ -20,7 +20,7 @@ describe('elementTypeAcceptingRef', () => { } before(() => { - mount = createMount(); + mount = createMount({ strict: true }); }); after(() => { diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.js b/packages/material-ui/src/SvgIcon/SvgIcon.js index 93be6ce5923d46..c4a31a818b57d3 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.js @@ -79,7 +79,7 @@ const SvgIcon = React.forwardRef(function SvgIcon(props, ref) { focusable="false" viewBox={viewBox} color={htmlColor} - aria-hidden={titleAccess ? 'false' : 'true'} + aria-hidden={titleAccess ? null : 'true'} role={titleAccess ? 'img' : 'presentation'} ref={ref} {...other} diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.test.js b/packages/material-ui/src/SvgIcon/SvgIcon.test.js index 405fa419c56993..9a73a5072ec684 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.test.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.test.js @@ -59,7 +59,7 @@ describe('', () => { , ); assert.strictEqual(wrapper.find('title').text(), 'Network'); - assert.strictEqual(wrapper.props()['aria-hidden'], 'false'); + assert.strictEqual(wrapper.props()['aria-hidden'], null); }); }); From dcaf13f116743b643a1649f0522fed0a59cf93f2 Mon Sep 17 00:00:00 2001 From: mceIdo <58237675+mceIdo@users.noreply.github.com> Date: Mon, 30 Dec 2019 12:46:22 +0200 Subject: [PATCH 03/15] [styles] Fix jss StyleSheet attach() call (#19042) --- packages/material-ui-benchmark/src/styles.js | 3 ++- packages/material-ui-styles/src/makeStyles/makeStyles.js | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-benchmark/src/styles.js b/packages/material-ui-benchmark/src/styles.js index d61a0d9d7e88b6..07875c14ebd77e 100644 --- a/packages/material-ui-benchmark/src/styles.js +++ b/packages/material-ui-benchmark/src/styles.js @@ -128,7 +128,8 @@ suite const dynamicSheet = jss.createStyleSheet(dynamicStyles, { link: true, }); - dynamicSheet.update({}).attach(); + dynamicSheet.update({}); + dynamicSheet.attach(); sheetsRegistry.add(dynamicSheet); } diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.js b/packages/material-ui-styles/src/makeStyles/makeStyles.js index 7ea4c57894fdf0..2ed424f5c5938e 100644 --- a/packages/material-ui-styles/src/makeStyles/makeStyles.js +++ b/packages/material-ui-styles/src/makeStyles/makeStyles.js @@ -109,7 +109,8 @@ function attach({ state, theme, stylesOptions, stylesCreator, name }, props) { ...options, }); - dynamicSheet.update(props).attach(); + dynamicSheet.update(props); + dynamicSheet.attach(); state.dynamicSheet = dynamicSheet; state.classes = mergeClasses({ From 0c7ca746674cfb47a46cad8ebea21155702fd38c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 30 Dec 2019 11:59:08 +0100 Subject: [PATCH 04/15] v4.8.2 --- CHANGELOG.md | 46 ++++++++++++++++++++++++ package.json | 2 +- packages/material-ui-lab/package.json | 2 +- packages/material-ui-styles/package.json | 2 +- packages/material-ui/package.json | 4 +-- 5 files changed, 51 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0a4e3c6b11a6c7..d6228b31aba3d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,51 @@ ### [Versions](https://material-ui.com/versions/) +## 4.8.2 +###### *Dec 30, 2019* + +Big thanks to the 22 contributors who made this release possible. + +### `@material-ui/core@v4.8.2` + +- [Badge] Fix doc about anchorOrigin (#18982) @ypresto +- [DialogContent] Add missing `dividers` class types (#18984) @NickCis +- [RadioGroup] Add useRadioGroup Hook (#18920) @NMinhNguyen +- [Slider] Fix discrete mark highlighting (#18993) @ulises-lara +- [Slider] Improve the pointer event logic (#19010) @oliviertassinari +- [TablePagination] Fix duplicate key error (#18988) @afzalsayed96 +- [TableSortLabel] Relax IconComponent prop requirements in TypeScript (#18936) @Igorbek +- [TableSortLabel] Sort asc by default (#19013) @oliviertassinari +- [l10n] Add Portuguese (pt-PT) locale (#18987) @hrafaelveloso + +### `@material-ui/lab@v4.8.2` + +- [styles] Fix jss StyleSheet attach() call (#19042) @mceIdo + +### `@material-ui/lab@v4.0.0-alpha.38` + +- [Skeleton] Add wave animation support (#19014) @oliviertassinari +- [Autocomplete] Fix option height border-box (#19000) @MariyaVdovenko +- [Autocomplete] Zero (0) integer key display throws (#18994) @hoop71 +- [Rating] Clear value if selected value is clicked (#18999) @ivowork +- [Rating] Add a demo with different icons (#19004) @hoop71 + +### Docs + +- [docs] Add TS demo for MenuPopupState (#18998) @eps1lon +- [docs] Add yarn install instructions in CONTRIBUTING.md (#18970) @hiteshkundal +- [docs] Clarify not all components have 'component' prop (#19015) @JamieS1211 +- [docs] Fix syntax error in palette customization example (#19008) @mumairofficial +- [docs] Fix typo in toggle-button.md (#19002) @noahbenham +- [docs] Update showcase lists (#19039) @typekev +- [docs] Fix url address in modules/watrerfall/Batcher.js (#18997) @hiteshkundal + +### Core + +- [core] Don't force a remote when listing prettier changes (#18794) @Janpot +- [core] Bump handlebars from 4.1.2 to 4.5.3 (#18989) @dependabot-preview +- [core] Batch small changes (#19016) @oliviertassinari +- [core] Batch small changes (#19012) @mbrookes + ## 4.8.1 ###### *Dec 24, 2019* diff --git a/package.json b/package.json index 472287ecfded1e..e3500251f0d832 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "4.8.1", + "version": "4.8.2", "private": true, "scripts": { "proptypes": "ts-node --skip-project ./scripts/generateProptypes.ts", diff --git a/packages/material-ui-lab/package.json b/packages/material-ui-lab/package.json index f8e347b76b4f49..0f953939cc3427 100644 --- a/packages/material-ui-lab/package.json +++ b/packages/material-ui-lab/package.json @@ -1,6 +1,6 @@ { "name": "@material-ui/lab", - "version": "4.0.0-alpha.37", + "version": "4.0.0-alpha.38", "private": false, "author": "Material-UI Team", "description": "Material-UI Lab - Incubator for Material-UI React components.", diff --git a/packages/material-ui-styles/package.json b/packages/material-ui-styles/package.json index cdf0f96d85d322..c78c1f1385d106 100644 --- a/packages/material-ui-styles/package.json +++ b/packages/material-ui-styles/package.json @@ -1,6 +1,6 @@ { "name": "@material-ui/styles", - "version": "4.7.1", + "version": "4.8.2", "private": false, "author": "Material-UI Team", "description": "Material-UI Styles - The styling solution of Material-UI.", diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json index 24b368d5bdcf10..87e3f3dc9204bc 100644 --- a/packages/material-ui/package.json +++ b/packages/material-ui/package.json @@ -1,6 +1,6 @@ { "name": "@material-ui/core", - "version": "4.8.1", + "version": "4.8.2", "private": false, "author": "Material-UI Team", "description": "React components that implement Google's Material Design.", @@ -42,7 +42,7 @@ }, "dependencies": { "@babel/runtime": "^7.4.4", - "@material-ui/styles": "^4.7.1", + "@material-ui/styles": "^4.8.2", "@material-ui/system": "^4.7.1", "@material-ui/types": "^4.1.1", "@material-ui/utils": "^4.7.1", From fb0ab9d667a911459a47a66e64d2e27ec7185bc3 Mon Sep 17 00:00:00 2001 From: Paul Date: Mon, 30 Dec 2019 14:38:04 +0100 Subject: [PATCH 05/15] [Collapse] Add `hidden` class key to Collapse typings (#19044) --- packages/material-ui/src/Collapse/Collapse.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Collapse/Collapse.d.ts b/packages/material-ui/src/Collapse/Collapse.d.ts index cedab407a13ce6..19f6be1e45f17a 100644 --- a/packages/material-ui/src/Collapse/Collapse.d.ts +++ b/packages/material-ui/src/Collapse/Collapse.d.ts @@ -11,7 +11,7 @@ export interface CollapseProps extends StandardProps; From 5533914d1cf6ef43c00ff99347c6bc561ac63977 Mon Sep 17 00:00:00 2001 From: Rikpat <33869814+Rikpat@users.noreply.github.com> Date: Tue, 31 Dec 2019 10:46:59 +0100 Subject: [PATCH 06/15] [Grid] Update TypeScript classes definitions (#19050) --- packages/material-ui/src/Grid/Grid.d.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/material-ui/src/Grid/Grid.d.ts b/packages/material-ui/src/Grid/Grid.d.ts index d0047cff80a0b6..c71e7afefc1c1b 100644 --- a/packages/material-ui/src/Grid/Grid.d.ts +++ b/packages/material-ui/src/Grid/Grid.d.ts @@ -32,6 +32,7 @@ export type GridClassKey = | 'root' | 'container' | 'item' + | 'zeroMinWidth' | 'direction-xs-column' | 'direction-xs-column-reverse' | 'direction-xs-row-reverse' @@ -50,6 +51,7 @@ export type GridClassKey = | 'justify-xs-flex-end' | 'justify-xs-space-between' | 'justify-xs-space-around' + | 'justify-xs-space-evenly' | 'spacing-xs-1' | 'spacing-xs-2' | 'spacing-xs-3' From d3323396f88731548778047625bb0d16f6c3f7a9 Mon Sep 17 00:00:00 2001 From: Ulises Lara Date: Tue, 31 Dec 2019 04:03:05 -0600 Subject: [PATCH 07/15] [theme] Support breakpoints.between(a, b) with number (#19003) --- .../pages/customization/breakpoints/breakpoints.md | 4 ++-- .../material-ui/src/styles/createBreakpoints.js | 13 +++++++++---- .../src/styles/createBreakpoints.test.js | 9 ++++++++- 3 files changed, 19 insertions(+), 7 deletions(-) diff --git a/docs/src/pages/customization/breakpoints/breakpoints.md b/docs/src/pages/customization/breakpoints/breakpoints.md index 4397b96cc896a1..8f8c9072a7795f 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints.md +++ b/docs/src/pages/customization/breakpoints/breakpoints.md @@ -171,8 +171,8 @@ const styles = theme => ({ #### Arguments -1. `start` (*String*): A breakpoint key (`xs`, `sm`, etc.). -2. `end` (*String*): A breakpoint key (`xs`, `sm`, etc.). +1. `start` (*String*): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels. +2. `end` (*String*): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels. #### Returns diff --git a/packages/material-ui/src/styles/createBreakpoints.js b/packages/material-ui/src/styles/createBreakpoints.js index e05d9588f4108c..b1ff2100395e6e 100644 --- a/packages/material-ui/src/styles/createBreakpoints.js +++ b/packages/material-ui/src/styles/createBreakpoints.js @@ -38,15 +38,20 @@ export default function createBreakpoints(breakpoints) { } function between(start, end) { - const endIndex = keys.indexOf(end) + 1; + const endIndex = keys.indexOf(end); - if (endIndex === keys.length) { + if (endIndex === keys.length - 1) { return up(start); } return ( - `@media (min-width:${values[start]}${unit}) and ` + - `(max-width:${values[keys[endIndex]] - step / 100}${unit})` + `@media (min-width:${ + typeof values[start] === 'number' ? values[start] : start + }${unit}) and ` + + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex + 1]] === 'number' + ? values[keys[endIndex + 1]] + : end) - + step / 100}${unit})` ); } diff --git a/packages/material-ui/src/styles/createBreakpoints.test.js b/packages/material-ui/src/styles/createBreakpoints.test.js index bc01d896b22db6..4668064da44f48 100644 --- a/packages/material-ui/src/styles/createBreakpoints.test.js +++ b/packages/material-ui/src/styles/createBreakpoints.test.js @@ -23,7 +23,7 @@ describe('createBreakpoints', () => { assert.strictEqual(breakpoints.down('md'), '@media (max-width:1279.95px)'); }); - it('should use the specified key if it is not a recognized breakpoint', () => { + it('should accept a number', () => { assert.strictEqual(breakpoints.down(600), '@media (max-width:599.95px)'); }); @@ -40,6 +40,13 @@ describe('createBreakpoints', () => { ); }); + it('should accept numbers', () => { + assert.strictEqual( + breakpoints.between(600, 800), + '@media (min-width:600px) and (max-width:799.95px)', + ); + }); + it('on xl should call up', () => { assert.strictEqual(breakpoints.between('lg', 'xl'), '@media (min-width:1280px)'); }); From f38c262c009d47dfbb33361a94043bd6975a0ad3 Mon Sep 17 00:00:00 2001 From: Sandra Marcela Herrera Arriaga Date: Tue, 31 Dec 2019 05:10:41 -0600 Subject: [PATCH 08/15] [Popover] Fix position when changing state or updated (#19046) --- packages/material-ui/src/Popover/Popover.js | 73 +++++++++++-------- .../material-ui/src/Popover/Popover.test.js | 8 +- packages/material-ui/src/Slide/Slide.js | 27 ++++--- .../material-ui/src/Tabs/ScrollbarSize.js | 1 - 4 files changed, 58 insertions(+), 51 deletions(-) diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index 58e4d23d7a2e7c..7651a5cedb5ac6 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -307,27 +307,30 @@ const Popover = React.forwardRef(function Popover(props, ref) { ], ); - const setPositioningStyles = React.useCallback( - element => { - const positioning = getPositioningStyle(element); + const setPositioningStyles = React.useCallback(() => { + const element = paperRef.current; - if (positioning.top !== null) { - element.style.top = positioning.top; - } - if (positioning.left !== null) { - element.style.left = positioning.left; - } - element.style.transformOrigin = positioning.transformOrigin; - }, - [getPositioningStyle], - ); + if (!element) { + return; + } + + const positioning = getPositioningStyle(element); + + if (positioning.top !== null) { + element.style.top = positioning.top; + } + if (positioning.left !== null) { + element.style.left = positioning.left; + } + element.style.transformOrigin = positioning.transformOrigin; + }, [getPositioningStyle]); const handleEntering = (element, isAppearing) => { if (onEntering) { onEntering(element, isAppearing); } - setPositioningStyles(element); + setPositioningStyles(); }; const handlePaperRef = React.useCallback(instance => { @@ -335,32 +338,40 @@ const Popover = React.forwardRef(function Popover(props, ref) { paperRef.current = ReactDOM.findDOMNode(instance); }, []); - const updatePosition = React.useMemo(() => { - if (!open) { - return undefined; + React.useEffect(() => { + if (open) { + setPositioningStyles(); } + }); - return debounce(() => { - setPositioningStyles(paperRef.current); - }); - }, [open, setPositioningStyles]); - - React.useImperativeHandle(action, () => (open ? { updatePosition } : null), [ - open, - updatePosition, - ]); + React.useImperativeHandle( + action, + () => + open + ? { + updatePosition: () => { + setPositioningStyles(); + }, + } + : null, + [open, setPositioningStyles], + ); React.useEffect(() => { - if (!updatePosition) { + if (!open) { return undefined; } - window.addEventListener('resize', updatePosition); + const handleResize = debounce(() => { + setPositioningStyles(); + }); + + window.addEventListener('resize', handleResize); return () => { - window.removeEventListener('resize', updatePosition); - updatePosition.clear(); + handleResize.clear(); + window.removeEventListener('rezise', handleResize); }; - }, [updatePosition]); + }, [open, setPositioningStyles]); let transitionDuration = transitionDurationProp; diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js index b43630e04dd673..6a576f7c1bcf2d 100644 --- a/packages/material-ui/src/Popover/Popover.test.js +++ b/packages/material-ui/src/Popover/Popover.test.js @@ -616,13 +616,14 @@ describe('', () => { clock = useFakeTimers(); windowInnerHeight = window.innerHeight; + window.innerHeight = 8; + const mockedAnchor = document.createElement('div'); stub(mockedAnchor, 'getBoundingClientRect').callsFake(() => ({ left: 0, top: 9, })); const handleEntering = spy(); - window.innerHeight = 8; wrapper = mount( ', () => { it('should be able to manually recalculate position', () => { let popoverActions; wrapper.setProps({ - open: false, + open: true, action: actions => { popoverActions = actions; }, }); - wrapper.setProps({ - open: true, - }); const beforeStyle = { top: element.style.top, left: element.style.left, diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js index e8f9873bbd3297..49a6b00efb7874 100644 --- a/packages/material-ui/src/Slide/Slide.js +++ b/packages/material-ui/src/Slide/Slide.js @@ -173,22 +173,21 @@ const Slide = React.forwardRef(function Slide(props, ref) { React.useEffect(() => { // Skip configuration where the position is screen size invariant. - if (!inProp && direction !== 'down' && direction !== 'right') { - const handleResize = debounce(() => { - if (childrenRef.current) { - setTranslateValue(direction, childrenRef.current); - } - }); - - window.addEventListener('resize', handleResize); - - return () => { - handleResize.clear(); - window.removeEventListener('resize', handleResize); - }; + if (inProp || direction === 'down' || direction === 'right') { + return undefined; } - return undefined; + const handleResize = debounce(() => { + if (childrenRef.current) { + setTranslateValue(direction, childrenRef.current); + } + }); + + window.addEventListener('resize', handleResize); + return () => { + handleResize.clear(); + window.removeEventListener('resize', handleResize); + }; }, [direction, inProp]); React.useEffect(() => { diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.js b/packages/material-ui/src/Tabs/ScrollbarSize.js index f0953dfbcb1ab5..432aff9bbb9f06 100644 --- a/packages/material-ui/src/Tabs/ScrollbarSize.js +++ b/packages/material-ui/src/Tabs/ScrollbarSize.js @@ -35,7 +35,6 @@ export default function ScrollbarSize(props) { }); window.addEventListener('resize', handleResize); - return () => { handleResize.clear(); window.removeEventListener('resize', handleResize); From a07f18029a5532de310f234392c18664817f0dce Mon Sep 17 00:00:00 2001 From: Chris Van Emmerik Date: Tue, 31 Dec 2019 04:14:23 -0700 Subject: [PATCH 09/15] [Autocomplete] Fix disabled + multiple combination support (#19041) --- docs/src/pages/components/autocomplete/FixedTags.js | 2 +- docs/src/pages/components/autocomplete/FixedTags.tsx | 2 +- packages/material-ui-lab/src/Autocomplete/Autocomplete.js | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/autocomplete/FixedTags.js b/docs/src/pages/components/autocomplete/FixedTags.js index 3039b4801afc52..a76eaaa5a4bcd6 100644 --- a/docs/src/pages/components/autocomplete/FixedTags.js +++ b/docs/src/pages/components/autocomplete/FixedTags.js @@ -14,7 +14,7 @@ export default function FixedTags() { defaultValue={[top100Films[6], top100Films[13]]} renderTags={(value, getTagProps) => value.map((option, index) => ( - + )) } style={{ width: 500 }} diff --git a/docs/src/pages/components/autocomplete/FixedTags.tsx b/docs/src/pages/components/autocomplete/FixedTags.tsx index d655dc23f56606..be3aca0eaae2be 100644 --- a/docs/src/pages/components/autocomplete/FixedTags.tsx +++ b/docs/src/pages/components/autocomplete/FixedTags.tsx @@ -14,7 +14,7 @@ export default function FixedTags() { defaultValue={[top100Films[6], top100Films[13]]} renderTags={(value: FilmOptionType[], getTagProps) => value.map((option: FilmOptionType, index: number) => ( - + )) } style={{ width: 500 }} diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 0e8021b84ad31b..e32135663bff74 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -302,6 +302,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { className: clsx(classes.tag, { [classes.tagSizeSmall]: size === 'small', }), + disabled, ...getTagProps(params), }); From 2a60cfcaeddec8932db9e2b054f0ecada06741b3 Mon Sep 17 00:00:00 2001 From: Matt Date: Thu, 2 Jan 2020 10:05:58 +0000 Subject: [PATCH 10/15] [docs] Disable in-context translations (#19056) --- docs/src/modules/components/EditPage.js | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/docs/src/modules/components/EditPage.js b/docs/src/modules/components/EditPage.js index a1de89b56f56c8..e01f47918a3b59 100644 --- a/docs/src/modules/components/EditPage.js +++ b/docs/src/modules/components/EditPage.js @@ -1,9 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; -import { Router, useRouter } from 'next/router'; import Button from '@material-ui/core/Button'; -import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; const SOURCE_CODE_ROOT_URL = 'https://github.com/mui-org/material-ui/edit/master'; @@ -11,19 +9,19 @@ export default function EditPage(props) { const { markdownLocation } = props; const t = useSelector(state => state.options.t); const userLanguage = useSelector(state => state.options.userLanguage); - const router = useRouter(); - const { canonical } = pathnameToLanguage(Router._rewriteUrlForNextExport(router.asPath)); + const LOCALES = { zh: 'zh-CN', pt: 'pt-BR', es: 'es-ES' }; + const CROWDIN_ROOT_URL = 'https://translate.material-ui.com/project/material-ui-docs/'; + const crowdInLocale = LOCALES[userLanguage] || userLanguage; + const crowdInPath = markdownLocation.substring(0, markdownLocation.lastIndexOf('/')); return ( + } + > + This is a success alert — check it out! + + + ); +} diff --git a/docs/src/pages/components/alert/ActionAlerts.tsx b/docs/src/pages/components/alert/ActionAlerts.tsx new file mode 100644 index 00000000000000..dcb953f72da608 --- /dev/null +++ b/docs/src/pages/components/alert/ActionAlerts.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; +import Button from '@material-ui/core/Button'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function ActionAlerts() { + const classes = useStyles(); + + return ( +
+ {}}>This is a success alert — check it out! + + UNDO + + } + > + This is a success alert — check it out! + +
+ ); +} diff --git a/docs/src/pages/components/alert/ColorAlerts.js b/docs/src/pages/components/alert/ColorAlerts.js new file mode 100644 index 00000000000000..95a029e070f1e5 --- /dev/null +++ b/docs/src/pages/components/alert/ColorAlerts.js @@ -0,0 +1,24 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function ColorAlerts() { + const classes = useStyles(); + + return ( +
+ + This is a success alert — check it out! + +
+ ); +} diff --git a/docs/src/pages/components/alert/ColorAlerts.tsx b/docs/src/pages/components/alert/ColorAlerts.tsx new file mode 100644 index 00000000000000..88b418d7a4273f --- /dev/null +++ b/docs/src/pages/components/alert/ColorAlerts.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function ColorAlerts() { + const classes = useStyles(); + + return ( +
+ + This is a success alert — check it out! + +
+ ); +} diff --git a/docs/src/pages/components/alert/DescriptionAlerts.js b/docs/src/pages/components/alert/DescriptionAlerts.js new file mode 100644 index 00000000000000..f0b2a3bbcbb2b5 --- /dev/null +++ b/docs/src/pages/components/alert/DescriptionAlerts.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Alert, AlertTitle } from '@material-ui/lab'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function DescriptionAlerts() { + const classes = useStyles(); + + return ( +
+ + Error + This is an error alert — check it out! + + + Warning + This is a warning alert — check it out! + + + Info + This is an info alert — check it out! + + + Success + This is a success alert — check it out! + +
+ ); +} diff --git a/docs/src/pages/components/alert/DescriptionAlerts.tsx b/docs/src/pages/components/alert/DescriptionAlerts.tsx new file mode 100644 index 00000000000000..f7a754d8e0f17d --- /dev/null +++ b/docs/src/pages/components/alert/DescriptionAlerts.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Alert, AlertTitle } from '@material-ui/lab'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function DescriptionAlerts() { + const classes = useStyles(); + + return ( +
+ + Error + This is an error alert — check it out! + + + Warning + This is a warning alert — check it out! + + + Info + This is an info alert — check it out! + + + Success + This is a success alert — check it out! + +
+ ); +} diff --git a/docs/src/pages/components/alert/FilledAlerts.js b/docs/src/pages/components/alert/FilledAlerts.js new file mode 100644 index 00000000000000..a6d41c46cea7d6 --- /dev/null +++ b/docs/src/pages/components/alert/FilledAlerts.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function SimpleAlerts() { + const classes = useStyles(); + + return ( +
+ + This is an error alert — check it out! + + + This is a warning alert — check it out! + + + This is an info alert — check it out! + + + This is a success alert — check it out! + +
+ ); +} diff --git a/docs/src/pages/components/alert/FilledAlerts.tsx b/docs/src/pages/components/alert/FilledAlerts.tsx new file mode 100644 index 00000000000000..c0e9acbe5ce3eb --- /dev/null +++ b/docs/src/pages/components/alert/FilledAlerts.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function SimpleAlerts() { + const classes = useStyles(); + + return ( +
+ + This is an error alert — check it out! + + + This is a warning alert — check it out! + + + This is an info alert — check it out! + + + This is a success alert — check it out! + +
+ ); +} diff --git a/docs/src/pages/components/alert/IconAlerts.js b/docs/src/pages/components/alert/IconAlerts.js new file mode 100644 index 00000000000000..b64fb4486bd360 --- /dev/null +++ b/docs/src/pages/components/alert/IconAlerts.js @@ -0,0 +1,32 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Alert from '@material-ui/lab/Alert'; +import CheckIcon from '@material-ui/icons/Check'; +import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function IconAlerts() { + const classes = useStyles(); + + return ( +
+ } severity="success"> + This is a success alert — check it out! + + }}> + This is a success alert — check it out! + + + This is a success alert — check it out! + +
+ ); +} diff --git a/docs/src/pages/components/alert/IconAlerts.tsx b/docs/src/pages/components/alert/IconAlerts.tsx new file mode 100644 index 00000000000000..bb7a1d4a56ee1d --- /dev/null +++ b/docs/src/pages/components/alert/IconAlerts.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import Alert from '@material-ui/lab/Alert'; +import CheckIcon from '@material-ui/icons/Check'; +import CheckCircleOutlineIcon from '@material-ui/icons/CheckCircleOutline'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function IconAlerts() { + const classes = useStyles(); + + return ( +
+ } severity="success"> + This is a success alert — check it out! + + }}> + This is a success alert — check it out! + + + This is a success alert — check it out! + +
+ ); +} diff --git a/docs/src/pages/components/alert/OutlinedAlerts.js b/docs/src/pages/components/alert/OutlinedAlerts.js new file mode 100644 index 00000000000000..17f40679bc19d9 --- /dev/null +++ b/docs/src/pages/components/alert/OutlinedAlerts.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function SimpleAlerts() { + const classes = useStyles(); + + return ( +
+ + This is an error alert — check it out! + + + This is a warning alert — check it out! + + + This is an info alert — check it out! + + + This is a success alert — check it out! + +
+ ); +} diff --git a/docs/src/pages/components/alert/OutlinedAlerts.tsx b/docs/src/pages/components/alert/OutlinedAlerts.tsx new file mode 100644 index 00000000000000..88e89e05dee943 --- /dev/null +++ b/docs/src/pages/components/alert/OutlinedAlerts.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function SimpleAlerts() { + const classes = useStyles(); + + return ( +
+ + This is an error alert — check it out! + + + This is a warning alert — check it out! + + + This is an info alert — check it out! + + + This is a success alert — check it out! + +
+ ); +} diff --git a/docs/src/pages/components/alert/SimpleAlerts.js b/docs/src/pages/components/alert/SimpleAlerts.js new file mode 100644 index 00000000000000..78cb2424668517 --- /dev/null +++ b/docs/src/pages/components/alert/SimpleAlerts.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function SimpleAlerts() { + const classes = useStyles(); + + return ( +
+ This is an error alert — check it out! + This is a warning alert — check it out! + This is an info alert — check it out! + This is a success alert — check it out! +
+ ); +} diff --git a/docs/src/pages/components/alert/SimpleAlerts.tsx b/docs/src/pages/components/alert/SimpleAlerts.tsx new file mode 100644 index 00000000000000..88a6c45579a5c4 --- /dev/null +++ b/docs/src/pages/components/alert/SimpleAlerts.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function SimpleAlerts() { + const classes = useStyles(); + + return ( +
+ This is an error alert — check it out! + This is a warning alert — check it out! + This is an info alert — check it out! + This is a success alert — check it out! +
+ ); +} diff --git a/docs/src/pages/components/alert/TransitionAlerts.js b/docs/src/pages/components/alert/TransitionAlerts.js new file mode 100644 index 00000000000000..ce6322836bd7ba --- /dev/null +++ b/docs/src/pages/components/alert/TransitionAlerts.js @@ -0,0 +1,52 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; +import IconButton from '@material-ui/core/IconButton'; +import Collapse from '@material-ui/core/Collapse'; +import Button from '@material-ui/core/Button'; +import CloseIcon from '@material-ui/icons/Close'; + +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, +})); + +export default function ActionAlerts() { + const classes = useStyles(); + const [open, setOpen] = React.useState(true); + + return ( +
+ + { + setOpen(false); + }} + > + + + } + > + Close me! + + + +
+ ); +} diff --git a/docs/src/pages/components/alert/TransitionAlerts.tsx b/docs/src/pages/components/alert/TransitionAlerts.tsx new file mode 100644 index 00000000000000..2ebb5c536ebe9c --- /dev/null +++ b/docs/src/pages/components/alert/TransitionAlerts.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { Alert } from '@material-ui/lab'; +import IconButton from '@material-ui/core/IconButton'; +import Collapse from '@material-ui/core/Collapse'; +import Button from '@material-ui/core/Button'; +import CloseIcon from '@material-ui/icons/Close'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, + }, + }), +); + +export default function ActionAlerts() { + const classes = useStyles(); + const [open, setOpen] = React.useState(true); + + return ( +
+ + { + setOpen(false); + }} + > + + + } + > + Close me! + + + +
+ ); +} diff --git a/docs/src/pages/components/alert/alert.md b/docs/src/pages/components/alert/alert.md new file mode 100644 index 00000000000000..b71c0e3254c6ea --- /dev/null +++ b/docs/src/pages/components/alert/alert.md @@ -0,0 +1,78 @@ +--- +title: Alert React component +components: Alert +--- + +# Alert + +

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+ +## Simple alerts + +The alert offers four severity levels that set a distinctive icon and color. + +{{"demo": "pages/components/alert/SimpleAlerts.js"}} + +## Description + +You can use the `AlertTitle` component to display a formatted title above the content. + +{{"demo": "pages/components/alert/DescriptionAlerts.js"}} + +## Actions + +An alert can have an action, such as a close or undo button. +It is rendered after the message, at the end of the alert. + +If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. + +{{"demo": "pages/components/alert/ActionAlerts.js"}} + +### Transition + +You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. + +{{"demo": "pages/components/alert/TransitionAlerts.js"}} + +## Icons + +The `icon` prop allows you to add an icon to the beginning of the alert component. +This will override the default icon for the specified severity. + +You can change the default severity to icon mapping with the `iconMapping` prop. This can be defined globally using [theme customization](/customization/globals/#default-props). + +Setting the icon prop to false will remove the icon altogether. + +{{"demo": "pages/components/alert/IconAlerts.js"}} + +## Variants + +Two additional variants are available – outlined, and filled: + +### Outlined + +{{"demo": "pages/components/alert/OutlinedAlerts.js"}} + +### Filled + +{{"demo": "pages/components/alert/FilledAlerts.js"}} + +## Toast + +You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert. + +## Color + +The `color` prop will override the default color for the specified severity. + +{{"demo": "pages/components/alert/ColorAlerts.js"}} + +## Accessibility + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) + +When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads. + +Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text. + +Actions must have a tab index of 0 so that they can be reached by keyboard-only users. diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js index eee3ff37af5a6d..637aa8e099a932 100644 --- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js +++ b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.js @@ -68,20 +68,21 @@ export default function ConsecutiveSnackbars() { 'aria-describedby': 'message-id', }} message={{messageInfo ? messageInfo.message : undefined}} - action={[ - , - - - , - ]} + action={ + + + + + + + } /> ); diff --git a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx index 97cf86b17577e8..383f3e98a9cba5 100644 --- a/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx +++ b/docs/src/pages/components/snackbars/ConsecutiveSnackbars.tsx @@ -1,4 +1,4 @@ -import React, { SyntheticEvent } from 'react'; +import React from 'react'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Snackbar from '@material-ui/core/Snackbar'; @@ -50,7 +50,7 @@ export default function ConsecutiveSnackbars() { } }; - const handleClose = (event: SyntheticEvent | MouseEvent, reason?: string) => { + const handleClose = (event: React.SyntheticEvent | MouseEvent, reason?: string) => { if (reason === 'clickaway') { return; } @@ -80,20 +80,21 @@ export default function ConsecutiveSnackbars() { 'aria-describedby': 'message-id', }} message={{messageInfo ? messageInfo.message : undefined}} - action={[ - , - - - , - ]} + action={ + + + + + + + } /> ); diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.js b/docs/src/pages/components/snackbars/CustomizedSnackbars.js index 59b663c9f2f6bc..72e318c8110dec 100644 --- a/docs/src/pages/components/snackbars/CustomizedSnackbars.js +++ b/docs/src/pages/components/snackbars/CustomizedSnackbars.js @@ -1,91 +1,24 @@ import React from 'react'; -import PropTypes from 'prop-types'; -import clsx from 'clsx'; import Button from '@material-ui/core/Button'; -import CheckCircleIcon from '@material-ui/icons/CheckCircle'; -import ErrorIcon from '@material-ui/icons/Error'; -import InfoIcon from '@material-ui/icons/Info'; -import CloseIcon from '@material-ui/icons/Close'; -import { amber, green } from '@material-ui/core/colors'; -import IconButton from '@material-ui/core/IconButton'; import Snackbar from '@material-ui/core/Snackbar'; -import SnackbarContent from '@material-ui/core/SnackbarContent'; -import WarningIcon from '@material-ui/icons/Warning'; +import MuiAlert from '@material-ui/lab/Alert'; import { makeStyles } from '@material-ui/core/styles'; -const variantIcon = { - success: CheckCircleIcon, - warning: WarningIcon, - error: ErrorIcon, - info: InfoIcon, -}; - -const useStyles1 = makeStyles(theme => ({ - success: { - backgroundColor: green[600], - }, - error: { - backgroundColor: theme.palette.error.dark, - }, - info: { - backgroundColor: theme.palette.primary.main, - }, - warning: { - backgroundColor: amber[700], - }, - icon: { - fontSize: 20, - }, - iconVariant: { - opacity: 0.9, - marginRight: theme.spacing(1), - }, - message: { - display: 'flex', - alignItems: 'center', - }, -})); - -function MySnackbarContentWrapper(props) { - const classes = useStyles1(); - const { className, message, onClose, variant, ...other } = props; - const Icon = variantIcon[variant]; - - return ( - - - {message} - - } - action={[ - - - , - ]} - {...other} - /> - ); +function Alert(props) { + return ; } -MySnackbarContentWrapper.propTypes = { - className: PropTypes.string, - message: PropTypes.string, - onClose: PropTypes.func, - variant: PropTypes.oneOf(['error', 'info', 'success', 'warning']).isRequired, -}; - -const useStyles2 = makeStyles(theme => ({ - margin: { - margin: theme.spacing(1), +const useStyles = makeStyles(theme => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, }, })); export default function CustomizedSnackbars() { - const classes = useStyles2(); + const classes = useStyles(); const [open, setOpen] = React.useState(false); const handleClick = () => { @@ -101,45 +34,19 @@ export default function CustomizedSnackbars() { }; return ( -
- - - + + + This is a success message! + - - - - + This is an error message! + This is a warning message! + This is an information message! + This is a success message!
); } diff --git a/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx b/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx index c108ec315022d0..b1acdca203d093 100644 --- a/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx +++ b/docs/src/pages/components/snackbars/CustomizedSnackbars.tsx @@ -1,97 +1,31 @@ -import React, { SyntheticEvent } from 'react'; -import clsx from 'clsx'; +import React from 'react'; import Button from '@material-ui/core/Button'; -import CheckCircleIcon from '@material-ui/icons/CheckCircle'; -import ErrorIcon from '@material-ui/icons/Error'; -import InfoIcon from '@material-ui/icons/Info'; -import CloseIcon from '@material-ui/icons/Close'; -import { amber, green } from '@material-ui/core/colors'; -import IconButton from '@material-ui/core/IconButton'; import Snackbar from '@material-ui/core/Snackbar'; -import SnackbarContent from '@material-ui/core/SnackbarContent'; -import WarningIcon from '@material-ui/icons/Warning'; +import MuiAlert, { AlertProps } from '@material-ui/lab/Alert'; import { makeStyles, Theme } from '@material-ui/core/styles'; -const variantIcon = { - success: CheckCircleIcon, - warning: WarningIcon, - error: ErrorIcon, - info: InfoIcon, -}; - -const useStyles1 = makeStyles((theme: Theme) => ({ - success: { - backgroundColor: green[600], - }, - error: { - backgroundColor: theme.palette.error.dark, - }, - info: { - backgroundColor: theme.palette.primary.main, - }, - warning: { - backgroundColor: amber[700], - }, - icon: { - fontSize: 20, - }, - iconVariant: { - opacity: 0.9, - marginRight: theme.spacing(1), - }, - message: { - display: 'flex', - alignItems: 'center', - }, -})); - -export interface Props { - className?: string; - message?: string; - onClose?: () => void; - variant: keyof typeof variantIcon; -} - -function MySnackbarContentWrapper(props: Props) { - const classes = useStyles1(); - const { className, message, onClose, variant, ...other } = props; - const Icon = variantIcon[variant]; - - return ( - - - {message} - - } - action={[ - - - , - ]} - {...other} - /> - ); +function Alert(props: AlertProps) { + return ; } -const useStyles2 = makeStyles((theme: Theme) => ({ - margin: { - margin: theme.spacing(1), +const useStyles = makeStyles((theme: Theme) => ({ + root: { + width: '100%', + '& > * + *': { + marginTop: theme.spacing(2), + }, }, })); export default function CustomizedSnackbars() { - const classes = useStyles2(); + const classes = useStyles(); const [open, setOpen] = React.useState(false); const handleClick = () => { setOpen(true); }; - const handleClose = (event?: SyntheticEvent, reason?: string) => { + const handleClose = (event?: React.SyntheticEvent, reason?: string) => { if (reason === 'clickaway') { return; } @@ -100,45 +34,19 @@ export default function CustomizedSnackbars() { }; return ( -
- - - + + + This is a success message! + - - - - + This is an error message! + This is a warning message! + This is an information message! + This is a success message!
); } diff --git a/docs/src/pages/components/snackbars/LongTextSnackbar.js b/docs/src/pages/components/snackbars/LongTextSnackbar.js index dcb232c218ced7..685e5ee298900e 100644 --- a/docs/src/pages/components/snackbars/LongTextSnackbar.js +++ b/docs/src/pages/components/snackbars/LongTextSnackbar.js @@ -12,9 +12,9 @@ const action = ( const useStyles = makeStyles(theme => ({ root: { maxWidth: 600, - }, - snackbar: { - margin: theme.spacing(1), + '& > * + *': { + marginTop: theme.spacing(2), + }, }, })); @@ -23,21 +23,15 @@ export default function LongTextSnackbar() { return (
- + + - createStyles({ root: { maxWidth: 600, - }, - snackbar: { - margin: theme.spacing(1), + '& > * + *': { + marginTop: theme.spacing(2), + }, }, }), ); @@ -25,21 +25,15 @@ export default function LongTextSnackbar() { return (
- + + - ({ - close: { - padding: theme.spacing(0.5), - }, -})); - export default function SimpleSnackbar() { - const classes = useStyles(); const [open, setOpen] = React.useState(false); const handleClick = () => { @@ -42,20 +34,16 @@ export default function SimpleSnackbar() { 'aria-describedby': 'message-id', }} message={Note archived} - action={[ - , - - - , - ]} + action={ + + + + + + + } />
); diff --git a/docs/src/pages/components/snackbars/SimpleSnackbar.tsx b/docs/src/pages/components/snackbars/SimpleSnackbar.tsx index 292d8bc5606556..8af26e04d7e1e6 100644 --- a/docs/src/pages/components/snackbars/SimpleSnackbar.tsx +++ b/docs/src/pages/components/snackbars/SimpleSnackbar.tsx @@ -1,20 +1,10 @@ import React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; import Snackbar from '@material-ui/core/Snackbar'; import IconButton from '@material-ui/core/IconButton'; import CloseIcon from '@material-ui/icons/Close'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - close: { - padding: theme.spacing(0.5), - }, - }), -); - export default function SimpleSnackbar() { - const classes = useStyles(); const [open, setOpen] = React.useState(false); const handleClick = () => { @@ -44,20 +34,16 @@ export default function SimpleSnackbar() { 'aria-describedby': 'message-id', }} message={Note archived} - action={[ - , - - - , - ]} + action={ + + + + + + + } />
); diff --git a/docs/src/pages/discover-more/roadmap/roadmap.md b/docs/src/pages/discover-more/roadmap/roadmap.md index 905a63c025f2ae..766b7aee6e5d40 100644 --- a/docs/src/pages/discover-more/roadmap/roadmap.md +++ b/docs/src/pages/discover-more/roadmap/roadmap.md @@ -68,9 +68,9 @@ Here are the components we will work on being supported in the Material-UI ecosy | Autocomplete | 🧪 | | Combo Box | 🧪 | | Multiselect | 🧪 | +| Alert | 🧪 | | Date Picker (& range) | 🛠 | | Data Table | 🛠⭐️ | -| Alert | ⏳ | | Carousel | ⏳ | | Dropdown | ⏳ | | Dropzone | ⏳ | diff --git a/packages/material-ui-lab/src/Alert/Alert.d.ts b/packages/material-ui-lab/src/Alert/Alert.d.ts new file mode 100644 index 00000000000000..c164d47df40f76 --- /dev/null +++ b/packages/material-ui-lab/src/Alert/Alert.d.ts @@ -0,0 +1,73 @@ +import * as React from 'react'; +import { StandardProps } from '@material-ui/core'; +import { PaperProps } from '@material-ui/core/Paper'; + +export type Color = 'success' | 'info' | 'warning' | 'error'; + +export interface AlertProps extends StandardProps { + /** + * The action to display. It renders after the message, at the end of the alert. + */ + action?: React.ReactNode; + /** + * Override the default label for the *close popup* icon button. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). + */ + closeText?: string; + /** + * The main color for the alert. Unless provided, the value is taken from the `severity` prop. + */ + color?: Color; + /** + * The severity of the alert. This defines the color and icon used. + */ + severity?: Color; + /** + * Override the icon displayed before the children. + * Unless provided, the icon is mapped to the value of the `severity` prop. + */ + icon?: React.ReactNode | false; + /** + * The ARIA role attribute of the element. + */ + role?: string; + /** + * The component maps the `severity` prop to a range of different icons, + * for instance success to ``. + * If you wish to change this mapping, you can provide your own. + * Alternatively, you can use the `icon` prop to override the icon displayed. + */ + iconMapping?: Partial>; + /** + * Callback fired when the component requests to be closed. + * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked. + * + * @param {object} event The event source of the callback. + */ + onClose?: (event: React.SyntheticEvent) => void; + /** + * The variant to use. + */ + variant?: 'standard' | 'filled' | 'outlined'; +} + +export type AlertClassKey = + | 'root' + | 'standardSuccess' + | 'standardInfo' + | 'standardWarning' + | 'standardError' + | 'outlinedSuccess' + | 'outlinedInfo' + | 'outlinedWarning' + | 'outlinedError' + | 'filledSuccess' + | 'filledInfo' + | 'filledWarning' + | 'filledError' + | 'icon' + | 'message' + | 'action'; + +export default function Alert(props: AlertProps): JSX.Element; diff --git a/packages/material-ui-lab/src/Alert/Alert.js b/packages/material-ui-lab/src/Alert/Alert.js new file mode 100644 index 00000000000000..d616fd3a0a2d1a --- /dev/null +++ b/packages/material-ui-lab/src/Alert/Alert.js @@ -0,0 +1,279 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { withStyles, lighten, darken } from '@material-ui/core/styles'; +import Paper from '@material-ui/core/Paper'; +import SuccessOutlinedIcon from '../internal/svg-icons/SuccessOutlined'; +import ReportProblemOutlinedIcon from '../internal/svg-icons/ReportProblemOutlined'; +import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline'; +import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined'; +import CloseIcon from '../internal/svg-icons/Close'; +import IconButton from '@material-ui/core/IconButton'; +import { capitalize } from '@material-ui/core/utils'; + +export const styles = theme => ({ + /* Styles applied to the root element. */ + root: { + ...theme.typography.body2, + borderRadius: theme.shape.borderRadius, + backgroundColor: 'transparent', + display: 'flex', + padding: '6px 16px', + }, + /* Styles applied to the root element if `variant="standard"` and `color="success"`. */ + standardSuccess: { + color: darken(theme.palette.success.main, 0.6), + backgroundColor: lighten(theme.palette.success.main, 0.9), + '& $icon': { + color: theme.palette.success.main, + }, + }, + /* Styles applied to the root element if `variant="standard"` and `color="info"`. */ + standardInfo: { + color: darken(theme.palette.info.main, 0.6), + backgroundColor: lighten(theme.palette.info.main, 0.9), + '& $icon': { + color: theme.palette.info.main, + }, + }, + /* Styles applied to the root element if `variant="standard"` and `color="warning"`. */ + standardWarning: { + color: darken(theme.palette.warning.main, 0.6), + backgroundColor: lighten(theme.palette.warning.main, 0.9), + '& $icon': { + color: theme.palette.warning.main, + }, + }, + /* Styles applied to the root element if `variant="standard"` and `color="error"`. */ + standardError: { + color: darken(theme.palette.error.main, 0.6), + backgroundColor: lighten(theme.palette.error.main, 0.9), + '& $icon': { + color: theme.palette.error.main, + }, + }, + /* Styles applied to the root element if `variant="outlined"` and `color="success"`. */ + outlinedSuccess: { + color: + theme.palette.type === 'light' + ? darken(theme.palette.success.main, 0.6) + : lighten(theme.palette.success.main, 0.6), + border: `1px solid ${theme.palette.success.main}`, + '& $icon': { + color: theme.palette.success.main, + }, + }, + /* Styles applied to the root element if `variant="outlined"` and `color="info"`. */ + outlinedInfo: { + color: + theme.palette.type === 'light' + ? darken(theme.palette.info.main, 0.6) + : lighten(theme.palette.info.main, 0.6), + border: `1px solid ${theme.palette.info.main}`, + '& $icon': { + color: theme.palette.info.main, + }, + }, + /* Styles applied to the root element if `variant="outlined"` and `color="warning"`. */ + outlinedWarning: { + color: + theme.palette.type === 'light' + ? darken(theme.palette.warning.main, 0.6) + : lighten(theme.palette.warning.main, 0.6), + border: `1px solid ${theme.palette.warning.main}`, + '& $icon': { + color: theme.palette.warning.main, + }, + }, + /* Styles applied to the root element if `variant="outlined"` and `color="error"`. */ + outlinedError: { + color: + theme.palette.type === 'light' + ? darken(theme.palette.error.main, 0.6) + : lighten(theme.palette.error.main, 0.6), + border: `1px solid ${theme.palette.error.main}`, + '& $icon': { + color: theme.palette.error.main, + }, + }, + /* Styles applied to the root element if `variant="filled"` and `color="success"`. */ + filledSuccess: { + color: '#fff', + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: theme.palette.success.main, + }, + /* Styles applied to the root element if `variant="filled"` and `color="info"`. */ + filledInfo: { + color: '#fff', + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: theme.palette.info.main, + }, + /* Styles applied to the root element if `variant="filled"` and `color="warning"`. */ + filledWarning: { + color: '#fff', + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: theme.palette.warning.main, + }, + /* Styles applied to the root element if `variant="filled"` and `color="error"`. */ + filledError: { + color: '#fff', + fontWeight: theme.typography.fontWeightMedium, + backgroundColor: theme.palette.error.main, + }, + /* Styles applied to the icon wrapper element. */ + icon: { + marginRight: 12, + padding: '7px 0', + display: 'flex', + fontSize: 22, + opacity: 0.9, + }, + /* Styles applied to the message wrapper element. */ + message: { + padding: '8px 0', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + /* Styles applied to the action wrapper element if `action` is provided. */ + action: { + display: 'flex', + alignItems: 'center', + marginLeft: 'auto', + paddingLeft: 16, + marginRight: -8, + }, +}); + +const defaultIconMapping = { + success: , + warning: , + error: , + info: , +}; + +const Alert = React.forwardRef(function Alert(props, ref) { + const { + action, + children, + classes, + className, + closeText = 'Close', + color, + icon, + iconMapping = defaultIconMapping, + onClose, + role = 'alert', + severity = 'success', + variant = 'standard', + ...other + } = props; + + return ( + + {icon !== false ? ( +
+ {icon || iconMapping[severity] || defaultIconMapping[severity]} +
+ ) : null} +
{children}
+ {action != null ?
{action}
: null} + {action == null && onClose ? ( +
+ + + +
+ ) : null} + + ); +}); + +Alert.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * The action to display. It renders after the message, at the end of the alert. + */ + action: PropTypes.node, + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css) below for more details. + */ + classes: PropTypes.object, + /** + * @ignore + */ + className: PropTypes.string, + /** + * Override the default label for the *close popup* icon button. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). + */ + closeText: PropTypes.string, + /** + * The main color for the alert. Unless provided, the value is taken from the `severity` prop. + */ + color: PropTypes.oneOf(['error', 'info', 'success', 'warning']), + /** + * Override the icon displayed before the children. + * Unless provided, the icon is mapped to the value of the `severity` prop. + */ + icon: PropTypes.node, + /** + * The component maps the `severity` prop to a range of different icons, + * for instance success to ``. + * If you wish to change this mapping, you can provide your own. + * Alternatively, you can use the `icon` prop to override the icon displayed. + */ + iconMapping: PropTypes.shape({ + error: PropTypes.node, + info: PropTypes.node, + success: PropTypes.node, + warning: PropTypes.node, + }), + /** + * Callback fired when the component requests to be closed. + * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked. + * + * @param {object} event The event source of the callback. + */ + onClose: PropTypes.func, + /** + * The ARIA role attribute of the element. + */ + role: PropTypes.string, + /** + * The severity of the alert. This defines the color and icon used. + */ + severity: PropTypes.oneOf(['error', 'info', 'success', 'warning']), + /** + * The variant to use. + */ + variant: PropTypes.oneOf(['filled', 'outlined', 'standard']), +}; + +export default withStyles(styles, { name: 'MuiAlert' })(Alert); diff --git a/packages/material-ui-lab/src/Alert/Alert.test.js b/packages/material-ui-lab/src/Alert/Alert.test.js new file mode 100644 index 00000000000000..27c9708b8c20b7 --- /dev/null +++ b/packages/material-ui-lab/src/Alert/Alert.test.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { createMount, getClasses } from '@material-ui/core/test-utils'; +import describeConformance from '@material-ui/core/test-utils/describeConformance'; +import Alert from './Alert'; +import Paper from '@material-ui/core/Paper'; + +describe('', () => { + let mount; + let classes; + + before(() => { + mount = createMount({ strict: true }); + classes = getClasses(); + }); + + after(() => { + mount.cleanUp(); + }); + + describeConformance(, () => ({ + classes, + inheritComponent: Paper, + mount, + refInstanceof: window.HTMLDivElement, + skip: ['componentProp'], + })); +}); diff --git a/packages/material-ui-lab/src/Alert/index.d.ts b/packages/material-ui-lab/src/Alert/index.d.ts new file mode 100644 index 00000000000000..f8bf7e6b67860c --- /dev/null +++ b/packages/material-ui-lab/src/Alert/index.d.ts @@ -0,0 +1,2 @@ +export { default } from './Alert'; +export * from './Alert'; diff --git a/packages/material-ui-lab/src/Alert/index.js b/packages/material-ui-lab/src/Alert/index.js new file mode 100644 index 00000000000000..becaea750b71e9 --- /dev/null +++ b/packages/material-ui-lab/src/Alert/index.js @@ -0,0 +1 @@ +export { default } from './Alert'; diff --git a/packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts b/packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts new file mode 100644 index 00000000000000..7e840cb29e6be8 --- /dev/null +++ b/packages/material-ui-lab/src/AlertTitle/AlertTitle.d.ts @@ -0,0 +1,9 @@ +import * as React from 'react'; +import { StandardProps } from '@material-ui/core'; + +export interface AlertTitleProps + extends StandardProps, AlertTitleClassKey> {} + +export type AlertTitleClassKey = 'root'; + +export default function AlertTitle(props: AlertTitleProps): JSX.Element; diff --git a/packages/material-ui-lab/src/AlertTitle/AlertTitle.js b/packages/material-ui-lab/src/AlertTitle/AlertTitle.js new file mode 100644 index 00000000000000..8a9e6df7764935 --- /dev/null +++ b/packages/material-ui-lab/src/AlertTitle/AlertTitle.js @@ -0,0 +1,48 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Typography } from '@material-ui/core'; +import clsx from 'clsx'; + +export const styles = theme => ({ + root: { + fontWeight: theme.typography.fontWeightMedium, + marginTop: -2, + }, +}); + +const AlertTitle = React.forwardRef(function AlertTitle(props, ref) { + const { classes, className, ...other } = props; + + return ( + + ); +}); + +AlertTitle.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * The content of the component. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + * See [CSS API](#css) below for more details. + */ + classes: PropTypes.object, + /** + * @ignore + */ + className: PropTypes.string, +}; + +export default withStyles(styles, { name: 'MuiAlertTitle' })(AlertTitle); diff --git a/packages/material-ui-lab/src/AlertTitle/AlertTitle.test.js b/packages/material-ui-lab/src/AlertTitle/AlertTitle.test.js new file mode 100644 index 00000000000000..69edaab9f9503f --- /dev/null +++ b/packages/material-ui-lab/src/AlertTitle/AlertTitle.test.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { createMount, getClasses } from '@material-ui/core/test-utils'; +import describeConformance from '@material-ui/core/test-utils/describeConformance'; +import AlertTitle from './AlertTitle'; + +describe('', () => { + let mount; + let classes; + + before(() => { + mount = createMount({ strict: true }); + classes = getClasses(); + }); + + after(() => { + mount.cleanUp(); + }); + + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + skip: ['componentProp'], + })); +}); diff --git a/packages/material-ui-lab/src/AlertTitle/index.d.ts b/packages/material-ui-lab/src/AlertTitle/index.d.ts new file mode 100644 index 00000000000000..92625eccbf49a6 --- /dev/null +++ b/packages/material-ui-lab/src/AlertTitle/index.d.ts @@ -0,0 +1,2 @@ +export { default } from './AlertTitle'; +export * from './AlertTitle'; diff --git a/packages/material-ui-lab/src/AlertTitle/index.js b/packages/material-ui-lab/src/AlertTitle/index.js new file mode 100644 index 00000000000000..5277f016a42856 --- /dev/null +++ b/packages/material-ui-lab/src/AlertTitle/index.js @@ -0,0 +1 @@ +export { default } from './AlertTitle'; diff --git a/packages/material-ui-lab/src/index.d.ts b/packages/material-ui-lab/src/index.d.ts index c39dc2b6a1545b..a85a26e2c624a3 100644 --- a/packages/material-ui-lab/src/index.d.ts +++ b/packages/material-ui-lab/src/index.d.ts @@ -1,3 +1,9 @@ +export { default as Alert } from './Alert'; +export * from './Alert'; + +export { default as AlertTitle } from './AlertTitle'; +export * from './AlertTitle'; + export { default as Autocomplete } from './Autocomplete'; export * from './Autocomplete'; diff --git a/packages/material-ui-lab/src/index.js b/packages/material-ui-lab/src/index.js index 4014dcac7ca134..0a1f15f1d9cc94 100644 --- a/packages/material-ui-lab/src/index.js +++ b/packages/material-ui-lab/src/index.js @@ -1,4 +1,10 @@ /* eslint-disable import/export */ +export { default as Alert } from './Alert'; +export * from './Alert'; + +export { default as AlertTitle } from './AlertTitle'; +export * from './AlertTitle'; + export { default as Autocomplete } from './Autocomplete'; export * from './Autocomplete'; diff --git a/packages/material-ui-lab/src/internal/svg-icons/ErrorOutline.js b/packages/material-ui-lab/src/internal/svg-icons/ErrorOutline.js new file mode 100644 index 00000000000000..d4054b6d409fd2 --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/ErrorOutline.js @@ -0,0 +1,10 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +/** + * @ignore - internal component. + */ +export default createSvgIcon( + , + 'ErrorOutline', +); diff --git a/packages/material-ui-lab/src/internal/svg-icons/InfoOutlined.js b/packages/material-ui-lab/src/internal/svg-icons/InfoOutlined.js new file mode 100644 index 00000000000000..17a9878d733c98 --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/InfoOutlined.js @@ -0,0 +1,10 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +/** + * @ignore - internal component. + */ +export default createSvgIcon( + , + 'InfoOutlined', +); diff --git a/packages/material-ui-lab/src/internal/svg-icons/ReportProblemOutlined.js b/packages/material-ui-lab/src/internal/svg-icons/ReportProblemOutlined.js new file mode 100644 index 00000000000000..da8354ff42a08a --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/ReportProblemOutlined.js @@ -0,0 +1,10 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +/** + * @ignore - internal component. + */ +export default createSvgIcon( + , + 'ReportProblemOutlined', +); diff --git a/packages/material-ui-lab/src/internal/svg-icons/SuccessOutlined.js b/packages/material-ui-lab/src/internal/svg-icons/SuccessOutlined.js new file mode 100644 index 00000000000000..cf616d5163ce22 --- /dev/null +++ b/packages/material-ui-lab/src/internal/svg-icons/SuccessOutlined.js @@ -0,0 +1,10 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +/** + * @ignore - internal component. + */ +export default createSvgIcon( + , + 'SuccessOutlined', +); diff --git a/packages/material-ui/src/Snackbar/Snackbar.js b/packages/material-ui/src/Snackbar/Snackbar.js index 100f8e62218e6a..a5608e1cef252f 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.js +++ b/packages/material-ui/src/Snackbar/Snackbar.js @@ -253,7 +253,7 @@ const Snackbar = React.forwardRef(function Snackbar(props, ref) { Snackbar.propTypes = { /** - * The action to display. + * The action to display. It renders after the message, at the end of the snackbar. */ action: PropTypes.node, /** diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js index 58a1bbfe60b401..5c118870fa9aa1 100644 --- a/packages/material-ui/src/SnackbarContent/SnackbarContent.js +++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.js @@ -61,7 +61,7 @@ const SnackbarContent = React.forwardRef(function SnackbarContent(props, ref) { SnackbarContent.propTypes = { /** - * The action to display. + * The action to display. It renders after the message, at the end of the snackbar. */ action: PropTypes.node, /** @@ -78,10 +78,9 @@ SnackbarContent.propTypes = { */ message: PropTypes.node, /** - * The role of the SnackbarContent. If the Snackbar requires focus - * to be closed, the `alertdialog` role should be used instead. + * The ARIA role attribute of the element. */ - role: PropTypes.oneOf(['alert', 'alertdialog']), + role: PropTypes.string, }; export default withStyles(styles, { name: 'MuiSnackbarContent' })(SnackbarContent); diff --git a/packages/material-ui/src/Typography/Typography.js b/packages/material-ui/src/Typography/Typography.js index a45630612c1c7a..052cf57fd927f3 100644 --- a/packages/material-ui/src/Typography/Typography.js +++ b/packages/material-ui/src/Typography/Typography.js @@ -237,7 +237,7 @@ Typography.propTypes = { 'inherit', ]), /** - * We are empirically mapping the variant prop to a range of different DOM element types. + * The component maps the variant prop to a range of different DOM element types. * For instance, subtitle1 to `
`. * If you wish to change that mapping, you can provide your own. * Alternatively, you can use the `component` prop. diff --git a/packages/material-ui/src/internal/svg-icons/Close.js b/packages/material-ui/src/internal/svg-icons/Close.js new file mode 100644 index 00000000000000..47b725313e25e4 --- /dev/null +++ b/packages/material-ui/src/internal/svg-icons/Close.js @@ -0,0 +1,10 @@ +import React from 'react'; +import createSvgIcon from './createSvgIcon'; + +/** + * @ignore - internal component. + */ +export default createSvgIcon( + , + 'Close', +); diff --git a/packages/material-ui/src/locale/index.js b/packages/material-ui/src/locale/index.js index 88186e8005b087..ff2e167148ddac 100644 --- a/packages/material-ui/src/locale/index.js +++ b/packages/material-ui/src/locale/index.js @@ -26,6 +26,9 @@ export const azAZ = { noOptionsText: 'Seçimlər mövcud deyil', openText: 'Открыть', }, + MuiAlert: { + closeText: 'Bağlamaq', + }, }, }; @@ -56,6 +59,9 @@ export const csCZ = { noOptionsText: 'Žádné možnosti', openText: 'Otevřít', }, + MuiAlert: { + closeText: 'Zavřít', + }, }, }; @@ -78,13 +84,15 @@ export const deDE = { noOptionsText: 'Keine Optionen', openText: 'Öffnen', }, + MuiAlert: { + closeText: 'Schließen', + }, }, }; // default -export const enUS = {}; - -/** +export const enUS = { + /** props: { MuiTablePagination: { backIconButtonText: 'Previous page', @@ -103,8 +111,12 @@ export const enUS = {}; noOptionsText: 'No options', openText: 'Open', }, + MuiAlert: { + closeText: 'Close', + }, }, */ +}; export const esES = { props: { @@ -125,6 +137,9 @@ export const esES = { noOptionsText: 'Sin opciones', openText: 'Abierto', }, + MuiAlert: { + closeText: 'Cerrar', + }, }, }; @@ -147,6 +162,9 @@ export const faIR = { noOptionsText: 'بی‌نتیجه', openText: 'بازکردن', }, + MuiAlert: { + closeText: 'بستن', + }, }, }; @@ -169,6 +187,9 @@ export const frFR = { noOptionsText: 'Pas de résultats', openText: 'Ouvrir', }, + MuiAlert: { + closeText: 'Fermer', + }, }, }; @@ -192,6 +213,9 @@ export const idID = { noOptionsText: 'Tidak ada opsi', openText: 'Buka', }, + MuiAlert: { + closeText: 'Tutup', + }, }, }; @@ -214,6 +238,9 @@ export const itIT = { noOptionsText: 'Nessuna opzione', openText: 'Apri', }, + MuiAlert: { + closeText: 'Chiudi', + }, }, }; @@ -236,6 +263,9 @@ export const jaJP = { noOptionsText: '結果がありません', openText: '開いた', }, + MuiAlert: { + closeText: '閉じる', + }, }, }; @@ -280,6 +310,9 @@ export const nlNL = { noOptionsText: 'Geen opties', openText: 'Openen', }, + MuiAlert: { + closeText: 'Sluiten', + }, }, }; @@ -313,6 +346,9 @@ export const plPL = { noOptionsText: 'Brak opcji', openText: 'Otwórz', }, + MuiAlert: { + closeText: 'Zamknij', + }, }, }; @@ -335,6 +371,9 @@ export const ptBR = { noOptionsText: 'Sem opções', openText: 'Abrir', }, + MuiAlert: { + closeText: 'Fechar', + }, }, }; @@ -379,6 +418,9 @@ export const roRO = { noOptionsText: 'Nicio opțiune', openText: 'Deschide', }, + MuiAlert: { + closeText: 'Închide', + }, }, }; @@ -412,6 +454,9 @@ export const ruRU = { noOptionsText: 'Нет доступных вариантов', openText: 'Открыть', }, + MuiAlert: { + closeText: 'Закрыть', + }, }, }; @@ -442,6 +487,9 @@ export const skSK = { noOptionsText: 'Žiadne možnosti', openText: 'Otvoriť', }, + MuiAlert: { + closeText: 'Zavrieť', + }, }, }; @@ -464,6 +512,9 @@ export const svSE = { noOptionsText: 'Inga alternativ', openText: 'Öppen', }, + MuiAlert: { + closeText: 'Stäng', + }, }, }; @@ -487,6 +538,9 @@ export const trTR = { noOptionsText: 'Seçenek yok', openText: 'Aç', }, + MuiAlert: { + closeText: 'Kapat', + }, }, }; @@ -520,6 +574,9 @@ export const ukUA = { noOptionsText: 'Немає варіантів', openText: 'Розгорнути', }, + MuiAlert: { + closeText: 'Згорнути', + }, }, }; @@ -542,5 +599,8 @@ export const zhCN = { noOptionsText: '没有选择', openText: '打开', }, + MuiAlert: { + closeText: '关', + }, }, }; diff --git a/packages/material-ui/src/styles/createPalette.js b/packages/material-ui/src/styles/createPalette.js index bbcb4cfaeb41bd..32db973fe4c7b2 100644 --- a/packages/material-ui/src/styles/createPalette.js +++ b/packages/material-ui/src/styles/createPalette.js @@ -4,7 +4,7 @@ import grey from '../colors/grey'; import indigo from '../colors/indigo'; import pink from '../colors/pink'; import red from '../colors/red'; -import amber from '../colors/amber'; +import orange from '../colors/orange'; import blue from '../colors/blue'; import green from '../colors/green'; import { darken, getContrastRatio, lighten } from './colorManipulator'; @@ -98,9 +98,9 @@ export default function createPalette(palette) { dark: red[700], }, warning = { - light: amber[300], - main: amber[500], - dark: amber[700], + light: orange[300], + main: orange[500], + dark: orange[700], }, info = { light: blue[300], From ee4651265378668532acdc2e39cb9f24d9273573 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E9=B9=85=E9=B9=85=E9=B9=85?= Date: Fri, 3 Jan 2020 18:30:42 +0800 Subject: [PATCH 15/15] [docs] Improve theme.breakpoints description (#19065) --- docs/src/pages/customization/breakpoints/breakpoints.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/pages/customization/breakpoints/breakpoints.md b/docs/src/pages/customization/breakpoints/breakpoints.md index 8f8c9072a7795f..0556e0235bce94 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints.md +++ b/docs/src/pages/customization/breakpoints/breakpoints.md @@ -98,7 +98,7 @@ In the following demo, we change the rendered DOM element (*em*, u, ~~del #### Returns -`media query`: A media query string ready to be used with JSS. +`media query`: A media query string ready to be used with most styling solutions, which matches screen widths greater than and including the screen size given by the breakpoint key. #### Examples @@ -123,7 +123,7 @@ const styles = theme => ({ #### Returns -`media query`: A media query string ready to be used with JSS, which matches screen widths less than and including the screen size given by the breakpoint key. +`media query`: A media query string ready to be used with most styling solutions, which matches screen widths less than and including the screen size given by the breakpoint key. #### Examples @@ -149,7 +149,7 @@ const styles = theme => ({ #### Returns -`media query`: A media query string ready to be used with JSS, which matches screen widths greater than and including the screen size given by the breakpoint key. +`media query`: A media query string ready to be used with most styling solutions, which matches screen widths including the screen size given by the breakpoint key. #### Examples @@ -176,7 +176,7 @@ const styles = theme => ({ #### Returns -`media query`: A media query string ready to be used with JSS, which matches screen widths greater than the screen size given by the breakpoint key in the first argument and less than the the screen size given by the breakpoint key in the second argument. +`media query`: A media query string ready to be used with most styling solutions, which matches screen widths greater than the screen size given by the breakpoint key in the first argument and less than the the screen size given by the breakpoint key in the second argument. #### Examples