Custom ranges on parameter unit pickers

Beta
#1

I’m using the following on a component to control padding:

"ranges" : { "px"  : { "min" : 0, "max" : 768, "step" : 8 } }

The max value is ignored, you can still enter a number greater than 768 and it will be applied to the element. The step value is also ignored, you can increment by whatever number you like where it should only allow 8, 16, 24, 32, etc. The idea is to only allow values that adhere to the 8pt grid system.

So it seems this is not working correctly or I am misunderstanding how this is supposed to work.

In the docs for control types: unit pickers & sliders there’s this:

padding – Has reduced ranges applicable for internal spacing.

What exactly does that mean?

1 Like
#2

@JvP, the “ranges” function only works for the slider portion of a unit picker. So with your settings above, those would be respected while you drag the slider back and forth, but you can still always enter whatever value you want (as long as its units are allowed) in the input manually. This is how unit pickers work in the main tool as well…sliders have ranges tied to them, but users can still go into the input and manually override to any value they want, even if it is outside the range of the slider.

As for your question on the “padding” type you can use as a preset for sliders, that means it has it’s ranges tuned for general padding to be used inside an element. For example, sliders can be set to have a min value that is negative if needed…this can be used on things like margins, but negative values are not allowed on padding, so the padding preset does not allow negative values. The padding preset is setup thusly with the following ranges:

  'padding' : {
    slider   : true,
    units    : sizeUnitsAll,
    keywords : [],
    ranges   : {
      'px'   : { 'min' : 0, 'max' : 100, 'step' : 5    },
      'em'   : { 'min' : 0, 'max' : 5,   'step' : 0.25 },
      'rem'  : { 'min' : 0, 'max' : 5,   'step' : 0.25 },
      '%'    : { 'min' : 0, 'max' : 5,   'step' : 0.25 },
      'vw'   : { 'min' : 0, 'max' : 5,   'step' : 0.25 },
      'vh'   : { 'min' : 0, 'max' : 5,   'step' : 0.25 },
      'vmin' : { 'min' : 0, 'max' : 5,   'step' : 0.25 },
      'vmax' : { 'min' : 0, 'max' : 5,   'step' : 0.25 },
    },
  },

The basic idea is that you have some simple ranges to work with to create internal padding in elements like lists, cards, buttons, et cetera. Generally, you shouldn’t need something larger than these values in those situations, and if you do, you can map in your own custom ranges if you desire.

Hopefully that helps to clear things up!

1 Like
#3

Thanks @kory, now I understand how to use the ranges and they do work when used with "slider" : true .

As I understand there’s no way to strictly enforce the min, max, and step values as the number inputs are always available and they accept any value. Perhaps this could be a future enhancement, to hide the number input to create an even more curated editing experience, as something I described in my first post (do not leave it up to end users to decide padding and margin values because they’ll surely ruin the layout :sweat_smile:).

The other bit about the padding type is also clear now, thank you :slight_smile:

#4

Definitely something we can think on as a potential future enhancement, but at the time the inputs are always “escapable” to allow people to have flexibility to jump outside of the bounds created by the ranges if needed. I totally hear you though…users sometimes can get very, ummm…creative…when it comes to their own ideas on things, haha. One thing you could explore there is using something like the select or choose controls (depending on how many selections you need) to create that curated system. For example, you could make a control with 5 or 6 predefined spacings (maybe following your 8pt grid example, it could be 8px, 16px, 24px, 32px, and 40px) behind the scenes, but then you give them more generic labels on top like “Spacing 1,” “Spacing 2,” et cetera or “Spacing XS,” “Spacing SM,” et cetera.

Hopefully that gives some ideas of how you could define a much more tight design system using current tooling!