[#530] Add OdsTextToggleButton

app/src/main/java/com/orange/ods/app/ui/components/Component.kt

@@ -69,8 +69,8 @@ sealed class Component(
  Variant.ButtonsDefault,
  Variant.ButtonsOutlined,
  Variant.ButtonsText,
+ Variant.ButtonsFunctional,
  Variant.ButtonsTextToggleGroup,
- Variant.ButtonsFunctional
  )
  )
 

app/src/main/java/com/orange/ods/app/ui/components/buttons/ButtonCustomizationState.kt

@@ -21,23 +21,30 @@ import com.orange.ods.compose.component.button.OdsTextButtonStyle
 
 @Composable
 fun rememberButtonCustomizationState(
+ toggleCount: MutableState<Int> = rememberSaveable { mutableStateOf(ButtonCustomizationState.MinToggleCount) },
  buttonStyle: MutableState<OdsButtonStyle> = rememberSaveable { mutableStateOf(OdsButtonStyle.Default) },
  textButtonStyle: MutableState<OdsTextButtonStyle> = rememberSaveable { mutableStateOf(OdsTextButtonStyle.Default) },
  leadingIcon: MutableState<Boolean> = rememberSaveable { mutableStateOf(false) },
  fullScreenWidth: MutableState<Boolean> = rememberSaveable { mutableStateOf(false) },
  enabled: MutableState<Boolean> = rememberSaveable { mutableStateOf(true) }
 ) =
