@tamagui/button 1.142.0 → 2.0.0-1

package/src/Button.tsx

@@ -1,94 +1,43 @@
 import { getFontSize } from '@tamagui/font-size'
 import { getButtonSized } from '@tamagui/get-button-sized'
-import { withStaticProperties } from '@tamagui/helpers'
-import { useGetThemedIcon } from '@tamagui/helpers-tamagui'
-import { ButtonNestingContext, ThemeableStack } from '@tamagui/stacks'
-import type { TextContextStyles, TextParentStyles } from '@tamagui/text'
+import { ButtonNestingContext, getElevation, themeableVariants } from '@tamagui/stacks'
 import { SizableText, wrapChildrenInText } from '@tamagui/text'
-import type { FontSizeTokens, GetProps, SizeTokens, ThemeableProps } from '@tamagui/web'
+import type { ColorTokens, GetProps, RNExtraProps, SizeTokens, Token } from '@tamagui/web'
 import {
   createStyledContext,
-  getVariableValue,
-  spacedChildren,
+  getTokenValue,
   styled,
   useProps,
+  View,
+  withStaticProperties,
 } from '@tamagui/web'
-import type { FunctionComponent, JSX } from 'react'
 import { useContext } from 'react'
+import { useGetIcon } from '@tamagui/helpers-tamagui'
 
 type ButtonVariant = 'outlined'
 
