@graphprotocol/gds-react 0.1.0 → 0.1.2

package/src/GDSProvider.tsx

@@ -4,13 +4,15 @@ import {
   createContext,
   useEffect,
   useLayoutEffect,
+  useMemo,
   useRef,
   useState,
   type ComponentProps,
 } from 'react'
-import { DirectionProvider } from '@base-ui-components/react/direction-provider'
-import { Tooltip } from '@base-ui-components/react/tooltip'
+import { DirectionProvider } from '@base-ui/react/direction-provider'
+import { Tooltip } from '@base-ui/react/tooltip'
 
+import { ButtonOrLink, type ButtonOrLinkConfigProps } from './components/base/ButtonOrLink.tsx'
 import { cn } from './utils/index.ts'
 
 type Theme = 'dark' | 'light' | 'system'
@@ -48,6 +50,7 @@ export interface GDSProviderProps extends Omit<ComponentProps<'div'>, 'dir'> {
   direction?: ComponentProps<typeof DirectionProvider>['direction'] | undefined
   /** Defaults to `en` if `direction` is `ltr`, or `ar` if `direction` is `rtl`. */
   language?: string | undefined
+  buttonOrLinkConfig?: Omit<ButtonOrLinkConfigProps, 'children'> | undefined
 }
 
 export interface GDSContextValue {
@@ -67,7 +70,8 @@ export const GDSContext = createContext<GDSContextValue | null>(null)
  *
  * Currently implements:
  *
- * - An easy way to configure the root theme (dark/light/system) and text direction.
+ * - An easy way to configure the root theme (dark/light/system), text direction, and `ButtonOrLink`
+ *   config.
  * - Space key handler for improved `active` state behavior.
  * - Shared delay for multiple tooltips (once a tooltip is visible, adjacent tooltips show instantly).
  *
@@ -87,6 +91,7 @@ export function GDSProvider({
   theme = DEFAULT_THEME,
   direction = 'ltr',
   language = direction === 'rtl' ? 'ar' : 'en',
+  buttonOrLinkConfig,
   children,
   className,
   ...props
@@ -203,20 +208,32 @@ export function GDSProvider({
     }
   }, [])
 
+  const gdsContextValue = useMemo(
+    () => ({
+      theme,
+      activeTheme,
+      direction,
+      language,
+    }),
+    [theme, activeTheme, direction, language],
+  )
+
   return (
-    <GDSContext.Provider value={{ theme, activeTheme, direction, language }}>
+    <GDSContext.Provider value={gdsContextValue}>
       <DirectionProvider direction={direction}>
         <Tooltip.Provider timeout={300}>
-          {/* Prevent a flash of incorrect theme in server-side rendered apps (e.g. Next.js) */}
-          <PreHydrationStyle>{THEME_SSR_CSS[theme]}</PreHydrationStyle>
-          <div
-            dir={direction}
-            lang={language}
-            className={cn('gds-provider isolate', themeClass, className)}
-            {...props}
-          >
-            {children}
-          </div>
+          <ButtonOrLink.Config {...buttonOrLinkConfig}>
+            {/* Prevent a flash of incorrect theme in server-side rendered apps (e.g. Next.js) */}
+            <PreHydrationStyle>{THEME_SSR_CSS[theme]}</PreHydrationStyle>
+            <div
+              dir={direction}
+              lang={language}
+              className={cn('gds-provider isolate', themeClass, className)}
+              {...props}
+            >
+              {children}
+            </div>
+          </ButtonOrLink.Config>
         </Tooltip.Provider>
       </DirectionProvider>
     </GDSContext.Provider>

package/src/components/Address.tsx

@@ -48,6 +48,8 @@ export function Address({
 }: AddressProps) {
   useGDS()
 
+  const { rootProps, nestedProps } = splitProps(props)
+
   const [stateRef, state] = useCSSState({
     pointer: undefined,
     focus: undefined,
@@ -59,7 +61,6 @@ export function Address({
     { variant, size, copy },
     { ref: stateRef },
   )
-  const { rootProps, nestedProps } = splitProps(props)
 
   const address = passedAddress || ZERO_ADDRESS
 
@@ -67,7 +68,7 @@ export function Address({
     <span
       ref={cssPropsPolyfillStateRef}
       className={cn(
-        `gds-address isolate root-grid *:col-span-full *:row-span-full u:h-max u:w-max u:max-w-full
+        `gds-address isolate root-grid *:col-span-full *:row-span-full u:size-max u:max-w-full
         u:state-[show-copy=false]
         u:hover:state-[show-copy]
         u:hover:state-hover
@@ -141,10 +142,14 @@ export function Address({
         {avatar !== null ? (
           <Avatar
             shape="circle"
-            src={[
-              ...(avatar ? (Array.isArray(avatar) ? avatar : [avatar]) : []),
-              createIdenticon(address),
-            ]}
+            src={
+              avatar && typeof avatar !== 'string' && !Array.isArray(avatar)
+                ? avatar
+                : [
+                    ...(avatar ? (Array.isArray(avatar) ? avatar : [avatar]) : []),
+                    createIdenticon(address),
+                  ]
+            }
             alt=""
             className={`
               @prop-variant-enclosed/address:-ms-px

package/src/components/Avatar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, type ReactElement } from 'react'
 import { useDeepCompareEffect } from '@react-hookz/web'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
@@ -20,9 +20,10 @@ export declare namespace AvatarProps {
   interface BaseProps extends GDSComponentProps<typeof AvatarMeta> {
     /**
      * Image source URL or array of URLs to try as fallbacks. If an array is provided, each URL will
-     * be tried in order until one loads successfully.
+     * be tried in order until one loads successfully. Alternatively, this can be a React element
+     * (e.g. an icon) for custom avatar content.
      */
-    src: string | string[] | undefined
+    src: string | string[] | ReactElement | undefined
     /**
      * Text used as the avatar's accessible name (e.g. the username or address of the represented
      * user). Necessary if the avatar is clickable, recommended otherwise (unless the same
@@ -101,7 +102,7 @@ export function Avatar({
               <span className="nested/avatar-paint pointer-events-none shrink-0">
                 <span
                   className={`
-                    block overflow-clip bg-elevated
+                    block overflow-clip bg-default
                     group-clickable-focus-visible/avatar:outline
                     @prop-size-xsmall/avatar:size-4
                     @prop-size-small/avatar:size-5
@@ -112,18 +113,29 @@ export function Avatar({
                     @prop-shape-rounded/avatar:rounded-4
                     @prop-shape-rounded/avatar:@prop-size-xsmall/avatar:rounded-2
                     @prop-shape-rounded/avatar:@prop-size-xlarge/avatar:rounded-8
+                    uu:*:absolute
+                    uu:*:inset-0
+                    uu:*:m-auto
+                    uu:*:size-full
+                    uu:*:object-cover
+                    i:@prop-size-xsmall/avatar:**:icon:default-size-2.5
+                    i:@prop-size-small/avatar:**:icon:default-size-3
+                    i:@prop-size-medium/avatar:**:icon:default-size-4
+                    i:@prop-size-large/avatar:**:icon:default-size-5
+                    i:@prop-size-xlarge/avatar:**:icon:default-size-8
                   `}
                 >
                   {src ? (
-                    <img
-                      src={src}
-                      alt=""
-                      onError={() => setCurrentSourceIndex(currentSourceIndex + 1)}
-                      className={`
-                        absolute top-0 left-0 size-full object-cover
-                        [[src^='data:image/bmp']]:[image-rendering:pixelated]
-                      `}
-                    />
+                    typeof src === 'string' ? (
+                      <img
+                        src={src}
+                        alt=""
+                        onError={() => setCurrentSourceIndex(currentSourceIndex + 1)}
+                        className="[[src^='data:image/bmp']]:[image-rendering:pixelated]"
+                      />
+                    ) : (
+                      src
+                    )
                   ) : null}
                   {alt ? <span className="sr-only">{alt}</span> : null}
                 </span>

package/src/components/Breadcrumbs.parts.tsx

@@ -11,9 +11,9 @@ import {
 import { isEqual } from '@ver0/deep-equal'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
+import { ArrowLeftInteractiveIcon, DotsThreeIcon } from '@graphprotocol/gds-react/icons'
 
 import { useCSSPropsPolyfill, useCSSState, useGDS } from '../hooks/index.ts'
-import { ArrowLeftInteractiveIcon, DotsThreeIcon } from '../icons/index.generated.ts'
 import { cn, getCSSPropsAttributes, splitProps } from '../utils/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { MaybeButtonOrLink, type MaybeButtonOrLinkProps } from './base/MaybeButtonOrLink.tsx'
@@ -258,6 +258,7 @@ export function BreadcrumbsItem({
   children,
   ...props
 }: BreadcrumbsItemProps) {
+  const { rootProps, nestedProps } = splitProps(props)
   const current = passedCurrent ?? props.href === undefined
 
   const [stateRef, state] = useCSSState({
@@ -266,16 +267,14 @@ export function BreadcrumbsItem({
     current,
   })
 
-  const { rootProps, nestedProps } = splitProps(props)
-
   return (
     <div
       ref={stateRef}
       role="listitem"
       className={cn(
-        `nested/breadcrumbs-item-wrapper gds-breadcrumbs-item root-block last:float-right
+        `nested/breadcrumbs-item-wrapper gds-breadcrumbs-item root-block
         u:has-nested-current/breadcrumbs-item-ref:expose-current
-        u:has-nested-hover/breadcrumbs-item-ref:state-hover
+        u:has-nested-hover/breadcrumbs-item-ref:expose-hover
         u:has-nested-focus-visible/breadcrumbs-item-ref:expose-focus
         u:i:has-nested-not-clickable/breadcrumbs-item-ref:state-idle
         ii:shrink-0`,

package/src/components/Button.tsx

@@ -3,9 +3,9 @@
 import type { ComponentProps } from 'react'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
+import { LoadingIcon } from '@graphprotocol/gds-react/icons'
 
 import { useCSSPropsPolyfill, useCSSState, useGDS } from '../hooks/index.ts'
-import { LoadingIcon } from '../icons/index.generated.ts'
 import { cn, getCSSPropsAttributes, isReactNode } from '../utils/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'
@@ -132,10 +132,10 @@ export function Button({
       >
         <span
           className={`
-            nested/button-paint pointer-events-none flex h-(--height) grow items-center justify-center
+            nested/button-paint pointer-events-none flex h-(--height) max-w-full min-w-full grow items-center justify-center
             rounded-(--gds-button-radius) border-(length:--border-width) border-(--gds-button-border)
             bg-(--gds-button-bg) text-(--gds-button-fg) transition [--border-width:1px]
-            @state-[addon-only=auto]/button:min-w-(--height)
+            @state-[addon-only=auto]/button:w-(--height)
             @prop-variant-naked/button:transition-[color]
             @prop-variant-naked/button:[--border-width:0px]
             @prop-size-xsmall/button:px-1.25
@@ -170,7 +170,7 @@ export function Button({
               @prop-variant-naked/button:-inset-0.5
             `}
           />
-          {addonBefore ? <ButtonAddon>{addonBefore}</ButtonAddon> : null}
+          {addonBefore ? <ButtonAddon side="before">{addonBefore}</ButtonAddon> : null}
           {children ? (
             <span
               data-loading={replaceChildrenWithLoading || undefined}
@@ -190,18 +190,28 @@ export function Button({
             </span>
           ) : null}
           {replaceChildrenWithLoading ? loadingIcon : null}
-          {addonAfter ? <ButtonAddon>{addonAfter}</ButtonAddon> : null}
+          {addonAfter ? <ButtonAddon side="after">{addonAfter}</ButtonAddon> : null}
         </span>
       </ButtonOrLink>
     </Tooltip>
   )
 }
 
-function ButtonAddon({ className, children, ...props }: ComponentProps<'span'>) {
+function ButtonAddon({
+  side,
+  className,
+  children,
+  ...props
+}: ComponentProps<'span'> & { side: 'before' | 'after' }) {
   return (
     <span
+      data-side={side}
       className={cn(
         `gds-addon root-flex items-center justify-center u:h-(--gds-addon-size) u:min-w-(--gds-addon-size) u:shrink-0
+        u:has-avatar-group:data-[side=after]:ps-0.5
+        u:has-tag:data-[side=after]:ps-0.5
+        u:has-avatar-group:data-[side=before]:pe-0.5
+        u:has-tag:data-[side=before]:pe-0.5
         u:has-nested/button-loading:opacity-100`,
         className,
       )}

package/src/components/Card.tsx

@@ -3,9 +3,9 @@
 import { useId, type ReactNode } from 'react'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
+import { ArrowUpRightInteractiveIcon } from '@graphprotocol/gds-react/icons'
 
 import { useCSSPropsPolyfill, useCSSState, useGDS } from '../hooks/index.ts'
-import { ArrowUpRightInteractiveIcon } from '../icons/index.generated.ts'
 import { cn, getCSSPropsAttributes, splitProps } from '../utils/index.ts'
 import { MaybeButtonOrLink, type MaybeButtonOrLinkProps } from './base/MaybeButtonOrLink.tsx'
 import { CardMeta } from './Card.meta.ts'
@@ -66,6 +66,7 @@ export function Card({
     autoIcon = true,
     ...remainingProps
   } = props as CardProps.ButtonProps | CardProps.LinkProps
+  const { rootProps, nestedProps } = splitProps(remainingProps)
 
   const [statePassedRef, state] = useCSSState(
     {
@@ -80,7 +81,6 @@ export function Card({
     { variant },
     { ref: statePassedRef },
   )
-  const { rootProps, nestedProps } = splitProps(remainingProps)
 
   const Element = as ?? 'div'
   const uniqueId = useId()
@@ -121,7 +121,7 @@ export function Card({
         `}
         {...state.polyfillAttributes}
         {...nestedProps}
-        {...((as !== undefined ? { as: 'span' } : {}) as Record<string, unknown>)}
+        {...(as !== undefined && ({ as: 'span' } as Record<string, unknown>))}
         render={(renderProps, { Element, category, target }) => {
           const renderChildrenOutside = interactiveContent === true && category !== 'other'
           const contentId =

package/src/components/Checkbox.parts.tsx

@@ -3,9 +3,9 @@
 import type { ComponentProps, ReactNode } from 'react'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
+import { CheckIcon, MinusIcon } from '@graphprotocol/gds-react/icons'
 
 import { useControlled, useGDS } from '../hooks/index.ts'
-import { CheckIcon, MinusIcon } from '../icons/index.generated.ts'
 import { cn, splitProps } from '../utils/index.ts'
 import { Checkable, type CheckableLabelProps } from './base/Checkable.tsx'
 import type { CheckboxMeta } from './Checkbox.meta.ts'

package/src/components/Chip.meta.ts

@@ -0,0 +1,23 @@
+import { createComponent } from '@graphprotocol/gds-css'
+
+export const ChipMeta = createComponent('Chip', {
+  cssProps: {
+    /** @default 'medium' */
+    size: {
+      type: 'values',
+      values: ['small', 'medium', 'large'],
+      defaultValue: 'medium',
+    },
+  },
+})
+
+export const ChipGroupMeta = createComponent('ChipGroup', {
+  cssProps: {
+    /** @default 'medium' */
+    size: {
+      type: 'values',
+      values: ChipMeta.cssProps.size.values,
+      defaultValue: ChipMeta.cssProps.size.defaultValue,
+    },
+  },
+})