Skip to content

Commit d50b3c6

Browse files
paulineapaulinea
committed
Update navigation bar component to the last version with new tokens
1 parent 7986752 commit d50b3c6

File tree

27 files changed

+601
-81
lines changed

27 files changed

+601
-81
lines changed

‎app/src/main/java/com/orange/ouds/app/ui/BottomBar.kt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ import androidx.compose.ui.tooling.preview.PreviewLightDark
4242
import com.orange.ouds.app.R
4343
import com.orange.ouds.core.component.OudsNavigationBar
4444
import com.orange.ouds.core.component.OudsNavigationBarItem
45+
import com.orange.ouds.core.component.OudsNavigationBarItemIcon
4546
import com.orange.ouds.core.theme.OudsTheme
4647
import com.orange.ouds.core.utilities.OudsPreview
4748

@@ -62,7 +63,7 @@ fun BottomBar(currentRoute: String, navigateToRoute: (String) -> Unit, visible:
6263
OudsNavigationBarItem(
6364
modifier = Modifier.weight(1f),
6465
selected = currentRoute == item.route,
65-
icon = OudsNavigationBarItem.Icon(painter = painterResource(item.iconRes), ""),
66+
icon = OudsNavigationBarItemIcon(painter = painterResource(item.iconRes), ""),
6667
label = stringResource(item.titleRes),
6768
onClick = { navigateToRoute(item.route) }
6869
)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,8 @@ sealed class Component(
103103

104104
data object NavigationBar : Component(
105105
R.string.app_components_navigationBar_label,
106-
LightDarkResourceId(R.drawable.il_components_empty, R.drawable.il_components_empty),
107106
R.string.app_components_navigationBar_description_text,
107+
{ LinkIllustration() },
108108
demoScreen = { NavigationBarDemoScreen() }
109109
)
110110

‎app/src/main/java/com/orange/ouds/app/ui/components/navigationbar/NavigationBarDemoScreen.kt‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import android.content.Context
1616
import androidx.annotation.DrawableRes
1717
import androidx.annotation.StringRes
1818
import androidx.compose.foundation.layout.PaddingValues
19-
import androidx.compose.foundation.layout.padding
2019
import androidx.compose.runtime.Composable
2120
import androidx.compose.runtime.remember
2221
import androidx.compose.ui.Modifier
@@ -31,11 +30,12 @@ import com.orange.ouds.app.ui.components.navigationbar.NavigationBarDemoState.Co
3130
import com.orange.ouds.app.ui.components.navigationbar.NavigationBarDemoState.Companion.MinNavigationBarItemCount
3231
import com.orange.ouds.app.ui.components.painterArgument
3332
import com.orange.ouds.app.ui.utilities.Code
34-
import com.orange.ouds.app.ui.utilities.composable.CustomizationChoiceChips
33+
import com.orange.ouds.app.ui.utilities.composable.CustomizationFilterChips
3534
import com.orange.ouds.app.ui.utilities.composable.CustomizationSwitchItem
3635
import com.orange.ouds.app.ui.utilities.composable.DemoScreen
3736
import com.orange.ouds.core.component.OudsNavigationBar
3837
import com.orange.ouds.core.component.OudsNavigationBarItem
38+
import com.orange.ouds.core.component.OudsNavigationBarItemIcon
3939
import com.orange.ouds.core.theme.OudsTheme
4040
import com.orange.ouds.core.utilities.OudsPreview
4141

@@ -56,10 +56,10 @@ fun NavigationBarDemoScreen() {
5656
private fun NavigationBarDemoBottomSheetContent(state: NavigationBarDemoState) {
5757
with(state) {
5858
val itemCountOptions = remember { (MinNavigationBarItemCount..MaxNavigationBarItemCount).toList() }
59-
CustomizationChoiceChips(
60-
modifier = Modifier.padding(top = OudsTheme.spaces.fixed.medium),
59+
CustomizationFilterChips(
60+
applyTopPadding = true,
6161
label = stringResource(R.string.app_components_navigationBar_itemCount_label),
62-
chipsLabels = itemCountOptions.map { it.toString() },
62+
chipLabels = itemCountOptions.map { it.toString() },
6363
selectedChipIndex = itemCountOptions.indexOf(itemCount),
6464
onSelectionChange = { id -> itemCount = itemCountOptions[id] }
6565
)
@@ -96,7 +96,7 @@ private fun NavigationBarDemoContent(state: NavigationBarDemoState) {
9696
selected = selectedItemId == index,
9797
onClick = { selectedItemId = index },
9898
label = label,
99-
icon = OudsNavigationBarItem.Icon(
99+
icon = OudsNavigationBarItemIcon(
100100
painter = painterResource(id = item.iconRes),
101101
contentDescription = label
102102
),
@@ -109,15 +109,15 @@ private fun NavigationBarDemoContent(state: NavigationBarDemoState) {
109109
}
110110

111111
private fun Code.Builder.navigationBarDemoCodeSnippet(state: NavigationBarDemoState, context: Context) {
112-
functionCall(OudsNavigationBarItem::class.simpleName.orEmpty()) {
112+
functionCall("OudsNavigationBar") {
113113
functionCallArgument("items", "listOf") {
114114
NavigationBarItem.entries.take(state.itemCount).forEach { item ->
115115
val label = context.resources.getString(item.labelRes)
116-
functionCallArgument(null, OudsNavigationBarItem::class.simpleName.orEmpty()) {
116+
functionCallArgument(null, "OudsNavigationBarItem") {
117117
typedArgument("selected", item == NavigationBarItem.Home)
118118
lambdaArgument("onClick", {})
119119
labelArgument(label)
120-
functionCallArgument(null, OudsNavigationBarItem.Icon::class.simpleName.orEmpty()) {
120+
functionCallArgument(null, OudsNavigationBarItemIcon::class.simpleName.orEmpty()) {
121121
painterArgument(id = item.iconRes)
122122
}
123123
}

‎app/src/main/res/drawable/il_components_empty.xml‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎core/src/main/java/com/orange/ouds/core/component/OudsNavigationBar.kt‎

Lines changed: 91 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,20 @@ import androidx.compose.material.icons.filled.Email
3636
import androidx.compose.material.icons.filled.Settings
3737
import androidx.compose.material.icons.filled.Star
3838
import androidx.compose.material3.BadgedBox
39+
import androidx.compose.material3.LocalRippleConfiguration
3940
import androidx.compose.material3.NavigationBar
4041
import androidx.compose.material3.NavigationBarDefaults
4142
import androidx.compose.material3.NavigationBarItem
4243
import androidx.compose.material3.NavigationBarItemDefaults
4344
import androidx.compose.material3.Text
4445
import androidx.compose.runtime.Composable
46+
import androidx.compose.runtime.CompositionLocalProvider
4547
import androidx.compose.runtime.getValue
4648
import androidx.compose.runtime.remember
4749
import androidx.compose.ui.Modifier
50+
import androidx.compose.ui.draw.drawBehind
4851
import androidx.compose.ui.focus.focusProperties
52+
import androidx.compose.ui.geometry.Offset
4953
import androidx.compose.ui.graphics.Color
5054
import androidx.compose.ui.graphics.ImageBitmap
5155
import androidx.compose.ui.graphics.painter.Painter
@@ -61,6 +65,7 @@ import com.orange.ouds.core.component.content.OudsComponentContent
6165
import com.orange.ouds.core.component.content.OudsComponentIcon
6266
import com.orange.ouds.core.extensions.InteractionState
6367
import com.orange.ouds.core.extensions.collectInteractionStateAsState
68+
import com.orange.ouds.core.extensions.value
6469
import com.orange.ouds.core.theme.OudsTheme
6570
import com.orange.ouds.core.theme.value
6671
import com.orange.ouds.core.utilities.OudsPreview
@@ -90,9 +95,19 @@ fun OudsNavigationBar(
9095
windowInsets: WindowInsets = NavigationBarDefaults.windowInsets,
9196
content: @Composable RowScope.() -> Unit
9297
) {
93-
with(OudsTheme.componentsTokens.navigationBar) {
98+
with(OudsTheme.componentsTokens.bar) {
99+
val topBorderColor = colorBorder.value
94100
NavigationBar(
95-
modifier = modifier.focusProperties { canFocus = false },
101+
modifier = modifier
102+
.focusProperties { canFocus = false }
103+
.drawBehind {
104+
drawLine(
105+
color = topBorderColor,
106+
start = Offset(x = 0f, y = 0f),
107+
end = Offset(x = size.width, y = 0f),
108+
strokeWidth = 1.dp.toPx()
109+
)
110+
},
96111
containerColor = colorBg.value,
97112
contentColor = colorContentUnselectedEnabled.value,
98113
windowInsets = windowInsets,
@@ -138,7 +153,7 @@ fun RowScope.OudsNavigationBarItem(
138153
@Suppress("NAME_SHADOWING") val interactionSource = interactionSource ?: remember { MutableInteractionSource() }
139154
val interactionState by interactionSource.collectInteractionStateAsState()
140155
val state = getNavigationBarItemState(enabled = enabled, interactionState = interactionState)
141-
with(OudsTheme.componentsTokens.navigationBar) {
156+
with(OudsTheme.componentsTokens.bar) {
142157
val selectedContentColor = contentColor(state = state, selected = true)
143158
val unselectedContentColor = contentColor(state = state, selected = false)
144159
val disabledContentColor = contentColor(state = OudsNavigationBarItemState.Disabled, selected = false)
@@ -152,24 +167,24 @@ fun RowScope.OudsNavigationBarItem(
152167
role = Role.Tab
153168
)
154169
) {
155-
val (itemRef, topIndicatorRef) = createRefs()
170+
val (itemRef, topIndicatorRef, topBorder) = createRefs()
156171

157172
// Top active indicator: visual alternative for selected item (a11y)
158-
val topIndicatorColor = contentColor(state = state, selected = selected)
159-
val topIndicatorOpacityColor = topIndicatorColor.copy(alpha = topIndicatorColor.alpha * topActiveIndicatorOpacity.value)
173+
val topIndicatorColor = topIndicatorColor(state = state)
174+
val topIndicatorOpacityColor = topIndicatorColor.copy(alpha = topIndicatorColor.alpha * opacityTopActiveIndicator.value)
160175
val topIndicatorShape = RoundedCornerShape(
161176
topStart = 0.dp,
162177
topEnd = 0.dp,
163-
bottomStart = topActiveIndicatorBorderRadiusBottom.value,
164-
bottomEnd = topActiveIndicatorBorderRadiusBottom.value
178+
bottomStart = borderRadiusTopActiveIndicator.value,
179+
bottomEnd = borderRadiusTopActiveIndicator.value
165180
)
166181
this@OudsNavigationBarItem.AnimatedVisibility(
167182
modifier = Modifier.constrainAs(topIndicatorRef) {
168183
top.linkTo(parent.top)
169184
start.linkTo(parent.start)
170185
end.linkTo(parent.end)
171-
height = Dimension.value(topActiveIndicatorSizeHeight.dp)
172-
width = Dimension.value(topActiveIndicatorSizeWidth.dp)
186+
height = Dimension.value(sizeHeightTopActiveIndicator.dp)
187+
width = Dimension.value(sizeWidthTopActiveIndicator.dp)
173188
},
174189
visible = selected || state == OudsNavigationBarItemState.Hovered,
175190
enter = fadeIn() + slideInVertically { -it * 2 },
@@ -178,46 +193,48 @@ fun RowScope.OudsNavigationBarItem(
178193
Box(modifier = Modifier.background(color = topIndicatorOpacityColor, shape = topIndicatorShape))
179194
}
180195

181-
this@OudsNavigationBarItem.NavigationBarItem(
182-
selected = selected,
183-
onClick = onClick,
184-
icon = {
185-
if (badge != null) {
186-
BadgedBox(
187-
badge = { badge.Content() },
188-
) {
196+
CompositionLocalProvider(LocalRippleConfiguration provides null) {
197+
this@OudsNavigationBarItem.NavigationBarItem(
198+
selected = selected,
199+
onClick = onClick,
200+
icon = {
201+
if (badge != null) {
202+
BadgedBox(
203+
badge = { badge.Content() },
204+
) {
205+
icon.Content()
206+
}
207+
} else {
189208
icon.Content()
190209
}
191-
} else {
192-
icon.Content()
193-
}
194-
},
195-
modifier = Modifier.constrainAs(itemRef) {
196-
centerTo(parent)
197-
},
198-
enabled = enabled,
199-
label = label?.let {
200-
{
201-
Text(
202-
text = it,
203-
maxLines = 1,
204-
overflow = TextOverflow.Ellipsis,
205-
style = OudsTheme.typography.label.default.small
206-
)
207-
}
208-
},
209-
alwaysShowLabel = alwaysShowLabel,
210-
colors = NavigationBarItemDefaults.colors(
211-
selectedIconColor = selectedContentColor,
212-
selectedTextColor = selectedContentColor,
213-
indicatorColor = materialIndicatorColor(state = state, selected = selected),
214-
unselectedIconColor = unselectedContentColor,
215-
unselectedTextColor = unselectedContentColor,
216-
disabledIconColor = disabledContentColor,
217-
disabledTextColor = disabledContentColor,
218-
),
219-
interactionSource = interactionSource
220-
)
210+
},
211+
modifier = Modifier.constrainAs(itemRef) {
212+
centerTo(parent)
213+
},
214+
enabled = enabled,
215+
label = label?.let {
216+
{
217+
Text(
218+
text = it,
219+
maxLines = 1,
220+
overflow = TextOverflow.Ellipsis,
221+
style = OudsTheme.typography.label.moderate.small
222+
)
223+
}
224+
},
225+
alwaysShowLabel = alwaysShowLabel,
226+
colors = NavigationBarItemDefaults.colors(
227+
selectedIconColor = selectedContentColor,
228+
selectedTextColor = selectedContentColor,
229+
indicatorColor = materialIndicatorColor(state = state, selected = selected),
230+
unselectedIconColor = unselectedContentColor,
231+
unselectedTextColor = unselectedContentColor,
232+
disabledIconColor = disabledContentColor,
233+
disabledTextColor = disabledContentColor,
234+
),
235+
interactionSource = interactionSource
236+
)
237+
}
221238
}
222239
}
223240
}
@@ -237,26 +254,39 @@ private fun getNavigationBarItemState(enabled: Boolean, interactionState: Intera
237254

238255
@Composable
239256
private fun contentColor(state: OudsNavigationBarItemState, selected: Boolean): Color {
240-
return with(OudsTheme.componentsTokens.navigationBar) {
257+
return with(OudsTheme.componentsTokens.bar) {
241258
when (state) {
242-
OudsNavigationBarItemState.Enabled -> if (selected) colorContentSelectedEnabled else colorContentUnselectedEnabled
243-
OudsNavigationBarItemState.Hovered -> if (selected) colorContentSelectedHover else colorContentUnselectedHover
244-
OudsNavigationBarItemState.Pressed -> if (selected) colorContentSelectedPressed else colorContentUnselectedPressed
245-
OudsNavigationBarItemState.Disabled -> colorContentUnselectedDisabled
246-
OudsNavigationBarItemState.Focused -> if (selected) colorContentSelectedFocus else colorContentUnselectedFocus
247-
}.value
259+
OudsNavigationBarItemState.Enabled -> if (selected) colorContentSelectedEnabled.value else colorContentUnselectedEnabled.value
260+
OudsNavigationBarItemState.Hovered -> if (selected) colorContentSelectedHover.value else colorContentUnselectedHover.value
261+
OudsNavigationBarItemState.Pressed -> if (selected) colorContentSelectedPressed.value else colorContentUnselectedPressed.value
262+
OudsNavigationBarItemState.Disabled -> OudsTheme.colorScheme.action.disabled
263+
OudsNavigationBarItemState.Focused -> if (selected) colorContentSelectedFocus.value else colorContentUnselectedFocus.value
264+
}
248265
}
249266
}
250267

251268
@Composable
252269
private fun materialIndicatorColor(state: OudsNavigationBarItemState, selected: Boolean): Color {
253-
return with(OudsTheme.componentsTokens.navigationBar) {
270+
return with(OudsTheme.componentsTokens.bar) {
271+
when (state) {
272+
OudsNavigationBarItemState.Enabled -> if (selected) colorMaterialActiveIndicatorSelectedEnabled.value else OudsTheme.colorScheme.opacity.transparent
273+
OudsNavigationBarItemState.Hovered -> if (selected) colorMaterialActiveIndicatorSelectedHover.value else colorMaterialActiveIndicatorUnselectedHover.value
274+
OudsNavigationBarItemState.Pressed -> if (selected) colorMaterialActiveIndicatorSelectedPressed.value else colorMaterialActiveIndicatorUnselectedPressed.value
275+
OudsNavigationBarItemState.Disabled -> OudsTheme.colorScheme.opacity.transparent
276+
OudsNavigationBarItemState.Focused -> if (selected) colorMaterialActiveIndicatorSelectedFocus.value else colorMaterialActiveIndicatorUnselectedFocus.value
277+
}
278+
}
279+
}
280+
281+
@Composable
282+
private fun topIndicatorColor(state: OudsNavigationBarItemState): Color {
283+
return with(OudsTheme.componentsTokens.bar) {
254284
when (state) {
255-
OudsNavigationBarItemState.Enabled -> if (selected) materialActiveIndicatorColorBgSelectedEnabled.value else OudsTheme.colorScheme.opacity.transparent
256-
OudsNavigationBarItemState.Hovered -> if (selected) materialActiveIndicatorColorBgSelectedHover.value else materialActiveIndicatorColorBgUnselectedHover.value
257-
OudsNavigationBarItemState.Pressed -> if (selected) materialActiveIndicatorColorBgSelectedPressed.value else materialActiveIndicatorColorBgUnselectedPressed.value
285+
OudsNavigationBarItemState.Enabled -> colorTopActiveIndicatorSelectedEnabled.value
286+
OudsNavigationBarItemState.Hovered -> colorTopActiveIndicatorSelectedHover.value
287+
OudsNavigationBarItemState.Pressed -> colorTopActiveIndicatorSelectedPressed.value
258288
OudsNavigationBarItemState.Disabled -> OudsTheme.colorScheme.opacity.transparent
259-
OudsNavigationBarItemState.Focused -> if (selected) materialActiveIndicatorColorBgSelectedFocus.value else materialActiveIndicatorColorBgUnselectedFocus.value
289+
OudsNavigationBarItemState.Focused -> colorTopActiveIndicatorSelectedFocus.value
260290
}
261291
}
262292
}
@@ -417,7 +447,7 @@ internal fun PreviewOudsNavigationBarItem(
417447
OudsNavigationBarItem(
418448
modifier = Modifier
419449
.size(width = 80.dp, height = 64.dp)
420-
.background(OudsTheme.componentsTokens.navigationBar.colorBg.value),
450+
.background(OudsTheme.componentsTokens.bar.colorBg.value),
421451
selected = selected,
422452
onClick = {},
423453
icon = OudsNavigationBarItemIcon(imageVector = Icons.Default.Star, contentDescription = ""),

‎core/src/main/java/com/orange/ouds/core/extensions/OudsLightDarkColorTokenExt.kt‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/*
2+
* Software Name: OUDS Android
3+
* SPDX-FileCopyrightText: Copyright (c) Orange SA
4+
* SPDX-License-Identifier: MIT
5+
*
6+
* This software is distributed under the MIT license,
7+
* the text of which is available at https://opensource.org/license/MIT/
8+
* or see the "LICENSE" file for more details.
9+
*
10+
* Software description: Android library of reusable graphical components
11+
*/
12+
13+
package com.orange.ouds.core.extensions
14+
15+
import androidx.compose.runtime.Composable
16+
import androidx.compose.runtime.ReadOnlyComposable
17+
import androidx.compose.ui.graphics.Color
18+
import com.orange.ouds.core.theme.isOudsInDarkTheme
19+
import com.orange.ouds.theme.tokens.components.OudsLightDarkColorToken
20+
21+
val OudsLightDarkColorToken.value: Color
22+
@ReadOnlyComposable
23+
@Composable
24+
get() = if (isOudsInDarkTheme()) dark else light

0 commit comments

Comments
 (0)