mui/material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

material-ui's Issues

Refactor CSS into Javascript

Move component CSS into Javascript to remove the need for adding CSS/Less files to projects.

Suggest comes from seeing this slideshow https://speakerdeck.com/vjeux/react-css-in-js from @vjeux

Compile React

Hi,

I'm pretty new to programming and I was wondering if anyone could help me get started using this project. I've got the .less file for the example to compile, but I'm not sure how to compile the .jsx into .js. If anyone could provide some detailed instructions, I'd really appreciate it.

Thanks!

Browser support

What's the browser support for this framework, especially for Android?

DropdownMenu and Input should implement interactive input from React

I couldn't find a way to mutate input value (selected item in dropdown or value in input). It would be nice if we could use standard interactive props from React.

See http://facebook.github.io/react/docs/forms.html and interactive inputs

The website doesn't work in FF on Ubuntu

Hi,

I tried your demos and the menu doesn't seem to work. FF web console doesn't show any errors but lots of warnings.

FF 33 on Ubuntu 14.04

Dropdown click handler faulty if too fast

If you reveal the menu then click where an option is/will be before the animation completes, it will never run the animation again and all but the selected item will remain hidden and all items will be clickable/selectable.

Chrome 38 stable.

Played with on this page: http://material-ui.com/#/components/dropdown-menu

Implement Tabs

It would be nice to implement tabs.

http://www.google.com/design/spec/components/tabs.html

Integration with angular.js

Is it possible to integrate in an angular.js app?

Bugs on Firefox

Transition and your react not working on firefox and have a notice..

Demo has artifact on Safari(Version 8.0 (10600.1.25)).

Demo has artifact on Safari(Version 8.0 (10600.1.25)).

Format code properly

https://github.com/callemall/material-ui/blob/3324f57d1b4f65d4cddb610a9c8f0c51b13d3cf6/docs/dist/js/dialog.jsx#L13

https://github.com/callemall/material-ui/blob/3324f57d1b4f65d4cddb610a9c8f0c51b13d3cf6/docs/dist/js/dialog.jsx#L33

Inconsistent indentation: https://github.com/callemall/material-ui/blob/3324f57d1b4f65d4cddb610a9c8f0c51b13d3cf6/docs/dist/js/menu.jsx vs https://github.com/callemall/material-ui/blob/3324f57d1b4f65d4cddb610a9c8f0c51b13d3cf6/docs/dist/js/dialog.jsx

Left Nav shadow is visible while docked

Screenshot taken on Chrome for Mac. In the Demos, your left nav shadow is slightly visible on the left side of the screen even while it is docked.

Why use 2 box-shadow in paper

This Code:

    &.mui-z-depth-1 {
        .lh-box-shadow(0 1px 4px rgba(0, 0, 0, 0.24)); 
        & > .mui-z-depth-bottom { .lh-box-shadow(0 1px 6px rgba(0, 0, 0, 0.12)); }
    }

I can't understand why use two box-shadow. In Google material, It just like this:

