Skip to content

[Chip] Enable generic props #15052

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 26, 2019
Merged

[Chip] Enable generic props #15052

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b556d60
[docs] Add TS examples for Chips and OutlinedChips
sperry94 Mar 25, 2019
593cce1
enabling generic component props for chip
sperry94 Mar 25, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 128 additions & 0 deletions docs/src/pages/demos/chips/Chips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
import React from 'react';
import PropTypes from 'prop-types';
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import Chip from '@material-ui/core/Chip';
import FaceIcon from '@material-ui/icons/Face';
import DoneIcon from '@material-ui/icons/Done';

const styles = (theme: Theme) =>
createStyles({
root: {
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
},
chip: {
margin: theme.spacing(1),
},
});

function handleDelete() {
alert('You clicked the delete icon.'); // eslint-disable-line no-alert
}

function handleClick() {
alert('You clicked the Chip.'); // eslint-disable-line no-alert
}

function Chips(props: WithStyles<typeof styles>) {
const { classes } = props;
return (
<div className={classes.root}>
<Chip label="Basic Chip" className={classes.chip} />
<Chip
avatar={<Avatar>MB</Avatar>}
label="Clickable Chip"
onClick={handleClick}
className={classes.chip}
/>
<Chip
avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
label="Deletable Chip"
onDelete={handleDelete}
className={classes.chip}
/>
<Chip
avatar={
<Avatar>
<FaceIcon />
</Avatar>
}
label="Clickable Deletable Chip"
onClick={handleClick}
onDelete={handleDelete}
className={classes.chip}
/>
<Chip
icon={<FaceIcon />}
label="Clickable Deletable Chip"
onClick={handleClick}
onDelete={handleDelete}
className={classes.chip}
/>
<Chip
label="Custom delete icon Chip"
onClick={handleClick}
onDelete={handleDelete}
className={classes.chip}
deleteIcon={<DoneIcon />}
/>
<Chip
label="Clickable Link Chip"
className={classes.chip}
component="a"
href="#chip"
clickable
/>
<Chip
avatar={<Avatar>MB</Avatar>}
label="Primary Clickable Chip"
clickable
className={classes.chip}
color="primary"
onDelete={handleDelete}
deleteIcon={<DoneIcon />}
/>
<Chip
icon={<FaceIcon />}
label="Primary Clickable Chip"
clickable
className={classes.chip}
color="primary"
onDelete={handleDelete}
deleteIcon={<DoneIcon />}
/>
<Chip
label="Deletable Primary Chip"
onDelete={handleDelete}
className={classes.chip}
color="primary"
/>
<Chip
avatar={
<Avatar>
<FaceIcon />
</Avatar>
}
label="Deletable Secondary Chip"
onDelete={handleDelete}
className={classes.chip}
color="secondary"
/>
<Chip
icon={<FaceIcon />}
label="Deletable Secondary Chip"
onDelete={handleDelete}
className={classes.chip}
color="secondary"
/>
</div>
);
}

Chips.propTypes = {
classes: PropTypes.object.isRequired,
} as any;

export default withStyles(styles)(Chips);
139 changes: 139 additions & 0 deletions docs/src/pages/demos/chips/OutlinedChips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
import React from 'react';
import PropTypes from 'prop-types';
import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
import Avatar from '@material-ui/core/Avatar';
import Chip from '@material-ui/core/Chip';
import FaceIcon from '@material-ui/icons/Face';
import DoneIcon from '@material-ui/icons/Done';

const styles = (theme: Theme) =>
createStyles({
root: {
display: 'flex',
justifyContent: 'center',
flexWrap: 'wrap',
},
chip: {
margin: theme.spacing(1),
},
});

function handleDelete() {
alert('You clicked the delete icon.'); // eslint-disable-line no-alert
}

function handleClick() {
alert('You clicked the Chip.'); // eslint-disable-line no-alert
}

