halfmoonui / halfmoon

Halfmoon is a highly customizable, drop-in Bootstrap replacement. It comes with three built-in core themes, with dark mode support for all themes and components.
https://www.gethalfmoon.com
MIT License
3.01k stars 118 forks source link

Improve input invalidation, custom input type declaration and transition animation performance #99

Closed ThaUnknown closed 10 months ago

ThaUnknown commented 3 years ago

These are all non-breaking changes, and minor improvements.

Input invalidation:

These changes will apply the same effect as .is-invalid to any input that is invalid via :invalid pseudoselector, this happens when for example an input number is out of range, text doesnt follow regex, file has wrong extension etc, without any JS needed for validation like for example:

<input type="text" pattern="[A-Za-z]{3}">
<input type="number" min="0" max="100" step="5">

those will invalidate when the text doesn't match its regex pattern and when the number is <0 or >100 or %5!==0, these are just a few examples tho

Better declaration for custom input types:

TLDR, old:

<div class="custom-radio">
  <input type="radio" name="radio-set-1" id="radio-1" value="radio-1">
  <label for="radio-1">Radio 1</label>
</div>
<div class="custom-radio">
  <input type="radio" name="radio-set-1" id="radio-2" checked="checked" value="radio-2">
  <label for="radio-2">Radio 2</label>
</div>

new:

<div class="custom-radio">
  <input type="radio" name="radio-set-1" id="radio-1" value="radio-1">
  <label for="radio-1">Radio 1</label>
  <input type="radio" name="radio-set-1" id="radio-2" checked="checked" value="radio-2">
  <label for="radio-2">Radio 2</label>
</div>

I applied this for checkmarks, radios and switches, but the old way is still supported since these changes SHOULD BE non-breaking, but that means there's an additional useless position: relative inside .custom-${type}

Animation performance

applied the will-change property to address performance issues when animating the sidebar from https://github.com/halfmoonui/halfmoon/issues/43#issuecomment-706368351 I'm kinda torn on this one because MDN says never to use this, on the other hand Google says to use it on any animation, so I decided only to apply this for the very heavy sidebar animation that changes pretty much the entire site layout, but from my own testing this helps A LOT

halfmoonui commented 3 years ago

Hey, thanks a lot for the PR. I haven't gotten the chance to properly dive in, but everything looks to be good. I too am conflicted about the will-change property, not sure what to make of it to be honest. I am planning a new commit to the dev branch, so I will probably merge this before committing my own changes.

ksenginew commented 2 years ago

Hi @ThaUnknown It looks like halfmoon is not in active development. I had created an active clone named Fullmoon. Please refer to https://github.com/halfmoonui/halfmoon/issues/116#issuecomment-1013674632 for more info.

You can report any issues here. And contribute Fullmoon to add this feature.