@ons/design-system 54.0.0 → 55.1.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;
       }
@@ -107,8 +115,9 @@
       overflow-x: scroll;
       width: 100%;
       &:focus {
-        outline: 3px solid $color-focus;
-        outline-offset: 3px;
+        box-shadow: 0 0 0 3px $color-page-light, 0 0 0 5px $color-text-link-focus, 0 0 0 8px $color-focus;
+        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 {
@@ -119,6 +128,7 @@
       .ons-table__right-shadow,
       .ons-table__left-shadow {
         height: 100%;
+        padding: 2px;
         position: absolute;
         top: 0;
         width: 5px;
@@ -181,8 +191,6 @@
     }
 
     .ons-table__header {
-      position: relative;
-
       .ons-table__sort-button {
         background-color: transparent;
         border: 0;
@@ -204,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/tabs/_tabs.scss

@@ -1,17 +1,33 @@
 .ons-tabs {
   margin-bottom: 1rem;
-}
 
-// Tabs - list
-.ons-tabs__list {
-  border-bottom: 0;
-  margin: 0 0 1rem;
-  overflow: visible;
-  padding: 0;
+  &__title {
+    @extend .ons-u-fs-r--b;
+  }
 
-  &--row {
-    border-bottom: 1px solid $color-borders;
-    margin: 0;
+  // Anchor links list
+  &__list {
+    border-bottom: 0;
+    margin: 0 0 1rem;
+    overflow: visible;
+    padding: 0;
+
+    // Tabs
+    &--row {
+      margin: 0;
+      position: relative;
+
+      &::after {
+        background: $color-borders;
+        bottom: 0;
+        box-shadow: 0 1px 0 0 $color-page-light;
+        content: '';
+        height: 1px;
+        left: 0;
+        position: absolute;
+        width: 100%;
+      }
+    }
   }
 }
 
@@ -32,7 +48,7 @@
   border-radius: 3px 3px 0 0;
   color: $color-text;
   display: inline-block;
-  height: 2.5rem;
+  height: 2.55rem;
   line-height: 2.3rem;
   margin: 0 0.1rem 0 0;
   overflow: visible;
@@ -47,47 +63,54 @@
     text-decoration: underline solid $color-text 2px;
   }
 
+  &:focus {
+    background-color: $color-focus;
+    border-bottom: 1px solid $color-borders;
+    box-shadow: inset 0 0 0 9px $color-button-secondary,
+      inset 17px 0 0 0 $color-button-secondary,
+      inset -17px 0 0 0 $color-button-secondary,
+      inset 0 -13px 0 0 $color-text-link-focus;
+    color: $color-text-link-focus;
+
+    // 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;
+  }
+
+  // Tab when selected
   &[aria-selected='true'] {
-    background-color: $color-white;
+    background-color: $color-page-light;
+    border-bottom: none;
     border-color: $color-borders;
-    // Tab when selected
     border-radius: 3px 3px 0 0;
-    font-weight: 700;
     text-decoration: none;
+    z-index: 1;
 
-    &::after {
-      background: $color-white;
-      bottom: -2px;
-      box-shadow: none;
-      content: '';
-      height: 0.09rem;
-      left: 0;
-      // hides the lower border of the active tab.
-      position: absolute;
-      right: 0;
-      z-index: 3;
+    &:focus {
+      background-color: $color-focus;
+      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,
+        inset 0 -13px 0 0 $color-text-link-focus;
+      text-decoration: none;
     }
   }
-
-  &:focus {
-    background-color: $color-focus;
-    color: $color-text-link-focus;
-    outline: none;
-  }
 }
 
 // Tabs - Panels
 .ons-tabs__panel {
-  margin-bottom: 1rem;
+  padding-bottom: 1rem;
   padding-top: 1rem;
   position: relative;
-  z-index: 10;
 
   &--hidden {
     display: none;
   }
 
   &:focus {
-    outline: 4px solid $color-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: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+    z-index: 1;
   }
 }

package/components/tabs/tabs.js

@@ -30,8 +30,6 @@ export default class Tabs {
     this.jsTabItemAsRowClass = 'ons-tab__list-item--row';
     this.jsTabAsListClass = 'ons-tab--row';
 
-    this.tabsTitle.classList.add('ons-u-vh');
-
     if (matchMediaUtil.hasMatchMedia()) {
       this.setupViewportChecks();
     } else {
@@ -61,6 +59,8 @@ export default class Tabs {
     this.tabList[0].setAttribute('role', 'tablist');
     this.tabList[0].classList.add(this.jsTabListAsRowClass);
 
+    this.tabsTitle.classList.add('ons-u-vh');
+
     this.tabPanels.forEach(panel => {
       panel.setAttribute('tabindex', '0');
     });
@@ -90,6 +90,8 @@ export default class Tabs {
     this.tabList[0].removeAttribute('role');
     this.tabList[0].classList.remove(this.jsTabListAsRowClass);
 
+    this.tabsTitle.classList.remove('ons-u-vh');
+
     this.tabPanels.forEach(panel => {
       panel.removeAttribute('tabindex', '0');
     });

package/components/upload/_upload.scss

@@ -1,6 +1,6 @@
 .ons-input--upload {
   background: $color-white;
-  border: 1px solid $color-input;
+  border: 1px solid $color-input-border;
   border-radius: $input-radius;
   font-size: 1rem;
   padding: 0;
@@ -9,7 +9,7 @@
     background: $color-button-secondary;
     border: 0;
     border-bottom-right-radius: 0;
-    border-right: 1px solid $color-input;
+    border-right: 1px solid $color-input-border;
     border-top-right-radius: 0;
     color: $color-text;
     font-size: 1rem;