@microbit/ui 0.1.0-alpha.26 → 0.1.0-alpha.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -0
- package/package.json +1 -1
- package/src/Field.recipe.ts +5 -1
- package/src/SharedUIProvider.tsx +5 -0
package/README.md
CHANGED
|
@@ -84,6 +84,18 @@ node_modules/@microbit/ui/lang/ui.fr.json --ast --out-file ...` (multiple
|
|
|
84
84
|
input files merge; ids are `ui.`-namespaced so they can't collide). This
|
|
85
85
|
keeps the strings in the app's lazily loaded locale chunks rather than
|
|
86
86
|
an eagerly bundled catalog-of-all-locales.
|
|
87
|
+
|
|
88
|
+
The `locale` you pass must be the language the app actually renders in,
|
|
89
|
+
which is not always the user's language setting: apps that list languages
|
|
90
|
+
only an embedded product (e.g. MakeCode) is translated into fall back to
|
|
91
|
+
their English catalog for those, and should then pass `en`, keeping the
|
|
92
|
+
chosen language in their own settings for the embed. Everything downstream
|
|
93
|
+
reads this locale as a statement about the rendered page — `<html lang>`
|
|
94
|
+
via `SharedUIProvider`, react-aria's text direction and built-in strings,
|
|
95
|
+
`Intl` number/date formatting and plural rules. A catalog that loads but
|
|
96
|
+
has per-message gaps (an incomplete translation) is still that language;
|
|
97
|
+
only a wholesale fallback to the English catalog should claim `en`.
|
|
98
|
+
|
|
87
99
|
6. **`SharedUIProvider`** inside the `IntlProvider`, wrapping the app. It
|
|
88
100
|
passes the locale on to react-aria, which translates its own built-in
|
|
89
101
|
strings (see [Strings](#strings)); without it those follow the browser
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@microbit/ui",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.27",
|
|
4
4
|
"description": "micro:bit design-system primitives: react-aria-components + Panda CSS with a design language ported from Chakra UI v2. Ships as source; see README for the consumption setup.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
package/src/Field.recipe.ts
CHANGED
|
@@ -97,7 +97,11 @@ export const field = defineSlotRecipe({
|
|
|
97
97
|
// their own line below the label/control pair.
|
|
98
98
|
flexWrap: "wrap",
|
|
99
99
|
},
|
|
100
|
-
|
|
100
|
+
// Basis 0, not auto: the wrap container breaks lines on hypothetical
|
|
101
|
+
// sizes, and an auto basis is the label's max-content — a long
|
|
102
|
+
// translated label would push the control onto its own line instead
|
|
103
|
+
// of wrapping its text beside it.
|
|
104
|
+
label: { mb: "0", flex: "1 1 0" },
|
|
101
105
|
helperText: { width: "100%" },
|
|
102
106
|
errorMessage: { width: "100%" },
|
|
103
107
|
},
|
package/src/SharedUIProvider.tsx
CHANGED
|
@@ -42,6 +42,11 @@ export interface SharedUIProviderProps {
|
|
|
42
42
|
* doesn't own the document it's mounted in (an embedded widget), or when
|
|
43
43
|
* mounting more than one provider per page. The static `lang="en"` in
|
|
44
44
|
* index.html remains the pre-hydration default.
|
|
45
|
+
*
|
|
46
|
+
* Correct only when the IntlProvider locale is the language the app
|
|
47
|
+
* actually renders in — an app falling back wholesale to its English
|
|
48
|
+
* catalog should claim `en` there, not the user's language setting (see
|
|
49
|
+
* the README's react-intl step).
|
|
45
50
|
*/
|
|
46
51
|
setDocumentLang?: boolean;
|
|
47
52
|
children: ReactNode;
|