feat(combinator): DLT-3312 preview resolved value in sized props

packages/combinator/src/components/combinator.vue

@@ -361,20 +361,29 @@ function updateVariant (e) {
   nextTick(() => { _presetChanging = false; });
 }
 
+/**
+ * Merges variant override data into an info object.
+ *
+ * @param {object} info - The info object to merge into.
+ * @param {object} variantData - The variant data to merge.
+ */
+function mergeVariantData (info, variantData) {
+  if (!variantData) return;
+  Object.entries(variantData).forEach(([memberGroup, members]) => {
+    if (memberGroup === 'exclusions') return;
+    Object.entries(members).forEach(([memberName, member]) => {
+      const infoMember = info[memberGroup]?.find(m => m.name === memberName);
+      if (infoMember) Object.assign(infoMember, member);
+    });
+  });
+}
+
 const defaultInfo = computed(() => {
   const info = cloneInfoMembers(
     getComponentInfo(props.component, props.documentation),
   );
-  const defaultVariant = props.variants?.default;
-  if (defaultVariant) {
-    Object.entries(defaultVariant).forEach(([memberGroup, members]) => {
-      if (memberGroup === 'exclusions') return;
-      Object.entries(members).forEach(([memberName, member]) => {
-        const infoMember = info[memberGroup]?.find(m => m.name === memberName);
-        if (infoMember) Object.assign(infoMember, member);
-      });
-    });
-  }
+  mergeVariantData(info, props.variants?.defaults);
+  mergeVariantData(info, props.variants?.default);
   return info;
 });
 
@@ -406,19 +415,8 @@ function initializeInfo () {
     getComponentInfo(props.component, props.documentation),
   );
 
-  const variantInfo = props.variants?.[activeVariant.value];
-
-  if (variantInfo) {
-    Object.entries(variantInfo).forEach(([memberGroup, members]) => {
-      if (memberGroup === 'exclusions') return;
-      Object.entries(members).forEach(([memberName, member]) => {
-        const infoMember = info[memberGroup]?.find(m => m.name === memberName);
-        if (infoMember) {
-          Object.assign(infoMember, member);
-        }
-      });
-    });
-  }
+  mergeVariantData(info, props.variants?.defaults);
+  mergeVariantData(info, props.variants?.[activeVariant.value]);
 
   info.exclusions = props.variants?.exclusions ?? [];
 

packages/combinator/src/components/controls/control_segmented.vue

@@ -16,6 +16,7 @@
     <dt-segmented-control-item
       v-for="option in options"
       :key="option.value"
+      v-dt-tooltip="option.resolved ?? undefined"
       :value="String(option.value)"
     >
       {{ option.label }}
@@ -27,6 +28,7 @@
 import { DtSegmentedControl, DtSegmentedControlItem, DtText } from '@dialpad/dialtone-vue';
 
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { resolveTokenValue } from '@/src/lib/tokens';
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -46,6 +48,14 @@ const props = defineProps({
     type: Function,
     default: (value) => value.toString(),
   },
+  tokenCategory: {
+    type: String,
+    default: undefined,
+  },
+  propValues: {
+    type: Object,
+    default: undefined,
+  },
 });
 
 const emit = defineEmits([VALUE_UPDATE_EVENT]);
@@ -54,6 +64,9 @@ const options = computed(() => {
   return props.validValues?.map(v => ({
     value: v,
     label: props.generateLabel(v),
+    resolved: props.tokenCategory
+      ? resolveTokenValue(props.tokenCategory, v, props.propValues)
+      : null,
   })) ?? [];
 });
 

packages/combinator/src/components/controls/control_selection.vue

@@ -22,7 +22,17 @@
         class="d-w100p"
         label-class="d-jc-space-between d-fw-normal"
       >
-        {{ selectedLabel }}<span aria-hidden="true">&thinsp;<!-- hold the space --></span>
+        {{ selectedLabel }}
+        <span aria-hidden="true">&thinsp;<!-- hold the space --></span>
+        <dt-text
+          v-if="selectedOption?.resolved"
+          v-dt-tooltip="selectedOption.resolved.includes('/') ? 'Font Size / Line Height' : undefined"
+          kind="body"
+          :size="100"
+          tone="muted"
+        >
+          {{ selectedOption.resolved }}
+        </dt-text>
         <template #endIcon="{ iconSize }">
           <dt-icon-chevrons-up-down
             class="d-fc-muted"
@@ -37,9 +47,27 @@
         :key="option.value"
         role="menuitem"
         navigation-type="arrow-keys"
-        @click="onInput(option.value); close()"
+        :class="{ 'd-o50 d-pe-none': option.disabled }"
+        :aria-disabled="option.disabled || undefined"
+        @click="!option.disabled && (onInput(option.value), close())"
       >
