Skip to content

Commit

Permalink
feat: Add space-separated string support for fontVariant (#34641)
Browse files Browse the repository at this point in the history
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 #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: #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
  • Loading branch information
gabrieldonadel authored and facebook-github-bot committed Sep 14, 2022
1 parent 34fafb2 commit 09d4207
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 28 deletions.
3 changes: 2 additions & 1 deletion Libraries/Components/View/ReactNativeStyleAttributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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,
Expand Down
56 changes: 29 additions & 27 deletions Libraries/StyleSheet/StyleSheetTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -615,40 +615,42 @@ 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,
fontFamily?: string,
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,
Expand Down
50 changes: 50 additions & 0 deletions Libraries/StyleSheet/__tests__/processFontVariant-test.js
Original file line number Diff line number Diff line change
@@ -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',
]);
});
});
30 changes: 30 additions & 0 deletions Libraries/StyleSheet/processFontVariant.js
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 09d4207

Please sign in to comment.