New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changes for v1.0.0 #5004

Open
Dogfalo opened this Issue Jul 21, 2017 · 218 comments

Comments

Projects
@Dogfalo
Owner

Dogfalo commented Jul 21, 2017

v1 Updates

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

Big Changes

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

Enhancements

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

Slimming Down

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

Clean Up

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

Meta Items

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

New Features

  • Youtube-like PiP
@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Jul 22, 2017

Contributor

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.

Contributor

DanielRuf commented Jul 22, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Dogfalo

Dogfalo Jul 22, 2017

Owner

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

Owner

Dogfalo commented Jul 22, 2017

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

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Jul 22, 2017

Contributor

That's good, thanks for clarification.

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

Contributor

DanielRuf commented Jul 22, 2017

That's good, thanks for clarification.

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

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Jul 22, 2017

Contributor

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

Contributor

DanielRuf commented Jul 22, 2017

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

@Dogfalo

This comment has been minimized.

Show comment
Hide comment
@Dogfalo

Dogfalo Jul 22, 2017

Owner

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

Owner

Dogfalo commented Jul 22, 2017

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

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Jul 22, 2017

Contributor

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.

Contributor

DanielRuf commented Jul 22, 2017

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

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Jul 22, 2017

Contributor

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

Contributor

DanielRuf commented Jul 22, 2017

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

@Dogfalo

This comment has been minimized.

Show comment
Hide comment
@Dogfalo

Dogfalo Jul 22, 2017

Owner

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

Owner

Dogfalo commented Jul 22, 2017

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

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Jul 23, 2017

Contributor

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.

Contributor

DanielRuf commented Jul 23, 2017

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.

@tomscholz tomscholz added this to Info in v1.0.0 Jul 23, 2017

@Dogfalo

This comment has been minimized.

Show comment
Hide comment
@Dogfalo

Dogfalo Jul 23, 2017

Owner

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

Owner

Dogfalo commented Jul 23, 2017

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

@tomscholz

This comment has been minimized.

Show comment
Hide comment
@tomscholz

tomscholz Jul 23, 2017

Contributor

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 (#4727)

Contributor

tomscholz commented Jul 23, 2017

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 (#4727)

@tomscholz

This comment has been minimized.

Show comment
Hide comment
@tomscholz

tomscholz Jul 23, 2017

Contributor

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

References: #915, #1236, #4821

Contributor

tomscholz commented Jul 23, 2017

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

References: #915, #1236, #4821

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Jul 23, 2017

Contributor

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

Do you mean "replace"?

Contributor

DanielRuf commented Jul 23, 2017

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

Do you mean "replace"?

@tomscholz

This comment has been minimized.

Show comment
Hide comment
@tomscholz

tomscholz Jul 23, 2017

Contributor

;) Yup

Contributor

tomscholz commented Jul 23, 2017

;) Yup

@Dogfalo

This comment has been minimized.

Show comment
Hide comment
@Dogfalo

Dogfalo Jul 24, 2017

Owner

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

Owner

Dogfalo commented Jul 24, 2017

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

This comment has been minimized.

Show comment
Hide comment
@tomscholz

tomscholz Jul 24, 2017

Contributor

That makes sense

Contributor

tomscholz commented Jul 24, 2017

That makes sense

@tomscholz tomscholz added the meta label Jul 25, 2017

@tomscholz

This comment has been minimized.

Show comment
Hide comment
@tomscholz

tomscholz Jul 26, 2017

Contributor

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.

Contributor

tomscholz commented Jul 26, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Dogfalo

Dogfalo Jul 26, 2017

Owner

Added to the list

Owner

Dogfalo commented Jul 26, 2017

Added to the list

@tomscholz

This comment has been minimized.

Show comment
Hide comment
@tomscholz

tomscholz Jul 26, 2017

Contributor

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

Contributor

tomscholz commented Jul 26, 2017

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

@fega

This comment has been minimized.

Show comment
Hide comment
@fega

fega Jul 26, 2017

@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?

fega commented Jul 26, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Jul 26, 2017

Contributor

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

Contributor

DanielRuf commented Jul 26, 2017

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

@fega

This comment has been minimized.

Show comment
Hide comment
@fega

fega Jul 26, 2017

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

fega commented Jul 26, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Dogfalo

