microsoft
/
fluentui-react-native
зеркало из https://github.com/microsoft/fluentui-react-native.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Align Checkbox to redlines (#1333) 

* Initial styling

* More small tweaks

* More small tweaks

* Fix tests

* Make checkboxSize token

* Change files

* Fix styling

* Disable checkbox test in uwp

* Fix build and android checkbox

* Update snapshots

* Change files

* Fix fontsize
This commit is contained in:
Ruriko Araki 2022-01-18 16:43:22 -08:00 коммит произвёл GitHub
Родитель 50755c695d
Коммит 399af7c595
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
13 изменённых файлов: 209 добавлений и 145 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
apps/fluent-tester/src/FluentTester/TestComponents/CheckboxExperimental/CheckboxTest.tsx
Просмотреть файл

@ -151,7 +151,7 @@ const checkboxSections: TestSection[] = [
export const ExperimentalCheckboxTest: React.FunctionComponent = () => {
const status: PlatformStatus = {
win32Status: 'Beta',
uwpStatus: 'Experimental',
uwpStatus: 'N/A',
iosStatus: 'N/A',
macosStatus: 'Experimental',
androidStatus: 'N/A',

13
apps/fluent-tester/src/FluentTester/testPages.windows.ts
Просмотреть файл

@ -1,7 +1,7 @@
import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON, ExperimentalCheckboxTest } from './TestComponents/CheckboxExperimental';
// import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON, ExperimentalCheckboxTest } from './TestComponents/CheckboxExperimental';
import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link';
import { HOMEPAGE_PERSONA_BUTTON, PersonaTest } from './TestComponents/Persona';
import { HOMEPAGE_PERSONACOIN_BUTTON, PersonaCoinTest } from './TestComponents/PersonaCoin';
@ -71,11 +71,12 @@ export const tests = [
component: CheckboxTest,
testPage: HOMEPAGE_CHECKBOX_BUTTON,
},
{
name: 'Experimental Checkbox',
component: ExperimentalCheckboxTest,
testPage: HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON,
},
// GH#935 Temporarily disabling while SVGs don't work in windows
// {
// name: 'Experimental Checkbox',
// component: ExperimentalCheckboxTest,
// testPage: HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON,
// },
{
name: 'Tabs Test',
component: TabsTest,

7
change/@fluentui-react-native-experimental-checkbox-5e53a4c8-a86d-4f2e-8cbe-8b73d0109f9a.json Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "Initial styling",
"packageName": "@fluentui-react-native/experimental-checkbox",
"email": "ruaraki@microsoft.com",
"dependentChangeType": "patch"
}

7
change/@fluentui-react-native-tester-3f5205d0-a54d-43d7-9372-afa11fb7b1f7.json Normal file
Просмотреть файл

@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Disable checkbox test in uwp",
"packageName": "@fluentui-react-native/tester",
"email": "ruaraki@microsoft.com",
"dependentChangeType": "patch"
}

43
packages/experimental/Checkbox/src/Checkbox.styling.ts
Просмотреть файл

@ -2,7 +2,6 @@ import { checkboxName, CheckboxTokens, CheckboxSlotProps, CheckboxProps } from '
import { Theme, UseStylingOptions, buildProps } from '@fluentui-react-native/framework';
import { borderStyles, fontStyles } from '@fluentui-react-native/tokens';
import { defaultCheckboxTokens } from './CheckboxTokens';
import { globalTokens } from '@fluentui-react-native/theme-tokens';
export const checkboxStates: (keyof CheckboxTokens)[] = [
'labelIsBefore',
@ -19,54 +18,52 @@ export const stylingSettings: UseStylingOptions<CheckboxProps, CheckboxSlotProps
states: checkboxStates,
slotProps: {
root: buildProps(
(tokens: CheckboxTokens) => ({
(tokens: CheckboxTokens, theme: Theme) => ({
style: {
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
alignSelf: 'flex-start',
backgroundColor: tokens.backgroundColor,
borderColor: tokens.rootBorderColor,
borderRadius: globalTokens.corner.radius.medium,
borderWidth: globalTokens.stroke.width.thick,
marginBottom: globalTokens.spacing.s,
...borderStyles.from(tokens, theme),
padding: 4,
},
}),
['backgroundColor', 'borderColor', 'borderRadius'],
['backgroundColor', ...borderStyles.keys],
),
content: buildProps(
label: buildProps(
(tokens: CheckboxTokens, theme: Theme) => ({
style: {
color: tokens.color,
borderColor: tokens.textBorderColor,
borderStyle: 'solid',
marginTop: -1,
marginTop: -2,
marginBottom: -2,
marginLeft: tokens.spacingLabelAfter,
marginRight: tokens.spacingLabelBefore,
...fontStyles.from(tokens, theme),
},
}),
['color', 'textBorderColor', ...fontStyles.keys],
['spacingLabelAfter', 'spacingLabelBefore', 'color', ...fontStyles.keys],
),
checkbox: buildProps(
(tokens: CheckboxTokens, theme: Theme) => ({
(tokens: CheckboxTokens) => ({
style: {
minHeight: 16,
minWidth: 16,
marginEnd: tokens.checkboxMarginEnd,
height: tokens.checkboxSize,
width: tokens.checkboxSize,
backgroundColor: tokens.checkboxBackgroundColor,
borderColor: tokens.checkboxBorderColor,
...borderStyles.from(tokens, theme),
marginLeft: tokens.marginLeft,
borderRadius: tokens.checkboxBorderRadius,
borderWidth: tokens.checkboxBorderWidth,
alignItems: 'center',
justifyContent: 'center',
},
}),
['checkboxBackgroundColor', 'checkboxMarginEnd', 'marginLeft', ...borderStyles.keys],
['checkboxBackgroundColor', 'checkboxBorderColor', 'checkboxBorderRadius', 'checkboxBorderWidth', 'checkboxSize'],
),
checkmark: buildProps(
(tokens: CheckboxTokens) => ({
style: {
width: 11,
height: 8,
top: 3,
left: 1,
width: 10,
height: 10,
color: tokens.checkmarkColor,
opacity: tokens.checkmarkOpacity,
},

10
packages/experimental/Checkbox/src/Checkbox.tsx
Просмотреть файл

@ -1,5 +1,4 @@
/** @jsx withSlots */
import * as React from 'react';
import { View } from 'react-native';
import { checkboxName, CheckboxType, CheckboxProps } from './Checkbox.types';
import { Text } from '@fluentui-react-native/experimental-text';
@ -15,7 +14,7 @@ export const Checkbox = compose<CheckboxType>({
root: View,
checkbox: View,
checkmark: Svg,
content: Text,
label: Text,
},
render: (userProps: CheckboxProps, useSlots: UseSlots<CheckboxType>) => {
// configure props and state for checkbox based on user props
@ -23,12 +22,12 @@ export const Checkbox = compose<CheckboxType>({
// grab the styled slots
const Slots = useSlots(userProps, (layer) => Checkbox.state[layer] || userProps[layer]);
// now return the handler for finishing render
return (final: CheckboxProps, ...children: React.ReactNode[]) => {
return (final: CheckboxProps) => {
const { label, ...mergedProps } = mergeProps(Checkbox.props, final);
return (
<Slots.root {...mergedProps}>
{Checkbox.state.labelIsBefore && <Slots.content key="content">{label}</Slots.content>}
{Checkbox.state.labelIsBefore && <Slots.label key="label">{label}</Slots.label>}
<Slots.checkbox>
<Slots.checkmark key="checkmark" viewBox="0 0 11 8">
<Path
@ -37,8 +36,7 @@ export const Checkbox = compose<CheckboxType>({
/>
</Slots.checkmark>
</Slots.checkbox>
{!Checkbox.state.labelIsBefore && <Slots.content key="content">{label}</Slots.content>}
{children}
{!Checkbox.state.labelIsBefore && <Slots.label key="label">{label}</Slots.label>}
</Slots.root>
);
};

14
packages/experimental/Checkbox/src/Checkbox.types.ts
Просмотреть файл

@ -10,15 +10,13 @@ export const checkboxName = 'Checkbox';
export interface CheckboxTokens extends FontTokens, IForegroundColorTokens, IBackgroundColorTokens, IBorderTokens {
checkboxBackgroundColor?: ColorValue;
checkboxBorderColor?: ColorValue;
checkboxBorderRadius?: number;
checkboxBorderWidth?: number;
checkboxSize?: number;
checkmarkColor?: ColorValue;
checkmarkOpacity?: number;
textBorderColor?: ColorValue;
rootBorderColor?: ColorValue;
checkboxBorderRadius?: number;
checkboxMarginStart?: number;
checkboxMarginEnd?: number;
checkboxOpacity?: number;
marginLeft?: number;
spacingLabelAfter?: number;
spacingLabelBefore?: number;
/**
* States that can be applied to a checkbox
@ -111,7 +109,7 @@ export interface CheckboxSlotProps {
root: React.PropsWithRef<IViewProps>;
checkbox: IViewProps;
checkmark?: SvgProps;
content: ITextProps;
label: ITextProps;
}
export interface CheckboxType {

30
packages/experimental/Checkbox/src/CheckboxTokens.ts
Просмотреть файл

@ -1,21 +1,21 @@
import { Theme } from '@fluentui-react-native/framework';
import { globalTokens } from '@fluentui-react-native/theme-tokens';
import { TokenSettings } from '@fluentui-react-native/use-styling';
import { CheckboxTokens } from './Checkbox.types';
export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: Theme) =>
({
checkboxBorderColor: t.colors.menuItemText,
color: t.colors.menuItemText,
borderRadius: globalTokens.corner.radius.small,
checkboxBackgroundColor: t.colors.menuBackground,
textBorderColor: 'transparent',
checkboxBorderColor: t.colors.menuItemText,
checkboxBorderRadius: globalTokens.corner.radius.small,
checkboxBorderWidth: globalTokens.stroke.width.thin,
checkboxSize: 16,
checkmarkColor: t.colors.menuItemTextHovered,
variant: 'bodyStandard',
spacingLabelAfter: globalTokens.spacing.m,
checkmarkOpacity: 0,
checkboxMarginStart: 0,
checkboxMarginEnd: 4,
borderStyle: 'solid',
borderWidth: 1,
borderRadius: 2,
color: t.colors.menuItemText,
variant: 'bodyStandard',
disabled: {
checkboxBorderColor: t.colors.buttonBorderDisabled,
color: t.colors.disabledBodyText,
@ -27,7 +27,7 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: T
},
focused: {
checkboxBackgroundColor: t.colors.menuItemBackgroundHovered,
textBorderColor: t.colors.focusBorder,
borderColor: t.colors.focusBorder,
},
pressed: {
checkboxBackgroundColor: t.colors.menuItemBackgroundPressed,
@ -35,11 +35,11 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: T
checked: {
checkmarkOpacity: 1,
},
labelIsBefore: {
checkboxMarginStart: 4,
checkboxMarginEnd: 0,
},
circular: {
borderRadius: 9999,
checkboxBorderRadius: globalTokens.corner.radius.circle,
},
labelIsBefore: {
spacingLabelBefore: globalTokens.spacing.m,
spacingLabelAfter: 0,
},
} as CheckboxTokens);

40
packages/experimental/Checkbox/src/CheckboxTokens.win32.ts
Просмотреть файл

@ -5,19 +5,18 @@ import { CheckboxTokens } from './Checkbox.types';
export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: Theme) =>
({
checkboxBorderColor: t.colors.neutralStrokeAccessible,
color: t.colors.neutralForeground1,
checkboxBackgroundColor: t.colors.neutralBackground1,
textBorderColor: 'transparent',
rootBorderColor: 'transparent',
checkmarkColor: t.colors.neutralForeground4,
variant: 'bodyStandard',
checkmarkOpacity: 0,
checkboxMarginEnd: 4,
borderStyle: 'solid',
borderWidth: globalTokens.stroke.width.thin,
borderRadius: globalTokens.corner.radius.small,
marginLeft: 0,
checkboxBorderWidth: globalTokens.stroke.width.thin,
checkboxBorderRadius: globalTokens.corner.radius.small,
checkboxBackgroundColor: t.colors.neutralBackground1,
checkboxBorderColor: t.colors.neutralStrokeAccessible,
checkboxSize: 16,
color: t.colors.neutralForeground1,
spacingLabelAfter: globalTokens.spacing.m,
fontSize: globalTokens.font.size[200],
fontWeight: globalTokens.font.weight.regular,
fontFamily: t.typography.families.primary,
checkmarkOpacity: 0,
disabled: {
checkboxBorderColor: t.colors.neutralStrokeDisabled,
color: t.colors.neutralForegroundDisabled,
@ -26,20 +25,20 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: T
hovered: {
checkboxBackgroundColor: t.colors.neutralBackground1,
checkboxBorderColor: t.colors.neutralStrokeAccessibleHover,
checkmarkColor: t.colors.neutralForeground4,
checkmarkOpacity: 1,
color: t.colors.neutralForeground1,
checked: {
checkboxBackgroundColor: t.colors.brandBackgroundHover,
checkboxBorderColor: t.colors.brandBackgroundHover,
},
},
focused: {
rootBorderColor: t.colors.strokeFocus2,
marginLeft: 1,
},
pressed: {
checkboxBackgroundColor: t.colors.neutralBackground1,
checkboxBorderColor: t.colors.neutralStrokeAccessiblePressed,
checkmarkColor: t.colors.neutralForeground1,
checkmarkOpacity: 1,
color: t.colors.neutralForeground1,
checked: {
checkboxBackgroundColor: t.colors.brandBackgroundPressed,
checkboxBorderColor: t.colors.brandBackgroundPressed,
@ -54,10 +53,11 @@ export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: T
checkmarkColor: t.colors.neutralForegroundDisabled,
},
},
labelIsBefore: {
checkboxMarginEnd: 0,
},
circular: {
borderRadius: globalTokens.corner.radius.circle,
checkboxBorderRadius: globalTokens.corner.radius.circle,
},
labelIsBefore: {
spacingLabelBefore: globalTokens.spacing.m,
spacingLabelAfter: 0,
},
} as CheckboxTokens);

61
packages/experimental/Checkbox/src/CheckboxTokens.windows.ts Normal file
Просмотреть файл

@ -0,0 +1,61 @@
import { Theme } from '@fluentui-react-native/framework';
import { TokenSettings } from '@fluentui-react-native/use-styling';
import { globalTokens } from '@fluentui-react-native/theme-tokens';
import { CheckboxTokens } from './Checkbox.types';
export const defaultCheckboxTokens: TokenSettings<CheckboxTokens, Theme> = (t: Theme) =>
({
borderRadius: globalTokens.corner.radius.small,
checkboxBorderWidth: globalTokens.stroke.width.thin,
checkboxBorderRadius: globalTokens.corner.radius.small,
checkboxBackgroundColor: t.colors.neutralBackground1,
checkboxBorderColor: t.colors.neutralStrokeAccessible,
checkboxSize: 16,
color: t.colors.neutralForeground3,
spacingLabelAfter: globalTokens.spacing.m,
variant: 'bodyStandard',
checkmarkOpacity: 0,
disabled: {
checkboxBorderColor: t.colors.neutralStrokeDisabled,
color: t.colors.neutralForegroundDisabled,
checkboxBackgroundColor: t.colors.neutralBackgroundDisabled,
},
hovered: {
checkboxBackgroundColor: t.colors.neutralBackground1,
checkboxBorderColor: t.colors.neutralStrokeAccessibleHover,
color: t.colors.neutralForeground2,
checked: {
checkboxBackgroundColor: t.colors.compoundBrandBackground1Hover,
checkboxBorderColor: t.colors.compoundBrandBackground1Hover,
checkmarkColor: t.colors.neutralForegroundOnBrand,
checkmarkOpacity: 1,
},
},
pressed: {
checkboxBackgroundColor: t.colors.neutralBackground1,
checkboxBorderColor: t.colors.neutralStrokeAccessiblePressed,
color: t.colors.neutralForeground1,
checked: {
checkboxBackgroundColor: t.colors.compoundBrandBackground1Pressed,
checkboxBorderColor: t.colors.compoundBrandBackground1Pressed,
checkmarkColor: t.colors.neutralForegroundOnBrand,
checkmarkOpacity: 1,
},
},
checked: {
checkboxBackgroundColor: t.colors.compoundBrandBackground1,
checkboxBorderColor: t.colors.compoundBrandBackground1,
checkmarkOpacity: 1,
checkmarkColor: t.colors.neutralForegroundOnBrand,
disabled: {
checkmarkColor: t.colors.neutralForegroundDisabled,
},
},
circular: {
checkboxBorderRadius: globalTokens.corner.radius.circle,
},
labelIsBefore: {
spacingLabelBefore: globalTokens.spacing.m,
spacingLabelAfter: 0,
},
} as CheckboxTokens);

10
packages/experimental/Checkbox/src/__tests__/Checkbox.test.tsx
Просмотреть файл

@ -14,7 +14,7 @@ describe('Checkbox component tests', () => {
it('Checkbox all props', () => {
const tree = renderer
.create(<Checkbox label="All Props Checkbox" onChange={onChange} defaultChecked={true} labelPosition="before" disabled />)
.create(<Checkbox label="All Props Checkbox" onChange={onChange} defaultChecked={true} labelPosition="before" disabled circular />)
.toJSON();
expect(tree).toMatchSnapshot();
});
@ -27,13 +27,15 @@ describe('Checkbox component tests', () => {
checkboxBackgroundColor: 'blue',
checkboxBorderColor: 'red',
checkboxBorderRadius: 5,
checkboxMarginEnd: 10,
checkboxMarginStart: 8,
checkboxBorderWidth: 2,
checkmarkColor: 'pink',
checkmarkOpacity: 0.7,
textBorderColor: 'green',
backgroundColor: 'purple',
color: 'yellow',
spacingLabelAfter: 7,
borderColor: 'green',
borderRadius: 4,
borderWidth: 1,
});
const tree = renderer.create(<BoldCheckbox label="All Tokens Checkbox" onChange={onChange} defaultChecked={false} />).toJSON();
expect(tree).toMatchSnapshot();

116
packages/experimental/Checkbox/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
Просмотреть файл

@ -18,8 +18,10 @@ exports[`Checkbox component tests Checkbox all props 1`] = `
}
}
accessible={true}
circular={true}
defaultChecked={true}
disabled={true}
enableFocusRing={true}
focusable={false}
labelPosition="before"
onAccessibilityAction={[Function]}
@ -39,26 +41,25 @@ exports[`Checkbox component tests Checkbox all props 1`] = `
"alignItems": "center",
"alignSelf": "flex-start",
"backgroundColor": undefined,
"borderColor": undefined,
"borderRadius": 4,
"borderWidth": 2,
"borderRadius": 2,
"display": "flex",
"flexDirection": "row",
"marginBottom": 8,
"padding": 4,
}
}
>
<Text
style={
Object {
"borderColor": "transparent",
"borderStyle": "solid",
"color": "#a19f9d",
"fontFamily": "Segoe UI",
"fontSize": 14,
"fontWeight": "400",
"margin": 0,
"marginTop": -1,
"marginBottom": -2,
"marginLeft": 0,
"marginRight": 12,
"marginTop": -2,
}
}
>
@ -67,22 +68,21 @@ exports[`Checkbox component tests Checkbox all props 1`] = `
<View
style={
Object {
"alignItems": "center",
"backgroundColor": "#ffffff",
"borderColor": "#f3f2f1",
"borderRadius": 2,
"borderStyle": "solid",
"borderRadius": 9999,
"borderWidth": 1,
"marginEnd": 0,
"marginLeft": undefined,
"minHeight": 16,
"minWidth": 16,
"height": 16,
"justifyContent": "center",
"width": 16,
}
}
>
<RNSVGSvgView
align="xMidYMid"
bbHeight={8}
bbWidth={11}
bbHeight={10}
bbWidth={10}
color={-4342339}
focusable={false}
meetOrSlice={0}
@ -96,16 +96,14 @@ exports[`Checkbox component tests Checkbox all props 1`] = `
},
Object {
"color": "#bdbdbd",
"height": 8,
"left": 1,
"height": 10,
"opacity": 1,
"top": 3,
"width": 11,
"width": 10,
},
Object {
"flex": 0,
"height": 8,
"width": 11,
"height": 10,
"width": 10,
},
]
}
@ -154,6 +152,7 @@ exports[`Checkbox component tests Checkbox all tokens 1`] = `
}
accessible={true}
defaultChecked={false}
enableFocusRing={true}
focusable={true}
onAccessibilityAction={[Function]}
onBlur={[Function]}
@ -172,34 +171,33 @@ exports[`Checkbox component tests Checkbox all tokens 1`] = `
"alignItems": "center",
"alignSelf": "flex-start",
"backgroundColor": "purple",
"borderColor": undefined,
"borderColor": "green",
"borderRadius": 4,
"borderWidth": 2,
"borderWidth": 1,
"display": "flex",
"flexDirection": "row",
"marginBottom": 8,
"padding": 4,
}
}
>
<View
style={
Object {
"alignItems": "center",
"backgroundColor": "blue",
"borderColor": "red",
"borderRadius": 2,
"borderStyle": "solid",
"borderWidth": 1,
"marginEnd": 10,
"marginLeft": undefined,
"minHeight": 16,
"minWidth": 16,
"borderRadius": 5,
"borderWidth": 2,
"height": 16,
"justifyContent": "center",
"width": 16,
}
}
>
<RNSVGSvgView
align="xMidYMid"
bbHeight={8}
bbWidth={11}
bbHeight={10}
bbWidth={10}
color={-16181}
focusable={false}
meetOrSlice={0}
@ -213,16 +211,14 @@ exports[`Checkbox component tests Checkbox all tokens 1`] = `
},
Object {
"color": "pink",
"height": 8,
"left": 1,
"height": 10,
"opacity": 0.7,
"top": 3,
"width": 11,
"width": 10,
},
Object {
"flex": 0,
"height": 8,
"width": 11,
"height": 10,
"width": 10,
},
]
}
@ -252,14 +248,14 @@ exports[`Checkbox component tests Checkbox all tokens 1`] = `
<Text
style={
Object {
"borderColor": "green",
"borderStyle": "solid",
"color": "yellow",
"fontFamily": "Wingdings",
"fontSize": 20,
"fontWeight": "900",
"margin": 0,
"marginTop": -1,
"marginBottom": -2,
"marginLeft": 7,
"marginTop": -2,
}
}
>
@ -287,6 +283,7 @@ exports[`Checkbox component tests Checkbox default 1`] = `
}
accessible={true}
defaultChecked={false}
enableFocusRing={true}
focusable={true}
onAccessibilityAction={[Function]}
onBlur={[Function]}
@ -305,34 +302,31 @@ exports[`Checkbox component tests Checkbox default 1`] = `
"alignItems": "center",
"alignSelf": "flex-start",
"backgroundColor": undefined,
"borderColor": undefined,
"borderRadius": 4,
"borderWidth": 2,
"borderRadius": 2,
"display": "flex",
"flexDirection": "row",
"marginBottom": 8,
"padding": 4,
}
}
>
<View
style={
Object {
"alignItems": "center",
"backgroundColor": "#ffffff",
"borderColor": "#323130",
"borderRadius": 2,
"borderStyle": "solid",
"borderWidth": 1,
"marginEnd": 4,
"marginLeft": undefined,
"minHeight": 16,
"minWidth": 16,
"height": 16,
"justifyContent": "center",
"width": 16,
}
}
>
<RNSVGSvgView
align="xMidYMid"
bbHeight={8}
bbWidth={11}
bbHeight={10}
bbWidth={10}
color={-14672098}
focusable={false}
meetOrSlice={0}
@ -346,16 +340,14 @@ exports[`Checkbox component tests Checkbox default 1`] = `
},
Object {
"color": "#201f1e",
"height": 8,
"left": 1,
"height": 10,
"opacity": 0,
"top": 3,
"width": 11,
"width": 10,
},
Object {
"flex": 0,
"height": 8,
"width": 11,
"height": 10,
"width": 10,
},
]
}
@ -385,14 +377,14 @@ exports[`Checkbox component tests Checkbox default 1`] = `
<Text
style={
Object {
"borderColor": "transparent",
"borderStyle": "solid",
"color": "#323130",
"fontFamily": "Segoe UI",
"fontSize": 14,
"fontWeight": "400",
"margin": 0,
"marginTop": -1,
"marginBottom": -2,
"marginLeft": 12,
"marginTop": -2,
}
}
>

1
packages/experimental/Checkbox/src/useCheckbox.ts
Просмотреть файл

@ -79,6 +79,7 @@ export const useCheckbox = (props: CheckboxProps): CheckboxInfo => {
accessibilityActions: [{ name: 'Toggle' }],
focusable: !state.disabled,
onAccessibilityAction: onAccessibilityAction,
enableFocusRing: true,
...onKeyUpProps,
...props,
},