Merge pull request #213 from tarkalabs/raja/componentfixes

fix: UI fixes in Component and Icon style added in Badge

tarka-ui/build.gradle.kts

@@ -66,7 +66,7 @@ publishing {
       run {
         groupId = "com.tarkalabs"
         artifactId = getLibraryArtifactId()
-        version = "1.1.6"
+        version = "1.1.7"
         artifact("$buildDir/outputs/aar/tarka-ui-release.aar")
       }
     }

tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/TUIBadgeTest.kt

@@ -3,9 +3,14 @@ package com.tarkalabs.uicomponents
 import androidx.compose.ui.test.assertIsDisplayed
 import androidx.compose.ui.test.junit4.createComposeRule
 import androidx.compose.ui.test.onNodeWithTag
+import androidx.compose.ui.test.onNodeWithText
 import com.tarkalabs.tarkaui.components.base.BadgeSize.L
+import com.tarkalabs.tarkaui.components.base.BadgeStyle
 import com.tarkalabs.tarkaui.components.base.TUIBadge
 import com.tarkalabs.tarkaui.components.base.TUIBadgeTags
+import com.tarkalabs.tarkaui.icons.Symbols16
+import com.tarkalabs.tarkaui.icons.TarkaIcon
+import com.tarkalabs.tarkaui.icons.TarkaIcons
 import org.junit.Rule
 import org.junit.Test
 
