@jobber/components 8.9.1-TAYLORtai-ab033d4.2 → 8.9.1

package/dist/docs/ActivityIndicator/ActivityIndicator.md

@@ -1,8 +1,57 @@
 # Activity Indicator
 
-`ActivityIndicator` is used to communicate an **indeterminate** activity the
-user cannot directly control or measure — loading, fetching, or waiting on an
-external system.
+`ActivityIndicator` communicates an **indeterminate** activity the user cannot
+directly control or measure — loading, fetching, or waiting on an external
+system.
+
+Use `ActivityIndicator` when the loading time or fraction of progress is
+unknown. If you know the fraction of progress (for example, "3 of 4 files
+uploaded"), use `ProgressBar` instead. A `ProgressIndicator` counterpart that
+will subsume `ProgressBar` under the new Indicators naming is forthcoming.
+
+## Design & usage guidelines
+
+The default `ActivityIndicator` size is `base` (44px) and can be used in most
+cases. The `small` size (28px) should be used on individual elements of an
+interface (e.g. inside a `Button` or `Card`) or when sitting next to short
+inline text.
+
+Layout is the consumer's responsibility — `ActivityIndicator` does not expose an
+`inline` prop. Place it inside your own flex / inline-block container, or pass a
+`style`, to control surrounding layout.
+
+## Accessibility
+
+`ActivityIndicator` announces itself to assistive technology on every platform:
+
+* `accessibilityRole="progressbar"` and `accessibilityState={{ busy: true }}`
+  mark the component as an ongoing indeterminate activity.
+* `accessibilityLabel` defaults to a localized `"Loading"` string via
+  `useAtlantisI18n("loading")`. Pass a custom `accessibilityLabel` to describe
+  the specific activity (e.g. `accessibilityLabel="Uploading file"`).
+* On mount and whenever the label changes, the component calls
+  `AccessibilityInfo.announceForAccessibility` so VoiceOver and TalkBack
+  announce the label once.
+
+The indicator is not focusable and is not in the accessibility navigation order
+beyond the mount-time announcement.
+
+### Reduced motion
+
+When the operating system reports the Reduce Motion accessibility setting, the
+indicator hides the rocking and rotating layers, repaints a single static ring
+in the icon foreground colour, and gently pulses its opacity so the indicator
+still reads as "busy" without rotational motion. Detection is reactive — the
+component responds to OS toggles without requiring a remount.
+
+## Cross-platform parity
+
+`ActivityIndicator` renders the same Material Design 3 three-layer indeterminate
+ring on iOS, Android, and web (`@jobber/components`). The visual identity,
+sizes, motion durations, and reduced-motion fallback are unified across
+platforms. Public prop names diverge to follow each platform's native
+conventions (`accessibilityLabel` here vs `ariaLabel` on web; `style` here vs
+`className` + `style` on web).
 
 Use `ActivityIndicator` when the loading time or fraction of progress is
 unknown. If you know the fraction of progress (for example, "3 of 4 files

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.9.1-TAYLORtai-ab033d4.2+ab033d49",
+  "version": "8.9.1",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -502,7 +502,7 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
-    "@jobber/design": "0.101.2-TAYLORtai-ab033d4.31+ab033d49",
+    "@jobber/design": "0.102.0",
     "@jobber/hooks": "2.21.0",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -556,5 +556,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "ab033d49dd903b2fdfc7065e313bae8294826f36"
+  "gitHead": "2dd2b2d127e9e7e00f8db56c9a5c8ab05344e128"
 }