@tamagui/button 2.7.7 → 3.0.0-beta.1091.1

package/src/Button.tsx

@@ -1,226 +1,76 @@
-import { getFontSize } from '@tamagui/font-size'
-import { getButtonSized } from '@tamagui/get-button-sized'
-import { getIcon, useCurrentColor } from '@tamagui/helpers-tamagui'
-import { ButtonNestingContext, getElevation, themeableVariants } from '@tamagui/stacks'
-import type { TextContextStyles, TextParentStyles } from '@tamagui/text'
-import { SizableText, wrapChildrenInText } from '@tamagui/text'
-import type { GetProps, SizeTokens, Token } from '@tamagui/web'
-import {
-  createStyledContext,
-  getTokenValue,
-  styled,
-  useProps,
-  View,
-  withStaticProperties,
-} from '@tamagui/web'
-import type { FunctionComponent, JSX } from 'react'
+import { useGetThemedIcon } from '@tamagui/helpers-tamagui'
+import { ButtonNestingContext } from '@tamagui/stacks'
+import type { TextParentStyles } from '@tamagui/text'
+import { textParentProps, wrapChildrenInText } from '@tamagui/text'
+import type { GetProps, TamaguiComponentPropsBaseBase } from '@tamagui/web'
+import { splitStyleProps, styled, Text, View } from '@tamagui/web'
+import type { FunctionComponent, JSX, ReactNode } from 'react'
 import { useContext } from 'react'
 
