IBX-7459: Tabs updated with new design (#1118)

Co-authored-by: tomaszszopinski <[email protected]>
ibexa · Jan 30, 2024 · 1cf3a4d · 1cf3a4d
1 parent cf56a69
commit 1cf3a4d
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 22 deletions.
diff --git a/src/bundle/Resources/public/scss/_tabs.scss b/src/bundle/Resources/public/scss/_tabs.scss
@@ -179,7 +179,7 @@
                 }
 
                 .ibexa-svg-tab-corner-inside {
-                    fill: $ibexa-color-light-300;
+                    fill: $ibexa-color-light-200;
                 }
             }
 
@@ -232,7 +232,7 @@
                     border-radius: $ibexa-border-radius 0 0 0;
                     border-bottom-width: 0;
                     border-right-width: 0;
-                    background-color: $ibexa-color-light-300;
+                    background-color: $ibexa-color-light-200;
                 }
 
                 &::after {
@@ -258,21 +258,18 @@
                     }
                 }
 
-                &:hover:not([disabled]),
-                &--active {
+                &:hover:not([disabled]) {
                     z-index: 4;
 
                     &::before {
                         background-color: $ibexa-color-white;
                         border: calculateRem(1px) solid $ibexa-color-light;
-                        border-bottom-width: 0;
                         border-right-width: 0;
                         z-index: 2;
                         margin-bottom: -0.1px;
                     }
 
                     &::after {
-                        border-color: $ibexa-color-white;
                         right: calculateRem(2px);
                     }
 
@@ -285,25 +282,41 @@
                             fill: $ibexa-color-white;
                         }
                     }
+
+                    .ibexa-tabs__link {
+                        color: $ibexa-color-primary;
+                    }
                 }
 
-                &:hover:not([disabled]):not(&--active) {
+                &.ibexa-tabs__tab--active:not([disabled]) {
+                    pointer-events: none;
+
                     &::before {
-                        border: calculateRem(1px) solid $ibexa-color-primary;
+                        background-color: $ibexa-color-white;
+                        border-bottom-width: 0;
                         border-right-width: 0;
                         z-index: 2;
+                        margin-bottom: -0.1px;
                     }
 
                     &::after {
-                        border-color: $ibexa-color-primary;
-                        right: 0;
+                        border-color: $ibexa-color-white;
+                        right: calculateRem(2px);
                     }
 
                     .ibexa-tabs__tab-corner {
                         .ibexa-svg-tab-corner-border {
-                            stroke: $ibexa-color-primary;
+                            stroke: $ibexa-color-light;
+                        }
+
+                        .ibexa-svg-tab-corner-inside {
+                            fill: $ibexa-color-white;
                         }
                     }
+
+                    .ibexa-tabs__link {
+                        color: inherit;
+                    }
                 }
 
                 &--hidden {

diff --git a/src/lib/Behat/Component/TableNavigationTab.php b/src/lib/Behat/Component/TableNavigationTab.php
@@ -9,7 +9,7 @@
 namespace Ibexa\AdminUi\Behat\Component;
 
 use Ibexa\Behat\Browser\Component\Component;
-use Ibexa\Behat\Browser\Element\ElementInterface;
+use Ibexa\Behat\Browser\Element\Criterion\ElementTextFragmentCriterion;
 use Ibexa\Behat\Browser\Locator\VisibleCSSLocator;
 use PHPUnit\Framework\Assert;
 
@@ -22,13 +22,14 @@ public function getActiveTabName(): string
 
     public function goToTab(string $tabName): void
     {
-        $this->getHTMLPage()
+        if ($this->getActiveTabName() == $tabName) {
+            return;
+        } else {
+            $tab = $this->getHTMLPage()->setTimeout(3)
             ->findAll($this->getLocator('navLink'))
-            ->filter(static function (ElementInterface $element) use ($tabName) {
-                return strpos($element->getText(), $tabName) !== false;
-            })
-            ->first()
-            ->click();
+            ->getByCriterion(new ElementTextFragmentCriterion($tabName));
+            $tab->click();
+        }
     }
 
     public function verifyIsLoaded(): void
@@ -39,8 +40,8 @@ public function verifyIsLoaded(): void
     protected function specifyLocators(): array
     {
         return [
-            new VisibleCSSLocator('activeNavLink', '.ibexa-tabs .active'),
-            new VisibleCSSLocator('navLink', '.ibexa-tabs .nav-link'),
+            new VisibleCSSLocator('activeNavLink', '.ibexa-tabs__tab--active'),
+            new VisibleCSSLocator('navLink', '.ibexa-tabs__tab'),
         ];
     }
 }
diff --git a/src/lib/Behat/Page/DashboardPage.php b/src/lib/Behat/Page/DashboardPage.php
@@ -29,11 +29,22 @@ public function __construct(Session $session, Router $router, TableBuilder $tabl
 
     public function switchTab(string $tableName, string $tabName)
     {
-        $this->getHTMLPage()
+        if ($this->getActiveTabName($tableName) == $tabName) {
+            return;
+        } else {
+            $this->getHTMLPage()
             ->findAll($this->getLocator('tableSelector'))->getByCriterion(new ChildElementTextCriterion($this->getLocator('tableTitle'), $tableName))
             ->findAll($this->getLocator('tableTab'))->getByCriterion(new ElementTextCriterion($tabName))
             ->click()
-        ;
+            ;
+        }
+    }
+
+    public function getActiveTabName(string $tableName): string
+    {
+        return $this->getHTMLPage()
+            ->findAll($this->getLocator('tableSelector'))->getByCriterion(new ChildElementTextCriterion($this->getLocator('tableTitle'), $tableName))
+            ->find($this->getLocator('activeTabLink'))->getText();
     }
 
     public function isListEmpty(): bool
@@ -83,6 +94,7 @@ protected function specifyLocators(): array
             new VisibleCSSLocator('pageTitle', '.ibexa-header-wrapper h1'),
             new VisibleCSSLocator('table', '#ibexa-tab-dashboard-my-my-drafts'),
             new VisibleCSSLocator('createButton', '.ibexa-btn--cotf-create'),
+            new VisibleCSSLocator('activeTabLink', '.ibexa-tabs__link.active'),
         ];
     }
 }