diff --git a/frontend/src/Components/Form/TagInputTag.css b/frontend/src/Components/Form/TagInputTag.css
index bf08e13fc..7e66a4d12 100644
--- a/frontend/src/Components/Form/TagInputTag.css
+++ b/frontend/src/Components/Form/TagInputTag.css
@@ -1,5 +1,34 @@
.tag {
- composes: link from '~Components/Link/Link.css';
-
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ max-width: 100%;
height: 31px;
}
+
+.link {
+ max-width: 100%;
+}
+
+.linkWithEdit {
+ max-width: calc(100% - 9px - 4px - 2px);
+}
+
+.editContainer {
+ display: inline-block;
+ margin-left: 4px;
+ padding-left: 2px;
+ border-left: 1px solid #eee;
+}
+
+.editButton {
+ composes: button from '~Components/Link/IconButton.css';
+
+ width: 9px;
+}
+
+.label {
+ composes: label from '~Components/Label.css';
+
+ max-width: 100%;
+}
diff --git a/frontend/src/Components/Form/TagInputTag.js b/frontend/src/Components/Form/TagInputTag.js
index 1a012eabe..c68072cea 100644
--- a/frontend/src/Components/Form/TagInputTag.js
+++ b/frontend/src/Components/Form/TagInputTag.js
@@ -1,8 +1,10 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
+import MiddleTruncate from 'react-middle-truncate';
import Label from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
-import { kinds } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
import tagShape from 'Helpers/Props/Shapes/tagShape';
import styles from './TagInputTag.css';
@@ -24,24 +26,64 @@ class TagInputTag extends Component {
});
};
+ onEdit = () => {
+ const {
+ index,
+ tag,
+ onEdit
+ } = this.props;
+
+ onEdit({
+ index,
+ id: tag.id,
+ value: tag.name
+ });
+ };
+
//
// Render
render() {
const {
tag,
- kind
+ kind,
+ canEdit
} = this.props;
return (
-
-