Migrating Component Sizes to Numeric Scale

TLDR #

• Component size props now favor numeric values, e.g. 100 (xs), 200 (sm), 300 (md), 400 (lg), 500 (xl).
• T-shirt aliases still work — this is not a breaking change, and are marked to be sunset.
• Use the ESLint rule or migration script to update your code.
• Icon-family size props (DtIcon, DtLoader, DtEmoji, DtEmojiTextWrapper, DtProgressCircle, DtBadge's iconSize) now also accept a Number, matching every other component.
• Breaking change: DtModal's size prop (default / full) is removed and replaced by a fullscreen boolean. See migration script.

Why Numeric? #

• Extensible. Need a size between sm and md? Use 250. No naming gymnastics like "smedium."
• Consistent. Same 100-unit convention as dt-spacing-*, dt-layout-*, dt-icon-size-*, and color scales.
• Predictable for humans, engineers, and LLMs. Bigger number = bigger size. LLMs will have an easier time reasoning about ordinal relationships without needing a lookup table. T-shirt labels can't be consistently interpolated or composed by humans or AI.

Examples #

<dt-button size="sm">
  ...
</dt-button>

<dt-text kind="headline" size="xl">
  ...
</dt-text>

<dt-input size="lg" label="Name" />

<dt-button :size="200">
  ...
</dt-button>

<dt-text kind="headline" :size="500">
  ...
</dt-text>

<dt-input :size="400" label="Name" />

Size Mapping #

What's Affected #

DtButton, DtInput, DtSelectMenu, DtSegmentedControl, DtText, DtToggle, DtChip, DtCodeblock, DtEmptyState, DtSkeleton, DtSplitButton, DtFilterPill, DtCombobox, DtComboboxMultiSelect, DtComboboxWithPopover, DtTabGroup

What's NOT Affected #

• Icon sizes — the 100-800 icon scale itself is unchanged; icon-family components just now also accept Number values on the same scale (see below).
• DtAvatar — already migrated to numeric in a prior release.
• CSS utility classes — no changes. Numeric prop values map to the same CSS classes as before.

Icon-Family size Props Now Accept Number #

DtIcon, DtLoader, DtEmoji, DtEmojiTextWrapper, DtProgressCircle, and DtBadge's iconSize prop previously only accepted size="500" (a string). They now also accept :size="500" (a number), matching every other Dialtone component. Existing string usage is unaffected.

DtModal: size → fullscreen #

DtModal's size prop (default / full) is replaced by a fullscreen boolean:

<!-- Before -->
<dt-modal size="full">...</dt-modal>

<!-- After -->
<dt-modal fullscreen>...</dt-modal>

The migration script below handles this transform alongside the t-shirt-to-numeric conversion.

ESLint Rule #

deprecated-tshirt-sizes flags t-shirt size usage on Dialtone components and auto-fixes to numeric.

Add to your ESLint config:

// eslint.config.js (flat config)
import dialtone from '@dialpad/eslint-plugin-dialtone';

export default [
  {
    plugins: { dialtone },
    rules: {
      'dialtone/deprecated-tshirt-sizes': 'warn',
    },
  },
];

Then run:

npx eslint --fix "src/**/*.vue"

The rule handles: size, label-size, labelSize, and speed props on dt-* and Dt* components.

Skipped: Dynamic bindings (:size="computedValue"), non-Dialtone components.

Migration Script #

dialtone-migrate-tshirt-to-numeric batch-transforms t-shirt sizes to numeric across your codebase.

Preview Changes #

npx dialtone-migrate-tshirt-to-numeric --dry-run --cwd ./src

Apply Changes #

npx dialtone-migrate-tshirt-to-numeric --cwd ./src

Apply All Without Prompting #

npx dialtone-migrate-tshirt-to-numeric --yes --cwd ./src

The script handles:

• .vue, .md, .html, .js, .ts, .jsx, .tsx files
• Multiline component tags
• Any prop ending in size, Size, speed, or Speed (future-proof)
• DtModal's size="full" → fullscreen and size="default" → removed

Skipped:

• Already v-bound props (:size="...")
• Non-Dialtone components
• Non-scale size props (button-width-size, background-size, font-size)

Dynamic Bindings #

The ESLint rule flags t-shirt literals inside dynamic bindings (:size="'sm'", :size="condition ? 'sm' : 'md'"), but cannot auto-fix them. The migration script skips dynamic bindings entirely. Both require manual review.

Ternary expressions #

<dt-button :size="isCompact ? 'sm' : 'md'" />

<dt-button :size="isCompact ? 200 : 300" />

Computed properties #

computed: {
  buttonSize () {
    return this.isLarge ? 'lg' : 'md';
  },
}

computed: {
  buttonSize () {
    return this.isLarge ? 400 : 300;
  },
}

Lookup maps #

const sizeMap = {
  compact: 'sm',
  default: 'md',
  spacious: 'lg',
};

const sizeMap = {
  compact: 200,
  default: 300,
  spacious: 400,
};

Props from parent #

If a parent component passes a t-shirt string to a child's size prop, update the parent — the child already accepts numeric.