fix: table caption lacks styling

Add styling for table captions fix #623
mdn · May 20, 2021 · a539755 · a539755
1 parent 1497dc6
commit a539755
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 4 deletions.
diff --git a/sass/atoms/_tables.scss b/sass/atoms/_tables.scss
@@ -6,6 +6,13 @@ table {
     font-size: $default-font-size;
   }
 
+  caption {
+    @include heading-5();
+    @include headings-common-base();
+    font-weight: bold;
+    margin-bottom: $base-spacing / 2;
+  }
+
   th,
   td {
     border: 1px solid $neutral-500;

diff --git a/sass/atoms/_typography.scss b/sass/atoms/_typography.scss
@@ -21,8 +21,7 @@ h2,
 h3,
 h4,
 h5 {
-  @include set-heading-font-family();
-  line-height: $heading-line-height;
+  @include headings-common-base();
 }
 
 h3,

diff --git a/sass/mixins/_typography.scss b/sass/mixins/_typography.scss
@@ -7,6 +7,12 @@
   letter-spacing: -0.0027777778rem;
 }
 
+@mixin headings-common-base() {
+  @include set-heading-font-family();
+  letter-spacing: 0.035rem;
+  line-height: $heading-line-height;
+}
+
 @mixin heading-1() {
   font-size: $xxl-font-size-mobile;
 

diff --git a/styleguide/assets/minimalist/main.css b/styleguide/assets/minimalist/main.css
@@ -208,6 +208,7 @@ h3,
 h4,
 h5 {
   font-family: zillaslab, palatino, "Palatino Linotype", serif;
+  letter-spacing: 0.035rem;
   line-height: 1.2;
 }
 
@@ -921,6 +922,19 @@ table {
     font-size: 1rem;
   }
 }
+table caption {
+  font-size: 1.125rem;
+  font-family: zillaslab, palatino, "Palatino Linotype", serif;
+  letter-spacing: 0.035rem;
+  line-height: 1.2;
+  font-weight: bold;
+  margin-bottom: 12px;
+}
+@media all and (min-width: 47.9385em) {
+  table caption {
+    font-size: 1.25rem;
+  }
+}
 table th,
 table td {
   border: 1px solid #c9c9c9;

diff --git a/styleguide/assets/styleguide.scss b/styleguide/assets/styleguide.scss
@@ -1,4 +1,5 @@
 @import "../../sass/vars/color-palette";
+@import "../../sass/vars/mdn-web-docs-palette";
 @import "../../sass/vars/layout";
 @import "../../sass/vars/typography";
 

diff --git a/styleguide/content/tables/index.md b/styleguide/content/tables/index.md
@@ -13,6 +13,7 @@ This is the most commonly used table style across MDN Web Docs. It is achieved b
 > Note: Notice the use of the `thead` element as well as the `scope` attribute on the `th` elements. This is critical to set correctly to ensure our table data is exposed correctly to assistive technologies.
 
 <table class="standard-table">
+<caption>Standard table</caption>
  <thead>
   <tr>
    <th scope="col">Attribute</th>

diff --git a/...de/resources/_gen/assets/css/minimalist/main.css_ee09be97884a98f1c989950cdaabae63.content b/...de/resources/_gen/assets/css/minimalist/main.css_ee09be97884a98f1c989950cdaabae63.content
diff --git a/...guide/resources/_gen/assets/css/minimalist/main.css_ee09be97884a98f1c989950cdaabae63.json b/...guide/resources/_gen/assets/css/minimalist/main.css_ee09be97884a98f1c989950cdaabae63.json
@@ -1 +1 @@
-{"Target":"minimalist/main.min.c326851b8ad44e6b3e00cf80a32996e90b1d23781c8732a7ea5c46c4b958fa77.css","MediaType":"text/css","Data":{"Integrity":"sha256-wyaFG4rUTms+AM+AoymW6QsdI3gchzKn6lxGxLlY+nc="}}
+{"Target":"minimalist/main.min.32c9c3c9da3255b5d6ca53a361a78117a9b727ab60cf58b6dab9e895566812c4.css","MediaType":"text/css","Data":{"Integrity":"sha256-MsnDydoyVbXWylOjYaeBF6m3J6tgz1i22rnolVZoEsQ="}}
diff --git a/test/sass/_test-mixins-typography.scss b/test/sass/_test-mixins-typography.scss
@@ -27,6 +27,22 @@
   }
 }
 
+@include describe("headings-common-base") {
+  @include it("Returns the expected base style for headings") {
+    @include assert {
+      @include output {
+        @include headings-common-base();
+      }
+
+      @include expect {
+        font-family: zillaslab, palatino, "Palatino Linotype", serif;
+        letter-spacing: 0.035rem;
+        line-height: 1.2;
+      }
+    }
+  }
+}
+
 @include describe("font-smoothing") {
   @include it("Returns prefixed style rules for font-smoothing") {
     @include assert {