diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md index 065574e08f03dd..dfb5b62f72c03f 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -18,7 +18,7 @@ It's created using the `experimentalStyled()` function of `@material-ui/core/sty ## The sx prop -All system properties are available via the `sx` prop. This property allows you to specify any CSS rules you may need, in addition to the ones already available as part of the system. Here is an example of how you can use it: +All system properties are available via the `sx` prop. In addition, this prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it: {{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }} diff --git a/docs/src/pages/components/menus/menus.md b/docs/src/pages/components/menus/menus.md index 1f11f0fc311d52..b4df60a8ca4194 100644 --- a/docs/src/pages/components/menus/menus.md +++ b/docs/src/pages/components/menus/menus.md @@ -24,7 +24,7 @@ Choosing an option should immediately ideally commit the option and close the me {{"demo": "pages/components/menus/SimpleMenu.js"}} -## Selected menus +## Selected menu If used for item selection, when opened, simple menus attempt to vertically align the currently selected menu item with the anchor element, and the initial focus will be placed on the selected menu item. @@ -33,7 +33,7 @@ To use a selected menu item without impacting the initial focus or the vertical {{"demo": "pages/components/menus/SimpleListMenu.js"}} -## Menu positioning +## Positioned menu Because the `Menu` component uses the `Popover` component to position itself, you can use the same [positioning props](/components/popover/#anchor-playground) to position it. For instance, you can display the menu below the anchor: @@ -50,7 +50,7 @@ The primary responsibility of the `MenuList` component is to handle the focus. {{"demo": "pages/components/menus/MenuListComposition.js", "bg": true}} -## Customized menus +## Customized menu Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). @@ -62,7 +62,7 @@ You can use the same list composition features with the `MenuItem` component: 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/menu). -## Max height menus +## Max height menu If the height of a menu prevents all menu items from being displayed, the menu can scroll internally. diff --git a/docs/src/pages/components/rating/rating.md b/docs/src/pages/components/rating/rating.md index 50d3d99f992131..1b66276c0d93ce 100644 --- a/docs/src/pages/components/rating/rating.md +++ b/docs/src/pages/components/rating/rating.md @@ -53,7 +53,7 @@ The accessibility of this component relies on: - Labels for the radio buttons containing actual text (“1 Star”, “2 Stars”, …). Be sure to provide a suitable function to the `getLabelText` prop when the page is in a language other than English. You can use the [included locales](https://material-ui.com/guides/localization/), or provide your own. - A visually distinct appearance for the rating icons. - By default, the rating component uses both a difference of color and shape (filled and empty icons)to indicate the value. In the event that you are using color as the only means to indicate the value, the information should also be also displayed as text, as in this demo. This is important to match [success Criterion 1.4.1](https://www.w3.org/TR/WCAG21/#use-of-color) of WCAG2.1. + By default, the rating component uses both a difference of color and shape (filled and empty icons) to indicate the value. In the event that you are using color as the only means to indicate the value, the information should also be also displayed as text, as in this demo. This is important to match [success Criterion 1.4.1](https://www.w3.org/TR/WCAG21/#use-of-color) of WCAG2.1. {{"demo": "pages/components/rating/TextRating.js"}} diff --git a/docs/src/pages/components/tables/tables.md b/docs/src/pages/components/tables/tables.md index 73c93c4a476d97..700532e9dadc7f 100644 --- a/docs/src/pages/components/tables/tables.md +++ b/docs/src/pages/components/tables/tables.md @@ -2,6 +2,7 @@ title: React Table component components: Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel githubLabel: 'component: Table' +waiAria: https://www.w3.org/TR/wai-aria-practices/#table materialDesign: https://material.io/components/data-tables --- @@ -9,15 +10,13 @@ materialDesign: https://material.io/components/data-tables

Tables display sets of data. They can be fully customized.

