Merge pull request #99 from ChildishGiant/deprecation-warn

feat: 🗑️ add warning when using deprecated html setting
materializecss · Mar 28, 2021 · b79a7fe · b79a7fe
2 parents 09fab20 + ebe87f2
commit b79a7fe
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git a/js/toasts.js b/js/toasts.js
@@ -21,8 +21,13 @@
        */
       this.options = $.extend({}, Toast.defaults, options);
       this.htmlMessage = this.options.html;
+      // Warn when using html
+      if (!!this.options.html)
+        console.warn(
+          'The html option is deprecated and will be removed in the future. See https://github.com/materializecss/materialize/pull/49'
+        );
       // If the new unsafeHTML is used, prefer that
-      if (!!this.options.unsafeHTML){
+      if (!!this.options.unsafeHTML) {
         this.htmlMessage = this.options.unsafeHTML;
       }
       this.message = this.options.text;
@@ -205,9 +210,11 @@
             this.htmlMessage !== null &&
             this.htmlMessage.nodeType === 1 &&
             typeof this.htmlMessage.nodeName === 'string'
-      ) {  //if the htmlMessage is an HTML node, append it directly
+      ) {
+        //if the htmlMessage is an HTML node, append it directly
         toast.appendChild(this.htmlMessage);
-      } else if (!!this.htmlMessage.jquery) { // Check if it is jQuery object, append the node
+      } else if (!!this.htmlMessage.jquery) {
+        // Check if it is jQuery object, append the node
         $(toast).append(this.htmlMessage[0]);
       } else {
         // Append as unsanitized html;

diff --git a/js/tooltip.js b/js/tooltip.js
@@ -78,10 +78,14 @@
 
     _setTooltipContent(tooltipContentEl) {
       tooltipContentEl.textContent = this.options.text;
-      if (!!this.options.html){
+      if (!!this.options.html) {
+        // Warn when using html
+        console.warn(
+          'The html option is deprecated and will be removed in the future. See https://github.com/materializecss/materialize/pull/49'
+        );
         $(tooltipContentEl).append(this.options.html);
       }
-      if (!!this.options.unsafeHTML){
+      if (!!this.options.unsafeHTML) {
         $(tooltipContentEl).append(this.options.unsafeHTML);
       }
     }

diff --git a/test/html/tooltip.html b/test/html/tooltip.html
@@ -25,18 +25,23 @@
 <body>
 
     <div class="container">
-        <a class="btn tooltipped" data-position="bottom" data-tooltip="I am a tooltip">Hover me!</a>
-        <a class="btn tooltipped" data-position="bottom" data-tooltip="<span class='color: red'>I am a tooltip</span>">Hover me!</a>
+        <a class="btn tooltipped" data-position="bottom">unsafeHTML</a>
+        <a class="btn tooltipped" data-position="bottom">html</a>
+        <a class="btn tooltipped" data-position="bottom">text</a>
+        <a class="btn tooltipped" data-position="bottom" data-tooltip="<span class='color: red'>I am a tooltip</span>">data-tooltip</a>
     </div>
 
     <!--  Scripts-->
     <script src="../../bin/materialize.js"></script>
     <script type="text/javascript">
         document.addEventListener('DOMContentLoaded', function () {
             var elems = document.querySelectorAll('.tooltipped');
-            var instances = M.Tooltip.init(elems, {unsafeHTML: "<span class='color: red'>I am a tooltip</span>"});
+            var instances = M.Tooltip.init(elems[0], {unsafeHTML: "<span class='color: red'>I am a tooltip</span>"});
+            var instances = M.Tooltip.init(elems[1], {html: "<span class='color: red'>I am a tooltip</span>"});
+            var instances = M.Tooltip.init(elems[2], {text: "<span class='color: red'>I am a tooltip</span>"});
+            var instances = M.Tooltip.init(elems[3]);
         });
     </script>
 </body>
 
-</html>
+</html>