fix(ui): apply Chip review findings

The dark outline overlay aliased gray-900-75, whose exported value is
the documented pre-2.0 bug (50% alpha instead of 75) - mixed from
gray-900 directly, like the light theme already does. The close button
gets the standard focus-visible ring. Variant and Size are renamed to
ChipVariant/ChipSize and exported - the bare names shadowed two
existing public types and rendered misleadingly in the generated props
table. Chip now forwards its ref and native span attributes, and the
close affordance takes an overridable closeLabel. The outline stroke
is an inset ring instead of a border so outline and solid chips render
the same width. Spacing metrics bind the space/size primitives from
the provisional set.

Author: librowski

.changeset/conditions-tag-chip.md

@@ -2,4 +2,4 @@
 '@workflowbuilder/sdk': patch
 ---
 
-The dynamic-conditions counter tag is rendered with the UI `Chip` component; it picks up the DS 2.0 neutral chip surface.
+The dynamic-conditions counter tag is rendered with the UI `Chip` component. Same neutral surface colors; the tag gets the DS 2.0 chip metrics — 10px label (was 12px) in a 20px-tall pill with slightly tighter padding.

apps/docs/src/components/ui-examples/chips.tsx

@@ -6,10 +6,12 @@ import { ComponentPreview } from './component-preview';
 export function ChipsExample() {
   return (
     <ComponentPreview>
-      <Chip label="tag label" />
-      <Chip label="tag label" variant="outline" />
-      <Chip label="with icon" size="l" prefixIcon={<Tag />} />
-      <Chip label="removable" size="l" variant="outline" onClose={() => {}} />
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <Chip label="tag label" />
+        <Chip label="tag label" variant="outline" />
+        <Chip label="with icon" size="l" prefixIcon={<Tag />} />
+        <Chip label="removable" size="l" variant="outline" onClose={() => {}} />
+      </div>
     </ComponentPreview>
   );
 }

packages/sdk/src/features/json-form/controls/dynamic-conditions-control/dynamic-conditions-control.module.css

@@ -26,5 +26,4 @@
 
 .tag {
   margin-top: 0.25rem;
-  margin-right: auto;
 }

packages/ui/src/components/chips/chips.module.css

@@ -2,7 +2,7 @@
   .chip {
     display: inline-flex;
     align-items: center;
-    gap: 0.25rem;
+    gap: var(--wb-space-50);
     border-radius: var(--wb-radius-50);
     white-space: nowrap;
   }
@@ -19,28 +19,30 @@
       var(--wb-components-chips-overlay-outline),
       var(--wb-components-chips-overlay-outline)
     );
-    border: 0.0625rem solid var(--wb-components-chips-inset-outline);
+    /* An inset ring, not a border: Figma's inside stroke overlaps the padding,
+       a CSS border would add to it and widen the chip. */
+    box-shadow: inset 0 0 0 var(--wb-size-12) var(--wb-components-chips-inset-outline);
     color: var(--wb-components-chips-inset-outline);
   }
 
   .s {
     height: 0.875rem;
-    padding-inline: 0.25rem;
+    padding-inline: var(--wb-space-50);
   }
 
   .m {
     height: 1rem;
-    padding-inline: 0.25rem;
+    padding-inline: var(--wb-space-50);
   }
 
   .l {
     height: 1.25rem;
-    padding-inline: 0.375rem;
+    padding-inline: var(--wb-space-75);
   }
 
   .xl {
     height: 1.375rem;
-    padding-inline: 0.375rem;
+    padding-inline: var(--wb-space-75);
   }
 
   .icon,
@@ -49,7 +51,7 @@
     align-items: center;
   }
 
-  .icon > svg,
+  .icon svg,
   .close svg {
     width: 0.625rem;
     height: 0.625rem;
@@ -61,5 +63,10 @@
     background: none;
     color: inherit;
     cursor: pointer;
+
+    &:focus-visible {
+      box-shadow: 0 0 0 2px var(--ax-focus-ring-element);
+      outline: none;
+    }
   }
 }

packages/ui/src/components/chips/chips.tsx

@@ -1,6 +1,6 @@
 import { X } from '@phosphor-icons/react';
 import clsx from 'clsx';
-import type { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode, forwardRef } from 'react';
 
 import styles from './chips.module.css';
 
@@ -14,11 +14,11 @@ export type ChipProps = {
    * outline treatment.
    * @default 'solid'
    */
-  variant?: Variant;
+  variant?: ChipVariant;
   /**
    * @default 'm'
    */
-  size?: Size;
+  size?: ChipSize;
   /**
    * Icon rendered before the label.
    */
@@ -27,25 +27,36 @@ export type ChipProps = {
    * When provided, a close affordance is rendered and invokes this callback.
    */
   onClose?: () => void;
-  className?: string;
-};
+  /**
+   * Accessible name of the close affordance.
+   * @default `Remove ${label}`
+   */
+  closeLabel?: string;
+} & HTMLAttributes<HTMLSpanElement>;
 
-type Variant = 'solid' | 'outline';
-type Size = 's' | 'm' | 'l' | 'xl';
+export type ChipVariant = 'solid' | 'outline';
+export type ChipSize = 's' | 'm' | 'l' | 'xl';
 
 /**
  * Compact tag for labeling and filtering, in the two DS 2.0 treatments.
  */
-export function Chip({ label, variant = 'solid', size = 'm', prefixIcon, onClose, className }: ChipProps) {
-  return (
-    <span className={clsx(styles['chip'], styles[variant], styles[size], className)}>
-      {prefixIcon && <span className={styles['icon']}>{prefixIcon}</span>}
-      <span className="wb-text-label-s">{label}</span>
-      {onClose && (
-        <button type="button" className={styles['close']} aria-label={`Remove ${label}`} onClick={onClose}>
-          <X />
-        </button>
-      )}
-    </span>
-  );
-}
+export const Chip = forwardRef<HTMLSpanElement, ChipProps>(
+  ({ label, variant = 'solid', size = 'm', prefixIcon, onClose, closeLabel, className, ...rest }, ref) => {
+    return (
+      <span ref={ref} {...rest} className={clsx(styles['chip'], styles[variant], styles[size], className)}>
+        {prefixIcon && <span className={styles['icon']}>{prefixIcon}</span>}
+        <span className="wb-text-label-s">{label}</span>
+        {onClose && (
+          <button
+            type="button"
+            className={styles['close']}
+            aria-label={closeLabel ?? `Remove ${label}`}
+            onClick={onClose}
+          >
+            <X />
+          </button>
+        )}
+      </span>
+    );
+  },
+);

packages/ui/src/styles/_provisional.css

@@ -21,6 +21,9 @@
     --wb-font-size-400: 2rem;
 
     --wb-radius-50: 0.25rem;
+    --wb-space-50: 0.25rem;
+    --wb-space-75: 0.375rem;
+    --wb-size-12: 0.0625rem;
     --wb-components-chips-inset-outline: var(--ax-colors-acc1-500);
   }
 
@@ -33,6 +36,6 @@
   html[data-theme='dark'] {
     --wb-components-chips-solid: var(--ax-colors-gray-650);
     --wb-components-chips-solid-text: var(--ax-colors-gray-100);
-    --wb-components-chips-overlay-outline: var(--ax-colors-gray-900-75);
+    --wb-components-chips-overlay-outline: color-mix(in srgb, var(--ax-colors-gray-900) 75%, transparent);
   }
 }