feat(font): Adding Stylistics As New FontVariant Values

[gedeagas]

PR Reference
facebook/react-native#34003

Adding stylistics as new fontvariant values.

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',
  >,

[gedeagas]

Hi @Simek, sorry to bother you, can you add this PR with Wait on future Release tag. Thanks

[netlify]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	45b49be
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/6317181dfd4e4c00083c1532
😎 Deploy Preview	https://deploy-preview-3272--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Simek]

Suggested change

	| array of enum(`'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'`) | `[]` |
	| array of enum(`'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'`) | `[]` |

Unfortunately, making table row multiline breaks the MD renderer.

[gedeagas]

Done, Thank you for the feedback @Simek

[Simek]

The table still appears broken after the deploy with the suggested changes, so it looks like I need to checkout out it locally to looks at it and fix it. 😅 Maybe you would like to give it a try @gedeagas ?

[gedeagas]

wait, let me check again. sorry for the inconvenience

[Simek]

Hmm, it looks like the table is still displaying incorrectly. 🤔

[gedeagas]

Hi sorry, i havent push the fix yet. will do later today

…

On Fri, Sep 23, 2022, 2:07 PM Bartosz Kaszubowski ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In docs/text-style-props.md <#3272 (comment)> : > +| array of enum(`'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'`) | `[]` | Hmm, it looks like the table is still displaying incorrectly. 🤔 — Reply to this email directly, view it on GitHub <#3272 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACDVILFUNW2XFAF4KBIOYA3V7VJJJANCNFSM57DBOLVQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[Simek]

Hello @gedeagas, are you planning to look at this changeset in the near future?

[gedeagas]

Yes, I am!, sorry i forgot about this. Will check again by today.

…

On Sat, 5 Nov 2022 at 2.46 PM Bartosz Kaszubowski ***@***.***> wrote: Hello @gedeagas <https://github.com/gedeagas>, are you planning to look at this changeset in the near future? — Reply to this email directly, view it on GitHub <#3272 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACDVILGWSOLUNNSEJZERT33WGYGGZANCNFSM57DBOLVQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[pke]

I wonder why the decision was made translate the OTF feature strings like pnum or in that case ss01 into RN own enums? Why not just use the ones the official standard uses (and every web developer knows from CSS!)?

This would also instantly solve the documentation situation as the docs could just point to CSS or OTF docs for fontVariant.

I wanted to add stylistic sets myself in the past and checked the RN code and didn't understand why the team hasn't just passed the string to the render engine (works in Android). Its more complicated in iOS but a simple mapper from string parts "pnum ss01" like you would do in CSS would have helped there too and would have included stylistic from the get go.

Would you accept a PR with an alternative variant (notation like in CSS) and less repetitive code?
It could be back compatible accepting an array as before and newly a string.

fontVariant=["..."]
fontVariant="pnum ss01"

[Simek]

Hey @gedeagas, thanks for the contribution! 👍

Since the PR was not updated recently, closing it in favour of:

• update fontVariant possible enums list #4702