[docs] Add color selector (#12053)

* [docs] Add color chooser Add color swatches Checkmark for selected colors Fix imports Add shade slider basically working Fix indigo glitch * Add ColorDemo component * Remove google color tool support * Fix TextField input * Rename ColorChooser to ColorTool * Improve the layout * Address the rest of Olivier's feedback * Add toolbar icon * Add docs-style-color to regression test blacklist * Optimize sample palette * Use MarkdownElement for code sample * Add dark / main / light colorBar * Display hex values in colorBar * fix code layout * Fix size limits * DRY the colorPicker Does this make the code to dense / hard to read? * Hacky fix for layout at small screen size * looking at the PR
mui · Jul 11, 2018 · 355317f · 355317f
1 parent 4fd86b3
commit 355317f
Show file tree

Hide file tree

Showing 18 changed files with 476 additions and 29 deletions.
diff --git a/.size-limit.js b/.size-limit.js
@@ -21,24 +21,24 @@ module.exports = [
     name: 'The initial cost people pay for using one component',
     webpack: true,
     path: 'packages/material-ui/build/Paper/index.js',
-    limit: '17.8 KB',
+    limit: '17.9 KB',
   },
   {
     name: 'The size of all the modules of material-ui.',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '94.5 KB',
+    limit: '94.6 KB',
   },
   {
     name: 'The main bundle of the docs',
     webpack: false,
     path: getMainFile().path,
-    limit: '175 KB',
+    limit: '176 KB',
   },
   {
     name: 'The home page of the docs',
     webpack: false,
     path: '.next/bundles/pages/index.js',
-    limit: '6 KB',
+    limit: '5.8 KB',
   },
 ];
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -11,12 +11,14 @@ import Toolbar from '@material-ui/core/Toolbar';
 import IconButton from '@material-ui/core/IconButton';
 import Tooltip from '@material-ui/core/Tooltip';
 import MenuIcon from '@material-ui/icons/Menu';
+import ColorsIcon from '@material-ui/icons/InvertColors';
 import LightbulbOutlineIcon from '@material-ui/docs/svgIcons/LightbulbOutline';
 import LightbulbFullIcon from '@material-ui/docs/svgIcons/LightbulbFull';
 import NProgressBar from '@material-ui/docs/NProgressBar';
 import FormatTextdirectionLToR from '@material-ui/icons/FormatTextdirectionLToR';
 import FormatTextdirectionRToL from '@material-ui/icons/FormatTextdirectionRToL';
 import GithubIcon from '@material-ui/docs/svgIcons/GitHub';
+import Link from 'docs/src/modules/components/Link';
 import AppDrawer from 'docs/src/modules/components/AppDrawer';
 import AppSearch from 'docs/src/modules/components/AppSearch';
 import Notifications from 'docs/src/modules/components/Notifications';
@@ -146,6 +148,16 @@ class AppFrame extends React.Component {
             )}
             <div className={classes.grow} />
             <AppSearch />
+            <Tooltip title="Edit docs colors" enterDelay={300}>
+              <IconButton
+                color="inherit"
+                aria-labelledby="appbar-color"
+                component={Link}
+                href="/style/color#color-tool"
+              >
+                <ColorsIcon />
+              </IconButton>
+            </Tooltip>
             <Tooltip title="Toggle light/dark theme" enterDelay={300}>
               <IconButton
                 color="inherit"