button{
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

Set user-select to none

A bit of clicking around causes some of the contents of the components to be selected. Setting user-select to none should fix this problem.

Unable to pass onChange event to Input component

It'd be nice to be able to do something like

<Input onChange={this._changeHandler} />

Paper Buttons should be real buttons

The PaperButton component is a div at the moment. This is not an ideal a solution cause you lost the feature to accessing the button by tab clicks. I would propose a change in the Paper component so that it will support the setting of the element type like this:

var Root = React.createFactory(this.props.elementType || 'div');
    return (
      <Root className={classes} onClick={this._onClick} onMouseDown={this._onMouseDown} onMouseUp={this._onMouseUp}>
        <div className={insideClasses}>
          {this.props.children}
        </div>
      </Root>
    );

Consider using google material-design-icons?

Hi, I'm using this package in my project, but when I was trying to use the icon, I found there's not too much options.

So I was wondering if you could include the google/material-design-icons?

Thanks for making this!

Is it possible for me to make this work if I'm using React version 0.12.0?

Right now I'm seeing problems because internally material-ui is using React 0.11.1 to create the elements and when I try to use them in React 0.12.0 I see an error. Is there something I can do about this on my end or should I just wait for you to update?

Thanks, I'm looking forward to trying this out!

Support for ref's on Input component

I'm not able to set a ref attribute on the Input component.

Embrace DOM-like structure

Right now subcomponents are passed as a list of special objects to some specific prop, like there:

menuItems = [
  { route: 'get-started', text: 'Get Started' },
  { route: 'css-framework', text: 'CSS Framework' },
  { route: 'components', text: 'Components' },
  { type: MenuItem.Types.SUBHEADER, text: 'Resources' },
  { 
     type: MenuItem.Types.LINK, 
     payload: 'https://github.com/callemall/material-ui', 
     text: 'GitHub' 
  },
];

//Docked Left Nav
<LeftNav menuItems={menuItems} />

I'd argue it would be much more composable and extensible to reworking API to have something like this:

<LeftNav>
  <MenuItem><Route to="get-started">Get Started</Route></MenuItem>
  <Subheader>Resources</Subheader>
  <MenuItem><a href="...">GitHub</a></MenuItem>
</LeftNav>

The same for all menus.

Keyboard and general accessibility

It would be nice if the components also worked for keyboard users (also providing the focus styling defined in the Material Design guidelines) and assistive technologies...

dropdown style broken on Safari

Hi, the style of dropdown menu is broken on Safari. http://callemall.github.io/material-ui/#/components/menus

My browser:

User-Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25

Before selecting:

While selecting:

After selecting:

Totally lost on how to build this

I'm completely new to the world of CSS frameworks, and I'm having a lot of trouble getting material-ui to work for me. My steps so far:

Installed Node.js and npm. npm installed less, browserify, reactify, and material-ui. Then I used less to compile components.less and scaffolding.less into a main.css. My understanding is that these two .less files will incorporate all of the other css in the directory. I copied this main.css file into my document root, and added a link to the stylesheet in the index.html. This seemed to work as my text changed to look like the example page. Then I used browserify on the index.js file in the src directory to create a main.js file. At the bottom of my body tag in my index.html I added a <script src = main.js> tag to include the main.js file.

So the next step was to start using the components, but I can't get any of them to work, for example
does nothing, and none of the other example components do either. The instructions listed in the "Usage" section of the instructions don't really make sense to me. I've tried including that code in a script tag in my index.html and it didn't do anything, and Webstorm had a bunch of issues with the code too. So I'm not really sure where else to put that, or how else to start including components.

Can anyone point me in the right direction? I've tried googling around but I haven't been able to find any resources that seem to be relevant.

Idea: make material-ui exportable as bootstrap/foundation extension.

I came up with a simple idea to make material-ui exportable as bootstrap 3/foundation 5 extension so it will be possible to apply material-ui colors, addons and overrides to these frameworks.

Add styles for all input types

At the moment only text and password types has proper styles.
number, date, time, range, color styles should be fixed.

What is jQuery needed for?

I'd like to use parts of this, but without the jQuery dependency.

I've search for jQuery and found some files that say they require jQuery but never actually use it (like table-header.jsx).

Is there a list of features jQuery is used for? Or is there a plan to get rid of the dependency?

Create distributable .css file

So we can build upon it for Vue.js

[request] LeftNav can be RightNav?

hello mate!

nice framework you have! =) ... excellent job!

Quick question... i have a website on demand to finish, and your LeftNav component will be superb on that, but, in a certain time I will need it as a right one.... is it possible to do this?

thanks very much! =)

Not work in Firefox

