PM-18388 add hyphens on segmented button labels (#4777)

This commit is contained in:
Dave Severns
2025-02-27 16:50:37 -05:00
committed by GitHub
parent 3f1a6e97fd
commit 3ceda9e40a
2 changed files with 33 additions and 6 deletions

View File

@@ -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 = {

View File

@@ -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),
)
}
}