From 62ff5b6339eb473f3aedcb11ce51b5e53eb2a3fb Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 27 Nov 2019 12:43:35 +0100 Subject: [PATCH] make l10n easier to find --- docs/pages/api/autocomplete.md | 10 +++++----- docs/pages/api/rating.md | 2 +- docs/pages/api/table-pagination.md | 8 ++++---- .../material-ui-lab/src/Autocomplete/Autocomplete.d.ts | 10 ++++++++++ .../material-ui-lab/src/Autocomplete/Autocomplete.js | 10 ++++++++++ packages/material-ui-lab/src/Rating/Rating.js | 2 ++ .../material-ui/src/TablePagination/TablePagination.js | 8 ++++++++ 7 files changed, 40 insertions(+), 10 deletions(-) diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index 357d7f636b0f2b..eef33ea604cbd8 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' | Override the default text for the *clear* icon button. | +| clearText | string | 'Clear' | Override the default text for the *clear* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | | closeIcon | node | <CloseIcon fontSize="small" /> | The icon to display in place of the default close icon. | -| closeText | string | 'Close' | Override the default text for the *close popup* icon button. | +| closeText | string | 'Close' | Override the default text for the *close popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | | 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. | @@ -51,15 +51,15 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | inputValue | string | | The input value. | | ListboxComponent | elementType | 'ul' | The component used to render the listbox. | | loading | bool | false | If `true`, the component is in a loading state. | -| loadingText | node | 'Loading…' | Text to display when in a loading state. | +| 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. | +| 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 | | 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) => 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' | Override the default text for the *open popup* icon button. | +| openText | string | 'Open' | Override the default text for the *open popup* icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | | 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. | diff --git a/docs/pages/api/rating.md b/docs/pages/api/rating.md index eef016c6467cd2..b81884e9141c3e 100644 --- a/docs/pages/api/rating.md +++ b/docs/pages/api/rating.md @@ -27,7 +27,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | disabled | bool | false | If `true`, the rating will be disabled. | | emptyIcon | node | | The icon to display when empty. | -| getLabelText | func | function defaultLabelText(value) { return `${value} Star${value !== 1 ? 's' : ''}`;} | Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating.

**Signature:**
`function(value: number) => string`
*value:* The rating label's value to format. | +| getLabelText | func | function defaultLabelText(value) { return `${value} Star${value !== 1 ? 's' : ''}`;} | Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating.
For localization purposes, you can use the provided [translations](/guides/localization/).

**Signature:**
`function(value: number) => string`
*value:* The rating label's value to format. | | icon | node | <Star fontSize="inherit" /> | The icon to display. | | IconContainerComponent | elementType | function IconContainer(props) { const { value, ...other } = props; return <span {...other} />;} | The component containing the icon. | | max | number | 5 | Maximum rating. | diff --git a/docs/pages/api/table-pagination.md b/docs/pages/api/table-pagination.md index da4de808f0402c..bfb785f8f93529 100644 --- a/docs/pages/api/table-pagination.md +++ b/docs/pages/api/table-pagination.md @@ -26,14 +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. | +| backIconButtonText | string | 'Previous page' | Text label for the back arrow icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | | 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. | +| labelDisplayedRows | func | ({ from, to, count }) =>`${from}-${to === -1 ? count : to} of ${count}` | Customize the displayed rows label.
For localization purposes, you can use the provided [translations](/guides/localization/). | +| labelRowsPerPage | node | 'Rows per page:' | Customize the rows per page label. Invoked with a `{ from, to, count, page }` object.
For localization purposes, you can use the provided [translations](/guides/localization/). | | 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. | +| nextIconButtonText | string | 'Next page' | Text label for the next arrow icon button.
For localization purposes, you can use the provided [translations](/guides/localization/). | | 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/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index f33c2859c6b3c3..767a3862d4cade 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts @@ -48,10 +48,14 @@ export interface AutocompleteProps closeIcon?: React.ReactNode; /** * Override the default text for the *clear* icon button. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). */ clearText?: string; /** * Override the default text for the *close popup* icon button. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). */ closeText?: string; /** @@ -73,14 +77,20 @@ export interface AutocompleteProps loading?: boolean; /** * Text to display when in a loading state. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). */ loadingText?: React.ReactNode; /** * Text to display when there are no options. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). */ noOptionsText?: React.ReactNode; /** * Override the default text for the *open popup* icon button. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). */ openText?: string; /** diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index cbf86bdc56c6f0..1c4f9a0442b23b 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js @@ -444,6 +444,8 @@ Autocomplete.propTypes = { clearOnEscape: PropTypes.bool, /** * Override the default text for the *clear* icon button. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). */ clearText: PropTypes.string, /** @@ -452,6 +454,8 @@ Autocomplete.propTypes = { closeIcon: PropTypes.node, /** * Override the default text for the *close popup* icon button. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). */ closeText: PropTypes.string, /** @@ -545,6 +549,8 @@ Autocomplete.propTypes = { loading: PropTypes.bool, /** * Text to display when in a loading state. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). */ loadingText: PropTypes.node, /** @@ -553,6 +559,8 @@ Autocomplete.propTypes = { multiple: PropTypes.bool, /** * Text to display when there are no options. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). */ noOptionsText: PropTypes.node, /** @@ -589,6 +597,8 @@ Autocomplete.propTypes = { open: PropTypes.bool, /** * Override the default text for the *open popup* icon button. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). */ openText: PropTypes.string, /** diff --git a/packages/material-ui-lab/src/Rating/Rating.js b/packages/material-ui-lab/src/Rating/Rating.js index cce5e756f5244a..519ebfd6bd03fc 100644 --- a/packages/material-ui-lab/src/Rating/Rating.js +++ b/packages/material-ui-lab/src/Rating/Rating.js @@ -435,6 +435,8 @@ Rating.propTypes = { /** * Accepts a function which returns a string value that provides a user-friendly name for the current value of the rating. * + * For localization purposes, you can use the provided [translations](/guides/localization/). + * * @param {number} value The rating label's value to format. * @returns {string} */ diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js index cb259930378d1b..1e4312aeac314c 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.js +++ b/packages/material-ui/src/TablePagination/TablePagination.js @@ -177,6 +177,8 @@ TablePagination.propTypes = { backIconButtonProps: PropTypes.object, /** * Text label for the back arrow icon button. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). */ backIconButtonText: PropTypes.string, /** @@ -203,11 +205,15 @@ TablePagination.propTypes = { count: PropTypes.number.isRequired, /** * Customize the displayed rows label. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). */ labelDisplayedRows: PropTypes.func, /** * Customize the rows per page label. Invoked with a `{ from, to, count, page }` * object. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). */ labelRowsPerPage: PropTypes.node, /** @@ -216,6 +222,8 @@ TablePagination.propTypes = { nextIconButtonProps: PropTypes.object, /** * Text label for the next arrow icon button. + * + * For localization purposes, you can use the provided [translations](/guides/localization/). */ nextIconButtonText: PropTypes.string, /**