[Feature Request][3.0.0] Ability to add custom sizes (or just add xx-small)

[glen-84]

Problem to solve

It allows developers to add custom sizes for components like VAvatar.

Proposed solution

Some way to extend predefinedSizes here.

It's possible to adjust $size-scales via Sass, but the above code prevents the CSS class from being applied.

I'd like to add an xx-small size, which would render a 16px avatar. The alternative is for this to just be hard-coded as well, for others to use. If that's the case, then I can send a PR.

[johnleider]

Is this still an issue?

[glen-84]

Is this still an issue?

I'm not currently working on the same project (or the front end at all right now), but it still seems like this could be useful to others. I don't see any changes to the code.

[KaelWD]

Did you actually have a requirement for more than five unique sizes? It's pretty simple to just set xs to 16px and adjust the others accordingly.

[glen-84]

Did you actually have a requirement for more than five unique sizes? It's pretty simple to just set xs to 16px and adjust the others accordingly.

I just looked through the design, and I see example usages of 16, 24, 32, 40, and 48px. I didn't see usage of 56px (although there was something at 52px, which we may have rounded up or down), but I didn't spend too much time looking.

I suppose we could have set x-large to 48px and dropped the 56px option. It's difficult to say.

If you'd prefer to close this issue now, I can re-open (or request re-opening) if I run into this in future.

[KaelWD]

We aren't using predefinedSizes for typescript or prop validation so it would be pretty simple to inject it instead, not sure where that should be configured though. Another option would be to flip the condition so if it's a valid number it gets used as a number and anything else just gets passed straight to ${name}--size-${props.size}