Remove special cases for some buttons with text (#3412)

* Toggle.Button -> Toggle.ButtonWithText * Simplify Prompt.Cancel/Action * Move lines down for better diff * Remove ButtonWithText * Simplify types
bluesky-social · Apr 5, 2024 · 49266c3 · 49266c3
1 parent 9b087b7
commit 49266c3
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 99 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -32,9 +32,6 @@ module.exports = {
           'H5',
           'H6',
           'P',
-          'Prompt.Cancel', // TODO: Not always safe.
-          'Prompt.Action', // TODO: Not always safe.
-          'ToggleButton.Button', // TODO: Not always safe.
         ],
         impliedTextProps: [],
       },

diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
@@ -91,15 +91,13 @@ export function Actions({children}: React.PropsWithChildren<{}>) {
 }
 
 export function Cancel({
-  children,
   cta,
-}: React.PropsWithChildren<{
+}: {
   /**
-   * Optional i18n string, used in lieu of `children` for simple buttons. If
-   * undefined (and `children` is undefined), it will default to "Cancel".
+   * Optional i18n string. If undefined, it will default to "Cancel".
    */
   cta?: string
-}>) {
+}) {
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
@@ -114,27 +112,25 @@ export function Cancel({
       size={gtMobile ? 'small' : 'medium'}
       label={cta || _(msg`Cancel`)}
       onPress={onPress}>
-      {children ? children : <ButtonText>{cta || _(msg`Cancel`)}</ButtonText>}
+      <ButtonText>{cta || _(msg`Cancel`)}</ButtonText>
     </Button>
   )
 }
 
 export function Action({
-  children,
   onPress,
   color = 'primary',
   cta,
   testID,
-}: React.PropsWithChildren<{
+}: {
   onPress: () => void
   color?: ButtonColor
   /**
-   * Optional i18n string, used in lieu of `children` for simple buttons. If
-   * undefined (and `children` is undefined), it will default to "Confirm".
+   * Optional i18n string. If undefined, it will default to "Confirm".
    */
   cta?: string
   testID?: string
-}>) {
+}) {
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
@@ -151,7 +147,7 @@ export function Action({
       label={cta || _(msg`Confirm`)}
       onPress={handleOnPress}
       testID={testID}>
-      {children ? children : <ButtonText>{cta || _(msg`Confirm`)}</ButtonText>}
+      <ButtonText>{cta || _(msg`Confirm`)}</ButtonText>
     </Button>
   )
 }

diff --git a/src/components/forms/ToggleButton.tsx b/src/components/forms/ToggleButton.tsx
@@ -1,16 +1,15 @@
 import React from 'react'
-import {View, AccessibilityProps, TextStyle, ViewStyle} from 'react-native'
-
-import {atoms as a, useTheme, native} from '#/alf'
-import {Text} from '#/components/Typography'
+import {AccessibilityProps, TextStyle, View, ViewStyle} from 'react-native'
 
+import {atoms as a, native, useTheme} from '#/alf'
 import * as Toggle from '#/components/forms/Toggle'
+import {Text} from '#/components/Typography'
 
-export type ItemProps = Omit<Toggle.ItemProps, 'style' | 'role' | 'children'> &
-  AccessibilityProps &
-  React.PropsWithChildren<{
+type ItemProps = Omit<Toggle.ItemProps, 'style' | 'role' | 'children'> &
+  AccessibilityProps & {
+    children: React.ReactElement
     testID?: string
-  }>
+  }
 
 export type GroupProps = Omit<Toggle.GroupProps, 'style' | 'type'> & {
   multiple?: boolean
@@ -47,49 +46,42 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
   const state = Toggle.useItemContext()
 
-  const {baseStyles, hoverStyles, activeStyles, textStyles} =
-    React.useMemo(() => {
-      const base: ViewStyle[] = []
-      const hover: ViewStyle[] = []
-      const active: ViewStyle[] = []
-      const text: TextStyle[] = []
+  const {baseStyles, hoverStyles, activeStyles} = React.useMemo(() => {
+    const base: ViewStyle[] = []
+    const hover: ViewStyle[] = []
+    const active: ViewStyle[] = []
 
-      hover.push(
-        t.name === 'light' ? t.atoms.bg_contrast_100 : t.atoms.bg_contrast_25,
-      )
+    hover.push(
+      t.name === 'light' ? t.atoms.bg_contrast_100 : t.atoms.bg_contrast_25,
+    )
 
-      if (state.selected) {
-        active.push({
-          backgroundColor: t.palette.contrast_800,
-        })
-        text.push(t.atoms.text_inverted)
-        hover.push({
-          backgroundColor: t.palette.contrast_800,
-        })
-
-        if (state.disabled) {
-          active.push({
-            backgroundColor: t.palette.contrast_500,
-          })
-        }
-      }
+    if (state.selected) {
+      active.push({
+        backgroundColor: t.palette.contrast_800,
+      })
+      hover.push({
+        backgroundColor: t.palette.contrast_800,
+      })
 
       if (state.disabled) {
-        base.push({
-          backgroundColor: t.palette.contrast_100,
-        })
-        text.push({
-          opacity: 0.5,
+        active.push({
+          backgroundColor: t.palette.contrast_500,
         })
       }
+    }
 
-      return {
-        baseStyles: base,
-        hoverStyles: hover,
-        activeStyles: active,
-        textStyles: text,
-      }
-    }, [t, state])
+    if (state.disabled) {
+      base.push({
+        backgroundColor: t.palette.contrast_100,
+      })
+    }
+
+    return {
+      baseStyles: base,
+      hoverStyles: hover,
+      activeStyles: active,
+    }
+  }, [t, state])
 
   return (
     <View
@@ -110,19 +102,37 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
         activeStyles,
         (state.hovered || state.pressed) && hoverStyles,
       ]}>
-      {typeof children === 'string' ? (
-        <Text
-          style={[
-            a.text_center,
-            a.font_bold,
-            t.atoms.text_contrast_medium,
-            textStyles,
-          ]}>
-          {children}
-        </Text>
-      ) : (
-        children
-      )}
+      {children}
     </View>
   )
 }
+
+export function ButtonText({children}: {children: React.ReactNode}) {
+  const t = useTheme()
+  const state = Toggle.useItemContext()
+
+  const textStyles = React.useMemo(() => {
+    const text: TextStyle[] = []
+    if (state.selected) {
+      text.push(t.atoms.text_inverted)
+    }
+    if (state.disabled) {
+      text.push({
+        opacity: 0.5,
+      })
+    }
+    return text
+  }, [t, state])
+
+  return (
+    <Text
+      style={[
+        a.text_center,
+        a.font_bold,
+        t.atoms.text_contrast_medium,
+        textStyles,
+      ]}>
+      {children}
+    </Text>
+  )
+}
diff --git a/src/components/moderation/LabelPreference.tsx b/src/components/moderation/LabelPreference.tsx
@@ -84,17 +84,17 @@ export function Buttons({
         onChange={onChange}>
         {ignoreLabel && (
           <ToggleButton.Button name="ignore" label={ignoreLabel}>
-            {ignoreLabel}
+            <ToggleButton.ButtonText>{ignoreLabel}</ToggleButton.ButtonText>
           </ToggleButton.Button>
         )}
         {warnLabel && (
           <ToggleButton.Button name="warn" label={warnLabel}>
-            {warnLabel}
+            <ToggleButton.ButtonText>{warnLabel}</ToggleButton.ButtonText>
           </ToggleButton.Button>
         )}
         {hideLabel && (
           <ToggleButton.Button name="hide" label={hideLabel}>
-            {hideLabel}
+            <ToggleButton.ButtonText>{hideLabel}</ToggleButton.ButtonText>
           </ToggleButton.Button>
         )}
       </ToggleButton.Group>

diff --git a/src/screens/Onboarding/StepModeration/ModerationOption.tsx b/src/screens/Onboarding/StepModeration/ModerationOption.tsx
@@ -1,17 +1,17 @@
 import React from 'react'
 import {View} from 'react-native'
-import {LabelPreference, InterpretedLabelValueDefinition} from '@atproto/api'
-import {useLingui} from '@lingui/react'
+import {InterpretedLabelValueDefinition, LabelPreference} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
+import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
 import {
   usePreferencesQuery,
   usePreferencesSetContentLabelMutation,
 } from '#/state/queries/preferences'
 import {atoms as a, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
 import * as ToggleButton from '#/components/forms/ToggleButton'
-import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
+import {Text} from '#/components/Typography'
 
 export function ModerationOption({
   labelValueDefinition,
@@ -83,13 +83,13 @@ export function ModerationOption({
             values={[visibility ?? 'hide']}
             onChange={onChange}>
             <ToggleButton.Button name="ignore" label={labels.show}>
-              {labels.show}
+              <ToggleButton.ButtonText>{labels.show}</ToggleButton.ButtonText>
             </ToggleButton.Button>
             <ToggleButton.Button name="warn" label={labels.warn}>
-              {labels.warn}
+              <ToggleButton.ButtonText>{labels.warn}</ToggleButton.ButtonText>
             </ToggleButton.Button>
             <ToggleButton.Button name="hide" label={labels.hide}>
-              {labels.hide}
+              <ToggleButton.ButtonText>{labels.hide}</ToggleButton.ButtonText>
             </ToggleButton.Button>
           </ToggleButton.Group>
         )}

diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx
@@ -87,13 +87,17 @@ export function ServerInputDialog({
             values={fixedOption}
             onChange={setFixedOption}>
             <ToggleButton.Button name={BSKY_SERVICE} label={_(msg`Bluesky`)}>
-              {_(msg`Bluesky`)}
+              <ToggleButton.ButtonText>
+                {_(msg`Bluesky`)}
+              </ToggleButton.ButtonText>
             </ToggleButton.Button>
             <ToggleButton.Button
               testID="customSelectBtn"
               name="custom"
               label={_(msg`Custom`)}>
-              {_(msg`Custom`)}
+              <ToggleButton.ButtonText>
+                {_(msg`Custom`)}
+              </ToggleButton.ButtonText>
             </ToggleButton.Button>
           </ToggleButton.Group>
 

diff --git a/src/view/screens/DebugMod.tsx b/src/view/screens/DebugMod.tsx
@@ -274,13 +274,13 @@ export const DebugModScreen = ({}: NativeStackScreenProps<
             values={scenario}
             onChange={setScenario}>
             <ToggleButton.Button name="label" label="Label">
-              Label
+              <ToggleButton.ButtonText>Label</ToggleButton.ButtonText>
             </ToggleButton.Button>
             <ToggleButton.Button name="block" label="Block">
-              Block
+              <ToggleButton.ButtonText>Block</ToggleButton.ButtonText>
             </ToggleButton.Button>
             <ToggleButton.Button name="mute" label="Mute">
-              Mute
+              <ToggleButton.ButtonText>Mute</ToggleButton.ButtonText>
             </ToggleButton.Button>
           </ToggleButton.Group>
 
@@ -474,16 +474,16 @@ export const DebugModScreen = ({}: NativeStackScreenProps<
 
           <ToggleButton.Group label="Results" values={view} onChange={setView}>
             <ToggleButton.Button name="post" label="Post">
-              Post
+              <ToggleButton.ButtonText>Post</ToggleButton.ButtonText>
             </ToggleButton.Button>
             <ToggleButton.Button name="notifications" label="Notifications">
-              Notifications
+              <ToggleButton.ButtonText>Notifications</ToggleButton.ButtonText>
             </ToggleButton.Button>
             <ToggleButton.Button name="account" label="Account">
-              Account
+              <ToggleButton.ButtonText>Account</ToggleButton.ButtonText>
             </ToggleButton.Button>
             <ToggleButton.Button name="data" label="Data">
-              Data
+              <ToggleButton.ButtonText>Data</ToggleButton.ButtonText>
             </ToggleButton.Button>
           </ToggleButton.Group>
 

diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx
@@ -67,8 +67,8 @@ export function Dialogs() {
           description, as well as two actions.
         </Prompt.DescriptionText>
         <Prompt.Actions>
-          <Prompt.Cancel>Cancel</Prompt.Cancel>
-          <Prompt.Action onPress={() => {}}>Confirm</Prompt.Action>
+          <Prompt.Cancel />
+          <Prompt.Action cta="Confirm" onPress={() => {}} />
         </Prompt.Actions>
       </Prompt.Outer>
 

diff --git a/src/view/screens/Storybook/Forms.tsx b/src/view/screens/Storybook/Forms.tsx
@@ -202,13 +202,13 @@ export function Forms() {
           values={toggleGroupDValues}
           onChange={setToggleGroupDValues}>
           <ToggleButton.Button name="hide" label="Hide">
-            Hide
+            <ToggleButton.ButtonText>Hide</ToggleButton.ButtonText>
           </ToggleButton.Button>
           <ToggleButton.Button name="warn" label="Warn">
-            Warn
+            <ToggleButton.ButtonText>Warn</ToggleButton.ButtonText>
           </ToggleButton.Button>
           <ToggleButton.Button name="show" label="Show">
-            Show
+            <ToggleButton.ButtonText>Show</ToggleButton.ButtonText>
           </ToggleButton.Button>
         </ToggleButton.Group>
 
@@ -218,13 +218,13 @@ export function Forms() {
             values={toggleGroupDValues}
             onChange={setToggleGroupDValues}>
             <ToggleButton.Button name="hide" label="Hide">
-              Hide
+              <ToggleButton.ButtonText>Hide</ToggleButton.ButtonText>
             </ToggleButton.Button>
             <ToggleButton.Button name="warn" label="Warn">
-              Warn
+              <ToggleButton.ButtonText>Warn</ToggleButton.ButtonText>
             </ToggleButton.Button>
             <ToggleButton.Button name="show" label="Show">
-              Show
+              <ToggleButton.ButtonText>Show</ToggleButton.ButtonText>
             </ToggleButton.Button>
           </ToggleButton.Group>
         </View>