Multiple Fixes based on QA Activity (2/2)
* [QA] Issues: Fix Version 2 Token Parity for Pill Button, Button, FAB and Avatar Localized String for CCB RTL issue fix for CCB Gradient Focused State in RadioButton, CheckBox and ToggleSwitch Accessibility Insights Issue with Searchbar and Radio Button * Resolve Comments 1 * Removed unnecessary API doc
This commit is contained in:
Родитель
12cfac58b0
Коммит
c4d7efe15d
|
@ -2,6 +2,7 @@ package com.microsoft.fluentuidemo.demos
|
|||
|
||||
import android.os.Bundle
|
||||
import android.widget.Toast
|
||||
import androidx.compose.foundation.focusable
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.layout.*
|
||||
import androidx.compose.foundation.selection.selectable
|
||||
|
@ -18,13 +19,13 @@ import androidx.compose.ui.semantics.Role
|
|||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.unit.dp
|
||||
import com.example.theme.token.MyAliasTokens
|
||||
import com.microsoft.fluentui.tokenized.controls.CheckBox
|
||||
import com.microsoft.fluentui.tokenized.controls.RadioButton
|
||||
import com.microsoft.fluentui.tokenized.controls.ToggleSwitch
|
||||
import com.microsoft.fluentui.theme.AppThemeController
|
||||
import com.microsoft.fluentui.theme.FluentTheme
|
||||
import com.microsoft.fluentui.theme.ThemeMode
|
||||
import com.microsoft.fluentui.theme.token.AliasTokens
|
||||
import com.microsoft.fluentui.tokenized.controls.CheckBox
|
||||
import com.microsoft.fluentui.tokenized.controls.RadioButton
|
||||
import com.microsoft.fluentui.tokenized.controls.ToggleSwitch
|
||||
import com.microsoft.fluentuidemo.DemoActivity
|
||||
import com.microsoft.fluentuidemo.R
|
||||
|
||||
|
@ -42,21 +43,31 @@ class V2BasicControlsActivity : DemoActivity() {
|
|||
val compose_here = findViewById<ComposeView>(R.id.compose_here)
|
||||
compose_here.setContent {
|
||||
FluentTheme {
|
||||
Column(verticalArrangement = Arrangement.spacedBy(10.dp),
|
||||
modifier = Modifier.padding(16.dp)) {
|
||||
Column(
|
||||
verticalArrangement = Arrangement.spacedBy(10.dp),
|
||||
modifier = Modifier.padding(16.dp)
|
||||
) {
|
||||
|
||||
var checked by remember { mutableStateOf(true) }
|
||||
var enabled by remember { mutableStateOf(false) }
|
||||
val themes = listOf("Theme 1", "Theme 2")
|
||||
val selectedOption = remember { mutableStateOf(themes[0]) }
|
||||
|
||||
Row(horizontalArrangement = Arrangement.spacedBy(30.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
modifier = Modifier.fillMaxWidth()) {
|
||||
Text(text = "Toggle Switch enable",
|
||||
fontWeight = FontWeight.Bold,
|
||||
modifier = Modifier.weight(1F),
|
||||
color = FluentTheme.aliasTokens.neutralForegroundColor[AliasTokens.NeutralForegroundColorTokens.Foreground1].value(themeMode = ThemeMode.Auto))
|
||||
Row(
|
||||
horizontalArrangement = Arrangement.spacedBy(30.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
) {
|
||||
Text(
|
||||
text = "Toggle Switch enable",
|
||||
fontWeight = FontWeight.Bold,
|
||||
modifier = Modifier
|
||||
.weight(1F)
|
||||
.focusable(false),
|
||||
color = FluentTheme.aliasTokens.neutralForegroundColor[AliasTokens.NeutralForegroundColorTokens.Foreground1].value(
|
||||
themeMode = ThemeMode.Auto
|
||||
)
|
||||
)
|
||||
ToggleSwitch(onValueChange = {
|
||||
enabled = it
|
||||
Toast.makeText(context, "Switch 1 Toggled", Toast.LENGTH_SHORT).show()
|
||||
|
@ -65,33 +76,53 @@ class V2BasicControlsActivity : DemoActivity() {
|
|||
|
||||
Divider()
|
||||
|
||||
Row(horizontalArrangement = Arrangement.spacedBy(30.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
modifier = Modifier.fillMaxWidth()) {
|
||||
Text(text = "Toggle Global/Alias Theme",
|
||||
fontWeight = FontWeight.Bold,
|
||||
modifier = Modifier.weight(1F),
|
||||
color = FluentTheme.aliasTokens.neutralForegroundColor[AliasTokens.NeutralForegroundColorTokens.Foreground1].value(themeMode = ThemeMode.Auto))
|
||||
ToggleSwitch(enabledSwitch = enabled, checkedState = checked, onValueChange = {
|
||||
checked = it
|
||||
if (checked) {
|
||||
AppThemeController.updateAliasTokens(AliasTokens())
|
||||
selectedOption.value = themes[0]
|
||||
} else {
|
||||
AppThemeController.updateAliasTokens(MyAliasTokens())
|
||||
selectedOption.value = themes[1]
|
||||
}
|
||||
Toast.makeText(context, "Switch 2 Toggled", Toast.LENGTH_SHORT).show()
|
||||
})
|
||||
Row(
|
||||
horizontalArrangement = Arrangement.spacedBy(30.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
) {
|
||||
Text(
|
||||
text = "Toggle Global/Alias Theme",
|
||||
fontWeight = FontWeight.Bold,
|
||||
modifier = Modifier
|
||||
.weight(1F)
|
||||
.focusable(false),
|
||||
color = FluentTheme.aliasTokens.neutralForegroundColor[AliasTokens.NeutralForegroundColorTokens.Foreground1].value(
|
||||
themeMode = ThemeMode.Auto
|
||||
)
|
||||
)
|
||||
ToggleSwitch(
|
||||
enabledSwitch = enabled,
|
||||
checkedState = checked,
|
||||
onValueChange = {
|
||||
checked = it
|
||||
if (checked) {
|
||||
AppThemeController.updateAliasTokens(AliasTokens())
|
||||
selectedOption.value = themes[0]
|
||||
} else {
|
||||
AppThemeController.updateAliasTokens(MyAliasTokens())
|
||||
selectedOption.value = themes[1]
|
||||
}
|
||||
Toast.makeText(context, "Switch 2 Toggled", Toast.LENGTH_SHORT)
|
||||
.show()
|
||||
})
|
||||
}
|
||||
|
||||
Row(horizontalArrangement = Arrangement.spacedBy(30.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
modifier = Modifier.fillMaxWidth()) {
|
||||
Text(text = "Toggle Global/Alias Theme",
|
||||
fontWeight = FontWeight.Bold,
|
||||
modifier = Modifier.weight(1F),
|
||||
color = AppThemeController.aliasTokens.value!!.neutralForegroundColor[AliasTokens.NeutralForegroundColorTokens.Foreground1].value(themeMode = ThemeMode.Auto))
|
||||
Row(
|
||||
horizontalArrangement = Arrangement.spacedBy(30.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
modifier = Modifier.fillMaxWidth()
|
||||
) {
|
||||
Text(
|
||||
text = "Toggle Global/Alias Theme",
|
||||
fontWeight = FontWeight.Bold,
|
||||
modifier = Modifier
|
||||
.weight(1F)
|
||||
.focusable(false),
|
||||
color = AppThemeController.aliasTokens.value!!.neutralForegroundColor[AliasTokens.NeutralForegroundColorTokens.Foreground1].value(
|
||||
themeMode = ThemeMode.Auto
|
||||
)
|
||||
)
|
||||
CheckBox(enabled = enabled, checked = !checked, onCheckedChanged = {
|
||||
checked = !it
|
||||
if (checked) {
|
||||
|
@ -105,34 +136,46 @@ class V2BasicControlsActivity : DemoActivity() {
|
|||
}
|
||||
|
||||
themes.forEach { theme ->
|
||||
Row(horizontalArrangement = Arrangement.spacedBy(30.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
Row(
|
||||
horizontalArrangement = Arrangement.spacedBy(30.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.selectable(
|
||||
selected = (theme == selectedOption.value),
|
||||
onClick = { },
|
||||
role = Role.RadioButton,
|
||||
interactionSource = MutableInteractionSource(),
|
||||
indication = null
|
||||
)
|
||||
) {
|
||||
Text(
|
||||
text = theme,
|
||||
fontWeight = FontWeight.Bold,
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.selectable(
|
||||
selected = (theme == selectedOption.value),
|
||||
onClick = { },
|
||||
role = Role.RadioButton,
|
||||
interactionSource = MutableInteractionSource(),
|
||||
indication = null
|
||||
)) {
|
||||
Text(text = theme,
|
||||
fontWeight = FontWeight.Bold,
|
||||
modifier = Modifier.weight(1F),
|
||||
color = AppThemeController.aliasTokens.value!!.neutralForegroundColor[AliasTokens.NeutralForegroundColorTokens.Foreground1].value(themeMode = ThemeMode.Auto))
|
||||
.weight(1F)
|
||||
.focusable(false),
|
||||
color = AppThemeController.aliasTokens.value!!.neutralForegroundColor[AliasTokens.NeutralForegroundColorTokens.Foreground1].value(
|
||||
themeMode = ThemeMode.Auto
|
||||
)
|
||||
)
|
||||
RadioButton(enabled = enabled,
|
||||
selected = (selectedOption.value == theme),
|
||||
onClick = {
|
||||
selectedOption.value = theme
|
||||
checked = if (theme == "Theme 1") {
|
||||
AppThemeController.updateAliasTokens(AliasTokens())
|
||||
true
|
||||
} else {
|
||||
AppThemeController.updateAliasTokens(MyAliasTokens())
|
||||
false
|
||||
}
|
||||
Toast.makeText(context, "Radio Button: $theme selected", Toast.LENGTH_SHORT).show()
|
||||
selected = (selectedOption.value == theme),
|
||||
onClick = {
|
||||
selectedOption.value = theme
|
||||
checked = if (theme == "Theme 1") {
|
||||
AppThemeController.updateAliasTokens(AliasTokens())
|
||||
true
|
||||
} else {
|
||||
AppThemeController.updateAliasTokens(MyAliasTokens())
|
||||
false
|
||||
}
|
||||
Toast.makeText(
|
||||
context,
|
||||
"Radio Button: $theme selected",
|
||||
Toast.LENGTH_SHORT
|
||||
).show()
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -18,15 +18,18 @@ import androidx.compose.ui.draw.clip
|
|||
import androidx.compose.ui.focus.onFocusEvent
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.compose.ui.platform.LocalLayoutDirection
|
||||
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
|
||||
import androidx.compose.ui.semantics.Role
|
||||
import androidx.compose.ui.semantics.clearAndSetSemantics
|
||||
import androidx.compose.ui.semantics.contentDescription
|
||||
import androidx.compose.ui.semantics.semantics
|
||||
import androidx.compose.ui.text.style.TextOverflow
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.LayoutDirection
|
||||
import androidx.constraintlayout.compose.ConstraintLayout
|
||||
import androidx.constraintlayout.compose.Dimension
|
||||
import com.microsoft.fluentui.ccb.R
|
||||
import com.microsoft.fluentui.icons.CCBIcons
|
||||
import com.microsoft.fluentui.icons.ccbicons.Keyboarddismiss
|
||||
import com.microsoft.fluentui.theme.FluentTheme
|
||||
|
@ -57,7 +60,6 @@ enum class ActionButtonPosition {
|
|||
* @param modifier Optional Modifier for CCB
|
||||
* @param actionButtonPosition Enum to specify if we will have an Action Button and its position
|
||||
* @param actionButtonIcon FluentIcon for The Action Button Icon
|
||||
* @param actionButtonOnClick OnCLick Functionality for the Action Button. By default has keyboard dismiss action.
|
||||
* @param scrollable Boolean value to specify if CCB has fixed or infinite width(Scrollable).
|
||||
* Use false to create a fixed non scrollable CCB. Command groups widths will adhere to the weights set in [CommandGroup] weight parameter.
|
||||
* Use true to have a scrollable CCB. [CommandGroup] weight parameter is ignored
|
||||
|
@ -74,9 +76,9 @@ fun ContextualCommandBar(
|
|||
modifier: Modifier = Modifier,
|
||||
actionButtonPosition: ActionButtonPosition = ActionButtonPosition.End,
|
||||
actionButtonIcon: FluentIcon = FluentIcon(
|
||||
CCBIcons.Keyboarddismiss, contentDescription = "Dismiss"
|
||||
CCBIcons.Keyboarddismiss,
|
||||
contentDescription = LocalContext.current.resources.getString(R.string.fluentui_dismiss)
|
||||
),
|
||||
actionButtonOnClick: (() -> Unit)? = null,
|
||||
scrollable: Boolean = true,
|
||||
contextualCommandBarToken: ContextualCommandBarTokens? = null
|
||||
) {
|
||||
|
@ -112,6 +114,8 @@ fun ContextualCommandBar(
|
|||
)
|
||||
var focusedBorderModifier: Modifier = Modifier
|
||||
|
||||
val selectedString = LocalContext.current.resources.getString(R.string.fluentui_selected)
|
||||
|
||||
val lazyListState = rememberLazyListState()
|
||||
val scope = rememberCoroutineScope()
|
||||
|
||||
|
@ -231,7 +235,10 @@ fun ContextualCommandBar(
|
|||
.then(if (interactionSource.collectIsFocusedAsState().value || interactionSource.collectIsHoveredAsState().value) focusedBorderModifier else Modifier)
|
||||
.semantics {
|
||||
contentDescription =
|
||||
item.label + if (item.selected) "Selected" else ""
|
||||
item.label +
|
||||
if (item.selected)
|
||||
selectedString
|
||||
else ""
|
||||
}, contentAlignment = Alignment.Center
|
||||
) {
|
||||
CommandItemComposable(item, interactionSource, commandGroup)
|
||||
|
@ -349,7 +356,7 @@ fun ContextualCommandBar(
|
|||
.then(if (interactionSource.collectIsFocusedAsState().value || interactionSource.collectIsHoveredAsState().value) focusedBorderModifier else Modifier)
|
||||
.semantics {
|
||||
contentDescription =
|
||||
item.label + if (item.selected) "Selected" else ""
|
||||
item.label + if (item.selected) selectedString else ""
|
||||
}, contentAlignment = Alignment.Center
|
||||
) {
|
||||
CommandItemComposable(
|
||||
|
@ -389,12 +396,14 @@ fun ContextualCommandBar(
|
|||
val keyboardController = LocalSoftwareKeyboardController.current
|
||||
val keyboardDismiss: (() -> Unit) = { keyboardController?.hide() }
|
||||
val actionButtonClickable = Modifier.clickable(enabled = true,
|
||||
onClick = actionButtonOnClick ?: keyboardDismiss,
|
||||
onClick = actionButtonIcon.onClick ?: keyboardDismiss,
|
||||
role = Role.Button,
|
||||
onClickLabel = "Keyboard Dismiss",
|
||||
onClickLabel = actionButtonIcon.contentDescription,
|
||||
indication = rememberRipple(),
|
||||
interactionSource = remember { MutableInteractionSource() })
|
||||
|
||||
val isRtl: Boolean = LocalLayoutDirection.current == LayoutDirection.Rtl
|
||||
|
||||
Row(
|
||||
Modifier
|
||||
.height(IntrinsicSize.Min)
|
||||
|
@ -408,22 +417,25 @@ fun ContextualCommandBar(
|
|||
bottom.linkTo(parent.bottom)
|
||||
}, verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
if (actionButtonPosition == ActionButtonPosition.End) Spacer(
|
||||
modifier = Modifier
|
||||
.requiredWidth(
|
||||
getContextualCommandBarTokens().actionButtonGradientWidth(
|
||||
getContextualCommandBarInfo()
|
||||
)
|
||||
)
|
||||
.fillMaxHeight()
|
||||
.background(
|
||||
Brush.horizontalGradient(
|
||||
getContextualCommandBarTokens().actionButtonGradient(
|
||||
if (actionButtonPosition == ActionButtonPosition.End)
|
||||
Spacer(
|
||||
modifier = Modifier
|
||||
.requiredWidth(
|
||||
getContextualCommandBarTokens().actionButtonGradientWidth(
|
||||
getContextualCommandBarInfo()
|
||||
), startX = 0.0F, endX = Float.POSITIVE_INFINITY
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
.fillMaxHeight()
|
||||
.background(
|
||||
Brush.horizontalGradient(
|
||||
getContextualCommandBarTokens().actionButtonGradient(
|
||||
getContextualCommandBarInfo()
|
||||
),
|
||||
startX = if (!isRtl) 0.0F else Float.POSITIVE_INFINITY,
|
||||
endX = if (!isRtl) Float.POSITIVE_INFINITY else 0.0F
|
||||
)
|
||||
)
|
||||
)
|
||||
Icon(
|
||||
actionButtonIcon,
|
||||
modifier = Modifier
|
||||
|
@ -442,22 +454,25 @@ fun ContextualCommandBar(
|
|||
getContextualCommandBarInfo()
|
||||
)
|
||||
)
|
||||
if (actionButtonPosition == ActionButtonPosition.Start) Spacer(
|
||||
modifier = Modifier
|
||||
.requiredWidth(
|
||||
getContextualCommandBarTokens().actionButtonGradientWidth(
|
||||
getContextualCommandBarInfo()
|
||||
)
|
||||
)
|
||||
.fillMaxHeight()
|
||||
.background(
|
||||
Brush.horizontalGradient(
|
||||
getContextualCommandBarTokens().actionButtonGradient(
|
||||
if (actionButtonPosition == ActionButtonPosition.Start)
|
||||
Spacer(
|
||||
modifier = Modifier
|
||||
.requiredWidth(
|
||||
getContextualCommandBarTokens().actionButtonGradientWidth(
|
||||
getContextualCommandBarInfo()
|
||||
), startX = Float.POSITIVE_INFINITY, endX = 0.0F
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
.fillMaxHeight()
|
||||
.background(
|
||||
Brush.horizontalGradient(
|
||||
getContextualCommandBarTokens().actionButtonGradient(
|
||||
getContextualCommandBarInfo()
|
||||
),
|
||||
startX = if (!isRtl) Float.POSITIVE_INFINITY else 0F,
|
||||
endX = if (!isRtl) 0F else Float.POSITIVE_INFINITY
|
||||
)
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -151,7 +151,7 @@ fun Button(
|
|||
selected = false,
|
||||
interactionSource = interactionSource
|
||||
),
|
||||
style = getButtonToken().fontInfo(getButtonInfo()).merge(
|
||||
style = getButtonToken().typography(getButtonInfo()).merge(
|
||||
TextStyle(
|
||||
platformStyle = PlatformTextStyle(includeFontPadding = false)
|
||||
)
|
||||
|
|
|
@ -154,7 +154,7 @@ fun FloatingActionButton(
|
|||
Text(
|
||||
text = text!!,
|
||||
modifier = Modifier.clearAndSetSemantics { },
|
||||
style = getFABToken().fontInfo(getFABInfo()),
|
||||
style = getFABToken().typography(getFABInfo()),
|
||||
color = getFABToken().textColor(fabInfo = getFABInfo()).getColorByState(
|
||||
enabled = enabled,
|
||||
selected = false,
|
||||
|
|
|
@ -16,8 +16,12 @@ import androidx.compose.ui.Alignment
|
|||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.drawscope.Fill
|
||||
import androidx.compose.ui.graphics.drawscope.Stroke
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.compose.ui.semantics.Role
|
||||
import androidx.compose.ui.semantics.contentDescription
|
||||
import androidx.compose.ui.semantics.semantics
|
||||
import androidx.compose.ui.unit.dp
|
||||
import com.microsoft.fluentui.controls.R
|
||||
import com.microsoft.fluentui.theme.FluentTheme
|
||||
import com.microsoft.fluentui.theme.token.ControlTokens
|
||||
import com.microsoft.fluentui.theme.token.controlTokens.RadioButtonInfo
|
||||
|
@ -87,11 +91,13 @@ fun RadioButton(
|
|||
val outerRadius = getRadioButtonTokens().outerCircleRadius
|
||||
val strokeWidth = getRadioButtonTokens().strokeWidthInwards
|
||||
|
||||
val contentDesc = LocalContext.current.resources.getString(R.string.fluentui_radio_button)
|
||||
Canvas(
|
||||
modifier = Modifier
|
||||
.then(selectableModifier)
|
||||
.size(24.dp)
|
||||
.wrapContentSize(Alignment.Center)
|
||||
.semantics { contentDescription = contentDesc }
|
||||
) {
|
||||
drawCircle(
|
||||
outerStrokeColor,
|
||||
|
|
|
@ -14,6 +14,7 @@ import androidx.compose.foundation.shape.CircleShape
|
|||
import androidx.compose.material.ExperimentalMaterialApi
|
||||
import androidx.compose.material.FractionalThreshold
|
||||
import androidx.compose.material.rememberSwipeableState
|
||||
import androidx.compose.material.ripple.rememberRipple
|
||||
import androidx.compose.material.swipeable
|
||||
import androidx.compose.runtime.*
|
||||
import androidx.compose.ui.Alignment
|
||||
|
@ -133,7 +134,7 @@ fun ToggleSwitch(
|
|||
role = Role.Switch,
|
||||
onValueChange = onValueChange,
|
||||
interactionSource = interactionSource,
|
||||
indication = null
|
||||
indication = rememberRipple()
|
||||
)
|
||||
|
||||
// UI Implementation
|
||||
|
|
|
@ -126,7 +126,6 @@ import com.microsoft.fluentui.icons.avataricons.presence.unknown.medium.Dark
|
|||
import com.microsoft.fluentui.icons.avataricons.presence.unknown.medium.Light
|
||||
import com.microsoft.fluentui.icons.avataricons.presence.unknown.small.Dark
|
||||
import com.microsoft.fluentui.icons.avataricons.presence.unknown.small.Light
|
||||
import com.microsoft.fluentui.theme.FluentTheme
|
||||
import com.microsoft.fluentui.theme.FluentTheme.aliasTokens
|
||||
import com.microsoft.fluentui.theme.FluentTheme.themeMode
|
||||
import com.microsoft.fluentui.theme.token.*
|
||||
|
@ -611,12 +610,12 @@ open class AvatarTokens(private val activityRingToken: ActivityRingsToken = Acti
|
|||
open fun presenceOffset(avatarInfo: AvatarInfo): DpOffset {
|
||||
return when (avatarInfo.size) {
|
||||
AvatarSize.Size16 -> DpOffset(0.dp, 0.dp)
|
||||
AvatarSize.Size20 -> DpOffset(11.dp, 13.dp)
|
||||
AvatarSize.Size24 -> DpOffset(11.dp, 13.dp)
|
||||
AvatarSize.Size32 -> DpOffset(20.dp, 20.dp)
|
||||
AvatarSize.Size40 -> DpOffset(26.dp, 26.dp)
|
||||
AvatarSize.Size56 -> DpOffset(40.dp, 40.dp)
|
||||
AvatarSize.Size72 -> DpOffset(51.dp, 51.dp)
|
||||
AvatarSize.Size20 -> DpOffset(0.dp, (-3).dp)
|
||||
AvatarSize.Size24 -> DpOffset((-1).dp, (-1).dp)
|
||||
AvatarSize.Size32 -> DpOffset(0.dp, 0.dp)
|
||||
AvatarSize.Size40 -> DpOffset(0.dp, 0.dp)
|
||||
AvatarSize.Size56 -> DpOffset((-2).dp, 2.dp)
|
||||
AvatarSize.Size72 -> DpOffset((-3).dp, 3.dp)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -232,7 +232,7 @@ open class ButtonTokens : ControlToken, Parcelable {
|
|||
}
|
||||
|
||||
@Composable
|
||||
open fun fontInfo(buttonInfo: ButtonInfo): TextStyle {
|
||||
open fun typography(buttonInfo: ButtonInfo): TextStyle {
|
||||
return when (buttonInfo.size) {
|
||||
ButtonSize.Small -> aliasTokens.typography[AliasTokens.TypographyTokens.Body2Strong]
|
||||
ButtonSize.Medium -> aliasTokens.typography[AliasTokens.TypographyTokens.Body2Strong]
|
||||
|
|
|
@ -64,6 +64,22 @@ open class CheckBoxTokens : ControlToken, Parcelable {
|
|||
)
|
||||
)
|
||||
),
|
||||
focused = listOf(
|
||||
BorderStroke(
|
||||
1.5.dp,
|
||||
aliasTokens.neutralStrokeColor[AliasTokens.NeutralStrokeColorTokens.StrokeAccessible].value(
|
||||
themeMode = themeMode
|
||||
)
|
||||
)
|
||||
),
|
||||
selectedFocused = listOf(
|
||||
BorderStroke(
|
||||
1.5.dp,
|
||||
aliasTokens.neutralStrokeColor[AliasTokens.NeutralStrokeColorTokens.StrokeAccessible].value(
|
||||
themeMode = themeMode
|
||||
)
|
||||
)
|
||||
),
|
||||
disabled = listOf(
|
||||
BorderStroke(
|
||||
1.5.dp,
|
||||
|
|
|
@ -121,7 +121,7 @@ open class FABTokens : ControlToken, Parcelable {
|
|||
}
|
||||
|
||||
@Composable
|
||||
open fun fontInfo(fabInfo: FABInfo): TextStyle {
|
||||
open fun typography(fabInfo: FABInfo): TextStyle {
|
||||
return when (fabInfo.size) {
|
||||
FABSize.Small -> aliasTokens.typography[AliasTokens.TypographyTokens.Body2Strong]
|
||||
FABSize.Large -> aliasTokens.typography[AliasTokens.TypographyTokens.Body1Strong]
|
||||
|
|
|
@ -311,7 +311,7 @@ open class PillButtonTokens : ControlToken, Parcelable {
|
|||
}
|
||||
|
||||
@Composable
|
||||
open fun fontStyle(pillButtonInfo: PillButtonInfo): TextStyle {
|
||||
open fun typography(pillButtonInfo: PillButtonInfo): TextStyle {
|
||||
return FluentTheme.aliasTokens.typography[AliasTokens.TypographyTokens.Body2]
|
||||
}
|
||||
|
||||
|
|
|
@ -28,6 +28,12 @@ open class RadioButtonTokens : ControlToken, Parcelable {
|
|||
rest = aliasTokens.neutralStrokeColor[AliasTokens.NeutralStrokeColorTokens.StrokeAccessible].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
focused = aliasTokens.neutralStrokeColor[AliasTokens.NeutralStrokeColorTokens.StrokeAccessible].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
selectedFocused = aliasTokens.brandBackgroundColor[AliasTokens.BrandBackgroundColorTokens.BrandBackground1].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
selected = aliasTokens.brandBackgroundColor[AliasTokens.BrandBackgroundColorTokens.BrandBackground1].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
|
@ -52,6 +58,9 @@ open class RadioButtonTokens : ControlToken, Parcelable {
|
|||
selected = aliasTokens.brandForegroundColor[AliasTokens.BrandForegroundColorTokens.BrandForeground1].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
selectedFocused = aliasTokens.brandForegroundColor[AliasTokens.BrandForegroundColorTokens.BrandForeground1].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
selectedPressed = aliasTokens.brandForegroundColor[AliasTokens.BrandForegroundColorTokens.BrandForeground1].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
|
|
|
@ -27,6 +27,12 @@ open class ToggleSwitchTokens : ControlToken, Parcelable {
|
|||
disabled = aliasTokens.neutralBackgroundColor[AliasTokens.NeutralBackgroundColorTokens.Background5].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
focused = aliasTokens.neutralBackgroundColor[AliasTokens.NeutralBackgroundColorTokens.Background5].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
selectedFocused = aliasTokens.brandBackgroundColor[AliasTokens.BrandBackgroundColorTokens.BrandBackground1].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
selected = aliasTokens.brandBackgroundColor[AliasTokens.BrandBackgroundColorTokens.BrandBackground1].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
|
@ -51,6 +57,12 @@ open class ToggleSwitchTokens : ControlToken, Parcelable {
|
|||
disabled = aliasTokens.neutralBackgroundColor[AliasTokens.NeutralBackgroundColorTokens.BackgroundLightStaticDisabled].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
focused = aliasTokens.neutralBackgroundColor[AliasTokens.NeutralBackgroundColorTokens.BackgroundLightStatic].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
selectedFocused = aliasTokens.neutralBackgroundColor[AliasTokens.NeutralBackgroundColorTokens.BackgroundLightStatic].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
selected = aliasTokens.neutralBackgroundColor[AliasTokens.NeutralBackgroundColorTokens.BackgroundLightStatic].value(
|
||||
themeMode = themeMode
|
||||
),
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
<!-- Describes dismiss behaviour -->
|
||||
<string name="fluentui_dismiss">Dismiss</string>
|
||||
<!-- Describes selected action-->
|
||||
<string name="fluentui_selected">Selected</string>
|
||||
<!-- Describes not selected action-->
|
||||
|
@ -48,12 +50,18 @@
|
|||
<string name="fluentui_chevron">Chevron</string>
|
||||
<!-- Describes the outline design of control -->
|
||||
<string name="fluentui_outline">Outline</string>
|
||||
|
||||
<!--Describes the control - RadioButton -->
|
||||
<string name="fluentui_radio_button">Radio Button</string>
|
||||
|
||||
<!--types of control -->
|
||||
<string name="fluentui_large">Large</string>
|
||||
<string name="fluentui_medium">Medium</string>
|
||||
<string name="fluentui_small">Small</string>
|
||||
|
||||
<!-- Decribes the subtitle component of list -->
|
||||
<string name="fluentui_subtitle">Subtitle</string>
|
||||
|
||||
<!-- Decribes the title component of list -->
|
||||
<string name="fluentui_title">Title</string>
|
||||
|
||||
|
|
|
@ -245,7 +245,7 @@ fun CardNudge(
|
|||
}
|
||||
|
||||
@Composable
|
||||
override fun fontStyle(pillButtonInfo: PillButtonInfo): TextStyle {
|
||||
override fun typography(pillButtonInfo: PillButtonInfo): TextStyle {
|
||||
return aliasTokens.typography[AliasTokens.TypographyTokens.Body2Strong]
|
||||
}
|
||||
}
|
||||
|
|
|
@ -203,8 +203,9 @@ fun Avatar(
|
|||
image.value(themeMode),
|
||||
null,
|
||||
Modifier
|
||||
.align(Alignment.TopStart)
|
||||
.offset(presenceOffset.x, presenceOffset.y)
|
||||
.align(Alignment.BottomEnd)
|
||||
// Adding 2.dp to both side to incorporate border which is an image in Fluent Android.
|
||||
.offset(presenceOffset.x + 2.dp, -presenceOffset.y + 2.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -133,7 +133,7 @@ fun PillButton(
|
|||
interactionSource = interactionSource
|
||||
)
|
||||
|
||||
val fontStyle = getPillButtonTokens().fontStyle(getPillButtonInfo())
|
||||
val fontStyle = getPillButtonTokens().typography(getPillButtonInfo())
|
||||
|
||||
val focusStroke = getPillButtonTokens().focusStroke(getPillButtonInfo())
|
||||
var focusedBorderModifier: Modifier = Modifier
|
||||
|
|
|
@ -30,6 +30,8 @@ import androidx.compose.ui.platform.LocalContext
|
|||
import androidx.compose.ui.platform.LocalFocusManager
|
||||
import androidx.compose.ui.platform.LocalLayoutDirection
|
||||
import androidx.compose.ui.semantics.Role
|
||||
import androidx.compose.ui.semantics.contentDescription
|
||||
import androidx.compose.ui.semantics.semantics
|
||||
import androidx.compose.ui.text.TextStyle
|
||||
import androidx.compose.ui.text.style.TextDirection
|
||||
import androidx.compose.ui.unit.LayoutDirection
|
||||
|
@ -261,7 +263,8 @@ fun SearchBar(
|
|||
searchHasFocus = true
|
||||
}
|
||||
}
|
||||
.padding(horizontal = 8.dp),
|
||||
.padding(horizontal = 8.dp)
|
||||
.semantics {contentDescription = searchHint},
|
||||
textStyle = getSearchBarTokens().typography(getSearchBarInfo()).merge(
|
||||
TextStyle(
|
||||
color = getSearchBarTokens().textColor(getSearchBarInfo()),
|
||||
|
|
Загрузка…
Ссылка в новой задаче