function OutlinedChips(props: WithStyles<typeof styles>) {
const { classes } = props;
return (
<div className={classes.root}>
<Chip label="Basic Chip" className={classes.chip} variant="outlined" />
<Chip
avatar={<Avatar>MB</Avatar>}
label="Clickable Chip"
onClick={handleClick}
className={classes.chip}
variant="outlined"
/>
<Chip
avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
label="Deletable Chip"
onDelete={handleDelete}
className={classes.chip}
variant="outlined"
/>
<Chip
avatar={
<Avatar>
<FaceIcon />
</Avatar>
}
label="Clickable Deletable Chip"
onClick={handleClick}
onDelete={handleDelete}
className={classes.chip}
variant="outlined"
/>
<Chip
icon={<FaceIcon />}
label="Clickable Deletable Chip"
onClick={handleClick}
onDelete={handleDelete}
className={classes.chip}
variant="outlined"
/>
<Chip
label="Custom delete icon Chip"
onClick={handleClick}
onDelete={handleDelete}
className={classes.chip}
deleteIcon={<DoneIcon />}
variant="outlined"
/>
<Chip
label="Clickable Link Chip"
className={classes.chip}
component="a"
href="#chip"
clickable
variant="outlined"
/>
<Chip
avatar={<Avatar>MB</Avatar>}
label="Primary Clickable Chip"
clickable
className={classes.chip}
color="primary"
onDelete={handleDelete}
deleteIcon={<DoneIcon />}
variant="outlined"
/>
<Chip
icon={<FaceIcon />}
label="Primary Clickable Chip"
clickable
className={classes.chip}
color="primary"
onDelete={handleDelete}
deleteIcon={<DoneIcon />}
variant="outlined"
/>
<Chip
label="Deletable Primary Chip"
onDelete={handleDelete}
className={classes.chip}
color="primary"
variant="outlined"
/>
<Chip
avatar={
<Avatar>
<FaceIcon />
</Avatar>
}
label="Deletable Secondary Chip"
onDelete={handleDelete}
className={classes.chip}
color="secondary"
variant="outlined"
/>
<Chip
icon={<FaceIcon />}
label="Deletable Secondary Chip"
onDelete={handleDelete}
className={classes.chip}
color="secondary"
variant="outlined"
/>
</div>
);
}

OutlinedChips.propTypes = {
classes: PropTypes.object.isRequired,
} as any;

export default withStyles(styles)(OutlinedChips);
31 changes: 17 additions & 14 deletions packages/material-ui/src/Chip/Chip.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,21 @@
import * as React from 'react';
import { StandardProps, PropTypes } from '..';
import { PropTypes } from '..';
import { OverridableComponent, SimplifiedPropsOf } from '../OverridableComponent';

export interface ChipProps
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ChipClassKey> {
avatar?: React.ReactElement;
clickable?: boolean;
color?: PropTypes.Color;
component?: React.ElementType<ChipProps>;
deleteIcon?: React.ReactElement;
icon?: React.ReactElement;
label?: React.ReactNode;
onDelete?: React.EventHandler<any>;
variant?: 'default' | 'outlined';
}
declare const Chip: OverridableComponent<{
props: {
avatar?: React.ReactElement;
clickable?: boolean;
color?: PropTypes.Color;
deleteIcon?: React.ReactElement;
icon?: React.ReactElement;
label?: React.ReactNode;
onDelete?: React.EventHandler<any>;
variant?: 'default' | 'outlined';
};
defaultComponent: 'div';
classKey: ChipClassKey;
}>;

export type ChipClassKey =
| 'root'
Expand Down Expand Up @@ -41,6 +44,6 @@ export type ChipClassKey =
| 'deleteIconOutlinedColorPrimary'
| 'deleteIconOutlinedColorSecondary';

declare const Chip: React.ComponentType<ChipProps>;
export type ChipProps = SimplifiedPropsOf<typeof Chip>;

export default Chip;