Fix various poll UI issues (#6346)

* Update poll section background color

* Remove avatar border from poll vote item

* Set text caret at the end in poll comment dialog

* Update duplicate option error appearance

* Update snapshots

* Extract PollOptionErrorRow

* Update string

* Improve poll option row accessibility

Author: gpunto

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/composer/InputField.kt

@@ -85,7 +85,7 @@ public fun InputField(
     ),
     decorationBox: @Composable (innerTextField: @Composable () -> Unit) -> Unit,
 ) {
-    var textState by remember { mutableStateOf(TextFieldValue(text = value)) }
+    var textState by remember { mutableStateOf(TextFieldValue(text = value, selection = TextRange(value.length))) }
 
     if (textState.text != value) {
         // Workaround to move cursor to the end after selecting a suggestion

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/poll/PollViewResultDialog.kt

@@ -346,7 +346,7 @@ internal fun PollSection(
         modifier = modifier
             .fillMaxWidth()
             .clip(shape = RoundedCornerShape(StreamTokens.radiusXl))
-            .background(ChatTheme.colors.backgroundCoreSurfaceSubtle)
+            .background(ChatTheme.colors.backgroundCoreSurfaceCard)
             .padding(contentPadding),
         verticalArrangement = verticalArrangement,
         content = content,

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/poll/PollVoteItem.kt

@@ -55,7 +55,7 @@ internal fun PollVoteItem(
                     .padding(borderSize),
                 user = user,
                 showIndicator = false,
-                showBorder = true,
+                showBorder = false,
             ),
         )
 

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/attachments/poll/PollOptionList.kt

@@ -31,6 +31,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.LocalMinimumInteractiveComponentSize
 import androidx.compose.material3.Text
+import androidx.compose.material3.minimumInteractiveComponentSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.key
@@ -45,7 +46,6 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
 import io.getstream.chat.android.compose.R
 import io.getstream.chat.android.compose.ui.components.poll.PollOptionInput
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
@@ -131,61 +131,80 @@ private fun ReorderableScope.PollOptionRow(
     onRemove: () -> Unit,
 ) {
     val colors = ChatTheme.colors
-    val borderColor = if (item.pollOptionError == null) colors.borderCoreDefault else colors.accentError
-    Row(
+    Column(
         modifier = Modifier
             .fillMaxWidth()
-            .border(width = 1.dp, color = borderColor, shape = PollInputShape)
+            .border(width = 1.dp, color = colors.borderCoreDefault, shape = PollInputShape)
             .clip(shape = PollInputShape),
-        verticalAlignment = Alignment.CenterVertically,
     ) {
-        IconButton(
-            modifier = Modifier.draggableHandle(),
-            onClick = {},
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
         ) {
-            Icon(
-                painter = painterResource(id = R.drawable.stream_design_ic_reorder),
-                contentDescription = null,
-                tint = colors.inputTextIcon,
-                modifier = Modifier.size(20.dp),
+            Box(
+                modifier = Modifier
+                    .draggableHandle()
+                    .minimumInteractiveComponentSize(),
+            ) {
+                Icon(
+                    painter = painterResource(id = R.drawable.stream_design_ic_reorder),
+                    contentDescription = stringResource(R.string.stream_compose_poll_option_reorder),
+                    tint = colors.inputTextIcon,
+                    modifier = Modifier.size(20.dp),
+                )
+            }
+
+            PollOptionInput(
+                modifier = Modifier.weight(1f),
+                value = item.title,
+                description = stringResource(id = R.string.stream_compose_poll_option_hint),
+                onValueChange = onTitleChange,
             )
-        }
 
-        PollOptionInput(
-            modifier = Modifier.weight(1f),
-            value = item.title,
-            description = stringResource(id = R.string.stream_compose_poll_option_hint),
-            onValueChange = onTitleChange,
-            decorationBox = { innerTextField ->
-                if (item.pollOptionError == null || item.title.isBlank()) {
-                    innerTextField()
-                } else {
-                    Column {
-                        Text(
-                            modifier = Modifier
-                                .fillMaxWidth()
-                                .padding(bottom = StreamTokens.spacing2xs),
-                            text = item.pollOptionError.message,
-                            color = colors.accentError,
-                            fontSize = 12.sp,
-                        )
-                        innerTextField()
-                    }
-                }
-            },
-        )
+            IconButton(onClick = onRemove) {
+                Icon(
+                    painter = painterResource(R.drawable.stream_design_ic_minus_circle),
+                    contentDescription = stringResource(R.string.stream_compose_poll_option_remove),
+                    tint = colors.inputTextIcon,
+                    modifier = Modifier.size(20.dp),
+                )
+            }
+        }
 
-        IconButton(onClick = onRemove) {
-            Icon(
-                painter = painterResource(R.drawable.stream_design_ic_minus_circle),
-                contentDescription = null,
-                tint = colors.inputTextIcon,
-                modifier = Modifier.size(20.dp),
-            )
+        if (item.pollOptionError != null && item.title.isNotBlank()) {
+            PollOptionErrorRow(item.pollOptionError)
         }
     }
 }
 
+@Composable
+private fun PollOptionErrorRow(pollOptionError: PollOptionError) {
+    val colors = ChatTheme.colors
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(
+                start = StreamTokens.spacingMd,
+                end = StreamTokens.spacingMd,
+                bottom = StreamTokens.spacingSm,
+            ),
+        horizontalArrangement = Arrangement.spacedBy(StreamTokens.spacingXs),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Icon(
+            painter = painterResource(R.drawable.stream_design_ic_exclamation_circle),
+            contentDescription = null,
+            tint = colors.accentError,
+            modifier = Modifier.size(20.dp),
+        )
+        Text(
+            text = pollOptionError.message,
+            color = colors.accentError,
+            style = ChatTheme.typography.captionDefault,
+        )
+    }
+}
+
 @Composable
 private fun AddPollOptionButton(onClick: () -> Unit) {
     val colors = ChatTheme.colors

stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/messages/attachments/poll/PollSwitchList.kt

@@ -17,19 +17,18 @@
 package io.getstream.chat.android.compose.ui.messages.attachments.poll
 
 import androidx.compose.animation.animateContentSize
-import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
@@ -52,6 +51,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import io.getstream.chat.android.compose.R
 import io.getstream.chat.android.compose.ui.components.StreamSwitch
+import io.getstream.chat.android.compose.ui.components.poll.PollSection
 import io.getstream.chat.android.compose.ui.theme.ChatTheme
 import io.getstream.chat.android.compose.ui.theme.StreamTokens
 import io.getstream.chat.android.compose.ui.util.applyIf
@@ -142,18 +142,9 @@ private fun PollSwitchListItem(
     onCheckedChange: (Boolean) -> Unit,
     childContent: (@Composable () -> Unit)? = null,
 ) {
-    Column(
-        modifier = Modifier
-            .fillMaxWidth()
-            .animateContentSize()
-            .border(
-                width = 1.dp,
-                color = ChatTheme.colors.backgroundCoreSurfaceDefault,
-                shape = RoundedCornerShape(StreamTokens.radiusXl),
-            )
-            .clip(shape = RoundedCornerShape(StreamTokens.radiusXl))
-            .background(ChatTheme.colors.backgroundCoreSurfaceDefault)
-            .padding(StreamTokens.spacingMd),
+    PollSection(
+        modifier = Modifier.animateContentSize(),
+        contentPadding = PaddingValues(StreamTokens.spacingMd),
     ) {
         PollSwitchHeader(
             title = title,

stream-chat-android-compose/src/main/res/values/strings.xml

@@ -269,7 +269,7 @@
     <string name="stream_compose_poll_option_title">Options</string>
     <string name="stream_compose_poll_option_description">Add an option</string>
     <string name="stream_compose_poll_option_hint">Add an option</string>
-    <string name="stream_compose_poll_option_error_duplicated">This is already an option</string>
+    <string name="stream_compose_poll_option_error_duplicated">Option already exists</string>
     <string name="stream_compose_poll_option_discard_dialog_title">Discard poll</string>
     <string name="stream_compose_poll_option_discard_dialog_description">Are you sure you want to discard your poll?</string>
     <string name="stream_compose_poll_option_discard_dialog_cancel">Keep Editing</string>
@@ -317,6 +317,8 @@
 
     <string name="stream_compose_poll_created_preview">Poll created: %s</string>
     <string name="stream_compose_poll_closed_preview">Poll closed: %s</string>
+    <string name="stream_compose_poll_option_reorder">Reorder poll option</string>
+    <string name="stream_compose_poll_option_remove">Remove poll option</string>
 
     <!--  Pinned message list  -->
     <string name="stream_compose_pinned_message_list_empty_title">No pinned messages</string>