Skip to content

Commit

Permalink
[core] Upgrade dev dependencies (mui#12117)
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari authored and Joe Shelby committed Jul 14, 2018
1 parent 4696751 commit 9f8e085
Show file tree
Hide file tree
Showing 4 changed files with 308 additions and 568 deletions.
2 changes: 1 addition & 1 deletion docs/src/pages/style/color/ColorDemo.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const styles = theme => ({
},
appFrame: {
position: 'relative',
height: 360,
height: 390,
backgroundColor: theme.palette.background.paper,
},
statusBar: {
Expand Down
55 changes: 28 additions & 27 deletions docs/src/pages/style/color/ColorTool.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ const styles = theme => ({
justifyContent: 'center',
alignItems: 'center',
},
swatch: {
width: 192,
},
sliderContainer: {
display: 'flex',
alignItems: 'center',
Expand Down Expand Up @@ -127,32 +130,6 @@ class ColorTool extends React.Component {
const { classes, theme } = this.props;
const { primaryShade, secondaryShade } = this.state;

const colorTile = (hue, colorIntent) => {
const shade = colorIntent === 'primary' ? shades[primaryShade] : shades[secondaryShade];
const backgroundColor = colors[hue][shade];

return (
<Tooltip placement="right" id={`tooltip-${colorIntent}-${hue}`} title={hue} key={hue}>
<Radio
color="default"
checked={this.state[colorIntent] === backgroundColor}
onChange={this.handleChangeHue(colorIntent)}
value={hue}
name={colorIntent}
aria-labelledby={`tooltip-${colorIntent}-${hue}`}
icon={<div className={classes.radio} style={{ backgroundColor }} />}
checkedIcon={
<div className={classes.radioSelected} style={{ backgroundColor }}>
<CheckIcon style={{ fontSize: 30 }} />
</div>
}
/>
</Tooltip>
);
};

const colorSwatch = value => hues.map(hue => colorTile(hue, value));

const colorBar = color => {
const background = { main: color };
theme.palette.augmentColor(background);
Expand Down Expand Up @@ -209,7 +186,31 @@ class ColorTool extends React.Component {
/>
<Typography>{shades[intentShade]}</Typography>
</div>
<div>{colorSwatch(intent)}</div>
<div className={classes.swatch}>
{hues.map(hue => {
const shade = intent === 'primary' ? shades[primaryShade] : shades[secondaryShade];
const backgroundColor = colors[hue][shade];

return (
<Tooltip placement="right" title={hue} key={hue}>
<Radio
color="default"
checked={this.state[intent] === backgroundColor}
onChange={this.handleChangeHue(intent)}
value={hue}
name={intent}
aria-labelledby={`tooltip-${intent}-${hue}`}
icon={<div className={classes.radio} style={{ backgroundColor }} />}
checkedIcon={
<div className={classes.radioSelected} style={{ backgroundColor }}>
<CheckIcon style={{ fontSize: 30 }} />
</div>
}
/>
</Tooltip>
);
})}
</div>
{colorBar(color)}
</Grid>
);
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@
"clean-css": "^4.1.11",
"clipboard-copy": "^2.0.0",
"cross-env": "^5.1.1",
"css-loader": "^1.0.0",
"doctrine": "^2.0.0",
"downshift": "^2.0.0",
"enzyme": "^3.2.0",
Expand Down
Loading

0 comments on commit 9f8e085

Please sign in to comment.