qa changes for list item, avatar carousel and progress indicators (#372)

* qa changes * updating hydra lab client version * api doc changes * scroll on mouse drag on lazyrow and lazycolumn * reverting hydra lab upgrade * reverting changes * revert changes --------- Co-authored-by: PraveenKumar <pyeruva@microsoft.com>
2023-03-27 15:33:28 +05:30 · 2023-03-27 15:33:28 +05:30 · 6db8cca788
--- a/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/V2AvatarCarouselActivity.kt
+++ b/FluentUI.Demo/src/main/java/com/microsoft/fluentuidemo/demos/V2AvatarCarouselActivity.kt
@ -199,7 +199,6 @@ fun createAvatarPersons(mContext: Context): ArrayList<AvatarCarouselItem> {
    )
 }

-@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
@Composable
 fun CreateAvatarCarouselActivityUI() {
    val mContext = LocalContext.current
--- a/fluentui_core/src/main/java/com/microsoft/fluentui/theme/token/GlobalTokens.kt
+++ b/fluentui_core/src/main/java/com/microsoft/fluentui/theme/token/GlobalTokens.kt
@ -321,6 +321,7 @@ object GlobalTokens : Parcelable {
        StrokeWidth10,
        StrokeWidth15,
        StrokeWidth20,
+        StrokeWidth30,
        StrokeWidth40,
        StrokeWidth60
    }
@ -337,6 +338,8 @@ object GlobalTokens : Parcelable {
                1.5.dp
            StrokeWidthTokens.StrokeWidth20 ->
                2.dp
+            StrokeWidthTokens.StrokeWidth30 ->
+                3.dp
            StrokeWidthTokens.StrokeWidth40 ->
                4.dp
            StrokeWidthTokens.StrokeWidth60 ->
--- a/fluentui_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/AvatarCarouselTokens.kt
+++ b/fluentui_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/AvatarCarouselTokens.kt
@ -20,7 +20,7 @@ data class AvatarCarouselInfo(
@Parcelize
 open class AvatarCarouselTokens : ControlToken, Parcelable {
    @Composable
-    open fun getAvatarSize(avatarCarouselInfo: AvatarCarouselInfo): AvatarSize {
+    open fun avatarSize(avatarCarouselInfo: AvatarCarouselInfo): AvatarSize {
        return when (avatarCarouselInfo.size) {
            AvatarCarouselSize.Small -> AvatarSize.Size56
            AvatarCarouselSize.Large -> AvatarSize.Size72
@ -43,7 +43,7 @@ open class AvatarCarouselTokens : ControlToken, Parcelable {
    }

    @Composable
-    open fun getTextColor(avatarCarouselInfo: AvatarCarouselInfo): StateColor {
+    open fun textColor(avatarCarouselInfo: AvatarCarouselInfo): StateColor {
        return StateColor(
            rest = FluentTheme.aliasTokens.neutralForegroundColor[AliasTokens.NeutralForegroundColorTokens.Foreground1].value(
                themeMode = FluentTheme.themeMode
@ -58,7 +58,7 @@ open class AvatarCarouselTokens : ControlToken, Parcelable {
    }

    @Composable
-    open fun getSubTextColor(avatarCarouselInfo: AvatarCarouselInfo): StateColor {
+    open fun subTextColor(avatarCarouselInfo: AvatarCarouselInfo): StateColor {
        return StateColor(
            rest = FluentTheme.aliasTokens.neutralForegroundColor[AliasTokens.NeutralForegroundColorTokens.Foreground2].value(
                themeMode = FluentTheme.themeMode
@ -73,7 +73,7 @@ open class AvatarCarouselTokens : ControlToken, Parcelable {
    }

    @Composable
-    open fun getTextStyle(avatarCarouselInfo: AvatarCarouselInfo): TextStyle {
+    open fun textTypography(avatarCarouselInfo: AvatarCarouselInfo): TextStyle {
        return when (avatarCarouselInfo.size) {
            AvatarCarouselSize.Small -> FluentTheme.aliasTokens.typography[AliasTokens.TypographyTokens.Caption1]
            AvatarCarouselSize.Large -> FluentTheme.aliasTokens.typography[AliasTokens.TypographyTokens.Body2]
@ -81,7 +81,7 @@ open class AvatarCarouselTokens : ControlToken, Parcelable {
    }

    @Composable
-    open fun getSubTextStyle(avatarCarouselInfo: AvatarCarouselInfo): TextStyle {
+    open fun subTextTypography(avatarCarouselInfo: AvatarCarouselInfo): TextStyle {
        return when (avatarCarouselInfo.size) {
            AvatarCarouselSize.Small -> FluentTheme.aliasTokens.typography[AliasTokens.TypographyTokens.Caption1]
            AvatarCarouselSize.Large -> FluentTheme.aliasTokens.typography[AliasTokens.TypographyTokens.Caption1]
--- a/fluentui_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/CircularProgressIndicatorTokens.kt
+++ b/fluentui_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/CircularProgressIndicatorTokens.kt
@ -32,7 +32,7 @@ open class CircularProgressIndicatorTokens : ControlToken, Parcelable {
            CircularProgressIndicatorSize.XSmall -> GlobalTokens.iconSize(GlobalTokens.IconSizeTokens.IconSize160)
            CircularProgressIndicatorSize.Medium -> GlobalTokens.iconSize(GlobalTokens.IconSizeTokens.IconSize240)
            CircularProgressIndicatorSize.Large -> 32.dp
-            CircularProgressIndicatorSize.XLarge -> GlobalTokens.iconSize(GlobalTokens.IconSizeTokens.IconSize360)
+            CircularProgressIndicatorSize.XLarge -> GlobalTokens.iconSize(GlobalTokens.IconSizeTokens.IconSize400)
        }
    }

@ -42,7 +42,7 @@ open class CircularProgressIndicatorTokens : ControlToken, Parcelable {
            CircularProgressIndicatorSize.XXSmall -> GlobalTokens.strokeWidth(GlobalTokens.StrokeWidthTokens.StrokeWidth10)
            CircularProgressIndicatorSize.XSmall -> GlobalTokens.strokeWidth(GlobalTokens.StrokeWidthTokens.StrokeWidth10)
            CircularProgressIndicatorSize.Medium -> GlobalTokens.strokeWidth(GlobalTokens.StrokeWidthTokens.StrokeWidth20)
-            CircularProgressIndicatorSize.Large -> 3.dp
+            CircularProgressIndicatorSize.Large -> GlobalTokens.strokeWidth(GlobalTokens.StrokeWidthTokens.StrokeWidth30)
            CircularProgressIndicatorSize.XLarge -> GlobalTokens.strokeWidth(GlobalTokens.StrokeWidthTokens.StrokeWidth40)
        }
    }
--- a/fluentui_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/PersonaChipTokens.kt
+++ b/fluentui_core/src/main/java/com/microsoft/fluentui/theme/token/controlTokens/PersonaChipTokens.kt
@ -177,7 +177,7 @@ open class PersonaChipTokens : ControlToken, Parcelable {
    }

    @Composable
-    open fun fontStyle(personaChipInfo: PersonaChipControlInfo): TextStyle {
+    open fun typography(personaChipInfo: PersonaChipControlInfo): TextStyle {
        return when (personaChipInfo.size) {
            Small -> FluentTheme.aliasTokens.typography[AliasTokens.TypographyTokens.Caption1]
            Medium -> FluentTheme.aliasTokens.typography[AliasTokens.TypographyTokens.Body2]
--- a/fluentui_listitem/src/main/java/com/microsoft/fluentui/tokenized/listitem/ListItem.kt
+++ b/fluentui_listitem/src/main/java/com/microsoft/fluentui/tokenized/listitem/ListItem.kt
@ -58,6 +58,14 @@ internal fun getListItemInfo(): ListItemInfo {

 object ListItem {

+    private fun clearSemantics(properties: (SemanticsPropertyReceiver.() -> Unit)?): Modifier {
+        return if (properties != null) {
+            Modifier.clearAndSetSemantics(properties)
+        } else {
+            Modifier
+        }
+    }
+
    private fun Modifier.clickAndSemanticsModifier(
        interactionSource: MutableInteractionSource,
        onClick: () -> Unit,
@ -192,8 +200,8 @@ object ListItem {
    /**
     * Create a Single line or a multi line List item. A multi line list can be formed by providing either a secondary text or a tertiary text
     *
-     * @param modifier Optional modifier for List item.
     * @param text Primary text.
+     * @param modifier Optional modifier for List item.
     * @param subText Optional secondaryText or a subtitle.
     * @param secondarySubText Optional tertiary text or a footer.
     * @param textAlignment Optional [ListItemTextAlignment] to align text in the center or start at the lead.
@ -209,9 +217,10 @@ object ListItem {
     * @param secondarySubTextTailingIcons Optional secondary text trailing icons(16X16). Supply text icons using [TextIcons]
     * @param border [BorderType] Optional border for the list item.
     * @param borderInset [BorderInset]Optional borderInset for list item.
-     * @param listItemTokens Optional list item tokens for list item appearance.If not provided then list item tokens will be picked from [AppThemeController]
     * @param leadingAccessoryView Optional composable leading accessory view.
     * @param trailingAccessoryView Optional composable trailing accessory view.
+     * @param textAccessibilityProperties Accessibility properties for the text in list item.
+     * @param listItemTokens Optional list item tokens for list item appearance.If not provided then list item tokens will be picked from [AppThemeController]
     *
     */
    @Composable
@ -237,6 +246,7 @@ object ListItem {
        interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
        leadingAccessoryView: (@Composable () -> Unit)? = null,
        trailingAccessoryView: (@Composable () -> Unit)? = null,
+        textAccessibilityProperties: (SemanticsPropertyReceiver.() -> Unit)? = null,
        listItemTokens: ListItemTokens? = null
    ) {
        val listItemType = if (subText == null && secondarySubText == null) {
@ -301,7 +311,8 @@ object ListItem {
                    .borderModifier(border, borderColor, borderSize, borderInsetToPx)
                    .clickAndSemanticsModifier(
                        interactionSource, onClick = onClick ?: {}, enabled, rippleColor
-                    ), verticalAlignment = Alignment.CenterVertically
+                    )
+                , verticalAlignment = Alignment.CenterVertically
            ) {
                if (unreadDot) {
                    Canvas(
@ -330,7 +341,8 @@ object ListItem {
                Box(
                    Modifier
                        .padding(horizontal = padding.calculateStartPadding(LocalLayoutDirection.current))
-                        .weight(1f), contentAlignment = contentAlignment
+                        .weight(1f)
+                        .then(clearSemantics(textAccessibilityProperties)),contentAlignment = contentAlignment
                ) {
                    Column(Modifier.padding(vertical = padding.calculateTopPadding())) {
                        Row(
--- a/fluentui_persona/src/main/java/com/microsoft/fluentui/tokenized/persona/AvatarCarousel.kt
+++ b/fluentui_persona/src/main/java/com/microsoft/fluentui/tokenized/persona/AvatarCarousel.kt
@ -2,6 +2,10 @@ package com.microsoft.fluentui.tokenized.persona

 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.draggable
+import androidx.compose.foundation.gestures.rememberDraggableState
+import androidx.compose.foundation.gestures.scrollBy
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyRow
@ -48,8 +52,8 @@ fun getAvatarCarouselInfo(): AvatarCarouselInfo {
 * Avatar Carousel internally is a group of [AvatarCarouselItem] which can be used to create onClick based Avatar buttons.
 *
 * @param avatarList List of Avatars to be created in a carousel
- * @param size size of the carousel
 * @param modifier Optional Modifier for Avatar carousel
+ * @param size size of the carousel
 * @param enablePresence enable/disable presence indicator on avatar
 * @param avatarTokens Token to provide appearance values to Avatar
 * @param avatarCarouselTokens Token to provide appearance values to Avatar Carousel
@ -75,27 +79,34 @@ fun AvatarCarousel(
        val inActiveString = getStringResource(R.string.Inactive)
        val scope = rememberCoroutineScope()
        val lazyListState = rememberLazyListState()
-        val avatarSize = getAvatarCarouselTokens().getAvatarSize(getAvatarCarouselInfo())
+        val avatarSize = getAvatarCarouselTokens().avatarSize(getAvatarCarouselInfo())
        val textStyle =
-            getAvatarCarouselTokens().getTextStyle(getAvatarCarouselInfo())
+            getAvatarCarouselTokens().textTypography(getAvatarCarouselInfo())
        val subTextStyle =
-            getAvatarCarouselTokens().getSubTextStyle(getAvatarCarouselInfo())
+            getAvatarCarouselTokens().subTextTypography(getAvatarCarouselInfo())
        val avatarTextPadding = getAvatarCarouselTokens().padding(getAvatarCarouselInfo())
        val bottomPadding = if (size == AvatarCarouselSize.Small) 8.dp else 0.dp
-        val interactionSource = remember { MutableInteractionSource() }
-        val textColor = getAvatarCarouselTokens().getTextColor(getAvatarCarouselInfo())
+        val textColor = getAvatarCarouselTokens().textColor(getAvatarCarouselInfo())
        val subTextColor =
-            getAvatarCarouselTokens().getSubTextColor(getAvatarCarouselInfo())
+            getAvatarCarouselTokens().subTextColor(getAvatarCarouselInfo())


-        LazyRow(state = lazyListState) {
+        LazyRow(state = lazyListState,
+        modifier = Modifier.draggable(
+            orientation = Orientation.Horizontal,
+            state = rememberDraggableState { delta ->
+                scope.launch {
+                    lazyListState.scrollBy(-delta)
+                }
+            },
+        )) {
            itemsIndexed(avatarList) { index, item ->
                val backgroundColor =
                    getAvatarCarouselTokens().backgroundColor(getAvatarCarouselInfo())
                        .getColorByState(
                            enabled = item.enabled,
                            selected = false,
-                            interactionSource = interactionSource
+                            interactionSource = remember { MutableInteractionSource() }
                        )
                val nameString =
                    if (size == AvatarCarouselSize.Large) "${item.person.getName()}. " else "${item.person.firstName}. "
@ -117,7 +128,7 @@ fun AvatarCarousel(
                        .requiredWidth(88.dp)
                        .alpha(if (item.enabled) 1f else 0.7f)
                        .clickable(
-                            interactionSource = interactionSource,
+                            interactionSource = remember { MutableInteractionSource() },
                            indication = rememberRipple(),
                            onClickLabel = null,
                            enabled = item.enabled,
--- a/fluentui_persona/src/main/java/com/microsoft/fluentui/tokenized/persona/Persona.kt
+++ b/fluentui_persona/src/main/java/com/microsoft/fluentui/tokenized/persona/Persona.kt
@ -2,14 +2,30 @@ package com.microsoft.fluentui.tokenized.persona

 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import com.microsoft.fluentui.theme.token.controlTokens.AvatarTokens
-import com.microsoft.fluentui.theme.token.controlTokens.BorderInset
+import com.microsoft.fluentui.theme.token.controlTokens.*
 import com.microsoft.fluentui.theme.token.controlTokens.BorderInset.None
-import com.microsoft.fluentui.theme.token.controlTokens.BorderType
 import com.microsoft.fluentui.theme.token.controlTokens.BorderType.NoBorder
-import com.microsoft.fluentui.theme.token.controlTokens.ListItemTokens
 import com.microsoft.fluentui.tokenized.listitem.ListItem
+import com.microsoft.fluentui.tokenized.listitem.TextIcons

+/**
+ * A customized  list item. Can be a Single or multiline Avatar item.
+ *
+ * @param person person details like avatar
+ * @param modifier Optional modifier for List item.
+ * @param primaryText Primary text.
+ * @param secondaryText Optional secondaryText or a subtitle.
+ * @param tertiaryText Optional tertiary text or a footer.
+ * @param onClick Optional onClick action for list item.
+ * @param border [BorderType] Optional border for the list item.
+ * @param borderInset [BorderInset]Optional borderInset for list item.
+ * @param enabled Optional enable/disable List item
+ * @param enableAvatarActivityRings if avatar activity rings are enabled/disabled
+ * @param enableAvatarPresence if avatar presence is enabled/disabled
+ * @param avatarTokens tokens for the avatar in [Person]
+ * @param personaTokens tokens for the persona
+ *
+ */
@Composable
 fun Persona(
    person: Person,
--- a/fluentui_persona/src/main/java/com/microsoft/fluentui/tokenized/persona/PersonaChip.kt
+++ b/fluentui_persona/src/main/java/com/microsoft/fluentui/tokenized/persona/PersonaChip.kt
@ -78,7 +78,7 @@ fun PersonaChip(
            .getColorByState(
                enabled = enabled, selected = selected, interactionSource = interactionSource
            )
-        val fontStyle = getPersonaChipTokens().fontStyle(personaChipInfo = getPersonaChipInfo())
+        val typography = getPersonaChipTokens().typography(personaChipInfo = getPersonaChipInfo())
        val avatarSize = getPersonaChipTokens().avatarSize(personaChipInfo = getPersonaChipInfo())
        val verticalPadding =
            getPersonaChipTokens().verticalPadding(personaChipInfo = getPersonaChipInfo())
@ -132,7 +132,7 @@ fun PersonaChip(
                    modifier = Modifier.padding(bottom = 2.dp),//Vertically center align text
                    text = person.getLabel(),
                    color = textColor,
-                    style = fontStyle
+                    style = typography
                )
            }
        }
--- a/fluentui_persona/src/main/java/com/microsoft/fluentui/tokenized/persona/PersonaList.kt
+++ b/fluentui_persona/src/main/java/com/microsoft/fluentui/tokenized/persona/PersonaList.kt
@ -1,9 +1,16 @@
 package com.microsoft.fluentui.tokenized.persona

+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.gestures.draggable
+import androidx.compose.foundation.gestures.rememberDraggableState
+import androidx.compose.foundation.gestures.scrollBy
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.SemanticsPropertyReceiver
 import com.microsoft.fluentui.theme.token.controlTokens.AvatarTokens
 import com.microsoft.fluentui.theme.token.controlTokens.BorderInset
 import com.microsoft.fluentui.theme.token.controlTokens.BorderInset.None
@ -11,7 +18,22 @@ import com.microsoft.fluentui.theme.token.controlTokens.BorderType
 import com.microsoft.fluentui.theme.token.controlTokens.BorderType.NoBorder
 import com.microsoft.fluentui.theme.token.controlTokens.ListItemTokens
 import com.microsoft.fluentui.tokenized.listitem.ListItem
+import kotlinx.coroutines.launch

+/**
+ * A customized  list of personas. Can be a Single or multiline Persona.
+ *
+ * @param personas List of [Persona]
+ * @param modifier Optional modifier for List item.
+ * @param border [BorderType] Optional border for the list item.
+ * @param borderInset [BorderInset]Optional borderInset for list item.
+ * @param enableAvatarActivityRings if avatar activity rings are enabled/disabled
+ * @param enableAvatarPresence if avatar presence is enabled/disabled
+ * @param textAccessibilityProperties Accessibility properties for the text in list item.
+ * @param avatarTokens tokens for the avatar in [Person]
+ * @param personaListTokens tokens for the persona list
+ *
+ */
@Composable
 fun PersonaList(
    personas: List<Persona>,
@ -20,10 +42,20 @@ fun PersonaList(
    borderInset: BorderInset = None,
    enableAvatarActivityRings: Boolean = false,
    enableAvatarPresence: Boolean = true,
+    textAccessibilityProperties: (SemanticsPropertyReceiver.() -> Unit)? = null,
    avatarTokens: AvatarTokens? = null,
    personaListTokens: ListItemTokens? = null
 ) {
-    LazyColumn {
+    val scope = rememberCoroutineScope()
+    val lazyListState = rememberLazyListState()
+    LazyColumn(state = lazyListState, modifier = Modifier.draggable(
+        orientation = Orientation.Vertical,
+        state = rememberDraggableState { delta ->
+            scope.launch {
+                lazyListState.scrollBy(-delta)
+            }
+        },
+    )) {
        items(personas) { item ->
            ListItem.Item(
                text = item.title,
@ -44,7 +76,8 @@ fun PersonaList(
                        avatarToken = avatarTokens
                    )
                },
-                trailingAccessoryView = item.trailingIcon
+                trailingAccessoryView = item.trailingIcon,
+                textAccessibilityProperties = textAccessibilityProperties
            )
        }
    }
--- a/fluentui_persona/src/main/java/com/microsoft/fluentui/tokenized/persona/SearchBarPersonaChip.kt
+++ b/fluentui_persona/src/main/java/com/microsoft/fluentui/tokenized/persona/SearchBarPersonaChip.kt
@ -79,7 +79,7 @@ fun SearchBarPersonaChip(
                    enabled = enabled, selected = selected, interactionSource = interactionSource
                )
        val fontStyle =
-            getSearchBarPersonaChipTokens().fontStyle(personaChipInfo = getSearchBarPersonaChipInfo())
+            getSearchBarPersonaChipTokens().typography(personaChipInfo = getSearchBarPersonaChipInfo())
        val avatarSize =
            getSearchBarPersonaChipTokens().avatarSize(personaChipInfo = getSearchBarPersonaChipInfo())
        val verticalPadding =