From 49ca55513414029215e8baa3e9c0708566fe4103 Mon Sep 17 00:00:00 2001 From: Hossein Soltanloo Date: Tue, 5 Nov 2019 23:19:11 +0330 Subject: [PATCH 01/17] Add new props to accept custom titles for Autocomplete buttons --- docs/pages/api/autocomplete.md | 6 ++++++ .../src/Autocomplete/Autocomplete.d.ts | 8 ++++++++ .../src/Autocomplete/Autocomplete.js | 17 +++++++++++++++++ 3 files changed, 31 insertions(+) diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index d626ef39652cef..4181b753f1c9d2 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -64,8 +64,14 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | renderGroup | func | | Render the group.

**Signature:**
`function(option: any) => ReactNode`
*option:* The group to render. | | renderInput * | func | | Render the input.

**Signature:**
`function(params: object) => ReactNode`
*params:* null | | renderOption | func | | Render the option, use `getOptionLabel` by default.

**Signature:**
`function(option: any, state: object) => ReactNode`
*option:* The option to render.
*state:* The state of the component. | +<<<<<<< HEAD | renderTags | func | | Render the selected value.

**Signature:**
`function(value: any, getTagProps: function) => ReactNode`
*value:* The `value` provided to the component.
*getTagProps:* A tag props getter. | | value | any | | The value of the autocomplete. | +======= +| renderTags | func | | Render the selected value.

**Signature:**
`function(value: any) => ReactNode`
*value:* The `value` provided to the component. | +| titles | { clearPopup: string, closePopup: string, openPopup: string } | { openPopup: 'Open popup', closePopup: 'Close popup', clearPopup: 'Clear',} | Titles to display when hovering the arrow or clear buttons. | +| value | any | | The input value. | +>>>>>>> Add new props to accept custom titles for Autocomplete buttons The `ref` is forwarded to the root element. diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index d9d07a7a96dcee..9e0db9f3d6c5ef 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts @@ -113,6 +113,14 @@ export interface AutocompleteProps * @returns {ReactNode} */ renderTags?: (value: any, getTagProps: GetTagProps) => React.ReactNode; + /** + * Titles to display when hovering the arrow or clear buttons. + */ + titles?: { + openPopup: string; + closePopup: string; + clearPopup: string; + }; } export type AutocompleteClassKey = diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 3b1fe036856910..31a910efa18959 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -200,6 +200,11 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { renderInput, renderOption: renderOptionProp, renderTags, + titles = { + openPopup: 'Open popup', + closePopup: 'Close popup', + clearPopup: 'Clear', + }, value: valueProp, ...other } = props; @@ -596,7 +601,19 @@ Autocomplete.propTypes = { */ renderTags: PropTypes.func, /** +<<<<<<< HEAD * The value of the autocomplete. +======= + * Titles to display when hovering the arrow or clear buttons. + */ + titles: PropTypes.shape({ + clearPopup: PropTypes.string.isRequired, + closePopup: PropTypes.string.isRequired, + openPopup: PropTypes.string.isRequired, + }), + /** + * The input value. +>>>>>>> Add new props to accept custom titles for Autocomplete buttons */ value: PropTypes.any, }; From a4341410c9534826e36a3163d6c76b27b6cd91e6 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 11 Nov 2019 00:27:44 +0100 Subject: [PATCH 02/17] Globalization --- docs/pages/api/autocomplete.md | 9 +- docs/pages/api/table-pagination.md | 2 + docs/pages/guides/globalization.js | 14 ++ .../src/modules/components/MarkdownElement.js | 1 - docs/src/modules/components/ThemeContext.js | 137 +++++++------- docs/src/pages.js | 1 + .../pages/components/tables/EnhancedTable.js | 6 - .../pages/components/tables/EnhancedTable.tsx | 6 - .../components/tables/StickyHeadTable.js | 6 - .../components/tables/StickyHeadTable.tsx | 6 - .../pages/customization/theming/theming.md | 3 +- .../src/pages/guides/globalization/Locales.js | 33 ++++ .../pages/guides/globalization/Locales.tsx | 33 ++++ .../guides/globalization/globalization.md | 48 +++++ docs/translations/translations.json | 3 +- .../src/Autocomplete/Autocomplete.d.ts | 20 ++- .../src/Autocomplete/Autocomplete.js | 40 ++--- .../src/Autocomplete/Autocomplete.test.js | 6 +- .../src/TablePagination/TablePagination.js | 22 ++- packages/material-ui/src/locale/index.d.ts | 8 + packages/material-ui/src/locale/index.js | 170 ++++++++++++++++++ .../src/styles/createMuiTheme.d.ts | 2 +- .../material-ui/src/styles/createMuiTheme.js | 41 +++-- .../src/styles/createMuiTheme.test.js | 5 + 24 files changed, 465 insertions(+), 157 deletions(-) create mode 100644 docs/pages/guides/globalization.js create mode 100644 docs/src/pages/guides/globalization/Locales.js create mode 100644 docs/src/pages/guides/globalization/Locales.tsx create mode 100644 docs/src/pages/guides/globalization/globalization.md create mode 100644 packages/material-ui/src/locale/index.d.ts create mode 100644 packages/material-ui/src/locale/index.js diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index 4181b753f1c9d2..7bfda0bf290186 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -29,7 +29,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | autoSelect | bool | false | If `true`, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | clearOnEscape | bool | false | If `true`, clear all values when the user presses escape and the popup is closed. | +| clearText | string | 'Clear' | Text label for the clear icon button. | | closeIcon | node | <CloseIcon fontSize="small" /> | The icon to display in place of the default close icon. | +| closeText | string | 'Close' | Text label for the close popup icon button. | | debug | bool | false | If `true`, the popup will ignore the blur event if the input if filled. You can inspect the popup markup with your browser tools. Consider this option when you need to customize the component. | | defaultValue | any | | The default input value. Use when the component is not controlled. | | disableClearable | bool | false | If `true`, the input can't be cleared. | @@ -57,6 +59,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | onInputChange | func | | Callback fired when the input value changes.

**Signature:**
`function(event: object, value: string) => void`
*event:* The event source of the callback.
*value:* null | | 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' | Text label for the open popup icon button. | | options | array | [] | Array of options. | | PaperComponent | elementType | Paper | The component used to render the body of the popup. | | PopperComponent | elementType | Popper | The component used to position the popup. | @@ -64,14 +67,8 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | renderGroup | func | | Render the group.

**Signature:**
`function(option: any) => ReactNode`
*option:* The group to render. | | renderInput * | func | | Render the input.

**Signature:**
`function(params: object) => ReactNode`
*params:* null | | renderOption | func | | Render the option, use `getOptionLabel` by default.

**Signature:**
`function(option: any, state: object) => ReactNode`
*option:* The option to render.
*state:* The state of the component. | -<<<<<<< HEAD | renderTags | func | | Render the selected value.

**Signature:**
`function(value: any, getTagProps: function) => ReactNode`
*value:* The `value` provided to the component.
*getTagProps:* A tag props getter. | | value | any | | The value of the autocomplete. | -======= -| renderTags | func | | Render the selected value.

