Skip to content

Commit

Permalink
Remove skeleton state
Browse files Browse the repository at this point in the history
  • Loading branch information
@paulinea
paulinea committed Dec 31, 2024
1 parent 5a27d2b commit fdfe5e0
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 81 deletions.
13 changes: 0 additions & 13 deletions app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,6 @@ fun LinkDemoScreen() = DemoScreen(rememberLinkDemoState()) {
label = stringResource(R.string.app_common_enabled_label),
checked = enabled,
onCheckedChange = { enabled = it },
enabled = style == OudsLink.Style.Default
)
val styles = remember { listOf(OudsLink.Style.Default, OudsLink.Style.Skeleton) }
CustomizationChoiceChipsColumn(
modifier = Modifier.padding(top = OudsSpaceKeyToken.Fixed.Medium.value),
label = stringResource(R.string.app_components_common_style_label),
chipsLabels = styles.map { it::class.simpleName.orEmpty() },
selectedChipIndex = styles.indexOf(style),
onSelectionChange = { id -> style = styles[id] }
)
val sizes = remember { listOf(OudsLink.Size.Small, OudsLink.Size.Medium) }
CustomizationChoiceChipsColumn(
Expand Down Expand Up @@ -108,7 +99,6 @@ private fun LinkDemo(state: LinkDemoState) {
icon = null,
onClick = {},
enabled = enabled,
style = style,
size = size
)
}
Expand All @@ -118,7 +108,6 @@ private fun LinkDemo(state: LinkDemoState) {
icon = OudsLink.Icon(painterResource(id = R.drawable.ic_heart)),
onClick = {},
enabled = enabled,
style = style,
size = size
)
}
Expand All @@ -128,7 +117,6 @@ private fun LinkDemo(state: LinkDemoState) {
arrow = OudsLink.Arrow.Back,
onClick = {},
enabled = enabled,
style = style,
size = size
)
}
Expand All @@ -138,7 +126,6 @@ private fun LinkDemo(state: LinkDemoState) {
arrow = OudsLink.Arrow.Next,
onClick = {},
enabled = enabled,
style = style,
size = size
)
}
Expand Down
11 changes: 2 additions & 9 deletions app/src/main/java/com/orange/ouds/app/ui/components/link/LinkDemoState.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,14 @@ import com.orange.ouds.core.component.link.OudsLinkDefaults
@Composable
fun rememberLinkDemoState(
enabled: Boolean = true,
style: OudsLink.Style = OudsLinkDefaults.Style,
size: OudsLink.Size = OudsLinkDefaults.Size,
layout: LinkDemoState.Layout = LinkDemoState.Layout.TextOnly
) = rememberSaveable(enabled, style, size, layout, saver = LinkDemoState.Saver) {
LinkDemoState(enabled, style, size, layout)
) = rememberSaveable(enabled, size, layout, saver = LinkDemoState.Saver) {
LinkDemoState(enabled, size, layout)
}

