Fix mobile trending filter (#13794)

Author: dylanjeffers

packages/harmony/src/assets/icons/Leading.svg

@@ -8,7 +8,14 @@ type ScreenHeaderButtonProps = Omit<SelectablePillProps, 'type'>
 export const ScreenHeaderButton = (props: ScreenHeaderButtonProps) => {
   return (
     <View>
-      <SelectablePill type='button' isSelected isControlled {...props} />
+      <SelectablePill
+        {...({
+          type: 'button',
+          isSelected: true,
+          isControlled: true,
+          ...props
+        } as SelectablePillProps)}
+      />
     </View>
   )
 }

packages/mobile/src/components/core/Screen/ScreenHeaderButton.tsx

@@ -27,7 +27,6 @@ export const SelectablePill = (props: SelectablePillProps) => {
   const {
     type,
     icon: Icon,
-    label,
     size = 'small',
     isSelected: isSelectedProp,
     isControlled,
@@ -38,8 +37,15 @@ export const SelectablePill = (props: SelectablePillProps) => {
     style: styleProp,
     fullWidth,
     disableUnselectAnimation,
+    'aria-label': ariaLabel,
+    accessibilityLabel: accessibilityLabelProp,
     ...other
   } = props
+
+  const label = 'label' in props ? props.label : undefined
+  const isIconOnly = !('label' in props) && !!Icon
+  const displayLabel = label
+  const a11yLabel = ariaLabel ?? accessibilityLabelProp
   const {
     color,
     motion,
@@ -153,6 +159,7 @@ export const SelectablePill = (props: SelectablePillProps) => {
       onTouchCancel={handleTouchCancel}
       onPress={handlePress}
       hitSlop={DEFAULT_HIT_SLOP}
+      accessibilityLabel={isIconOnly ? a11yLabel : undefined}
       style={[
         css({ alignSelf: 'flex-start', borderRadius: cornerRadius['2xl'] }),
         styleProp
@@ -178,19 +185,24 @@ export const SelectablePill = (props: SelectablePillProps) => {
         style={[animatedRootStyles, fullWidth ? { width: '100%' } : undefined]}
         {...other}
       >
-        {size !== 'small' && Icon ? (
+        {(isIconOnly || (size !== 'small' && Icon)) && Icon ? (
           <Icon
             size='s'
             color={isSelected || isPressing ? 'white' : 'default'}
           />
         ) : null}
-        <AnimatedText
-          numberOfLines={1}
-          variant='body'
-          style={[animatedTextStyles, { lineHeight: typography.lineHeight.m }]}
-        >
-          {label}
-        </AnimatedText>
+        {displayLabel != null ? (
+          <AnimatedText
+            numberOfLines={1}
+            variant='body'
+            style={[
+              animatedTextStyles,
+              { lineHeight: typography.lineHeight.m }
+            ]}
+          >
+            {displayLabel}
+          </AnimatedText>
+        ) : null}
       </AnimatedFlex>
     </Pressable>
   )

packages/mobile/src/harmony-native/components/input/SelectablePill/SelectablePill.tsx

@@ -2,16 +2,23 @@ import type { PressableProps, ViewProps } from 'react-native'
 
 import type { IconComponent } from 'app/harmony-native/icons'
 
-export type SelectablePillProps = {
+type BaseSelectablePillProps = {
   type: 'button' | 'checkbox' | 'radio'
   size?: 'small' | 'large'
   isSelected?: boolean
   isControlled?: boolean
-  label: string
   value?: string
   icon?: IconComponent
   onChange?: (value: string, isSelected?: boolean) => void
   fullWidth?: boolean
   disableUnselectAnimation?: boolean
+  'aria-label'?: string
+  accessibilityLabel?: string
 } & Pick<PressableProps, 'disabled' | 'onPress'> &
   ViewProps
+
+export type SelectablePillProps = BaseSelectablePillProps &
+  (
+    | { label: string; icon?: IconComponent }
+    | { icon: IconComponent; label?: never }
+  )

packages/mobile/src/harmony-native/components/input/SelectablePill/types.ts

@@ -1,20 +1,21 @@
 import type { ComponentType } from 'react'
 
+import { TimeRange } from '@audius/common/models'
 import type { Modals, TrendingCategory } from '@audius/common/store'
 import {
   modalsActions,
   trendingPageActions,
   trendingPageLineupActions,
   trendingPageSelectors
 } from '@audius/common/store'
+import { ALL_GENRES } from '@audius/common/utils'
 import type { ViewStyle } from 'react-native'
 import { ScrollView, View } from 'react-native'
 import type { SvgProps } from 'react-native-svg'
 import { useDispatch, useSelector } from 'react-redux'
 
 import {
   Flex,
-  IconButton,
   IconLeading,
   SelectablePill,
   useTheme
@@ -87,6 +88,12 @@ export const TrendingHeader = (props: TrendingHeaderProps) => {
   const { spacing } = useTheme()
   const dispatch = useDispatch()
   const category = useSelector(getTrendingCategory) ?? 'tracks'
+  const timeRange = useSelector(trendingPageSelectors.getTrendingTimeRange)
+  const genre = useSelector(trendingPageSelectors.getTrendingGenre)
+
+  const hasActiveFilters =
+    (timeRange ?? TimeRange.WEEK) !== TimeRange.WEEK ||
+    (genre ?? ALL_GENRES) !== ALL_GENRES
 
   const handleOpenFilter = () => {
     dispatch(setVisibility({ modal: filterModal, visible: true }))
@@ -116,12 +123,17 @@ export const TrendingHeader = (props: TrendingHeaderProps) => {
           </GradientText>
         </View>
         {category === 'tracks' ? (
-          <IconButton
-            icon={IconLeading}
-            size='s'
-            onPress={handleOpenFilter}
-            aria-label='Open filter'
-          />
+          <Flex>
+            <SelectablePill
+              type='button'
+              icon={IconLeading}
+              size='large'
+              isSelected={hasActiveFilters}
+              isControlled
+              onPress={handleOpenFilter}
+              accessibilityLabel='Open filter'
+            />
+          </Flex>
         ) : null}
       </View>
       <ScrollView