For now, field errors can only be triggered by the pattern props. But pattern checks are limited (for instance. we cannot ask a server for field validity).

I found it useful to add an invalid props to Textfield that triggers displaying error props when it is set to true

Would you be willing to accept such PR ?

I am using the react-model and react-mdl have an error when called

upgradeElement(React.findDOMNode(this))

TypeError: Cannot read property 'firstChild' of undefined
    at Object.ReactMount.findComponentRoot

It may be replaced upgradeElement(React.findDOMNode(this)) by upgradeDom(), this solves the problem. What are some other ideas?

From eslint-plugin-react docs

It takes an option as the second parameter which can be "double" or "single" for double-quotes or single-quotes respectively. There is no default.

So what's the preferred style?
I'm asking because that rule is deprecated and should be replaced by native eslint option.

It would make life much easier if the utils were exported, so you can make custom mdl components.

What's your vision on this?

Just have run tabs demo and found out this issue. Appears at least in chrome and firefox, didn't test in other browsers. Can you reproduce it?

I'm going to use that area to output some additional controls and see no problem except warning in the console.

Hi,
I would love to see this project directly intergarted with meteor.

I am running into an issue with the Tooltip component in the latest release v0.14.0 where if there is an onClick handler on the child element it gets ignored like the tooltip is preventing propagation or something else.

Consider this sample code where the onClick never fires:

<Tooltip label="Delete this item">
  <IconButton name="delete" onClick={() => console.log('TEST')} />
</Tooltip>

Could it be the new MDLComponent or how the mdlUpgrade is upgrading the tooltip which breaks any child events?

Before I upgraded, the tooltip never worked but it did not break the child events, but now it is the opposite. I was happy to see that the Tooltip works now, but had to rip it out as it broke the apps functionality. I am hoping there is a fix for this. Let me know your thoughts.

The Navigation:L10 component in injecting mdl-navigation__link class into the input tag in the Textfield component:

<div class="mdl-textfield__expandable-holder" data-reactid=".0.7.0.0.0.2.$=10:0.1">
  <input class="mdl-textfield__input mdl-navigation__link" id="textfield-Search" value="" data-reactid=".0.7.0.0.0.2.$=10:0.1.$textfield-Search">
</div>

I'm trying to implement http://www.getmdl.io/templates/dashboard/index.html with the react-mdlmodule.

All of it except the header part of the drawer is possible to do. The top part of the drawer looks like this;

...
<header class="demo-drawer-header">
  <img src="images/user.jpg" class="demo-avatar">
  <div class="demo-avatar-dropdown">
    <span>[email protected]</span>
    <div class="mdl-layout-spacer"></div>
    <button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" data-upgraded=",MaterialButton,MaterialRipple">
      <i class="material-icons" role="presentation">arrow_drop_down</i>
      <span class="visuallyhidden">Accounts</span>
      <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span>
    </button>
    <div class="mdl-menu__container is-upgraded">
    ...stripped...
    </div>
  </div>
</header>
...

If I try to do this with the <Header> component, it required one of the children to be a <HeaderTabs> or <HeaderRow> or it will just wrap it with a <HeaderRow>.

I would like to avoid that wrapping. Can that be done?

Since the comment from Garbee on google/material-design-lite#1210 (comment) and some troubles with how the table is setup currently I rewrote the DataTable to deliver more flexibility, for example having more interactivity with the checkbox'es, or giving specific widths to a column, I rewrote the DataTable.

I think there are certainly some improvements to make to my implementation, but was wondering if you'd be up for me refactoring it. My current (rudimentary) implementation can be found in this gist:
https://gist.github.com/janpieterz/6a74182debfaa61db7df

Errors are never shown because the is-invalid className is not added when an error is set.

If in result of component render we've got empty attribute in DOM now, attribute should not be rendered at all.

So it should not be required too.

mdl is a micro-library which specifically states that it is not a framework and hence it does not deal with the framework savvy stuff. But react-mdl differs to that as it is a binding of mdl into react.

As per md spec, meaningful transitions are extremely important to material design and though for mdl it is out-of-scope to dicuss that, I think we should either have some helpers or atleast a discussion on various animation techniques that can be used for material transitions in react.

React 0.14 is out today.
I think we should write for it now and leave a note in readme for people still using 0.13.

We should add tests to make sure there are no regressions when changing/adding new code...

I noticed that some components (in my case tooltips) do not work after remount.