**Signature:**
`function(value: any) => ReactNode`
*value:* The `value` provided to the component. | -| titles | { clearPopup: string, closePopup: string, openPopup: string } | { openPopup: 'Open popup', closePopup: 'Close popup', clearPopup: 'Clear',} | Titles to display when hovering the arrow or clear buttons. | -| value | any | | The input value. | ->>>>>>> Add new props to accept custom titles for Autocomplete buttons The `ref` is forwarded to the root element. diff --git a/docs/pages/api/table-pagination.md b/docs/pages/api/table-pagination.md index 0d3907117e0e15..da4de808f0402c 100644 --- a/docs/pages/api/table-pagination.md +++ b/docs/pages/api/table-pagination.md @@ -26,12 +26,14 @@ A `TableCell` based component for placing inside `TableFooter` for pagination. |:-----|:-----|:--------|:------------| | ActionsComponent | elementType | TablePaginationActions | The component used for displaying the actions. Either a string to use a DOM element or a component. | | backIconButtonProps | object | | Props applied to the back arrow [`IconButton`](/api/icon-button/) component. | +| backIconButtonText | string | 'Previous page' | Text label for the back arrow icon button. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | component | elementType | TableCell | The component used for the root node. Either a string to use a DOM element or a component. | | count * | number | | The total number of rows. | | labelDisplayedRows | func | ({ from, to, count }) =>`${from}-${to === -1 ? count : to} of ${count}` | Customize the displayed rows label. | | labelRowsPerPage | node | 'Rows per page:' | Customize the rows per page label. Invoked with a `{ from, to, count, page }` object. | | nextIconButtonProps | object | | Props applied to the next arrow [`IconButton`](/api/icon-button/) element. | +| nextIconButtonText | string | 'Next page' | Text label for the next arrow icon button. | | onChangePage * | func | | Callback fired when the page is changed.

**Signature:**
`function(event: object, page: number) => void`
*event:* The event source of the callback.
*page:* The page selected. | | onChangeRowsPerPage | func | | Callback fired when the number of rows per page is changed.

