Add disabled tabs feature.

[paullryan]

Adds a disabled tabs feature, this allows users to create wizards that activate tabs as previous states are finished.

    <mdl-tab-panel mdl-tab-panel-title="Targaryens" [disabled]="disableTargaryens">
       <ul>
          <li>Viserys</li>
          <li>Daenerys</li>
       </ul>
    </mdl-tab-panel>

Added code, tests and documentation, also fixes peer dependencies for npm 3 (peer dependencies are gone, so should be both a peer and a regular dependency).

[coveralls]

Coverage increased (+0.0007%) to 99.696% when pulling bae2896 on paullryan:disabled-tabs into 63a4bbd on mseemann:master.

[coveralls]

Coverage increased (+0.0002%) to 99.696% when pulling 7f5034a on paullryan:disabled-tabs into 63a4bbd on mseemann:master.

[mseemann]

Hi, thanks a lot for your contribution! It's my fault that there is no documentation for contributions right now - so let me explain: Every bugfix or feature is welcome! At least there are some requirements that must be fulfilled:

• this package must work with the css from the CDN (https://code.getmdl.io/1.2.1/material.indigo-pink.min.css)
• this package must work with the included scss files. these files are copied from the material-design-lite package and all mask images are included to make the usage as easy as possible. the scss files are regenerated if there is a new release of mdl. this would override any changes made so far.
• this package should only provide what is provided by material design lite so far (to keep it clean, maintainable and predictable what is included)

If these requirements can't be guaranteed there is an extension package (https://github.com/mseemann/angular2-mdl-ext). this package is open for nearly every new feature.

I like your feature and going to make some notes in the committed files, what changes would break these requirements.

[mseemann]

the disabled state should work for tabs with a simple title and with a title component (to make it consistent). may be you should consider just add the css and prevent from changing the tabs in the tabSelected function.

[mseemann]

this is the main problem. these changes would be overwritten if i need to regenerate the scss files from the mdl sources. and the disabled state would only be displayed correctly if the developer uses the scss files and not the css from CDN. we need another solution to change the style. for example there is only one fix color and the style is included in the component or there is a reusable css class from mdl that can be used to draw the tabs in disabled state. Or you have another solution for this problem...

[paullryan]

Understood. I'll see if I can fix this.

[grizzm0]

This would have to be PRed to material-design-lite first.

I'm not sure it would be accepted tho. The material design spec doesn't say anything about disabled being allowed on tabs. But it doesn't say anything about it not being allowed either.

[mseemann]

form the usability point of view a stepper would be great for the usecase mentioned by @paullryan (https://material.google.com/components/steppers.html#steppers-types-of-steps). But mdl doesn't provide such a component. so i think it would be acceptable to make this change and provide the possibility to disable a tab - so every one can decide to use it or not.

i agree that mdl will not accept such a pull request. the usual answer is: "we are working on version 2.0" :-)

[paullryan]

I'm with the general comment from @mseemann here, extensions should be allowed, whether we do this in an extension library or something else, with mdl core you could easily do this kind of extension in your own implementation, however because of the bundled nature of the angular2-mdl into components it becomes quite a bit more difficult to extend as an end user. I'll give it some thought and any suggestions from either of you would be great.

[paullryan]

@mseemann any reason you don't have a separate main for your scss that imports the mdl main? That way we could do overrides in a different directory something like:

• scss
  • mdl
    • (mdl-scss goes here)
  • extensions
  • material-design-lite.scss (has imports for mdl/material-design-lite.scss and extensions/core.scss)
  • material-design-lite-grid.scss (has imports for mdl/material-design-lite-grid.scss and extensions/core.scss)

[mseemann]

@paullryan there is no special reason for this. just didn't see a requirement so far...

[coveralls]

Coverage increased (+0.0001%) to 99.799% when pulling 8b2f2e0 on paullryan:disabled-tabs into a43fc09 on mseemann:master.

[coveralls]

Coverage increased (+0.0001%) to 99.799% when pulling a3f20de on paullryan:disabled-tabs into a43fc09 on mseemann:master.

[coveralls]

Coverage decreased (-0.07%) to 99.733% when pulling 1d05963 on paullryan:disabled-tabs into a43fc09 on mseemann:master.

[paullryan]

Ok @mseemann I believe this addresses your concerns/comments. Can you please review again.

Thanks for the feedback so far.

The coverage decrease is because of the added scss which I would recommend ignoring (let me know if you have a better suggestion).

[coveralls]

Coverage decreased (-0.07%) to 99.733% when pulling d87a07b on paullryan:disabled-tabs into a43fc09 on mseemann:master.

[paullryan]

Ignore my comment about coverage, adding a test for that now.

[coveralls]

Coverage increased (+0.0004%) to 99.8% when pulling d627aa9 on paullryan:disabled-tabs into a43fc09 on mseemann:master.

[mseemann]

@paullryan a lot of changes! 😀. Because there are breaking changes (the user need to configure a new path to the scss sources) I would rather do these changes in a new branch (v2.0). I also have some changes in mind that would break the distribution directory structure so we can put these in one release and bump the version to 2.0. Can you create a new pull request of your changes against this branch? thanks a lot!

[paullryan]

@mseemann ok created #113 against the v2.0 branch.