Changes for v1.0.0

[Dogfalo]

v1 Updates

1.0.0-alpha.1 is here! Check out the announcement post on Medium

Big Changes

• [x] Rewrite Datepicker to no longer use pickadate.js which is no longer in development
• [x] Remove jQuery as a dependency

  Enhancements

• [x] Refactor plugins into Classes
  • [x] Dropdown
  • [x] Select
  • [x] Tooltip
  • [x] Toast
  • [x] Modal
  • [x] Collapsible
  • [x] Carousel
  • [x] Parallax
  • [x] Pushpin
  • [x] Materialbox
  • [x] Sidenav
  • [x] Slider
  • [x] Chips
  • [x] Autocomplete
  • [x] Feature Discovery
  • [x] Timepicker
• [x] All Plugins have
  • [x] this.el
  • [x] this.destroy()
  • [x] this.getInstance()
  • [x] upgrade guide
  • [x] update changelog
  • [x] update documentation
  • [x] In / Out transition options where applicable
• [x] getInstance takes in nodeList as well as single elem
• [ ] Remove styling on base HTML elements (pushed to a later release)
• [x] Form reworks
  • [x] Rework input field validation styling
  • [x] Rework labels to wrap Checkboxes and Radio Buttons

Slimming Down

• [x] Remove jQuery Easing plugin as a dependency
• [x] Remove HammerJs as a dependency
• [x] Remove transitions.js
• [x] Remove scrollfire
• [x] Remove automatic initialization for plugins
• [x] Remove options as HTML attributes on plugins
• [x] Unbundle Roboto from Materialize(#4798)

Clean Up

• [x] Remove the deprecated.userView class (#5037)
• [ ] Prefix plugin names (M_pluginname)?

Meta Items

• [x] Create 1.0.0 upgrade guide
• [x] Drop IE 10 Support
• [x] Drop Safari 7 + 8 Support
• [x] Archived Documentation

New Features

• [ ] Youtube-like PiP

[DanielRuf]

Not sure about Remove automatic initialization for plugins. At least we should provide some autoinit file like Google uses for their Material components or Materialize method like Foundation has to initialize all current components in the DOM.

[Dogfalo]

@DanielRuf Yes, we'll provide something akin to that.

[DanielRuf]

That's good, thanks for clarification.

So it is Move automatic initialization for plugins to own plugin / method(s)?

[DanielRuf]

Remove Velocity.js (and use pure CSS animations and transitions or JavaScript animation API).

[Dogfalo]

We'll probably remove Velocity once animation API becomes widely supported

[DanielRuf]

What about https://github.com/web-animations/web-animations-js

We can remove the polyfill in the future and do not have to change the code (again) but can already support and use the native Web Animations API of browsers.

[DanielRuf]

So people who use Gecko and Chromium based browsers would already benefit of this and this would bring a great performance improvement.

[Dogfalo]

Its not a good practice to use polyfills in libraries as they will change the browser behavior.

[DanielRuf]

Well, this one uses the native API if it is available so it is probably just used in Edge, IE, Safari and other older browsers.

At least we should evaluate it.

[Dogfalo]

Web animations is only in draft phase and is still subject to change.

[tomscholz]

There are some more issues I would consider to be included in v1.0.0.

• I think we should consider to "refactor" the badge component.(#1907, #413) In particular I would have in mind:

  • Remove .new class as it is annoying for people who do not use materialize in combination with the English language. Just a .badge class would be better.
  • Circular badges

• Materialize currently "requires" to import all colors. "That are 1.6k lines trash"(#3612, #936) for people that only use a primary and secondary color.

• Remove Roboto from source and add instructions to obtain it via CDN (#4797)

• Replace the collections component with a lists component (https://github.com/Dogfalo/materialize/pull/4727)

[tomscholz]

That's good, thanks for clarification.So it is Move automatic initialization for plugins to own plugin / method(s)?

References: #915, #1236, #4821

[DanielRuf]

Remove the collections component with a lists component (#4727)

Do you mean "replace"?

[tomscholz]

;) Yup

[Dogfalo]

Materialize currently "requires" to import all colors. That are 1.6k lines trash(#3612, #936) for people that only use a primary and secondary color.

The colors aren't just used for primary and secondary color purposes, they are used to color background and text as well. A solution to this is to have a distribution of materialize without the colors. But in this case, this seems to be orthogonal to v1

[tomscholz]

That makes sense

[tomscholz]

In v0.99.0 we renamed the.userView class to .user-view. I guess we should remove the temporary.userView class in v1.0 completely.

[Dogfalo]

Added to the list

[tomscholz]

I think we should also add the show/hide/breakpoints helpers fiasco to the list #5025

[fega]

@Dogfalo in the list, when you say "remove as a dependecy" you said that all the code should be removed or the mixed coded should be separated?

[DanielRuf]

We should use pure ES5/6 components. jQuer yand the others can be replaced with native solutions.

[fega]

The colors aren't just used for primary and secondary color purposes, they are used to color background and text as well. A solution to this is to have a distribution of materialize without the colors. But in this case, this seems to be orthogonal to v1

I see that the Cons are powerful than the Pros.. because: 1) all of those colors makes materialize bloated. 2) using the colors in the html is a tech deb when you want to change that color... and depending of the project complexity... could be a huge PAIN. 3) all could be solved adding a "common" color API, some helper classes like: .primary .primary-text .secondary .secondary-text primary-dark

[Dogfalo]

jQuery removal is no longer slated for v1.0.0. Instead, v1 will be a stepping stone where we remove a few other deps while rewriting code with minimal jQuery. We will likely target jQuery Lite for v1 and go for full removal in a later version.

[eboye]

I don't think we should remove colors from the library as this is the thing that brought me here.

That primary, secondary color scheme was the thing I hate about bootstrap.

It's always possible to remove those colors not used from the colors array in colors.scss

I always do this when my code is ready for production. I just comment out the ones not used and that's it.

[basicBrogrammer]

Is there a way to uncouple collapsible from a ul? I noticed some of the JS/CSS was looking for .collapsible > li.... I think it would be nice to have a collapsible tr inside a table.

[tomscholz]

@basicBrogrammer See #2128

[JamesVanWaza]

For Version 1.0.1 SSL for Materialize can be implemented as well.

[DanielRuf]

@jgacuca567 for the docs/website or files?

[JamesVanWaza]

@DanielRuf for the docs/website

[DanielRuf]

Well, this is not directly bound or dependent on the release(s). Changing this to https should be able on GitHub in the repo settings and where the domain is hosted.

[Dogfalo]

https://github.com/isaacs/github/issues/156

[TheColorRed]

I think you could simplify .flow-text by using the view port width instead of all those media-queries.

You would have to mess around with these values, as I just made them up off the top of my head.

@media (min-width: 360px) {
    .flow-text {
        font-size: 3vw;
    }
}

@media (min-width: 920px) {
    .flow-text {
        font-size: 2vw;
    }
}

@media (min-width: 1024px) {
    .flow-text {
        font-size: 1vw;
    }
}

[DanielRuf]

@Dogfalo it already works, see my websectools repository.

[Dogfalo]

We're going to wait for official support for ssl since it's not really that important at the moment

[DanielRuf]

Well, you just have to enable TLS and enforce it eg on Cloudflare and map the domain.

But I'm ok if this and other solutions are not ok for you, we can wait.

But keep in mind that TLS/https everywhere is more important than before ;-)

[DanielRuf]

fyi https://blog.sucuri.net/2017/08/google-warning-text-input-forms-october-https-ssl.html

[Dogfalo]

Yes I am aware of that. Either way, SSL does not have anything to do with 1.0, so let's table that discussion for now

[jeaphil]

hum well .. how about the Scrollable Tabs ?

[galingong]

@TheColorRed I agree, that .flow-text is a bit complicated, but you can always rewrite the formula to have less steps/media-queries. What I'd propose, is to create variables for more parameters. Right now we have to work with 5 parameters to configure .flow-text precisely - $range,$intervals in _variables.scss and initial screen width (360px default), initial font-size (1.2rem default) and "step multiplier" (0.2 default) in _typography.scss. Now if we had variables in _variables.scss - ($flow-initial-width, $flow-range, $flow-initial-size, $flow-steps and $flow-increment) - wouldn't it be much more simple to use and configure?

[Dogfalo]

We don't use viewport width for flow-text because it wont scale the text and line-height as precisely as we want to.

[lepusmorris]

I wish there were more component.

[tomscholz]

@lepusmorris Can you be more specific?

[lepusmorris]

@tomscholz alerts, comments, pricing tables, footer fixed navbar, modal, panel widget, product list, color picker.

i think i want to said mean snippet. get inspired by the bootstrap snippets. sorry for my english. good luck

[DanielRuf]

Modal is already there. Afaik pricing is not a Material Design component. We already have table and navbar. Color picker is also custom and available as thirdparty script. Product list = combination of card and other elements.

[gio1135]

So does this mean that tabs will be able to have a ripple effect?

[Dogfalo]

What's preventing you from adding waves-effect on tabs right now?

[gio1135]

It wasn't working. Maybe there's been an update that's fixed that since but it wasn't working when I tried it. http://lifetabporterville.org/past-events/

[Dogfalo]

It does work, just add the class waves-effect

[gio1135]

Well, what do you know? OK, so what about having to lower the <main> in a separate stylesheet when I add tabs to the navbar?

[Dogfalo]

Not planning any changes for that