After some investigation I noticed that mdl expects root node of component as an argument, but tooltip returns wrapper around that node.

So I think we should try to upgrade/downgrade DOM node found using something like this:

React.findDOMNode(this.refs.mdlComponent || this)

When I use the linkState mixin:

Uncaught Error: Invariant Violation: Cannot provide a valueLink and a value or onChange event. If you want to use value or onChange, you probably don't want to use valueLink.

Any idea?

The Checkbox component doesn't ripple, compared to the Switch component that takes a ripple property.

function myHandler ( event ) {}
<input type='checkbox' onChange={ myHandler } />

Then, if I were to switch to use this library,

/* <input type='checkbox' onChange={ myHandler } /> */
<Checkbox onChange={ myHandler } />

it breaks.

It fires twice: once with the value, once with the Event.

I would much prefer to have my event handling all work the same: handle the event, let the handler work out what they find useful.

Please change to not intercept the native events.
Same request for Textfield and others.

Thanks for the library, by the way. It's so much easier than using all the mdl classnames

componentWillUnmount is never called if the application uses the Layout component.

The Layout component in MDL modify the tree because it creates a container and move the initial node inside the newly created container, which seems to cause some issues for React.
The result of this is that componentWillUnmount for the components inside Layout (which means all the components)

Not a lot of solutions here... Either we re-create the component ourselves, or we can find a good way to fix the initial MDL component. I'm for the later, and I'll try to find a good way to fix it.

cc @darkyen

How can I change the primary color?

Thanks!

a page contains Textfield and when hit a link change the route, it will throw this Error:

Uncaught Error: Invariant Violation: ReactMount: Root element ID differed from reactRootID.

the problem is in react's ReactMount.js: 631 findReactContainerForID(id)

