Merge pull request #112 from kiwicom/buttons

Buttons: bundle buttons, `ButtonLink` new styles & sizing, added `ButtonPrimitive`
kiwicom · Mar 16, 2022 · c081340 · c081340
2 parents b59ca20 + f13c4d8
commit c081340
Show file tree

Hide file tree

Showing 12 changed files with 557 additions and 387 deletions.
diff --git a/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/ButtonScreen.kt b/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/ButtonScreen.kt
@@ -4,45 +4,114 @@ import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.calculateEndPadding
+import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Tab
+import androidx.compose.material.TabRow
+import androidx.compose.material.TabRowDefaults
+import androidx.compose.material.TabRowDefaults.tabIndicatorOffset
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
-import kiwi.orbit.compose.catalog.Screen
+import com.google.accompanist.insets.navigationBarsPadding
+import com.google.accompanist.pager.ExperimentalPagerApi
+import com.google.accompanist.pager.HorizontalPager
+import com.google.accompanist.pager.rememberPagerState
 import kiwi.orbit.compose.ui.OrbitTheme
+import kiwi.orbit.compose.ui.controls.ButtonBundleBasic
+import kiwi.orbit.compose.ui.controls.ButtonBundleMedium
+import kiwi.orbit.compose.ui.controls.ButtonBundleTop
 import kiwi.orbit.compose.ui.controls.ButtonCritical
 import kiwi.orbit.compose.ui.controls.ButtonCriticalSubtle
-import kiwi.orbit.compose.ui.controls.ButtonLink
+import kiwi.orbit.compose.ui.controls.ButtonLinkCritical
+import kiwi.orbit.compose.ui.controls.ButtonLinkPrimary
+import kiwi.orbit.compose.ui.controls.ButtonLinkSecondary
 import kiwi.orbit.compose.ui.controls.ButtonPrimary
 import kiwi.orbit.compose.ui.controls.ButtonPrimarySubtle
+import kiwi.orbit.compose.ui.controls.ButtonPrimitive
 import kiwi.orbit.compose.ui.controls.ButtonSecondary
+import kiwi.orbit.compose.ui.controls.ButtonTextLinkCritical
+import kiwi.orbit.compose.ui.controls.ButtonTextLinkPrimary
 import kiwi.orbit.compose.ui.controls.ButtonToggleContainer
+import kiwi.orbit.compose.ui.controls.Card
+import kiwi.orbit.compose.ui.controls.Scaffold
 import kiwi.orbit.compose.ui.controls.Text
-import kiwi.orbit.compose.ui.foundation.ProvideColors
-import kiwi.orbit.compose.ui.foundation.asInteractiveTheme
+import kiwi.orbit.compose.ui.controls.TopAppBar
+import kotlinx.coroutines.launch
 
