Skip to content

Commit

Permalink
[Rating] Move from lab to core
Browse files Browse the repository at this point in the history
  • Loading branch information
mbrookes committed Sep 24, 2020
1 parent 4f21dfc commit 7f77be3
Show file tree
Hide file tree
Showing 34 changed files with 795 additions and 758 deletions.
8 changes: 4 additions & 4 deletions docs/pages/api-docs/rating.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
filename: /packages/material-ui-lab/src/Rating/Rating.js
filename: /packages/material-ui/src/Rating/Rating.js
---

<!--- This documentation is automatically generated, do not try to edit it. -->
Expand All @@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/Rating/Rating.js
## Import

```js
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
// or
import { Rating } from '@material-ui/lab';
import { Rating } from '@material-ui/core';
```

You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
Expand Down Expand Up @@ -76,7 +76,7 @@ You can override the style of the component thanks to one of these customization
- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
- With a theme and an [`overrides` property](/customization/globals/#css).

If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/Rating/Rating.js) for more detail.
If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Rating/Rating.js) for more detail.

## Demos

Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/utils/getJsxPreview.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ describe('getJsxPreview', () => {
getJsxPreview(
`
import * as React from 'react';
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
export default function HalfRating() {
return <Rating name="half-rating" value={2.5} precision={0.5} />;
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/rating/CustomizedRatings.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
import FavoriteIcon from '@material-ui/icons/Favorite';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/rating/CustomizedRatings.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import Rating, { IconContainerProps } from '@material-ui/lab/Rating';
import Rating, { IconContainerProps } from '@material-ui/core/Rating';
import FavoriteIcon from '@material-ui/icons/Favorite';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import SentimentVeryDissatisfiedIcon from '@material-ui/icons/SentimentVeryDissatisfied';
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/rating/HalfRating.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/rating/HalfRating.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme: Theme) =>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/rating/HoverRating.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
import Box from '@material-ui/core/Box';
import StarIcon from '@material-ui/icons/Star';

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/rating/HoverRating.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
import Box from '@material-ui/core/Box';
import StarIcon from '@material-ui/icons/Star';

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/rating/RatingSize.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/rating/RatingSize.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme: Theme) =>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/rating/SimpleRating.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/rating/SimpleRating.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/rating/TextRating.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
import Box from '@material-ui/core/Box';
import StarIcon from '@material-ui/icons/Star';

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/rating/TextRating.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
import Box from '@material-ui/core/Box';
import StarIcon from '@material-ui/icons/Star';

Expand Down
1 change: 0 additions & 1 deletion docs/src/pages/components/rating/rating.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ title: Rating React component
components: Rating
githubLabel: 'component: Rating'
waiAria: https://www.w3.org/WAI/tutorials/forms/custom-controls/#a-star-rating
packageName: '@material-ui/lab'
---

# Rating
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/guides/localization/Locales.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import TablePagination from '@material-ui/core/TablePagination';
import Pagination from '@material-ui/lab/Pagination';
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/guides/localization/Locales.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import TablePagination from '@material-ui/core/TablePagination';
import Pagination from '@material-ui/lab/Pagination';
import Rating from '@material-ui/lab/Rating';
import Rating from '@material-ui/core/Rating';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
Expand Down
7 changes: 7 additions & 0 deletions docs/src/pages/guides/migration-v4/migration-v4.md
Original file line number Diff line number Diff line change
Expand Up @@ -524,6 +524,13 @@ const theme = createMuitheme({

### Rating

- Move the component from the lab to the core. The component is now stable.

```diff
-import Alert from '@material-ui/lab/Rating';
+import Alert from '@material-ui/core/Rating';
```

- Change the default empty icon to improve accessibility.
If you have a custom `icon` prop but no `emptyIcon` prop, you can restore the previous behavior with:

Expand Down
153 changes: 2 additions & 151 deletions packages/material-ui-lab/src/Rating/Rating.d.ts
Original file line number Diff line number Diff line change
@@ -1,151 +1,2 @@
import * as React from 'react';
import { InternalStandardProps as StandardProps } from '@material-ui/core';

export interface IconContainerProps extends React.HTMLAttributes<HTMLSpanElement> {
value: number;
}

export interface RatingProps
extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'onChange'> {
/**
* Override or extend the styles applied to the component.
*/
classes?: {
/** Styles applied to the root element. */
root?: string;
/** Styles applied to the root element if `size="small"`. */
sizeSmall?: string;
/** Styles applied to the root element if `size="large"`. */
sizeLarge?: string;
/** Styles applied to the root element if `readOnly={true}`. */
readOnly?: string;
/** Pseudo-class applied to the root element if `disabled={true}`. */
disabled?: string;
/** Pseudo-class applied to the root element if keyboard focused. */
focusVisible?: string;
/** Visually hide an element. */
visuallyHidden?: string;
/** Styles applied to the label elements. */
label?: string;
/** Styles applied to the label of the "no value" input when it is active. */
labelEmptyValueActive?: string;
/** Styles applied to the icon wrapping elements. */
icon?: string;
/** Styles applied to the icon wrapping elements when empty. */
iconEmpty?: string;
/** Styles applied to the icon wrapping elements when filled. */
iconFilled?: string;
/** Styles applied to the icon wrapping elements when hover. */
iconHover?: string;
/** Styles applied to the icon wrapping elements when focus. */
iconFocus?: string;
/** Styles applied to the icon wrapping elements when active. */
iconActive?: string;
/** Styles applied to the icon wrapping elements when decimals are necessary. */
decimal?: string;
};
/**
* The default value. Use when the component is not controlled.
* @default null
*/
defaultValue?: number;
/**
* If `true`, the rating will be disabled.
* @default false
*/
disabled?: boolean;
/**
* The icon to display when empty.
* @default <StarBorder fontSize="inherit" />
*/
emptyIcon?: React.ReactNode;
/**
* The label read when the rating input is empty.
* @default 'Empty'
*/
emptyLabelText?: React.ReactNode;
/**
* 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}
*
* @default function defaultLabelText(value) {
* return `${value} Star${value !== 1 ? 's' : ''}`;
* }
*/
getLabelText?: (value: number) => string;
/**
* The icon to display.
* @default <Star fontSize="inherit" />
*/
icon?: React.ReactNode;
/**
* The component containing the icon.
* @default function IconContainer(props) {
* const { value, ...other } = props;
* return <span {...other} />;
* }
*/
IconContainerComponent?: React.ElementType<IconContainerProps>;
/**
* Maximum rating.
* @default 5
*/
max?: number;
/**
* The name attribute of the radio `input` elements.
* This input `name` should be unique within the page.
* Being unique within a form is insufficient since the `name` is used to generated IDs.
*/
name?: string;
/**
* Callback fired when the value changes.
*
* @param {object} event The event source of the callback.
* @param {number} value The new value.
*/
onChange?: (event: React.SyntheticEvent, value: number | null) => void;
/**
* Callback function that is fired when the hover state changes.
*
* @param {object} event The event source of the callback.
* @param {number} value The new value.
*/
onChangeActive?: (event: React.SyntheticEvent, value: number) => void;
/**
* The minimum increment value change allowed.
* @default 1
*/
precision?: number;
/**
* Removes all hover effects and pointer events.
* @default false
*/
readOnly?: boolean;
/**
* The size of the rating.
* @default 'medium'
*/
size?: 'small' | 'medium' | 'large';
/**
* The rating value.
*/
value?: number | null;
}

export type RatingClassKey = keyof NonNullable<RatingProps['classes']>;

/**
*
* Demos:
*
* - [Rating](https://material-ui.com/components/rating/)
*
* API:
*
* - [Rating API](https://material-ui.com/api/rating/)
*/
export default function Rating(props: RatingProps): JSX.Element;
export { default } from '@material-ui/core/Rating';
export * from '@material-ui/core/Rating';
Loading

0 comments on commit 7f77be3

Please sign in to comment.