Fixing RadioButton layout

[sebpiq]

Hey !

I am working with nexusUI these days and still loving it after all these years (thanks @taylorbf ;) )

The RadioButton introduces some undesired horizontal padding when the width is not a multiple of the height.

This is because the button's dimensions are configured like so :

var buttonWidth = this.width / (orientation === "vertical" ? 1 : this._numberOfButtons);
var buttonHeight = this.height / (orientation === "vertical" ? this._numberOfButtons : 1);

for (var i = 0; i < this._numberOfButtons; i++) {
	this.buttons[i].resize(buttonWidth, buttonHeight);
}

I'd suggest taking the min of (width, height) instead :

var buttonWidth = this.width / (orientation === "vertical" ? 1 : this._numberOfButtons);
var buttonHeight = this.height / (orientation === "vertical" ? this._numberOfButtons : 1);
var buttonSize = Math.min(buttonWidth, buttonHeight)

for (var i = 0; i < this._numberOfButtons; i++) {
         this.buttons[i].resize(buttonSize, buttonSize);
}

And then, setting the container's display to flex :

buildFrame: {
        value: function buildFrame() {
                this.element = document.createElement("div");
                this.element.style.display = 'flex'
                this.element.style.flexDirection = 'row' // or 'column' if vertical
                this.element.style.justifyContent = 'space-between'
                this.parent.appendChild(this.element);
        }
},

Then it looks like this :

I'd submit a pull request, but don't know the lib so well, and wanted to submit the idea first anyways ;)