Skip to content

Commit

Permalink
let's merge
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Aug 2, 2018
1 parent 04bada5 commit 343d90c
Show file tree
Hide file tree
Showing 5 changed files with 99 additions and 643 deletions.
14 changes: 7 additions & 7 deletions docs/src/pages/demos/chips/ChipsPlayground.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,18 +47,18 @@ class ChipsPlayground extends React.Component {
const { classes } = this.props;
const { color, onDelete, avatar } = this.state;

const colorToCode = color !== 'default' ? `color=${color}` : '';
const colorToCode = color !== 'default' ? `color=${color} ` : '';

let onDeleteToCode;
switch (onDelete) {
case 'none':
onDeleteToCode = '';
break;
case 'custom':
onDeleteToCode = 'deleteIcon={<DoneIcon />} onDelete={handleDelete}';
onDeleteToCode = 'deleteIcon={<DoneIcon />} onDelete={handleDelete} ';
break;
default:
onDeleteToCode = 'onDelete={handleDelete}';
onDeleteToCode = 'onDelete={handleDelete} ';
break;
}

Expand All @@ -69,15 +69,15 @@ class ChipsPlayground extends React.Component {
avatarToCode = '';
break;
case 'img':
avatarToCode = 'avatar={<Avatar src="/static/images/uxceo-128.jpg" />}';
avatarToCode = 'avatar={<Avatar src="/static/images/uxceo-128.jpg" />} ';
avatarToPlayground = <Avatar src="/static/images/uxceo-128.jpg" />;
break;
case 'letter':
avatarToCode = 'avatar={<Avatar>FH</Avatar>}';
avatarToCode = 'avatar={<Avatar>FH</Avatar>} ';
avatarToPlayground = <Avatar>FH</Avatar>;
break;
default:
avatarToCode = 'avatar={<Avatar><FaceIcon /></Avatar>}';
avatarToCode = 'avatar={<Avatar><FaceIcon /></Avatar>} ';
avatarToPlayground = (
<Avatar>
<FaceIcon />
Expand All @@ -88,7 +88,7 @@ class ChipsPlayground extends React.Component {

const code = `
\`\`\`jsx
<Chip ${colorToCode} ${onDeleteToCode} ${avatarToCode} />
<Chip ${colorToCode}${onDeleteToCode}${avatarToCode}/>
\`\`\`
`;

Expand Down
36 changes: 18 additions & 18 deletions packages/material-ui/src/Chip/Chip.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,7 @@ export const styles = theme => {
},
/* Styles applied to the root element if `onClick` is defined or `clickable={true}`. */
clickable: {
// Remove grey highlight
WebkitTapHighlightColor: 'transparent',
WebkitTapHighlightColor: 'transparent', // Remove grey highlight
cursor: 'pointer',
'&:hover, &:focus': {
backgroundColor: emphasize(backgroundColor, 0.08),
Expand All @@ -64,8 +63,7 @@ export const styles = theme => {
* Styles applied to the root element if
* `onClick` and `color="primary"` is defined or `clickable={true}`.
*/
clickablePrimary: {
// Remove grey highlight
clickableColorPrimary: {
'&:hover, &:focus': {
backgroundColor: emphasize(theme.palette.primary.main, 0.08),
},
Expand All @@ -77,8 +75,7 @@ export const styles = theme => {
* Styles applied to the root element if
* `onClick` and `color="secondary"` is defined or `clickable={true}`.
*/
clickableSecondary: {
// Remove grey highlight
clickableColorSecondary: {
'&:hover, &:focus': {
backgroundColor: emphasize(theme.palette.secondary.main, 0.08),
},
Expand All @@ -93,13 +90,13 @@ export const styles = theme => {
},
},
/* Styles applied to the root element if `onDelete` and `color="primary"` is defined. */
deletablePrimary: {
deletableColorPrimary: {
'&:focus': {
backgroundColor: emphasize(theme.palette.primary.main, 0.2),
},
},
/* Styles applied to the root element if `onDelete` and `color="secondary"` is defined. */
deletableSecondary: {
deletableColorSecondary: {
'&:focus': {
backgroundColor: emphasize(theme.palette.secondary.main, 0.2),
},
Expand All @@ -113,12 +110,12 @@ export const styles = theme => {
fontSize: theme.typography.pxToRem(16),
},
/* Styles applied to the `avatar` element if `checked={true}` and `color="primary"` */
avatarPrimary: {
avatarColorPrimary: {
color: darken(theme.palette.primary.contrastText, 0.1),
backgroundColor: theme.palette.primary.dark,
},
/* Styles applied to the `avatar` element if `checked={true}` and `color="secondary"` */
avatarSecondary: {
avatarColorSecondary: {
color: darken(theme.palette.secondary.contrastText, 0.1),
backgroundColor: theme.palette.secondary.dark,
},
Expand Down Expand Up @@ -150,14 +147,14 @@ export const styles = theme => {
},
},
/* Styles applied to the deleteIcon element if `color="primary"`. */
deleteIconPrimary: {
deleteIconColorPrimary: {
color: fade(theme.palette.primary.contrastText, 0.65),
'&:hover, &:active': {
color: theme.palette.primary.contrastText,
},
},
/* Styles applied to the deleteIcon element if `color="secondary"`. */
deleteIconSecondary: {
deleteIconColorSecondary: {
color: fade(theme.palette.primary.contrastText, 0.65),
'&:hover, &:active': {
color: theme.palette.primary.contrastText,
Expand Down Expand Up @@ -214,13 +211,13 @@ class Chip extends React.Component {
classes,
className: classNameProp,
clickable,
color,
component: Component,
deleteIcon: deleteIconProp,
label,
onClick,
onDelete,
onKeyDown,
color,
tabIndex: tabIndexProp,
...other
} = this.props;
Expand All @@ -229,9 +226,12 @@ class Chip extends React.Component {
classes.root,
{ [classes[`color${capitalize(color)}`]]: color !== 'default' },
{ [classes.clickable]: onClick || clickable },
{ [classes[`clickable${capitalize(color)}`]]: (onClick || clickable) && color !== 'default' },
{
[classes[`clickableColor${capitalize(color)}`]]:
(onClick || clickable) && color !== 'default',
},
{ [classes.deletable]: onDelete },
{ [classes[`deletable${capitalize(color)}`]]: onDelete && color !== 'default' },
{ [classes[`deletableColor${capitalize(color)}`]]: onDelete && color !== 'default' },
classNameProp,
);

Expand All @@ -241,14 +241,14 @@ class Chip extends React.Component {
deleteIconProp && React.isValidElement(deleteIconProp) ? (
React.cloneElement(deleteIconProp, {
className: classNames(deleteIconProp.props.className, classes.deleteIcon, {
[classes[`deleteIcon${capitalize(color)}`]]: color !== 'default',
[classes[`deleteIconColor${capitalize(color)}`]]: color !== 'default',
}),
onClick: this.handleDeleteIconClick,
})
) : (
<CancelIcon
className={classNames(classes.deleteIcon, {
[classes[`deleteIcon${capitalize(color)}`]]: color !== 'default',
[classes[`deleteIconColor${capitalize(color)}`]]: color !== 'default',
})}
onClick={this.handleDeleteIconClick}
/>
Expand All @@ -259,7 +259,7 @@ class Chip extends React.Component {
if (avatarProp && React.isValidElement(avatarProp)) {
avatar = React.cloneElement(avatarProp, {
className: classNames(classes.avatar, avatarProp.props.className, {
[classes[`avatar${capitalize(color)}`]]: color !== 'default',
[classes[`avatarColor${capitalize(color)}`]]: color !== 'default',
}),
childrenClassName: classNames(classes.avatarChildren, avatarProp.props.childrenClassName),
});
Expand Down
Loading

0 comments on commit 343d90c

Please sign in to comment.