Not work =(

[DropDownMenu] Typeahead

Very nice! Would love to see type ahead functionality, which consists AFAIC of three elements.

• typeahead
• typeahead tag selection
• typeahead within textarea (@Friend names)

Build fails due to invalid fonticons path

When I try to build my project I get the following error:

events.js:72
throw er; // Unhandled 'error' event
^
Error: '../../node_modules/material-design-fonticons/styles/mdfi.css' wasn't found in file node_modules\material-ui\docs\dist\less\scaffolding.less line no. 9

But if I go into scaffolding.less and change the path from:

@import (less)"../../node_modules/material-design-fonticons/styles/mdfi.css";

to:

@import (less)"../../../node_modules/material-design-fonticons/styles/mdfi.css";

then it works again.

Ripples are triggered on mouseup instead of mousedown.

Ripples should trigger on mousedown. See:

https://www.polymer-project.org/components/paper-ripple/demo.html

Dialog should close with escape key

Dialog should close by pressing the escape key.

[Core][Perf] General performance optimizations needed

Slow as hell on rMBP / Safari. It provides very bad user experience.

Anything we can do about it?

Create a Meteor package and add it to Atmosphere

Hi, first thanks for your contribution.

It would be really useful to make a meteor package, and make it easy to install in meteor projects. Here are some links.

https://www.meteor.com/
https://atmospherejs.com/
https://atmospherejs.com/i/installing

Thanks.

Why your code is all in the docs folder? Components in "docs/dist"? quite a mess

Navigation in docs stopped working.

I could use navigation yesterday but now it does not react when I try to go to other section of the documentation.

Can't see Icons at the Icon Menu

I tried Safari, Chrome (Canary) and Firefox on OSX and I can't see any Icons at http://material-ui.com/#/components/menus when I look at the Icon Menu.

Font files?

The doc says:

"The Roboto font and 3 font weights (light, regular, and medium) are automatically included from Google Fonts."

The problem is that I can't find the font files included anywhere in the source code (I'm using npm) neither a font-face definition on the less files.

Responsive Documentation Site

GitHub Pages branch is broken on mobile.

Checkboxes & switches have missing vendor transform CSS

You're using transform without -webkit-transform, so stuff breaks on Safari. Likewise, they probably break on iOS Safari and Android's stock browser.

Rapidly pressing paper-buttons selects the label text

I noticed this when testing the ripple effect of the paper-buttons. Double-clicking the button results in the inner label text getting selected.

screenshot:

This is quite ugly, one way to prevent this from happening is adding some css to the inner label:
All of the correct CSS variations are:

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Buttons is one place where this is happening, This can be reproduced on your github.io page as well. Toolbar buttons also have this problem.

Can't use with server-side rendering

Many of the components use React "addons", which is aliased from react/addons to just react in the browser field in package.json.

On the server, this breaks rendering because it does not pull in the addons. There is no way to do the browserify-style aliasing on the server (as far as I know).

I think the solution should be to get rid of the browser aliasing in package.json and just use require('react/addons') instead of require('react') within the components.

[DropDownMenu] Add option to make dropdowns editable

Nice work.

I have two issues tho, on the dropdown.

• When you double-click on the dropdown on Chrome on Mac, then it breaks the dropdown.
• Further more, it should be possible to click twice, and then type in letters on the keyboard to navigate the dropdown.

Dropdown should have underline

http://material-ui.com/#/components/dropdown-menu
It's not immediately obvious that this component is a dropdown, because the arrow is too far to the right.

Compare with: http://www.google.co.uk/design/spec/components/menus.html#menus-usage

HN discussion: https://news.ycombinator.com/item?id=8582779

Ability to put labels on Checkboxes and Radios

Let's add the ability to apply a label to the checkbox/radio.

MaterialUI website doesn't render correctly on iOS Chrome

saw your site in product hunt. Opened link from iPhone into Chrome. Page was not rendering properly with many layout issues.

Allow for Sass to be an alternate to Less?

Has this been discussed? Since both are widely used, it would be terrific if users could choose to which they preferred.

Dropdown linebreaks

If there's a space in the text for an item in a dropdown, and it's to longest text in the dropdown, it will get word-wrapped.

This little snippet solves the problem

.mui-menu-item > * {
  white-space: nowrap;
}

But it seems to produce an awful lot of unnecessary padding to the right for some reason

looks bad on iPhone 6

I like the idea of this project, but I would expect the demo page to work well on mobile. But it doesn't, looks complete broken on an iPhone 6. I'd only consider using a library these days that's mobile-first. Resizing on desktop chrome also doesn't work properly.