Tabs redo (#180)

Author: dgrammatiko

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+- Refactor of the tabs element
+  - Logic rewritten so the tabs won't be reappended (no more moving elements)
+  - Added `breakpoint` attribute for controling the transition from tabs/accordion
+  - Added tests
 
 ## 0.1.0
 - Rewrote the scss to use CSS custom properties than preprocessed SCSS variables

dist/css/joomla-panels.css

@@ -3,7 +3,7 @@ joomla-tab {
   flex-direction: column;
 }
 
-joomla-tab > ul {
+joomla-tab[view=tabs] > div[role=tablist] {
   display: flex;
   padding: 0;
   margin: 0;
@@ -21,16 +21,25 @@ joomla-tab > ul {
   box-shadow: 0 1px #fff inset, 0 2px 3px -3px rgba(0, 0, 0, 0.15), 0 -4px 0 rgba(0, 0, 0, 0.05) inset, 0 0 3px rgba(0, 0, 0, 0.04);
 }
 
-joomla-tab a[role=tab] {
+joomla-tab[view=accordion] > div[role=tablist] {
+  display: none;
+}
+
+joomla-tab button[role=tab] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   position: relative;
   display: block;
   padding: 0.75em 1em;
   color: #0d1321;
+  background-color: transparent;
   text-decoration: none;
   box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05);
+  border: unset;
 }
 
-joomla-tab a[role=tab][active] {
+joomla-tab button[role=tab][aria-expanded=true] {
   background-color: rgba(0, 0, 0, 0.03);
   background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05) 100%);
   border-right: 0 none;
@@ -40,7 +49,7 @@ joomla-tab a[role=tab][active] {
   box-shadow: 2px 0 1px -1px rgba(0, 0, 0, 0.08) inset, -2px 0 1px -1px rgba(0, 0, 0, 0.08) inset, 0 1px 0 rgba(0, 0, 0, 0.02) inset;
 }
 
-joomla-tab a[role=tab][active]::after {
+joomla-tab button[aria-expanded=true]::after {
   position: absolute;
   right: 0;
   bottom: -1px;
@@ -51,7 +60,7 @@ joomla-tab a[role=tab][active]::after {
   opacity: 0.8;
 }
 
-joomla-tab > section {
+joomla-tab > joomla-tab-element {
   position: relative;
   display: none;
   padding: 15px;
@@ -61,7 +70,7 @@ joomla-tab > section {
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.04);
 }
 
-joomla-tab > section[active] {
+joomla-tab > joomla-tab-element[active] {
   display: block;
 }
 
@@ -70,7 +79,7 @@ joomla-tab[orientation=vertical] {
   align-items: flex-start;
 }
 
-joomla-tab[orientation=vertical] > ul {
+joomla-tab[orientation=vertical] > div[role=tablist] {
   flex-direction: column;
   min-width: 30%;
   height: auto;
@@ -80,55 +89,76 @@ joomla-tab[orientation=vertical] > ul {
   box-shadow: none;
 }
 
-joomla-tab[orientation=vertical] li:last-of-type a {
+joomla-tab[orientation=vertical] > div[role=tablist] button:last-of-type {
   border-bottom: 0;
 }
 
-joomla-tab[orientation=vertical] a {
+joomla-tab[orientation=vertical] > div[role=tablist] button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   position: relative;
   display: block;
   padding: 0.75em 1em;
   color: #0d1321;
+  background-color: transparent;
   text-decoration: none;
   border-bottom: 1px solid #ddd;
   box-shadow: none;
 }
 
-joomla-tab[orientation=vertical] a[active] {
+joomla-tab[orientation=vertical] > div[role=tablist] button[aria-expanded=true] {
   background-color: #fff;
   background-image: none;
   border-right: 0 none;
   border-left: 0 none;
   box-shadow: none;
 }
 
-joomla-tab[orientation=vertical] a[active]::after {
+joomla-tab[orientation=vertical] > div[role=tablist] button[aria-expanded=true]::after {
   top: 0;
   bottom: 0;
   left: -1px;
   width: 5px;
   height: auto;
 }
 
-joomla-tab[orientation=vertical] > section {
+joomla-tab[orientation=vertical] > joomla-tab-element {
   padding: 15px;
   border: 0 none;
   box-shadow: none;
 }
 
-joomla-tab[view=accordion] > ul {
+joomla-tab[view=accordion] {
   flex-direction: column;
   white-space: normal;
   border-radius: 0.25rem;
   box-shadow: 0 1px #fff inset, 0 0 3px rgba(0, 0, 0, 0.04);
 }
+joomla-tab[view=accordion] > button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  position: relative;
+  display: block;
+  padding: 0.75em 1em;
+  color: #0d1321;
+  background-color: #f5f5f5;
+  text-decoration: none;
+  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05);
+  border: unset;
+}
+joomla-tab[view=accordion] > button[aria-expanded=true], joomla-tab[view=accordion] > button:focus {
+  background-color: rgba(0, 0, 0, 0.03);
+  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05) 100%);
+}
 
-joomla-tab[view=accordion] section {
+joomla-tab[view=accordion] joomla-tab-element {
   display: none;
   padding: 15px;
 }
 
-joomla-tab[view=accordion] section[active] {
+joomla-tab[view=accordion] joomla-tab-element[active] {
   display: block;
   border-bottom: 1px solid #ddd;
 }
@@ -137,11 +167,14 @@ joomla-tab[view=accordion] [active] {
   background-color: #fff;
 }
 
-joomla-tab[view=accordion] a[role=tab] {
+joomla-tab[view=accordion] button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   border-bottom: 1px solid #ddd;
 }
 
-joomla-tab[view=accordion] a[role=tab][active]::after {
+joomla-tab[view=accordion] button[aria-expanded=true]::after {
   top: 0;
   left: 0;
   width: 5px;

dist/css/joomla-panels.min.css

@@ -200,20 +200,18 @@ var AlertElement = /*#__PURE__*/function (_HTMLElement) {
             } else if (!this.button && this.hasAttribute('dismiss')) {
               this.createCloseButton();
             }
-          } else {
-            if (this.button && newValue === 'false') {
-              this.destroyCloseButton();
-            } else if (!this.button && newValue !== 'false') {
-              this.createCloseButton();
-            }
+          } else if (this.button && newValue === 'false') {
+            this.destroyCloseButton();
+          } else if (!this.button && newValue !== 'false') {
+            this.createCloseButton();
           }
 
           break;
 
         case 'close-text':
           if (!newValue || newValue !== oldValue) {
             if (this.button) {
-              this.button.innerText = newValue;
+              this.button.setAttribute('aria-label', newValue);
             }
           }
 
@@ -229,6 +227,7 @@ var AlertElement = /*#__PURE__*/function (_HTMLElement) {
   }, {
     key: "onMutation",
     value: function onMutation(mutationsList) {
+      // eslint-disable-next-line no-restricted-syntax
       var _iterator = _createForOfIteratorHelper(mutationsList),
           _step;
 

dist/css/joomla-tab.css

@@ -270,7 +270,7 @@ var f = function (t) {
           break;
 
         case "close-text":
-          n && n === e || this.button && (this.button.innerText = n);
+          n && n === e || this.button && this.button.setAttribute("aria-label", n);
           break;
 
         case "auto-dismiss":