+@OptIn(ExperimentalPagerApi::class)
 @Composable
 fun ButtonScreen(onNavigateUp: () -> Unit) {
-    Screen(
-        title = "Button",
-        onNavigateUp = onNavigateUp,
+    val state = rememberPagerState(0)
+    val scope = rememberCoroutineScope()
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = { Text("Buttons") },
+                onNavigateUp = onNavigateUp,
+                extraContent = {
+                    TabRow(
+                        modifier = Modifier.navigationBarsPadding(bottom = false),
+                        selectedTabIndex = state.currentPage,
+                        backgroundColor = OrbitTheme.colors.surface.main,
+                        indicator = { tabPositions ->
+                            TabRowDefaults.Indicator(
+                                modifier = Modifier.tabIndicatorOffset(tabPositions[state.currentPage]),
+                                color = OrbitTheme.colors.primary.main,
+                            )
+                        },
+                        divider = {},
+                    ) {
+                        Tab(
+                            selected = state.currentPage == 0,
+                            onClick = { scope.launch { state.animateScrollToPage(0) } },
+                            text = { Text("Button") },
+                        )
+                        Tab(
+                            selected = state.currentPage == 1,
+                            onClick = { scope.launch { state.animateScrollToPage(1) } },
+                            text = { Text("ButtonLink") },
+                        )
+                    }
+                }
+            )
+        },
     ) { contentPadding ->
-        Box(
-            Modifier
-                .fillMaxSize()
-                .verticalScroll(rememberScrollState())
-                .padding(contentPadding)
-        ) {
-            ButtonScreenInner()
+        HorizontalPager(
+            count = 2,
+            state = state,
+            modifier = Modifier.padding(top = contentPadding.calculateTopPadding()),
+        ) { tabIndex ->
+            Box(
+                Modifier
+                    .fillMaxSize()
+                    .verticalScroll(rememberScrollState())
+                    .padding(
+                        start = contentPadding.calculateStartPadding(LayoutDirection.Ltr),
+                        end = contentPadding.calculateEndPadding(LayoutDirection.Ltr),
+                        bottom = contentPadding.calculateBottomPadding(),
+                    )
+            ) {
+                when (tabIndex) {
+                    0 -> ButtonScreenInner()
+                    1 -> ButtonLinkScreenInner()
+                }
+            }
         }
     }
 }
@@ -62,12 +131,18 @@ private fun ButtonScreenInner() {
         ButtonSecondary(onClick = {}, maxWidth) { Text("Secondary Button") }
         ButtonCritical(onClick = {}, maxWidth) { Text("Critical Button") }
         ButtonCriticalSubtle(onClick = {}, maxWidth) { Text("Critical Subtle Button") }
-        ButtonLink(onClick = {}, maxWidth) { Text("Link Button") }
+        ButtonBundleBasic(onClick = {}, maxWidth) { Text("Bundle Basic Button") }
+        ButtonBundleMedium(onClick = {}, maxWidth) { Text("Bundle Medium Button") }
+        ButtonBundleTop(onClick = {}, maxWidth) { Text("Bundle Top Button") }
 
         Text("Manually themed", Modifier.padding(top = 16.dp))
 
-        ProvideColors(OrbitTheme.colors.asInteractiveTheme()) {
-            ButtonPrimary(onClick = {}, maxWidth) { Text("Interactive Button") }
+        ButtonPrimitive(
+            onClick = {},
+            modifier = maxWidth,
+            backgroundColor = OrbitTheme.colors.interactive.main,
+        ) {
+            Text("Interactive Button")
         }
 
         Text("Button Toggling", Modifier.padding(top = 16.dp))
@@ -85,3 +160,40 @@ private fun ButtonScreenInner() {
         }
     }
 }
+
+@Composable
+private fun ButtonLinkScreenInner() {
+    Column(
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+        modifier = Modifier.padding(16.dp),
+    ) {
+        ButtonLinkPrimary(onClick = {}, Modifier.fillMaxWidth()) { Text("Primary ButtonLink") }
+        ButtonLinkSecondary(onClick = {}, Modifier.fillMaxWidth()) { Text("Secondary ButtonLink") }
+        ButtonLinkCritical(onClick = {}, Modifier.fillMaxWidth()) { Text("Critical ButtonLink") }
+
+        Card {
+            Column(Modifier.padding(16.dp)) {
+                Text(
+                    "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet magna in magna gravida vehicula. Nam quis nulla. Nam sed tellus id magna elementum tincidunt.",
+                    style = OrbitTheme.typography.bodyNormal
+                )
+                Spacer(Modifier.size(8.dp))
+                ButtonTextLinkPrimary("Translate", onClick = {})
+            }
+        }
+
+        Card {
+            Row(Modifier.padding(16.dp)) {
+                Text(
+                    text = "Title",
+                    style = OrbitTheme.typography.title3,
+                    modifier = Modifier
+                        .alignByBaseline()
+                        .weight(1f)
+                )
+                Spacer(Modifier.size(8.dp))
+                ButtonTextLinkCritical("Delete", onClick = {}, modifier = Modifier.alignByBaseline())
+            }
+        }
+    }
+}
diff --git a/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/CardsScreen.kt b/catalog/src/main/java/kiwi/orbit/compose/catalog/screens/CardsScreen.kt
@@ -5,9 +5,11 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
@@ -20,6 +22,7 @@ import androidx.compose.ui.unit.dp
 import kiwi.orbit.compose.catalog.Screen
 import kiwi.orbit.compose.illustrations.Illustrations
 import kiwi.orbit.compose.ui.OrbitTheme
