SFDigitalServices / formio-sfds

The form.io theme for sf.gov
https://formio-sfds.herokuapp.com/
MIT License
15 stars 2 forks source link

Enable translation of autocomplete strings #170

Closed shawnbot closed 3 years ago

shawnbot commented 3 years ago

💣 ⚠️ The shouldSort: true option default is gone in this PR. You can add {"shouldSort": true} to the custom options of your component to sort the items alphabetically.

This PR enables translation of all the strings that can be configured via a select component's "custom options" JSON to control what shows up in Choices.js under certain conditions. There is a new autocomplete example that you can give ?language=debug in the query string to see the keys in context.

key English Choices option notes
autocomplete.searchPlaceholderValue "Type to search" searchPlaceholderValue The placeholder text of the search input
autocomplete.noResultsText "No results found" noResultsText
autocomplete.itemSelectText none itemSelectText Displayed on the right side of the dropdown alongside the currently highlighted option
autocomplete.maxItemText "Only {{count}} values can be added" maxItemText The {{count}} placeholder is substituted with the maxItemCount option.
autocomplete.noChoicesText "No choices to choose from" noChoicesText This should only show up if we haven't provided any static options or have a dynamic select driven by an API that doesn't return any results.
autocomplete.addItemText none addItemText ⚠️ I think that this option is only applicable when freeform values are allowed. If so, this shows up when you've typed a search string as a prompt, e.g. "Press Enter to add {{value}}", where {{value}} is substituted with the "backend" value of the option.

Each of the translation keys above can be prefixed with the component key and a . to customize the strings for that component only. For instance, yourJob.autocomplete.searchPlaceholderValue might have an English translation of "Type to search common jobs".

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/sfds/formio-sfds/k0tcfu99z
✅ Preview: https://formio-sfds-git-select-updates.sfds.vercel.app

github-actions[bot] commented 3 years ago

Size Change: +492 B (+1%)

Total Size: 89.2 kB

Filename Size Change
dist/formio-sfds.standalone.js 69.5 kB +492 B (+1%)
ℹ️ View Unchanged | Filename | Size | Change | | :--- | :---: | :---: | | `dist/common.css` | 332 B | 0 B | | `dist/formio-sfds.css` | 14 kB | 0 B | | `dist/portal.js` | 5.36 kB | 0 B |

compressed-size-action

shawnbot commented 3 years ago

Docs for this are going into the 7.2.0 release in #176.