diff --git a/code/ui/manager/src/components/sidebar/TagsFilter.tsx b/code/ui/manager/src/components/sidebar/TagsFilter.tsx
index e29f12292d2d..d248bbad77a8 100644
--- 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 = ({
/>
)}
>
- {
- event.preventDefault();
- setExpanded(!expanded);
- }}
- >
-
-
+
+ {
+ event.preventDefault();
+ setExpanded(!expanded);
+ }}
+ >
+
+
+ {selectedTags.length > 0 && {selectedTags.length}}
+
);
};
diff --git a/code/ui/manager/src/components/sidebar/TagsFilterPanel.tsx b/code/ui/manager/src/components/sidebar/TagsFilterPanel.tsx
index 4f7d2e5c4b9c..0f82b8baef71 100644
--- 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',
},