Add count of selected filters

storybookjs · Jun 17, 2024 · b8af895 · b8af895
1 parent 7b69bae
commit b8af895
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 12 deletions.
diff --git a/code/ui/manager/src/components/sidebar/TagsFilter.tsx b/code/ui/manager/src/components/sidebar/TagsFilter.tsx
@@ -1,12 +1,34 @@
 import React, { useState, useEffect } from 'react';
-import { IconButton, WithTooltip } from '@storybook/components';
+import { Badge, IconButton, WithTooltip } from '@storybook/components';
 import { FilterIcon } from '@storybook/icons';
 import type { API } from '@storybook/manager-api';
+import { styled } from '@storybook/theming';
 import type { Tag, API_IndexHash } from '@storybook/types';
 import { TagsFilterPanel } from './TagsFilterPanel';
 
 const TAGS_FILTER = 'tags-filter';
 
+const Wrapper = styled.div({
+  position: 'relative',
+});
+
+const Count = styled(Badge)(({ theme }) => ({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  transform: 'translate(50%, -50%)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 3,
+  height: 15,
+  minWidth: 15,
+  lineHeight: '15px',
+  fontSize: theme.typography.size.s1 - 1,
+  background: theme.color.secondary,
+  color: theme.color.lightest,
+}));
+
 export interface TagsFilterProps {
   api: API;
   index: API_IndexHash;
@@ -66,17 +88,20 @@ export const TagsFilter = ({
         />
       )}
     >
-      <IconButton
-        key="tags"
-        title="Tag filters"
-        active={tagsActive}
-        onClick={(event) => {
-          event.preventDefault();
-          setExpanded(!expanded);
-        }}
-      >
-        <FilterIcon />
-      </IconButton>
+      <Wrapper>
+        <IconButton
+          key="tags"
+          title="Tag filters"
+          active={tagsActive}
+          onClick={(event) => {
+            event.preventDefault();
+            setExpanded(!expanded);
+          }}
+        >
+          <FilterIcon />
+        </IconButton>
+        {selectedTags.length > 0 && <Count>{selectedTags.length}</Count>}
+      </Wrapper>
     </WithTooltip>
   );
 };
diff --git a/code/ui/manager/src/components/sidebar/TagsFilterPanel.tsx b/code/ui/manager/src/components/sidebar/TagsFilterPanel.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { transparentize } from 'polished';
 import { styled } from '@storybook/theming';
 import { CollapseIcon } from './components/CollapseIcon';
+import type { Tag } from '@storybook/types';
 
 const BUILT_IN_TAGS = new Set([
   'dev',
@@ -88,6 +89,7 @@ const TagsList = ({ tags, selectedTags, toggleTag }: TagsListProps) => {
 };
 
 const Wrapper = styled.div({
+  padding: 10,
   label: {
     display: 'flex',
   },