- remember(buttonStyle, textButtonStyle, leadingIcon, fullScreenWidth, enabled) {
- ButtonCustomizationState(buttonStyle, textButtonStyle, leadingIcon, fullScreenWidth, enabled)
+ remember(buttonStyle, textButtonStyle, leadingIcon, fullScreenWidth, enabled, toggleCount) {
+ ButtonCustomizationState(toggleCount, buttonStyle, textButtonStyle, leadingIcon, fullScreenWidth, enabled)
  }
 
 class ButtonCustomizationState(
+ val toggleCount: MutableState<Int>,
  val buttonStyle: MutableState<OdsButtonStyle>,
  val textButtonStyle: MutableState<OdsTextButtonStyle>,
  val leadingIcon: MutableState<Boolean>,
  val fullScreenWidth: MutableState<Boolean>,
  val enabled: MutableState<Boolean>
 ) {
+ companion object {
+ const val MinToggleCount = 2
+ const val MaxToggleCount = 3
+ }
+
  val hasLeadingIcon
  get() = leadingIcon.value
 

app/src/main/java/com/orange/ods/app/ui/components/buttons/ButtonsTextToggleGroup.kt

@@ -26,21 +26,19 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.dimensionResource
 import com.orange.ods.app.R
-import com.orange.ods.app.domain.recipes.LocalCategories
+import com.orange.ods.app.domain.recipes.LocalRecipes
 import com.orange.ods.app.ui.utilities.composable.CodeImplementationColumn
 import com.orange.ods.app.ui.utilities.composable.FunctionCallCode
 import com.orange.ods.compose.OdsComposable
-import com.orange.ods.compose.component.button.OdsIconToggleButtonsRowItem
 import com.orange.ods.compose.component.button.OdsTextToggleButtonsRow
 import com.orange.ods.compose.component.button.OdsTextToggleButtonsRowItem
 import com.orange.ods.compose.theme.OdsDisplaySurface
 
 @Composable
 fun ButtonsTextToggleButtonsRow(customizationState: ButtonCustomizationState) {
- val maxToggleCount = 2
  val textToggleButtons =
- LocalCategories.current.distinctBy { it.name }.filter { it.name != "" }.take(maxToggleCount).map { category ->
- OdsTextToggleButtonsRowItem(category.name, customizationState.isEnabled)
+ LocalRecipes.current.distinctBy { it.title }.filter { it.title != "" }.take(ButtonCustomizationState.MaxToggleCount).map { recipe ->
+ OdsTextToggleButtonsRowItem(recipe.title, customizationState.isEnabled)
  }
 
  var selectedIndex by rememberSaveable { mutableStateOf(0) }
@@ -52,20 +50,20 @@ fun ButtonsTextToggleButtonsRow(customizationState: ButtonCustomizationState) {
  .padding(vertical = dimensionResource(id = R.dimen.screen_vertical_margin))
  ) {
  ToggleButtonsRow(
- iconToggleButtons = textToggleButtons,
+ textToggleButtons = textToggleButtons,
  selectedIndex = selectedIndex,
  onSelectedIndexChange = { index -> selectedIndex = index },
- toggleCount = maxToggleCount
+ toggleCount = toggleCount.value
  )
 
  Spacer(modifier = Modifier.padding(top = dimensionResource(R.dimen.spacing_s)))
 
  InvertedBackgroundColumn {
  ToggleButtonsRow(
- iconToggleButtons = textToggleButtons,
+ textToggleButtons = textToggleButtons,
  selectedIndex = selectedIndex,
  onSelectedIndexChange = { index -> selectedIndex = index },
- toggleCount = maxToggleCount,
+ toggleCount = toggleCount.value,
  displaySurface = displaySurface
  )
  }
@@ -74,14 +72,14 @@ fun ButtonsTextToggleButtonsRow(customizationState: ButtonCustomizationState) {
  modifier = Modifier.padding(horizontal = dimensionResource(id = R.dimen.screen_horizontal_margin))
  ) {
  FunctionCallCode(
- name = OdsComposable.OdsIconToggleButtonsRow.name,
+ name = OdsComposable.OdsTextToggleButtonsRow.name,
  exhaustiveParameters = false,
  parameters = {
- list("iconsToggleButtons") {
- repeat(maxToggleCount) {
- classInstance(OdsIconToggleButtonsRowItem::class.java) {
- painter()
- string("iconDescription", "icon description")
+ list("textToggleButtons") {
+ repeat(toggleCount.value) {
+ classInstance(OdsTextToggleButtonsRowItem::class.java) {
+ string("text", "text bottom")
+ selected(customizationState.isEnabled)
  }
  }
  }
@@ -95,7 +93,7 @@ fun ButtonsTextToggleButtonsRow(customizationState: ButtonCustomizationState) {
 
 @Composable
 private fun ToggleButtonsRow(
- iconToggleButtons: List<OdsTextToggleButtonsRowItem>,
+ textToggleButtons: List<OdsTextToggleButtonsRowItem>,
  selectedIndex: Int,
  onSelectedIndexChange: (Int) -> Unit,
  toggleCount: Int,
@@ -109,7 +107,7 @@ private fun ToggleButtonsRow(
  horizontalArrangement = Arrangement.Center
  ) {
  OdsTextToggleButtonsRow(
- textToggleButtons = iconToggleButtons.take(toggleCount),
+ textToggleButtons = textToggleButtons.take(toggleCount),
  selectedIndex = selectedIndex,
  onSelectedIndexChange = onSelectedIndexChange,
  displaySurface = displaySurface

app/src/main/java/com/orange/ods/app/ui/components/buttons/ComponentButtons.kt

@@ -29,6 +29,7 @@ import androidx.compose.ui.res.dimensionResource
 import androidx.compose.ui.res.stringResource
 import com.orange.ods.app.R
 import com.orange.ods.app.ui.components.Variant
+import com.orange.ods.app.ui.components.utilities.ComponentCountRow
 import com.orange.ods.app.ui.components.utilities.ComponentCustomizationBottomSheetScaffold
 import com.orange.ods.app.ui.utilities.composable.Subtitle
 import com.orange.ods.compose.component.button.OdsButtonStyle
@@ -59,15 +60,15 @@ fun ComponentButtons(variant: Variant) {
  bottomSheetScaffoldState = rememberBottomSheetScaffoldState(),
  bottomSheetContent = {
  if (variant == Variant.ButtonsTextToggleGroup) {
- /*ComponentCountRow(
+ ComponentCountRow(
  modifier = Modifier.padding(start = dimensionResource(id = R.dimen.screen_horizontal_margin)),
  title = stringResource(id = R.string.component_button_icon_toggle_count),
  count = toggleCount,
  minusIconContentDescription = stringResource(id = R.string.component_button_icon_toggle_remove),
  plusIconContentDescription = stringResource(id = R.string.component_button_icon_toggle_add),
- minCount = ButtonIconCustomizationState.MinToggleCount,
- maxCount = ButtonIconCustomizationState.MaxToggleCount
- )*/
+ minCount = ButtonCustomizationState.MinToggleCount,
+ maxCount = ButtonCustomizationState.MaxToggleCount
+ )
  OdsListItem(
  text = stringResource(id = R.string.component_state_enabled),
  trailing = OdsSwitchTrailing(checked = enabled)

app/src/main/res/values/strings.xml

@@ -8,7 +8,7 @@
  ~ */
  -->
 
-<resources xmlns:tools="http://schemas.android.com/tools">
+<resources>
  <string name="app_name">Orange Design System</string>
  <string name="code_implementation">Code implementation</string>
 
@@ -138,6 +138,7 @@
  <string name="component_button_style_functional">Functional</string>
  <string name="component_button_style_functional_positive">Positive</string>
  <string name="component_button_style_functional_negative">Negative</string>
+ <string name="component_button_text_toggle_group">Toggle text buttons group</string>
 
  <!-- Components Buttons: Icons -->
  <string name="component_buttons_icons">Buttons: Icons</string>
@@ -148,7 +149,6 @@
  <string name="component_button_icon_search_desc">Search</string>
  <string name="component_button_icon_toggle">Toggle icon button</string>
  <string name="component_button_icon_toggle_group">Toggle icon button group</string>
- <string name="component_button_text_toggle_group" tools:ignore="ExtraTranslation">Toggle text buttons group</string>
  <string name="component_button_icon_toggle_favorite_icon_desc">Add to favorites</string>
  <string name="component_button_icon_toggle_count">Toggle count</string>
  <string name="component_button_icon_toggle_remove">Remove toggle</string>

lib/src/main/java/com/orange/ods/compose/component/button/OdsTextButton.kt

@@ -20,6 +20,7 @@ import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import com.orange.ods.compose.component.OdsComposable
 import com.orange.ods.compose.component.utilities.EnumPreviewParameterProvider
@@ -41,6 +42,8 @@ enum class OdsTextButtonStyle {
  Default, Primary
 }
 
+public const val MAX_VALUE: Int = 2147483647
+
 /**
  * <a href="https://system.design.orange.com/0c1af118d/p/06a393-buttons/b/79b091" target="_blank">ODS Buttons</a>.
  *
@@ -65,6 +68,8 @@ fun OdsTextButton(
  modifier: Modifier = Modifier,
  icon: Painter? = null,
  enabled: Boolean = true,
+ maxLines: Int? = null,
+ overflow: TextOverflow? = null,
  style: OdsTextButtonStyle = OdsTextButtonStyle.Default,
  displaySurface: OdsDisplaySurface = OdsDisplaySurface.Default
 ) {
@@ -90,7 +95,10 @@ fun OdsTextButton(
  )
  ) {
  icon?.let { ButtonIcon(it) }
- Text(text = text.uppercase(), style = OdsTheme.typography.button)
+ Text(
+ text = text.uppercase(), style = OdsTheme.typography.button, maxLines = maxLines ?: MAX_VALUE,
+ overflow = overflow ?: TextOverflow.Clip
+ )
  }
  }
 }
@@ -119,7 +127,7 @@ private fun OdsColors.buttonTextDisabledColor(displaySurface: OdsDisplaySurface)
 @UiModePreviews.Button
 @Composable
 private fun PreviewOdsTextButton(@PreviewParameter(OdsTextButtonPreviewParameterProvider::class) style: OdsTextButtonStyle) = Preview {
- OdsTextButton(text = "Text", onClick = {}, style = style)
+ OdsTextButton(text = "Text", maxLines = 1, overflow = TextOverflow.Clip, onClick = {}, style = style)
 }
 
 private class OdsTextButtonPreviewParameterProvider : EnumPreviewParameterProvider(OdsTextButtonStyle::class)

lib/src/main/java/com/orange/ods/compose/component/button/OdsTextToggleButtonsRow.kt

@@ -13,6 +13,7 @@ package com.orange.ods.compose.component.button
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
@@ -26,6 +27,7 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import com.orange.ods.compose.component.OdsComposable
 import com.orange.ods.compose.component.utilities.Preview
@@ -65,13 +67,20 @@ fun OdsTextToggleButtonsRow(
  )
  ) {
  textToggleButtons.forEachIndexed { index, textToggleButton ->
- TextToggleButtonsRowItem(
- index = index,
- textToggleButton = textToggleButton,
- selected = selectedIndex == index,
- displaySurface = displaySurface
- ) { clickedButtonIndex ->
- onSelectedIndexChange(clickedButtonIndex)
+ val backgroundAlpha by animateFloatAsState(if (selectedIndex == index) 0.12f else 0f)
+ Column(
+ modifier = Modifier
+ .weight(1f)
+ .background(color = buttonToggleBackgroundColor(displaySurface).copy(alpha = backgroundAlpha))
+ ) {
+ TextToggleButtonsRowItem(
+ index = index,
+ textToggleButton = textToggleButton,
+ selected = selectedIndex == index,
+ displaySurface = displaySurface
+ ) { clickedButtonIndex ->
+ onSelectedIndexChange(clickedButtonIndex)
+ }
  }
  if (index < textToggleButtons.size) {
  Divider(
@@ -98,13 +107,11 @@ private fun TextToggleButtonsRowItem(
  displaySurface: OdsDisplaySurface,
  onClick: (Int) -> Unit
 ) {
- val backgroundAlpha by animateFloatAsState(if (selected) 0.12f else 0f)
-
  OdsTextButton(
- modifier = Modifier
- .background(color = buttonToggleBackgroundColor(displaySurface).copy(alpha = backgroundAlpha)),
  text = textToggleButton.text,
  enabled = textToggleButton.enabled,
+ maxLines = 1,
+ overflow = TextOverflow.Ellipsis,
  displaySurface = displaySurface,
  style = if (selected) OdsTextButtonStyle.Primary else OdsTextButtonStyle.Default,
  onClick = { onClick(index) }
@@ -127,7 +134,6 @@ private fun buttonToggleBorderColor(displaySurface: OdsDisplaySurface) =
  OdsDisplaySurface.Light -> OdsTheme.lightThemeColors.onSurface
  }.copy(alpha = 0.12f)
 
-
 @UiModePreviews.Default
 @Composable
 private fun PreviewOdsTextToggleButtonsGroupRow() = Preview {