@hanzogui/button 2.0.0

package/src/Button.test.tsx

@@ -0,0 +1,45 @@
+import { getDefaultGuiConfig } from '@hanzogui/config-default'
+import { createGui } from '@hanzogui/core'
+import { describe, expect, test } from 'vitest'
+import { Button } from './Button'
+
+const conf = createGui(getDefaultGuiConfig())
+
+describe('Button', () => {
+  test(`123`, () => {
+    expect(true).toBeTruthy()
+  })
+
+  // type tests for native button props (issue #3914)
+  test('accepts native button html props', () => {
+    // these should type check without errors
+    const _submitBtn = <Button type="submit">Submit</Button>
+    const _resetBtn = <Button type="reset">Reset</Button>
+    const _buttonBtn = <Button type="button">Button</Button>
+    const _formBtn = (
+      <Button
+        type="submit"
+        form="myForm"
+        formAction="/submit"
+        formMethod="post"
+        formTarget="_blank"
+        formNoValidate
+        name="submitBtn"
+        value="submit"
+      >
+        Submit
+      </Button>
+    )
+    expect(true).toBeTruthy()
+  })
+
+  // test(`Adapts to a when given accessibilityRole="link"`, async () => {
+  //   const { container } = render(
+  //     <GuiProvider config={conf} defaultTheme="light">
+  //       <Button href="http://google.com" accessibilityRole="link" />
+  //     </GuiProvider>
+  //   )
+
+  //   expect(container.firstChild).toMatchSnapshot()
+  // })
+})

package/src/Button.tsx

