Extract Tag to its own component (#8309)

res/css/views/elements/_TagComposer.scss

@@ -29,7 +29,9 @@ limitations under the License.
             margin-left: 16px; // distance from <Field>
         }
 
-        .mx_Field, .mx_Field input, .mx_AccessibleButton {
+        .mx_Field,
+        .mx_Field input,
+        .mx_AccessibleButton {
             // So they look related to each other by feeling the same
             border-radius: 8px;
         }
@@ -39,39 +41,48 @@ limitations under the License.
         display: flex;
         flex-wrap: wrap;
         margin-top: 12px; // this plus 12px from the tags makes 24px from the input
+    }
 
-        .mx_TagComposer_tag {
-            padding: 6px 8px 8px 12px;
-            position: relative;
-            margin-right: 12px;
-            margin-top: 12px;
-
-            // Cheaty way to get an opacified variable colour background
-            &::before {
-                content: '';
-                border-radius: 20px;
-                background-color: $tertiary-content;
-                opacity: 0.15;
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-
-                // Pass through the pointer otherwise we have effectively put a whole div
-                // on top of the component, which makes it hard to interact with buttons.
-                pointer-events: none;
-            }
-        }
+    .mx_Tag {
+        margin-right: 12px;
+        margin-top: 12px;
+    }
+}
 
-        .mx_AccessibleButton {
-            background-image: url('$(res)/img/subtract.svg');
-            width: 16px;
-            height: 16px;
-            margin-left: 8px;
-            display: inline-block;
+.mx_Tag {
+
+    font-size: $font-15px;
+
+    display: inline-flex;
+    align-items: center;
+
+    gap: 8px;
+    padding: 8px;
+    border-radius: 8px;
+
+    color: $primary-content;
+    background: $quinary-content;
+
+    >svg:first-child {
+        width: 1em;
+        color: $secondary-content;
+        transform: scale(1.25);
+        transform-origin: center;
+    }
+
+    .mx_Tag_delete {
+        border-radius: 50%;
+        text-align: center;
+        width: 1.066666em; // 16px;
+        height: 1.066666em;
+        line-height: 1em;
+        color: $secondary-content;
+        background: $system;
+        position: relative;
+
+        svg {
+            width: .5em;
             vertical-align: middle;
-            cursor: pointer;
         }
     }
 }

src/components/views/elements/Tag.tsx

@@ -0,0 +1,44 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed 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.
+*/
+
+import React from "react";
+
+import AccessibleButton from "./AccessibleButton";
+import { Icon as CancelRounded } from "../../../../res/img/element-icons/cancel-rounded.svg";
+
+interface IProps {
+    icon?: () => JSX.Element;
+    label: string;
+    onDeleteClick?: () => void;
+    disabled?: boolean;
+}
+
+export const Tag = ({
+    icon,
+    label,
+    onDeleteClick,
+    disabled = false,
+}: IProps) => {
+    return <div className='mx_Tag'>
+        { icon?.() }
+        { label }
+        { onDeleteClick && (
+            <AccessibleButton className="mx_Tag_delete" onClick={onDeleteClick} disabled={disabled}>
+                <CancelRounded />
+            </AccessibleButton>
+        ) }
+    </div>;
+};

src/components/views/elements/TagComposer.tsx

@@ -19,6 +19,7 @@ import React, { ChangeEvent, FormEvent } from "react";
 import Field from "./Field";
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "./AccessibleButton";
+import { Tag } from "./Tag";
 
 interface IProps {
     tags: string[];
@@ -80,10 +81,13 @@ export default class TagComposer extends React.PureComponent<IProps, IState> {
                 </AccessibleButton>
             </form>
             <div className='mx_TagComposer_tags'>
-                { this.props.tags.map((t, i) => (<div className='mx_TagComposer_tag' key={i}>
-                    <span>{ t }</span>
-                    <AccessibleButton onClick={this.onRemove.bind(this, t)} disabled={this.props.disabled} />
-                </div>)) }
+                { this.props.tags.map((t, i) => (
+                    <Tag
+                        label={t}
+                        key={t}
+                        onDeleteClick={this.onRemove.bind(this, t)}
+                        disabled={this.props.disabled} />
+                )) }
             </div>
         </div>;
     }