diff --git a/docs/src/modules/components/AppWrapper.js b/docs/src/modules/components/AppWrapper.js
@@ -64,6 +64,7 @@ class AppWrapper extends React.Component {
 
     if (
       nextProps.uiTheme.paletteType !== prevProps.uiTheme.paletteType ||
+      nextProps.uiTheme.paletteColors !== prevProps.uiTheme.paletteColors ||
       nextProps.uiTheme.direction !== prevProps.uiTheme.direction
     ) {
       return {

diff --git a/docs/src/modules/redux/actionTypes.js b/docs/src/modules/redux/actionTypes.js
@@ -1,6 +1,7 @@
 const actionTypes = {
-  THEME_CHANGE_PALETTE_TYPE: 'THEME_CHANGE_PALETTE_TYPE',
   THEME_CHANGE_DIRECTION: 'THEME_CHANGE_DIRECTION',
+  THEME_CHANGE_PALETTE_COLORS: 'THEME_CHANGE_PALETTE_COLORS',
+  THEME_CHANGE_PALETTE_TYPE: 'THEME_CHANGE_PALETTE_TYPE',
 };
 
 export default actionTypes;
diff --git a/docs/src/modules/redux/themeReducer.js b/docs/src/modules/redux/themeReducer.js
@@ -1,7 +1,17 @@
 import actionTypes from 'docs/src/modules/redux/actionTypes';
+import blue from '@material-ui/core/colors/blue';
+import pink from '@material-ui/core/colors/pink';
+import { darken } from '@material-ui/core/styles/colorManipulator';
 
 const initialState = {
   paletteType: 'light',
+  paletteColors: {
+    primary: blue,
+    secondary: {
+      // Darken so we reach the AA contrast ratio level.
+      main: darken(pink.A400, 0.08),
+    },
+  },
   direction: 'ltr',
 };
 
@@ -14,6 +24,10 @@ const mapping = {
     ...state,
     direction: action.payload.direction,
   }),
+  [actionTypes.THEME_CHANGE_PALETTE_COLORS]: (state, action) => ({
+    ...state,
+    paletteColors: action.payload.paletteColors,
+  }),
 };
 
 function themeReducer(state = initialState, action) {

diff --git a/docs/src/modules/styles/getPageContext.js b/docs/src/modules/styles/getPageContext.js
@@ -13,14 +13,7 @@ function getTheme(uiTheme) {
     nprogress: {
       color: uiTheme.paletteType === 'light' ? '#000' : '#fff',
     },
-    palette: {
-      primary: blue,
-      secondary: {
-        // Darken so we reach the AA contrast ratio level.
-        main: darken(pink.A400, 0.08),
-      },
-      type: uiTheme.paletteType,
-    },
+    palette: { ...uiTheme.paletteColors, type: uiTheme.paletteType },
   });
 
   // Expose the theme as a global variable so people can play with it.
@@ -34,6 +27,13 @@ function getTheme(uiTheme) {
 const theme = getTheme({
   direction: 'ltr',
   paletteType: 'light',
+  paletteColors: {
+    primary: blue,
+    secondary: {
+      // Darken so we reach the AA contrast ratio level.
+      main: darken(pink.A400, 0.08),
+    },
+  },
 });
 
 // Configure JSS

diff --git a/docs/src/pages/style/color/ColorDemo.js b/docs/src/pages/style/color/ColorDemo.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import Typography from '@material-ui/core/Typography';
+import AddIcon from '@material-ui/icons/Add';
+import MarkdownElement from '@material-ui/docs/MarkdownElement';
+
+const styles = theme => ({
+  root: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  appFrame: {
+    position: 'relative',
+    height: 360,
+    backgroundColor: theme.palette.background.paper,
+  },
+  statusBar: {
+    width: '100%',
+    height: 24,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+  code: {
+    marginTop: theme.spacing.unit,
+    '& pre': {
+      margin: '0px !important',
+    },
+  },
+  fab: {
+    position: 'absolute',
+    bottom: theme.spacing.unit * 2,
+    right: theme.spacing.unit * 2,
+  },
+});
+
+function ColorDemo(props) {
+  const { classes, data, theme } = props;
+  const primary = {
+    main: data.primary,
+    output:
+      data.primaryShade === 4
+        ? `${data.primaryHue}`
+        : `{
+      main: '${data.primary}',
+    }`,
+  };
+  const secondary = {
+    main: data.secondary,
+    output:
+      data.secondaryShade === 11
+        ? `${data.secondaryHue}`
+        : `{
+      main: '${data.secondary}',
+    }`,
+  };
+
+  theme.palette.augmentColor(primary);
+  theme.palette.augmentColor(secondary);
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.appFrame}>
+        <div className={classes.statusBar} style={{ backgroundColor: primary.dark }} />
+        <AppBar position="static" style={{ backgroundColor: primary.main }}>
+          <Toolbar style={{ color: primary.contrastText }}>
+            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="title" color="inherit">
+              Color sample
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        <MarkdownElement
+          dir="ltr"
+          className={classes.code}
+          text={`\`\`\`jsx
+{
+  palette: {
+    primary: ${primary.output},
+    secondary: ${secondary.output},
+  },
+}
+\`\`\``}
+        />
+        <Button variant="fab" className={classes.fab} style={{ backgroundColor: secondary.main }}>
+          <AddIcon nativeColor={secondary.contrastText} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+ColorDemo.propTypes = {
+  classes: PropTypes.object.isRequired,
+  data: PropTypes.object.isRequired,
+  theme: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles, { withTheme: true })(ColorDemo);