Material-ui: Runtime error at documentation - Color tool

[htbkoo]

Encountering unexpected runtime error at Color tool documentation

(This is my first issue opened for mui so if this is duplicated / should not be raised here, please do let me know. Thanks. :-) )

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.
  
  
  
  • I had searched for documentation and color tool - did not see anything that is very obvious
  
  

Current Behavior 😯

Error message is shown when possibly invalid input (e.g. #) is typed into the demo:

This demo had a runtime error!

We would appreciate it if you report this error directly to our issue tracker.

Error: Material-UI: unsupported `` color.
We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()

Expected Behavior 🤔

The demo would not result in runtime error (e.g. maybe it can show a snack bar message indicating invalid input or we can add validation to the text field?)

Steps to Reproduce 🕹

Steps:

1. Go to the Material-UI documentation page for Color-tool
2. Click on any of the text field (e.g. the Primary one)
3. Press # on your keyboard (i.e. shift-3)
4. The demo would fail and show the runtime error message

Context 🔦

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.4.1 |
| React | The version used by the documentation as of 16-Sep-2019 |
| Browser | Google Chrome 77.0.3865.75 (Official Build) (64-bit) |
| TypeScript | The version used by the documentation as of 16-Sep-2019 |
| etc. | |

[oliviertassinari]

@htbkoo Could you report the version displayed at top right of the side nav? The problem should be already be fixed, I suspect a service worker update issue: #17072.

[eps1lon]

@oliviertassinari The docs repo is still at 4.4.1 https://github.com/mui-org/material-ui-docs/commits/latest

[oliviertassinari]

@eps1lon Thank, you are right. I have pushed v4.4.2. It contains the fix for #17072 and this issue.

[htbkoo]

Thank you!

[mohammed-shakeel-by]

Hi @oliviertassinari @eps1lon , Im facing a similar issue when i just import the pagination component
Could you help me regading this.
Code:
import * as React from "react";
import { Box, Typography, Link } from "@material-ui/core";
import { LightTheme, LuiBackground, LuiCardComponent, Tokens } from "..";
import {
ThemeProvider,
withStyles,
createStyles,
makeStyles,
Theme
} from "@material-ui/core/styles";

import Pagination from '@material-ui/lab/Pagination'

export default {
title: 'In Review |Components|Pagination'
};

export const BasicPagination = () => {
// const classes = useStyles();
debugger;
return (

                        <Box>
                            <div> 
                                <Pagination count={10} />
                                {/* <Pagination count={10} color="primary" />
                                <Pagination count={10} color="secondary" />
                                <Pagination count={10} disabled /> */}
                            </div>
                        </Box>

)

}
Error:

Dependencies:
"devDependencies": {
"@babel/core": "^7.8.3",
"@babel/plugin-external-helpers": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/plugin-transform-typescript": "^7.8.3",
"@babel/preset-env": "^7.8.3",
"@babel/preset-react": "^7.9.4",
"@babel/preset-typescript": "^7.9.0",
"@babel/runtime": "^7.9.2",
"@date-io/date-fns": "1.3.13",
"@harelpls/storybook-addon-materialui": "^1.0.2",
"@material-ui/core": "^4.9.11",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.51",
"@material-ui/pickers": "^3.2.10",
"@storybook/addon-a11y": "5.3.13",
"@storybook/addon-actions": "5.3.13",
"@storybook/addon-docs": "5.3.13",
"@storybook/addon-knobs": "5.3.13",
"@storybook/addon-links": "5.3.13",
"@storybook/addons": "5.3.13",
"@storybook/preset-create-react-app": "1.5.2",
"@storybook/react": "5.3.13",
"@svgr/rollup": "^5.3.1",
"@testing-library/jest-dom": "^5.5.0",
"@testing-library/react": "^10.0.2",
"@testing-library/user-event": "^10.0.2",
"@types/enzyme": "^3.10.5",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/jest": "^25.1.3",
"@types/node": "^13.13.0",
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.6",
"@types/testing-library__jest-dom": "^5.0.3",
"date-fns": "^2.12.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"highcharts": "^8.0.4",
"highcharts-react-official": "^2.2.2",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.12.0",
"react-scripts": "^3.3.1",
"react-test-renderer": "^16.12.0",
"rollup": "^1.31.1",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-postcss": "^2.1.1",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-typescript2": "^0.27.0",
"rollup-plugin-url": "^3.0.1",
"typescript": "~3.8.2"
},