Do not render Tags if values prop is empty

Fixes #674
UNStats · Jan 19, 2021 · 43a70eb · 43a70eb · vercel · Jan 19, 2021
1 parent 933fa0b
commit 43a70eb
Show file tree

Hide file tree

Showing 6 changed files with 289 additions and 301 deletions.
diff --git a/.changeset/stale-badgers-double.md b/.changeset/stale-badgers-double.md
@@ -0,0 +1,5 @@
+---
+'@undataforum/components': minor
+---
+
+Do not render Tags if values prop is empty
diff --git a/docs/content/components/tags.mdx b/docs/content/components/tags.mdx
@@ -176,6 +176,12 @@ You can adjust the gap:
 />
 ```
 
+If you provide an empty `values` array, the component will not be rendered:
+
+```jsx live
+<Tags values={[]} gap={1} m={2} />
+```
+
 ## System props
 
 `Tags` supports [space props](https://styled-system.com/api#space) and
@@ -184,12 +190,12 @@ You can adjust the gap:
 
 ## Component props
 
-| Name    | Type                       | Default        | Required | Description                            |
-| :------ | :------------------------- | :------------- | :------- | :------------------------------------- |
-| values  | Array of string            |                | ✓        | Array of badge names.                  |
-| gap     | Number                     | 2              |          | Gap between badges (from space scale). |
-| align   | `start`, `center` or `end` | `start`        |          | Alignment (responsive).                |
-| variant | String                     | `tags.primary` |          | Optional variant for customizations.   |
+| Name    | Type                       | Default        | Required | Description                                                  |
+| :------ | :------------------------- | :------------- | :------- | :----------------------------------------------------------- |
+| values  | Array of shape             |                | ✓        | Array of objects. Each object has a `tag` and a `path` prop. |
+| gap     | Number                     | 2              |          | Gap between badges (from space scale).                       |
+| align   | `start`, `center` or `end` | `start`        |          | Alignment (responsive).                                      |
+| variant | String                     | `tags.primary` |          | Optional variant for customizations.                         |
 
 ## Variants
 

diff --git a/docs/package.json b/docs/package.json
@@ -20,7 +20,7 @@
     "@undataforum/assets": "*",
     "@undataforum/components": "*",
     "@undataforum/preset": "*",
-    "gatsby": "^2.30.1",
+    "gatsby": "^2.31.0",
     "prop-types": "^15.7.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",

diff --git a/package.json b/package.json
@@ -30,8 +30,8 @@
     "@maiertech/eslint-config": "^0.16.0",
     "@maiertech/prettier-config": "^0.3.0",
     "@skypack/package-check": "^0.2.2",
-    "eslint": "^7.17.0",
-    "husky": "^4.3.7",
+    "eslint": "^7.18.0",
+    "husky": "^4.3.8",
     "lint-staged": "^10.5.2",
     "microbundle": "^0.13.0",
     "micromatch": "^4.0.2",

diff --git a/packages/components/src/tags.js b/packages/components/src/tags.js
@@ -12,43 +12,47 @@ const Tags = ({
   align = 'start',
   variant = 'tags.primary',
   ...props
-}) => (
-  <Box {...props}>
-    <Flex
-      sx={{
-        // flexDirection: 'row',
-        justifyContent: normalizeAlign(align),
-        // alignItems: 'stretch',
-        flexWrap: 'wrap',
-        mr: -gap,
-        mb: -gap,
-      }}
-    >
-      {values.map(({ tag, path }) => (
-        <Link
-          href={path}
-          key={tag}
-          sx={{
-            textDecoration: 'none',
-            mr: gap,
-            mb: gap,
-          }}
-        >
-          <Badge
+}) => {
+  // Do not render component if values array is empty.
+  if (values.length === 0) return null;
+  return (
+    <Box {...props}>
+      <Flex
+        sx={{
+          // flexDirection: 'row',
+          justifyContent: normalizeAlign(align),
+          // alignItems: 'stretch',
+          flexWrap: 'wrap',
+          mr: -gap,
+          mb: -gap,
+        }}
+      >
+        {values.map(({ tag, path }) => (
+          <Link
+            href={path}
+            key={tag}
             sx={{
-              // Anything below variant cannot be overridden by this variant.
-              variant,
-              display: 'block',
+              textDecoration: 'none',
+              mr: gap,
+              mb: gap,
             }}
-            variant={variant}
           >
-            {tag}
-          </Badge>
-        </Link>
-      ))}
-    </Flex>
-  </Box>
-);
+            <Badge
+              sx={{
+                // Anything below variant cannot be overridden by this variant.
+                variant,
+                display: 'block',
+              }}
+              variant={variant}
+            >
+              {tag}
+            </Badge>
+          </Link>
+        ))}
+      </Flex>
+    </Box>
+  );
+};
 
 const alignments = ['start', 'center', 'end'];
 const alignType = oneOf(alignments);