feat: Add space-separated string support for fontVariant (#34641)
Summary: This updates `fontVariant` to support space-separated string values, i.e., `'small-caps common-ligatures'`, thus aligning it with the [CSS Fonts Module Level 4](https://drafts.csswg.org/css-fonts/#font-variant-prop) specification as requested on https://github.com/facebook/react-native/issues/34425. This also adds unit tests to the `processFontVariant` function ensuring the style processing works as expected. ## Changelog [General] [Added] - Add space-separated string support for fontVariant Pull Request resolved: https://github.com/facebook/react-native/pull/34641 Test Plan: This can be tested either through `processFontVariant-tests` or by using the following code: ```js <Text style={{ fontVariant: 'small-caps common-ligatures', }} /> ``` Reviewed By: javache Differential Revision: D39423317 Pulled By: cipolleschi fbshipit-source-id: ad971addb423ed338e178528a11fe9d456c03e6e
This commit is contained in:
Родитель
34fafb2b88
Коммит
09d420707f
|
@ -10,6 +10,7 @@
|
|||
|
||||
import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
|
||||
import processColor from '../../StyleSheet/processColor';
|
||||
import processFontVariant from '../../StyleSheet/processFontVariant';
|
||||
import processTransform from '../../StyleSheet/processTransform';
|
||||
import sizesDiffer from '../../Utilities/differ/sizesDiffer';
|
||||
|
||||
|
@ -120,7 +121,7 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
|
|||
fontFamily: true,
|
||||
fontSize: true,
|
||||
fontStyle: true,
|
||||
fontVariant: true,
|
||||
fontVariant: {process: processFontVariant},
|
||||
fontWeight: true,
|
||||
includeFontPadding: true,
|
||||
letterSpacing: true,
|
||||
|
|
|
@ -615,6 +615,34 @@ export type ____FontWeight_Internal =
|
|||
| 'heavy'
|
||||
| 'black';
|
||||
|
||||
export type ____FontVariantArray_Internal = $ReadOnlyArray<
|
||||
| 'small-caps'
|
||||
| 'oldstyle-nums'
|
||||
| 'lining-nums'
|
||||
| 'tabular-nums'
|
||||
| 'proportional-nums'
|
||||
| 'stylistic-one'
|
||||
| 'stylistic-two'
|
||||
| 'stylistic-three'
|
||||
| 'stylistic-four'
|
||||
| 'stylistic-five'
|
||||
| 'stylistic-six'
|
||||
| 'stylistic-seven'
|
||||
| 'stylistic-eight'
|
||||
| 'stylistic-nine'
|
||||
| 'stylistic-ten'
|
||||
| 'stylistic-eleven'
|
||||
| 'stylistic-twelve'
|
||||
| 'stylistic-thirteen'
|
||||
| 'stylistic-fourteen'
|
||||
| 'stylistic-fifteen'
|
||||
| 'stylistic-sixteen'
|
||||
| 'stylistic-seventeen'
|
||||
| 'stylistic-eighteen'
|
||||
| 'stylistic-nineteen'
|
||||
| 'stylistic-twenty',
|
||||
>;
|
||||
|
||||
export type ____TextStyle_InternalCore = $ReadOnly<{
|
||||
...$Exact<____ViewStyle_Internal>,
|
||||
color?: ____ColorValue_Internal,
|
||||
|
@ -622,33 +650,7 @@ export type ____TextStyle_InternalCore = $ReadOnly<{
|
|||
fontSize?: number,
|
||||
fontStyle?: 'normal' | 'italic',
|
||||
fontWeight?: ____FontWeight_Internal,
|
||||
fontVariant?: $ReadOnlyArray<
|
||||
| 'small-caps'
|
||||
| 'oldstyle-nums'
|
||||
| 'lining-nums'
|
||||
| 'tabular-nums'
|
||||
| 'proportional-nums'
|
||||
| 'stylistic-one'
|
||||
| 'stylistic-two'
|
||||
| 'stylistic-three'
|
||||
| 'stylistic-four'
|
||||
| 'stylistic-five'
|
||||
| 'stylistic-six'
|
||||
| 'stylistic-seven'
|
||||
| 'stylistic-eight'
|
||||
| 'stylistic-nine'
|
||||
| 'stylistic-ten'
|
||||
| 'stylistic-eleven'
|
||||
| 'stylistic-twelve'
|
||||
| 'stylistic-thirteen'
|
||||
| 'stylistic-fourteen'
|
||||
| 'stylistic-fifteen'
|
||||
| 'stylistic-sixteen'
|
||||
| 'stylistic-seventeen'
|
||||
| 'stylistic-eighteen'
|
||||
| 'stylistic-nineteen'
|
||||
| 'stylistic-twenty',
|
||||
>,
|
||||
fontVariant?: ____FontVariantArray_Internal | string,
|
||||
textShadowOffset?: $ReadOnly<{
|
||||
width: number,
|
||||
height: number,
|
||||
|
|
|
@ -0,0 +1,50 @@
|
|||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @emails oncall+react_native
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
const processFontVariant = require('../processFontVariant');
|
||||
|
||||
describe('processFontVariant', () => {
|
||||
it('should accept arrays', () => {
|
||||
expect(processFontVariant([])).toEqual([]);
|
||||
expect(processFontVariant(['oldstyle-nums'])).toEqual(['oldstyle-nums']);
|
||||
expect(processFontVariant(['proportional-nums', 'lining-nums'])).toEqual([
|
||||
'proportional-nums',
|
||||
'lining-nums',
|
||||
]);
|
||||
});
|
||||
|
||||
it('should accept string values', () => {
|
||||
expect(processFontVariant('oldstyle-nums')).toEqual(['oldstyle-nums']);
|
||||
expect(processFontVariant('lining-nums ')).toEqual(['lining-nums']);
|
||||
expect(processFontVariant(' tabular-nums')).toEqual(['tabular-nums']);
|
||||
});
|
||||
|
||||
it('should accept string with multiple values', () => {
|
||||
expect(processFontVariant('oldstyle-nums lining-nums')).toEqual([
|
||||
'oldstyle-nums',
|
||||
'lining-nums',
|
||||
]);
|
||||
expect(
|
||||
processFontVariant('proportional-nums oldstyle-nums lining-nums'),
|
||||
).toEqual(['proportional-nums', 'oldstyle-nums', 'lining-nums']);
|
||||
expect(
|
||||
processFontVariant(
|
||||
' small-caps proportional-nums oldstyle-nums lining-nums',
|
||||
),
|
||||
).toEqual([
|
||||
'small-caps',
|
||||
'proportional-nums',
|
||||
'oldstyle-nums',
|
||||
'lining-nums',
|
||||
]);
|
||||
});
|
||||
});
|
|
@ -0,0 +1,30 @@
|
|||
/**
|
||||
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*
|
||||
* @format
|
||||
* @flow
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
import type {____FontVariantArray_Internal} from './StyleSheetTypes';
|
||||
|
||||
function processFontVariant(
|
||||
fontVariant: ____FontVariantArray_Internal | string,
|
||||
): ?____FontVariantArray_Internal {
|
||||
if (Array.isArray(fontVariant)) {
|
||||
return fontVariant;
|
||||
}
|
||||
|
||||
// $FlowFixMe[incompatible-type]
|
||||
const match: ?____FontVariantArray_Internal = fontVariant
|
||||
.split(' ')
|
||||
.filter(Boolean);
|
||||
|
||||
return match;
|
||||
}
|
||||
|
||||
module.exports = processFontVariant;
|
Загрузка…
Ссылка в новой задаче