Dogfalo Jul 26, 2017

Owner

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.

Owner

Dogfalo commented Jul 26, 2017

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.

@Thanood Thanood referenced this issue Aug 1, 2017

Closed

track for 1.0 #465

43 of 43 tasks complete

@Dogfalo Dogfalo removed the help-wanted label Aug 2, 2017

@eboye

This comment has been minimized.

Show comment
Hide comment
@eboye

eboye Aug 7, 2017

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.

eboye commented Aug 7, 2017

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

This comment has been minimized.

Show comment
Hide comment
@basicBrogrammer

basicBrogrammer Aug 10, 2017

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.

basicBrogrammer commented Aug 10, 2017

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

This comment has been minimized.

Show comment
Hide comment
@tomscholz
Contributor

tomscholz commented Aug 10, 2017

@basicBrogrammer See #2128

@JamesVanWaza

This comment has been minimized.

Show comment
Hide comment
@JamesVanWaza

JamesVanWaza Aug 27, 2017

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

JamesVanWaza commented Aug 27, 2017

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

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Aug 28, 2017

Contributor

@jgacuca567 for the docs/website or files?

Contributor

DanielRuf commented Aug 28, 2017

@jgacuca567 for the docs/website or files?

@JamesVanWaza

This comment has been minimized.

Show comment
Hide comment
@JamesVanWaza

JamesVanWaza Aug 28, 2017

@DanielRuf for the docs/website

JamesVanWaza commented Aug 28, 2017

@DanielRuf for the docs/website

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Nov 7, 2017

Contributor

From what I can tell, Rollup relies on ES6 modules which is already supported

Rollup does all the wrapping and module loading (AMD, UMD, CJS, ...) for you.

Contributor

DanielRuf commented Nov 7, 2017

From what I can tell, Rollup relies on ES6 modules which is already supported

Rollup does all the wrapping and module loading (AMD, UMD, CJS, ...) for you.

@gregyichang

This comment has been minimized.

Show comment
Hide comment
@gregyichang

gregyichang Nov 9, 2017

does version 1 resolve the memory leak around material_select element in SPA?

gregyichang commented Nov 9, 2017

does version 1 resolve the memory leak around material_select element in SPA?

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Nov 9, 2017

Contributor

@gregyichang which bug exactly? Do we have an issue for this?

Contributor

DanielRuf commented Nov 9, 2017

@gregyichang which bug exactly? Do we have an issue for this?

@gregyichang

This comment has been minimized.

Show comment
Hide comment
@gregyichang

gregyichang Nov 9, 2017

@DanielRuf , I didn't report a bug for it, I think it is similar to the issue 4266
But the fixed mentioned in issue 4266 doesn't fix problem at our end. I am wondering if this bug been fixed in version 1

gregyichang commented Nov 9, 2017

@DanielRuf , I didn't report a bug for it, I think it is similar to the issue 4266
But the fixed mentioned in issue 4266 doesn't fix problem at our end. I am wondering if this bug been fixed in version 1

@Dogfalo

This comment has been minimized.

Show comment
Hide comment
@Dogfalo

Dogfalo Nov 9, 2017

Owner

@gregyichang can't be certain, but now that all plugins will have a standardized destroy call, it should fix this issue.

Owner

Dogfalo commented Nov 9, 2017

@gregyichang can't be certain, but now that all plugins will have a standardized destroy call, it should fix this issue.

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Nov 9, 2017

Contributor

I didn't report a bug for it

It's generally good to report such issues if it is apparently not fixrd and an actual bug.

Contributor

DanielRuf commented Nov 9, 2017

I didn't report a bug for it

It's generally good to report such issues if it is apparently not fixrd and an actual bug.

@jacobq

This comment has been minimized.

Show comment
Hide comment
@jacobq

jacobq Nov 9, 2017

Contributor

