@graphprotocol/gds-react 0.1.2 → 0.2.0

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/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.parts.tsx

@@ -170,17 +170,7 @@ export function ChipRoot({
               {/* Ensure rounded corners are clickable */}
               <span className="absolute inset-0 not-in-clickable:hidden" />
               {addonBefore ? <ChipAddon side="before">{renderAddon(addonBefore)}</ChipAddon> : null}
-              <span
-                className={`
-                  flex items-baseline
-                  @prop-size-small/chip:gap-0.5
-                  @prop-size-small/chip:px-0.5
-                  @prop-size-medium/chip:gap-1
-                  @prop-size-medium/chip:px-1
-                  @prop-size-large/chip:gap-1
-                  @prop-size-large/chip:px-1
-                `}
-              >
+              <span className="flex items-baseline gap-1 px-1">
                 <span className="truncate">{children}</span>
                 {count ? (
                   <span

package/src/components/CodeBlock.parts.tsx

@@ -39,7 +39,9 @@ import {
 
 import { useControlled, useCSSPropsPolyfill, useGDS } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes, type Stringifiable } from '../utils/index.ts'
+import { renderAddon, type AddonValue } from './base/Addon.tsx'
 import { Button } from './Button.tsx'
+import { ButtonGroup } from './ButtonGroup.tsx'
 import { CodeBlockMeta } from './CodeBlock.meta.ts'
 import { CopyButton } from './CopyButton.tsx'
 import { TabSet, TabSetContext, type TabSetTabProps } from './TabSet.tsx'
@@ -150,8 +152,21 @@ function CodeBlockHeader({ buttons, className, children, ...props }: CodeBlockHe
         )}
         {...props}
       >
-        <div className="grow">{children}</div>
-        {buttons ? <div className="flex shrink-0 items-center gap-3 pe-2.5">{buttons}</div> : null}
+        <div className="min-w-em grow">{children}</div>
+        {buttons ? (
+          <ButtonGroup
+            variant="naked"
+            size="medium"
+            /**
+             * The `not-has-button:hidden` class prevents an empty `ButtonGroup` from taking space
+             * in the layout, which can happen when the stuff that `CodeBlockTabs` passes as
+             * `buttons` ends up rendering nothing (which we can't know in advance).
+             */
+            className="me-2 shrink-0 self-center not-has-button:hidden"
+          >
+            {buttons}
+          </ButtonGroup>
+        ) : null}
         <div className="absolute inset-x-0 bottom-0 border-b border-subtle" />
       </figcaption>
     </CodeBlockHeaderContext.Provider>
@@ -162,8 +177,8 @@ export interface CodeBlockProps extends Omit<ComponentProps<'div'>, 'onCopy'>, S
   /** @default 'text' */
   language?: Language | undefined
   /** Defaults to an icon that matches the `language`. */
-  icon?: ReactNode | undefined
-  label?: string | undefined
+  icon?: AddonValue | undefined
+  label?: ReactNode | undefined
   children: Stringifiable
 }
 
@@ -314,64 +329,74 @@ export function CodeBlockRoot({
     })
   }, [highlighter, childrenString, activeTheme, language, highlights, secrets, diff])
 
