mlaursen / react-md Goto Github PK

Jump clicking to a new value is off by a lot. Also unable to use the left/right arrow keys to increment/decrement the value. Also unable to drag to new value.

The documentation of TextField says:

• Any remaining props: Any other props (such as style, aria-tags, etc) will be applied to the container component.

However the TextField implementation applies to the Input instead of field container:

lib/TextFields/TextFields.js:194

      var textFieldProps = _extends({}, props, {
        value: value,
        className: (0, _classnames2.default)('md-text-field', className, {
          active: active,
          'floating-label': useFloatingLabel,
          'single-line': !useFloatingLabel && !multiline,
          'multi-line': multiline,
          'full-width': fullWidth
        }),
        onFocus: this.handleFocus,
        onBlur: this.handleBlur,
        onChange: this.handleChange
      });

I assume the right is in the container as the documentation says.

Other issue, the documentation says that style is a remaining property, but in the code style is filtered from the remaining properties:

lib/TextFields/TextFields.js:153

var props = _objectWithoutProperties(_props, ['className', 'containerClassName', 'label', 'placeholder', 'maxLength', 'helpText', 'errorText', 'floatingLabel', 'icon', 'rightIcon', 'lineDirection', 'rows', 'maxRows', 'style', 'required', 'helpOnFocus', 'fullWidth']);

Should style be applied to the input or should be a remaining property and applied to the container?

https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-usage

This library is great, thank you for your work. Is it possible to release a umd build? For example, the react node module contains a umd build by itself.

SelectField should have a behaviour similar to an html control selection, so when the control has the focus and a key is pressed, the control should select the option that starts with the character pressed.

Should be able to swipe the calendar left or right to change the current month.

Need to update the List Item component to allow a control item.

This means to integrate a Checkbox before/after the primary text or a switch after the primary text.
There will be no ink when a user clicks the list item, it will just toggle the component.

Should this be a separate component?

Also need to allow Leave-behinds for allowing an action to occur when an item is swiped left or right.

https://github.com/reactjs/react-docgen

It'll make it nicer for the documentation website since all that data will be fuzzy searchable.

Need to include the margin in the positioning of the opposite attributes.

Example: If doing a top or bottom positioned tooltip, include the margin in the calculation for the left position. So doing a left or right positioned tooltip requires an include of margin for the top positioning.

I think it would be a good idea to have a Slack group for this project in order to improve communication.

Receive warnings that input and textarea should be controlled or uncontrolled. So need to either use defaultValue or value, not both programatically.

https://material.google.com/components/steppers.html

https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons

Currently FullWidth in Text Field is used to fit the input in a full width Form, but would be nice if it were possible to have a property for only to change the width to 100%, without change any other thing in the field. I know that it is possible using the style property, but it is not simple because is necessary to deal with different elements (input, container, right icon, ...), besides that, it would be nice to have FullWidth also in Select Field, and Select Field has more elements to deal.

So, I propose for the current behaviour to use the name Block (like bootstrap buttons) instead of FullWidth, and use FullWidth just for the width of Text Fields and Select Fields.

I've implemented these proposed changes: https://github.com/carlosforero/react-md/commit/cc7bb0ff52b535579c01c242261fe8d4bd96959c

Let me know any observation, in order to send a PR.

The documentation about NavigationDrawer is very complicated. The sample code should be easier to understand.

I can prepare a PR next week.

https://www.google.com/design/spec/components/expansion-panels.html

The icons should line up with the menu button. This will require figuring out the best way of converting a ListItem to a mini version. Use css to hide everything except for the icon? Create a new component? Use JS to remove items when closed and mini?

Need to figure out how tabs should work in navigation drawers.

Should it be children with a prop saying children are tabs? Pass in a list of tabs as props?

It should eventually be that navigation drawers would choose the correct content to display based on a tab.

If you click on the text field part of the picker component or the select field component, the dialog/menu appear and then close immediately.

This is either because they are triggered to open on focus and lose focus immediately or because the window click listener is happening automatically when opening which closes.

there is a newish font as part of md called noto.
its designed and recommended for where you need to support many languages.

i am not an expert on this. i am using this repo for a project that needs to work in lots of languages.

seeking advice...