class LinkDemoState(
enabled: Boolean,
style: OudsLink.Style,
size: OudsLink.Size,
layout: Layout
) {
Expand All @@ -44,22 +42,19 @@ class LinkDemoState(

val Saver = run {
val enabledKey = "enabled"
val styleKey = "style"
val sizeKey = "size"
val layoutKey = "layout"
mapSaver(
save = { state ->
mapOf(
enabledKey to state.enabled,
styleKey to state.style,
sizeKey to state.size,
layoutKey to state.layout
)
},
restore = { map ->
LinkDemoState(
map[enabledKey] as Boolean,
map[styleKey] as OudsLink.Style,
map[sizeKey] as OudsLink.Size,
map[layoutKey] as Layout
)
Expand All @@ -70,8 +65,6 @@ class LinkDemoState(

var enabled: Boolean by mutableStateOf(enabled)

var style: OudsLink.Style by mutableStateOf(style)

var size: OudsLink.Size by mutableStateOf(size)

var layout: Layout by mutableStateOf(layout)
Expand Down
93 changes: 34 additions & 59 deletions core/src/main/java/com/orange/ouds/core/component/link/OudsLink.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@

package com.orange.ouds.core.component.link

import android.os.Parcelable
import androidx.compose.foundation.background
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.isSystemInDarkTheme
Expand Down Expand Up @@ -65,10 +64,17 @@ import com.orange.ouds.theme.outerBorder
import com.orange.ouds.theme.tokens.OudsBorderKeyToken
import com.orange.ouds.theme.tokens.OudsColorKeyToken
import com.orange.ouds.theme.tokens.OudsTypographyKeyToken
import kotlinx.parcelize.Parcelize

/**
* An OUDS link which displays a text and an optional icon.
*
* @param text Text displayed in the link.
* @param icon Icon displayed in the link.
* @param onClick Callback invoked when the link is clicked.
* @param modifier [Modifier] applied to the link.
* @param size Size of the button.
* @param enabled Controls the enabled state of the link. When `false`, the link will not be clickable.
* @param onColoredBackground Controls the style of the button which changes to monochrome when it is displayed on a colored background.
*/
@Composable
fun OudsLink(
Expand All @@ -77,7 +83,6 @@ fun OudsLink(
onClick: () -> Unit,
modifier: Modifier = Modifier,
size: OudsLink.Size = OudsLinkDefaults.Size,
style: OudsLink.Style = OudsLinkDefaults.Style,
enabled: Boolean = true,
onColoredBackground: Boolean = false
) {
Expand All @@ -88,14 +93,23 @@ fun OudsLink(
onClick = onClick,
modifier = modifier,
size = size,
style = style,
enabled = enabled,
onColoredBackground = onColoredBackground
)
}

/**
* An OUDS link which displays an [arrow] before ([OudsLink.Arrow.Back]) or after ([OudsLink.Arrow.Next]) a text.
*
* @param text Text displayed in the link.
* @param arrow Arrow displayed in the link.
* When [OudsLink.Arrow.Back], the arrow is displayed before the text.
* When [OudsLink.Arrow.Next], the arrow is displayed after the text.
* @param onClick Callback invoked when the link is clicked.
* @param modifier [Modifier] applied to the link.
* @param size Size of the button.
* @param enabled Controls the enabled state of the link. When `false`, the link will not be clickable.
* @param onColoredBackground Controls the style of the button which changes to monochrome when it is displayed on a colored background.
*/
@Composable
fun OudsLink(
Expand All @@ -104,7 +118,6 @@ fun OudsLink(
onClick: () -> Unit,
modifier: Modifier = Modifier,
size: OudsLink.Size = OudsLinkDefaults.Size,
style: OudsLink.Style = OudsLinkDefaults.Style,
enabled: Boolean = true,
onColoredBackground: Boolean = false
) {
Expand All @@ -115,7 +128,6 @@ fun OudsLink(
onClick = onClick,
modifier = modifier,
size = size,
style = style,
enabled = enabled,
onColoredBackground = onColoredBackground
)
Expand All @@ -130,15 +142,14 @@ private fun OudsLink(
onClick: () -> Unit,
modifier: Modifier = Modifier,
size: OudsLink.Size = OudsLinkDefaults.Size,
style: OudsLink.Style = OudsLinkDefaults.Style,
enabled: Boolean = true,
onColoredBackground: Boolean = false,
previewState: OudsLink.State? = null
) {
val linkTokens = OudsTheme.componentsTokens.link
val interactionSource = remember { MutableInteractionSource() }
val interactionState by interactionSource.collectInteractionStateAsState()
val state = previewState.orElse { rememberOudsLinkState(enabled = enabled, style = style, interactionState = interactionState) }
val state = previewState.orElse { rememberOudsLinkState(enabled = enabled, interactionState = interactionState) }
val isTextOnly = icon == null && arrow == null

val minWidth: Dp
Expand All @@ -161,7 +172,7 @@ private fun OudsLink(
.widthIn(min = minWidth)
.heightIn(min = minHeight)
.outerBorder(state = state),
enabled = state !in listOf(OudsLink.State.Disabled, OudsLink.State.Skeleton),
enabled = state != OudsLink.State.Disabled,
shape = RectangleShape,
colors = buttonColors(linkState = state, onColoredBackground = onColoredBackground),
elevation = null,
Expand Down Expand Up @@ -230,18 +241,14 @@ private fun OudsLink(
@Composable
private fun rememberOudsLinkState(
enabled: Boolean,
style: OudsLink.Style,
interactionState: InteractionState
): OudsLink.State = remember(enabled, style, interactionState) {
when (style) {
OudsLink.Style.Default -> when {
!enabled -> OudsLink.State.Disabled
interactionState == InteractionState.Hovered -> OudsLink.State.Hovered
interactionState == InteractionState.Pressed -> OudsLink.State.Pressed
interactionState == InteractionState.Focused -> OudsLink.State.Focused
else -> OudsLink.State.Enabled
}
OudsLink.Style.Skeleton -> OudsLink.State.Skeleton
): OudsLink.State = remember(enabled, interactionState) {
when {
!enabled -> OudsLink.State.Disabled
interactionState == InteractionState.Hovered -> OudsLink.State.Hovered
interactionState == InteractionState.Pressed -> OudsLink.State.Pressed
interactionState == InteractionState.Focused -> OudsLink.State.Focused
else -> OudsLink.State.Enabled
}
}

Expand All @@ -264,23 +271,17 @@ private fun Modifier.outerBorder(state: OudsLink.State): Modifier {
private fun buttonColors(linkState: OudsLink.State, onColoredBackground: Boolean): ButtonColors {
with(OudsTheme.componentsTokens.link) {
return ButtonDefaults.buttonColors(
containerColor = containerColor(state = linkState),
containerColor = containerColor,
contentColor = contentColor(state = linkState, onColoredBackground = onColoredBackground),
disabledContainerColor = containerColor(state = linkState),
disabledContainerColor = containerColor,
disabledContentColor = contentColor(state = linkState, onColoredBackground = onColoredBackground)
)
}
}

@Composable
private fun containerColor(state: OudsLink.State): Color {
return if (state == OudsLink.State.Skeleton) {
OudsTheme.componentsTokens.skeleton.colorBg
} else {
OudsColorKeyToken.Opacity.Transparent
}.value
}

private val containerColor: Color
@Composable
get() = OudsColorKeyToken.Opacity.Transparent.value

@Composable
private fun contentColor(state: OudsLink.State, onColoredBackground: Boolean): Color {
Expand All @@ -292,7 +293,6 @@ private fun contentColor(state: OudsLink.State, onColoredBackground: Boolean): C
OudsLink.State.Hovered -> colorContentHoverMono
OudsLink.State.Pressed -> colorContentPressedMono
OudsLink.State.Disabled -> colorContentDisabledMono
OudsLink.State.Skeleton -> OudsColorKeyToken.Opacity.Transparent
}
} else {
when (state) {
Expand All @@ -301,7 +301,6 @@ private fun contentColor(state: OudsLink.State, onColoredBackground: Boolean): C
OudsLink.State.Hovered -> colorContentHover
OudsLink.State.Pressed -> colorContentPressed
OudsLink.State.Disabled -> OudsColorKeyToken.Action.Disabled
OudsLink.State.Skeleton -> OudsColorKeyToken.Opacity.Transparent
}
}
}.value
Expand All @@ -319,7 +318,6 @@ private fun arrowColor(state: OudsLink.State, onColoredBackground: Boolean): Col
OudsLink.State.Hovered -> colorArrowHover
OudsLink.State.Pressed -> colorArrowPressed
OudsLink.State.Disabled -> OudsColorKeyToken.Action.Disabled
OudsLink.State.Skeleton -> OudsColorKeyToken.Opacity.Transparent
}.value
}
}
Expand All @@ -336,10 +334,6 @@ object OudsLinkDefaults {
*/
val Size = OudsLink.Size.Medium

/**
* The default style.
*/
val Style = OudsLink.Style.Default
}

/**
Expand Down Expand Up @@ -412,26 +406,8 @@ object OudsLink {
}
}

/**
* Represents the different styles of an OUDS link.
*/
sealed class Style : Parcelable {

/**
* The link displays a text and/or an icon and supports user interactions if it is enabled.
*/
@Parcelize
data object Default : Style()

/**
* The link displays a skeleton.
*/
@Parcelize
data object Skeleton : Style()
}

internal enum class State {
Enabled, Hovered, Pressed, Disabled, Focused, Skeleton
Enabled, Hovered, Pressed, Disabled, Focused
}
}

Expand Down Expand Up @@ -487,8 +463,7 @@ internal data class OudsLinkPreviewParameter(
OudsLink.State.Hovered,
OudsLink.State.Pressed,
OudsLink.State.Disabled,
OudsLink.State.Focused,
OudsLink.State.Skeleton
OudsLink.State.Focused
)
)

Expand Down

0 comments on commit fdfe5e0

Please sign in to comment.