I used the float label input for username and password. When the page is loaded in chrome it is autofilled and for the password field, the float label overlaps the autofilled password.

Hi Everyone,

In some cases, using HTML classes to markup components feels awkward. One option is to use data-attributes instead. Here are some examples of what MUI markup would look like with data-attributes instead of classes:

Button colors

Classes:

<button class="mui-btn mui-btn-default">Button</button>
<button class="mui-btn mui-btn-primary">Button</button>

Data-attributes:

<button class="mui-btn" data-mui-color="default">Button</button>
<button class="mui-btn" data-mui-color="primary">Button</button>

Button styles

Classes:

<button class="mui-btn mui-btn-default mui-btn-raised">Button</button>
<button class="mui-btn mui-btn-default mui-btn-flat">Button</button>

Data-attributes:

<button class="mui-btn" data-mui-color="default" data-mui-style="raised">Button</button>
<button class="mui-btn" data-mui-color="default" data-mui-style="flat">Button</button>

Let me know your thoughts on data-attributes syntax!

Andres

Summary: value attr should be taken from state. I am planning to change it that way and implement componentShouldUpdate

Here is the scenario. I have a grid.

1. Selection + Edit button renders a form.
2. Form must be rendered with the values from selection.
3. Form must be able to re-render it self if we do 1st step again (change selection & click edit)
4. Form values must be editable after render.

So as a know , defaultValue renders only for the first time. So if I set selected values to defaultValue attr it will not be rendered again after selection changes. value attr renders everytime so it will be updated after my new selection but it is becoming editable=false by the nature of the React. I added onChange props to the component, it is not throwing any warning log also it is not reflecting by value change to the field. So only solution is to render form on every onChange.

handleChange = (code,event)=> {
        console.log(event);
        var state = {};
        state[code] = event.target.value;
        this.setState(state);
};

Here is the ss for better explaining what I did.

Hello @amorey , I am the member of cdnjs project. We want to host this library. But there is a question want to ask. I want to confirm with you about the main file need to be grab on npm. I found that there are both mui.js and mui.css on github. So I think the main files which is needed to be grab are these two files, right? But I just found that mui.css under lib/css/. How about mui.js? Please help me confirm this. Thanks for your help!

https://github.com/cdnjs/cdnjs/issues/8334

Hi Everyone,

We're planning an upgrade to the MUI React library to make it production-ready. Please let us know what you think of this spec:

Components

Appbar

<Appbar/>

Buttons

<Button/>
  * {String} color=default|primary|danger|accent
  * {String} variant=default|flat|raised|fab
  * {String} size=default|small|large
  * {Boolean} isDisabled=false|true

Caret

<Caret/>

Container

<Container/>
  * {Boolean} isFluid=false|true

Dividers

<Divider/>

Dropdowns

<Dropdown/>
  * {String} color=default|primary|danger|accent
  * {String} variant=default|flat|raised|fab
  * {String} size=default|small|large
  * {String} label
  * {String} alignMenu=left|right
  * {Function} onClick
  * {Boolean} isDisabled

<DropdownItem/>
  * {String} link
  * {Function} onClick

Forms

<Form/>
  * {Boolean} isInline=false|true

<TextInput/>
  * {String} type=text|email|password
  * {String} hint
  * {String} label
  * {Boolean} isLabelFloating=false|true
  * {Boolean} isRequired=false|true

<TextareaInput/>
  * {Integer} rows
  * {String} hint
  * {String} label
  * {Boolean} isLabelFloating=false|true
  * {Boolean} isRequired=false|true

<Checkbox/>
  * {String} value
  * {String} label
  * {Boolean} isChecked=false|true
  * {Boolean} isDisabled=false|true

<Radio/>
  * {String} name
  * {String} value
  * {Boolean} isChecked=false|true
  * {Boolean} isDisabled=false|true

<Select/>
  * {String} name
  * {Boolean} isAutofocus=false|true
  * {Boolean} isDisabled=false|true
  * {Boolean} isMultiple=false|true
  * {Boolean} isRequired=false|true
  * {Boolean} useDefault=false|true
  * {Function} onChange

<SelectItem/>
  * {String} value
  * {String} label

Grid

<Row/>

<Col/>
  * {Integer} xs
  * {Integer} xs-offset
  * {Integer} sm
  * {Integer} sm-offset
  * {Integer} md
  * {Integer} md-offset
  * {Integer} lg
  * {Integer} lg-offset

Panel

<Panel/>

Tabs

<Tabs/>
  * {Integer} initialSelectedIndex=0
  * {Boolean} isJustified=false|true
  * {Function} onChange

<Tab/>
  * {String} label
  * {String} value
  * {Function} onActive

CSS Helpers

<!-- animation -->
<div className="mui--no-transition"></div>

<!-- alignment -->
<div className="mui--text-left"></div>
<div className="mui--text-right"></div>
<div className="mui--text-center"></div>
<div className="mui--text-justify"></div>
<div className="mui--text-nowrap"></div>
<div className="mui--align-baseline"></div>
<div className="mui--align-top"></div>
<div className="mui--align-middle"></div>
<div className="mui--align-bottom"></div>

<!-- depth helpers -->
<div className="mui--z1"></div>
<div className="mui--z2"></div>
<div className="mui--z3"></div>
<div className="mui--z4"></div>
<div className="mui--z5"></div>

