fix(resizable, box): DLT-3445 accept full layout token set (#1293)

Author: hynes-dialpad

packages/dialtone-css/lib/build/less/components/box.less

@@ -62,6 +62,8 @@
 }
 
 ._box-layout(@prop) {
+  &-0 { @{prop}: 0; }
+
   &-1px { @{prop}: var(--dt-layout-1px); }
   &-2px { @{prop}: var(--dt-layout-2px); }
   &-8px { @{prop}: var(--dt-layout-8px); }
@@ -70,9 +72,15 @@
   &-24px { @{prop}: var(--dt-layout-24px); }
   &-50 { @{prop}: var(--dt-layout-50); }
   &-75 { @{prop}: var(--dt-layout-75); }
-  each(range(0, 1600, 100), {
+
+  each(range(100, 200, 25), {
+    &-@{value} { @{prop}: ~"var(--dt-layout-@{value})"; }
+  });
+
+  each(range(250, 1600, 50), {
     &-@{value} { @{prop}: ~"var(--dt-layout-@{value})"; }
   });
+
   // Percentage tokens
   each(@box-layout-percent-values, {
     &-@{value}p { @{prop}: ~"var(--dt-layout-@{value}-percent)"; }

packages/dialtone-vue/common/constants/index.js

@@ -83,6 +83,7 @@ export const DEFAULT_PREFIX = 'dt';
 
 // Component size scale
 export { COMPONENT_SIZES, TEXT_HEADLINE_SIZES } from './sizes.js';
+export { LAYOUT_SIZE_VALUES, LAYOUT_PERCENT_VALUES, LAYOUT_VALUES } from './layout.js';
 
 export default {
   VALIDATION_MESSAGE_TYPES,

packages/dialtone-vue/common/constants/layout.js

@@ -0,0 +1,42 @@
+/**
+ * Layout sizing values accepted by Vue sizing props.
+ * Includes 0, which resolves to raw CSS 0 rather than a --dt-layout-* token.
+ * Remaining values must stay in sync with LAYOUT_STOPS in
+ * packages/dialtone-css/postcss/constants.cjs.
+ *
+ * Non-zero bare integers are scale-indexed on the 64px layout base:
+ * value_in_px = stop * 64 / 100.
+ * '*px' values are literal off-scale pixel exceptions.
+ * @type {string[]}
+ */
+export const LAYOUT_SIZE_VALUES = [
+  '0',
+  '1px', '2px', '8px', '25', '20px', '24px', '50', '75', '100', '125', '150',
+  '175', '200', '250', '300', '350', '400', '450', '500', '550', '600', '650',
+  '700', '750', '800', '850', '900', '950', '1000', '1050', '1100', '1150',
+  '1200', '1250', '1300', '1350', '1400', '1450', '1500', '1550', '1600',
+];
+
+/**
+ * Percentage layout values accepted by DtBox layout props.
+ * @type {string[]}
+ */
+export const LAYOUT_PERCENT_VALUES = [
+  '10p', '20p', '25p', '30p', '33p', '40p', '50p',
+  '60p', '66p', '70p', '75p', '80p', '90p', '95p', '100p',
+];
+
+/**
+ * Layout token and percentage values accepted by DtBox layout props.
+ * @type {string[]}
+ */
+export const LAYOUT_VALUES = [
+  ...LAYOUT_SIZE_VALUES,
+  ...LAYOUT_PERCENT_VALUES,
+];
+
+export default {
+  LAYOUT_SIZE_VALUES,
+  LAYOUT_PERCENT_VALUES,
+  LAYOUT_VALUES,
+};

packages/dialtone-vue/common/constants/layout.test.js

@@ -0,0 +1,15 @@
+import cssConstants from '../../../dialtone-css/postcss/constants.cjs';
+import { LAYOUT_SIZE_VALUES, LAYOUT_PERCENT_VALUES, LAYOUT_VALUES } from '@/common/constants';
+
+describe('layout constants', () => {
+  it('builds size values from CSS layout token stops', () => {
+    expect(LAYOUT_SIZE_VALUES).toEqual(['0', ...cssConstants.LAYOUT_STOPS.map(String)]);
+  });
+
+  it('builds layout values from size and percentage values', () => {
+    expect(LAYOUT_VALUES).toEqual([
+      ...LAYOUT_SIZE_VALUES,
+      ...LAYOUT_PERCENT_VALUES,
+    ]);
+  });
+});

packages/dialtone-vue/components/Box/Box.test.js

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import { vi } from 'vitest';
 import DtBox from './Box.vue';
 import {
   DT_BOX_AS_VALUES,
@@ -7,11 +8,17 @@ import {
   DT_BOX_BORDER_WIDTH_VALUES,
   DT_BOX_BORDER_RADIUS_VALUES,
   DT_BOX_SHADOW_VALUES,
+  DT_BOX_LAYOUT_VALUES,
   DT_BOX_OVERFLOW_VALUES,
 } from './BoxConstants.js';
 
 describe('DtBox', () => {
   const slotContent = 'Box content';
+  const EXPANDED_LAYOUT_VALUES = DT_BOX_LAYOUT_VALUES.filter((value) => {
+    const token = Number(value);
+    // Intermediate stops between 100-multiple base stops, such as 125, 350, and 1550.
+    return Number.isInteger(token) && token > 100 && token % 100 !== 0;
+  });
   let wrapper;
 
   const mountComponent = (props = {}, attrs = {}, slots = {}) => {
@@ -22,12 +29,19 @@ describe('DtBox', () => {
         default: slotContent,
         ...slots,
       },
+      global: {
+        directives: {
+          // Vue resolves the directive during render even when the scrollbar branch is not mounted.
+          'dt-scrollbar': {},
+        },
+      },
     });
     return wrapper;
   };
 
   afterEach(() => {
     wrapper?.unmount();
+    vi.restoreAllMocks();
   });
 
   // ── Presentation ──────────────────────────────────────────
@@ -340,6 +354,41 @@ describe('DtBox', () => {
     expect(wrapper.classes()).toContain('d-box--max-bls-600');
   });
 
+  it.each(EXPANDED_LAYOUT_VALUES)('applies inlineSize class for expanded layout token %s', (value) => {
+    const wrapper = mountComponent({ inlineSize: value });
+
+    expect(wrapper.classes()).toContain(`d-box--is-${value}`);
+  });
+
+  it.each(EXPANDED_LAYOUT_VALUES)('does not warn for expanded layout token %s', (value) => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    mountComponent({ inlineSize: value });
+
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    ['inlineSize', '350', 'd-box--is-350'],
+    ['blockSize', '650', 'd-box--bls-650'],
+    ['minInlineSize', '750', 'd-box--min-is-750'],
+    ['maxInlineSize', '350', 'd-box--max-is-350'],
+    ['minBlockSize', '650', 'd-box--min-bls-650'],
+    ['maxBlockSize', '750', 'd-box--max-bls-750'],
+  ])('applies %s modifier class for expanded layout token %s', (prop, value, expectedClass) => {
+    const wrapper = mountComponent({ [prop]: value });
+
+    expect(wrapper.classes()).toContain(expectedClass);
+  });
+
+  it('warns when layout token is invalid', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    mountComponent({ inlineSize: '225' });
+
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('[DtBox] Invalid prop value: "225"'));
+  });
+
   // ── Overflow ──────────────────────────────────────────────
 
   it('applies overflow modifier class', () => {

packages/dialtone-vue/components/Box/Box.vue

@@ -176,37 +176,37 @@ const props = defineProps({
 
   /**
    * Block size (aka height). Maps to --dt-layout-* tokens.
-   * @values 0, 1px, 2px, 8px, 25, 20px, 24px, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 10p, 20p, 25p, 30p, 33p, 40p, 50p, 60p, 66p, 70p, 75p, 80p, 90p, 95p, 100p
+   * @values 0, 1px, 2px, 8px, 25, 20px, 24px, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 10p, 20p, 25p, 30p, 33p, 40p, 50p, 60p, 66p, 70p, 75p, 80p, 90p, 95p, 100p
    */
   blockSize: { type: String, default: undefined, validator: layoutValidator },
 
   /**
    * Inline size (aka width). Maps to --dt-layout-* tokens.
-   * @values 0, 1px, 2px, 8px, 25, 20px, 24px, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 10p, 20p, 25p, 30p, 33p, 40p, 50p, 60p, 66p, 70p, 75p, 80p, 90p, 95p, 100p
+   * @values 0, 1px, 2px, 8px, 25, 20px, 24px, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 10p, 20p, 25p, 30p, 33p, 40p, 50p, 60p, 66p, 70p, 75p, 80p, 90p, 95p, 100p
    */
   inlineSize: { type: String, default: undefined, validator: layoutValidator },
 
   /**
    * Maximum block size. Maps to --dt-layout-* tokens.
-   * @values 0, 1px, 2px, 8px, 25, 20px, 24px, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 10p, 20p, 25p, 30p, 33p, 40p, 50p, 60p, 66p, 70p, 75p, 80p, 90p, 95p, 100p
+   * @values 0, 1px, 2px, 8px, 25, 20px, 24px, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 10p, 20p, 25p, 30p, 33p, 40p, 50p, 60p, 66p, 70p, 75p, 80p, 90p, 95p, 100p
    */
   maxBlockSize: { type: String, default: undefined, validator: layoutValidator },
 
   /**
    * Minimum block size. Maps to --dt-layout-* tokens.
-   * @values 0, 1px, 2px, 8px, 25, 20px, 24px, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 10p, 20p, 25p, 30p, 33p, 40p, 50p, 60p, 66p, 70p, 75p, 80p, 90p, 95p, 100p
+   * @values 0, 1px, 2px, 8px, 25, 20px, 24px, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 10p, 20p, 25p, 30p, 33p, 40p, 50p, 60p, 66p, 70p, 75p, 80p, 90p, 95p, 100p
    */
   minBlockSize: { type: String, default: undefined, validator: layoutValidator },
 
   /**
    * Maximum inline size. Maps to --dt-layout-* tokens.
-   * @values 0, 1px, 2px, 8px, 25, 20px, 24px, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 10p, 20p, 25p, 30p, 33p, 40p, 50p, 60p, 66p, 70p, 75p, 80p, 90p, 95p, 100p
+   * @values 0, 1px, 2px, 8px, 25, 20px, 24px, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 10p, 20p, 25p, 30p, 33p, 40p, 50p, 60p, 66p, 70p, 75p, 80p, 90p, 95p, 100p
    */
   maxInlineSize: { type: String, default: undefined, validator: layoutValidator },
 
   /**
    * Minimum inline size. Maps to --dt-layout-* tokens.
-   * @values 0, 1px, 2px, 8px, 25, 20px, 24px, 50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 10p, 20p, 25p, 30p, 33p, 40p, 50p, 60p, 66p, 70p, 75p, 80p, 90p, 95p, 100p
+   * @values 0, 1px, 2px, 8px, 25, 20px, 24px, 50, 75, 100, 125, 150, 175, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, 1250, 1300, 1350, 1400, 1450, 1500, 1550, 1600, 10p, 20p, 25p, 30p, 33p, 40p, 50p, 60p, 66p, 70p, 75p, 80p, 90p, 95p, 100p
    */
   minInlineSize: { type: String, default: undefined, validator: layoutValidator },
 

packages/dialtone-vue/components/Box/BoxConstants.js

@@ -1,3 +1,5 @@
+import { LAYOUT_VALUES } from '@/common/constants';
+
 /**
  * Valid `as` elements for the box component.
  * @type {string[]}
@@ -62,11 +64,7 @@ export const DT_BOX_SHADOW_VALUES = ['small', 'medium', 'large', 'extra-large',
  * Layout token scale (for sizing props: inlineSize, blockSize, min/max variants).
  * @type {string[]}
  */
-export const DT_BOX_LAYOUT_VALUES = [
-  '0', '1px', '2px', '8px', '25', '20px', '24px', '50', '75', '100', '200', '300', '400', '500', '600', '700', '800', '900', '1000', '1100', '1200', '1300', '1400', '1500', '1600',
-  '10p', '20p', '25p', '30p', '33p', '40p', '50p',
-  '60p', '66p', '70p', '75p', '80p', '90p', '95p', '100p',
-];
+export const DT_BOX_LAYOUT_VALUES = LAYOUT_VALUES;
 
 /**
  * Overflow values.

packages/dialtone-vue/components/Resizable/Resizable.test.js

@@ -12,6 +12,8 @@ import DtResizable from './Resizable.vue';
 import DtResizablePanel from './ResizablePanel.vue';
 import DtResizableHandle from './ResizableHandle.vue';
 import { RESIZABLE_CONTEXT_KEY, RESIZABLE_HANDLE_CENTER_OFFSET_PX } from './ResizableConstants';
+import { isValidSizing, parseSizeToPixels } from './ResizableUtils';
+import { LAYOUT_SIZE_VALUES, LAYOUT_VALUES } from '@/common/constants';
 
 // Mock ResizeObserver for test environment
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
@@ -59,10 +61,48 @@ const InjectionReader = defineComponent({
   },
 });
 
+const PanelSizeValidationLayout = defineComponent({
+  name: 'PanelSizeValidationLayout',
+  components: { DtResizable, DtResizablePanel, DtResizableHandle },
+  props: {
+    panelProps: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  template: `
+    <div style="width: 1000px; height: 400px;">
+      <dt-resizable>
+        <dt-resizable-panel id="left" v-bind="panelProps" />
+        <dt-resizable-handle />
+        <dt-resizable-panel id="right" initial-size="50p" />
+      </dt-resizable>
+    </div>
+  `,
+});
+
 let wrapper;
 
 const CONTAINER_WIDTH = 1000;
 const PANEL_BOUNDARY = CONTAINER_WIDTH / 2;
+const LAYOUT_BASE_PX = 64;
+const REPRESENTATIVE_LAYOUT_VALUES = LAYOUT_SIZE_VALUES.filter(value => ['350', '650', '750'].includes(value));
+const RESIZABLE_SIZE_PROPS = ['initialSize', 'userMinSize', 'userMaxSize', 'systemMinSize', 'systemMaxSize', 'collapseSize'];
+const EXPANDED_LAYOUT_TOKEN_VALUES = LAYOUT_SIZE_VALUES.filter((value) => {
+  const token = Number(value);
+  // Intermediate stops between 100-multiple base stops, such as 125, 350, and 1550.
+  return Number.isInteger(token) && token > 100 && token % 100 !== 0;
+});
+const REPRESENTATIVE_LAYOUT_TOKEN_PIXEL_CASES = REPRESENTATIVE_LAYOUT_VALUES.map(value => [
+  value,
+  (Number(value) * LAYOUT_BASE_PX) / 100,
+]);
+const PRESERVED_SIZE_VALUES = [
+  ...LAYOUT_SIZE_VALUES.filter(value => ['0', '1px', '2px', '8px', '20px', '24px'].includes(value)),
+  ...LAYOUT_VALUES.filter(value => value === '50p'),
+];
+const INVALID_SIZE_VALUES = ['72', '225', '9999', '101p'];
 
 const _setWrapper = (props = {}, slots = {}) => {
   wrapper = mount(DtResizable, {
@@ -76,6 +116,7 @@ describe('DtResizable Tests', () => {
   afterEach(() => {
     wrapper?.unmount();
     restoreClientWidth();
+    vi.restoreAllMocks();
   });
 
   describe('Presentation', () => {
@@ -187,6 +228,88 @@ describe('DtResizable Tests', () => {
     });
   });
 
+  describe('Sizing validation', () => {
+    it.each(EXPANDED_LAYOUT_TOKEN_VALUES)('should accept expanded layout token %s', (value) => {
+      expect(isValidSizing(value)).toBe(true);
+    });
+
+    it.each(EXPANDED_LAYOUT_TOKEN_VALUES)('should not warn when validating expanded layout token %s', (value) => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      isValidSizing(value);
+
+      expect(warnSpy).not.toHaveBeenCalled();
+    });
+
+    it.each(REPRESENTATIVE_LAYOUT_TOKEN_PIXEL_CASES)('should resolve layout token %s to %ipx', (value, expectedPixels) => {
+      expect(parseSizeToPixels(value, 2000)).toBe(expectedPixels);
+    });
+
+    it.each(PRESERVED_SIZE_VALUES)('should preserve existing valid size value %s', (value) => {
+      expect(isValidSizing(value)).toBe(true);
+    });
+
+    it.each(INVALID_SIZE_VALUES)('should reject invalid size value %s', (value) => {
+      expect(isValidSizing(value)).toBe(false);
+    });
+
+    it.each(INVALID_SIZE_VALUES)('should fall back to zero for invalid size value %s', (value) => {
+      vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      expect(parseSizeToPixels(value, 1000)).toBe(0);
+    });
+
+    it.each(INVALID_SIZE_VALUES)('should warn for invalid size value %s', (value) => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      parseSizeToPixels(value, 1000);
+
+      expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('[resizable] Invalid ResizableSizeValue'));
+    });
+
+    it.each(
+      RESIZABLE_SIZE_PROPS.flatMap(prop => REPRESENTATIVE_LAYOUT_VALUES.map(value => [prop, value])),
+    )('should not error when %s uses expanded layout token %s', async (prop, value) => {
+      const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      mockClientWidth(CONTAINER_WIDTH);
+
+      wrapper = mount(PanelSizeValidationLayout, {
+        props: { panelProps: { [prop]: value } },
+        attachTo: document.body,
+      });
+      await wrapper.vm.$nextTick();
+
+      expect(errorSpy).not.toHaveBeenCalled();
+    });
+
+    it.each(
+      RESIZABLE_SIZE_PROPS.flatMap(prop => REPRESENTATIVE_LAYOUT_VALUES.map(value => [prop, value])),
+    )('should not warn when %s uses expanded layout token %s', async (prop, value) => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      mockClientWidth(CONTAINER_WIDTH);
+
+      wrapper = mount(PanelSizeValidationLayout, {
+        props: { panelProps: { [prop]: value } },
+        attachTo: document.body,
+      });
+      await wrapper.vm.$nextTick();
+
+      expect(warnSpy).not.toHaveBeenCalled();
+    });
+
+    it('should warn when a panel size prop uses an invalid value', () => {
+      const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      wrapper = mount(PanelSizeValidationLayout, {
+        props: { panelProps: { userMinSize: '225' } },
+        attachTo: document.body,
+      });
+
+      expect(errorSpy).toHaveBeenCalledWith('[DtResizablePanel] Invalid userMinSize: "225".');
+    });
+  });
+
   describe('Event emissions', () => {
     const FullLayout = defineComponent({
       name: 'FullLayout',