**Signature:**
`function(event: object) => void`
*event:* The event source of the callback. | | page * | number | | The zero-based index of the current page. | diff --git a/docs/pages/guides/globalization.js b/docs/pages/guides/globalization.js new file mode 100644 index 00000000000000..46530830ba1b8e --- /dev/null +++ b/docs/pages/guides/globalization.js @@ -0,0 +1,14 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; + +const req = require.context('docs/src/pages/guides/globalization', false, /\.(md|js|tsx)$/); +const reqSource = require.context( + '!raw-loader!../../src/pages/guides/globalization', + false, + /\.(js|tsx)$/, +); +const reqPrefix = 'pages/guides/globalization'; + +export default function Page() { + return ; +} diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 5e02f77131e33d..e0b611f2431534 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -215,7 +215,6 @@ const styles = theme => ({ }, '& table': { width: '100%', - display: 'block', overflowX: 'auto', WebkitOverflowScrolling: 'touch', // iOS momentum scrolling. borderCollapse: 'collapse', diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js index 383a47d90482db..27b9fac1d1392a 100644 --- a/docs/src/modules/components/ThemeContext.js +++ b/docs/src/modules/components/ThemeContext.js @@ -5,11 +5,23 @@ import { createMuiTheme, darken, } from '@material-ui/core/styles'; +import { useSelector } from 'react-redux'; import useMediaQuery from '@material-ui/core/useMediaQuery'; +import { enUS, zhCN, ruRU, ptBR, esES, frFR, deDE, jaJP } from '@material-ui/core/locale'; import { blue, pink } from '@material-ui/core/colors'; import { getCookie } from 'docs/src/modules/utils/helpers'; import { darkTheme, setPrismTheme } from 'docs/src/modules/components/prism'; -import deepmerge from 'deepmerge'; + +const languageMap = { + en: enUS, + zh: zhCN, + ru: ruRU, + pt: ptBR, + es: esES, + fr: frFR, + de: deDE, + ja: jaJP, +}; export const themeColor = blue[700]; @@ -20,72 +32,59 @@ const themeInitialOptions = { spacing: 8, // spacing unit }; -/** - * @typedef {import('@material-ui/core/src/styles/createMuiTheme').ThemeOptions} ThemeOptions - * - * - * @param {ThemeOptions} themeOptions - * @returns {ThemeOptions} - */ -function usingHighDensity(themeOptions) { - return deepmerge(themeOptions, { - props: { - MuiButton: { - size: 'small', - }, - MuiFilledInput: { - margin: 'dense', - }, - MuiFormControl: { - margin: 'dense', - }, - MuiFormHelperText: { - margin: 'dense', - }, - MuiIconButton: { - size: 'small', - }, - MuiInputBase: { - margin: 'dense', - }, - MuiInputLabel: { - margin: 'dense', - }, - MuiListItem: { - dense: true, - }, - MuiOutlinedInput: { - margin: 'dense', - }, - MuiFab: { - size: 'small', - }, - MuiTable: { - size: 'small', - }, - MuiTextField: { - margin: 'dense', - }, - MuiToolbar: { - variant: 'dense', - }, +const highDensity = { + props: { + MuiButton: { + size: 'small', }, - overrides: { - MuiIconButton: { - sizeSmall: { - // minimal touch target hit spacing - marginLeft: 4, - marginRight: 4, - padding: 12, - }, + MuiFilledInput: { + margin: 'dense', + }, + MuiFormControl: { + margin: 'dense', + }, + MuiFormHelperText: { + margin: 'dense', + }, + MuiIconButton: { + size: 'small', + }, + MuiInputBase: { + margin: 'dense', + }, + MuiInputLabel: { + margin: 'dense', + }, + MuiListItem: { + dense: true, + }, + MuiOutlinedInput: { + margin: 'dense', + }, + MuiFab: { + size: 'small', + }, + MuiTable: { + size: 'small', + }, + MuiTextField: { + margin: 'dense', + }, + MuiToolbar: { + variant: 'dense', + }, + }, + overrides: { + MuiIconButton: { + sizeSmall: { + // minimal touch target hit spacing + marginLeft: 4, + marginRight: 4, + padding: 12, }, }, - }); -} - -function usingIdentity(themeOptions) { - return themeOptions; -} + }, +}; export const DispatchContext = React.createContext(() => { throw new Error('Forgot to wrap component in ThemeContext.Provider'); @@ -143,6 +142,7 @@ export function ThemeProvider(props) { } }, themeInitialOptions); + const userLanguage = useSelector(state => state.options.userLanguage); const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); const preferredType = prefersDarkMode ? 'dark' : 'light'; const { dense, direction, paletteColors, paletteType = preferredType, spacing } = themeOptions; @@ -173,9 +173,8 @@ export function ThemeProvider(props) { }, [direction]); const theme = React.useMemo(() => { - const themeDecorator = dense ? usingHighDensity : usingIdentity; const nextTheme = createMuiTheme( - themeDecorator({ + { direction, nprogress: { color: paletteType === 'light' ? '#000' : '#fff', @@ -194,7 +193,9 @@ export function ThemeProvider(props) { ...paletteColors, }, spacing, - }), + }, + dense ? highDensity : null, + languageMap[userLanguage], ); nextTheme.palette.background.level2 = @@ -204,7 +205,7 @@ export function ThemeProvider(props) { paletteType === 'light' ? '#fff' : nextTheme.palette.grey[900]; return nextTheme; - }, [dense, direction, paletteColors, paletteType, spacing]); + }, [dense, direction, paletteColors, paletteType, spacing, userLanguage]); React.useEffect(() => { // Expose the theme as a global variable so people can play with it. diff --git a/docs/src/pages.js b/docs/src/pages.js index 340c7361c4ca7c..c0e00c687a5d10 100644 --- a/docs/src/pages.js +++ b/docs/src/pages.js @@ -184,6 +184,7 @@ const pages = [ { pathname: '/guides/migration-v3', title: 'Migration From v3' }, { pathname: '/guides/migration-v0x', title: 'Migration From v0.x' }, { pathname: '/guides/testing' }, + { pathname: '/guides/globalization' }, { pathname: '/guides/right-to-left', title: 'Right-to-left' }, { pathname: '/guides/flow' }, ], diff --git a/docs/src/pages/components/tables/EnhancedTable.js b/docs/src/pages/components/tables/EnhancedTable.js index f1517a71619ec5..639b2c2ced4adf 100644 --- a/docs/src/pages/components/tables/EnhancedTable.js +++ b/docs/src/pages/components/tables/EnhancedTable.js @@ -342,12 +342,6 @@ export default function EnhancedTable() { count={rows.length} rowsPerPage={rowsPerPage} page={page} - backIconButtonProps={{ - 'aria-label': 'previous page', - }} - nextIconButtonProps={{ - 'aria-label': 'next page', - }} onChangePage={handleChangePage} onChangeRowsPerPage={handleChangeRowsPerPage} /> diff --git a/docs/src/pages/components/tables/EnhancedTable.tsx b/docs/src/pages/components/tables/EnhancedTable.tsx index c210ca5a84fb1d..0af02705ca14b9 100644 --- a/docs/src/pages/components/tables/EnhancedTable.tsx +++ b/docs/src/pages/components/tables/EnhancedTable.tsx @@ -370,12 +370,6 @@ export default function EnhancedTable() { count={rows.length} rowsPerPage={rowsPerPage} page={page} - backIconButtonProps={{ - 'aria-label': 'previous page', - }} - nextIconButtonProps={{ - 'aria-label': 'next page', - }} onChangePage={handleChangePage} onChangeRowsPerPage={handleChangeRowsPerPage} /> diff --git a/docs/src/pages/components/tables/StickyHeadTable.js b/docs/src/pages/components/tables/StickyHeadTable.js index 3890ed7999c591..3c53bc6fa4e06d 100644 --- a/docs/src/pages/components/tables/StickyHeadTable.js +++ b/docs/src/pages/components/tables/StickyHeadTable.js @@ -122,12 +122,6 @@ export default function StickyHeadTable() { count={rows.length} rowsPerPage={rowsPerPage} page={page} - backIconButtonProps={{ - 'aria-label': 'previous page', - }} - nextIconButtonProps={{ - 'aria-label': 'next page', - }} onChangePage={handleChangePage} onChangeRowsPerPage={handleChangeRowsPerPage} /> diff --git a/docs/src/pages/components/tables/StickyHeadTable.tsx b/docs/src/pages/components/tables/StickyHeadTable.tsx index e2ae21519a8910..dfa5dece803272 100644 --- a/docs/src/pages/components/tables/StickyHeadTable.tsx +++ b/docs/src/pages/components/tables/StickyHeadTable.tsx @@ -138,12 +138,6 @@ export default function StickyHeadTable() { count={rows.length} rowsPerPage={rowsPerPage} page={page} - backIconButtonProps={{ - 'aria-label': 'previous page', - }} - nextIconButtonProps={{ - 'aria-label': 'next page', - }} onChangePage={handleChangePage} onChangeRowsPerPage={handleChangeRowsPerPage} /> diff --git a/docs/src/pages/customization/theming/theming.md b/docs/src/pages/customization/theming/theming.md index 72a901f8c078b0..9e04ed98e4f1b1 100644 --- a/docs/src/pages/customization/theming/theming.md +++ b/docs/src/pages/customization/theming/theming.md @@ -64,13 +64,14 @@ The main point to understand is that the injected CSS is cached with the followi ## API -### `createMuiTheme(options) => theme` +### `createMuiTheme(options, ...args) => theme` Generate a theme base on the options received. #### Arguments 1. `options` (*Object*): Takes an incomplete theme object and adds the missing parts. +2. `...args` (*Array*): Deep merge the arguments with the about to be returned theme. #### Returns diff --git a/docs/src/pages/guides/globalization/Locales.js b/docs/src/pages/guides/globalization/Locales.js new file mode 100644 index 00000000000000..331435fb25a293 --- /dev/null +++ b/docs/src/pages/guides/globalization/Locales.js @@ -0,0 +1,33 @@ +import React from 'react'; +import TablePagination from '@material-ui/core/TablePagination'; +import Rating from '@material-ui/lab/Rating'; +import Autocomplete from '@material-ui/lab/Autocomplete'; +import TextField from '@material-ui/core/TextField'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { zhCN } from '@material-ui/core/locale'; + +const theme = createMuiTheme({}, zhCN); + +export default function Locales() { + return ( +
+ + {}} + /> + ( + + )} + /> + + +
+ ); +} diff --git a/docs/src/pages/guides/globalization/Locales.tsx b/docs/src/pages/guides/globalization/Locales.tsx new file mode 100644 index 00000000000000..331435fb25a293 --- /dev/null +++ b/docs/src/pages/guides/globalization/Locales.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import TablePagination from '@material-ui/core/TablePagination'; +import Rating from '@material-ui/lab/Rating'; +import Autocomplete from '@material-ui/lab/Autocomplete'; +import TextField from '@material-ui/core/TextField'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { zhCN } from '@material-ui/core/locale'; + +const theme = createMuiTheme({}, zhCN); + +export default function Locales() { + return ( +
+ + {}} + /> + ( + + )} + /> + + +
+ ); +} diff --git a/docs/src/pages/guides/globalization/globalization.md b/docs/src/pages/guides/globalization/globalization.md new file mode 100644 index 00000000000000..abf715a50d6ee1 --- /dev/null +++ b/docs/src/pages/guides/globalization/globalization.md @@ -0,0 +1,48 @@ +# Globalization + +

Globalization is a process which combines the translation of component messages (localization) with their adaptation to specific cultures (internationalization).