-        {{ option.label }}
+        <dt-stack
+          direction="row"
+          gap="200"
+          align="baseline"
+          class="d-w100p"
+        >
+          <span>{{ option.label }}</span>
+          <dt-text
+            v-if="option.resolved"
+            kind="body"
+            :size="100"
+            tone="muted"
+            class="d-mis-auto"
+          >
+            {{ option.resolved }}
+          </dt-text>
+        </dt-stack>
         <template #end>
           <dt-icon-check
             size="200"
@@ -52,10 +80,11 @@
 </template>
 
 <script setup>
-import { DtButton, DtText } from '@dialpad/dialtone-vue';
+import { DtButton, DtStack, DtText } from '@dialpad/dialtone-vue';
 import { DtIconChevronsUpDown, DtIconCheck } from '@dialpad/dialtone-icons/vue';
 
 import { VALUE_UPDATE_EVENT } from '@/src/lib/constants';
+import { resolveTokenValue } from '@/src/lib/tokens';
 import { computed } from 'vue';
 
 const props = defineProps({
@@ -79,6 +108,18 @@ const props = defineProps({
     type: Function,
     default: (value) => value.toString(),
   },
+  tokenCategory: {
+    type: String,
+    default: undefined,
+  },
+  propValues: {
+    type: Object,
+    default: undefined,
+  },
+  disabledValues: {
+    type: Set,
+    default: undefined,
+  },
 });
 
 const emit = defineEmits([VALUE_UPDATE_EVENT]);
@@ -89,7 +130,11 @@ function onInput (e) {
 
 const options = computed(() => {
   const valueOptions = props.validValues?.map(selection => {
-    return { value: selection, label: props.generateLabel(selection) };
+    const optionDisabled = props.disabledValues?.has(String(selection)) ?? false;
+    const resolved = !optionDisabled && props.tokenCategory
+      ? resolveTokenValue(props.tokenCategory, selection, props.propValues)
+      : null;
+    return { value: selection, label: props.generateLabel(selection), resolved, disabled: optionDisabled };
   }) ?? [];
 
   if (props.defaultValue === null || props.defaultValue === undefined) {
@@ -98,10 +143,11 @@ const options = computed(() => {
   return valueOptions;
 });
 
-const selectedLabel = computed(() => {
-  const option = options.value.find(o => o.value === props.value);
-  return option?.label ?? '';
+const selectedOption = computed(() => {
+  return options.value.find(o => String(o.value) === String(props.value));
 });
+
+const selectedLabel = computed(() => selectedOption.value?.label ?? '');
 </script>
 
 <script>

packages/combinator/src/components/option_bar/option_bar_member_group.vue

@@ -23,6 +23,9 @@
           validTypes: member.types,
           tags: member.tags,
           bindings: member.bindings,
+          tokenCategory: member.tokenCategory,
+          propValues,
+          disabledValues: getDisabledValues(key, props.exclusionRules, props.propValues),
         }"
         @update:value="e => updateMember(e, key)"
         @update:control="e => updateControl(e, key)"
@@ -38,14 +41,14 @@ import { computed, reactive } from 'vue';
 import { convert } from '@/src/lib/convert';
 import { controlMap } from '@/src/lib/control';
 import { buildDependencyMap, shouldHideProp } from '@/src/lib/prop_dependencies';
-import { shouldExclude } from '@/src/lib/exclusion_rules';
+import { shouldExclude, getDisabledValues } from '@/src/lib/exclusion_rules';
 import { isIconSlot } from '@/src/lib/icons';
 import { DtStack } from '@dialpad/dialtone-vue';
 
 const ICON_SLOT_ORDER = ['startIcon', 'endIcon', 'blockStartIcon', 'blockEndIcon', 'icon'];
 
 const PROP_PRIORITY = [
-  'title', 'as', 'label', 'size', 'kind',
+  'title', 'as', 'label', 'kind', 'size',
   'importance', 'placement', 'tone', 'align', 'density', 'strength',
   'type', 'underline', 'selected', 'active', 'disabled', 'color', 'description',
 ];

packages/combinator/src/components/renderer/renderer_target.vue

@@ -132,7 +132,7 @@ function renderTarget () {
  */
 function renderError (exception, container) {
   render(h(DtNotice, {
-    kind: 'error',
+    kind: 'critical',
     hideClose: true,
     title: ERROR_MESSAGE,
   }, {

packages/combinator/src/lib/exclusion_rules.js

@@ -1,3 +1,11 @@
+function areConditionsMet (rule, propValues) {
+  return Object.entries(rule.when).every(([prop, condition]) =>
+    typeof condition === 'function'
+      ? condition(propValues[prop])
+      : condition === propValues[prop],
+  );
+}
+
 /**
  * Determines if a member should be excluded (hidden) based on exclusion rules
  * and the current prop values.
@@ -11,12 +19,27 @@
 export function shouldExclude (memberName, memberGroup, exclusionRules, propValues) {
   if (!exclusionRules?.length) return false;
   return exclusionRules.some(rule => {
-    const conditionsMet = Object.entries(rule.when).every(([prop, condition]) =>
-      typeof condition === 'function'
-        ? condition(propValues[prop])
-        : condition === propValues[prop],
-    );
-    if (!conditionsMet) return false;
+    if (!areConditionsMet(rule, propValues)) return false;
     return rule.hide?.[memberGroup]?.includes(memberName) ?? false;
   });
 }
+
+/**
+ * Collects disabled values for a specific prop based on exclusion rules
+ * and the current prop values.
+ *
+ * @param {string} propName - The prop to check for disabled values.
+ * @param {Array} exclusionRules - Array of exclusion rule objects.
+ * @param {object} propValues - Current prop values.
+ * @returns {Set} Set of disabled value strings.
+ */
+export function getDisabledValues (propName, exclusionRules, propValues) {
+  const disabled = new Set();
+  if (!exclusionRules?.length) return disabled;
+  for (const rule of exclusionRules) {
+    if (!areConditionsMet(rule, propValues)) continue;
+    const values = rule.disableValues?.props?.[propName];
+    if (values) values.forEach(v => disabled.add(String(v)));
+  }
+  return disabled;
+}

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

@@ -0,0 +1,75 @@
+import { assert } from 'chai';
+import { shouldExclude, getDisabledValues } from './exclusion_rules';
+
+const EQUALITY_RULE = { when: { kind: 'body' }, disableValues: { props: { size: ['500'] } } };
+const PREDICATE_RULE = { when: { kind: v => v !== 'headline' }, disableValues: { props: { size: ['500'] } } };
+const HIDE_RULE = { when: { kind: 'count' }, hide: { props: ['decoration'] } };
+
+describe('exclusion_rules', function () {
+  describe('getDisabledValues', function () {
+    it('should return empty Set when no rules', function () {
+      assert.equal(getDisabledValues('size', [], { kind: 'body' }).size, 0);
+    });
+
+    it('should return empty Set when rules is undefined', function () {
+      assert.equal(getDisabledValues('size', undefined, { kind: 'body' }).size, 0);
+    });
+
+    it('should contain value when equality condition matches', function () {
+      assert.isTrue(getDisabledValues('size', [EQUALITY_RULE], { kind: 'body' }).has('500'));
+    });
+
+    it('should return empty Set when equality condition does not match', function () {
+      assert.equal(getDisabledValues('size', [EQUALITY_RULE], { kind: 'headline' }).size, 0);
+    });
+
+    it('should contain value when predicate condition matches', function () {
+      assert.isTrue(getDisabledValues('size', [PREDICATE_RULE], { kind: 'body' }).has('500'));
+    });
+
+    it('should return empty Set when predicate condition does not match', function () {
+      assert.equal(getDisabledValues('size', [PREDICATE_RULE], { kind: 'headline' }).size, 0);
+    });
+
+    it('should union disabled values across multiple matching rules', function () {
+      const rules = [
+        { when: { kind: 'body' }, disableValues: { props: { size: ['500'] } } },
+        { when: { kind: 'body' }, disableValues: { props: { size: ['600'] } } },
+      ];
+      assert.equal(getDisabledValues('size', rules, { kind: 'body' }).size, 2);
+    });
+
+    it('should coerce numeric values to strings', function () {
+      const rules = [
+        { when: { kind: 'body' }, disableValues: { props: { size: [500] } } },
+      ];
+      assert.isTrue(getDisabledValues('size', rules, { kind: 'body' }).has('500'));
+    });
+
+    it('should return empty Set for a prop not in disableValues', function () {
+      assert.equal(getDisabledValues('tone', [EQUALITY_RULE], { kind: 'body' }).size, 0);
+    });
+
+    it('should ignore rules that only have hide', function () {
+      assert.equal(getDisabledValues('decoration', [HIDE_RULE], { kind: 'count' }).size, 0);
+    });
+  });
+
+  describe('shouldExclude', function () {
+    it('should return false when no rules', function () {
+      assert.isFalse(shouldExclude('size', 'props', [], {}));
+    });
+
+    it('should return true when condition matches and member is in hide list', function () {
+      assert.isTrue(shouldExclude('decoration', 'props', [HIDE_RULE], { kind: 'count' }));
+    });
+
+    it('should return false when condition does not match', function () {
+      assert.isFalse(shouldExclude('decoration', 'props', [HIDE_RULE], { kind: 'label' }));
+    });
+
+    it('should return false when member is not in hide list', function () {
+      assert.isFalse(shouldExclude('size', 'props', [HIDE_RULE], { kind: 'count' }));
+    });
+  });
+});