-Tables display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards. - -Tables can include: +Tables display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards. They can include: - A corresponding visualization - Navigation - Tools to query and manipulate data -When including tools, they should be placed directly above or below the table. +{{"component": "modules/components/ComponentLinkHeader.js"}} ## Basic table @@ -25,6 +24,14 @@ A simple example with no frills. {{"demo": "pages/components/tables/BasicTable.js", "bg": true}} +## Data table + +The `Table` component has a close mapping to the native `` elements. +This constraint makes building rich data tables challenging. + +The [`DataGrid` component](/components/data-grid/) is designed for use-cases that are focused around handling a large amounts of tabular data. +While it comes with a more rigid structure, in exchange, you gain more powerful features. + ## Dense table A simple example of a dense table with no frills. @@ -39,14 +46,6 @@ The Table has been given a fixed width to demonstrate horizontal scrolling. In o {{"demo": "pages/components/tables/EnhancedTable.js", "bg": true}} -## Data table - -The `Table` component has a close mapping to the native `
` elements. -This constraint makes building rich data tables challenging. - -The [`DataGrid` component](/components/data-grid/) is designed for use-cases that are focused around handling a large amounts of tabular data. -While it comes with a more rigid structure, in exchange, you gain more powerful features. - ## Customized tables Here is an example of customizing the component. You can learn more about this in the diff --git a/docs/src/pages/components/tree-view/BarTreeView.tsx b/docs/src/pages/components/tree-view/BarTreeView.tsx index eeb07879da41f9..deeb33c2dd54cc 100644 --- a/docs/src/pages/components/tree-view/BarTreeView.tsx +++ b/docs/src/pages/components/tree-view/BarTreeView.tsx @@ -6,7 +6,7 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight'; import TreeItem, { TreeItemProps, useTreeItem, - ContentProps, + TreeItemContentProps, } from '@material-ui/lab/TreeItem'; import clsx from 'clsx'; import Typography from '@material-ui/core/Typography'; @@ -88,7 +88,7 @@ const useContentStyles = makeStyles((theme) => ); const CustomContent = React.forwardRef(function CustomContent( - props: ContentProps, + props: TreeItemContentProps, ref, ) { const { diff --git a/docs/src/pages/components/tree-view/IconExpansionTreeView.tsx b/docs/src/pages/components/tree-view/IconExpansionTreeView.tsx index a35521ebb4c3cb..d8ca72d6cd341d 100644 --- a/docs/src/pages/components/tree-view/IconExpansionTreeView.tsx +++ b/docs/src/pages/components/tree-view/IconExpansionTreeView.tsx @@ -6,7 +6,7 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight'; import TreeItem, { TreeItemProps, useTreeItem, - ContentProps, + TreeItemContentProps, } from '@material-ui/lab/TreeItem'; import clsx from 'clsx'; import Typography from '@material-ui/core/Typography'; @@ -20,7 +20,7 @@ const useStyles = makeStyles({ }); const CustomContent = React.forwardRef(function CustomContent( - props: ContentProps, + props: TreeItemContentProps, ref, ) { const { diff --git a/docs/src/pages/guides/localization/localization.md b/docs/src/pages/guides/localization/localization.md index 17561f9d6fb0aa..be204d2f9c824e 100644 --- a/docs/src/pages/guides/localization/localization.md +++ b/docs/src/pages/guides/localization/localization.md @@ -78,7 +78,7 @@ You can [find the source](https://github.com/mui-org/material-ui/blob/next/packa To create your own translation, or to customize the English text, copy this file to your project, make any changes needed and import the locale from there. Please do consider contributing new translations back to Material-UI by opening a pull request. -However, Material-UI aims to support the [100 most popular locales](https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers), we might not accept contributions for locales that are not frequently used, for instance `gl-ES` that has "only" 2.5 million native speakers. +However, Material-UI aims to support the [100 most common](https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers) [locales](https://www.ethnologue.com/guides/ethnologue200), we might not accept contributions for locales that are not frequently used, for instance `gl-ES` that has "only" 2.5 million native speakers. ## RTL Support diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index ba87176781ac18..3c603422120914 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -132,13 +132,13 @@ The following changes are supported by the adapter. Before: - ``` + ```js theme.spacing(2) => 16 ``` After: - ``` + ```js theme.spacing(2) => '16px' ``` diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts b/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts index aa2fc1747a4b8e..353a2bdf95b927 100644 --- a/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts +++ b/packages/material-ui-lab/src/TreeItem/TreeItem.d.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { InternalStandardProps as StandardProps } from '@material-ui/core'; import { TransitionProps } from '@material-ui/core/transitions'; -import { ContentProps } from './TreeItemContent'; +import { TreeItemContentProps } from './TreeItemContent'; export interface TreeItemProps extends StandardProps, 'onFocus'> { @@ -40,7 +40,7 @@ export interface TreeItemProps * The component used for the content node. * @default TreeItemContent */ - ContentComponent?: React.ComponentType; + ContentComponent?: React.ComponentType; /** * Props applied to ContentComponent */ diff --git a/packages/material-ui-lab/src/TreeItem/TreeItemContent.d.ts b/packages/material-ui-lab/src/TreeItem/TreeItemContent.d.ts index 97a7b53630cee1..d5b1baa0a0a8d1 100644 --- a/packages/material-ui-lab/src/TreeItem/TreeItemContent.d.ts +++ b/packages/material-ui-lab/src/TreeItem/TreeItemContent.d.ts @@ -1,7 +1,7 @@ import { InternalStandardProps as StandardProps } from '@material-ui/core'; import * as React from 'react'; -export interface ContentProps extends StandardProps> { +export interface TreeItemContentProps extends StandardProps> { /** * Override or extend the styles applied to the component. */ @@ -43,4 +43,4 @@ export interface ContentProps extends StandardProps; +export type TreeItemContentClassKey = keyof NonNullable; diff --git a/test/regressions/index.js b/test/regressions/index.js index 402b3bf8fd58e1..b742dc2c4b3863 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -50,28 +50,28 @@ const blacklist = [ 'docs-components-drawers/SwipeableTemporaryDrawer.png', // Needs interaction 'docs-components-drawers/TemporaryDrawer.png', // Needs interaction 'docs-components-floating-action-button/FloatingActionButtonZoom.png', // Needs interaction - 'docs-components-image-list', // Image don't load 'docs-components-grid/InteractiveGrid.png', // Redux isolation 'docs-components-grid/SpacingGrid.png', // Needs interaction 'docs-components-hidden', // Need to dynamically resize to test + 'docs-components-image-list', // Image don't load 'docs-components-material-icons/synonyms.png', // No component 'docs-components-menus', // Need interaction + 'docs-components-modal/KeepMountedModal.png', // Needs interaction 'docs-components-modal/SimpleModal.png', // Needs interaction 'docs-components-modal/SpringModal.png', // Needs interaction 'docs-components-modal/TransitionsModal.png', // Needs interaction - 'docs-components-modal/KeepMountedModal.png', // Needs interaction 'docs-components-no-ssr/FrameDeferring.png', // Needs interaction 'docs-components-popover/AnchorPlayground.png', // Redux isolation 'docs-components-popover/MouseOverPopover.png', // Needs interaction 'docs-components-popover/PopoverPopupState.png', // Needs interaction 'docs-components-popover/SimplePopover.png', // Needs interaction - 'docs-components-popper/VirtualElementPopper.png', // Needs interaction 'docs-components-popper/PopperPopupState.png', // Needs interaction 'docs-components-popper/PositionedPopper.png', // Needs interaction 'docs-components-popper/ScrollPlayground.png', // Redux isolation 'docs-components-popper/SimplePopper.png', // Needs interaction 'docs-components-popper/SpringPopper.png', // Needs interaction 'docs-components-popper/TransitionsPopper.png', // Needs interaction + 'docs-components-popper/VirtualElementPopper.png', // Needs interaction 'docs-components-portal/SimplePortal.png', // Needs interaction 'docs-components-progress', // Flaky 'docs-components-selects/ControlledOpenSelect.png', // Needs interaction @@ -94,16 +94,21 @@ const blacklist = [ 'docs-components-steppers/HorizontalNonLinearStepper.png', // Redundant 'docs-components-steppers/SwipeableTextMobileStepper.png', // Flaky image loading 'docs-components-steppers/TextMobileStepper.png', // Flaky image loading + 'docs-components-tabs/AccessibleTabs.png', // Need interaction 'docs-components-textarea-autosize', // Superseded by a dedicated regression test 'docs-components-tooltips', // Needs interaction 'docs-components-transitions', // Needs interaction + 'docs-components-trap-focus', // Need interaction 'docs-components-tree-view/ControlledTreeView.png', // Redundant 'docs-components-tree-view/CustomizedTreeView.png', // Flaky + 'docs-components-tree-view/IconExpansionTreeView.png', // Need interaction + 'docs-components-tree-view/MultiSelectTreeView.png', // Need interaction 'docs-components-use-media-query', // Need to dynamically resize to test 'docs-customization-breakpoints', // Need to dynamically resize to test 'docs-customization-color', // Escape viewport 'docs-customization-default-theme', // Redux isolation 'docs-customization-density/DensityTool.png', // Redux isolation + 'docs-customization-transitions/TransitionHover.png', // Need interaction 'docs-customization-typography/ResponsiveFontSizesChart.png', 'docs-discover-more-languages', // No public components 'docs-discover-more-showcase', // No public components @@ -125,6 +130,7 @@ const blacklist = [ 'docs-landing', // Mostly images, redundant 'docs-production-error', // No components, page for DX 'docs-styles-advanced', // Redudant + 'docs-styles-basics/StressTest.png', // Need interaction 'docs-system-borders', // Unit tests are enough 'docs-system-display', // Unit tests are enough 'docs-system-flexbox', // Unit tests are enough