Migrate selectable pills to harmony (#7416)

AudiusProject · Feb 5, 2024 · 8bfbe14 · 8bfbe14
1 parent f59fb87
commit 8bfbe14
Show file tree

Hide file tree

Showing 22 changed files with 210 additions and 455 deletions.
diff --git a/packages/harmony/src/components/input/SelectablePill/SelectablePill.tsx b/packages/harmony/src/components/input/SelectablePill/SelectablePill.tsx
@@ -19,14 +19,7 @@ const InputRoot = styled.input({
 })
 
 export const SelectablePill = (props: SelectablePillProps) => {
-  const {
-    isSelected,
-    size = 'small',
-    _isHovered,
-    label,
-    icon: Icon,
-    ...other
-  } = props
+  const { isSelected, size = 'small', _isHovered, icon: Icon, ...other } = props
 
   const { disabled, type } = other
 
@@ -88,7 +81,6 @@ export const SelectablePill = (props: SelectablePillProps) => {
   }
 
   const iconCss = {
-    marginRight: spacing.xs,
     width: spacing.l,
     height: spacing.l,
 
@@ -100,9 +92,11 @@ export const SelectablePill = (props: SelectablePillProps) => {
   const pillContent = (
     <>
       {Icon ? <Icon css={iconCss} /> : null}
-      <Text variant='body' tag='span'>
-        {label}
-      </Text>
+      {'label' in other ? (
+        <Text variant='body' tag='span'>
+          {other.label}
+        </Text>
+      ) : null}
     </>
   )
 

diff --git a/packages/harmony/src/components/input/SelectablePill/types.ts b/packages/harmony/src/components/input/SelectablePill/types.ts
@@ -12,11 +12,14 @@ type InternalProps = {
 type BaseProps = {
   size?: 'small' | 'large'
   isSelected?: boolean
-  label: string
   disabled?: boolean
   icon?: IconComponent
 }
 
+type LabelProps =
+  | { label: string }
+  | { icon: IconComponent; 'aria-label': string }
+
 type InputProps =
   | ({
       type: 'checkbox' | 'radio'
@@ -25,4 +28,7 @@ type InputProps =
       type?: 'button' | 'submit' | 'reset' | undefined
     } & Omit<ComponentPropsWithoutRef<'button'>, 'children'>)
 
-export type SelectablePillProps = BaseProps & InternalProps & InputProps
+export type SelectablePillProps = BaseProps &
+  LabelProps &
+  InternalProps &
+  InputProps
diff --git a/packages/mobile/src/components/core/HarmonySelectablePill.tsx b/packages/mobile/src/components/core/HarmonySelectablePill.tsx
diff --git a/packages/mobile/src/components/premium-track-purchase-drawer/PayExtraFormSection.tsx b/packages/mobile/src/components/premium-track-purchase-drawer/PayExtraFormSection.tsx
@@ -7,9 +7,9 @@ import type { PayExtraAmountPresetValues } from '@audius/common/hooks'
 import { useField } from 'formik'
 import { View } from 'react-native'
 
+import { SelectablePill } from '@audius/harmony-native'
 import { flexRowCentered, makeStyles } from 'app/styles'
 
-import { HarmonySelectablePill } from '../core/HarmonySelectablePill'
 import { Text } from '../core/Text'
 import { PriceField } from '../fields/PriceField'
 
@@ -82,33 +82,41 @@ export const PayExtraFormSection = ({
         {messages.payExtra}
       </Text>
       <View style={styles.presetContainer}>
-        <HarmonySelectablePill
+        <SelectablePill
+          type='button'
           size='large'
           style={styles.pill}
+          fullWidth
           isSelected={preset === PayExtraPreset.LOW}
           label={formatPillAmount(amountPresets[PayExtraPreset.LOW])}
           disabled={disabled}
           onPress={() => handleClickPreset(PayExtraPreset.LOW)}
         />
-        <HarmonySelectablePill
+        <SelectablePill
+          type='button'
           size='large'
           style={styles.pill}
+          fullWidth
           isSelected={preset === PayExtraPreset.MEDIUM}
           label={formatPillAmount(amountPresets[PayExtraPreset.MEDIUM])}
           disabled={disabled}
           onPress={() => handleClickPreset(PayExtraPreset.MEDIUM)}
         />
-        <HarmonySelectablePill
+        <SelectablePill
+          type='button'
           size='large'
           style={styles.pill}
+          fullWidth
           isSelected={preset === PayExtraPreset.HIGH}
           label={formatPillAmount(amountPresets[PayExtraPreset.HIGH])}
           disabled={disabled}
           onPress={() => handleClickPreset(PayExtraPreset.HIGH)}
         />
-        <HarmonySelectablePill
+        <SelectablePill
+          type='button'
           size='large'
           style={[styles.pill, styles.customPill]}
+          fullWidth
           isSelected={preset === PayExtraPreset.CUSTOM}
           label={messages.other}
           disabled={disabled}

diff --git a/packages/mobile/src/harmony-native/components/input/SelectablePill/SelectablePill.tsx b/packages/mobile/src/harmony-native/components/input/SelectablePill/SelectablePill.tsx
@@ -24,12 +24,17 @@ const AnimatedText = Animated.createAnimatedComponent(Text)
 
 export const SelectablePill = (props: SelectablePillProps) => {
   const {
+    type,
     icon: Icon,
     label,
     size = 'small',
     isSelected: isSelectedProp,
     disabled,
     onPress,
+    onChange,
+    value,
+    style: styleProp,
+    fullWidth,
     ...other
   } = props
   const { color, motion } = useTheme()
@@ -45,10 +50,13 @@ export const SelectablePill = (props: SelectablePillProps) => {
   const handlePress = useCallback(
     (e: GestureResponderEvent) => {
       onPress?.(e)
+      if (value) {
+        onChange?.(value)
+      }
       setIsPressing(false)
       setIsSelected((isSelected) => !isSelected)
     },
-    [onPress]
+    [onChange, onPress, value]
   )
 
   const tap = Gesture.Tap()
@@ -101,12 +109,21 @@ export const SelectablePill = (props: SelectablePillProps) => {
       <Pressable
         onPressIn={handlePressIn}
         onPress={handlePress}
-        style={css({
-          alignSelf: 'flex-start',
-          borderRadius: cornerRadius['2xl']
-        })}
+        style={[
+          css({
+            alignSelf: 'flex-start',
+            borderRadius: cornerRadius['2xl']
+          }),
+          styleProp
+        ]}
       >
         <AnimatedFlex
+          accessibilityRole={type}
+          accessibilityState={{
+            checked: type === 'checkbox' ? isSelected : undefined,
+            selected: type === 'radio' ? isSelected : undefined,
+            disabled: !!disabled
+          }}
           direction='row'
           gap='xs'
           alignItems='center'
@@ -117,7 +134,14 @@ export const SelectablePill = (props: SelectablePillProps) => {
           h={size === 'small' ? 'xl' : '2xl'}
           ph={size === 'small' ? 'm' : 'l'}
           shadow={size === 'large' ? (isSelected ? 'flat' : 'near') : undefined}
-          style={animatedRootStyles}
+          style={[
+            animatedRootStyles,
+            fullWidth
+              ? {
+                  width: '100%'
+                }
+              : undefined
+          ]}
           {...other}
         >
           {Icon ? (

diff --git a/packages/mobile/src/harmony-native/components/input/SelectablePill/types.ts b/packages/mobile/src/harmony-native/components/input/SelectablePill/types.ts
@@ -3,9 +3,13 @@ import type { PressableProps, ViewProps } from 'react-native'
 import type { Icon } from 'app/harmony-native/icons'
 
 export type SelectablePillProps = {
+  type: 'button' | 'checkbox' | 'radio'
   size?: 'small' | 'large'
   isSelected?: boolean
   label: string
+  value?: string
   icon?: Icon
+  onChange?: (value: string) => void
+  fullWidth?: boolean
 } & Pick<PressableProps, 'disabled' | 'onPress'> &
   ViewProps