AmaranthineCodices / roact-material

Material design in Roblox w/ Roact!
MIT License
20 stars 5 forks source link

Some ideas/adjustments #24

Open ZachCurtis opened 6 years ago

ZachCurtis commented 6 years ago

Add disabled state to most components

Button, checkbox, radiobutton, radiogroup, and switch are all missing this. Color should be adjusted; default theme has things turning a faded black (#000000 at opacity 26% for most components). Mouse event should be conditionally passed based on disabled state.

Allow for icons to be used with buttons, as well as support circular button backgrounds

Floating action button most notably uses the create icon, but can be seen sporting any sort of icon in material ui designs. It's also a circle; which would have to be implemented with something like this for both button background and shadow.

Fix naming conventions to follow material/react naming conventions

onClicked should be changed to onClick, and onChecked should be changed to onSelect. Also would be nice to have a onFocus and onBlur event for components.

Add a Form component to encapsulate input fields

Should also pack props for contained inputs into one event fired by a submit button. Also add some text inputs; I made a css floating text input a while back for react native; I'll make one for this library when I get a chance.

Overhaul animations

I touched up the ripple animation in my fork as best as I felt like doing with simple easing adjustments; however changes need to be made so scaling and transparency are not sequential.

Possibly support xbox/gamepad?

I know this isn't exactly fun to do; and can quickly flood generative GUI code; but it would be a nice feature to have implemented before the library grows and it becomes a daunting task.

I'll try to help with as many of these as I can.

AmaranthineCodices commented 6 years ago

Thanks for the input! In the future, please split these issues up so they can be closed individually from PRs.

Disabled state

This will come before release; I've been pretty busy lately.

Button icons

Nothing really stops you from embedding the icon component in a button as a child. This is largely an ease-of-use thing, as such.

Circular buttons

I'm not interested in doing this at the moment because there's no way to clip non-rectangular regions in Roblox. This may change later this year; at that time I'll reconsider this, but right now FABs would not be able to support ripples properly. They would also require new shadow images.

Naming conventions

I'm not terribly interested in following the naming conventions of another platform. These names are largely opinion-based, and I'd rather not refactor everything for what is essentially a minor detail.

Focus/blur

This is not HTML; we don't have focus/blur events to begin with. I don't want to implement something like that when there isn't a strong motivation to do so.

Form component

Roact does not make this easy; this would require a large quantity of special-case code at best. This is best implemented by the end-user themselves, where they know the identities of every input element in the form, not as part of roact-material.

Text inputs

These are on the todo list: #16

Overhaul animations

The ripple animation's behavior is deliberate. The ripple will expand outwards from the input point and remain in place until the input ends - you can see this by running the button example. Click and hold on a button; the ripple will remain visible until you release the input. Do you have an example of where this is not desireable?

Xbox/gamepad

This isn't something I can do. I don't have a controller, unfortunately.