fix(design): apply Studio states only to enabled variants

Author: Bill Leoutsakos

scripts/design-studio/README.md

@@ -10,6 +10,7 @@
 
 - `variants` lists the axes that the adapter forwards to that export. New values on a covered axis appear automatically. A new axis requires review and a mapping; spreading variant props does not establish coverage. Axes requiring different data shapes need their own fixture data before being listed.
 - `states` lists supported focus, disabled, error, and open states. Open captures require a visible popup or dialog.
+- Disabled variant values retain their default preview but omit open and focus states; combined live selections apply the same restriction.
 - `defaultStates` opens otherwise hidden exports, such as tooltip content or a wizard step, for their default specimen.
 - `requiredElements` identifies a visible element belonging to a hidden or nested export. Use a unique fixture marker when a generic role could match its parent.
 

scripts/design-studio/refresh.mjs

@@ -291,12 +291,21 @@ function componentInventory() {
         const supportsVariant = Boolean(
           fixture && fixtureContracts.variants?.[item.name]?.includes(axis.name)
         )
+        const disabled = axis.name === 'disabled' && value === 'true'
+        const variantFixture = supportsVariant
+          ? { ...fixture, variant: { axis: axis.name, value } }
+          : null
+        if (disabled && ['open', 'focus'].includes(variantFixture?.defaultState))
+          variantFixture.defaultState = undefined
         entries.push({
           ...base,
           id: `component:${item.name}:${axis.name}=${value}`,
           name: `${item.name} · ${axis.name}: ${value}`,
           variant: { axis: axis.name, value, defaultValue: axis.defaultValue },
-          fixture: supportsVariant ? { ...fixture, variant: { axis: axis.name, value } } : null,
+          fixture: variantFixture,
+          states: disabled
+            ? base.states.filter((state) => state !== 'open' && state !== 'focus')
+            : base.states,
           status: supportsVariant ? 'pending-capture' : 'needs-fixture',
           images: {},
         })

scripts/design-studio/refresh.test.mjs

@@ -139,6 +139,38 @@ test('refresh requires a fixture mapping for each variant axis', () => {
   )
 }, 60000)
 
+test('refresh keeps disabled variant previews without impossible interaction captures', () => {
+  const { repo, refresh } = guardedRefresh()
+  write(
+    repo,
+    'packages/emcn/src/components/example/example.tsx',
+    'export const Example = ({disabled}: {disabled?: boolean}) => <button disabled={disabled} />\n'
+  )
+  write(
+    repo,
+    'tools/design-studio/_components/fixture-contracts.json',
+    JSON.stringify({
+      variants: { Example: ['disabled'] },
+      states: { Example: ['open', 'focus', 'disabled'] },
+      defaultStates: { Example: 'open' },
+    })
+  )
+  const manifest = refresh()
+  const enabled = manifest.components.find(
+    (entry) => entry.id === 'component:Example:disabled=false'
+  )
+  const disabled = manifest.components.find(
+    (entry) => entry.id === 'component:Example:disabled=true'
+  )
+  assert.deepEqual(enabled.states, ['open', 'focus', 'disabled'])
+  assert.equal(enabled.fixture.defaultState, 'open')
+  assert.deepEqual(disabled.states, ['disabled'])
+  assert.equal(disabled.fixture.defaultState, undefined)
+  assert.deepEqual(disabled.fixture.variant, { axis: 'disabled', value: 'true' })
+  assert.equal(disabled.status, 'pending-capture')
+  assert.deepEqual(disabled.images, {})
+}, 60000)
+
 test('refresh publishes unresolved analysis and scanner limits separately from inspection failures', () => {
   const { refresh } = guardedRefresh()
   const manifest = refresh()

tools/design-studio/_components/fixture-contracts.json

@@ -90,7 +90,6 @@
     "ChipSelect": ["open"],
     "Combobox": ["open"],
     "TimePicker": ["open"],
-    "ChipTimePicker": ["open"],
     "ChipCombobox": ["open"]
   },
   "defaultStates": {

tools/design-studio/_components/generated-gallery.tsx

@@ -607,8 +607,11 @@ function TreatmentDetail({
       activeVariants[axis] = value
     }
   }
-  const stateAvailable =
-    requestedState === 'default' || Boolean(entry.states?.includes(requestedState))
+  const disabled = activeVariants.disabled === 'true'
+  const effectiveStates = disabled
+    ? (entry.states ?? []).filter((state) => state !== 'open' && state !== 'focus')
+    : (entry.states ?? [])
+  const stateAvailable = requestedState === 'default' || effectiveStates.includes(requestedState)
   const previewState = stateAvailable ? requestedState : 'default'
   const selectedKey = `${theme}-${size}${previewState === 'default' ? '' : `-${previewState}`}`
   const failedCount = entries.filter((item) => item.status !== 'ready').length
@@ -626,13 +629,17 @@ function TreatmentDetail({
         theme,
         size: String(size),
         state:
-          previewState === 'default' ? (entry.fixture.defaultState ?? previewState) : previewState,
+          previewState === 'default'
+            ? disabled && ['open', 'focus'].includes(entry.fixture.defaultState ?? '')
+              ? previewState
+              : (entry.fixture.defaultState ?? previewState)
+            : previewState,
         ...(entry.kind === 'component' ? { interactive: '1' } : {}),
         ...(Object.keys(activeVariants).length ? { variants: JSON.stringify(activeVariants) } : {}),
         ...(entry.fixture.sample ? { sample: JSON.stringify(entry.fixture.sample) } : {}),
         ...(entry.fixture.action ? { action: entry.fixture.action } : {}),
         ...(entry.fixture.requiredElement ? { required: entry.fixture.requiredElement } : {}),
-        ...(entry.states?.includes('open') ? { 'open-surface': '1' } : {}),
+        ...(effectiveStates.includes('open') ? { 'open-surface': '1' } : {}),
       }).toString()
     : null