+import kiwi.orbit.compose.ui.controls.ButtonPrimary
 import kiwi.orbit.compose.ui.controls.Card
 import kiwi.orbit.compose.ui.controls.Separator
 import kiwi.orbit.compose.ui.controls.Text
@@ -75,7 +78,13 @@ private fun CardScreenInner() {
             } else null,
             modifier = Modifier.fillMaxWidth(),
         ) {
-            Image(Illustrations.AirHelp, contentDescription = null)
+            Column(Modifier.padding(16.dp)) {
+                Image(Illustrations.AirHelp, contentDescription = null)
+                Spacer(Modifier.size(8.dp))
+                ButtonPrimary(onClick = {}) {
+                    Text("Primary Button")
+                }
+            }
         }
     }
 }
diff --git a/component-status.yaml b/component-status.yaml
@@ -11,7 +11,7 @@
 - component: ButtonLink
   android: Released
 - component: ButtonPrimitive
-  android: Planned
+  android: Released
 - component: Card
   android: Partially
 - component: Checkbox

diff --git a/ui/src/main/java/kiwi/orbit/compose/ui/controls/Alert.kt b/ui/src/main/java/kiwi/orbit/compose/ui/controls/Alert.kt
@@ -18,8 +18,8 @@ import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.unit.dp
 import kiwi.orbit.compose.icons.Icons
 import kiwi.orbit.compose.ui.OrbitTheme
-import kiwi.orbit.compose.ui.foundation.LocalAlertScope
 import kiwi.orbit.compose.ui.foundation.LocalColors
+import kiwi.orbit.compose.ui.foundation.LocalSmallButtonScope
 import kiwi.orbit.compose.ui.foundation.ProvideMergedTextStyle
 import kiwi.orbit.compose.ui.foundation.asCriticalTheme
 import kiwi.orbit.compose.ui.foundation.asInteractiveTheme
@@ -174,7 +174,7 @@ private fun AlertContent(
 ) {
     Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
         CompositionLocalProvider(
-            LocalAlertScope provides true
+            LocalSmallButtonScope provides true,
         ) {
             ProvideMergedTextStyle(OrbitTheme.typography.bodyNormalBold) {
                 title()

diff --git a/ui/src/main/java/kiwi/orbit/compose/ui/controls/AlertInline.kt b/ui/src/main/java/kiwi/orbit/compose/ui/controls/AlertInline.kt
@@ -19,8 +19,8 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.offset
 import kiwi.orbit.compose.icons.Icons
 import kiwi.orbit.compose.ui.OrbitTheme
-import kiwi.orbit.compose.ui.foundation.LocalAlertScope
 import kiwi.orbit.compose.ui.foundation.LocalColors
+import kiwi.orbit.compose.ui.foundation.LocalSmallButtonScope
 import kiwi.orbit.compose.ui.foundation.ProvideMergedTextStyle
 import kiwi.orbit.compose.ui.foundation.asCriticalTheme
 import kiwi.orbit.compose.ui.foundation.asInteractiveTheme
@@ -164,7 +164,7 @@ private fun AlertInline(
                 title()
             }
             CompositionLocalProvider(
-                LocalAlertScope provides true
+                LocalSmallButtonScope provides true
             ) {
                 ButtonPrimary(
                     onClick = onActionClick,