Merge pull request #215 from tarkalabs/younes/bug/chip

Fixing the Border issue In TUI Chip + Fix SuggestionChip Color in Dark Theme + Fixed TUISearchBar height issue
tarkalabs · Mar 22, 2024 · 235b91d · 235b91d
2 parents c830d9a + b38a4c5
commit 235b91d
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 35 deletions.
diff --git a/tarka-ui/build.gradle.kts b/tarka-ui/build.gradle.kts
@@ -66,7 +66,7 @@ publishing {
       run {
         groupId = "com.tarkalabs"
         artifactId = getLibraryArtifactId()
-        version = "1.1.8"
+        version = "1.1.9"
         artifact("$buildDir/outputs/aar/tarka-ui-release.aar")
       }
     }

diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAppTopBar.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIAppTopBar.kt
@@ -5,6 +5,8 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
@@ -91,6 +93,8 @@ import com.tarkalabs.tarkaui.theme.TUITheme
     containerColor = TUITheme.colors.surface
   ),
   scrollBehavior: TopAppBarScrollBehavior? = null,
+  keyboardOption: KeyboardOptions = KeyboardOptions.Default,
+  keyboardAction: KeyboardActions = KeyboardActions.Default,
   tags: TUIAppTopBarTags = TUIAppTopBarTags(),
 ) {
 
@@ -116,7 +120,7 @@ import com.tarkalabs.tarkaui.theme.TUITheme
       TUISearchBar(
         modifier = Modifier
           .fillMaxWidth()
-          .padding(start = 16.dp, end = 16.dp, bottom = 8.dp),
+          .padding(start = 16.dp, end = 16.dp, bottom = 8.dp, top = 8.dp),
         query = searchQuery,
         placeholder = searchQueryHint,
         leadingIcon = TarkaIcons.Regular.ChevronLeft24,
@@ -126,7 +130,9 @@ import com.tarkalabs.tarkaui.theme.TUITheme
         },
         onQueryTextChange = {
           onSearchQuery(it)
-        })
+        },
+        keyboardAction = keyboardAction,
+        keyboardOption = keyboardOption)
     } else {
       TopAppBar(
         title = {

diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIChip.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUIChip.kt
@@ -15,6 +15,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.InputChip
 import androidx.compose.material3.InputChipDefaults
 import androidx.compose.material3.SuggestionChip
+import androidx.compose.material3.SuggestionChipDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -173,6 +174,7 @@ enum class ChipSize(val size: Dp) {
 
     is ChipType.Suggestion -> {
       SuggestionChip(
+        colors = SuggestionChipDefaults.suggestionChipColors(containerColor = TUITheme.colors.surface),
         onClick = onClick,
         label = commonLabel,
         shape = RoundedCornerShape(8.dp),
@@ -202,7 +204,7 @@ enum class ChipSize(val size: Dp) {
       shape = RoundedCornerShape(8.dp),
       border = FilterChipDefaults.filterChipBorder(
         borderColor = if (type.selected) TUITheme.colors.secondary else TUITheme.colors.utilityOutline,
-        enabled = false,
+        enabled = true,
         selected = type.selected
       ),
       onClick = onClick,

diff --git a/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUISearchBar.kt b/tarka-ui/src/main/java/com/tarkalabs/tarkaui/components/TUISearchBar.kt
@@ -1,13 +1,16 @@
 package com.tarkalabs.tarkaui.components
 
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.text.BasicTextField
+import androidx.compose.foundation.text.KeyboardActions
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.SearchBar
-import androidx.compose.material3.SearchBarDefaults
-import androidx.compose.material3.SearchBarDefaults.inputFieldColors
 import androidx.compose.material3.Text
+import androidx.compose.material3.TextFieldDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
@@ -16,6 +19,7 @@ import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
+import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.tarkalabs.tarkaui.components.base.IconButtonSize.L
@@ -35,6 +39,8 @@ import kotlinx.coroutines.delay
   query: String,
   placeholder: String,
   trailingIcon: TarkaIcon = TarkaIcons.Regular.Dismiss24,
+  keyboardOption: KeyboardOptions = KeyboardOptions.Default,
+  keyboardAction: KeyboardActions = KeyboardActions.Default,
   onQueryTextChange: (String) -> Unit,
   leadingIcon: TarkaIcon? = null,
   onLeadingIconClick: (() -> Unit)? = null,
@@ -50,13 +56,9 @@ import kotlinx.coroutines.delay
   val leadingIconLambda: @Composable (() -> Unit)? = if (leadingIcon != null) {
     {
       TUIIconButton(
-        icon = leadingIcon,
-        buttonSize = L,
-        iconButtonStyle = GHOST,
-        onIconClick = {
+        icon = leadingIcon, buttonSize = L, iconButtonStyle = GHOST, onIconClick = {
           onLeadingIconClick?.invoke()
-        },
-        tags = searchBarTags.leadingIconTags
+        }, tags = searchBarTags.leadingIconTags
       )
     }
   } else null
@@ -70,38 +72,48 @@ import kotlinx.coroutines.delay
       )
     }
   } else null
+  val interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
 
-  SearchBar(
+  BasicTextField(
+    value = query,
+    onValueChange = onQueryTextChange,
     modifier = modifier
       .testTag(searchBarTags.parentTag)
       .focusRequester(focusRequester)
-    ,
-    query = query,
-    onQueryChange = {
-      onQueryTextChange.invoke(it)
-    },
-    onSearch = {
-      onQueryTextChange.invoke(it)
-    },
-    active = false,
-    onActiveChange = {},
-    shape = RoundedCornerShape(75.dp),
-    leadingIcon = leadingIconLambda,
-    trailingIcon = trailingIconLambda,
-    placeholder = { Text(text = placeholder) },
-    colors = SearchBarDefaults.colors(
-      containerColor = TUITheme.colors.inputBackground,
-      dividerColor = Color.Transparent,
-      inputFieldColors = inputFieldColors(
+      .height(48.dp),
+    singleLine = true,
+    interactionSource = interactionSource,
+    textStyle = TUITheme.typography.body6,
+    keyboardActions = keyboardAction,
+    keyboardOptions = keyboardOption
+  ) { innerTextField ->
+    TextFieldDefaults.DecorationBox(
+      value = query,
+      innerTextField = innerTextField,
+      enabled = true,
+      singleLine = true,
+      visualTransformation = VisualTransformation.None,
+      interactionSource = interactionSource,
+      contentPadding = TextFieldDefaults.contentPaddingWithoutLabel(
+        top = 0.dp, bottom = 0.dp, end = 10.dp, start = 10.dp
+      ),
+      colors = TextFieldDefaults.colors(
         cursorColor = TUITheme.colors.inputText,
         focusedTextColor = TUITheme.colors.inputText,
         unfocusedTextColor = TUITheme.colors.inputText,
         unfocusedPlaceholderColor = TUITheme.colors.inputText.copy(alpha = 0.7f),
         focusedPlaceholderColor = TUITheme.colors.inputText.copy(alpha = 0.7f),
+        focusedIndicatorColor = Color.Transparent,
+        unfocusedIndicatorColor = Color.Transparent,
+        focusedContainerColor = TUITheme.colors.inputBackground,
+        unfocusedContainerColor = TUITheme.colors.inputBackground,
       ),
-    ),
-    enabled = true
-  ) {}
+      shape = RoundedCornerShape(75.dp),
+      placeholder = { Text(text = placeholder) },
+      leadingIcon = leadingIconLambda,
+      trailingIcon = trailingIconLambda,
+    )
+  }
 }
 
 data class TUISearchBarTags(