Add Action component

.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
           'P',
           'Admonition',
           'Admonition.Admonition',
+          'Toast.Action',
           'AgeAssuranceAdmonition',
           'Span',
         ],

src/components/Toast/Toast.tsx

@@ -2,6 +2,11 @@ import {createContext, useContext, useMemo} from 'react'
 import {View} from 'react-native'
 
 import {atoms as a, select, useAlf, useTheme} from '#/alf'
+import {
+  Button,
+  type ButtonProps,
+  type UninheritableButtonProps,
+} from '#/components/Button'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
 import {type Props as SVGIconProps} from '#/components/icons/common'
@@ -56,15 +61,14 @@ export function Outer({
       <View
         style={[
           a.flex_1,
-          a.py_lg,
+          a.p_lg,
-          a.pl_xl,
-          a.pr_2xl,
           a.rounded_md,
           a.border,
           a.flex_row,
           a.gap_sm,
           t.atoms.shadow_sm,
           {
+            paddingVertical: 14, // 16 seems too big
             backgroundColor: styles.backgroundColor,
             borderColor: styles.borderColor,
           },
@@ -83,22 +87,14 @@ export function Icon({icon}: {icon?: React.ComponentType<SVGIconProps>}) {
 }
 
 export function Text({children}: {children: React.ReactNode}) {
-  const {fonts} = useAlf()
   const {type} = useContext(Context)
   const {textColor} = useToastStyles({type})
-  /**
+  const {fontScaleCompensation} = useToastFontScaleCompensation()
-   * Vibes-based number, adjusts `top` of `View` that wraps the text to
-   * compensate for different type sizes and keep the first line of text
-   * aligned with the icon. - esb
-   */
-  const fontScaleCompensation = useMemo(
-    () => parseInt(fonts.scale) * -1 * 0.65,
-    [fonts.scale],
-  )
   return (
     <View
       style={[
         a.flex_1,
+        a.pr_lg,
         {
           top: fontScaleCompensation,
         },
@@ -120,6 +116,132 @@ export function Text({children}: {children: React.ReactNode}) {
   )
 }
 
+export function Action(
+  props: Omit<ButtonProps, UninheritableButtonProps | 'children'> & {
+    children: string
+  },
+) {
+  const t = useTheme()
+  const {fontScaleCompensation} = useToastFontScaleCompensation()
+  const {type} = useContext(Context)
+  const styles = useMemo(() => {
+    const base = {
+      base: {
+        textColor: t.palette.contrast_600,
+        backgroundColor: t.atoms.bg_contrast_25.backgroundColor,
+      },
+      interacted: {
+        textColor: t.atoms.text.color,
+        backgroundColor: t.atoms.bg_contrast_50.backgroundColor,
+      },
+    }
+    return {
+      default: base,
+      success: {
+        base: {
+          textColor: select(t.name, {
+            light: t.palette.primary_800,
+            dim: t.palette.primary_900,
+            dark: t.palette.primary_900,
+          }),
+          backgroundColor: t.palette.primary_25,
+        },
+        interacted: {
+          textColor: select(t.name, {
+            light: t.palette.primary_900,
+            dim: t.palette.primary_975,
+            dark: t.palette.primary_975,
+          }),
+          backgroundColor: t.palette.primary_50,
+        },
+      },
+      error: {
+        base: {
+          textColor: select(t.name, {
+            light: t.palette.negative_700,
+            dim: t.palette.negative_900,
+            dark: t.palette.negative_900,
+          }),
+          backgroundColor: t.palette.negative_25,
+        },
+        interacted: {
+          textColor: select(t.name, {
+            light: t.palette.negative_900,
+            dim: t.palette.negative_975,
+            dark: t.palette.negative_975,
+          }),
+          backgroundColor: t.palette.negative_50,
+        },
+      },
+      warning: base,
+      info: base,
+    }[type]
+  }, [t, type])
+
+  return (
+    <View style={{top: fontScaleCompensation}}>
+      <Button {...props}>
+        {s => {
+          const interacted = s.pressed || s.hovered || s.focused
+          return (
+            <>
+              <View
+                style={[
+                  a.absolute,
+                  a.curve_continuous,
+                  {
+                    // tiny button styles
+                    top: -5,
+                    bottom: -5,
+                    left: -9,
+                    right: -9,
+                    borderRadius: 6,
+                    backgroundColor: interacted
+                      ? styles.interacted.backgroundColor
+                      : styles.base.backgroundColor,
+                  },
+                ]}
+              />
+              <BaseText
+                style={[
+                  a.text_md,
+                  a.font_medium,
+                  a.leading_snug,
+                  {
+                    color: interacted
+                      ? styles.interacted.textColor
+                      : styles.base.textColor,
+                  },
+                ]}>
+                {props.children}
+              </BaseText>
+            </>
+          )
+        }}
+      </Button>
+    </View>
+  )
+}
+
+/**
+ * Vibes-based number, provides t `top` value to wrap the text to compensate
+ * for different type sizes and keep the first line of text aligned with the
+ * icon. - esb
+ */
+function useToastFontScaleCompensation() {
+  const {fonts} = useAlf()
+  const fontScaleCompensation = useMemo(
+    () => parseInt(fonts.scale) * -1 * 0.65,
+    [fonts.scale],
+  )
+  return useMemo(
+    () => ({
+      fontScaleCompensation,
+    }),
+    [fontScaleCompensation],
+  )
+}
+
 function useToastStyles({type}: {type: ToastType}) {
   const t = useTheme()
   return useMemo(() => {

src/components/Toast/index.tsx

@@ -6,12 +6,14 @@ import {atoms as a} from '#/alf'
 import {DURATION} from '#/components/Toast/const'
 import {
   Default as DefaultToast,
+  Outer as BaseOuter,
   type ToastComponentProps,
 } from '#/components/Toast/Toast'
 import {type BaseToastOptions} from '#/components/Toast/types'
 
 export {DURATION} from '#/components/Toast/const'
-export {Icon, Outer, Text} from '#/components/Toast/Toast'
+export {Action, Icon, Text} from '#/components/Toast/Toast'
+export {type ToastType} from '#/components/Toast/types'
 
 /**
  * Toasts are rendered in a global outlet, which is placed at the top of the
@@ -32,6 +34,20 @@ export function Default({type, content}: ToastComponentProps) {
   )
 }
 
+export function Outer({
+  children,
+  type = 'default',
+}: {
+  children: React.ReactNode
+  type?: ToastComponentProps['type']
+}) {
+  return (
+    <View style={[a.px_xl, a.w_full]}>
+      <BaseOuter type={type}>{children}</BaseOuter>
+    </View>
+  )
+}
+
 /**
  * Access the full Sonner API
  */

src/components/Toast/index.web.tsx

@@ -8,6 +8,7 @@ import {type BaseToastOptions} from '#/components/Toast/types'
 
 export {DURATION} from '#/components/Toast/const'
 export * from '#/components/Toast/Toast'
+export {type ToastType} from '#/components/Toast/types'
 
 /**
  * Toasts are rendered in a global outlet, which is placed at the top of the

src/view/screens/Storybook/Toasts.tsx

@@ -2,74 +2,125 @@ import {Pressable, View} from 'react-native'
 
 import {show as deprecatedShow} from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
-import * as toast from '#/components/Toast'
+import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe'
-import {Default as Toast} from '#/components/Toast/Toast'
+import * as Toast from '#/components/Toast'
+import {Default} from '#/components/Toast/Toast'
 import {H1} from '#/components/Typography'
 
+function ToastWithAction({type = 'default'}: {type?: Toast.ToastType}) {
+  return (
+    <Toast.Outer type={type}>
+      <Toast.Icon icon={GlobeIcon} />
+      <Toast.Text>This toast has an action button</Toast.Text>
+      <Toast.Action label="Action" onPress={() => alert('Action clicked!')}>
+        Action
+      </Toast.Action>
+    </Toast.Outer>
+  )
+}
+
+function LongToastWithAction({type = 'default'}: {type?: Toast.ToastType}) {
+  return (
+    <Toast.Outer type={type}>
+      <Toast.Icon icon={GlobeIcon} />
+      <Toast.Text>
+        This is a longer message to test how the toast handles multiple lines of
+        text content.
+      </Toast.Text>
+      <Toast.Action label="Action" onPress={() => alert('Action clicked!')}>
+        Action
+      </Toast.Action>
+    </Toast.Outer>
+  )
+}
+
 export function Toasts() {
   return (
     <View style={[a.gap_md]}>
       <H1>Toast Examples</H1>
 
       <View style={[a.gap_md]}>
+        <View style={[a.gap_md, {marginHorizontal: a.px_xl.paddingLeft * -1}]}>
           <Pressable
             accessibilityRole="button"
-          onPress={() => toast.show(`Hey I'm a toast!`)}>
+            onPress={() => Toast.show(<ToastWithAction />)}>
-          <Toast content="Hey I'm a toast!" />
+            <ToastWithAction />
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => Toast.show(<LongToastWithAction />)}>
+            <LongToastWithAction />
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => Toast.show(<ToastWithAction type="success" />)}>
+            <ToastWithAction type="success" />
+          </Pressable>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => Toast.show(<ToastWithAction type="error" />)}>
+            <ToastWithAction type="error" />
+          </Pressable>
+        </View>
+
+        <Pressable
+          accessibilityRole="button"
+          onPress={() => Toast.show(`Hey I'm a toast!`)}>
+          <Default content="Hey I'm a toast!" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show(`This toast will disappear after 6 seconds`, {
+            Toast.show(`This toast will disappear after 6 seconds`, {
               duration: 6e3,
             })
           }>
-          <Toast content="This toast will disappear after 6 seconds" />
+          <Default content="This toast will disappear after 6 seconds" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show(
+            Toast.show(
               `This is a longer message to test how the toast handles multiple lines of text content.`,
             )
           }>
-          <Toast content="This is a longer message to test how the toast handles multiple lines of text content." />
+          <Default content="This is a longer message to test how the toast handles multiple lines of text content." />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show(`Success! Yayyyyyyy :)`, {
+            Toast.show(`Success! Yayyyyyyy :)`, {
               type: 'success',
             })
           }>
-          <Toast content="Success! Yayyyyyyy :)" type="success" />
+          <Default content="Success! Yayyyyyyy :)" type="success" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show(`I'm providing info!`, {
+            Toast.show(`I'm providing info!`, {
               type: 'info',
             })
           }>
-          <Toast content="I'm providing info!" type="info" />
+          <Default content="I'm providing info!" type="info" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show(`This is a warning toast`, {
+            Toast.show(`This is a warning toast`, {
               type: 'warning',
             })
           }>
-          <Toast content="This is a warning toast" type="warning" />
+          <Default content="This is a warning toast" type="warning" />
         </Pressable>
         <Pressable
           accessibilityRole="button"
           onPress={() =>
-            toast.show(`This is an error toast :(`, {
+            Toast.show(`This is an error toast :(`, {
               type: 'error',
             })
           }>
-          <Toast content="This is an error toast :(" type="error" />
+          <Default content="This is an error toast :(" type="error" />
         </Pressable>
 
         <Pressable
@@ -80,7 +131,7 @@ export function Toasts() {
               'exclamation-circle',
             )
           }>
-          <Toast
+          <Default
             content="This is a test of the deprecated API"
             type="warning"
           />