Update tag chip to make it a bit cleaner (#2068)

- changes the property name to tagName from tag to make it clearer
- make onClick type accurate
- make onSelect an optional type

lib/components/tag-chip/index.tsx

@@ -2,18 +2,22 @@ import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 
 type OwnProps = {
-  onSelect: () => any;
+  onSelect?: (event: React.MouseEvent<HTMLDivElement>) => any;
   selected: boolean;
-  tag: string;
+  tagName: string;
 };
 
-const TagChip: FunctionComponent<OwnProps> = ({ onSelect, selected, tag }) => (
+const TagChip: FunctionComponent<OwnProps> = ({
+  onSelect,
+  selected,
+  tagName
+}) => (
   <div
     className={classNames('tag-chip', { selected })}
-    data-tag-name={tag}
+    data-tag-name={tagName}
     onClick={onSelect}
   >
-    {tag}
+    {tagName}
   </div>
 );
 

lib/components/tag-chip/test.tsx

@@ -8,27 +8,27 @@ describe('TagChip', () => {
   it('should select tag when clicked', () => {
     const selectIt = jest.fn();
 
-    const chip = mount(<TagChip tag="spline" onSelect={selectIt} />);
+    const chip = mount(<TagChip tagName="spline" onSelect={selectIt} />);
 
     expect(selectIt).not.toHaveBeenCalled();
     chip.simulate('click');
     expect(selectIt).toHaveBeenCalled();
   });
 
   it('should not include the `selected` class by default', () => {
-    const chip = shallow(<TagChip tag="spline" />);
+    const chip = shallow(<TagChip tagName="spline" />);
 
     expect(chip.hasClass('selected')).toBe(false);
   });
 
   it('should include the `selected` class when selected', () => {
-    const chip = shallow(<TagChip tag="spline" selected />);
+    const chip = shallow(<TagChip tagName="spline" selected />);
 
     expect(chip.hasClass('selected')).toBe(true);
   });
 
   it('should toggle the `selected` class with prop changes', () => {
-    const chip = shallow(<TagChip tag="spline" />);
+    const chip = shallow(<TagChip tagName="spline" />);
 
     expect(chip.hasClass('selected')).toBe(false);
 
@@ -42,7 +42,7 @@ describe('TagChip', () => {
   });
 
   it('should not introduce visual regressions', () => {
-    const component = renderer.create(<TagChip tag="spline" />).toJSON();
+    const component = renderer.create(<TagChip tagName="spline" />).toJSON();
 
     expect(component).toMatchSnapshot();
   });

lib/tag-field/index.tsx

@@ -249,7 +249,7 @@ export class TagField extends Component<Props, OwnState> {
           {tags.filter(negate(isEmailTag)).map((tag) => (
             <TagChip
               key={tag}
-              tag={tag}
+              tagName={tag}
               selected={tag === selectedTag}
               onSelect={this.selectTag}
             />