-export const ButtonContext = createStyledContext<
-  Partial<
-    TextContextStyles & {
-      size: SizeTokens
-      variant?: ButtonVariant
-    }
-  >
->({
-  // keeping these here means they work with styled() passing down color to text
-  color: undefined,
-  ellipse: undefined,
-  fontFamily: undefined,
-  fontSize: undefined,
-  fontStyle: undefined,
-  fontWeight: undefined,
-  letterSpacing: undefined,
-  maxFontSizeMultiplier: undefined,
+export type ButtonProps = GetProps<typeof Frame>
+
+const context = createStyledContext<{
+  size?: SizeTokens
+  variant?: ButtonVariant
+  color?: ColorTokens | string
+  elevation?: SizeTokens | number
+}>({
   size: undefined,
-  textAlign: undefined,
   variant: undefined,
+  color: undefined,
+  elevation: undefined,
 })
 
-type ButtonIconProps = { color?: any; size?: any }
-type IconProp =
-  | JSX.Element
-  | FunctionComponent<ButtonIconProps>
-  | ((props: ButtonIconProps) => any)
-  | null
-
-type ButtonExtraProps = TextParentStyles &
-  ThemeableProps & {
-    /**
-     * add icon before, passes color and size automatically if Component
-     */
-    icon?: IconProp
-    /**
-     * add icon after, passes color and size automatically if Component
-     */
-    iconAfter?: IconProp
-    /**
-     * adjust icon relative to size
-     *
-     * @default 1
-     */
-    scaleIcon?: number
-    /**
-     * make the spacing elements flex
-     */
-    spaceFlex?: number | boolean
-    /**
-     * adjust internal space relative to icon size
-     */
-    scaleSpace?: number
-    /**
-     * remove default styles
-     */
-    unstyled?: boolean
-  }
-
-type ButtonProps = ButtonExtraProps & GetProps<typeof ButtonFrame>
-
-const BUTTON_NAME = 'Button'
-
-const ButtonFrame = styled(ThemeableStack, {
-  name: BUTTON_NAME,
-  tag: 'button',
-  context: ButtonContext,
+const Frame = styled(View, {
+  context,
+  name: 'Button',
+  group: 'Button' as any,
+  containerType: 'normal',
   role: 'button',
+  tag: 'button',
   focusable: true,
-  // forces runtime pressStyle so it passes through context text colors
-  disableClassName: true,
 
   variants: {
     unstyled: {
@@ -99,12 +48,20 @@ const ButtonFrame = styled(ThemeableStack, {
         flexWrap: 'nowrap',
         flexDirection: 'row',
         cursor: 'pointer',
-        hoverTheme: true,
-        pressTheme: true,
-        backgrounded: true,
+        backgroundColor: '$background',
         borderWidth: 1,
         borderColor: 'transparent',
 
+        hoverStyle: {
+          backgroundColor: '$backgroundHover',
+          borderColor: '$borderColorHover',
+        },
+
+        pressStyle: {
+          backgroundColor: '$backgroundPress',
+          borderColor: '$borderColorHover',
+        },
+
         focusVisibleStyle: {
           outlineColor: '$outlineColor',
           outlineStyle: 'solid',
@@ -114,31 +71,62 @@ const ButtonFrame = styled(ThemeableStack, {
     },
 
     variant: {
-      outlined: {
-        backgroundColor: 'transparent',
-        borderWidth: 2,
-        borderColor: '$borderColor',
+      outlined:
+        process.env.TAMAGUI_HEADLESS === '1'
+          ? {}
+          : {
+              backgroundColor: 'transparent',
+              borderWidth: 2,
+              borderColor: '$borderColor',
+
+              hoverStyle: {
+                backgroundColor: 'transparent',
+                borderColor: '$borderColorHover',
+              },
+
+              pressStyle: {
+                backgroundColor: 'transparent',
+                borderColor: '$borderColorPress',
+              },
+
+              focusVisibleStyle: {
+                backgroundColor: 'transparent',
+                borderColor: '$borderColorFocus',
+                outlineColor: '$outlineColor',
+                outlineStyle: 'solid',
+                outlineWidth: 2,
+              },
+            },
+    },
 
-        hoverStyle: {
-          backgroundColor: 'transparent',
-          borderColor: '$borderColorHover',
-        },
+    circular: themeableVariants.circular,
 
-        pressStyle: {
-          backgroundColor: 'transparent',
-          borderColor: '$borderColorPress',
-        },
+    chromeless: themeableVariants.chromeless,
 
-        focusVisibleStyle: {
-          backgroundColor: 'transparent',
-          borderColor: '$borderColorFocus',
-        },
+    bordered: themeableVariants.bordered,
+
+    size: {
+      '...size': (val, extras) => {
+        const buttonStyle = getButtonSized(val, extras)
+        const gap = getTokenValue(val as Token) * 0.4
+        return {
+          ...buttonStyle,
+          gap,
+        }
+      },
+      ':number': (val, extras) => {
+        const buttonStyle = getButtonSized(val, extras)
+        const gap = val * 0.4
+        return {
+          ...buttonStyle,
+          gap,
+        }
       },
     },
 
-    size: {
-      '...size': getButtonSized,
-      ':number': getButtonSized,
+    elevation: {
+      '...size': getElevation,
+      ':number': getElevation,
     },
 
     disabled: {
@@ -153,9 +141,8 @@ const ButtonFrame = styled(ThemeableStack, {
   },
 })
 
-const ButtonText = styled(SizableText, {
-  name: 'Button',
-  context: ButtonContext,
+const Text = styled(SizableText, {
+  context,
 
   variants: {
     unstyled: {
@@ -165,7 +152,7 @@ const ButtonText = styled(SizableText, {
         // flexGrow 1 leads to inconsistent native style where text pushes to start of view
         flexGrow: 0,
         flexShrink: 1,
-        ellipse: true,
+        ellipsis: true,
         color: '$color',
       },
     },
@@ -176,171 +163,113 @@ const ButtonText = styled(SizableText, {
   },
 })
 
-const ButtonIcon = (props: { children: React.ReactNode; scaleIcon?: number }) => {
-  const { children, scaleIcon = 1 } = props
-  const { size, color } = useContext(ButtonContext)
+const Icon = (props: { children: React.ReactNode; scaleIcon?: number }) => {
+  const { children, scaleIcon = 1, marginLeft, marginRight, size } = props as any
+  const styledContext = context.useStyledContext()
+  if (!styledContext) {
+    throw new Error('Button.Icon must be used within a Button')
+  }
+  const getIcon = useGetIcon()
+
+  const sizeToken = size ?? styledContext.size
 
   const iconSize =
-    (typeof size === 'number' ? size * 0.5 : getFontSize(size as FontSizeTokens)) *
+    (typeof sizeToken === 'number' ? sizeToken * 0.5 : getFontSize(sizeToken as Token)) *
     scaleIcon
 
-  const getThemedIcon = useGetThemedIcon({ size: iconSize, color: color as any })
-  return getThemedIcon(children)
+  return getIcon(children, {
+    size: iconSize,
+    color: styledContext.color,
+    marginLeft,
+    marginRight,
+  })
 }
 
-const ButtonComponent = ButtonFrame.styleable<ButtonExtraProps>(
-  function Button(props, ref) {
-    // @ts-ignore
-    const { props: buttonProps } = useButton(props)
-
-    return <ButtonFrame data-disable-theme {...buttonProps} ref={ref} />
-  }
-)
-/**
- * @summary A Button is a clickable element that can be used to trigger actions such as submitting forms, navigating to other pages, or performing other actions.
- * @see — Docs https://tamagui.dev/ui/button
- */
-const Button = withStaticProperties(ButtonComponent, {
-  Text: ButtonText,
-  Icon: ButtonIcon,
+export const ButtonContext = createStyledContext<{
+  size?: SizeTokens
+  variant?: ButtonVariant
+  color?: ColorTokens | string
+}>({
+  size: undefined,
+  variant: undefined,
+  color: undefined,
 })
 
-/**
- * @deprecated Instead of useButton, see the Button docs for the newer and much improved Advanced customization pattern: https://tamagui.dev/docs/components/button
- */
-function useButton<Props extends ButtonProps>(
-  { textProps, ...propsIn }: Props,
-  { Text = Button.Text }: { Text: any } = { Text: Button.Text }
-) {
+const ButtonComponent = Frame.styleable<{
+  icon?: any
+  iconAfter?: any
+  scaleIcon?: number
+  iconSize?: SizeTokens
+  onLayout?: RNExtraProps['onLayout']
+}>((propsIn: any, ref) => {
   const isNested = useContext(ButtonNestingContext)
-  const propsActive = useProps(propsIn, {
+
+  // Process props through useProps to expand shorthands (like br -> borderRadius)
+  const processedProps = useProps(propsIn, {
     noNormalize: true,
     noExpand: true,
-  }) as any as ButtonProps
+  })
 
-  // careful not to destructure and re-order props, order is important
   const {
+    children,
+    iconSize,
     icon,
     iconAfter,
-    space,
-    spaceFlex,
     scaleIcon = 1,
-    scaleSpace = 0.66,
-    separator,
     noTextWrap,
-    fontFamily,
-    fontSize,
-    fontWeight,
-    fontStyle,
-    letterSpacing,
-    tag,
-    ellipse,
-    maxFontSizeMultiplier,
+    ...props
+  } = processedProps
 
-    ...restProps
-  } = propsActive
+  const size = propsIn.size || (propsIn.unstyled ? undefined : '$true')
 
-  const size = propsActive.size || (propsActive.unstyled ? undefined : '$true')
-
-  const color = propsActive.color as any
+  const styledContext = context.useStyledContext()
+  const finalSize = iconSize ?? size ?? styledContext?.size
+  const iconSizeNumber =
+    (typeof finalSize === 'number' ? finalSize * 0.5 : getFontSize(finalSize as Token)) *
+    scaleIcon
 
-  const iconSize =
-    (typeof size === 'number'
-      ? size * 0.5
-      : getFontSize(size as FontSizeTokens, {
-          font: fontFamily?.[0] === '$' ? (fontFamily as any) : undefined,
-        })) * scaleIcon
+  const getIcon = useGetIcon()
 
-  const getThemedIcon = useGetThemedIcon({
-    size: iconSize,
-    color,
-  })
-
-  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)
-  const spaceSize = space ?? getVariableValue(iconSize) * scaleSpace
-  const contents = noTextWrap
-    ? [propsIn.children]
-    : wrapChildrenInText(
-        Text,
-        {
-          children: propsIn.children,
-          color,
-          fontFamily,
-          fontSize,
-          textProps,
-          fontWeight,
-          fontStyle,
-          letterSpacing,
-          ellipse,
-          maxFontSizeMultiplier,
-        },
-        Text === ButtonText && propsActive.unstyled !== true
-          ? {
-              unstyled: process.env.TAMAGUI_HEADLESS === '1',
-              size,
-            }
-          : undefined
-      )
-
-  const inner = spacedChildren({
-    // a bit arbitrary but scaling to font size is necessary so long as button does
-    space: spaceSize === false ? 0 : spaceSize == true ? '$true' : spaceSize,
-    spaceFlex,
-    ensureKeys: true,
-    separator,
-    direction:
-      propsActive.flexDirection === 'column' ||
-      propsActive.flexDirection === 'column-reverse'
-        ? 'vertical'
-        : 'horizontal',
-    // for keys to stay the same we keep indices as similar a possible
-    // so even if icons are undefined we still pass them
-    children: [themedIcon, ...contents, themedIconAfter],
+  const [themedIcon, themedIconAfter] = [icon, iconAfter].map((icon) => {
+    if (!icon) return null
+    return getIcon(icon, {
+      size: iconSizeNumber,
+      color: styledContext?.color,
+      // No marginLeft or marginRight needed - spacing is handled by the gap property in Frame's size variants
+    })
   })
 
-  const props = {
-    size,
-    ...(propsIn.disabled && {
-      // in rnw - false still has keyboard tabIndex, undefined = not actually focusable
-      focusable: undefined,
-      // even with tabIndex unset, it will keep focusVisibleStyle on web so disable it here
-      focusVisibleStyle: {
-        borderColor: '$background',
-      },
-    }),
-    // fixes SSR issue + DOM nesting issue of not allowing button in button
-    tag:
-      tag ??
-      (isNested
-        ? 'span'
-        : // defaults to <a /> when accessibilityRole = link
-          // see https://github.com/tamagui/tamagui/issues/505
-          propsActive.accessibilityRole === 'link' || propsActive.role === 'link'
-          ? 'a'
-          : 'button'),
-
-    ...restProps,
-
-    children: (
-      <ButtonNestingContext.Provider value={true}>{inner}</ButtonNestingContext.Provider>
-    ),
-    // forces it to be a runtime pressStyle so it passes through context text colors
-    disableClassName: true,
-  } as Props
-
-  return {
-    spaceSize,
-    isNested,
-    props,
-  }
-}
+  const wrappedChildren = wrapChildrenInText(
+    Text,
+    { children, noTextWrap },
+    {
+      unstyled: process.env.TAMAGUI_HEADLESS === '1',
+      size: finalSize ?? styledContext?.size,
+    }
+  )
+
+  return (
+    <ButtonNestingContext.Provider value={true}>
+      <Frame
+        ref={ref}
+        {...props}
+        {...(isNested && { tag: 'span' })}
+        // Pass resolved size to circular variant when no explicit size provided
+        {...(props.circular && !propsIn.size && { size })}
+        tabIndex={0}
+        focusable={true}
+      >
+        {themedIcon}
+        {wrappedChildren}
+        {themedIconAfter}
+      </Frame>
+    </ButtonNestingContext.Provider>
+  )
+})
 
-export {
-  Button,
-  ButtonFrame,
-  ButtonIcon,
-  ButtonText,
-  // legacy
-  useButton,
-}
-export type { ButtonProps }
+export const Button = withStaticProperties(ButtonComponent, {
+  Apply: context.Provider,
+  Frame,
+  Text,
+  Icon,
+})

package/src/v1/Button.test.tsx

@@ -0,0 +1,21 @@
+import { getDefaultTamaguiConfig } from '@tamagui/config-default'
+import { createTamagui } from '@tamagui/core'
+import { describe, expect, test } from 'vitest'
+
+const conf = createTamagui(getDefaultTamaguiConfig())
+
+describe('Button', () => {
+  test(`123`, () => {
+    expect(true).toBeTruthy()
+  })
+
+  // test(`Adapts to a when given accessibilityRole="link"`, async () => {
+  //   const { container } = render(
+  //     <TamaguiProvider config={conf} defaultTheme="light">
+  //       <Button href="http://google.com" accessibilityRole="link" />
+  //     </TamaguiProvider>
+  //   )
+
+  //   expect(container.firstChild).toMatchSnapshot()
+  // })
+})