@ons/design-system 54.0.1 → 55.2.0

package/components/table/_macro.spec.js

@@ -480,33 +480,6 @@ describe('macro: table', () => {
 
       expect($('.ons-table').attr('data-aria-desc')).toBe('descending');
     });
-
-    it('adds visually hidden class to column headers', () => {
-      const $ = cheerio.load(renderComponent('table', params));
-
-      const hasClass = mapAll($('.ons-table__header > span'), node => node.hasClass('ons-u-vh'));
-      expect(hasClass).toEqual([true, true, true]);
-    });
-
-    it('renders "sort-sprite" icon for each column header', () => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
-
-      faker.renderComponent('table', params);
-
-      expect(iconsSpy.occurrences[0]).toEqual({
-        iconType: 'sort-sprite',
-        id: 'Column 1',
-      });
-      expect(iconsSpy.occurrences[1]).toEqual({
-        iconType: 'sort-sprite',
-        id: 'Column 2',
-      });
-      expect(iconsSpy.occurrences[2]).toEqual({
-        iconType: 'sort-sprite',
-        id: 'Column 3',
-      });
-    });
   });
 
   describe('table caption', () => {

package/components/table/_table.scss

@@ -4,6 +4,10 @@
   margin-bottom: 1rem;
   width: 100%;
 
+  &__head {
+    border-bottom: 2px solid $color-grey-75;
+  }
+
   &__caption {
     font-weight: 700;
     text-align: left;
@@ -13,7 +17,7 @@
   &__cell {
     @include nth-element(1, 0);
 
-    border-bottom: 2px solid $color-grey-100;
+    border-bottom: 2px solid $color-grey-75;
     overflow: hidden;
     padding: 0.5rem 0 0.5rem 1rem;
     text-align: left;
@@ -64,8 +68,12 @@
         display: none;
       }
 
+      .ons-table__head {
+        border-bottom: none;
+      }
+
       .ons-table__body .ons-table__row {
-        border-bottom: 2px solid $color-grey-100;
+        border-bottom: 2px solid $color-grey-75;
         display: block;
         margin-bottom: 1rem;
       }
@@ -108,7 +116,8 @@
       width: 100%;
       &:focus {
         box-shadow: 0 0 0 3px $color-page-light, 0 0 0 5px $color-text-link-focus, 0 0 0 8px $color-focus;
-        outline: none;
+        outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+        outline-offset: 1px;
       }
       .ons-table__header,
       .ons-table__cell {
@@ -182,8 +191,6 @@
     }
 
     .ons-table__header {
-      position: relative;
-
       .ons-table__sort-button {
         background-color: transparent;
         border: 0;
@@ -205,7 +212,7 @@
         }
 
         .ons-svg-icon {
-          fill: $color-grey-35;
+          fill: $color-grey-75;
           height: 0.8rem;
           padding-bottom: 0.1rem;
           width: 0.8rem;

package/components/table/sortable-table.js

@@ -28,6 +28,7 @@ export default class TableSort {
   createHeadingButtons(heading, i) {
     const text = heading.textContent.trim();
     heading.childNodes[1].remove();
+    heading.childNodes[2].classList.remove('ons-u-d-no');
     const button = document.createElement('button');
     button.setAttribute('aria-label', this.table.getAttribute('data-aria-sort') + ' ' + text);
     button.setAttribute('type', 'button');

package/components/table-of-contents/_macro.njk

@@ -3,7 +3,7 @@
 {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
 
 <aside class="ons-toc-container" role="complementary">
-    {% if params.skipLink is defined and params.skipLink %}
+    {% if params.skipLink %}
 		{{
 		onsSkipToContent({
 			"url": params.skipLink.url,
@@ -14,9 +14,9 @@
 
     <nav class="ons-toc" aria-label="{{ params.ariaLabel | default('Table of contents') }}">
       	<h2 class="ons-toc__title ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h2>
-		{% if params.lists is defined and params.lists %}
+		{% if params.lists %}
 			{% for list in params.lists %}
-			{% if list.listHeading is defined and list.listHeading %}
+			{% if list.listHeading %}
 				<h3 class="ons-u-fs-r ons-u-mb-xs">{{ list.listHeading }}<span class="ons-u-vh"> {{ list.listHeadingHidden }}</span>:</h3>
 			{% endif %}
 			{{
@@ -28,7 +28,7 @@
 				})
 			}}
 			{% endfor %}
-		{% elif params.itemsList is defined and params.itemsList %}
+		{% elif params.itemsList %}
 			{{
 				onsList({
 					"element": 'ol',

package/components/tabs/_tabs.scss

@@ -71,7 +71,10 @@
       inset -17px 0 0 0 $color-button-secondary,
       inset 0 -13px 0 0 $color-text-link-focus;
     color: $color-text-link-focus;
-    outline: none;
+
+    // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+    outline: 3px solid transparent;
+    outline-offset: 1px;
     text-decoration: underline solid $color-text 2px;
   }
 
@@ -86,7 +89,6 @@
 
     &:focus {
       background-color: $color-focus;
-      border-bottom: 1px solid $color-page-light;
       box-shadow: inset 0 0 0 9px $color-page-light,
         inset 17px 0 0 0 $color-page-light,
         inset -17px 0 0 0 $color-page-light,
@@ -108,7 +110,7 @@
 
   &:focus {
     box-shadow: 0 0 0 3px $color-page-light, 0 0 0 5px $color-text-link-focus, 0 0 0 8px $color-focus;
-    outline: none;
+    outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
     z-index: 1;
   }
 }

package/components/textarea/_macro.njk

@@ -8,7 +8,7 @@
     {% set field %}
         {% set textareaExclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %}
 
-        {% if params.label is defined and params.label %}
+        {% if params.label %}
             {{ onsLabel({
                 "for": params.id,
                 "text": params.label.text,
@@ -19,20 +19,20 @@
 
         <textarea
             id="{{ params.id }}"
-            class="ons-input ons-input--textarea {% if params.error is defined and params.error %} ons-input--error {% endif %}{% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %} ons-js-char-limit-input{% endif %}{{ textareaExclusiveClass }} {{ params.classes if params.classes is defined and params.classes }} {% if params.width is defined and params.width %}ons-input--w-{{ params.width }}{% endif %}"
-            {% if params.name is defined and params.name %}
+            class="ons-input ons-input--textarea {% if params.error %} ons-input--error {% endif %}{% if params.charCheckLimit and params.charCheckLimit.limit %} ons-js-char-limit-input{% endif %}{{ textareaExclusiveClass }} {{ params.classes if params.classes }} {% if params.width %}ons-input--w-{{ params.width }}{% endif %}"
+            {% if params.name %}
              name="{{ params.name }}"
             {% endif %}
             rows="{{ params.rows | default(8) }}"
-            {% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %}
+            {% if params.charCheckLimit and params.charCheckLimit.limit %}
                 maxlength="{{ params.charCheckLimit.limit }}"
                 data-char-limit-ref="{{ params.id }}-lim-remaining"
                 aria-describedby="{{ params.id }}-lim-remaining"
             {% endif %}
-            {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
-        >{{ params.value if params.value is defined and params.value }}</textarea>
+            {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+        >{{ params.value if params.value }}</textarea>
 
-        {% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %}
+        {% if params.charCheckLimit and params.charCheckLimit.limit %}
             {% call onsCharLimit({
                 "id": params.id ~ "-lim",
                 "limit": params.charCheckLimit.limit,
@@ -43,7 +43,7 @@
         {% endif %}
     {% endset %}
 
-    {% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
+    {% if params.mutuallyExclusive %}
         {% call onsMutuallyExclusive({
             "id": params.fieldId,
             "classes": params.fieldClasses,

package/components/timeline/_macro.njk

@@ -9,7 +9,7 @@
 
             <h2 class="ons-timeline__heading">{{ item.heading }}</h2>
 
-            {% if item.itemsList is defined and item.itemsList %}
+            {% if item.itemsList %}
 
                 {{
                     onsList({

package/components/video/_macro.njk

@@ -1,6 +1,6 @@
 {%- macro onsVideo(params) -%}
     <div class="ons-video">
-        {% if params.youtubeUrl is defined and params.youtubeUrl %}
+        {% if params.youtubeUrl %}
             <iframe title="{{ params.title }}" class="ons-video__iframe" src="{{ params.youtubeUrl }}" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         {% endif %}
     </div>