Add property for controlling widget size

[last-partizan]

It would be awesome to have something like :size="sm|md|lg" to control widget size.

Currently there's only "scale" when creating a theme in the Theme Editor.

I'm trying to use something like :classes="mySmallDropdownClasses" and it works fine, but having just size="sm" would be much better.

Or, maybe there's better option to pass classes for a group of widgets?

[fenilli]

Is your question about the theme editor or FormKit itself? we wouldn't add a prop for this in the core of inputs itself, but you can easily do it with plugins.

function addSizePluing(node) {
  if (node.type !== 'input') return;
  
  node.addProps(['size']);
  
  // more logic to add size to outer class or sections schema.
}

[last-partizan]

My question is about FormKit itself.

Thanks about this plugin idea, that will do!

[last-partizan]

@fenilli I'm trying this approach, but when i assign "node.props.classes", it doesn't do anything.

When i assign "node.props.innerClass" - it works, but i'd rather use classes. What i'm doing wrong here?

import type { FormKitNode } from '@formkit/core';

export const formKitSizePlugin = (node: FormKitNode) => {
  if (node.type !== 'input') return
  node.addProps(['size'])
  if (node.props.size === 'sm') {
    // not working?
    node.props.classes = { ...node.props.classes, ...smallDropdown }
    // works fine
    node.props.innerClass = 'rounded-md'
  }
}

export const smallDropdown = {
  inner: {
    'h-8': true,
    'rounded-md': true,
  },
  wrapper: {
    'mb-2.5': false,
  },
  outer: {
    'w-40': true,
    'mb-5': false,
  },
  option: {
    'text-gray-600': true,
    'text-m': true,
  },
}

[fenilli]

You should indeed use the section classes, like innerClass those are targeted in each section.