-  const buttons = (
-    <>
-      {secrets.length > 0 ? (
-        <Button variant="naked" size="medium" onClick={() => setMasked(!masked)}>
-          {masked ? (
-            <EyeIcon alt={`Reveal secret${secrets.length > 1 ? 's' : ''}`} />
-          ) : (
-            <EyeClosedIcon alt={`Hide secret${secrets.length > 1 ? 's' : ''}`} />
-          )}
-        </Button>
-      ) : null}
-      {copy ? (
-        <CopyButton
-          variant="naked"
-          size="medium"
-          value={typeof copy === 'string' ? copy : codeToCopy}
-          onCopy={onCopy}
-        />
-      ) : null}
-    </>
-  )
+  const buttonElements = [
+    secrets.length > 0 && (
+      <Button key="reveal" onClick={() => setMasked(!masked)}>
+        {masked ? (
+          <EyeIcon alt={`Reveal secret${secrets.length > 1 ? 's' : ''}`} />
+        ) : (
+          <EyeClosedIcon alt={`Hide secret${secrets.length > 1 ? 's' : ''}`} />
+        )}
+      </Button>
+    ),
+    copy && (
+      <CopyButton key="copy" value={typeof copy === 'string' ? copy : codeToCopy} onCopy={onCopy} />
+    ),
+  ].filter(Boolean)
+
+  const buttons = buttonElements.length > 0 ? <>{buttonElements}</> : null
 
   if (hasAncestorHeader) {
     return buttons
   }
 
   const Wrapper = hasAncestorTabs ? 'div' : CodeBlockWrapper