-type ButtonVariant = 'outlined'
-
-type ButtonContextStyles = TextContextStyles & {
-  size?: SizeTokens
-  variant?: ButtonVariant
-  elevation?: SizeTokens | number
-}
-
-const context = createStyledContext<ButtonContextStyles>({
-  size: undefined,
-  variant: undefined,
-  color: undefined,
-  elevation: undefined,
-  ellipsis: undefined,
-  fontFamily: undefined,
-  fontSize: undefined,
-  fontStyle: undefined,
-  fontWeight: undefined,
-  letterSpacing: undefined,
-  maxFontSizeMultiplier: undefined,
-  textAlign: undefined,
-})
-
-const Frame = styled(View, {
-  context,
-  name: 'Button',
+export const ButtonFrame = styled(View, {
+  // role is the cross-platform one; render only lands on web
   role: 'button',
   render: <button type="button" />,
   tabIndex: 0,
+  alignItems: 'center',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  justifyContent: 'center',
 
   variants: {
-    unstyled: {
-      true: {
-        // reset browser <button> defaults
-        outlineWidth: 0,
-        borderWidth: 0,
-        backgroundColor: 'transparent',
-      },
-      false: {
-        size: '$true',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexWrap: 'nowrap',
-        flexDirection: 'row',
-        backgroundColor: '$background',
-        borderWidth: 1,
-        borderColor: 'transparent',
-
-        '$platform-web': {
-          cursor: 'pointer',
-        },
-
-        hoverStyle: {
-          backgroundColor: '$backgroundHover',
-          borderColor: '$borderColorHover',
-        },
-
-        pressStyle: {
-          backgroundColor: '$backgroundPress',
-          borderColor: '$borderColorHover',
-        },
-
-        focusVisibleStyle: {
-          outlineColor: '$outlineColor',
-          outlineStyle: 'solid',
-          outlineWidth: 2,
-        },
-      },
-    },
-
-    variant: {
-      outlined:
-        process.env.TAMAGUI_HEADLESS === '1'
-          ? {}
-          : {
-              backgroundColor: 'transparent',
-              borderWidth: 1,
-              borderColor: '$borderColor',
-
-              hoverStyle: {
-                backgroundColor: 'transparent',
-                borderColor: '$borderColorHover',
-              },
-
-              pressStyle: {
-                backgroundColor: 'transparent',
-                borderColor: '$borderColorPress',
-              },
-            },
-    },
-
-    circular: themeableVariants.circular,
-
-    chromeless: themeableVariants.chromeless,
-
-    size: {
-      '...size': (val, extras) => {
-        const buttonStyle = getButtonSized(val, extras)
-        const gap = getTokenValue(val as Token)
-        return {
-          ...buttonStyle,
-          gap,
-        }
-      },
-      ':number': (val, extras) => {
-        const buttonStyle = getButtonSized(val, extras)
-        const gap = val * 0.4
-        return {
-          ...buttonStyle,
-          gap,
-        }
-      },
-    },
-
-    elevation: {
-      '...size': getElevation,
-      ':number': getElevation,
-    },
-
     disabled: {
       true: {
         pointerEvents: 'none',
-        // @ts-ignore
-        'aria-disabled': true,
       },
     },
   } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
 })
 
-const Text = styled(SizableText, {
-  context,
-
-  variants: {
-    unstyled: {
-      false: {
-        userSelect: 'none',
-        // flexGrow 1 leads to inconsistent native style where text pushes to start of view
-        flexGrow: 0,
-        flexShrink: 1,
-        ellipsis: true,
-        color: '$color',
-
-        '$platform-web': {
-          cursor: 'pointer',
-        },
-      },
-    },
-  } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
+export const ButtonText = styled(Text, {
+  // flexGrow 1 pushes text to the start of its parent on native
+  flexGrow: 0,
+  flexShrink: 1,
 })
 
-const Icon = (props: {
-  children: React.ReactNode
+export type ButtonIconProps = {
+  children: ReactNode
+  color?: string
   scaleIcon?: number
-  size?: SizeTokens
-}) => {
-  const { children, scaleIcon = 1, size } = props
-  const styledContext = context.useStyledContext()
-  if (!styledContext) {
-    throw new Error('Button.Icon must be used within a Button')
-  }
-
-  const sizeToken = size ?? styledContext.size
-  const iconColorProp =
-    styledContext.color === 'unset' || typeof styledContext.color === 'number'
-      ? undefined
-      : styledContext.color
-  const iconColor = useCurrentColor(iconColorProp)
-
-  const iconSize =
-    (typeof sizeToken === 'number' ? sizeToken * 0.5 : getFontSize(sizeToken as Token)) *
-    scaleIcon
-
-  return getIcon(children, {
-    size: iconSize,
-    color: iconColor,
-  })
+  size?: number
 }
 
-export const ButtonContext = createStyledContext<{
-  size?: SizeTokens
-  variant?: ButtonVariant
-  color?: ButtonContextStyles['color']
-}>({
-  size: undefined,
-  variant: undefined,
-  color: undefined,
-})
+export const ButtonIcon = ({ children, color, scaleIcon = 1, size }: ButtonIconProps) => {
+  const getThemedIcon = useGetThemedIcon({
+    color,
+    size: size === undefined ? undefined : size * scaleIcon,
+  })
 
-type IconProp = JSX.Element | FunctionComponent<{ color?: any; size?: any }> | null
+  return getThemedIcon(children)
+}
 
-type ButtonExtraProps = TextParentStyles & {
-  icon?: IconProp
-  iconAfter?: IconProp
+type ButtonIconInput =
+  | JSX.Element
+  | FunctionComponent<{ color?: any; size?: any }>
+  | ((props: { color?: any; size?: any }) => ReactNode)
+  | null
+
+/**
+ * The props `useButton` reads and replaces. It hands the frame everything else
+ * untouched, so this is exactly what its result omits.
+ */
+type ButtonConsumedProps = {
+  children?: ReactNode
+  disabled?: boolean
+  render?: TamaguiComponentPropsBaseBase['render']
+
+  icon?: ButtonIconInput
+  iconAfter?: ButtonIconInput
+  iconSize?: number
   scaleIcon?: number
-  iconSize?: SizeTokens
+}
 
-  // native button html props
+/** passed straight through to the rendered `<button>` */
+type ButtonHTMLProps = {
   type?: 'submit' | 'reset' | 'button'
   form?: string
   formAction?: string
@@ -232,132 +82,125 @@ type ButtonExtraProps = TextParentStyles & {
   value?: string | readonly string[] | number
 }
 
-const ButtonComponent = Frame.styleable<ButtonExtraProps>((propsIn, ref) => {
-  const isNested = useContext(ButtonNestingContext)
+export type ButtonBehaviorProps = TextParentStyles & ButtonConsumedProps & ButtonHTMLProps
+
+/**
+ * What `useButton` returns: the caller's props minus the ones it consumed, plus
+ * the ones it decides. Spelled out rather than cast, so a skin that spreads the
+ * result onto a frame is type-checked on exactly what it will receive.
+ */
+export type UseButtonProps<Props> = Omit<
+  Omit<Props, keyof TextParentStyles | keyof typeof textParentProps>,
+  keyof ButtonConsumedProps
+> & {
+  children: ReactNode
+  'aria-disabled'?: boolean
+  disabled?: boolean
+  render?: TamaguiComponentPropsBaseBase['render']
+  tabIndex?: number
+}
+
+export type UseButtonOptions = {
+  Text?: any
+  iconColor?: string
+  iconSize?: number
+  textProps?: Record<string, unknown>
+}
 
-  // Process props through useProps to expand shorthands (like br -> borderRadius)
-  const processedProps = useProps(propsIn, {
-    noNormalize: true,
-    noExpand: true,
+/**
+ * Button behavior: icon theming, wrapping bare children in a text, and the html
+ * nesting rules. Flat text styles are partitioned in one pass and handed to the
+ * wrapped text, with no style resolution hook or text context.
+ */
+export function useButton<Props extends ButtonBehaviorProps>(
+  propsIn: Props,
+  {
+    Text = ButtonText,
+    iconColor,
+    iconSize: iconSizeOption,
+    textProps: textPropsOption,
+  }: UseButtonOptions = {}
+): { isNested: boolean; props: UseButtonProps<Props> } {
+  const isNested = useContext(ButtonNestingContext)
+  const [wrappedTextProps, buttonProps] = splitStyleProps(propsIn, {
+    expandShorthands: true,
+    filter: textParentProps,
   })
 
   const {
     children,
-    iconSize,
+    disabled,
     icon,
     iconAfter,
+    iconSize,
+    render,
     scaleIcon = 1,
-    noTextWrap,
-    textProps,
-    color,
-    ellipsis,
-    fontFamily,
-    fontSize,
-    fontStyle,
-    fontWeight,
-    letterSpacing,
-    maxFontSizeMultiplier,
-    textAlign,
-    ...props
-  } = processedProps
-
-  const size = propsIn.size || (propsIn.unstyled ? undefined : '$true')
+    ...frameProps
+  } = buttonProps
+  const { noTextWrap, textProps, ...textStyleProps } = wrappedTextProps
 
-  const styledContext = context.useStyledContext()
-  const contextColor = color ?? propsIn.color ?? styledContext?.color
-  const iconColorProp =
-    contextColor === 'unset' || typeof contextColor === 'number'
-      ? undefined
-      : contextColor
-  const iconColor = useCurrentColor(iconColorProp)
-  const finalSize = iconSize ?? size ?? styledContext?.size
-  const iconSizeNumber =
-    (typeof finalSize === 'number' ? finalSize * 0.5 : getFontSize(finalSize as Token)) *
-    scaleIcon
-
-  const [themedIcon, themedIconAfter] = [icon, iconAfter].map((icon) => {
-    if (!icon) return null
-    return getIcon(icon, {
-      size: iconSizeNumber,
-      color: iconColor,
-      // No marginLeft or marginRight needed - spacing is handled by the gap property in Frame's size variants
-    })
+  const resolvedIconSize = iconSize ?? iconSizeOption
+  const getThemedIcon = useGetThemedIcon({
+    color: iconColor,
+    size: resolvedIconSize === undefined ? undefined : resolvedIconSize * scaleIcon,
+  })
+  const [themedIcon, themedIconAfter] = [icon, iconAfter].map((item) => {
+    return item ? getThemedIcon(item) : null
   })
 
+  // adjacent text children join into one Text: `<Button>hi {name}</Button>` is
+  // two children, and wrapping them separately lays them out with a gap,
+  // ellipsizes per fragment, reads as fragments to assistive tech, and throws
+  // "Text strings must be rendered within a <Text>" for a bare number on native
   const wrappedChildren = wrapChildrenInText(
     Text,
-    {
-      children,
-      color: contextColor,
-      ellipsis: ellipsis ?? propsIn.ellipsis ?? styledContext?.ellipsis,
-      fontFamily: fontFamily ?? propsIn.fontFamily ?? styledContext?.fontFamily,
-      fontSize: fontSize ?? propsIn.fontSize ?? styledContext?.fontSize,
-      fontStyle: fontStyle ?? propsIn.fontStyle ?? styledContext?.fontStyle,
-      fontWeight: fontWeight ?? propsIn.fontWeight ?? styledContext?.fontWeight,
-      letterSpacing:
-        letterSpacing ?? propsIn.letterSpacing ?? styledContext?.letterSpacing,
-      maxFontSizeMultiplier:
-        maxFontSizeMultiplier ??
-        propsIn.maxFontSizeMultiplier ??
-        styledContext?.maxFontSizeMultiplier,
-      noTextWrap: noTextWrap ?? propsIn.noTextWrap,
-      textAlign: textAlign ?? propsIn.textAlign ?? styledContext?.textAlign,
-      textProps: textProps ?? propsIn.textProps,
-    },
-    {
-      unstyled: process.env.TAMAGUI_HEADLESS === '1',
-      size: finalSize ?? styledContext?.size,
-    }
+    { children, noTextWrap, textProps },
+    { ...textPropsOption, ...textStyleProps }
   )
 
-  const textContext: TextContextStyles = {
-    color: contextColor,
-    ellipsis: ellipsis ?? propsIn.ellipsis ?? styledContext?.ellipsis,
-    fontFamily: fontFamily ?? propsIn.fontFamily ?? styledContext?.fontFamily,
-    fontSize: fontSize ?? propsIn.fontSize ?? styledContext?.fontSize,
-    fontStyle: fontStyle ?? propsIn.fontStyle ?? styledContext?.fontStyle,
-    fontWeight: fontWeight ?? propsIn.fontWeight ?? styledContext?.fontWeight,
-    letterSpacing: letterSpacing ?? propsIn.letterSpacing ?? styledContext?.letterSpacing,
-    maxFontSizeMultiplier:
-      maxFontSizeMultiplier ??
-      propsIn.maxFontSizeMultiplier ??
-      styledContext?.maxFontSizeMultiplier,
-    textAlign: textAlign ?? propsIn.textAlign ?? styledContext?.textAlign,
+  const resolvedRender =
+    render ??
+    (isNested ? 'span' : disabled ? <button type="button" disabled /> : undefined)
+
+  const resolvedProps = {
+    ...frameProps,
+    ...(disabled && {
+      'aria-disabled': true,
+      disabled: true,
+      tabIndex: -1,
+    }),
+    ...(resolvedRender === undefined ? null : { render: resolvedRender }),
+    ...(isNested && {
+      // a nested Button is a presentation part, not a control: strip the
+      // interactive semantics so we never place a focusable role=button (with
+      // its own press/keyboard handlers) inside the outer native <button>. that
+      // nesting is invalid html, adds an extra focus stop, and bubbles
+      // activation to the outer control. resolvedRender already makes it a span.
+      role: 'none',
+      tabIndex: -1,
+      'aria-disabled': undefined,
+      disabled: undefined,
+      onPress: undefined,
+      onPressIn: undefined,
+      onPressOut: undefined,
+      onLongPress: undefined,
+      onClick: undefined,
+      onKeyDown: undefined,
+      onKeyUp: undefined,
+    }),
+    children: (
+      <ButtonNestingContext.Provider value={true}>
+        {themedIcon}
+        {wrappedChildren}
+        {themedIconAfter}
+      </ButtonNestingContext.Provider>
+    ),
   }
 
-  const buttonContext: ButtonContextStyles = {
-    ...styledContext,
-    ...textContext,
-    size: props.size ?? propsIn.size ?? styledContext?.size,
-    variant: props.variant ?? propsIn.variant ?? styledContext?.variant,
-    elevation: props.elevation ?? propsIn.elevation ?? styledContext?.elevation,
+  return {
+    isNested,
+    props: resolvedProps,
   }
+}
 
-  return (
-    <ButtonNestingContext.Provider value={true}>
-      <context.Provider {...buttonContext}>
-        <Frame
-          ref={ref}
-          {...props}
-          {...(isNested && { render: 'span' })}
-          // pass resolved size to circular variant when no explicit size provided
-          {...(props.circular && !propsIn.size && { size })}
-          tabIndex={0}
-        >
-          {themedIcon}
-          {wrappedChildren}
-          {themedIconAfter}
-        </Frame>
-      </context.Provider>
-    </ButtonNestingContext.Provider>
-  )
-})
-
-export const Button = withStaticProperties(ButtonComponent, {
-  Apply: context.Provider,
-  Frame,
-  Text,
-  Icon,
-})
-
-export type ButtonProps = GetProps<typeof ButtonComponent>
+export type ButtonFrameProps = GetProps<typeof ButtonFrame>