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 index a14d6a2f4..2e376ed96 100644 --- 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 index d715b4e09..f53b2b3ad 100644 --- 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 index 9abe62bd6..8d9957675 100644 --- 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,7 +10,6 @@ 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 @@ -18,64 +17,40 @@ 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 index 0971a316e..dd8f94bc4 100644 --- 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 = rememberSaveable { mutableStateOf(ChipType.Input) }, + chipType: MutableState, leadingElement: MutableState = rememberSaveable { mutableStateOf(LeadingElement.None) }, enabled: MutableState = rememberSaveable { mutableStateOf(true) }, choiceChipIndexSelected: MutableState = 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 index 9f1ec576b..8173d0abd 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -57,7 +57,6 @@ Forced on dark Forced on light Customize - Type Size Style State @@ -163,15 +162,14 @@ Chips Chips are small components containing a number of elements that represent a calendar event or contact. - Chip - Input - The user input searches are transformed into chips that can be added or deleted. - Choice - The chips allow the user to select only one item within the proposed items. - Action - The user can initiate actions by tapping on a chip. - Filter chip - In a search by tags user can activated the chips upon will. + Action chip + The user can initiate actions by tapping on a chip. + Choice chip + The chips allow the user to select only one item within the proposed items. + Filter chip + In a search by tags user can activated the chips upon will. + Input chip + The user input searches are transformed into chips that can be added or deleted. Dialogs