Only remove caption margin from the first visible tab. (#12078)

Fixes #10437

3 files changed, 97 insertions, 0 deletions

diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_tabsheet.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_tabsheet.scss
index e0fa665020..2b98bcbbaf 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_tabsheet.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_tabsheet.scss
@@ -246,6 +246,10 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     margin-left: 0;
   }
 
+  &:not([aria-hidden="true"]) ~ td .v-caption {
+    margin-left: round($v-unit-size/2);
+  }
+
   &:focus {
     outline: none;
 
@@ -443,6 +447,10 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
       margin-left: 0;
     }
 
+    :not([aria-hidden="true"]) ~ td .v-caption {
+      margin-left: $tab-spacing or first-number($v-border) * -1;
+    }
+
     @if $frame-inactive-tabs {
       .#{$primary-stylename}-tabitem .v-caption {
         border-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
diff --git a/uitest/src/main/java/com/vaadin/tests/components/tabsheet/TabNotVisibleInTheMiddleOfTabsheet.java b/uitest/src/main/java/com/vaadin/tests/components/tabsheet/TabNotVisibleInTheMiddleOfTabsheet.java
new file mode 100644
index 0000000000..cb65e4cd21
--- /dev/null
+++ b/uitest/src/main/java/com/vaadin/tests/components/tabsheet/TabNotVisibleInTheMiddleOfTabsheet.java
@@ -0,0 +1,43 @@
+package com.vaadin.tests.components.tabsheet;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.TabSheet;
+import com.vaadin.ui.VerticalLayout;
+
+public class TabNotVisibleInTheMiddleOfTabsheet extends AbstractTestUI {
+
+    private TabSheet.Tab secondTab;
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        TabSheet tabSheet = new TabSheet();
+        tabSheet.setWidth("600px");
+
+        tabSheet.addTab(new Label("first visible tab"), "first visible tab");
+
+        secondTab = tabSheet.addTab(new Label("second visible tab"),
+                "second visible tab");
+
+        for (int i = 3; i < 10; i++) {
+            tabSheet.addTab(new Label("visible tab " + i), "visible tab " + i);
+        }
+
+        addComponent(new VerticalLayout(tabSheet, new Button(
+                "Toggle second tab",
+                event -> secondTab.setVisible(!secondTab.isVisible()))));
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 10437;
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "First and third tab should have the usual gap "
+                + "between them when second tab gets hidden.";
+    }
+}
diff --git a/uitest/src/test/java/com/vaadin/tests/components/tabsheet/TabNotVisibleInTheMiddleOfTabsheetTest.java b/uitest/src/test/java/com/vaadin/tests/components/tabsheet/TabNotVisibleInTheMiddleOfTabsheetTest.java
new file mode 100644
index 0000000000..cfbb0adb84
--- /dev/null
+++ b/uitest/src/test/java/com/vaadin/tests/components/tabsheet/TabNotVisibleInTheMiddleOfTabsheetTest.java
@@ -0,0 +1,46 @@
+package com.vaadin.tests.components.tabsheet;
+
+import static org.junit.Assert.assertEquals;
+import static org.junit.Assert.assertFalse;
+
+import java.util.List;
+
+import org.junit.Test;
+import org.openqa.selenium.WebElement;
+
+import com.vaadin.testbench.By;
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.testbench.elements.TabSheetElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class TabNotVisibleInTheMiddleOfTabsheetTest extends MultiBrowserTest {
+    @Test
+    public void testFirstTabIsVisibleAfterBeingInvisible() {
+        openTestURL();
+
+        TabSheetElement tabSheet = $(TabSheetElement.class).first();
+        List<WebElement> captionElements = tabSheet
+                .findElements(By.className("v-caption"));
+        int secondPosition = captionElements.get(1).getLocation().getX();
+        int thirdPosition = captionElements.get(2).getLocation().getX();
+
+        assertGreater(
+                "Third tab should be further than the second tab: "
+                        + thirdPosition + " vs. " + secondPosition,
+                thirdPosition, secondPosition);
+
+        toggleSecondTabVisibility();
+
+        assertFalse("TabSheet should not have second tab visible",
+                captionElements.get(1).isDisplayed());
+
+        thirdPosition = captionElements.get(2).getLocation().getX();
+
+        assertEquals("Third tab should be where second tab was:",
+                secondPosition, thirdPosition);
+    }
+
+    private void toggleSecondTabVisibility() {
+        $(ButtonElement.class).caption("Toggle second tab").first().click();
+    }
+}