snowcoders / react-ui-base Goto Github PK

• http://www.material-ui.com/#/components/chip
• Most mail applications have this when you're editing the To field

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (@snowcoders)

• https://developer.microsoft.com/en-us/fabric#/components/toggle
• http://www.material-ui.com/#/components/toggle

In reality, Toggle and Checkbox both have the same logical functionality, just different styling. Probably best to create a Toggle component that either provides several divs for customizability or has a prop render method.

Animations have not been implemented for the checkbox examples... this is probably important to show that it can be done.

Most libraries do a lot with input elements. Having an unstyled base would make their lives easier.

Basic concept is that there are tabs somewhere in the code and you switch between views

• Material UI - http://www.material-ui.com/#/components/tabs
• JQuery UI - https://jqueryui.com/tabs/
• Office - https://developer.microsoft.com/en-us/fabric#/components/pivot

We are considering a popup anything that opens as a menu of something else. Examples are:

• Office's ContextMenu - https://developer.microsoft.com/en-us/fabric#/components/contextualmenu
• Office's Callout - https://developer.microsoft.com/en-us/fabric#/components/callout
• Materials Popover - http://www.material-ui.com/#/components/popover
• Materials Dropdown - http://www.material-ui.com/#/components/dropdown-menu

Things we see as must be possible:

1. If you have two buttons, each with their own menu; you shouldn't have to click twice on a button to get the menu to show up (e.g. see how material UI works)
2. Selection of how you want to position the content
3. Ability to pass in a parent component or reference it by querySelector. QuerySelector comes in handy when doing teaching scenarios and you just change out the query selection.
4. Probably want to avoid absolute positioning due to if the component is being mounted in a overflow element. It will likely get cut off.
5. Like to have - It not gitter as you scroll... not sure this is possible unless we do absolute positioning which contradicts the previous

There are many table scenarios out there, that said, looks like this maybe a good option:

• https://github.com/react-component/table

Loading wheels are super basic and part of every library

• Office - https://developer.microsoft.com/en-us/fabric#/components/spinner
• Material UI - http://www.material-ui.com/#/components/circular-progress

Seems the basic concept of popping something over your entire app like a dialog, modal and other things is pretty useful

• Material UI - http://www.material-ui.com/#/components/dialog
• Office - https://developer.microsoft.com/en-us/fabric#/components/modal
• Office - https://developer.microsoft.com/en-us/fabric#/components/dialog
• JQueryUI - https://jqueryui.com/dialog/

That said, all these dialogs look very different and we likely wouldn't be focusing on the dialog itself. More just the logic of opening a layer on top of the whole screen and having the content be centered.

Other things to keep in mind with this:

1. Tabbing - Looks like tabbing through the JQuery UI and the Office UI, they manage to keep the tab focus within the dialogs. Material UI doesn't seem to manage that. This seems like useful functionality.
2. Animations - Some have the overlay layer fade in, and the Modal content slide down. Others have it animate in all at the same time. Having this be flexible and customizable is key.
3. Click blocking - In almost all cases here, clicking the background will only dismiss the layer or eat the click. The click doesn't get to the actual app which is good, don't want the user clicking something they didn't mean to.

Many components have a calendar type element to allow them to do date selection or view a calendar

• Outlook Calendar
• Google Calendar
• JQuery datepicker - https://jqueryui.com/datepicker/
• Material UI - http://www.material-ui.com/#/components/date-picker
• Office - https://developer.microsoft.com/en-us/fabric#/components/datepicker

Having a generic highly customizable calendar component seems like a solid idea.

See #2 for why we broke this out to be separate

• Material UI - http://www.material-ui.com/#/components/linear-progress
• Office - https://developer.microsoft.com/en-us/fabric#/components/progressindicator