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:
NamanPandey 2023-04-04 12:11:48 +05:30 коммит произвёл GitHub
Родитель 12cfac58b0
Коммит c4d7efe15d
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
18 изменённых файлов: 229 добавлений и 116 удалений

Просмотреть файл

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