From b666a34863b7fe825acac7c74edaedbf7a0f16fb Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Fri, 31 Jul 2020 22:52:51 +0800
Subject: [PATCH] Tag: Add "type=flow" that reflows to multiline with gaps.

This will be used in Publish Preview modal, and potentially be used in the "show all tags in Claim Preview" request.
---
 ui/component/tag/view.jsx    | 8 +++++++-
 ui/scss/component/_tags.scss | 5 +++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/ui/component/tag/view.jsx b/ui/component/tag/view.jsx
index 10ea23e2a..2dfb552f7 100644
--- a/ui/component/tag/view.jsx
+++ b/ui/component/tag/view.jsx
@@ -25,6 +25,11 @@ export default function Tag(props: Props) {
     title = type === 'add' ? __('Add tag') : __('Remove tag');
   }
 
+  let iconRight = type !== 'link' && type !== 'large' && (type === 'remove' ? ICONS.REMOVE : ICONS.ADD);
+  if (type === 'flow') {
+    iconRight = null;
+  }
+
   return (
     <Button
       {...clickProps}
@@ -37,10 +42,11 @@ export default function Tag(props: Props) {
         // tag--add only adjusts the color, which causes issues with mature tag color clashing
         'tag--add': !isMature && type === 'add',
         'tag--mature': isMature,
+        'tag--flow': type === 'flow',
       })}
       label={name}
       iconSize={12}
-      iconRight={type !== 'link' && type !== 'large' && (type === 'remove' ? ICONS.REMOVE : ICONS.ADD)}
+      iconRight={iconRight}
     />
   );
 }
diff --git a/ui/scss/component/_tags.scss b/ui/scss/component/_tags.scss
index bccae4a06..771f6466d 100644
--- a/ui/scss/component/_tags.scss
+++ b/ui/scss/component/_tags.scss
@@ -68,3 +68,8 @@
 .tag--mature {
   @extend .badge--tag-mature;
 }
+
+.tag--flow {
+  margin: calc(2rem / 10) calc(2rem / 10);
+  max-width: 20rem;
+}