Icon: Set up JSON for RTL icon list #3983
Conversation
Problem: We define a list of icons in `RTLIconList.tsx` that we automatically flip for right-to-left content. This works for web, but we need to make this list available for iOS and Android. Solution: - Move the list of icons to a JSON file, and import it into `RTLIconList.tsx`. Test manually via the docs site. - Update `/foundations/international_design/rtl_guidelines/iconography` to use this same icon list. Jira: GESTALT-8856
✅ Deploy Preview for gestalt ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -1,38 +1,14 @@ | |||
| import rtlIconListJson from 'gestalt-design-tokens/src/utils/rtlIconList.json'; | |||
There was a problem hiding this comment.
I initially added this JSON file to gestalt/src/Icon/, but got error TS6307 from @rollup/plugin-typescript. This is potentially related to our use of "composite": true in packages/gestalt/tsconfig.json.
| const swapOnRtlIconNames = rtlIconListJson.swapOnRtlIconNames as ReadonlyArray< | ||
| IconName | undefined | ||
| >; | ||
| const rtlIcons = [...flipOnRtlIconNames, ...swapOnRtlIconNames].sort(); |
There was a problem hiding this comment.
Replaced the static icon list with a dynamic one so we can keep our docs up to date, and sorted the merged result to put list-numbered in the middle of the list.
One downside is that this version doesn't group icon pairs (e.g., arrow-back and arrow-forward) unless we sort the source JSON file manually.
| @@ -0,0 +1,32 @@ | |||
| { | |||
There was a problem hiding this comment.
Do we prefer camelcase, hyphens, or another format for JSON files like this one?
There was a problem hiding this comment.
I see why you put it here. I have the feeling I don't like this here as it doesn't relate to tokens.
We do need an icon repo... gestalt-design-icons.... and it should go there. One day!
Ideally we could handle the error TS6307. I'm ok keeping it here for now if we set a task for moving it out eventually.
I don't think we want to create a utils kitchen drawer within this repo.
Summary
RTLIconList.tsx. Test manually via the docs site./foundations/international_design/rtl_guidelines/iconographyto use this same icon list.
Why?
We define a list of icons in
RTLIconList.tsxthat we automaticallyflip for right-to-left content. This works for web, but we need to make
this list available for iOS and Android.
Screenshots
Before (Classic theme)
Screenshot from
/foundations/international_design/rtl_guidelines/iconography:After (Classic theme)
After (VR theme)
Links
Checklist