feat: taglist customize tags

ccontrols · Feb 21, 2021 · c5fbd18 · c5fbd18
1 parent d3024f9
commit c5fbd18
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/ui/blocks/README.md b/ui/blocks/README.md
@@ -716,10 +716,14 @@ _TagsList [source code](https://github.com/ccontrols/component-controls/tree/mas
 
 ### properties
 
-| Name   | Type        | Description                                                |
-| ------ | ----------- | ---------------------------------------------------------- |
-| `tags` | _string\[]_ | string list of tag names                                   |
-| `raw`  | _string\[]_ | raw string values, usefule for highlighting search results |
+| Name                | Type        | Description                                               |
+| ------------------- | ----------- | --------------------------------------------------------- |
+| `tags`              | _string\[]_ | string list of tag names                                  |
+| `raw`               | _string\[]_ | raw string values, useful for highlighting search results |
+| `limit`             | _number_    | limit the number of tags to display                       |
+| `transparentAmount` | _number_    | transparent amount - 0 to 1                               |
+| `borderSize`        | _number_    | borderSize in pixels                                      |
+| `variant`           | _string_    | theme variant additional                                  |
 
 ## <ins>ThemeProvider</ins>
 

diff --git a/ui/blocks/src/TagsList/TagsList.tsx b/ui/blocks/src/TagsList/TagsList.tsx
@@ -2,7 +2,12 @@
 import { FC, useState, useEffect } from 'react';
 import { jsx, Box } from 'theme-ui';
 import { getDocPath } from '@component-controls/core';
-import { Tag, Link, getPaletteColor } from '@component-controls/components';
+import {
+  Tag,
+  TagProps,
+  Link,
+  getPaletteColor,
+} from '@component-controls/components';
 import { useStore, useDocPropCount } from '@component-controls/store';
 
 export interface TagsListProps {
@@ -25,7 +30,12 @@ export interface TagsListProps {
 /**
  * displays a row of tags assigned to the current document, with links to their pages
  */
-export const TagsList: FC<TagsListProps> = ({ tags, raw, limit = -1 }) => {
+export const TagsList: FC<TagsListProps & Omit<TagProps, 'color' | 'raw'>> = ({
+  tags,
+  raw,
+  limit = 0,
+  ...rest
+}) => {
   const [tagColors, setTagColors] = useState<{ [tag: string]: string }>({});
   const tagCounts = useDocPropCount('tags');
   const store = useStore();
@@ -44,7 +54,7 @@ export const TagsList: FC<TagsListProps> = ({ tags, raw, limit = -1 }) => {
   if (!tags) {
     return null;
   }
-  const largerThanLimit = limit !== -1 && tags.length > limit;
+  const largerThanLimit = limit !== 0 && tags.length > limit;
   return (
     <Box
       variant="taglist.container"
@@ -60,14 +70,15 @@ export const TagsList: FC<TagsListProps> = ({ tags, raw, limit = -1 }) => {
               color={tagColors[tag] || 'muted'}
               variant="tag.leftmargin"
               raw={rawTag}
+              {...rest}
             >
               {tag}
             </Tag>
           </Link>
         );
       })}
-      {largerThanLimit && (
-        <Tag color="muted" variant="tag.leftmargin">
+      {limit > 0 && largerThanLimit && (
+        <Tag color="muted" variant="tag.leftmargin" {...rest}>
           ...more
         </Tag>
       )}