@microbit/ui 0.1.0-alpha.25 → 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.
Files changed (5) hide show
  1. package/README.md +12 -0
  2. package/package.json +1 -1
  3. package/src/ExternalLink.tsx +1 -5
  4. package/src/Field.recipe.ts +5 -1
  5. 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.25",
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/ExternalLink.tsx CHANGED
@@ -38,10 +38,6 @@ export const ExternalLink = ({ children, ...props }: ExternalLinkProps) => (
38
38
  {", "}
39
39
  <FormattedMessage {...uiMessage("ui.new-tab-notice")} />
40
40
  </VisuallyHidden>
41
- <Icon
42
- as={RiExternalLinkLine}
43
- aria-hidden
44
- css={{ verticalAlign: "text-bottom", ml: 1 }}
45
- />
41
+ <Icon as={RiExternalLinkLine} aria-hidden css={{ ml: 1 }} />
46
42
  </Link>
47
43
  );
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
- label: { mb: "0", flex: "1 1 auto" },
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;