diff --git a/ui/src/main/kotlin/com/bitwarden/ui/platform/base/util/DensityExtensions.kt b/ui/src/main/kotlin/com/bitwarden/ui/platform/base/util/DensityExtensions.kt index dc157e108a..7e4e27c447 100644 --- a/ui/src/main/kotlin/com/bitwarden/ui/platform/base/util/DensityExtensions.kt +++ b/ui/src/main/kotlin/com/bitwarden/ui/platform/base/util/DensityExtensions.kt @@ -3,12 +3,14 @@ package com.bitwarden.ui.platform.base.util import androidx.compose.runtime.Composable import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalDensity +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.Density import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.DpSize import androidx.compose.ui.unit.IntSize import androidx.compose.ui.unit.TextUnit import androidx.compose.ui.unit.TextUnitType +import androidx.compose.ui.unit.sp /** * A function for converting pixels to [Dp] within a composable function. @@ -49,3 +51,26 @@ fun Dp.toUnscaledTextUnit(): TextUnit { val scalingFactor = LocalConfiguration.current.fontScale return TextUnit(value / scalingFactor, TextUnitType.Sp) } + +/** + * Modifies the [TextUnit] value to have a maximum scale factor for accessibility. + */ +@Composable +fun TextUnit.maxScaledSp(maxScaleFactor: Float): TextUnit { + val scaleFactor = LocalConfiguration.current.fontScale + val adjustedScaleFactor = scaleFactor.coerceAtMost(maximumValue = maxScaleFactor) + val adjustedValue = (this.value / scaleFactor) * adjustedScaleFactor + return adjustedValue.sp +} + +/** + * Creates a copy of the [TextStyle] that has a maximum scale factor. + */ +@Composable +fun TextStyle.toMaxScale( + maxScaleFactor: Float, +): TextStyle = this.copy( + fontSize = this.fontSize.maxScaledSp(maxScaleFactor = maxScaleFactor), + lineHeight = this.lineHeight.maxScaledSp(maxScaleFactor = maxScaleFactor), + letterSpacing = this.letterSpacing.maxScaledSp(maxScaleFactor = maxScaleFactor), +) diff --git a/ui/src/main/kotlin/com/bitwarden/ui/platform/components/segment/BitwardenSegmentedButton.kt b/ui/src/main/kotlin/com/bitwarden/ui/platform/components/segment/BitwardenSegmentedButton.kt index 72f1246727..af28837885 100644 --- a/ui/src/main/kotlin/com/bitwarden/ui/platform/components/segment/BitwardenSegmentedButton.kt +++ b/ui/src/main/kotlin/com/bitwarden/ui/platform/components/segment/BitwardenSegmentedButton.kt @@ -26,20 +26,20 @@ 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.text.style.LineBreak +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.Density import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.bitwarden.ui.platform.base.util.nullableTestTag import com.bitwarden.ui.platform.base.util.toDp +import com.bitwarden.ui.platform.base.util.toMaxScale import com.bitwarden.ui.platform.components.segment.color.bitwardenSegmentedButtonColors import com.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. * @@ -107,12 +107,6 @@ 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, @@ -123,13 +117,12 @@ fun SingleChoiceSegmentedButtonRowScope.SegmentedButtonOptionContent( label = { Text( text = option.text, - style = BitwardenTheme.typography.labelLarge.copy( - hyphens = Hyphens.Auto, - ), - modifier = Modifier.padding( - vertical = labelVerticalPadding, - horizontal = 4.dp, - ), + style = BitwardenTheme.typography.labelLarge + .copy(lineBreak = LineBreak.Heading) + .toMaxScale(maxScaleFactor = 2f), + maxLines = 2, + overflow = TextOverflow.Ellipsis, + textAlign = TextAlign.Center, ) }, icon = {