[#494] Display type of chips as variants of chip component

Orange-OpenSource · Mar 30, 2023 · 3b35e97 · 3b35e97
1 parent ad90302
commit 3b35e97
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 71 deletions.
diff --git a/app/src/main/java/com/orange/ods/app/ui/components/Component.kt b/app/src/main/java/com/orange/ods/app/ui/components/Component.kt
@@ -13,9 +13,9 @@ package com.orange.ods.app.ui.components
 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
 import androidx.compose.ui.Alignment
+import com.orange.ods.app.R
 import com.orange.ods.compose.component.OdsComponent
 import com.orange.ods.compose.component.button.OdsButtonStyle
-import com.orange.ods.app.R
 
 sealed class Component(
     @StringRes val titleRes: Int,
@@ -101,7 +101,7 @@ sealed class Component(
         R.drawable.il_chips,
         R.drawable.il_chips_small,
         R.string.component_chips_description,
-        listOf(Variant.Chip, Variant.ChipFilter)
+        listOf(Variant.ChipAction, Variant.ChipChoice, Variant.ChipInput, Variant.ChipFilter)
     )
 
     object Dialogs : Component(
@@ -225,8 +225,10 @@ sealed class Variant(
     object CardSmall : Variant(R.string.component_card_small, OdsComponent.OdsSmallCard.name)
     object CardHorizontal : Variant(R.string.component_card_horizontal, OdsComponent.OdsHorizontalCard.name)
 
-    object Chip : Variant(R.string.component_chip, OdsComponent.OdsChip.name)
-    object ChipFilter : Variant(R.string.component_chip_type_filter, OdsComponent.OdsFilterChip.name)
+    object ChipAction : Variant(R.string.component_chip_action, OdsComponent.OdsChip.name)
+    object ChipChoice : Variant(R.string.component_chip_choice, OdsComponent.OdsChip.name)
+    object ChipInput : Variant(R.string.component_chip_input, OdsComponent.OdsChip.name)
+    object ChipFilter : Variant(R.string.component_chip_filter, OdsComponent.OdsFilterChip.name)
 
     object DropdownMenu : Variant(R.string.component_menu_dropdown, OdsComponent.OdsDropdownMenu.name)
     object ExposedDropdownMenu : Variant(R.string.component_menu_exposed_dropdown, OdsComponent.OdsExposedDropdownMenu.name)

diff --git a/app/src/main/java/com/orange/ods/app/ui/components/ComponentVariantScreen.kt b/app/src/main/java/com/orange/ods/app/ui/components/ComponentVariantScreen.kt
@@ -34,7 +34,7 @@ fun ComponentVariantScreen(variantId: Long) {
             Component.AppBarsTop -> ComponentTopAppBar()
             Component.Buttons -> ComponentButtons(variant = variant)
             Component.Cards -> ComponentCard(variant = variant)
-            Component.Chips -> if (variant == Variant.ChipFilter) ChipFilter() else Chip()
+            Component.Chips -> if (variant == Variant.ChipFilter) ChipFilter() else Chip(variant = variant)
             Component.Menus -> ComponentMenu(variant = variant)
             Component.Progress -> ComponentProgress(variant = variant)
             Component.TextFields -> ComponentTextField(variant = variant)

diff --git a/app/src/main/java/com/orange/ods/app/ui/components/chips/Chip.kt b/app/src/main/java/com/orange/ods/app/ui/components/chips/Chip.kt
@@ -10,72 +10,47 @@
 
 package com.orange.ods.app.ui.components.chips
 
-import android.content.Context
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.ExperimentalMaterialApi
 import androidx.compose.material.rememberBottomSheetScaffoldState
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.semantics
-import androidx.compose.ui.semantics.stateDescription
 import coil.compose.rememberAsyncImagePainter
-import com.orange.ods.compose.component.chip.OdsChip
-import com.orange.ods.compose.component.chip.OdsChoiceChip
-import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow
-import com.orange.ods.compose.component.list.OdsListItem
-import com.orange.ods.compose.component.list.OdsSwitchTrailing
-import com.orange.ods.compose.text.OdsTextBody2
 import com.orange.ods.app.R
 import com.orange.ods.app.domain.recipes.LocalRecipes
 import com.orange.ods.app.ui.LocalMainThemeManager
+import com.orange.ods.app.ui.components.Variant
 import com.orange.ods.app.ui.components.chips.ChipCustomizationState.ChipType
 import com.orange.ods.app.ui.components.chips.ChipCustomizationState.LeadingElement
 import com.orange.ods.app.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
 import com.orange.ods.app.ui.components.utilities.clickOnElement
 import com.orange.ods.app.ui.utilities.composable.Subtitle
+import com.orange.ods.compose.component.chip.OdsChip
+import com.orange.ods.compose.component.chip.OdsChoiceChip
+import com.orange.ods.compose.component.chip.OdsChoiceChipsFlowRow
+import com.orange.ods.compose.component.list.OdsListItem
+import com.orange.ods.compose.component.list.OdsSwitchTrailing
+import com.orange.ods.compose.text.OdsTextBody2
 import com.orange.ods.theme.OdsComponentsConfiguration.ComponentStyle
 
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
-fun Chip() {
-    val context = LocalContext.current
-    val chipCustomizationState = rememberChipCustomizationState()
+fun Chip(variant: Variant) {
+    val chipCustomizationState = rememberChipCustomizationState(chipType = rememberSaveable { mutableStateOf(ChipType.fromVariant(variant)) })
 
     with(chipCustomizationState) {
         ComponentCustomizationBottomSheetScaffold(
             bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
             bottomSheetContent = {
-                Subtitle(textRes = R.string.component_type, horizontalPadding = true)
-                OdsChoiceChipsFlowRow(
-                    selectedChip = chipType,
-                    modifier = Modifier
-                        .padding(horizontal = dimensionResource(id = R.dimen.screen_horizontal_margin)),
-                    outlinedChips = true
-                ) {
-                    OdsChoiceChip(
-                        textRes = R.string.component_chip_type_input,
-                        value = ChipType.Input,
-                        modifier = Modifier.chipTypeSemantics(
-                            context = context, focusedChipType = ChipType.Input, selectedChipType = chipType.value
-                        )
-                    )
-                    OdsChoiceChip(
-                        textRes = R.string.component_chip_type_choice, value = ChipType.Choice,
-                        modifier = Modifier.chipTypeSemantics(context = context, focusedChipType = ChipType.Choice, selectedChipType = chipType.value)
-                    )
-                    OdsChoiceChip(
-                        textRes = R.string.component_chip_type_action, value = ChipType.Action,
-                        modifier = Modifier.chipTypeSemantics(context = context, focusedChipType = ChipType.Action, selectedChipType = chipType.value)
-                    )
-                }
-
                 if (isInputChip) {
                     Subtitle(textRes = R.string.component_element_leading, horizontalPadding = true)
                     OdsChoiceChipsFlowRow(
@@ -110,23 +85,16 @@ fun ChipTypeDemo(chipType: ChipType, content: @Composable () -> Unit) {
     Column(
         modifier = Modifier
             .verticalScroll(rememberScrollState())
-            .padding(horizontal = dimensionResource(id = R.dimen.screen_horizontal_margin))
+            .padding(horizontal = dimensionResource(id = R.dimen.screen_horizontal_margin), vertical = dimensionResource(id = R.dimen.screen_vertical_margin))
     ) {
-        Subtitle(textRes = chipType.nameRes)
         OdsTextBody2(
-            modifier = Modifier.padding(top = dimensionResource(id = R.dimen.spacing_xs), bottom = dimensionResource(id = R.dimen.spacing_s)),
+            modifier = Modifier.padding(bottom = dimensionResource(id = R.dimen.spacing_s)),
             text = stringResource(id = chipType.descriptionRes)
         )
         content()
     }
 }
 
-private fun Modifier.chipTypeSemantics(context: Context, focusedChipType: ChipType, selectedChipType: ChipType) = this.semantics {
-    stateDescription = if (selectedChipType == focusedChipType) {
-        "${context.getString(R.string.state_selected)}\n${context.getString(focusedChipType.nameRes)}\n${context.getString(focusedChipType.descriptionRes)}"
-    } else context.getString(R.string.state_not_selected)
-}
-
 @Composable
 private fun Chip(chipCustomizationState: ChipCustomizationState) {
     val context = LocalContext.current

diff --git a/app/src/main/java/com/orange/ods/app/ui/components/chips/ChipCustomizationState.kt b/app/src/main/java/com/orange/ods/app/ui/components/chips/ChipCustomizationState.kt
@@ -16,13 +16,14 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.saveable.rememberSaveable
 import com.orange.ods.app.R
+import com.orange.ods.app.ui.components.Variant
 import com.orange.ods.app.ui.components.chips.ChipCustomizationState.ChipType
 import com.orange.ods.app.ui.components.chips.ChipCustomizationState.LeadingElement
 
 
 @Composable
 fun rememberChipCustomizationState(
-    chipType: MutableState<ChipType> = rememberSaveable { mutableStateOf(ChipType.Input) },
+    chipType: MutableState<ChipType>,
     leadingElement: MutableState<LeadingElement> = rememberSaveable { mutableStateOf(LeadingElement.None) },
     enabled: MutableState<Boolean> = rememberSaveable { mutableStateOf(true) },
     choiceChipIndexSelected: MutableState<Int?> = rememberSaveable { mutableStateOf(null) }
@@ -41,20 +42,21 @@ class ChipCustomizationState(
     enum class ChipType {
         Input, Action, Choice, Filter;
 
-        val nameRes: Int
-            get() = when (this) {
-                Input -> R.string.component_chip_type_input
-                Action -> R.string.component_chip_type_action
-                Choice -> R.string.component_chip_type_choice
-                Filter -> R.string.component_chip_type_filter
+        companion object {
+            fun fromVariant(variant: Variant) = when (variant) {
+                Variant.ChipChoice -> Choice
+                Variant.ChipInput -> Input
+                Variant.ChipFilter -> Filter
+                else -> Action
             }
+        }
 
         val descriptionRes: Int
             get() = when (this) {
-                Input -> R.string.component_chip_type_input_description
-                Action -> R.string.component_chip_type_action_description
-                Choice -> R.string.component_chip_type_choice_description
-                Filter -> R.string.component_chip_type_filter_description
+                Input -> R.string.component_chip_input_description
+                Action -> R.string.component_chip_action_description
+                Choice -> R.string.component_chip_choice_description
+                Filter -> R.string.component_chip_filter_description
             }
     }
 

diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
@@ -57,7 +57,6 @@
     <string name="component_force_on_dark">Forced on dark</string>
     <string name="component_force_on_light">Forced on light</string>
     <string name="component_customize">Customize</string>
-    <string name="component_type">Type</string>
     <string name="component_size">Size</string>
     <string name="component_style">Style</string>
     <string name="component_state">State</string>
@@ -163,15 +162,14 @@
     <!-- Component Chips -->
     <string name="component_chips">Chips</string>
     <string name="component_chips_description">Chips are small components containing a number of elements that represent a calendar event or contact.</string>
-    <string name="component_chip">Chip</string>
-    <string name="component_chip_type_input">Input</string>
-    <string name="component_chip_type_input_description">The user input searches are transformed into chips that can be added or deleted.</string>
-    <string name="component_chip_type_choice">Choice</string>
-    <string name="component_chip_type_choice_description">The chips allow the user to select only one item within the proposed items.</string>
-    <string name="component_chip_type_action">Action</string>
-    <string name="component_chip_type_action_description">The user can initiate actions by tapping on a chip.</string>
-    <string name="component_chip_type_filter">Filter chip</string>
-    <string name="component_chip_type_filter_description">In a search by tags user can activated the chips upon will.</string>
+    <string name="component_chip_action">Action chip</string>
+    <string name="component_chip_action_description">The user can initiate actions by tapping on a chip.</string>
+    <string name="component_chip_choice">Choice chip</string>
+    <string name="component_chip_choice_description">The chips allow the user to select only one item within the proposed items.</string>
+    <string name="component_chip_filter">Filter chip</string>
+    <string name="component_chip_filter_description">In a search by tags user can activated the chips upon will.</string>
+    <string name="component_chip_input">Input chip</string>
+    <string name="component_chip_input_description">The user input searches are transformed into chips that can be added or deleted.</string>
 
     <!-- Component Dialogs -->
     <string name="component_dialogs">Dialogs</string>