-  const headerContent = (
-    <div className="flex h-full items-center gap-2 ps-2">
-      {icon ? (
-        <span className="flex size-4 shrink-0 items-center justify-center **:icon:default-size-3.5">
-          {icon}
-        </span>
-      ) : null}
-      {label ? <span className="truncate text-14 text-muted">{label}</span> : null}
-    </div>
-  )
+  const headerContent =
+    label || passedIcon ? (
+      <div className="flex h-full items-center gap-2 ps-2">
+        {icon ? (
+          <span className="flex size-4 shrink-0 items-center justify-center **:icon:default-size-3.5">
+            {renderAddon(icon)}
+          </span>
+        ) : null}
+        {label ? <span className="truncate text-14 text-muted">{label}</span> : null}
+      </div>
+    ) : null
 
   return (
     <Wrapper
       ref={cssPropsPolyfillPassedRef}
+      data-has-header={Boolean(headerContent) || undefined}
       className={cn(
-        `gds-code-block isolate root-flex flex-col
-        u:not-in-code-block-tabs:min-h-24
-        u:not-in-code-block-tabs:rounded-8`,
+        `gds-code-block group/code-block root-flex flex-col
+        u:not-in-code-block-tabs:rounded-8
+        u:not-in-code-block-tabs:not-data-has-header:min-h-13
+        u:not-in-code-block-tabs:data-has-header:min-h-24`,
         className,
       )}
       {...getCSSPropsAttributes(CodeBlockMeta, { wrap, lineNumbers, rows }, style)}
       {...cssPropsPolyfillAttributes}
       {...props}
     >
-      {!hasAncestorTabs ? (
-        <CodeBlockHeader buttons={buttons}>{headerContent}</CodeBlockHeader>
-      ) : null}
-      {hasAncestorTabs && label ? (
-        <div className="flex h-10 shrink-0 px-2">
-          <div className="absolute inset-0 border-b border-subtle" />
-          {headerContent}
+      {headerContent ? (
+        hasAncestorTabs ? (
+          <div className="flex h-10 shrink-0 px-2">
+            <div className="absolute inset-0 border-b border-subtle" />
+            {headerContent}
+          </div>
+        ) : (
+          <CodeBlockHeader buttons={buttons}>{headerContent}</CodeBlockHeader>
+        )
+      ) : !hasAncestorTabs && buttons ? (
+        <div
+          className={`
+            absolute end-3 top-3 z-10 opacity-0 transition
+            group-not-hover/code-block:pointer-events-none
+            group-hover/code-block:opacity-100
+            has-focus-visible:opacity-100
+          `}
+        >
+          <ButtonGroup size="xsmall">{buttons}</ButtonGroup>
         </div>
       ) : null}
       <pre
@@ -384,7 +409,7 @@ export function CodeBlockRoot({
          * that case, so it should be fine.
          */
         className={`
-          h-(--max-height) max-h-max grow overflow-auto font-mono text-14
+          isolate scrollbar-thin h-(--max-height) max-h-max grow overflow-auto font-mono text-14
           [--max-height:calc(9999px-min(9999px,var(--gds-code-block-rows)*9999px)+var(--gds-code-block-rows)*1lh+2*var(--padding))]
           [--padding:--spacing(4)]
           firefox:h-auto
@@ -427,8 +452,8 @@ export function CodeBlockRoot({
               <span
                 aria-hidden
                 className={`
-                  hidden min-w-4 text-center text-12 text-subtle select-none
-                  @prop-line-numbers-true/code-block:block
+                  min-w-4 text-center text-12 text-subtle select-none
+                  @prop-line-numbers-false/code-block:hidden
                 `}
               >
                 {lineIndex + 1}
@@ -544,7 +569,7 @@ export function CodeBlockTabs<const Tabs extends readonly Tab[], T extends TabVa
   className,
   children,
   ...props
-}: CodeBlockTabsProps<Tabs, T> & { ref?: React.Ref<HTMLDivElement> }) {
+}: CodeBlockTabsProps<Tabs, T>) {
   if (passedTabs.length === 0) {
     throw new Error('[CodeBlock.Tabs] At least 1 tab is required')
   }
@@ -583,7 +608,7 @@ export function CodeBlockTabs<const Tabs extends readonly Tab[], T extends TabVa
       defaultValue={defaultValue ?? (tabs[0]!.value as T)}
       onChange={onChange}
       className={cn(
-        `gds-code-block-tabs isolate root-flex flex-col u:min-h-24 u:rounded-8
+        `gds-code-block-tabs root-flex flex-col u:min-h-24 u:rounded-8
         u:[--saved-default-line-numbers:var(--gds-default-line-numbers)]
         u:[--saved-default-rows:var(--gds-default-rows)]
         u:[--saved-default-wrap:var(--gds-default-wrap)]

package/src/components/CodeInline.tsx

@@ -15,8 +15,8 @@ export function CodeInline({ className, children, ...props }: CodeInlineProps) {
   return (
     <span
       className={cn(
-        `gds-code-inline root-inline
-        u:font-mono u:font-regular u:wrap-anywhere u:whitespace-pre-wrap u:text-code u:in-link:text-link-idle
+        `gds-code-inline root-inline u:font-mono u:text-size-inherit u:wrap-anywhere u:whitespace-pre-wrap u:text-code
+        u:in-link:text-link-idle
         ${/* If inside a link, ensure the underline of the link appears over the background and border by default */ ''}
         u:in-link:-z-10
         ${/* Prevent messing with the line height (this needs to be set on the root _and_ on the inner element) */ ''}
@@ -44,7 +44,7 @@ export function CodeInline({ className, children, ...props }: CodeInlineProps) {
           in-link:transition-[border-radius]
           in-link-hover:rounded-b-none
           ${/* Prevent incorrect alignment when empty */ ''}
-          empty:after:content-(--content-nbsp)
+          empty:after:content-nbsp
         `}
         {...props}
       >

package/src/components/CopyButton.meta.ts

@@ -5,17 +5,12 @@ import { ButtonMeta } from './Button.meta.ts'
 type ButtonVariant = (typeof ButtonMeta.cssProps.variant.values)[number]
 
 export const CopyButtonMeta = createComponent('CopyButton', {
-  containerName: 'gds-button',
+  extends: ButtonMeta,
   cssProps: {
-    /** @default 'secondary' */
     variant: {
       type: 'values',
       values: ['secondary', 'tertiary', 'inverse', 'naked'] as const satisfies ButtonVariant[],
       defaultValue: 'secondary',
     },
-    /** @default 'medium' */
-    size: ButtonMeta.cssProps.size,
-    /** @default false */
-    hideLabel: ButtonMeta.cssProps.hideLabel,
   },
 })

package/src/components/CopyButton.tsx

@@ -42,7 +42,7 @@ export function CopyButton({
     if (newStatus === 'copied') {
       timeoutRef.current = window.setTimeout(() => setStatus('copied-exit'), 1000)
     } else if (newStatus === 'copied-exit') {
-      timeoutRef.current = window.setTimeout(() => setStatus('idle'), 100)
+      timeoutRef.current = window.setTimeout(() => setStatus('idle'), 150)
     }
   }
 
@@ -57,9 +57,8 @@ export function CopyButton({
 
   return (
     <Tooltip
-      {...(status !== 'idle'
-        ? { content: 'Copied!', open: status === 'copied' }
-        : { content: null })}
+      content="Copied!"
+      {...(status !== 'idle' ? { open: status === 'copied' } : { disabled: true })}
       {...tooltipCSSProps}
     >
       <Button

package/src/components/CurrencyInput.meta.ts

@@ -3,9 +3,5 @@ import { createComponent } from '@graphprotocol/gds-css'
 import { FieldMeta } from './base/Field.meta.ts'
 
 export const CurrencyInputMeta = createComponent('CurrencyInput', {
-  containerName: 'gds-field',
-  cssProps: {
-    /** @default 'medium' */
-    size: FieldMeta.cssProps.size,
-  },
+  extends: FieldMeta,
 })

package/src/components/DescriptionList.parts.tsx

@@ -56,6 +56,7 @@ export function DescriptionListRoot({
     </div>
   )
 }
+DescriptionListRoot.displayName = 'DescriptionList'
 
 export interface DescriptionListItemProps
   extends ComponentProps<'div'>, GDSComponentProps<typeof DescriptionListItemMeta> {

package/src/components/Icon.meta.ts

@@ -1,6 +1,7 @@
 import { createComponent } from '@graphprotocol/gds-css'
 
 export const IconMeta = createComponent('Icon', {
+  isolate: 'allow-inheritance',
   addonCompatible: true,
   cssProps: {
     /** @default '1em' */

package/src/components/Icon.tsx

@@ -13,7 +13,7 @@ import type { GDSComponentProps } from '@graphprotocol/gds-css'
 import { useGDS } from '../hooks/index.ts'
 import { cn, getCSSPropsAttributes } from '../utils/index.ts'
 import { IconMeta } from './Icon.meta.ts'
-import { useCollectTooltip } from './Tooltip.tsx'
+import { useTooltipCollector } from './Tooltip.tsx'
 
 export interface IconProps
   extends Omit<ComponentProps<'span'>, 'children' | 'color'>, GDSComponentProps<typeof IconMeta> {
@@ -35,10 +35,10 @@ export function Icon({ src, alt, size, color, className, style, ...props }: Icon
   useGDS()
 
   const iconContent = isValidElement(src) ? src : createElement(src)
-  const collectTooltip = useCollectTooltip()
+  const collectTooltipContent = useTooltipCollector()
 
-  if (collectTooltip && alt) {
-    collectTooltip(alt)
+  if (collectTooltipContent && alt) {
+    collectTooltipContent(alt)
   }
 
   if ('variant' in props) {

package/src/components/Input.meta.ts

@@ -3,9 +3,5 @@ import { createComponent } from '@graphprotocol/gds-css'
 import { FieldMeta } from './base/Field.meta.ts'
 
 export const InputMeta = createComponent('Input', {
-  containerName: 'gds-field',
-  cssProps: {
-    /** @default 'medium' */
-    size: FieldMeta.cssProps.size,
-  },
+  extends: FieldMeta,
 })

package/src/components/Input.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { ComponentProps, ReactElement, ReactNode } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 
 import type { GDSComponentProps } from '@graphprotocol/gds-css'
 import { parseNumber } from '@graphprotocol/gds-utils'
@@ -8,10 +8,10 @@ import { parseNumber } from '@graphprotocol/gds-utils'
 import { useControlled, useGDS } from '../hooks/index.ts'
 import { cn, splitProps } from '../utils/index.ts'
 import { Field, type FieldProps } from './base/Field.tsx'
-import { Render } from './base/Render.tsx'
+import { Render, type RenderProp } from './base/Render.tsx'
 import type { InputMeta } from './Input.meta.ts'
 
-export interface InputState {
+export type InputState = {
   inputProps: ComponentProps<'input'>
   inputWithUnitAndAction: ReactNode
 }
@@ -39,9 +39,7 @@ export interface InputProps
   message?: FieldProps['message'] | undefined
   unit?: ReactNode | undefined
   action?: ReactNode | undefined
-  renderInput?:
-    | ((renderProps: ComponentProps<'div'>, state: InputState) => ReactElement)
-    | undefined
+  renderInput?: RenderProp<InputState> | undefined
 }
 
 export function Input({
@@ -168,6 +166,7 @@ export function Input({
                       **:button:default-variant-tertiary
                       @prop-size-small/field:pe-0.5
                       @prop-size-small/field:**:button:var-[radius=var(--radius-4)]
+                      @prop-size-small/field:**:button-group:var-[gap=--spacing(0.5)]
                       @prop-size-medium/field:pe-1.5
                       @prop-size-large/field:pe-2
                       @prop-size-small/field:**:button-or-group:prop-size-xsmall

package/src/components/Keyboard.tsx

@@ -48,7 +48,7 @@ export function Keyboard({
     <kbd
       ref={cssPropsPolyfillPassedRef}
       className={cn(
-        `gds-keyboard root-inline u:shrink-0 u:font-mono u:font-regular u:whitespace-nowrap u:text-default
+        `gds-keyboard root-inline u:shrink-0 u:font-mono u:whitespace-nowrap
         i:leading-0`,
         className,
       )}

package/src/components/Link.meta.ts

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

package/src/components/Link.tsx

@@ -15,7 +15,7 @@ export declare namespace LinkProps {
     /** @default 'primary' */
     variant?: 'primary' | 'secondary' | undefined
     addonBefore?: AddonValue | undefined
-    /** Defaults to `ArrowUpRightInteractiveIcon` if `href` is set and `target` is `_blank` */
+    /** Defaults to `ArrowUpRightInteractiveIcon` if `href` is defined and `target` is `_blank` */
     addonAfter?: AddonValue | undefined
   }
   interface ButtonProps
@@ -70,8 +70,7 @@ export function Link({
       disabled={disabled}
       data-variant={cssProps.variant}
       className={cn(
-        `gds-link isolate ${/* Allow nested elements (e.g. `CodeInline`) to have a negative `z-index` to appear behind the underline */ ''}
-        root-inline u:w-max u:max-w-full u:wrap-anywhere u:outline-0
+        `gds-link root-inline u:w-max u:max-w-full u:wrap-anywhere u:outline-0
         u:hover:state-hover
         u:focus-visible:state-focus
         u:active:state-active

package/src/components/Menu.meta.ts

@@ -1,5 +1,43 @@
 import { createComponent } from '@graphprotocol/gds-css'
 
-export const MenuMeta = createComponent('Menu')
+export const MenuMeta = createComponent('Menu', {
+  isolate: false,
+  cssProps: {
+    /** @default 'bottom' // or for nested menus, 'end' */
+    side: {
+      type: 'values',
+      values: ['top', 'bottom', 'start', 'end'],
+      defaultValue: 'bottom',
+    },
+    /** @default 1 // or for nested menus, 3 */
+    gap: {
+      type: 'number',
+      defaultValue: 1,
+    },
+    /** @default 'start' */
+    align: {
+      type: 'values',
+      values: ['start', 'center', 'end'],
+      defaultValue: 'start',
+    },
+    /** @default 0 // or for nested menus, -2 */
+    alignOffset: {
+      type: 'number',
+      defaultValue: 0,
+    },
+    /** @default false */
+    matchTriggerWidth: {
+      type: 'values',
+      values: [false, true, 'at-least', 'at-most'],
+      defaultValue: false,
+    },
+    /** @default false */
+    matchTriggerHeight: {
+      type: 'values',
+      values: [false, true, 'at-least', 'at-most'],
+      defaultValue: false,
+    },
+  },
+})
 
 export const MenuItemMeta = createComponent('MenuItem')