+ +The default locale of Material-UI is English (United States). If you want to use other locales, you can follow the instructions below. + +## Locale text + +Use the theme to configure the locale text globally + +```jsx +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { zhCN } from '@material-ui/core/locale'; + +const theme = createMuiTheme({ + palette: { + primary: { main: '#1976d2' }, + }, +}, zhCN); + + + + +``` + +### Supported locales + +| Locale | BCP 47 language tag | Import name +|:-------|:---------|:---------| +| Chinese (Simplified) | zh-CN | `zhCN` | +| English (United States) | en-US | `enUS` | +| French | fr-FR | `frFR` | +| German | de-DE | `deDE` | +| Japanese | ja-JP | `jaJP` | +| Portuguese (Brazil) | pt-BR | `ptBR` | +| Russian | ru-RU | `ruRU` | +| Spanish | es-ES | `esES` | + +You can find the [sources](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/locale/index.js) in the GitHub repository. + +### Example + +{{"demo": "pages/guides/globalization/Locales.js", "defaultCodeOpen": false}} + +## RTL Support + +Right-to-left languages are Arabic, Hebrew, and others. +Follow [the guide](/guides/right-to-left/) to use them. diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 28d9b53a0b05fa..dcad523f11aa6f 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -221,6 +221,7 @@ "/components/rating": "Rating", "/components/skeleton": "Skeleton", "/components/tree-view": "Tree View", - "/customization/density": "Density" + "/customization/density": "Density", + "/guides/globalization": "Globalization" } } diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index 9e0db9f3d6c5ef..23557dac8ab205 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts @@ -46,6 +46,14 @@ export interface AutocompleteProps * The icon to display in place of the default close icon. */ closeIcon?: React.ReactNode; + /** + * Text label for the clear icon button. + */ + clearText?: string; + /** + * Text label for the close popup icon button. + */ + closeText?: string; /** * If `true`, the input will be disabled. */ @@ -71,6 +79,10 @@ export interface AutocompleteProps * Text to display when there are no options. */ noOptionsText?: React.ReactNode; + /** + * Text label for the open popup icon button. + */ + openText?: string; /** * The component used to render the body of the popup. */ @@ -113,14 +125,6 @@ export interface AutocompleteProps * @returns {ReactNode} */ renderTags?: (value: any, getTagProps: GetTagProps) => React.ReactNode; - /** - * Titles to display when hovering the arrow or clear buttons. - */ - titles?: { - openPopup: string; - closePopup: string; - clearPopup: string; - }; } export type AutocompleteClassKey = diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 31a910efa18959..c4be4c4f313602 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -164,7 +164,9 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { classes, className, clearOnEscape = false, + clearText = 'Clear', closeIcon = , + closeText = 'Close', debug = false, defaultValue, disableClearable = false, @@ -192,6 +194,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { onInputChange, onOpen, open, + openText = 'Open', options = [], PaperComponent = Paper, PopperComponent: PopperComponentProp = Popper, @@ -200,11 +203,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { renderInput, renderOption: renderOptionProp, renderTags, - titles = { - openPopup: 'Open popup', - closePopup: 'Close popup', - clearPopup: 'Clear', - }, value: valueProp, ...other } = props; @@ -308,8 +306,8 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) { {disableClearable || disabled ? null : ( >>>>>> Add new props to accept custom titles for Autocomplete buttons */ value: PropTypes.any, }; diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js index d64dc05227daff..22dfe7ba53e3c2 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js @@ -123,7 +123,7 @@ describe('', () => { // TODO: computeAccessibleName expect(buttons[0]).to.have.attribute('title', 'Clear'); // TODO: computeAccessibleName - expect(buttons[1]).to.have.attribute('title', 'Open popup'); + expect(buttons[1]).to.have.attribute('title', 'Open'); buttons.forEach(button => { expect(button, 'button is not in tab order').to.have.property('tabIndex', -1); }); @@ -164,7 +164,7 @@ describe('', () => { // TODO: computeAccessibleName expect(buttons[0]).to.have.attribute('title', 'Clear'); // TODO: computeAccessibleName - expect(buttons[1]).to.have.attribute('title', 'Close popup'); + expect(buttons[1]).to.have.attribute('title', 'Close'); buttons.forEach(button => { expect(button, 'button is not in tab order').to.have.property('tabIndex', -1); }); @@ -452,7 +452,7 @@ describe('', () => { renderInput={params => } />, ); - expect(queryByTitle('Open popup').disabled).to.be.true; + expect(queryByTitle('Open').disabled).to.be.true; }); it('should not render the clear button', () => { diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js index 8a9cee2a08af04..cb259930378d1b 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.js +++ b/packages/material-ui/src/TablePagination/TablePagination.js @@ -77,6 +77,7 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) { const { ActionsComponent = TablePaginationActions, backIconButtonProps, + backIconButtonText = 'Previous page', classes, className, colSpan: colSpanProp, @@ -85,6 +86,7 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) { labelDisplayedRows = defaultLabelDisplayedRows, labelRowsPerPage = 'Rows per page:', nextIconButtonProps, + nextIconButtonText = 'Next page', onChangePage, onChangeRowsPerPage, page, @@ -143,9 +145,17 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) { `${from}-${to === -1 ? count : to} of ${count}`, + nextIconButtonText: 'Siguiente página', + }, + MuiRating: { + getLabelText: value => `${value} ${value !== 1 ? 'Sterne' : 'Star'}`, + }, + MuiAutocomplete: { + clearText: 'Klar', + closeText: 'Schließen', + loadingText: 'Wird geladen…', + noOptionsText: 'Keine Optionen', + openText: 'Öffnen', + }, + }, +}; + +// default +export const enUS = {}; + +/** + props: { + MuiTablePagination: { + backIconButtonText: 'Previous page', + labelRowsPerPage: 'Rows per page:', + labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} of ${count}`, + nextIconButtonText: 'Next page', + }, + MuiRating: { + getLabelText: value => `${value} Star${value !== 1 ? 's' : ''}`, + }, + MuiAutocomplete: { + clearText: 'Clear', + closeText: 'Close', + loadingText: 'Loading…', + noOptionsText: 'No options', + openText: 'Open', + }, + }, +*/ + +export const esES = { + props: { + MuiTablePagination: { + backIconButtonText: 'Pagina anterior', + labelRowsPerPage: 'Filas por página:', + labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} of ${count}`, + nextIconButtonText: 'Siguiente página', + }, + MuiRating: { + getLabelText: value => `${value} Estrella${value !== 1 ? 's' : ''}`, + }, + MuiAutocomplete: { + clearText: 'Claro', + closeText: 'Cerrar', + loadingText: 'Cargando…', + noOptionsText: 'Sin opciones', + openText: 'Abierto', + }, + }, +}; + +export const frFR = { + props: { + MuiTablePagination: { + backIconButtonText: 'Page précédente', + labelRowsPerPage: 'Lignes par page :', + labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} sur ${count}`, + nextIconButtonText: 'Page suivante', + }, + MuiRating: { + getLabelText: value => `${value} Etoile${value !== 1 ? 's' : ''}`, + }, + MuiAutocomplete: { + clearText: 'Vider', + closeText: 'Fermer', + loadingText: 'Chargement…', + noOptionsText: 'Pas de résultats', + openText: 'Ouvrir', + }, + }, +}; + +export const jaJP = { + props: { + MuiTablePagination: { + backIconButtonText: '前のページ', + labelRowsPerPage: 'ページごとの行:', + labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} of ${count}`, + nextIconButtonText: '次のページ', + }, + MuiRating: { + getLabelText: value => `${value} ${value !== 1 ? '出演者' : '星'}`, + }, + MuiAutocomplete: { + clearText: 'クリア', + closeText: '閉じる', + loadingText: '積み込み…', + noOptionsText: '結果がありません', + openText: '開いた', + }, + }, +}; + +export const ptBR = { + props: { + MuiTablePagination: { + backIconButtonText: 'Página anterior', + labelRowsPerPage: 'Linhas por página:', + labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} of ${count}`, + nextIconButtonText: 'Próxima página', + }, + MuiRating: { + getLabelText: value => `${value} Estrela${value !== 1 ? 's' : ''}`, + }, + MuiAutocomplete: { + clearText: 'Claro', + closeText: 'Fechar', + loadingText: 'Carregando…', + noOptionsText: 'Sem opções', + openText: 'Abrir', + }, + }, +}; + +export const ruRU = { + props: { + MuiTablePagination: { + backIconButtonText: 'Предыдущая страница', + labelRowsPerPage: 'Строк на страницу:', + labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} of ${count}`, + nextIconButtonText: 'Следующая страница', + }, + MuiRating: { + getLabelText: value => `${value} ${value !== 1 ? 'Звезды' : 'звезда'}`, + }, + MuiAutocomplete: { + clearText: 'чистый', + closeText: 'близко', + loadingText: 'загрузка…', + noOptionsText: 'Нет вариантов', + openText: 'открыто', + }, + }, +}; + +export const zhCN = { + props: { + MuiTablePagination: { + backIconButtonText: '上一页', + labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} 的 ${count}`, + labelRowsPerPage: '每页行数:', + nextIconButtonText: '下一页', + }, + MuiRating: { + getLabelText: value => `${value} 星${value !== 1 ? '星' : ''}`, + }, + MuiAutocomplete: { + clearText: '明确', + closeText: '关', + loadingText: '载入中…', + noOptionsText: '没有选择', + openText: '打开', + }, + }, +}; diff --git a/packages/material-ui/src/styles/createMuiTheme.d.ts b/packages/material-ui/src/styles/createMuiTheme.d.ts index 0f0c49d6ffb151..1a7a0b781733b9 100644 --- a/packages/material-ui/src/styles/createMuiTheme.d.ts +++ b/packages/material-ui/src/styles/createMuiTheme.d.ts @@ -42,4 +42,4 @@ export interface Theme { zIndex: ZIndex; } -export default function createMuiTheme(options?: ThemeOptions): Theme; +export default function createMuiTheme(options?: ThemeOptions, ...args: object[]): Theme; diff --git a/packages/material-ui/src/styles/createMuiTheme.js b/packages/material-ui/src/styles/createMuiTheme.js index 495a8dd9d970db..24a70cdb0a804d 100644 --- a/packages/material-ui/src/styles/createMuiTheme.js +++ b/packages/material-ui/src/styles/createMuiTheme.js @@ -9,12 +9,11 @@ import createSpacing from './createSpacing'; import transitions from './transitions'; import zIndex from './zIndex'; -function createMuiTheme(options = {}) { +function createMuiTheme(options = {}, ...args) { const { breakpoints: breakpointsInput = {}, mixins: mixinsInput = {}, palette: paletteInput = {}, - shadows: shadowsInput, spacing: spacingInput, typography: typographyInput = {}, ...other @@ -24,25 +23,25 @@ function createMuiTheme(options = {}) { const breakpoints = createBreakpoints(breakpointsInput); const spacing = createSpacing(spacingInput); - const muiTheme = { - breakpoints, - direction: 'ltr', - mixins: createMixins(breakpoints, spacing, mixinsInput), - overrides: {}, // Inject custom styles - palette, - props: {}, // Inject custom props - shadows: shadowsInput || shadows, - typography: createTypography(palette, typographyInput), - spacing, - ...deepmerge( - { - shape, - transitions, - zIndex, - }, - other, - ), - }; + let muiTheme = deepmerge( + { + breakpoints, + direction: 'ltr', + mixins: createMixins(breakpoints, spacing, mixinsInput), + overrides: {}, // Inject custom styles + palette, + props: {}, // Provide default props + shadows, + typography: createTypography(palette, typographyInput), + spacing, + shape, + transitions, + zIndex, + }, + other, + ); + + muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme); if (process.env.NODE_ENV !== 'production') { const pseudoClasses = [ diff --git a/packages/material-ui/src/styles/createMuiTheme.test.js b/packages/material-ui/src/styles/createMuiTheme.test.js index 143d0128ba3e74..ffd12ec0b38d81 100644 --- a/packages/material-ui/src/styles/createMuiTheme.test.js +++ b/packages/material-ui/src/styles/createMuiTheme.test.js @@ -116,4 +116,9 @@ describe('createMuiTheme', () => { ); }); }); + + it('deep merges multiple arguments', () => { + const muiTheme = createMuiTheme({}, { foo: 'bar' }); + assert.strictEqual(muiTheme.foo, 'bar'); + }); }); From 7e06b8278dc43e8aaf06b955dd2f526679078499 Mon Sep 17 00:00:00 2001 From: Hossein Soltanloo Date: Tue, 12 Nov 2019 21:33:56 +0330 Subject: [PATCH 03/17] Update packages/material-ui/src/locale/index.js Co-Authored-By: Sebastian Silbermann --- packages/material-ui/src/locale/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/locale/index.js b/packages/material-ui/src/locale/index.js index 90c2dd4b674544..31113a41653a8a 100644 --- a/packages/material-ui/src/locale/index.js +++ b/packages/material-ui/src/locale/index.js @@ -10,7 +10,7 @@ export const deDE = { getLabelText: value => `${value} ${value !== 1 ? 'Sterne' : 'Star'}`, }, MuiAutocomplete: { - clearText: 'Klar', + clearText: 'Leeren', closeText: 'Schließen', loadingText: 'Wird geladen…', noOptionsText: 'Keine Optionen', From 0d75540d2392c3f62cdc4d46c1872ba4d6c8756a Mon Sep 17 00:00:00 2001 From: Hossein Soltanloo Date: Tue, 12 Nov 2019 21:34:06 +0330 Subject: [PATCH 04/17] Update packages/material-ui/src/locale/index.js Co-Authored-By: Sebastian Silbermann --- packages/material-ui/src/locale/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/locale/index.js b/packages/material-ui/src/locale/index.js index 31113a41653a8a..578c5f8cc9c4d4 100644 --- a/packages/material-ui/src/locale/index.js +++ b/packages/material-ui/src/locale/index.js @@ -2,7 +2,7 @@ export const deDE = { props: { MuiTablePagination: { backIconButtonText: 'Nächste Seite', - labelRowsPerPage: 'Filas por página:', + labelRowsPerPage: 'Zeilen pro Seite:', labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} of ${count}`, nextIconButtonText: 'Siguiente página', }, From 0f679a295b785b106bd4f3ea2534b79e975d54d0 Mon Sep 17 00:00:00 2001 From: Hossein Soltanloo Date: Tue, 12 Nov 2019 21:34:51 +0330 Subject: [PATCH 05/17] Update packages/material-ui/src/locale/index.js Co-Authored-By: jaironalves --- packages/material-ui/src/locale/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/locale/index.js b/packages/material-ui/src/locale/index.js index 578c5f8cc9c4d4..0dbd0133054b81 100644 --- a/packages/material-ui/src/locale/index.js +++ b/packages/material-ui/src/locale/index.js @@ -118,7 +118,7 @@ export const ptBR = { getLabelText: value => `${value} Estrela${value !== 1 ? 's' : ''}`, }, MuiAutocomplete: { - clearText: 'Claro', + clearText: 'Limpar', closeText: 'Fechar', loadingText: 'Carregando…', noOptionsText: 'Sem opções', From dba20a90d8b98faf3528ef8798e46838d2421f62 Mon Sep 17 00:00:00 2001 From: Hossein Soltanloo Date: Tue, 12 Nov 2019 21:35:21 +0330 Subject: [PATCH 06/17] Update packages/material-ui/src/locale/index.js Co-Authored-By: Sebastian Silbermann --- packages/material-ui/src/locale/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/locale/index.js b/packages/material-ui/src/locale/index.js index 0dbd0133054b81..25108e8c2a3c36 100644 --- a/packages/material-ui/src/locale/index.js +++ b/packages/material-ui/src/locale/index.js @@ -4,7 +4,7 @@ export const deDE = { backIconButtonText: 'Nächste Seite', labelRowsPerPage: 'Zeilen pro Seite:', labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} of ${count}`, - nextIconButtonText: 'Siguiente página', + nextIconButtonText: 'Nächste Seite', }, MuiRating: { getLabelText: value => `${value} ${value !== 1 ? 'Sterne' : 'Star'}`, From 46917d737690809715c89fdcca36985fad79a8cd Mon Sep 17 00:00:00 2001 From: Hossein Soltanloo Date: Tue, 12 Nov 2019 21:35:28 +0330 Subject: [PATCH 07/17] Update packages/material-ui/src/locale/index.js Co-Authored-By: Sebastian Silbermann --- packages/material-ui/src/locale/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/locale/index.js b/packages/material-ui/src/locale/index.js index 25108e8c2a3c36..3657396ddf8d22 100644 --- a/packages/material-ui/src/locale/index.js +++ b/packages/material-ui/src/locale/index.js @@ -3,7 +3,7 @@ export const deDE = { MuiTablePagination: { backIconButtonText: 'Nächste Seite', labelRowsPerPage: 'Zeilen pro Seite:', - labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} of ${count}`, + labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} von ${count}`, nextIconButtonText: 'Nächste Seite', }, MuiRating: { From dacc53e4beef7bd29cd4074582c34092ae60d3b2 Mon Sep 17 00:00:00 2001 From: Hossein Soltanloo Date: Tue, 12 Nov 2019 21:35:38 +0330 Subject: [PATCH 08/17] Update packages/material-ui/src/locale/index.js Co-Authored-By: jaironalves --- packages/material-ui/src/locale/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/locale/index.js b/packages/material-ui/src/locale/index.js index 3657396ddf8d22..599ba00f62cd2a 100644 --- a/packages/material-ui/src/locale/index.js +++ b/packages/material-ui/src/locale/index.js @@ -111,7 +111,7 @@ export const ptBR = { MuiTablePagination: { backIconButtonText: 'Página anterior', labelRowsPerPage: 'Linhas por página:', - labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} of ${count}`, + labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} de ${count}`, nextIconButtonText: 'Próxima página', }, MuiRating: { From 6546c99aeecd6c528c87d56757eb0437618211a4 Mon Sep 17 00:00:00 2001 From: Hossein Soltanloo Date: Tue, 12 Nov 2019 21:35:48 +0330 Subject: [PATCH 09/17] Update packages/material-ui/src/locale/index.js Co-Authored-By: Takeichi Kanzaki Cabrera --- packages/material-ui/src/locale/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/locale/index.js b/packages/material-ui/src/locale/index.js index 599ba00f62cd2a..6cd6a28e1fb6bb 100644 --- a/packages/material-ui/src/locale/index.js +++ b/packages/material-ui/src/locale/index.js @@ -46,7 +46,7 @@ export const enUS = {}; export const esES = { props: { MuiTablePagination: { - backIconButtonText: 'Pagina anterior', + backIconButtonText: 'Página anterior', labelRowsPerPage: 'Filas por página:', labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} of ${count}`, nextIconButtonText: 'Siguiente página', From cbac7b8798af28ab33a378048709b6b6dc57a9cd Mon Sep 17 00:00:00 2001 From: Hossein Soltanloo Date: Tue, 12 Nov 2019 21:35:56 +0330 Subject: [PATCH 10/17] Update packages/material-ui/src/locale/index.js Co-Authored-By: Takeichi Kanzaki Cabrera --- packages/material-ui/src/locale/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/locale/index.js b/packages/material-ui/src/locale/index.js index 6cd6a28e1fb6bb..c39f5a8c77624e 100644 --- a/packages/material-ui/src/locale/index.js +++ b/packages/material-ui/src/locale/index.js @@ -55,7 +55,7 @@ export const esES = { getLabelText: value => `${value} Estrella${value !== 1 ? 's' : ''}`, }, MuiAutocomplete: { - clearText: 'Claro', + clearText: 'Limpiar', closeText: 'Cerrar', loadingText: 'Cargando…', noOptionsText: 'Sin opciones', From 85f63a2b42f153e8e7a87e1f57a7cb625422f1b5 Mon Sep 17 00:00:00 2001 From: Hossein Soltanloo Date: Tue, 12 Nov 2019 21:36:04 +0330 Subject: [PATCH 11/17] Update packages/material-ui/src/locale/index.js Co-Authored-By: Takeichi Kanzaki Cabrera --- packages/material-ui/src/locale/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/locale/index.js b/packages/material-ui/src/locale/index.js index c39f5a8c77624e..bb211af836095d 100644 --- a/packages/material-ui/src/locale/index.js +++ b/packages/material-ui/src/locale/index.js @@ -48,7 +48,7 @@ export const esES = { MuiTablePagination: { backIconButtonText: 'Página anterior', labelRowsPerPage: 'Filas por página:', - labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} of ${count}`, + labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} de ${count}`, nextIconButtonText: 'Siguiente página', }, MuiRating: { From 6e2658fd66994baa66c10a8649a58b4d66b83fe5 Mon Sep 17 00:00:00 2001 From: Hossein Soltanloo Date: Tue, 12 Nov 2019 22:59:20 +0330 Subject: [PATCH 12/17] Add Persian translations --- docs/src/modules/components/ThemeContext.js | 3 ++- .../guides/globalization/globalization.md | 1 + packages/material-ui/src/locale/index.d.ts | 1 + packages/material-ui/src/locale/index.js | 21 +++++++++++++++++++ 4 files changed, 25 insertions(+), 1 deletion(-) diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js index 27b9fac1d1392a..9ce32289b84bf9 100644 --- a/docs/src/modules/components/ThemeContext.js +++ b/docs/src/modules/components/ThemeContext.js @@ -7,7 +7,7 @@ import { } from '@material-ui/core/styles'; import { useSelector } from 'react-redux'; import useMediaQuery from '@material-ui/core/useMediaQuery'; -import { enUS, zhCN, ruRU, ptBR, esES, frFR, deDE, jaJP } from '@material-ui/core/locale'; +import { enUS, zhCN, faIR, ruRU, ptBR, esES, frFR, deDE, jaJP } from '@material-ui/core/locale'; import { blue, pink } from '@material-ui/core/colors'; import { getCookie } from 'docs/src/modules/utils/helpers'; import { darkTheme, setPrismTheme } from 'docs/src/modules/components/prism'; @@ -15,6 +15,7 @@ import { darkTheme, setPrismTheme } from 'docs/src/modules/components/prism'; const languageMap = { en: enUS, zh: zhCN, + fa: faIR, ru: ruRU, pt: ptBR, es: esES, diff --git a/docs/src/pages/guides/globalization/globalization.md b/docs/src/pages/guides/globalization/globalization.md index abf715a50d6ee1..97d4c09323a3a0 100644 --- a/docs/src/pages/guides/globalization/globalization.md +++ b/docs/src/pages/guides/globalization/globalization.md @@ -33,6 +33,7 @@ const theme = createMuiTheme({ | German | de-DE | `deDE` | | Japanese | ja-JP | `jaJP` | | Portuguese (Brazil) | pt-BR | `ptBR` | +| Persian | fa-IR | `faIR` | | Russian | ru-RU | `ruRU` | | Spanish | es-ES | `esES` | diff --git a/packages/material-ui/src/locale/index.d.ts b/packages/material-ui/src/locale/index.d.ts index f25b780f3c69e1..a4d829c3fa8976 100644 --- a/packages/material-ui/src/locale/index.d.ts +++ b/packages/material-ui/src/locale/index.d.ts @@ -6,3 +6,4 @@ export const jaJP: object; export const ptBR: object; export const ruRU: object; export const zhCN: object; +export const faIR: object; diff --git a/packages/material-ui/src/locale/index.js b/packages/material-ui/src/locale/index.js index bb211af836095d..89c9cd64f991f8 100644 --- a/packages/material-ui/src/locale/index.js +++ b/packages/material-ui/src/locale/index.js @@ -168,3 +168,24 @@ export const zhCN = { }, }, }; + +export const faIR = { + props: { + MuiTablePagination: { + backIconButtonText: 'صفحهٔ قبل', + labelDisplayedRows: ({ from, to, count }) => `${from}-${to === -1 ? count : to} از ${count}`, + labelRowsPerPage: 'تعداد سطرهای هر صفحه:', + nextIconButtonText: 'صفحهٔ بعد', + }, + MuiRating: { + getLabelText: value => `${value} ستاره`, + }, + MuiAutocomplete: { + clearText: 'پاک‌کردن', + closeText: 'بستن', + loadingText: 'در حال بارگذاری…', + noOptionsText: 'بی‌نتیجه', + openText: 'بازکردن', + }, + }, +}; From daaee1d53336d437e5e1cb6614b8f7357c157a78 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 15 Nov 2019 16:12:50 +0100 Subject: [PATCH 13/17] Localization --- docs/pages/guides/{globalization.js => localization.js} | 6 +++--- docs/src/pages.js | 2 +- .../pages/guides/{globalization => localization}/Locales.js | 0 .../guides/{globalization => localization}/Locales.tsx | 0 .../globalization.md => localization/localization.md} | 6 +++--- docs/translations/translations.json | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) rename docs/pages/guides/{globalization.js => localization.js} (58%) rename docs/src/pages/guides/{globalization => localization}/Locales.js (100%) rename docs/src/pages/guides/{globalization => localization}/Locales.tsx (100%) rename docs/src/pages/guides/{globalization/globalization.md => localization/localization.md} (80%) diff --git a/docs/pages/guides/globalization.js b/docs/pages/guides/localization.js similarity index 58% rename from docs/pages/guides/globalization.js rename to docs/pages/guides/localization.js index 46530830ba1b8e..89861be719ea5b 100644 --- a/docs/pages/guides/globalization.js +++ b/docs/pages/guides/localization.js @@ -1,13 +1,13 @@ import React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -const req = require.context('docs/src/pages/guides/globalization', false, /\.(md|js|tsx)$/); +const req = require.context('docs/src/pages/guides/localization', false, /\.(md|js|tsx)$/); const reqSource = require.context( - '!raw-loader!../../src/pages/guides/globalization', + '!raw-loader!../../src/pages/guides/localization', false, /\.(js|tsx)$/, ); -const reqPrefix = 'pages/guides/globalization'; +const reqPrefix = 'pages/guides/localization'; export default function Page() { return ; diff --git a/docs/src/pages.js b/docs/src/pages.js index c0e00c687a5d10..03d0b7dc2d2322 100644 --- a/docs/src/pages.js +++ b/docs/src/pages.js @@ -184,7 +184,7 @@ const pages = [ { pathname: '/guides/migration-v3', title: 'Migration From v3' }, { pathname: '/guides/migration-v0x', title: 'Migration From v0.x' }, { pathname: '/guides/testing' }, - { pathname: '/guides/globalization' }, + { pathname: '/guides/localization' }, { pathname: '/guides/right-to-left', title: 'Right-to-left' }, { pathname: '/guides/flow' }, ], diff --git a/docs/src/pages/guides/globalization/Locales.js b/docs/src/pages/guides/localization/Locales.js similarity index 100% rename from docs/src/pages/guides/globalization/Locales.js rename to docs/src/pages/guides/localization/Locales.js diff --git a/docs/src/pages/guides/globalization/Locales.tsx b/docs/src/pages/guides/localization/Locales.tsx similarity index 100% rename from docs/src/pages/guides/globalization/Locales.tsx rename to docs/src/pages/guides/localization/Locales.tsx diff --git a/docs/src/pages/guides/globalization/globalization.md b/docs/src/pages/guides/localization/localization.md similarity index 80% rename from docs/src/pages/guides/globalization/globalization.md rename to docs/src/pages/guides/localization/localization.md index 97d4c09323a3a0..09f98be10cf70e 100644 --- a/docs/src/pages/guides/globalization/globalization.md +++ b/docs/src/pages/guides/localization/localization.md @@ -1,6 +1,6 @@ -# Globalization +# Localization -