@gregyichang Are you sure your SPA is calling material_select('destroy') on elements before they get removed from the DOM? If so, please do share an example on jsBin or something. I am using materialize in a SPA (technically, it's an electron app) and have not observed any memory leaks with the select control.

Contributor

jacobq commented Nov 9, 2017

@gregyichang Are you sure your SPA is calling material_select('destroy') on elements before they get removed from the DOM? If so, please do share an example on jsBin or something. I am using materialize in a SPA (technically, it's an electron app) and have not observed any memory leaks with the select control.

@Dogfalo

This comment has been minimized.

Show comment
Hide comment
@Dogfalo

Dogfalo Nov 11, 2017

Owner

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

Owner

Dogfalo commented Nov 11, 2017

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

@caseydev

This comment has been minimized.

Show comment
Hide comment
@caseydev

caseydev Nov 11, 2017

I have taste it... Its too good

Thanks

caseydev commented Nov 11, 2017

I have taste it... Its too good

Thanks

@MolaynoxX

This comment has been minimized.

Show comment
Hide comment
@MolaynoxX

MolaynoxX Nov 11, 2017

@Dogfalo the command from the medium post to download the alpha via npm is incorrect.
Should be npm install materialize-css@1.0.0-alpha.1 instead of npm install materializecss@1.0.0-alpha.1.

MolaynoxX commented Nov 11, 2017

@Dogfalo the command from the medium post to download the alpha via npm is incorrect.
Should be npm install materialize-css@1.0.0-alpha.1 instead of npm install materializecss@1.0.0-alpha.1.

@Dogfalo

This comment has been minimized.

Show comment
Hide comment
@Dogfalo

Dogfalo Nov 11, 2017

Owner

@MolaynoxX just fixed that, thanks.

Owner

Dogfalo commented Nov 11, 2017

@MolaynoxX just fixed that, thanks.

@Antsiscool

This comment has been minimized.

Show comment
Hide comment
@Antsiscool

Antsiscool Nov 11, 2017

@Dogfalo The getting started button on the preview documentation links to the current documentation.

Antsiscool commented Nov 11, 2017

@Dogfalo The getting started button on the preview documentation links to the current documentation.

@Dogfalo

This comment has been minimized.

Show comment
Hide comment
@Dogfalo

Dogfalo Nov 11, 2017

Owner

@Antsiscool We just fixed that through a PR, going to push it live later in the day.

Owner

Dogfalo commented Nov 11, 2017

@Antsiscool We just fixed that through a PR, going to push it live later in the day.

@GenericUK

This comment has been minimized.

Show comment
Hide comment
@GenericUK

GenericUK Dec 5, 2017

Is http://materializecss.com using version 1?

If it is, is it dev or master?

GenericUK commented Dec 5, 2017

Is http://materializecss.com using version 1?

If it is, is it dev or master?

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Dec 5, 2017

Contributor

No, next.materializecss.com uses v1-dev

Contributor

DanielRuf commented Dec 5, 2017

No, next.materializecss.com uses v1-dev

@GenericUK

This comment has been minimized.

Show comment
Hide comment
@GenericUK

GenericUK Dec 5, 2017

Thanks @DanielRuf
Is materializecss.com using 0.100.2?
Reason I ask is because I've installed 0.100.2 npm and the swipe to close side-nav only works with a slow swipe but on materializecss.com and next.materializecss.com a fast swipe will close it.

GenericUK commented Dec 5, 2017

Thanks @DanielRuf
Is materializecss.com using 0.100.2?
Reason I ask is because I've installed 0.100.2 npm and the swipe to close side-nav only works with a slow swipe but on materializecss.com and next.materializecss.com a fast swipe will close it.

@jacobq

This comment has been minimized.

Show comment
Hide comment
@jacobq

jacobq Dec 5, 2017

Contributor

@GenericUK I think your comments support the idea that having a versioned docs site would be helpful. #5449

Contributor

jacobq commented Dec 5, 2017

@GenericUK I think your comments support the idea that having a versioned docs site would be helpful. #5449

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Dec 5, 2017

Contributor

Is materializecss.com using 0.100.2?

Yes.

Reason I ask is because I've installed 0.100.2 npm and the swipe to close side-nav only works with a slow swipe but on materializecss.com and next.materializecss.com a fast swipe will close it.

This may be due to other things. Check the transitions on the elements and provide some more info about your code and test it without any other thirdparty scripts and styles.

Contributor

DanielRuf commented Dec 5, 2017

Is materializecss.com using 0.100.2?

Yes.

Reason I ask is because I've installed 0.100.2 npm and the swipe to close side-nav only works with a slow swipe but on materializecss.com and next.materializecss.com a fast swipe will close it.

This may be due to other things. Check the transitions on the elements and provide some more info about your code and test it without any other thirdparty scripts and styles.

@GenericUK

This comment has been minimized.

Show comment
Hide comment
@GenericUK

GenericUK Dec 5, 2017

UPDATE: I installed npm materialize-css@next and slide to close sidenav is now working as expected.
It may have been a conflict in Jquery as I'm using Materialize in a Wordpress theme and Wordpress depends on Jquery v1.12.4

GenericUK commented Dec 5, 2017

UPDATE: I installed npm materialize-css@next and slide to close sidenav is now working as expected.
It may have been a conflict in Jquery as I'm using Materialize in a Wordpress theme and Wordpress depends on Jquery v1.12.4

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Dec 6, 2017

Contributor

UPDATE: I installed npm materialize-css@next and slide to close sidenav is now working as expected.
It may have been a conflict in Jquery as I'm using Materialize in a Wordpress theme and Wordpress depends on Jquery v1.12.4

The last jQuery versions which were tested and Materialize optimized for were jQuery 3 and 2.
jQuery 1 is quite old and there were breaking changes from jQuery 1 to 2 and 3

Contributor

DanielRuf commented Dec 6, 2017

UPDATE: I installed npm materialize-css@next and slide to close sidenav is now working as expected.
It may have been a conflict in Jquery as I'm using Materialize in a Wordpress theme and Wordpress depends on Jquery v1.12.4

The last jQuery versions which were tested and Materialize optimized for were jQuery 3 and 2.
jQuery 1 is quite old and there were breaking changes from jQuery 1 to 2 and 3

@caseydev

This comment has been minimized.

Show comment
Hide comment
@caseydev

caseydev Dec 6, 2017

Thanks mate 💯

caseydev commented Dec 6, 2017

Thanks mate 💯

@gvinson

This comment has been minimized.

Show comment
Hide comment
@gvinson

gvinson Jan 23, 2018

What changed to drop IE 10 support?

gvinson commented Jan 23, 2018

What changed to drop IE 10 support?

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Jan 23, 2018

Contributor

What changed to drop IE 10 support?

@gvinson what do you mean? IE10 is quite old.

Contributor

DanielRuf commented Jan 23, 2018

What changed to drop IE 10 support?

@gvinson what do you mean? IE10 is quite old.

@jacobq

This comment has been minimized.

Show comment
Hide comment
@jacobq

jacobq Jan 26, 2018

Contributor

Would you please consider embedding the Materialize version number somewhere for humans to read? Yes, I know, I should be able to tell very easily by looking at my project's package.json or more directly by looking at the manifest of materialize itself, but often it's helpful during debugging to be able to confirm the version with which one is working in the console, e.g. M.version --> "1.0.0-alpha.3" (jQuery used to do this via jQuery.fn.jquery). If by some terrible accident, for example, two different versions were being loaded one would presumably overwrite the other, and someone might spend considerable time troubleshooting problems before realizing what happened.

Is this considered bad practice since it reveals information and can enable version sniffing?

Contributor

jacobq commented Jan 26, 2018

Would you please consider embedding the Materialize version number somewhere for humans to read? Yes, I know, I should be able to tell very easily by looking at my project's package.json or more directly by looking at the manifest of materialize itself, but often it's helpful during debugging to be able to confirm the version with which one is working in the console, e.g. M.version --> "1.0.0-alpha.3" (jQuery used to do this via jQuery.fn.jquery). If by some terrible accident, for example, two different versions were being loaded one would presumably overwrite the other, and someone might spend considerable time troubleshooting problems before realizing what happened.

Is this considered bad practice since it reveals information and can enable version sniffing?

@Dogfalo

This comment has been minimized.

Show comment
Hide comment
@Dogfalo

Dogfalo Jan 26, 2018

Owner

@jacobq This is something we are planning on doing

Owner

Dogfalo commented Jan 26, 2018

@jacobq This is something we are planning on doing

@gvinson

This comment has been minimized.

Show comment
Hide comment
@gvinson

gvinson Jan 29, 2018

@DanielRuf We are still supporting IE10 for our current clients. I was wondering what changed to drop the IE10 support so we could change the new IE11 only functionality to work in IE10.

gvinson commented Jan 29, 2018

@DanielRuf We are still supporting IE10 for our current clients. I was wondering what changed to drop the IE10 support so we could change the new IE11 only functionality to work in IE10.

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Jan 29, 2018

Contributor

@gvinson IE10 has far worse support for many features that are essential. ES5 support may not be so great and there is only official support for IE11 by Microsoftanymore.

We also have big clients and we only sell for IE11 as last version. Also support for IE10 was dropped in many other solutions.

For IE10 support you may need polyfills and use browserlist with IE10 settings for the transpiling.

Contributor

DanielRuf commented Jan 29, 2018

@gvinson IE10 has far worse support for many features that are essential. ES5 support may not be so great and there is only official support for IE11 by Microsoftanymore.

We also have big clients and we only sell for IE11 as last version. Also support for IE10 was dropped in many other solutions.

For IE10 support you may need polyfills and use browserlist with IE10 settings for the transpiling.

@jacobq jacobq referenced this issue Feb 1, 2018

Open

[WIP] Drop bower #109

0 of 5 tasks complete
@Dogfalo

This comment has been minimized.

Show comment
Hide comment
@Dogfalo

Dogfalo Mar 12, 2018

Owner

Automatic Initialization function added in dc804a6

Owner

Dogfalo commented Mar 12, 2018

Automatic Initialization function added in dc804a6

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Mar 12, 2018

Contributor

pickadate.js which is no longer in development

Well, I'm currently the new maintainer so it is still alive ;-)

Contributor

DanielRuf commented Mar 12, 2018

pickadate.js which is no longer in development

Well, I'm currently the new maintainer so it is still alive ;-)

@judasane

This comment has been minimized.

Show comment
Hide comment
@judasane

judasane Jul 6, 2018

Sidenav has not an option closeOnClick

judasane commented Jul 6, 2018

Sidenav has not an option closeOnClick

@jessegilbride

This comment has been minimized.

Show comment
Hide comment
@jessegilbride

jessegilbride Jul 7, 2018

@judasane -- Assuming you're not answering someone's question, I'm using closeOnClick currently on my site as such:

$('.button-collapse').sideNav({
menuWidth: 300,
edge: 'right',
draggable: true,
closeOnClick: true
});

jessegilbride commented Jul 7, 2018

@judasane -- Assuming you're not answering someone's question, I'm using closeOnClick currently on my site as such:

$('.button-collapse').sideNav({
menuWidth: 300,
edge: 'right',
draggable: true,
closeOnClick: true
});

@judasane

This comment has been minimized.

Show comment
Hide comment
@judasane

judasane Jul 7, 2018

@jessegilbride But you're using jQuery, Materialize is supposed to work without it. And in the other hand Materialize.js file doesn't have a closeOnClick on v1.0.0-rc.1.
I'll try to update to rc2 and see if it works. Thank you.

judasane commented Jul 7, 2018

@jessegilbride But you're using jQuery, Materialize is supposed to work without it. And in the other hand Materialize.js file doesn't have a closeOnClick on v1.0.0-rc.1.
I'll try to update to rc2 and see if it works. Thank you.

@amitkeret

This comment has been minimized.

Show comment
Hide comment
@amitkeret

amitkeret Jul 30, 2018

status of the show/hide breakpoints (@tomscholz #4594 #5025) is still lacking

from _grid.scss:
Media Query Classes are defined on line 305
Utility Classes (including .hide) are defined on line 720

So, if I want to make an element show on extra-large only:

<div class="hide show-on-extra-large"></div>

This doesn't work.

Also, trying to use class="hide-on-med-and-down hide-on-large-only" doesn't work either, since the definition of hide-on-large-only is incorrect.

.hide-on-large-only {
  @media #{$large-and-up} {
    display: none !important;
  }
}
// should be something like
.hide-on-large-only {
  @media only screen and (min-width: $medium-screen) and (max-width: $large-screen) {
    display: none !important;
  }
}

amitkeret commented Jul 30, 2018

status of the show/hide breakpoints (@tomscholz #4594 #5025) is still lacking

from _grid.scss:
Media Query Classes are defined on line 305
Utility Classes (including .hide) are defined on line 720

So, if I want to make an element show on extra-large only:

<div class="hide show-on-extra-large"></div>

This doesn't work.

Also, trying to use class="hide-on-med-and-down hide-on-large-only" doesn't work either, since the definition of hide-on-large-only is incorrect.

.hide-on-large-only {
  @media #{$large-and-up} {
    display: none !important;
  }
}
// should be something like
.hide-on-large-only {
  @media only screen and (min-width: $medium-screen) and (max-width: $large-screen) {
    display: none !important;
  }
}
@jacobq

This comment has been minimized.

Show comment
Hide comment
@jacobq

jacobq Jul 30, 2018

Contributor

I know it's a little late as we're in RC now, but I would love to see some guides/documentation around how to deal with acceptance testing apps that use materialize. For example, for a traditional input field it is straight-forward: there are test helpers that know how to fill in values, but for select, Materialize does some sketchy stuff (hiding the original select and using other DOM elements to control the appearance), so my tests are not able to "click" the invisible select but rather need some hacks to find and use the input and ul > li from materialize.

Contributor

jacobq commented Jul 30, 2018

I know it's a little late as we're in RC now, but I would love to see some guides/documentation around how to deal with acceptance testing apps that use materialize. For example, for a traditional input field it is straight-forward: there are test helpers that know how to fill in values, but for select, Materialize does some sketchy stuff (hiding the original select and using other DOM elements to control the appearance), so my tests are not able to "click" the invisible select but rather need some hacks to find and use the input and ul > li from materialize.

@zanechua

This comment has been minimized.

Show comment
Hide comment
@zanechua

zanechua Aug 12, 2018

Just curious about the new implementation of the helper-text class. I think it's great that now the validation is done in a separate element and makes it really simple to work with.

Except for the fact that the helper-text is now consuming actual space and it makes the space between inputs really long. Especially if you implement it with a character counter.

I've checked and .input-field is implemented with position: relative;

Could we make helper-text and character-counter positioned absolute?

    .input-field .character-counter {
        position: absolute;
        right: 12px;
    }

    .input-field .helper-text {
        position: absolute;
        width: 100%;
    }

zanechua commented Aug 12, 2018

Just curious about the new implementation of the helper-text class. I think it's great that now the validation is done in a separate element and makes it really simple to work with.

Except for the fact that the helper-text is now consuming actual space and it makes the space between inputs really long. Especially if you implement it with a character counter.

I've checked and .input-field is implemented with position: relative;

Could we make helper-text and character-counter positioned absolute?

    .input-field .character-counter {
        position: absolute;
        right: 12px;
    }

    .input-field .helper-text {
        position: absolute;
        width: 100%;
    }
@jacobq

This comment has been minimized.

Show comment
Hide comment
@jacobq

jacobq Sep 18, 2018

Contributor

Now that v1.0.0 has been released perhaps this issue can/should be closed. (I assume the unchecked checkboxes can now be checked.)

Contributor

jacobq commented Sep 18, 2018

Now that v1.0.0 has been released perhaps this issue can/should be closed. (I assume the unchecked checkboxes can now be checked.)

@simkessy

This comment has been minimized.

Show comment
Hide comment
@simkessy

simkessy Sep 19, 2018

@DanielRuf

@gvinson IE10 has far worse support for many features that are essential. ES5 support may not be so great and there is only official support for IE11 by Microsoftanymore.

We also have big clients and we only sell for IE11 as last version. Also support for IE10 was dropped in many other solutions.

For IE10 support you may need polyfills and use browserlist with IE10 settings for the transpiling.

I really need to get this working on IE10, which polyfills do I need? Can I run it through Babel?

simkessy commented Sep 19, 2018

@DanielRuf

@gvinson IE10 has far worse support for many features that are essential. ES5 support may not be so great and there is only official support for IE11 by Microsoftanymore.

We also have big clients and we only sell for IE11 as last version. Also support for IE10 was dropped in many other solutions.

For IE10 support you may need polyfills and use browserlist with IE10 settings for the transpiling.

I really need to get this working on IE10, which polyfills do I need? Can I run it through Babel?

@DanielRuf

This comment has been minimized.

Show comment
Hide comment
@DanielRuf

DanielRuf Sep 19, 2018

Contributor

Babel and PostCSS using browserslist should be fine.

Contributor

DanielRuf commented Sep 19, 2018

Babel and PostCSS using browserslist should be fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment