styles for filter tags

toolkit/chakra/tag.tsx

-import { Tag as ChakraTag } from '@chakra-ui/react';
+import { chakra, Tag as ChakraTag } from '@chakra-ui/react';
 import * as React from 'react';
 
+import { nbsp } from 'lib/html-entities';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
+import { CloseButton } from './close-button';
 import { Skeleton } from './skeleton';
 
 export interface TagProps extends ChakraTag.RootProps {
   startElement?: React.ReactNode;
   endElement?: React.ReactNode;
   endElementProps?: ChakraTag.EndElementProps;
+  label?: string;
   onClose?: VoidFunction;
   closable?: boolean;
   truncated?: boolean;
@@ -22,6 +25,7 @@ export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
       startElement,
       endElement,
       endElementProps,
+      label,
       onClose,
       closable = Boolean(onClose),
       children,
@@ -31,11 +35,15 @@ export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
       ...rest
     } = props;
 
-    const labelElement = truncated ? (
+    const labelElement = label ? (
+      <chakra.span color="text.secondary">{ label }:{ nbsp }</chakra.span>
+    ) : null;
+
+    const contentElement = truncated ? (
       <TruncatedTextTooltip label={ children }>
-        <ChakraTag.Label>{ children }</ChakraTag.Label>
+        <ChakraTag.Label>{ labelElement }{ children }</ChakraTag.Label>
       </TruncatedTextTooltip>
-    ) : <ChakraTag.Label>{ children }</ChakraTag.Label>;
+    ) : <ChakraTag.Label>{ labelElement }{ children }</ChakraTag.Label>;
 
     return (
       <Skeleton loading={ loading } asChild>
@@ -47,13 +55,15 @@ export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
           { startElement && (
             <ChakraTag.StartElement _empty={{ display: 'none' }}>{ startElement }</ChakraTag.StartElement>
           ) }
-          { labelElement }
+          { contentElement }
           { endElement && (
             <ChakraTag.EndElement { ...endElementProps }>{ endElement }</ChakraTag.EndElement>
           ) }
           { closable && (
             <ChakraTag.EndElement>
-              <ChakraTag.CloseTrigger onClick={ onClose }/>
+              <ChakraTag.CloseTrigger onClick={ onClose } asChild>
+                <CloseButton/>
+              </ChakraTag.CloseTrigger>
             </ChakraTag.EndElement>
           ) }
         </ChakraTag.Root>

toolkit/theme/foundations/semanticTokens.ts

@@ -376,6 +376,9 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
           bg: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.800}' } },
           fg: { value: { _light: '{colors.blackAlpha.800}', _dark: '{colors.whiteAlpha.800}' } },
         },
+        filter: {
+          bg: { value: { _light: '{colors.blue.50}', _dark: '{colors.blue.800}' } },
+        },
         select: {
           bg: {
             DEFAULT: { value: { _light: '{colors.gray.100}', _dark: '{colors.gray.800}' } },
@@ -384,9 +387,6 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
           fg: { value: { _light: '{colors.gray.500}', _dark: '{colors.whiteAlpha.800}' } },
         },
       },
-      closeTrigger: {
-        color: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
-      },
     },
     table: {
       header: {

toolkit/theme/recipes/tag.recipe.ts

@@ -29,7 +29,7 @@ export const recipe = defineSlotRecipe({
       justifyContent: 'center',
       outline: '0',
       borderRadius: 'none',
-      color: 'tag.closeTrigger.color',
+      color: 'closeButton.fg',
       focusVisibleRing: 'inside',
       focusRingWidth: '2px',
       _hover: {
@@ -118,6 +118,14 @@ export const recipe = defineSlotRecipe({
           },
         },
       },
+      filter: {
+        root: {
+          bgColor: 'tag.root.filter.bg',
+          '&:not([data-loading], [aria-busy=true])': {
+            bgColor: 'tag.root.filter.bg',
+          },
+        },
+      },
       select: {
         root: {
           cursor: 'pointer',

ui/address/mud/AddressMudTable.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import type { AddressMudRecordsFilter, AddressMudRecordsSorting } from 'types/api/address';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
-import { apos, nbsp } from 'lib/html-entities';
+import { apos } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { Tag } from 'toolkit/chakra/tag';
 import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
@@ -89,21 +89,14 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
         const index = key as FilterKeys === 'filter_key0' ? 0 : 1;
         return (
           <Tag
-            display="inline-flex"
             key={ key }
-            maxW="360px"
-            // TODO @tom2drum style filter tags
-            colorScheme="blue"
+            variant="filter"
+            label={ getNameTypeText(data?.schema.key_names[index] || '', data?.schema.key_types[index] || '') }
             closable
             onClose={ onRemoveFilterClick(key as FilterKeys) }
+            maxW="360px"
           >
-            <chakra.span color="text.secondary" >{
-              getNameTypeText(data?.schema.key_names[index] || '', data?.schema.key_types[index] || '') }
-            </chakra.span>
-            <chakra.span color="text" overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
-              { nbsp }
-              { value }
-            </chakra.span>
+            { value }
           </Tag>
         );
       }) }

ui/advancedFilter/filters/AddressFilter.tsx

@@ -66,6 +66,7 @@ const AddressFilterInput = ({ address, mode, onModeChange, onChange, onClear, is
         onValueChange={ onModeChange }
         portalled={ false }
         w="105px"
+        flexShrink={ 0 }
         mr={ 3 }
       />
       <InputGroup

ui/advancedFilter/filters/AssetFilter.tsx

@@ -132,7 +132,7 @@ const AssetFilter = ({ value = [], handleFilterChange }: Props) => {
                 variant="select"
               >
                 <Flex flexGrow={ 1 } alignItems="center">
-                  { token.address === NATIVE_TOKEN.address ? <NativeTokenIcon boxSize={ 5 }/> : <TokenEntity.Icon token={ token }/> }
+                  { token.address === NATIVE_TOKEN.address ? <NativeTokenIcon boxSize={ 5 } mr={ 2 }/> : <TokenEntity.Icon token={ token }/> }
                   { token.symbol || token.name || token.address }
                 </Flex>
               </Tag>

ui/pages/AdvancedFilter.tsx

@@ -228,20 +228,17 @@ const AdvancedFilter = () => {
       </Flex>
       <HStack gap={ 2 } flexWrap="wrap" mb={ 6 }>
         { filterTags.map(t => (
-          <Tag key={ t.name } colorScheme="blue" display="inline-flex" onClose={ onClearFilter(t.key) } closable>
-            <chakra.span color="text.secondary">{ t.name }: </chakra.span>
-            <chakra.span color="text">{ t.value }</chakra.span>
+          <Tag key={ t.name } variant="filter" onClose={ onClearFilter(t.key) } closable label={ t.name }>
+            { t.value }
           </Tag>
         )) }
         { filterTags.length === 0 && (
           <>
-            <Tag colorScheme="blue" display="inline-flex">
-              <chakra.span color="text.secondary">Type: </chakra.span>
-              <chakra.span color="text">All</chakra.span>
+            <Tag variant="filter" label="Type">
+              All
             </Tag>
-            <Tag colorScheme="blue" display="inline-flex">
-              <chakra.span color="text.secondary">Age: </chakra.span>
-              <chakra.span color="text">7d</chakra.span>
+            <Tag variant="filter" label="Age">
+              7d
             </Tag>
           </>
         ) }

ui/showcases/Tag.tsx

@@ -7,7 +7,6 @@ import EntityTag from 'ui/shared/EntityTags/EntityTag';
 import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
 
 const TagShowcase = () => {
-  // TODO @tom2drum filtered tags
   return (
     <Container value="tag">
       <Section>
@@ -19,6 +18,9 @@ const TagShowcase = () => {
           <Sample label="variant: clickable">
             <Tag variant="clickable">My tag</Tag>
           </Sample>
+          <Sample label="variant: filter">
+            <Tag variant="filter">My tag</Tag>
+          </Sample>
           <Sample label="variant: select">
             <Tag variant="select">Default</Tag>
             <Tag variant="select" selected>Selected</Tag>
@@ -87,7 +89,13 @@ const TagShowcase = () => {
         </SamplesStack>
 
         <SectionSubHeader>Filter tags</SectionSubHeader>
-        <span>TODO</span>
+        <SamplesStack>
+          <Sample>
+            <Tag variant="filter" label="Type">All</Tag>
+            <Tag variant="filter" label="Address" truncated maxW="150px" closable>0x1234567890123456789012345678901234567890</Tag>
+            <Tag variant="filter" label="Type" loading>All</Tag>
+          </Sample>
+        </SamplesStack>
       </Section>
     </Container>
   );