@@ -0,0 +1,272 @@
+import { getFontSize } from '@hanzogui/font-size'
+import { getButtonSized } from '@hanzogui/get-button-sized'
+import { getIcon, useCurrentColor } from '@hanzogui/helpers'
+import { ButtonNestingContext, getElevation, themeableVariants } from '@hanzogui/stacks'
+import { SizableText, wrapChildrenInText } from '@hanzogui/text'
+import type { ColorTokens, GetProps, SizeTokens, Token } from '@hanzogui/web'
+import {
+  createStyledContext,
+  getTokenValue,
+  styled,
+  useProps,
+  View,
+  withStaticProperties,
+} from '@hanzogui/web'
+import type { FunctionComponent, JSX } from 'react'
+import { useContext } from 'react'
+
+type ButtonVariant = 'outlined'
+
+const context = createStyledContext<{
+  size?: SizeTokens
+  variant?: ButtonVariant
+  color?: ColorTokens | string
+  elevation?: SizeTokens | number
+}>({
+  size: undefined,
+  variant: undefined,
+  color: undefined,
+  elevation: undefined,
+})
+
+const Frame = styled(View, {
+  context,
+  name: 'Button',
+  role: 'button',
+  render: <button type="button" />,
+  tabIndex: 0,
+
+  variants: {
+    unstyled: {
+      false: {
+        size: '$true',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexWrap: 'nowrap',
+        flexDirection: 'row',
+        cursor: 'pointer',
+        backgroundColor: '$background',
+        borderWidth: 1,
+        borderColor: 'transparent',
+
+        hoverStyle: {
+          backgroundColor: '$backgroundHover',
+          borderColor: '$borderColorHover',
+        },
+
+        pressStyle: {
+          backgroundColor: '$backgroundPress',
+          borderColor: '$borderColorHover',
+        },
+
+        focusVisibleStyle: {
+          outlineColor: '$outlineColor',
+          outlineStyle: 'solid',
+          outlineWidth: 2,
+        },
+      },
+    },
+
+    variant: {
+      outlined:
+        process.env.HANZO_GUI_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.HANZO_GUI_HEADLESS === '1',
+  },
+})
+
+const Text = styled(SizableText, {
+  context,
+
+  variants: {
+    unstyled: {
+      false: {
+        userSelect: 'none',
+        cursor: 'pointer',
+        // flexGrow 1 leads to inconsistent native style where text pushes to start of view
+        flexGrow: 0,
+        flexShrink: 1,
+        ellipsis: true,
+        color: '$color',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+  },
+})
+
+const Icon = (props: {
+  children: React.ReactNode
+  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 iconColor = useCurrentColor(styledContext.color)
+
+  const iconSize =
+    (typeof sizeToken === 'number' ? sizeToken * 0.5 : getFontSize(sizeToken as Token)) *
+    scaleIcon
+
+  return getIcon(children, {
+    size: iconSize,
+    color: iconColor,
+  })
+}
+
+export const ButtonContext = createStyledContext<{
+  size?: SizeTokens
+  variant?: ButtonVariant
+  color?: ColorTokens | string
+}>({
+  size: undefined,
+  variant: undefined,
+  color: undefined,
+})
+
+type IconProp = JSX.Element | FunctionComponent<{ color?: any; size?: any }> | null
+
+type ButtonExtraProps = {
+  icon?: IconProp
+  iconAfter?: IconProp
+  scaleIcon?: number
+  iconSize?: SizeTokens
+
+  // native button html props
+  type?: 'submit' | 'reset' | 'button'
+  form?: string
+  formAction?: string
+  formEncType?: string
+  formMethod?: string
+  formNoValidate?: boolean
+  formTarget?: string
+  name?: string
+  value?: string | readonly string[] | number
+}
+
+const ButtonComponent = Frame.styleable<ButtonExtraProps>((propsIn, ref) => {
+  const isNested = useContext(ButtonNestingContext)
+
+  // Process props through useProps to expand shorthands (like br -> borderRadius)
+  const processedProps = useProps(propsIn, {
+    noNormalize: true,
+    noExpand: true,
+  })
+
+  const { children, iconSize, icon, iconAfter, scaleIcon = 1, ...props } = processedProps
+
+  const size = propsIn.size || (propsIn.unstyled ? undefined : '$true')
+
+  const styledContext = context.useStyledContext()
+  const iconColor = useCurrentColor(styledContext?.color)
+  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 wrappedChildren = wrapChildrenInText(
+    Text,
+    { children },
+    {
+      unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+      size: finalSize ?? styledContext?.size,
+    }
+  )
+
+  return (
+    <ButtonNestingContext.Provider value={true}>
+      <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>
+    </ButtonNestingContext.Provider>
+  )
+})
+
+export const Button = withStaticProperties(ButtonComponent, {
+  Apply: context.Provider,
+  Frame,
+  Text,
+  Icon,
+})
+
+export type ButtonProps = GetProps<typeof ButtonComponent>

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Button'

package/src/v1/Button.test.tsx

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

package/src/v1/Button.tsx

@@ -0,0 +1,336 @@
+import { getFontSize } from '@hanzogui/font-size'
+import { getButtonSized } from '@hanzogui/get-button-sized'
+import { withStaticProperties } from '@hanzogui/helpers'
+import { useGetThemedIcon } from '@hanzogui/helpers'
+import { ButtonNestingContext, ThemeableStack } from '@hanzogui/stacks'
+import type { TextContextStyles, TextParentStyles } from '@hanzogui/text'
+import { SizableText, wrapChildrenInText } from '@hanzogui/text'
+import type { FontSizeTokens, GetProps, SizeTokens, ThemeableProps } from '@hanzogui/web'
+import { createStyledContext, getVariableValue, styled, useProps } from '@hanzogui/web'
+import type { FunctionComponent, JSX } from 'react'
+import { useContext } from 'react'
+import { spacedChildren } from '@hanzogui/spacer'
+
+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,
+  ellipsis: undefined,
+  fontFamily: undefined,
+  fontSize: undefined,
+  fontStyle: undefined,
+  fontWeight: undefined,
+  letterSpacing: undefined,
+  maxFontSizeMultiplier: undefined,
+  size: undefined,
+  textAlign: undefined,
+  variant: 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,
+  render: 'button',
+  context: ButtonContext,
+  role: 'button',
+  focusable: true,
+
+  variants: {
+    unstyled: {
+      false: {
+        size: '$true',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexWrap: 'nowrap',
+        flexDirection: 'row',
+        cursor: 'pointer',
+        hoverTheme: true,
+        pressTheme: true,
+        backgroundColor: '$background',
+        borderWidth: 1,
+        borderColor: 'transparent',
+
+        focusVisibleStyle: {
+          outlineColor: '$outlineColor',
+          outlineStyle: 'solid',
+          outlineWidth: 2,
+        },
+      },
+    },
+
+    variant: {
+      outlined: {
+        backgroundColor: 'transparent',
+        borderWidth: 2,
+        borderColor: '$borderColor',
+
+        hoverStyle: {
+          backgroundColor: 'transparent',
+          borderColor: '$borderColorHover',
+        },
+
+        pressStyle: {
+          backgroundColor: 'transparent',
+          borderColor: '$borderColorPress',
+        },
+
+        focusVisibleStyle: {
+          backgroundColor: 'transparent',
+          borderColor: '$borderColorFocus',
+        },
+      },
+    },
+
+    size: {
+      '...size': getButtonSized,
+      ':number': getButtonSized,
+    },
+
+    disabled: {
+      true: {
+        pointerEvents: 'none',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+  },
+})
+
+const ButtonText = styled(SizableText, {
+  name: 'Button',
+  context: ButtonContext,
+
+  variants: {
+    unstyled: {
+      false: {
+        userSelect: 'none',
+        cursor: 'pointer',
+        // flexGrow 1 leads to inconsistent native style where text pushes to start of view
+        flexGrow: 0,
+        flexShrink: 1,
+        ellipsis: true,
+        color: '$color',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+  },
+})
+
+const ButtonIcon = (props: { children: React.ReactNode; scaleIcon?: number }) => {
+  const { children, scaleIcon = 1 } = props
+  const { size, color } = useContext(ButtonContext)
+
+  const iconSize =
+    (typeof size === 'number' ? size * 0.5 : getFontSize(size as FontSizeTokens)) *
+    scaleIcon
+
+  const getThemedIcon = useGetThemedIcon({ size: iconSize, color: color as any })
+  return getThemedIcon(children)
+}
+
+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://gui.dev/ui/button
+ */
+const Button = withStaticProperties(ButtonComponent, {
+  Text: ButtonText,
+  Icon: ButtonIcon,
+})
+
+/**
+ * @deprecated Instead of useButton, see the Button docs for the newer and much improved Advanced customization pattern: https://gui.dev/docs/components/button
+ */
+function useButton<Props extends ButtonProps>(
+  { textProps, ...propsIn }: Props,
+  { Text = Button.Text }: { Text: any } = { Text: Button.Text }
+) {
+  const isNested = useContext(ButtonNestingContext)
+  const propsActive = useProps(propsIn, {
+    noNormalize: true,
+    noExpand: true,
+  }) as any as ButtonProps
+
+  // careful not to destructure and re-order props, order is important
+  const {
+    icon,
+    iconAfter,
+    gap,
+    spaceFlex,
+    scaleIcon = 1,
+    scaleSpace = 0.66,
+    noTextWrap,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    fontStyle,
+    letterSpacing,
+    render,
+    ellipsis,
+    maxFontSizeMultiplier,
+
+    ...restProps
+  } = propsActive
+
+  const size = propsActive.size || (propsActive.unstyled ? undefined : '$true')
+
+  const color = propsActive.color as any
+
+  const iconSize =
+    (typeof size === 'number'
+      ? size * 0.5
+      : getFontSize(size as FontSizeTokens, {
+          font: fontFamily?.[0] === '$' ? (fontFamily as any) : undefined,
+        })) * scaleIcon
+
+  const getThemedIcon = useGetThemedIcon({
+    size: iconSize,
+    color,
+  })
+
+  const [themedIcon, themedIconAfter] = [icon, iconAfter].map(getThemedIcon)
+  const spaceSize = gap ?? getVariableValue(iconSize) * scaleSpace
+  const contents = noTextWrap
+    ? [propsIn.children]
+    : wrapChildrenInText(
+        Text,
+        {
+          children: propsIn.children,
+          fontFamily,
+          fontSize,
+          textProps,
+          fontWeight,
+          fontStyle,
+          letterSpacing,
+          ellipsis,
+          maxFontSizeMultiplier,
+        },
+        Text === ButtonText && propsActive.unstyled !== true
+          ? {
+              unstyled: process.env.HANZO_GUI_HEADLESS === '1',
+              size,
+            }
+          : undefined
+      )
+
+  const inner = spacedChildren({
+    // a bit arbitrary but scaling to font size is necessary so long as button does
+    space: spaceSize,
+    spaceFlex,
+    ensureKeys: true,
+    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 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
+    render:
+      render ??
+      (isNested
+        ? 'span'
+        : // defaults to <a /> when accessibilityRole = link
+          // see https://github.com/gui/gui/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,
+  }
+}
+
+export {
+  Button,
+  ButtonFrame,
+  ButtonIcon,
+  ButtonText,
+  // legacy
+  useButton,
+}
+export type { ButtonProps }

package/src/v1/index.ts

@@ -0,0 +1 @@
+export * from './Button'