Remove material from TagInput component

recipes/package-lock.json

@@ -1129,6 +1129,43 @@
         "@material/typography": "^5.1.0"
       }
     },
+    "@material/checkbox": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/checkbox/-/checkbox-5.1.0.tgz",
+      "integrity": "sha512-NwpWxFdWrZNlSjcSEEcGz8UN7ZQ5k8VthExclJnawpYGPUnCPLTXWogREnA2Tyl22PJ6jOy8Ejb8tnpu2rSiaw==",
+      "requires": {
+        "@material/animation": "^5.1.0",
+        "@material/base": "^5.1.0",
+        "@material/density": "^5.1.0",
+        "@material/dom": "^5.1.0",
+        "@material/feature-targeting": "^5.1.0",
+        "@material/ripple": "^5.1.0",
+        "@material/theme": "^5.1.0",
+        "@material/touch-target": "^5.1.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@material/chips": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/chips/-/chips-5.1.0.tgz",
+      "integrity": "sha512-eYWrobENtXbnGoEx5BEURqoCfoc9aHu1JWq64mF12a/JSk+c035KYMjD4oyhow7dYqobbfQlWWdLQeHoRpYCeA==",
+      "requires": {
+        "@material/animation": "^5.1.0",
+        "@material/base": "^5.1.0",
+        "@material/checkbox": "^5.1.0",
+        "@material/density": "^5.1.0",
+        "@material/dom": "^5.1.0",
+        "@material/elevation": "^5.1.0",
+        "@material/feature-targeting": "^5.1.0",
+        "@material/ripple": "^5.1.0",
+        "@material/rtl": "^5.1.0",
+        "@material/shape": "^5.1.0",
+        "@material/theme": "^5.1.0",
+        "@material/touch-target": "^5.1.0",
+        "@material/typography": "^5.1.0",
+        "tslib": "^1.9.3"
+      }
+    },
     "@material/density": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@material/density/-/density-5.1.0.tgz",
@@ -1401,6 +1438,18 @@
         "@rmwc/types": "^6.0.5"
       }
     },
+    "@rmwc/chip": {
+      "version": "6.0.14",
+      "resolved": "https://registry.npmjs.org/@rmwc/chip/-/chip-6.0.14.tgz",
+      "integrity": "sha512-W1tAGIfQQzEqSecaMGQJdQTpRDe5ujsRlk9dGtb9dXAzYBIjIImhYLrjTRzJAAsjssBxCpMk6jBaffzhiiLMOw==",
+      "requires": {
+        "@material/chips": "^5.1.0",
+        "@rmwc/base": "^6.0.14",
+        "@rmwc/icon": "^6.0.14",
+        "@rmwc/ripple": "^6.0.14",
+        "@rmwc/types": "^6.0.5"
+      }
+    },
     "@rmwc/dialog": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@rmwc/dialog/-/dialog-6.1.0.tgz",

recipes/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@rmwc/button": "^6.0.14",
+    "@rmwc/chip": "^6.0.14",
     "@rmwc/dialog": "^6.1.0",
     "@rmwc/drawer": "^6.0.14",
     "@rmwc/grid": "^6.0.14",

recipes/src/components/TagInput/index.tsx

@@ -1,10 +1,14 @@
 
 import React, { Component, useState, FunctionComponent } from 'react';
-import { ChipSet, Chip } from '@material/react-chips';
-import MaterialIcon from '@material/react-material-icon';
+import {
+  ChipSet,
+  Chip
+} from '@rmwc/chip';
+
 import { Input } from 'components/Input';
 import { uniq } from 'ramda';
 
+import '@rmwc/chip/styles';
 import './styles.scss';
 
 type TagInputProps = {
@@ -39,8 +43,7 @@ export const TagInput:FunctionComponent<TagInputProps> = ({ label, onNewTag, tag
         onKeyDown={handleKeyDown}
       />
       <ChipSet
-        input
-        updateChips={(chips) => updateTags(chips.map(chip => chip.label || ''))}
+        // updateChips={(chips) => updateTags(chips.map(chip => chip.label || ''))}
       >
         {tags && tags.map((tag) => {
           const id = mkTagId(tag);
@@ -49,7 +52,7 @@ export const TagInput:FunctionComponent<TagInputProps> = ({ label, onNewTag, tag
               id={id}
               key={id}
               label={tag}
-              trailingIcon={<MaterialIcon icon='cancel' />}
+              trailingIcon="close"
             />
           )
         }