Globalization is a process which combines the translation of component messages (localization) with their adaptation to specific cultures (internationalization).

+

Localization (also referred to as "l10n") is the process of adapting a product or content to a specific locale or market.

The default locale of Material-UI is English (United States). If you want to use other locales, you can follow the instructions below. @@ -41,7 +41,7 @@ You can find the [sources](https://github.com/mui-org/material-ui/blob/master/pa ### Example -{{"demo": "pages/guides/globalization/Locales.js", "defaultCodeOpen": false}} +{{"demo": "pages/guides/localization/Locales.js", "defaultCodeOpen": false}} ## RTL Support diff --git a/docs/translations/translations.json b/docs/translations/translations.json index dcad523f11aa6f..ba05b05f7cf662 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -222,6 +222,6 @@ "/components/skeleton": "Skeleton", "/components/tree-view": "Tree View", "/customization/density": "Density", - "/guides/globalization": "Globalization" + "/guides/localization": "Localization" } } From 8e1f9ad73bc51188884783266cbd48884f9cf5b2 Mon Sep 17 00:00:00 2001 From: Hossein Soltanloo Date: Fri, 15 Nov 2019 21:25:02 +0330 Subject: [PATCH 14/17] Update translations.json --- docs/translations/translations.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/translations/translations.json b/docs/translations/translations.json index ba05b05f7cf662..98c89eb0862f47 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -200,6 +200,7 @@ "/guides/testing": "Testing", "/guides/flow": "Flow", "/guides/right-to-left": "Right-to-left", + "/guides/localization": "Localization", "/discover-more": "Discover More", "/discover-more/showcase": "Showcase", "/discover-more/related-projects": "Related Projects", @@ -221,7 +222,6 @@ "/components/rating": "Rating", "/components/skeleton": "Skeleton", "/components/tree-view": "Tree View", - "/customization/density": "Density", - "/guides/localization": "Localization" + "/customization/density": "Density" } } From 22d296bdf2a72f00f22ef1fe40d166395fc1f0e0 Mon Sep 17 00:00:00 2001 From: Hossein Soltanloo Date: Fri, 15 Nov 2019 21:26:35 +0330 Subject: [PATCH 15/17] Apply suggestions from code review Update Localization and Autocomplete docs Co-Authored-By: Matt --- docs/src/pages/guides/localization/localization.md | 12 +++++++----- .../src/Autocomplete/Autocomplete.d.ts | 6 +++--- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/src/pages/guides/localization/localization.md b/docs/src/pages/guides/localization/localization.md index 09f98be10cf70e..b1bddbb8f9e2d6 100644 --- a/docs/src/pages/guides/localization/localization.md +++ b/docs/src/pages/guides/localization/localization.md @@ -2,11 +2,11 @@

Localization (also referred to as "l10n") is the process of adapting a product or content to a specific locale or market.

-The default locale of Material-UI is English (United States). If you want to use other locales, you can follow the instructions below. +The default locale of Material-UI is English (United States). If you want to use other locales, follow the instructions below. ## Locale text -Use the theme to configure the locale text globally +Use the theme to configure the locale text globally: ```jsx import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; @@ -37,7 +37,9 @@ const theme = createMuiTheme({ | Russian | ru-RU | `ruRU` | | Spanish | es-ES | `esES` | -You can find the [sources](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/locale/index.js) in the GitHub repository. +You can [find the source](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/locale/index.js) in the GitHub repository. + +To create your own translation, or to customise 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.) ### Example @@ -45,5 +47,5 @@ You can find the [sources](https://github.com/mui-org/material-ui/blob/master/pa ## RTL Support -Right-to-left languages are Arabic, Hebrew, and others. -Follow [the guide](/guides/right-to-left/) to use them. +Right-to-left languages such as Arabic or Hebrew are supported. +Follow [this guide](/guides/right-to-left/) to use them. diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index 23557dac8ab205..522553ba8ac737 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts @@ -47,11 +47,11 @@ export interface AutocompleteProps */ closeIcon?: React.ReactNode; /** - * Text label for the clear icon button. + * Override the default text for the *clear* icon button. */ clearText?: string; /** - * Text label for the close popup icon button. + * Override the default text for the *close popup* icon button. */ closeText?: string; /** @@ -80,7 +80,7 @@ export interface AutocompleteProps */ noOptionsText?: React.ReactNode; /** - * Text label for the open popup icon button. + * Override the default text for the *open popup* icon button. */ openText?: string; /** From 28c9e2056f576b8a33e9308aa9e9e3a8b0782b35 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 15 Nov 2019 19:33:47 +0100 Subject: [PATCH 16/17] yarn proptypes --- packages/material-ui-lab/src/Autocomplete/Autocomplete.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index c4be4c4f313602..8073709bdc0c00 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -416,7 +416,7 @@ Autocomplete.propTypes = { */ clearOnEscape: PropTypes.bool, /** - * Text label for the clear icon button. + * Override the default text for the *clear* icon button. */ clearText: PropTypes.string, /** @@ -424,7 +424,7 @@ Autocomplete.propTypes = { */ closeIcon: PropTypes.node, /** - * Text label for the close popup icon button. + * Override the default text for the *close popup* icon button. */ closeText: PropTypes.string, /** @@ -561,7 +561,7 @@ Autocomplete.propTypes = { */ open: PropTypes.bool, /** - * Text label for the open popup icon button. + * Override the default text for the *open popup* icon button. */ openText: PropTypes.string, /** From da38bff4c27361ca865500639c7a190511741d1e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 15 Nov 2019 19:56:28 +0100 Subject: [PATCH 17/17] yarn docs:api --- docs/pages/api/autocomplete.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index 7bfda0bf290186..3db98d9d9ddb28 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -29,9 +29,9 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | autoSelect | bool | false | If `true`, the selected option becomes the value of the input when the Autocomplete loses focus unless the user chooses a different option or changes the character string in the input. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | clearOnEscape | bool | false | If `true`, clear all values when the user presses escape and the popup is closed. | -| clearText | string | 'Clear' | Text label for the clear icon button. | +| clearText | string | 'Clear' | Override the default text for the *clear* icon button. | | closeIcon | node | <CloseIcon fontSize="small" /> | The icon to display in place of the default close icon. | -| closeText | string | 'Close' | Text label for the close popup icon button. | +| closeText | string | 'Close' | Override the default text for the *close popup* icon button. | | debug | bool | false | If `true`, the popup will ignore the blur event if the input if filled. You can inspect the popup markup with your browser tools. Consider this option when you need to customize the component. | | defaultValue | any | | The default input value. Use when the component is not controlled. | | disableClearable | bool | false | If `true`, the input can't be cleared. | @@ -59,7 +59,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | onInputChange | func | | Callback fired when the input value changes.

**Signature:**
`function(event: object, value: string) => void`
*event:* The event source of the callback.
*value:* null | | 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' | Text label for the open popup icon button. | +| openText | string | 'Open' | Override the default text for the *open popup* icon button. | | options | array | [] | Array of options. | | PaperComponent | elementType | Paper | The component used to render the body of the popup. | | PopperComponent | elementType | Popper | The component used to position the popup. |