Merge pull request #8546 from weseek/imprv/133158-139809-update-tag-edit-modal-design

imprv: Update tag edit modal design

apps/app/src/components/PageTags/RenderTagLabels.tsx

@@ -20,7 +20,7 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
         <a
           key={tag}
           type="button"
-          className="grw-tag badge me-1 mb-1 text-truncate"
+          className="grw-tag badge me-1 mb-1 text-truncate mw-100"
           onClick={() => pushState(`tag:${tag}`)}
         >
           {tag}

apps/app/src/components/PageTags/TagEditModal.tsx

@@ -52,7 +52,7 @@ const TagEditModalSubstance: React.FC<TagEditModalSubstanceProps> = (props: TagE
 
   return (
     <Modal isOpen={isOpen} toggle={closeTagEditModal} id="edit-tag-modal" autoFocus={false}>
-      <ModalHeader tag="h4" toggle={closeTagEditModal} className="bg-primary text-light">
+      <ModalHeader tag="h4" toggle={closeTagEditModal}>
         {t('tag_edit_modal.edit_tags')}
       </ModalHeader>
       <ModalBody>

apps/app/src/components/PageTags/TagLabels.module.scss

@@ -12,9 +12,6 @@ $grw-tag-label-font-size: 12px;
   .grw-tag-simple-bar {
     width: 15.5rem;
     max-height: 5rem;
-    .grw-tag{
-      max-width: 15rem;
-    }
   }
 
 }

apps/app/src/components/PageTags/TagsInput.module.scss

@@ -0,0 +1,23 @@
+.tags-input :global {
+  .rbt-token {
+    .rbt-token-label {
+      // override to text-truncate
+      overflow: hidden;
+      font-size: 1rem; // adjust font-size
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+
+// == Colors
+.tags-input :global {
+  .rbt-token {
+    // override to .badge color
+    color: var(--bs-badge-color);
+  }
+
+  .rbt-token-active {
+    border-color: var(--grw-primary-400) !important;
+  }
+}

apps/app/src/components/PageTags/TagsInput.tsx

@@ -3,10 +3,12 @@ import React, { useRef, useState, useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
 import type { TypeaheadRef } from 'react-bootstrap-typeahead';
-import { AsyncTypeahead } from 'react-bootstrap-typeahead';
+import { AsyncTypeahead, Token } from 'react-bootstrap-typeahead';
 
 import { useSWRxTagsSearch } from '~/stores/tag';
 
+import styles from './TagsInput.module.scss';
+
 type Props = {
   tags: string[],
   autoFocus: boolean,
@@ -50,7 +52,7 @@ export const TagsInput: FC<Props> = (props: Props) => {
   }, []);
 
   return (
-    <div className="tag-typeahead">
+    <div className={`${styles['tags-input']}`}>
       <AsyncTypeahead
         id="tag-typeahead-asynctypeahead"
         ref={tagsInputRef}
@@ -64,6 +66,14 @@ export const TagsInput: FC<Props> = (props: Props) => {
         options={resultTags} // Search result (Some tag names)
         placeholder={t('tag_edit_modal.tags_input.tag_name')}
         autoFocus={autoFocus}
+        // option is tag name
+        renderToken={(option: string, { onRemove }, idx) => {
+          return (
+            <Token key={idx} className="grw-tag badge mw-100 d-inline-flex p-0" option={option} onRemove={onRemove}>
+              {option}
+            </Token>
+          );
+        }}
       />
     </div>
   );

apps/app/src/styles/_override-rbt.scss

@@ -1,37 +1,37 @@
-// TODO: .form-group dropped in bootstrap v5
-// https://redmine.weseek.co.jp/issues/129103
-// override react-bootstrap-typeahead styles
-// see: https://github.com/ericgio/react-bootstrap-typeahead
-.form-group:not(.has-error) {
-  .rbt-input.form-control {
-    // focus
-    &.focus {
-      border-color: inherit;
-    }
-  }
-}
+// // TODO: .form-group dropped in bootstrap v5
+// // https://redmine.weseek.co.jp/issues/129103
+// // override react-bootstrap-typeahead styles
+// // see: https://github.com/ericgio/react-bootstrap-typeahead
+// .form-group:not(.has-error) {
+//   .rbt-input.form-control {
+//     // focus
+//     &.focus {
+//       border-color: inherit;
+//     }
+//   }
+// }
 
-// TODO: check padding when upgrade react-bootstrap-typeahead v6
-// .close to .btn-close in bootstrap v5
-// https://redmine.weseek.co.jp/issues/129103
-.rbt-input-wrapper {
-  .close.rbt-close {
-    // default bootstrap .close has padding 0
-    padding: 3px 7px;
-  }
-}
+// // TODO: check padding when upgrade react-bootstrap-typeahead v6
+// // .close to .btn-close in bootstrap v5
+// // https://redmine.weseek.co.jp/issues/129103
+// .rbt-input-wrapper {
+//   .close.rbt-close {
+//     // default bootstrap .close has padding 0
+//     padding: 3px 7px;
+//   }
+// }
 
-// hide loading icon
-.rbt-aux {
-  display: none;
-}
+// // hide loading icon
+// .rbt-aux {
+//   display: none;
+// }
 
-// TODO: .input-group-prepend dropped in bootstrap v5
-// https://redmine.weseek.co.jp/issues/129103
-// seamless border for .input-group-prepend
-.input-group-prepend + div {
-  .rbt .rbt-input-main {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-}
+// // TODO: .input-group-prepend dropped in bootstrap v5
+// // https://redmine.weseek.co.jp/issues/129103
+// // seamless border for .input-group-prepend
+// .input-group-prepend + div {
+//   .rbt .rbt-input-main {
+//     border-top-left-radius: 0;
+//     border-bottom-left-radius: 0;
+//   }
+// }