Koa-4921 Created Bpk Fab in Compose (#1233)

* Create component for FAB in Compose

* Create a FAB story for demo app and update component registry

* Create snapshot test for FAB

* Change dimensions for snapshot test

* Create readme file for the component

* Delete unnecessary imports and code

* Update DocsRegistry

* Correct error in DocsRegistry

* Update screenshots

* Update Lint rules

* Fix properties in BpkFab.kt

* Review PR comments

* Fix typo

* Review PR comments

* Review further PR comments

* Fix trailing lambda issue in Readme

* Updated the snapshots.

* Remove fab examples from Themestory.kt

Co-authored-by: bvitaliyg <[email protected]>

app/src/androidTest/java/net/skyscanner/backpack/compose/fab/BpkFabTest.kt

@@ -0,0 +1,46 @@
+/*
+ * Backpack for Android - Skyscanner's Design System
+ *
+ * Copyright 2018 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+package net.skyscanner.backpack.compose.fab
+
+import androidx.test.ext.junit.runners.AndroidJUnit4
+import net.skyscanner.backpack.BpkSnapshotTest
+import net.skyscanner.backpack.compose.icon.BpkIcon
+import net.skyscanner.backpack.compose.tokens.Search
+import org.junit.Before
+import org.junit.Test
+import org.junit.runner.RunWith
+
+@RunWith(AndroidJUnit4::class)
+class BpkFabTest : BpkSnapshotTest() {
+
+  @Before
+  fun setup() {
+    setDimensions(height = 80, width = 80)
+  }
+
+  @Test
+  fun default() = composed {
+    BpkFab(
+      onClick = {},
+      icon = BpkIcon.Search,
+      contentDescription = "Content description",
+    )
+  }
+}

app/src/androidTest/java/net/skyscanner/backpack/docs/DocsRegistry.kt

@@ -91,7 +91,8 @@ object DocsRegistry {
     ComposeScreenshot("Flare - Compose", "default"),
     ViewScreenshot("Horizontal Nav - View", "default"),
     ComposeScreenshot("Horizontal Nav - Compose", "default"),
-    ViewScreenshot("Floating Action Button", "default"),
+    ViewScreenshot("Floating Action Button - View", "default"),
+    ComposeScreenshot("Floating Action Button - Compose", "default"),
     ViewScreenshot("Nav Bar - View - Default", "expanded"),
     ViewScreenshot("Nav Bar - View - Default", "collapsed") { setupNavBarCollapsed() },
     ViewScreenshot("Nav Bar - View - With Menu", "navigation") { setupNavBarCollapsed() },

app/src/main/java/net/skyscanner/backpack/demo/compose/BpkFabStory.kt

@@ -0,0 +1,69 @@
+/*
+ * Backpack for Android - Skyscanner's Design System
+ *
+ * Copyright 2018 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+package net.skyscanner.backpack.demo.compose
+
+import android.content.Context
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import net.skyscanner.backpack.compose.fab.BpkFab
+import net.skyscanner.backpack.compose.icon.BpkIcon
+import net.skyscanner.backpack.compose.tokens.BpkSpacing
+import net.skyscanner.backpack.compose.tokens.Flight
+import net.skyscanner.backpack.compose.tokens.Search
+import net.skyscanner.backpack.compose.tokens.Star
+import net.skyscanner.backpack.demo.R
+import net.skyscanner.backpack.toast.BpkToast
+
+@Composable
+fun BpkFabStory() {
+  Column(
+    modifier = Modifier.padding(BpkSpacing.Xl),
+    verticalArrangement = Arrangement.spacedBy(BpkSpacing.Xxl, Alignment.CenterVertically),
+  ) {
+    val context = LocalContext.current
+    BpkFab(
+      onClick = { showGenericMessageToast(context) },
+      icon = BpkIcon.Search,
+      contentDescription = stringResource(R.string.content_description),
+    )
+
+    BpkFab(
+      onClick = { showGenericMessageToast(context) },
+      icon = BpkIcon.Star,
+      contentDescription = stringResource(R.string.content_description),
+    )
+
+    BpkFab(
+      onClick = { showGenericMessageToast(context) },
+      icon = BpkIcon.Flight,
+      contentDescription = stringResource(R.string.content_description),
+    )
+  }
+}
+
+private fun showGenericMessageToast(context: Context) {
+  BpkToast.makeText(context, context.getString(R.string.generic_message), BpkToast.LENGTH_SHORT).show()
+}

app/src/main/java/net/skyscanner/backpack/demo/compose/ThemeStory.kt

@@ -24,8 +24,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.material.BottomAppBar
-import androidx.compose.material.ExtendedFloatingActionButton
-import androidx.compose.material.FloatingActionButton
 import androidx.compose.material.LinearProgressIndicator
 import androidx.compose.material.Slider
 import androidx.compose.material.Snackbar
@@ -39,10 +37,8 @@ import androidx.compose.ui.unit.dp
 import com.google.accompanist.flowlayout.FlowCrossAxisAlignment
 import com.google.accompanist.flowlayout.FlowMainAxisAlignment
 import com.google.accompanist.flowlayout.FlowRow
-import net.skyscanner.backpack.compose.icon.BpkIcon
 import net.skyscanner.backpack.compose.text.BpkText
 import net.skyscanner.backpack.compose.tokens.BpkSpacing
-import net.skyscanner.backpack.compose.tokens.Flight
 
 @Composable
 fun ThemeStory() {
@@ -61,15 +57,6 @@ fun ThemeStory() {
     var sliderValue by remember { mutableStateOf(0.5f) }
     Slider(modifier = Modifier.width(144.dp), value = sliderValue, onValueChange = { sliderValue = it })
 
-    FloatingActionButton(onClick = { }) {
-      BpkIcon(BpkIcon.Flight, contentDescription = "Flight")
-    }
-
-    ExtendedFloatingActionButton(
-      text = { BpkText(text = "FloatingActionButton") },
-      onClick = { },
-    )
-
     Snackbar {
       BpkText(text = "Snackbar")
     }

app/src/main/java/net/skyscanner/backpack/demo/data/ComponentRegistry.kt

@@ -23,6 +23,7 @@ import net.skyscanner.backpack.compose.button.BpkButtonSize
 import net.skyscanner.backpack.demo.R
 import net.skyscanner.backpack.demo.compose.BadgeStory
 import net.skyscanner.backpack.demo.compose.BodyStyleStory
+import net.skyscanner.backpack.demo.compose.BpkFabStory
 import net.skyscanner.backpack.demo.compose.ButtonLinkStory
 import net.skyscanner.backpack.demo.compose.ButtonsStory
 import net.skyscanner.backpack.demo.compose.CardStory
@@ -283,7 +284,13 @@ object ComponentRegistry {
         TAB_TITLE_COMPOSE composeStory { FlareStory() },
       ),
     ),
-    "Floating Action Button" story NodeData { Story of R.layout.fragment_fab },
+    "Floating Action Button" story NodeData(
+      { children -> TabStory of children },
+      mapOf(
+        TAB_TITLE_VIEW story NodeData { Story of R.layout.fragment_fab },
+        TAB_TITLE_COMPOSE composeStory { BpkFabStory() },
+      )
+    ),
     "Horizontal Nav" story NodeData(
       { children -> TabStory of children },
       mapOf(

app/src/main/res/values/strings.xml

@@ -192,4 +192,6 @@
   <string name="dialog_long_text">Long text</string>
   <string name="dialog_continue">Continue</string>
 
+  <string name="content_description">Content description</string>
+  <string name="generic_message">Message</string>
 </resources>

backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/fab/BpkFab.kt

@@ -0,0 +1,57 @@
+/*
+ * Backpack for Android - Skyscanner's Design System
+ *
+ * Copyright 2018 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+package net.skyscanner.backpack.compose.fab
+
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material.FloatingActionButton
+import androidx.compose.material.FloatingActionButtonDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import net.skyscanner.backpack.compose.icon.BpkIcon
+import net.skyscanner.backpack.compose.icon.BpkIconSize
+import net.skyscanner.backpack.compose.theme.BpkTheme
+import net.skyscanner.backpack.compose.tokens.BpkElevation
+
+@Composable
+fun BpkFab(
+  onClick: () -> Unit,
+  icon: BpkIcon,
+  contentDescription: String,
+  modifier: Modifier = Modifier,
+  interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+  FloatingActionButton(
+    onClick = onClick,
+    interactionSource = interactionSource,
+    modifier = modifier,
+    shape = CircleShape,
+    backgroundColor = BpkTheme.colors.coreAccent,
+    contentColor = BpkTheme.colors.textPrimaryInverse,
+    elevation = FloatingActionButtonDefaults.elevation(BpkElevation.Xl, BpkElevation.Xl, BpkElevation.Xl, BpkElevation.Xl),
+  ) {
+    BpkIcon(
+      icon = icon,
+      contentDescription = contentDescription,
+      size = BpkIconSize.Large,
+    )
+  }
+}

backpack-lint/src/main/java/net/skyscanner/backpack/lint/check/BpkComposeComponentUsageDetector.kt

@@ -98,6 +98,14 @@ class BpkComposeComponentUsageDetector : Detector(), SourceCodeScanner {
       webName = "dialog",
       componentsToReplace = setOf("androidx.compose.ui.window.Dialog", "androidx.compose.material.AlertDialog")
     ),
+    FAB(
+      fullName = "net.skyscanner.backpack.compose.fab.BpkFab",
+      webName = "floating-action-button",
+      componentsToReplace = setOf(
+        "androidx.compose.material.FloatingActionButton",
+        "androidx.compose.material.ExtendedFloatingActionButton",
+      )
+    ),
     ICON(
       fullName = "net.skyscanner.backpack.compose.icon.BpkIcon",
       webName = "icon",

docs/compose/FloatingActionButton/README.md

@@ -0,0 +1,21 @@
+# Floating Action Button
+
+## Installation
+
+Backpack Compose is available through [Maven Central](https://search.maven.org/artifact/net.skyscanner.backpack/backpack-compose). Check the main [Readme](https://github.com/skyscanner/backpack-android#installation) for a complete installation guide.
+
+## Usage
+
+Example of a `BpkFab`:
+
+```Kotlin
+import net.skyscanner.backpack.compose.fab.BpkFab
+import net.skyscanner.backpack.compose.icon.BpkIcon
+import net.skyscanner.backpack.compose.tokens.Search
+
+BpkFab(
+  onClick = {},
+  icon = BpkIcon.Search,
+  contentDescription = "Content description",
+)
+```