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', },