Added ScrollableTabRow component.

docs/03-components/02-structure/tabs.mdx

@@ -7,11 +7,13 @@ title: Android
 `Tab` component is provided as a simple wrapping layout and tab item components:
 
 - [`TabRow`](https://kiwicom.github.io/orbit-compose/ui/kiwi.orbit.compose.ui.controls/-tab-row.html)
+- [`ScrollableTabRow`](https://kiwicom.github.io/orbit-compose/ui/kiwi.orbit.compose.ui.controls/-scrollable-tab-row.html)
 - [`Tab`](https://kiwicom.github.io/orbit-compose/ui/kiwi.orbit.compose.ui.controls/-tab.html)
 
 ## Usage
 
 `TabRow` layout takes a `content` slot with multiple `Tab`s. `TabRow` should utilize `TopAppBar`'s `extraContent` slot.
+`ScrollableTabRow` is a scrollable variant of the component, allowing for more tabs to be displayed off screen.
 
 ```kotlin
 @Composable
@@ -65,4 +67,4 @@ composeTestRule.onNodeWithTag("variantB").performClick().assertIsSelected()
 
 ## Customization
 
-`TabRow`/`Tab` appearance is not customizable.
+`TabRow`/`ScrollableTabRow`/`Tab` appearance is not customizable.

lint/src/main/kotlin/kiwi/orbit/compose/lint/detectors/MaterialDesignInsteadOrbitDesignDetector.kt

@@ -145,6 +145,10 @@ class MaterialDesignInsteadOrbitDesignDetector : Detector(), Detector.UastScanne
                 "androidx.compose.material.TabRow",
                 "androidx.compose.material3.TabRow",
             ),
+            "kiwi.orbit.compose.ui.controls.ScrollableTabRow" to setOf(
+                "androidx.compose.material.ScrollableTabRow",
+                "androidx.compose.material3.ScrollableTabRow",
+            ),
             "kiwi.orbit.compose.ui.controls.Text" to setOf(
                 "androidx.compose.material.Text",
                 "androidx.compose.material3.Text",

ui/src/androidMain/kotlin/kiwi/orbit/compose/ui/controls/Tabs.kt

@@ -18,6 +18,7 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import kiwi.orbit.compose.ui.OrbitTheme
 import kiwi.orbit.compose.ui.controls.internal.OrbitElevations
@@ -49,6 +50,32 @@ public fun TabRow(
     }
 }
 
+@Composable
+public fun ScrollableTabRow(
+    selectedTabIndex: Int,
+    modifier: Modifier = Modifier,
+    edgePadding: Dp = ScrollableTabRowPadding,
+    indicator: @Composable (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions ->
+        TabIndicator(
+            Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex]),
+        )
+    },
+    tabs: @Composable () -> Unit,
+) {
+    OrbitElevations {
+        androidx.compose.material3.ScrollableTabRow(
+            selectedTabIndex = selectedTabIndex,
+            modifier = modifier,
+            containerColor = OrbitTheme.colors.surface.main,
+            contentColor = contentColorFor(OrbitTheme.colors.surface.main),
+            edgePadding = edgePadding,
+            indicator = indicator,
+            divider = { Divider() },
+            tabs = tabs,
+        )
+    }
+}
+
 @Composable
 public fun Tab(
     selected: Boolean,
@@ -93,6 +120,11 @@ public fun TabIndicator(
     )
 }
 
+/**
+ * The default padding from the starting edge before a tab in a [ScrollableTabRow].
+ */
+private val ScrollableTabRowPadding = 52.dp
+
 @OrbitPreviews
 @Composable
 internal fun TabsPreview() {
@@ -103,5 +135,12 @@ internal fun TabsPreview() {
             Tab(selected = i == 1, onClick = { i = 1 }) { Text("Tab B") }
             Tab(selected = i == 2, onClick = { i = 2 }) { Text("Tab C") }
         }
+        ScrollableTabRow(selectedTabIndex = i) {
+            Tab(selected = i == 0, onClick = { i = 0 }) { Text("Tab A") }
+            Tab(selected = i == 1, onClick = { i = 1 }) { Text("Tab B") }
+            Tab(selected = i == 2, onClick = { i = 2 }) { Text("Tab C") }
+            Tab(selected = i == 3, onClick = { i = 3 }) { Text("Tab D") }
+            Tab(selected = i == 4, onClick = { i = 4 }) { Text("Tab E") }
+        }
     }
 }

ui/src/androidUnitTest/kotlin/kiwi/orbit/compose/ui/controls/TabsTest.kt

@@ -7,9 +7,11 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.test.assertIsSelected
+import androidx.compose.ui.test.hasTestTag
 import androidx.compose.ui.test.junit4.createComposeRule
 import androidx.compose.ui.test.onNodeWithTag
 import androidx.compose.ui.test.performClick
+import androidx.compose.ui.test.performScrollToNode
 import org.junit.Rule
 import org.junit.Test
 import org.junit.runner.RunWith
@@ -21,7 +23,7 @@ internal class TabsTest {
     val composeTestRule = createComposeRule()
 
     @Test
-    fun testBasics() {
+    fun testTabRow() {
         composeTestRule.setContent {
             var selectedPage by remember { mutableStateOf(0) }
             TabRow(selectedTabIndex = selectedPage) {
@@ -41,4 +43,48 @@ internal class TabsTest {
         }
         composeTestRule.onNodeWithTag("variantB").performClick().assertIsSelected()
     }
+
+    @Test
+    fun testScrollableTabRow() {
+        composeTestRule.setContent {
+            var selectedPage by remember { mutableStateOf(0) }
+            ScrollableTabRow(
+                selectedTabIndex = selectedPage,
+                modifier = Modifier.testTag("tabs"),
+            ) {
+                Tab(
+                    modifier = Modifier.testTag("variantA"),
+                    selected = selectedPage == 0,
+                    onClick = { selectedPage = 0 },
+                    text = { Text("Variant A") },
+                )
+                Tab(
+                    modifier = Modifier.testTag("variantB"),
+                    selected = selectedPage == 1,
+                    onClick = { selectedPage = 1 },
+                    text = { Text("Variant B") },
+                )
+                Tab(
+                    modifier = Modifier.testTag("variantC"),
+                    selected = selectedPage == 2,
+                    onClick = { selectedPage = 2 },
+                    text = { Text("Variant C") },
+                )
+                Tab(
+                    modifier = Modifier.testTag("variantD"),
+                    selected = selectedPage == 3,
+                    onClick = { selectedPage = 3 },
+                    text = { Text("Variant D") },
+                )
+                Tab(
+                    modifier = Modifier.testTag("variantE"),
+                    selected = selectedPage == 4,
+                    onClick = { selectedPage = 4 },
+                    text = { Text("Variant E") },
+                )
+            }
+        }
+        composeTestRule.onNodeWithTag("tabs").performScrollToNode(hasTestTag("variantE"))
+        composeTestRule.onNodeWithTag("variantE").performClick().assertIsSelected()
+    }
 }