var reactRootID = ReactInstanceHandles.getReactRootIDFromNodeID(id);
 var container = containersByReactRootID[reactRootID];
 if ("production" !== process.env.NODE_ENV) {
      var rootElement = rootElementsByReactRootID[reactRootID];
      if (rootElement && rootElement.parentNode !== container) {
 /*
the problem is here:
container == <body>
rootElement === <div class="mdl-layout__container">
rootElement.parentNode === null, but why ???? it should be the <body>


*/

Probably related: #8

Here is an example that reproduces the error https://gist.github.com/Graf009/ddef4109d157046ac62a
Solution: #22

Right now you are forced to use onChange on all fields.

I would prefer to use valueLink instead and making onChange optional.

valueLink={this.linkState('name')}

Any plans to support this?

In the material.css there is

    .mdl-layout__header--seamed {
         box-shadow: none; 
    }

It seems to me in the docs the mdl-layout__header--transparent has been written twice instead of mdl-layout__header-seemed for no shadow ? Maybe Add it I am also mentioning this issue on mdl page

I'm trying react-mdl, but I get a error message in the console on some components like Card and Footer. For example, this is my class:

import React from 'react'
import { CardTitle, CardText, CardActions, CardMenu, Card, Icon, Button, IconButton } from 'react-mdl'

export default class Cards extends React.Component {
  render() {
    return (
          <Card shadowLevel={0} style={{width: '320px', height: '320px'}}>
            <CardTitle expand={true} style={{color: '#fff', background: 'url(http://www.getmdl.io/assets/demos/dog.png) bottom right 15% no-repeat #46B6AC'}}>Update</CardTitle>
            <CardText>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Aenan convallis.
            </CardText>
            <CardActions border={true}>
              <Button colored={true}>View Updates</Button>
            </CardActions>
          </Card>
    )
  }
}

The MDL components are working fine when using MDL directly with div classes, but not with the react-mdl components.

I don't know what I'm doing wrong, I'm using these versions:

⇒  npm list | grep react                                                                                                                      
│ ├── [email protected]
│ ├── [email protected]
├── [email protected]
│ └── [email protected]
├─┬ [email protected]
├─┬ [email protected]
│ ├── [email protected]
├─┬ [email protected]
├─┬ [email protected]
├─┬ [email protected]
├── [email protected]

UPDATE: Just found that importing the source file directly fixes the problem, but importing it from the npm lib does not work..

# works
import Card from '../../../node_modules/react-mdl/lib/card/Card'

# does not work
import Card from 'react-mdl'

# with class
export default class Cards extends React.Component {
  render() {
    return (
          <Card shadowLevel={0} style={{width: '320px', height: '320px'}}>
            test
          </Card>
    )
  }
}

Hi,

I have "react": "0.14.0-rc1" in my project's package.json. When I try to install react-mdl, I get an error because of the peerDependency on react.

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected] || ^0.14.0

Thanks

Pleasure to use this library. Just wondering if tab rippling is a planned feature? I tried just adding mdl-js-ripple-effect to the tabs, evidently there is more to it than that.

react-mdl Tabs demo:

getmdl.io Tabs demo:

I know that you just upgraded it to use stateless components, but I think it would be better to set displayName as it will make debugging much easier for us and everyone else.

We can set displayName as a static prop on class or as a name of a function (so babel will set it for us).
But I'm not sure if we can use stateless components and set function name dynamically.

Per the current README projects integrating react-mdl should use the material.js from the /demo/ but it is excluded using .npmignore.

It would be nice if the customized material.js is made available in the npm package. Maybe in a different folder?

It would be great to allow passing needed component as a prop to use something other than button.

For example I'd like to have a link that looks like a button and would be cool if react-mdl could handle that.
See https://facebook.github.io/react/docs/animation.html#rendering-a-different-component

Also would be cool if it could "guess" what I'm trying to do based on passed props, i.e. if I pass href then I want it to render a tag.
See http://react-bootstrap.github.io/components.html#buttons-tags

Some examples:

<Button>button</Button>
<Button component="a">anchor tag</Button>
<Button href="#">anchor tag</Button>
<Button component={Link}>Link component from react-router</Button>

If you like the idea, but you're busy I could submit pull request.

Hi,

I've just started playing with react-mdl and it looks quite promising !

One question though: as we only have CSS version of the modified MDL styles, I was wondering how best to change the styling, like the $color-primary without going everywhere and replace all occurrences in the compiled CSS?

It would be awesome to have the modified SCSS files in this repo so that we can integrate them directly in our pipeline. SCSS files could be compiled into extra/material.css for those wanting to use CSS directly and for backward compatibility.

How do I add an onClick function to a MDL Button?

<Button primary={true} raised={true} ripple={true} onClick={this.doSomething}>Login</Button>

doSomething never gets called. It does work with onChange on a Checkbox. I checked the sources and it seems that the checkbox adds the onChange to the props, but button does not. Is that it, or should it work out of the box?

Because of https://github.com/tleunen/react-mdl/blob/master/src/Textfield.js#L39 when there is no onchange handler connected to a textfield, it throws an error.

Create a gitter channel to discuss roadmap, issues, etc

Installed the package via npm. When trying to import it:

import { Button } from 'react-mdl';

I get the following errors:

ERROR in ./~/react-mdl/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/Spinner in G:\findx\node_modules\react-mdl
 @ ./~/react-mdl/index.js 42:13-37

ERROR in ./~/react-mdl/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/Switch in G:\findx\node_modules\react-mdl
 @ ./~/react-mdl/index.js 43:12-35

ERROR in ./~/react-mdl/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/Textfield in G:\findx\node_modules\react-mdl
 @ ./~/react-mdl/index.js 46:15-41

ERROR in ./~/react-mdl/index.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./lib/Tooltip in G:\findx\node_modules\react-mdl
 @ ./~/react-mdl/index.js 47:13-37

There's no lib folder in the package directory:

Want to open discussion on using the implicit attr=true syntax

Example:

<Button raised accent disabled>
// vs
<Button raised={ true } accent={ true } disabled={ true }>

As HTML generally accepts the former, and is much less verbose, I think having the implicit form would be appropriate

Would be awesome if project jumps from 1.0.4 to latest.

The last of the 1.0x version released yesterday.
https://github.com/google/material-design-lite/releases

As documented on the mdl website .mdl-textfield__label is required, it also contains the pseudo element that draws the underline.

  <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
    <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
      <i class="material-icons">search</i>
    </label>
    <div class="mdl-textfield__expandable-holder">
      <input class="mdl-textfield__input" type="text" id="sample6" />
      <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
    </div>
  </div>

When using Textfield like

                            <MDL.Textfield
                                onChange={()=>{}} 
                                className="home-page__search"
                                label="Search"
                                expandable={true}
                                expandableIcon={"search"}
                            />

The .mdl-textfield__label is not injected and the resultant dom looks like the following thus the underline is not rendered.

<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable home-page__search is-upgraded is-dirty" data-reactid=".0.$=1$/.0.0.2" data-upgraded=",MaterialTextfield">
     <label class="mdl-button mdl-js-button mdl-button--icon" for="textfield-Search" data-reactid=".0.$=1$/.0.0.2.0" data-upgraded=",MaterialButton">
         <i class="material-icons" data-reactid=".0.$=1$/.0.0.2.0.0">search</i>
     </label>
     <div class="mdl-textfield__expandable-holder" data-reactid=".0.$=1$/.0.0.2.1">
         <input class="mdl-textfield__input" id="textfield-Search" data-reactid=".0.$=1$/.0.0.2.1.$textfield-Search">
      </div>
</div>

PS: Excuse my english.

Right now it uses a bunch of labels, just saying shouldn't it be ul ? seperate li's make it much simpler to style.

This might not be an error perse with react-mdl, but I'm unsure where else it would lie as off now.

I've got a couple of components, one is a header and the other one is a specific page.
The header component renders the MDL header tabs components. These work well and seem to be initialized ok (since if you don't they look different).

Then the page content has the tab panels in them.

What happens is that it actually does work, but it does not de-activate the other tabs. So effectively if you switch tabs, it only shows new tabs and keeps the other tabs content also rendered (the .is-active class stays on them).

I'm using React-Router and besides that there's not a lot of things that I think might have any relevance.
If I copy and paste the 'default' example made by mdl it works fine.

Any thoughts?

EDIT:
An image showing it happened in real life. After pressing all tabs this is shown. The content per tab is literally Tab x, and obviously in the image Tab 1- Tab 5 should not be visible there.

It does however 'enable' the tabs, so on first visit withouth pressing any tab button it looks like:

Seems like the order of the elements in the expandable textfield decides which direction it will expand is there a switch to control this ?

Add a contributing guideline

The wrapper is nice ! but i wonder why are you not using the way recommended for dynamic content generation by material design team ?

Problem like in #8 the Navigation component injecting mdl-navigation__link class
when i try this

            <Header title="Title">
                <IconButton name="more_vert" id="demo-menu-lower-right" />
                <Menu target="demo-menu-lower-right" align="right">
                    <MenuItem>Some Action</MenuItem>
                    <MenuItem>Another Action</MenuItem>
                    <MenuItem disabled={true}>Disabled Action</MenuItem>
                    <MenuItem>Yet Another Action</MenuItem>
                </Menu>
            </Header>

I get such a result

<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-navigation__link" id="demo-menu-lower-right" data-reactid=".0.0.0.2.$=10:0" data-upgraded=",MaterialButton,MaterialRipple"><i class="material-icons" data-reactid=".0.0.0.2.$=10:0.0">more_vert</i><span class="mdl-button__ripple-container"><span class="mdl-ripple is-animating" style="width: 117.377640814848px; height: 117.377640814848px; transform: translate(-50%, -50%) translate(21px, 13px);"></span></span></button>



<ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect mdl-navigation__link mdl-js-ripple-effect--ignore-events" for="demo-menu-lower-right" data-reactid=".0.0.0.2.$=11:0" data-upgraded=",MaterialMenu,MaterialRipple" style="clip: rect(0px 196.765625px 192px 0px);"><li class="mdl-menu__item mdl-js-ripple-effect" data-reactid=".0.0.0.2.$=11:0.0" tabindex="-1" style="transition-delay: 0s;">Some Action<span class="mdl-menu__item-ripple-container"><span class="mdl-ripple"></span></span></li><li class="mdl-menu__item mdl-js-ripple-effect" data-reactid=".0.0.0.2.$=11:0.1" tabindex="-1" style="transition-delay: 0.06s;">Another Action<span class="mdl-menu__item-ripple-container"><span class="mdl-ripple"></span></span></li><li class="mdl-menu__item mdl-js-ripple-effect" disabled="" data-reactid=".0.0.0.2.$=11:0.2" tabindex="-1" style="transition-delay: 0.12s;">Disabled Action<span class="mdl-menu__item-ripple-container"><span class="mdl-ripple"></span></span></li><li class="mdl-menu__item mdl-js-ripple-effect" data-reactid=".0.0.0.2.$=11:0.3" tabindex="-1" style="transition-delay: 0.18s;">Yet Another Action<span class="mdl-menu__item-ripple-container"><span class="mdl-ripple"></span></span></li></ul>