Modified Chip component based on Material Design specs.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/chip.css

@@ -1,48 +0,0 @@
-/*
- * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
- *
- * WSO2 Inc. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-.chip {
-    display: inline-block;
-    padding: 0 25px;
-    height: 50px;
-    font-size: 16px;
-    line-height: 50px;
-    border-radius: 25px;
-    background-color: #f1f1f1;
-}
-
-.chip img {
-    float: left;
-    margin: 0 10px 0 -25px;
-    height: 50px;
-    width: 50px;
-    border-radius: 50%;
-}
-
-.close-btn {
-    padding-left: 10px;
-    color: #888;
-    font-weight: bold;
-    float: right;
-    font-size: 20px;
-    cursor: pointer;
-}
-
-.close-btn:hover {
-    color: #000;
-}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/Chip.jsx

@@ -16,20 +16,36 @@
  * under the License.
  */
 
+import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import './chip.css';
 
 class Chip extends Component {
 
+    constructor() {
+        super();
+        this.onDeleteClick = this.onDeleteClick.bind(this);
+    }
+
+    onDeleteClick() {
+        this.props.onDelete(this.props.content.key);
+    }
+
     render() {
         return (
             <div className="chip">
-                {this.props.image?<img src={this.props.image} alt="Person" width="96" height="96" />:<div/>}
+                    <div className="chip-text">{this.props.content.value}</div>
-                {this.props.text}
+                    <div className="chip-close-btn" onClick={this.onDeleteClick}>
-                <span className="close-btn" >&times;</span>
+                        <i className="fw fw-uncheck"></i>
+                    </div>
             </div>
         )
     }
 }
 
+Chip.propTypes = {
+    onDelete: PropTypes.func,
+    content: PropTypes.object
+};
+
 export default Chip;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Chip/chip.css

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*
+ * Chip component with the material design specs.
+ * Chip with a close button.
+ * (-12px-{text (Roboto-Regular 13px)}-4px-{close button}-4px-)
+ */
+.chip {
+    display: flex;
+    height: 32px;
+    background-color: #f1f1f1;
+    border-radius: 16px;
+    padding: 3px;
+    border: 10px;
+}
+
+.chip-text {
+    padding-top: 4px;
+    font-family: "Roboto-Regular";
+    font-size: 13px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.87);
+    line-height: 20px;
+    padding-left: 12px;
+    padding-right: 4px;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.chip-close-btn {
+    padding-left: 7px;
+    padding-bottom: 6px;
+    border-radius: 50%;
+    display: inline-block;
+    height: 24px;
+    width: 24px;
+    user-select: none;
+    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+    cursor: pointer;
+    margin-right: 4px;
+}
+
+.chip-close-btn i {
+    font-size: 10px;
+    color: rgba(0, 0, 0, 0.258824);
+    fill: rgba(0, 0, 0, 0.258824);
+}
+
+.chip-close-btn:hover {
+    background-color: #e1e1e1;
+}