feat(combinator): DLT-3470 render DtToggle mixed state as a segmented control (#1309)

Author: francisrupert

apps/dialtone-documentation/docs/components/toggle.md

@@ -46,8 +46,8 @@ The Toggle component acts as a way to allow the User to switch between two mutua
   <dt-toggle :model-value="true" class="d-g-200">Checked Toggle</dt-toggle>
   <dt-toggle disabled class="d-g-200">Unchecked Disabled</dt-toggle>
   <dt-toggle :model-value="true" disabled class="d-g-200">Checked Disabled</dt-toggle>
-  <dt-toggle :model-value="mixed" class="d-g-200">Indeterminate Toggle</dt-toggle>
-  <dt-toggle :model-value="mixed" class="d-g-200" disabled>Indeterminate Disabled</dt-toggle>
+  <dt-toggle :model-value="'mixed'" class="d-g-200">Indeterminate Toggle</dt-toggle>
+  <dt-toggle :model-value="'mixed'" class="d-g-200" disabled>Indeterminate Disabled</dt-toggle>
   <dt-toggle class="d-g-200" :show-icon="false">Without icon</dt-toggle>
 </dt-stack>
 ```

packages/combinator/src/lib/control.js

@@ -108,17 +108,24 @@ export function getControlByValue (value) {
 }
 
 export function getControlByMemberType (type, args) {
+  const values = args?.values ?? [];
+
+  if (isMixedBooleanEnum(values)) return 'segmented';
   if (type === 'boolean') return 'boolean';
-  if (args?.values?.length > 0) {
-    if (shouldUseSegmented(args.values)) return 'segmented';
-    return 'selection';
-  }
-  switch (type) {
-    case 'string': return 'string';
-    default: return type;
+
+  if (values.length > 0) {
+    return shouldUseSegmented(values) ? 'segmented' : 'selection';
   }
+
+  return type === 'string' ? 'string' : type;
 }
 
+function isMixedBooleanEnum (values) {
+  return values.length === 3 &&
+    values.includes(true) &&
+    values.includes(false) &&
+    values.includes('mixed');
+}
 function shouldUseSegmented (values) {
   return values.length <= MAX_SEGMENTED_COUNT &&
     values.every(v => String(v).length <= MAX_SEGMENTED_LABEL_LENGTH);

packages/combinator/src/lib/control.test.js

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+import { getControlByMemberType } from './control';
+import { extendMember } from './info_extend';
+
+describe('control.js test', function () {
+  describe('getControlByMemberType', function () {
+    it('uses the boolean control for a plain boolean', function () {
+      expect(getControlByMemberType('boolean')).toBe('boolean');
+    });
+
+    it('uses the boolean control for a nullable boolean enum', function () {
+      expect(getControlByMemberType('boolean', { values: ['null', true, false] })).toBe('boolean');
+    });
+
+    it('uses the segmented control for the mixed boolean enum', function () {
+      expect(getControlByMemberType('boolean', { values: [true, false, 'mixed'] })).toBe('segmented');
+    });
+
+    it('uses the segmented control for short string values', function () {
+      expect(getControlByMemberType('string', { values: ['sm', 'md', 'lg'] })).toBe('segmented');
+    });
+
+    it('uses the selection control for longer string values', function () {
+      expect(getControlByMemberType('string', { values: ['label', 'count'] })).toBe('selection');
+    });
+  });
+
+  describe('docgen value normalization', function () {
+    it('normalizes a mixed boolean enum to runtime values', function () {
+      const member = { type: { name: 'boolean|string' }, values: ['true', 'false', '\'mixed\''] };
+
+      extendMember(member);
+
+      expect(member.values).toEqual([true, false, 'mixed']);
+    });
+
+    it('leaves non-boolean string enums untouched', function () {
+      const member = { type: { name: 'string' }, values: ['\'body\'', '\'parent\''] };
+
+      extendMember(member);
+
+      expect(member.values).toEqual(['\'body\'', '\'parent\'']);
+    });
+  });
+});

packages/combinator/src/lib/info_extend.js

@@ -18,6 +18,7 @@ export function extendMember (member) {
       member.types = extractMemberTypes(typeString);
     }
   }
+  normalizeDocValues(member);
   if (member.name) {
     member.label = paramCase(member.name);
   }
@@ -54,6 +55,32 @@ function extractMemberTypes (typeString) {
   return typeString.split('|').map(type => type.trim().toLowerCase());
 }
 
+function normalizeDocValues (member) {
+  if (!member.values) return;
+  member.values = member.values.map(value => normalizeDocValue(value, member.types));
+}
+
+// Only boolean-typed enums are normalized — 'true'/'false' become booleans and the
+// quoted 'mixed' sentinel is unwrapped so DtToggle routes to a segmented control.
+// Skipping everything else leaves string enums and numeric token strings ('200') intact.
+// (parseDocValue/JSON5 isn't reused here precisely because it would coerce '200' to a number.)
+function normalizeDocValue (value, types = []) {
+  if (typeof value !== 'string' || !types.includes('boolean')) return value;
+
+  if (value === 'true') return true;
+  if (value === 'false') return false;
+  if (isQuotedString(value)) return value.slice(1, -1);
+
+  return value;
+}
+
+function isQuotedString (value) {
+  return (
+    (value.startsWith('\'') && value.endsWith('\'')) ||
+    (value.startsWith('"') && value.endsWith('"'))
+  );
+}
+
 /**
  * Extends an event member.
  *