@graphprotocol/gds-react 0.1.1 → 0.2.0

package/src/GDSProvider.tsx

@@ -48,7 +48,7 @@ export interface GDSProviderProps extends Omit<ComponentProps<'div'>, 'dir'> {
   theme?: Theme | undefined
   /** @default 'ltr' */
   direction?: ComponentProps<typeof DirectionProvider>['direction'] | undefined
-  /** Defaults to `en` if `direction` is `ltr`, or `ar` if `direction` is `rtl`. */
+  /** @default 'en' // or if `direction` is `rtl`, 'ar' */
   language?: string | undefined
   buttonOrLinkConfig?: Omit<ButtonOrLinkConfigProps, 'children'> | undefined
 }
@@ -77,15 +77,17 @@ export const GDSContext = createContext<GDSContextValue | null>(null)
  *
  * @example
  *
- *     import { GDSProvider } from '@graphprotocol/gds-react'
+ * ```tsx
+ * import { GDSProvider } from '@graphprotocol/gds-react'
  *
- *     function App() {
- *       return (
- *         <GDSProvider theme="dark">
- *           <YourApp />
- *         </GDSProvider>
- *       )
- *     }
+ * function App() {
+ *   return (
+ *     <GDSProvider theme="dark">
+ *       <YourApp />
+ *     </GDSProvider>
+ *   )
+ * }
+ * ```
  */
 export function GDSProvider({
   theme = DEFAULT_THEME,

package/src/components/Address.tsx

@@ -68,10 +68,10 @@ export function Address({
     <span
       ref={cssPropsPolyfillStateRef}
       className={cn(
-        `gds-address isolate root-grid *:col-span-full *:row-span-full u:size-max u:max-w-full
+        `gds-address 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
+        u:hover:state-[show-copy]
         u:has-copy-button-focus:state-[show-copy]
         u:has-nested-not-clickable/address-ref:cursor-default
         u:has-nested-focus-visible/address-ref:expose-focus

package/src/components/Avatar.tsx

@@ -88,23 +88,17 @@ export function Avatar({
       {...cssPropsPolyfillAttributes}
       {...props}
       render={(renderProps, { Element, category }) => {
-        let tooltipProps: Omit<TooltipProps, 'children'> = {
-          content: category !== 'other' ? alt : undefined,
-        }
-        if (tooltip !== undefined) {
-          tooltipProps = isReactNode(tooltip)
-            ? { content: tooltip }
-            : { ...tooltipProps, ...tooltip }
-        }
         return (
-          <Tooltip {...tooltipProps}>
+          <Tooltip
+            content={category !== 'other' ? alt : undefined}
+            {...(isReactNode(tooltip) ? { content: tooltip } : tooltip)}
+          >
             <Element {...renderProps}>
               <span className="nested/avatar-paint pointer-events-none shrink-0">
                 <span
                   className={`
                     block overflow-clip bg-default
                     group-clickable-focus-visible/avatar:outline
-                    **:icon:default-size-[60%]
                     @prop-size-xsmall/avatar:size-4
                     @prop-size-small/avatar:size-5
                     @prop-size-medium/avatar:size-6
@@ -119,6 +113,11 @@ export function Avatar({
                     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 ? (
@@ -130,7 +129,7 @@ export function Avatar({
                         className="[[src^='data:image/bmp']]:[image-rendering:pixelated]"
                       />
                     ) : (
-                      src
+                      <Tooltip.Collector>{src}</Tooltip.Collector>
                     )
                   ) : null}
                   {alt ? <span className="sr-only">{alt}</span> : null}

package/src/components/Breadcrumbs.meta.ts

@@ -11,4 +11,6 @@ export const BreadcrumbsMeta = createComponent('Breadcrumbs', {
   },
 })
 
-export const BreadcrumbsItemMeta = createComponent('BreadcrumbsItem')
+export const BreadcrumbsItemMeta = createComponent('BreadcrumbsItem', {
+  isolate: 'allow-inheritance',
+})

package/src/components/Breadcrumbs.parts.tsx

@@ -1,13 +1,7 @@
 'use client'
 
-import {
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  type ComponentProps,
-  type CSSProperties,
-} from 'react'
+import { useCallback, useRef, useState, type ComponentProps, type CSSProperties } from 'react'
+import { useRenderCount, useThrottledEffect } from '@react-hookz/web'
 import { isEqual } from '@ver0/deep-equal'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
@@ -84,24 +78,16 @@ export function BreadcrumbsRoot({
     )
   }, [])
 
-  // Call `updateWrappedCount` after every render and on resize
-  const firstRender = useRef(true)
-  useEffect(() => {
-    /**
-     * The timeout prevents a "Maximum update depth exceeded" error in the unlikely event of an
-     * infinite loop due to `hiddenItems` causing a layout change that makes items wrap differently.
-     * But we don't want it on the first render because it can cause a flash of incorrect state.
-     */
-    if (firstRender.current) {
-      firstRender.current = false
-      updateWrappedCount()
-      return
-    }
-    const timeout = window.setTimeout(() => {
-      updateWrappedCount()
-    }, 0)
-    return () => window.clearTimeout(timeout)
-  })
+  /**
+   * Call `updateWrappedCount` after every render, with `useThrottledEffect` to prevent a "Maximum
+   * update depth exceeded" error in the unlikely event of an infinite loop due to `hiddenItems`
+   * causing a layout change that makes items wrap differently (change `-ms-10` below to `-ms-20` to
+   * see how that can happen).
+   */
+  const renderCount = useRenderCount()
+  useThrottledEffect(updateWrappedCount, [renderCount], 1)
+
+  // Call `updateWrappedCount` on resize
   const resizeObserverRef = useRef<ResizeObserver | null>(null)
   const hiddenContainerRefCallback = useCallback(
     (element: HTMLDivElement | null) => {
@@ -123,7 +109,7 @@ export function BreadcrumbsRoot({
       ref={cssPropsPolyfillPassedRef}
       aria-label={ariaLabel}
       className={cn(
-        'gds-breadcrumbs isolate root-grid *:col-span-full *:row-span-full u:max-w-full u:text-14',
+        'gds-breadcrumbs root-grid *:col-span-full *:row-span-full u:max-w-full u:text-14',
         className,
       )}
       {...getCSSPropsAttributes(BreadcrumbsMeta, { align }, style)}
@@ -184,7 +170,8 @@ export function BreadcrumbsRoot({
                     <DotsThreeIcon alt="Show hidden items" className="top-1.25" />
                   </Button>
                 }
-                position={{ align: 'center', gap: 4 }}
+                align="center"
+                gap={4}
               >
                 {hiddenItems.map((item, index) => (
                   <Menu.Item
@@ -234,6 +221,7 @@ BreadcrumbsRoot.displayName = 'Breadcrumbs'
 export declare namespace BreadcrumbsItemProps {
   interface BaseProps extends GDSComponentProps<typeof BreadcrumbsItemMeta> {
     addonBefore?: AddonValue | undefined
+    // TODO: Add `addonAfter` prop, e.g. for `CaretDownInteractiveIcon` when `Breadcrumbs.Item` is a menu trigger?
     /**
      * Whether this breadcrumb item represents the current page. Defaults to `true` if no `href` is
      * passed, or `false` otherwise.
@@ -272,9 +260,9 @@ export function BreadcrumbsItem({
       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

@@ -10,7 +10,7 @@ import { cn, getCSSPropsAttributes, isReactNode } from '../utils/index.ts'
 import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { ButtonOrLink, type ButtonOrLinkProps } from './base/ButtonOrLink.tsx'
 import { ButtonMeta } from './Button.meta.ts'
-import { Tooltip, useCollectedTooltip, type TooltipProps } from './Tooltip.tsx'
+import { Tooltip, type TooltipProps } from './Tooltip.tsx'
 
 export declare namespace ButtonProps {
   interface BaseProps extends GDSComponentProps<typeof ButtonMeta> {
@@ -86,14 +86,8 @@ export function Button({
   const addonAfter = getAddon(passedAddonAfter, loading)
   const replaceChildrenWithLoading = loading && !addonBefore && !addonAfter
 
-  const { onCollect, collectedContent } = useCollectedTooltip()
-  let tooltipProps: Omit<TooltipProps, 'children'> = { content: collectedContent }
-  if (tooltip !== undefined) {
-    tooltipProps = isReactNode(tooltip) ? { content: tooltip } : { ...tooltipProps, ...tooltip }
-  }
-
   return (
-    <Tooltip {...tooltipProps}>
+    <Tooltip {...(isReactNode(tooltip) ? { content: tooltip } : tooltip)}>
       <ButtonOrLink
         ref={cssPropsPolyfillStatePassedRef}
         disabled={disabled || (loading ? 'focusable' : false)}
@@ -101,7 +95,7 @@ export function Button({
         data-variant={cssProps.variant}
         data-hide-label={cssProps.hideLabel || undefined}
         className={cn(
-          `gds-button root-flex flex-col u:size-max u:max-w-full u:font-regular u:outline-0
+          `gds-button root-flex flex-col u:size-max u:max-w-full u:outline-0
           u:checked:state-checked
           u:hover:state-hover
           u:focus-visible:state-focus
@@ -120,6 +114,8 @@ export function Button({
           ${/* But if the button group is `fullWidth`, then all the buttons it contains should be equal width, regardless of their content */ ''}
           u:@prop-orientation-horizontal/button-group:@prop-full-width-true/button-group:grow
           u:@prop-orientation-horizontal/button-group:@prop-full-width-true/button-group:basis-0
+          ${/* In a button group, the group itself should be the stacking context */ ''}
+          u:in-button-group:isolation-auto
           ${/* Extend the tap area of a naked button */ ''}
           data-[variant=naked]:before:absolute
           data-[variant=naked]:before:-inset-2`,
@@ -130,6 +126,14 @@ export function Button({
         {...cssPropsPolyfillAttributes}
         {...props}
       >
+        {/* Prevent the extended tap area of a naked button from overlapping the tap area of another naked button in the same group */}
+        <span
+          className={`
+            absolute inset-[calc(-1*var(--gds-button-group-gap)/2)] z-10
+            not-in-button-group:hidden
+            @prop-not-variant-naked/button:hidden
+          `}
+        />
         <span
           className={`
             nested/button-paint pointer-events-none flex h-(--height) max-w-full min-w-full grow items-center justify-center
@@ -170,7 +174,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}
@@ -186,22 +190,32 @@ export function Button({
                 u:i:@state-[addon-only=auto]/button:px-0`,
               )}
             >
-              <Tooltip.Collector onCollect={onCollect}>{children}</Tooltip.Collector>
+              <Tooltip.Collector>{children}</Tooltip.Collector>
             </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/ButtonGroup.meta.ts

@@ -29,4 +29,12 @@ export const ButtonGroupMeta = createComponent('ButtonGroup', {
       defaultValue: false,
     },
   },
+  vars: {
+    gap: {
+      '@variant @prop-size-xsmall/button-group': '--spacing(1)',
+      '@variant @prop-size-small/button-group': '--spacing(1.5)',
+      '@variant @prop-size-medium/button-group': '--spacing(2)',
+      '@variant @prop-size-large/button-group': '--spacing(2)',
+    },
+  },
 })

package/src/components/ButtonGroup.tsx

@@ -77,11 +77,7 @@ export function ButtonGroup({
          * mentioned, vertical in horizontal doesn't make sense.
          */
         className={`
-          flex items-center
-          @prop-size-xsmall/button-group:gap-1
-          @prop-size-small/button-group:gap-1.5
-          @prop-size-medium/button-group:gap-2
-          @prop-size-large/button-group:gap-2
+          flex items-center gap-(--gds-button-group-gap)
           @prop-orientation-vertical/button-group:not-in-button-group-[[data-gds-prop-polyfill-orientation=gds-horizontal]]:flex-col
           i:*:@prop-orientation-vertical/button-group:not-in-button-group-[[data-gds-prop-polyfill-orientation=gds-horizontal]]:w-full
         `}

package/src/components/Card.meta.ts

@@ -1,6 +1,7 @@
 import { createComponent } from '@graphprotocol/gds-css'
 
 export const CardMeta = createComponent('Card', {
+  isolate: 'allow-inheritance',
   cssProps: {
     /** @default 'secondary' */
     variant: {

package/src/components/Card.tsx

@@ -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.meta.ts

@@ -3,9 +3,5 @@ import { createComponent } from '@graphprotocol/gds-css'
 import { CheckableMeta } from './base/Checkable.meta.ts'
 
 export const CheckboxMeta = createComponent('Checkbox', {
-  containerName: 'gds-checkable',
-  cssProps: {
-    /** @default 'medium' */
-    size: CheckableMeta.cssProps.size,
-  },
+  extends: CheckableMeta,
 })

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,
+    },
+  },
+})