@@ -14,12 +19,34 @@ class TUIBadgeTest {
 
   private val tags = TUIBadgeTags(parentTag = "testTag")
 
-  @Test fun badge_Displayed() {
+  @Test fun text_badge_Displayed() {
     composeTestRule.setContent {
       TUIBadge(
-        badgeSize = L, tags = tags, count = 299
+        badgeSize = L, tags = tags, style = BadgeStyle.Count(299)
       )
     }
-    composeTestRule.onNodeWithTag(tags.parentTag).assertIsDisplayed()
+    composeTestRule.onNodeWithText("299").assertIsDisplayed()
+    composeTestRule.onNodeWithTag(tags.iconTag).assertDoesNotExist()
   }
+
+
+  @Test fun icon_badge_Displayed() {
+    composeTestRule.setContent {
+      TUIBadge(
+        badgeSize = L, tags = tags, style = BadgeStyle.Icon(TarkaIcons.Regular.Symbols16)
+      )
+    }
+    composeTestRule.onNodeWithTag(tags.iconTag).assertIsDisplayed()
+  }
+
+  @Test fun empty_badge_Displayed() {
+    composeTestRule.setContent {
+      TUIBadge(
+        badgeSize = L, tags = tags
+      )
+    }
+    composeTestRule.onNodeWithTag(tags.iconTag).assertDoesNotExist()
+    composeTestRule.onNodeWithTag(tags.parentTag).assertExists()
+  }
+
 }

tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/TUIEmailFieldTest.kt

@@ -42,9 +42,7 @@ class TUIEmailFieldTest {
         title = "To",
         emailAddressList = emailList,
         trailingIcon = Regular.AddCircle24,
-        onItemRemoved = { position ->
-
-        },
+        onItemRemoved = {},
         trailingIconClick = {
 
         },
@@ -83,9 +81,7 @@ class TUIEmailFieldTest {
         title = "To",
         emailAddressList = emailList,
         trailingIcon = Regular.AddCircle24,
-        onItemRemoved = { position ->
-
-        },
+        onItemRemoved = {},
         trailingIconClick = trailingIconClick,
         onItemAdd = {
           emailList.add(it)

tarka-ui/src/androidTest/java/com/tarkalabs/uicomponents/screenshots/TUIBadgeScreenShotTest.kt

@@ -1,8 +1,10 @@
 package com.tarkalabs.uicomponents.screenshots
 
 import com.tarkalabs.tarkaui.components.base.BadgeSize.M
-import com.tarkalabs.tarkaui.components.base.BadgeSize.S
+import com.tarkalabs.tarkaui.components.base.BadgeStyle
 import com.tarkalabs.tarkaui.components.base.TUIBadge
+import com.tarkalabs.tarkaui.icons.Info20
+import com.tarkalabs.tarkaui.icons.TarkaIcons
 import org.junit.Test
 import org.junit.runner.RunWith
 import org.junit.runners.Parameterized
@@ -27,10 +29,10 @@ open class TUIBadgeScreenShotTest(
   }
 
   @Test fun test_badge_with_count() = compareScreenshotFor(darkTheme, "_testBadgeWithCount_$testName") {
-    TUIBadge(count = 2, badgeSize = M)
+    TUIBadge(style = BadgeStyle.Count(2), badgeSize = M)
   }
 
-  @Test fun test_badge_with_out_count() = compareScreenshotFor(darkTheme, "_testBadgeWithoutCount_$testName") {
-    TUIBadge(badgeSize = S)
+  @Test fun test_badge_with_icon() = compareScreenshotFor(darkTheme, "_testBadgeWithIcon_$testName") {
+    TUIBadge(style = BadgeStyle.Icon(TarkaIcons.Regular.Info20), badgeSize = M)
   }
 }

tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIChip.kt

@@ -27,22 +27,23 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import com.tarkalabs.tarkaui.icons.ArrowSort20
-import com.tarkalabs.tarkaui.icons.CaretDown20
-import com.tarkalabs.tarkaui.icons.Checkmark20
-import com.tarkalabs.tarkaui.icons.Dismiss20
-import com.tarkalabs.tarkaui.icons.TarkaIcon
-import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.components.ChipLeadingContent.Icon
 import com.tarkalabs.tarkaui.components.ChipLeadingContent.Image
 import com.tarkalabs.tarkaui.components.ChipType.Filter
 import com.tarkalabs.tarkaui.components.base.AvatarSize.XS
 import com.tarkalabs.tarkaui.components.base.AvatarType
+import com.tarkalabs.tarkaui.components.base.BadgeStyle
 import com.tarkalabs.tarkaui.components.base.IconButtonSize.M
 import com.tarkalabs.tarkaui.components.base.IconButtonStyle.GHOST
 import com.tarkalabs.tarkaui.components.base.TUIAvatar
 import com.tarkalabs.tarkaui.components.base.TUIBadge
 import com.tarkalabs.tarkaui.components.base.TUIIconButton
+import com.tarkalabs.tarkaui.icons.ArrowSort20
+import com.tarkalabs.tarkaui.icons.CaretDown20
+import com.tarkalabs.tarkaui.icons.Checkmark20
+import com.tarkalabs.tarkaui.icons.Dismiss20
+import com.tarkalabs.tarkaui.icons.TarkaIcon
+import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 /**
@@ -240,7 +241,10 @@ enum class ChipSize(val size: Dp) {
         }
       } else null)
     if (type.badgeCount != null) {
-      TUIBadge(count = type.badgeCount, modifier = Modifier.align(Alignment.TopEnd))
+      TUIBadge(
+        style = BadgeStyle.Count(count = type.badgeCount),
+        modifier = Modifier.align(Alignment.TopEnd)
+      )
     }
   }
 }

tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIMobileOverlayMenuItem.kt

@@ -26,17 +26,17 @@ import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.tarkalabs.tarkaui.icons.AddCircle24
-import com.tarkalabs.tarkaui.icons.ChevronRight20
-import com.tarkalabs.tarkaui.icons.TarkaIcon
-import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.components.MobileOverlayMenuItemLeadingContentType.StatusIndicator
 import com.tarkalabs.tarkaui.components.MobileOverlayMenuItemStyle.Title
 import com.tarkalabs.tarkaui.components.MobileOverlayMenuItemStyle.TitleWithDescription
 import com.tarkalabs.tarkaui.components.MobileOverlayMenuItemTrailingContentType.Icon
 import com.tarkalabs.tarkaui.components.MobileOverlayMenuItemTrailingContentType.SubMobileOverlayMenu
 import com.tarkalabs.tarkaui.extentions.maxHeight
 import com.tarkalabs.tarkaui.extentions.maxWidth
+import com.tarkalabs.tarkaui.icons.AddCircle24
+import com.tarkalabs.tarkaui.icons.ChevronRight20
+import com.tarkalabs.tarkaui.icons.TarkaIcon
+import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 sealed class MobileOverlayMenuItemLeadingContentType {
@@ -84,7 +84,9 @@ sealed class MobileOverlayMenuItemStyle {
 
   val leadingIconLambda: @Composable () -> Unit = if (leadingContent != null && style is Title) {
     {
-      val leadingContentModifier = Modifier.padding(start = 16.dp, end = 8.dp).testTag(tags.leadingContentTag)
+      val leadingContentModifier = Modifier
+        .padding(start = 16.dp, end = 8.dp)
+        .testTag(tags.leadingContentTag)
       when (leadingContent) {
         is MobileOverlayMenuItemLeadingContentType.Icon -> Icon(
           painter = painterResource(id = leadingContent.icon.iconRes),
@@ -161,16 +163,21 @@ sealed class MobileOverlayMenuItemStyle {
     horizontalArrangement = Arrangement.SpaceBetween,
   ) {
     leadingIconLambda()
-    Column(modifier = Modifier
-      .weight(1f)
-      .padding(vertical = 8.dp)) {
+    Column(
+      modifier = Modifier
+        .weight(1f)
+        .padding(vertical = 8.dp)
+    ) {
       when (style) {
         Title -> TUIMobileOverlayMenuItemTitle(title)
         is TitleWithDescription -> TUIMenuItemTitleWithDescription(
           title = title, description = style.description
         )
       }
     }
+    if (trailingContentLambda == null) {
+      HorizontalSpacer(space = 8)
+    }
     trailingContentLambda?.invoke()
   }
 }

tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUINavigationRows.kt

@@ -75,8 +75,8 @@ import com.tarkalabs.tarkaui.theme.TUITheme
   ) {
     Row(modifier = modifier
       .clickable { onClick() }
-      .padding(8.dp)
       .defaultMinSize(minHeight = 40.dp)
+      .padding(8.dp)
       .testTag(tags.parentTag), verticalAlignment = Alignment.CenterVertically) {
       if (leadingIcon != null) Icon(
         modifier = Modifier

tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUITextRow.kt

@@ -1,8 +1,8 @@
 package com.tarkalabs.tarkaui.components
 
 import android.util.Log
-import androidx.compose.foundation.Canvas
 import androidx.annotation.StringRes
+import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
@@ -191,7 +191,7 @@ import com.tarkalabs.tarkaui.theme.TUITheme
                   expanded = false
                   onMenuItemClick?.invoke(item)
                 },
-                modifier = Modifier.width(160.dp),
+                modifier = Modifier.defaultMinSize(minWidth = 160.dp),
                 leadingContent = MobileOverlayMenuItemLeadingContentType.Icon(item.icon)
               )
             }
@@ -333,14 +333,12 @@ data class TUITextRowTags(
 )
 
 @Preview(showBackground = true)
-@Composable
-fun TUITextRowPreview() {
+@Composable fun TUITextRowPreview() {
   TUITextRow(
     title = "Duration", style = DateStyle(
-    "Jan 20 3000 friday march 32",
-    "Jan 20 3000 friday march 32"
-  ), onTextRowClick = {
-    Log.d("TAG", "TUITextRowPreview: ")
-  }, onInfoIconClick = null
+      "Jan 20 3000 friday march 32", "Jan 20 3000 friday march 32"
+    ), onTextRowClick = {
+      Log.d("TAG", "TUITextRowPreview: ")
+    }, onInfoIconClick = null
   )
-}
+}

tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/base/TUIBadge.kt

@@ -1,18 +1,33 @@
 package com.tarkalabs.tarkaui.components.base
 
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.wrapContentSize
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import com.tarkalabs.tarkaui.components.VerticalSpacer
 import com.tarkalabs.tarkaui.components.base.BadgeSize.L
 import com.tarkalabs.tarkaui.components.base.BadgeSize.M
 import com.tarkalabs.tarkaui.components.base.BadgeSize.S
+import com.tarkalabs.tarkaui.icons.ErrorCircle12
+import com.tarkalabs.tarkaui.icons.TarkaIcon
+import com.tarkalabs.tarkaui.icons.TarkaIcons
 import com.tarkalabs.tarkaui.theme.TUITheme
 
 enum class BadgeSize(val size: Dp) {
@@ -21,6 +36,11 @@ enum class BadgeSize(val size: Dp) {
   L(24.dp)
 }
 
+sealed class BadgeStyle {
+  data class Icon(val icon: TarkaIcon) : BadgeStyle()
+  data class Count(val count: Int = 0) : BadgeStyle()
+}
+
 /**
  * Below TUIBadge() defines a reusable composable function which can be used to create an Badge with various sizes which takes couple of  parameters
  * @param count The Count to be displayed on the badge.
@@ -31,41 +51,69 @@ enum class BadgeSize(val size: Dp) {
  *    TUIBadge(count = 3,badgeSize = M)
  *
  */
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable fun TUIBadge(
   modifier: Modifier = Modifier,
-  count: Int? = null,
+  style: BadgeStyle = BadgeStyle.Count(),
   badgeSize: BadgeSize = M,
   tags: TUIBadgeTags = TUIBadgeTags(),
   color: Color = TUITheme.colors.error
 ) {
-  when (badgeSize) {
-    S -> 0.dp
-    M -> 4.dp
-    L -> 8.dp
-  }
+
   val textStyle = when (badgeSize) {
     S, M -> TUITheme.typography.button8
     L -> TUITheme.typography.button7
   }
-  androidx.compose.material3.Badge(
-    containerColor = color,
+
+  Box(
     modifier = modifier
       .defaultMinSize(minWidth = badgeSize.size, minHeight = badgeSize.size)
       .testTag(tags.parentTag)
+      .clip(CircleShape)
+      .background(color),
+    contentAlignment = Alignment.Center,
   ) {
-    if (count != null) Text(
-      text = count.toString(),
-      style = textStyle,
-      color = TUITheme.colors.onTertiary,
-    )
+    when (style) {
+      is BadgeStyle.Count -> {
+        if (style.count != 0) {
+          Text(
+            modifier = Modifier
+              .padding(horizontal = 2.dp)
+              .align(Alignment.Center),
+            textAlign = TextAlign.Center,
+            text = style.count.toString(),
+            style = textStyle,
+            color = TUITheme.colors.onTertiary,
+          )
+        }
+      }
+
+      is BadgeStyle.Icon -> {
+        Icon(
+          modifier = Modifier
+            .testTag(tags.iconTag)
+            .defaultMinSize(minHeight = 10.dp, minWidth = 10.dp)
+            .wrapContentSize(),
+          painter = painterResource(id = style.icon.iconRes),
+          contentDescription = style.icon.contentDescription
+        )
+      }
+    }
   }
 }
 
 data class TUIBadgeTags(
   val parentTag: String = "TUIBadge",
+  val iconTag: String = "BadgeIcon",
 )
 
 @Preview(showBackground = true) @Composable fun BadgePreview() {
-  TUIBadge(count = 40, badgeSize = M)
+  Column(horizontalAlignment = Alignment.CenterHorizontally) {
+    TUIBadge(style = BadgeStyle.Count(4), badgeSize = M)
+    VerticalSpacer(space = 8)
+    TUIBadge(
+      style = BadgeStyle.Icon(TarkaIcons.Regular.ErrorCircle12),
+      badgeSize = M,
+      color = TUITheme.colors.warning
+    )
+  }
 }