#852 - table elements must now use .table class to receive styling (#924

)

* #852 - table elements must now use .table class to receive styling ⚠️

* document $easing-function variable

CHANGELOG.md

@@ -11,9 +11,10 @@
 - small tweaks to `label` and `code` sizing
 
 ### Breaking
-- Font size changed from `17px` to `16px` (#889)
-- Grid container size default is now 1440px instead of 1450px (#826)
-- List styles now closer to browser defaults (#866)
+- :warning: Font size changed from `17px` to `16px` (#889)
+- :warning: Grid container size default is now 1440px instead of 1450px (#826)
+- :warning: List styles now closer to browser defaults (#866)
+- :warning: Tables must now use the `table` class to get styles (#852)
 
 ## [1.0.0-rc.9][1.0.0-rc.9]
 

docs/acetate.config.js

@@ -18,7 +18,7 @@ module.exports = function (acetate) {
   acetate.data('font', font);
   acetate.data('svg', svg);
   acetate.data('repo', repo);
-  acetate.renderer.markdown = new MarkdownIt({
+  var customMarkdown = new MarkdownIt({
     html: true,
     linkify: true,
     langPrefix: '',
@@ -29,4 +29,6 @@ module.exports = function (acetate) {
       return (lang) ? '<pre><code class="' + lang + '" tabindex="0">' + hljs.highlight(lang, code).value + '</code></pre>' : '<pre><code tabindex="0">' + hljs.highlightAuto(code).value + '</code></pre>';
     }
   });
+  customMarkdown.renderer.rules.table_open = () => '<table class="table">';
+  acetate.renderer.markdown = customMarkdown;
 };

docs/source/documentation/components/_tables.md

@@ -1,10 +1,10 @@
-Tables have been styled by default. No extra classes are required, although there are some modifier classes available for specific flavors.
+Tables have not been styled by default. To style your tables, you must add the `table` class. If you'd like to style `<table>` elements without a class, you can set the `$namespace-tables` Sass variable to `false`. For more information on setting Sass variables see the [custom build documentation](../sass/#custom-build).
 
 By default, a large table will break your layout horizontally. You can solve this problem by wrapping a table in a `<div>` with the `.overflow-auto` helper class:
 
 ```
 <div class="overflow-auto">
-  <table>...</table>
+  <table class="table">...</table>
 </div>
 ```
 

docs/source/documentation/components/sample-code/_tables.html

@@ -1,4 +1,4 @@
-<table class="{{modifier}}">
+<table class="table {{modifier}}">
   <thead>
     <tr>
       <th>Thing 1</th>

docs/source/documentation/sass/_ui-variables.md

@@ -4,10 +4,16 @@ Controls specific aspects and behaviors across the UI.
 $transition: 150ms linear;
 $box-shadow: 0 0 16px 0 rgba(0,0,0,0.05) !default;
 $drawer-width: 280px !default;
+$easing-function: cubic-bezier(0.215, 0.440, 0.420, 0.880) !default;
+$namespace-tables: true !default;
 ```
 
 `$transition` is a speed and easing function used throughout the framework for motion effects.
 
 `$box-shadow` ensures consistent box shadow effects for adding depths to elements.
 
 `$drawer-width` controls the width of the hidden left and right drawers.
+
+`$easing-function` is a default timing function used by moving elements like modals. If you'd like to change how modals move in, you can tweak this variable (or use a browser-supplied funciton like `linear`)
+
+`$namespace-tables` scopes `<table>` styles to the `.table` class. To mimic the behavior of previous versions (where we automatically style raw `table` elements), set this to `false`.

docs/source/index.html

@@ -18,7 +18,7 @@ <h1 class="text-center text-blue huge-text avenir-light">Calcite Web</h1>
 <div class="grid-container leader-2 trailer-1 padding-trailer-half">
   <div class="column-7 pre-2 leader-half trailer-1 tablet-column-12">
     <div class="panel panel-white">
-      <table class="table-plain trailer-half">
+      <table class="table table-plain trailer-half">
         <tbody>
           <tr class="trailer-0">
            <td><b>Current Version</b></td>

docs/source/presentations/calcite-web-deep-dive.html

@@ -28,7 +28,7 @@ <h3 class="font-size-4">Flat (Mostly)</h3>
   <div class="slide-content">
     <p><button class="btn">Button</button> <button class="btn btn-clear">Clear Button</button></p>
     <p><a href="#" class="tooltip" aria-label="this is tooltip text">Tooltip</a></p>
-    <table>
+    <table class="table">
       <thead>
         <tr>
           <th>Table Header 1</th>

lib/sass/calcite-web/base/_config.scss

@@ -7,6 +7,7 @@ $transition:               150ms linear                !default;
 $box-shadow:               0 0 16px 0 rgba(0,0,0,.05)  !default;
 $drawer-width:             280px                       !default;
 $easing-function:          cubic-bezier(0.215, 0.440, 0.420, 0.880) !default;
+$namespace-tables:         true                        !default;
 
 // ┌─────────────┐
 // │ TYPE COLORS │

lib/sass/calcite-web/components/_table.scss

@@ -161,9 +161,14 @@
 }
 
 @if $include-tables == true {
-  table {@include table();}
-    .table-blue {@include table-blue();}
-    .table-plain {@include table-plain();}
-    .table-striped {@include table-striped();}
-    .table-no-table {@include table-no-table();}
+  @if $namespace-tables {
+    .table {@include table();}
+  } @else {
+    table {@include table();}
+  }
+
+  .table-blue {@include table-blue();}
+  .table-plain {@include table-plain();}
+  .table-striped {@include table-striped();}
+  .table-no-table {@include table-no-table();}
 }