fix: tagslist limit of items

ccontrols · Feb 20, 2021 · fd9f766 · fd9f766
1 parent 19e9fff
commit fd9f766
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 9 deletions.
diff --git a/ui/blocks/src/DocumentItem/DocumentItem.tsx b/ui/blocks/src/DocumentItem/DocumentItem.tsx
@@ -60,7 +60,9 @@ export const DocumentItem: FC<DocumentItemProps & BoxProps> = ({
       )}
     </Box>
   ) : null;
-  const tagsNode = tags.length ? <TagsList tags={tags} raw={rawTags} /> : null;
+  const tagsNode = tags.length ? (
+    <TagsList tags={tags} raw={rawTags} limit={4} />
+  ) : null;
   return (
     <Box variant="documentitem.container" {...rest}>
       <Box variant="documentitem.titlerow">

diff --git a/ui/blocks/src/TagsList/TagsList.tsx b/ui/blocks/src/TagsList/TagsList.tsx
@@ -12,15 +12,20 @@ export interface TagsListProps {
   tags?: string[];
 
   /**
-   * raw string values, usefule for highlighting search results
+   * raw string values, useful for highlighting search results
    */
   raw?: string[];
+
+  /**
+   * limit the number of tags to display
+   */
+  limit?: number;
 }
 
 /**
  * displays a row of tags assigned to the current document, with links to their pages
  */
-export const TagsList: FC<TagsListProps> = ({ tags, raw }) => {
+export const TagsList: FC<TagsListProps> = ({ tags, raw, limit = -1 }) => {
   const [tagColors, setTagColors] = useState<{ [tag: string]: string }>({});
   const tagCounts = useDocPropCount('tags');
   const store = useStore();
@@ -36,14 +41,23 @@ export const TagsList: FC<TagsListProps> = ({ tags, raw }) => {
     );
   }, [tagCounts]);
 
-  return tags ? (
-    <Box variant="taglist.container">
-      {tags.map((tag, index) => {
+  if (!tags) {
+    return null;
+  }
+  const largerThanLimit = limit !== -1 && tags.length > limit;
+  return (
+    <Box
+      variant="taglist.container"
+      sx={{
+        maxWidth: largerThanLimit ? 'unset' : undefined,
+      }}
+    >
+      {tags.slice(0, limit).map((tag, index) => {
         const rawTag = raw ? raw[index] : undefined;
         return (
           <Link key={tag} href={getDocPath('tags', undefined, store, tag)}>
             <Tag
-              color={tagColors[tag] || '#dddddd'}
+              color={tagColors[tag] || 'muted'}
               variant="tag.leftmargin"
               raw={rawTag}
             >
@@ -52,6 +66,11 @@ export const TagsList: FC<TagsListProps> = ({ tags, raw }) => {
           </Link>
         );
       })}
+      {largerThanLimit && (
+        <Tag color="muted" variant="tag.leftmargin">
+          ...more
+        </Tag>
+      )}
     </Box>
-  ) : null;
+  );
 };
diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -653,6 +653,7 @@ export const theme: ControlsTheme = {
     },
     leftmargin: {
       ml: 1,
+      mb: 1,
       display: 'inline-block',
       px: 1,
       whiteSpace: 'nowrap',
@@ -1126,7 +1127,14 @@ export const theme: ControlsTheme = {
     },
   },
   taglist: {
-    container: { display: 'flex', flexDirection: 'row', alignItems: 'center' },
+    container: {
+      maxWidth: '400px',
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      justifyContent: 'flex-end',
+    },
   },
   appsidebarpage: {
     allsidebar: {