mirror of
https://github.com/bitwarden/android.git
synced 2026-03-21 22:00:42 -05:00
PM-18388 add hyphens on segmented button labels (#4777)
This commit is contained in:
@@ -3,10 +3,12 @@ package com.x8bit.bitwarden.ui.platform.components.segment
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.IntrinsicSize
|
||||
import androidx.compose.foundation.layout.WindowInsets
|
||||
import androidx.compose.foundation.layout.WindowInsetsSides
|
||||
import androidx.compose.foundation.layout.displayCutout
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.navigationBars
|
||||
import androidx.compose.foundation.layout.only
|
||||
import androidx.compose.foundation.layout.padding
|
||||
@@ -24,7 +26,9 @@ import androidx.compose.runtime.setValue
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.layout.onGloballyPositioned
|
||||
import androidx.compose.ui.platform.LocalConfiguration
|
||||
import androidx.compose.ui.platform.LocalDensity
|
||||
import androidx.compose.ui.text.style.Hyphens
|
||||
import androidx.compose.ui.unit.Density
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.unit.dp
|
||||
@@ -34,6 +38,8 @@ import com.x8bit.bitwarden.ui.platform.components.segment.color.bitwardenSegment
|
||||
import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
|
||||
import kotlinx.collections.immutable.ImmutableList
|
||||
|
||||
private const val FONT_SCALE_THRESHOLD = 1.5f
|
||||
|
||||
/**
|
||||
* Displays a Bitwarden styled row of segmented buttons.
|
||||
*
|
||||
@@ -82,7 +88,8 @@ fun BitwardenSegmentedButton(
|
||||
.onGloballyPositioned {
|
||||
weightedWidth = (it.size.width / options.size).toDp(density)
|
||||
}
|
||||
.padding(horizontal = 4.dp),
|
||||
.padding(horizontal = 2.dp, vertical = 2.dp)
|
||||
.height(IntrinsicSize.Min),
|
||||
space = 0.dp,
|
||||
) {
|
||||
options.forEachIndexed { index, option ->
|
||||
@@ -100,6 +107,12 @@ fun SingleChoiceSegmentedButtonRowScope.SegmentedButtonOptionContent(
|
||||
option: SegmentedButtonState,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
val fontScale = LocalConfiguration.current.fontScale
|
||||
val labelVerticalPadding = if (fontScale > FONT_SCALE_THRESHOLD) {
|
||||
8.dp
|
||||
} else {
|
||||
0.dp
|
||||
}
|
||||
SegmentedButton(
|
||||
enabled = option.isEnabled,
|
||||
selected = option.isChecked,
|
||||
@@ -110,7 +123,13 @@ fun SingleChoiceSegmentedButtonRowScope.SegmentedButtonOptionContent(
|
||||
label = {
|
||||
Text(
|
||||
text = option.text,
|
||||
style = BitwardenTheme.typography.labelLarge,
|
||||
style = BitwardenTheme.typography.labelLarge.copy(
|
||||
hyphens = Hyphens.Auto,
|
||||
),
|
||||
modifier = Modifier.padding(
|
||||
vertical = labelVerticalPadding,
|
||||
horizontal = 4.dp,
|
||||
),
|
||||
)
|
||||
},
|
||||
icon = {
|
||||
|
||||
@@ -665,7 +665,9 @@ private fun CoachMarkScope<ExploreGeneratorCoachMark>.MainStateOptionsItem(
|
||||
) {
|
||||
SegmentedButtonOptionContent(
|
||||
option = option,
|
||||
modifier = Modifier.width(weightedWidth),
|
||||
modifier = Modifier
|
||||
.fillMaxHeight()
|
||||
.width(weightedWidth),
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -694,7 +696,9 @@ private fun CoachMarkScope<ExploreGeneratorCoachMark>.MainStateOptionsItem(
|
||||
) {
|
||||
SegmentedButtonOptionContent(
|
||||
option = option,
|
||||
modifier = Modifier.width(weightedWidth),
|
||||
modifier = Modifier
|
||||
.fillMaxHeight()
|
||||
.width(weightedWidth),
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -723,7 +727,9 @@ private fun CoachMarkScope<ExploreGeneratorCoachMark>.MainStateOptionsItem(
|
||||
) {
|
||||
SegmentedButtonOptionContent(
|
||||
option = option,
|
||||
modifier = Modifier.width(weightedWidth),
|
||||
modifier = Modifier
|
||||
.fillMaxHeight()
|
||||
.width(weightedWidth),
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -731,7 +737,9 @@ private fun CoachMarkScope<ExploreGeneratorCoachMark>.MainStateOptionsItem(
|
||||
else -> {
|
||||
SegmentedButtonOptionContent(
|
||||
option = option,
|
||||
modifier = Modifier.width(weightedWidth),
|
||||
modifier = Modifier
|
||||
.fillMaxHeight()
|
||||
.width(weightedWidth),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user