<!-- float helpers -->
<div className="mui--clearfix"></div>
<div className="mui--pull-right"></div>
<div className="mui--pull-left"></div>

<!-- toggle helpers -->
<div className="mui--hide"></div>
<div className="mui--show"></div>
<div className="mui--invisible"></div>
<div className="mui--overflow-hidden"></div>

<!-- responsive utilities -->
<div className="mui--visible-xs-block"></div>
<div className="mui--visible-xs-inline"></div>
<div className="mui--visible-xs-inline-block"></div>
<div className="mui--visible-sm-block"></div>
<div className="mui--visible-sm-inline"></div>
<div className="mui--visible-sm-inline-block"></div>
<div className="mui--visible-md-block"></div>
<div className="mui--visible-md-inline"></div>
<div className="mui--visible-md-inline-block"></div>
<div className="mui--visible-lg-block"></div>
<div className="mui--visible-lg-inline"></div>
<div className="mui--visible-lg-inline-block"></div>
<div className="mui--hidden-xs"></div>
<div className="mui--hidden-sm"></div>
<div className="mui--hidden-md"></div>
<div className="mui--hidden-lg"></div>

<!-- typograpy -->
<div className="mui--text-display4"></div>
<div className="mui--text-display3"></div>
<div className="mui--text-display2"></div>
<div className="mui--text-display1"></div>
<div className="mui--text-headline"></div>
<div className="mui--text-title"></div>
<div className="mui--text-subhead"></div>
<div className="mui--text-body2">Body2</div>
<div className="mui--text-body1">Body1</div>
<div className="mui--text-caption">Caption</div>
<div className="mui--text-menu">Menu</div>
<div className="mui--text-button">Button</div>

<!-- text color -->
<div className="mui--text-dark-primary"></div>
<div className="mui--text-dark-secondary"></div>
<div className="mui--text-dark-hint"></div>

<div className="mui--text-light-primary"></div>
<div className="mui--text-light-secondary"></div>
<div className="mui--text-light-hint"></div>

<div className="mui--text-accent"></div>
<div className="mui--text-accent-fallback"></div>

<div className="mui--text-danger"></div>

<!-- user select -->
<div className="mui--no-user-select"></div>

<!-- appbar dimension helpers -->
<div className="mui--appbar-height"></div>
<div className="mui--appbar-min-height"></div>
<div className="mui--appbar-line-height"></div>

<!-- list helpers -->
<ul className="mui-list--unstyled"></ul>
<ul className="mui-list--inline"></ul>

JavaScript API

Overlay

<script>
  mui.overlay('on'[, <options>[, <childEl>]]);
  mui.overlay('off');
</script>

Hi,

I'd like to attach a handler for when a tab is activated (because I have some flot charts that need to be redrawn).

Is there an existing event that I can attach to?

thanks

It looks like there is a validation issue with email inputs using the <mui-input> directive.

As you can see in this JSBin, if you type an invalid email, the wrapper div.mui-textfield still has the .ng-valid class while the inner input has .ng-invalid and .ng-invalid-email classes, plus the wrapper has the .ng-empty class while the inner input has an .ng-not-empty class and an .mui--is-empty class. And obviously, the floating label overlaps with the text input content because it thinks it's empty (because that's what the html classes tells!).

It made me laugh at first, but overall this is a complete mess and a pain to work around in application code. I did take a look at the source code of the directive but found nothing shockingly wrong, so I think the issue has more to do with the way angular input updates bubbles up to the wrapper div.mui-textfield.

EDIT: I'm not sure how this works, but this line updates the ng-model value but I'm almost certain it's not updating html classes.

I'm getting a website breaking error:

mui.js:1617 Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

It happens when my router removes content from a DOM node and appends new content to the same node.

I'm trying to use the React components in a WordPress plugin but the global styles are conflicting with the WordPress styles. I was wondering if there was a way to disable the styles that aren't prefixed? From that I could tell there isn't. It would be nice to be able to just use the components.

Thanks!

I am emptying a textfield's value using jQuery ($(textfield).val('');) but the floating label remains floating above the empty textfield. Sending the change event via jQuery ($(textfield).change();) doesn't cause the label to update.

Hello and Good day. I'm using muicss for my own project and I noticed some issue. The dropdown menu always open at the bottom even it is not visible on the viewport / screen.

Hi everybody!

I was wondering if it would be possible to bump the peer dependency version up to react 17?

React 17 only contains a minimal amount of breaking changes, so I don't think a lot (or any) reworking is required for this change.

Hey,

all major browsers have supported the prefers-color-scheme CSS media query for over a year now. Would it be a good idea for mui to also support this functionality? In essence the web site would have two themes, a light and a dark, and the end user's browser chooses automatically which one to use based on user preference and/or system settings.

If this functionality is welcome, any tips on how to implement it?

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

The devDependency gulp-rtlcss was updated from 1.4.0 to 1.4.1.

This version is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

Publisher: jjlharrison License: MIT

Your Greenkeeper bot :palm_tree:

The devDependency jsdom was updated from 15.2.1 to 16.0.1.

This version is not covered by your current version range.

If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.

Publisher: domenic License: MIT

Your Greenkeeper bot :palm_tree: