@oxy.so/bloom 2.12.4 → 3.0.0
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 +4 -4
- package/docs/button-group.mdx +46 -4
- package/docs/composition.mdx +159 -0
- package/docs/field.mdx +39 -1
- package/docs/glass.mdx +46 -0
- package/docs/layout.mdx +72 -4
- package/docs/migrating-to-3.0.mdx +169 -0
- package/docs/page-header.mdx +192 -36
- package/lib/commonjs/button/Button.js +2 -0
- package/lib/commonjs/button/Button.js.map +1 -1
- package/lib/commonjs/button-group/ButtonGroup.js +124 -19
- package/lib/commonjs/button-group/ButtonGroup.js.map +1 -1
- package/lib/commonjs/control-surface/ControlSurface.js +46 -0
- package/lib/commonjs/control-surface/ControlSurface.js.map +1 -0
- package/lib/commonjs/control-surface/context.js +84 -0
- package/lib/commonjs/control-surface/context.js.map +1 -0
- package/lib/commonjs/control-surface/index.js +26 -0
- package/lib/commonjs/control-surface/index.js.map +1 -0
- package/lib/commonjs/control-surface/types.js +6 -0
- package/lib/commonjs/control-surface/types.js.map +1 -0
- package/lib/commonjs/field/Field.js +71 -26
- package/lib/commonjs/field/Field.js.map +1 -1
- package/lib/commonjs/field/context.js +80 -0
- package/lib/commonjs/field/context.js.map +1 -0
- package/lib/commonjs/field/index.js +7 -0
- package/lib/commonjs/field/index.js.map +1 -1
- package/lib/commonjs/floating/TriggerSlot.js +32 -0
- package/lib/commonjs/floating/TriggerSlot.js.map +1 -1
- package/lib/commonjs/glass/GlassIsland.js +107 -0
- package/lib/commonjs/glass/GlassIsland.js.map +1 -0
- package/lib/commonjs/glass/GlassSurface.js +4 -1
- package/lib/commonjs/glass/GlassSurface.js.map +1 -1
- package/lib/commonjs/glass/index.js +7 -0
- package/lib/commonjs/glass/index.js.map +1 -1
- package/lib/commonjs/index.js +564 -517
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/index.web.js +564 -517
- package/lib/commonjs/index.web.js.map +1 -1
- package/lib/commonjs/label/Label.js +4 -1
- package/lib/commonjs/label/Label.js.map +1 -1
- package/lib/commonjs/layout/bottom-edge.js +3 -42
- package/lib/commonjs/layout/bottom-edge.js.map +1 -1
- package/lib/commonjs/layout/edge-store.js +65 -0
- package/lib/commonjs/layout/edge-store.js.map +1 -0
- package/lib/commonjs/layout/index.js +32 -0
- package/lib/commonjs/layout/index.js.map +1 -1
- package/lib/commonjs/layout/scroll-offset.js +83 -0
- package/lib/commonjs/layout/scroll-offset.js.map +1 -0
- package/lib/commonjs/layout/top-edge.js +109 -0
- package/lib/commonjs/layout/top-edge.js.map +1 -0
- package/lib/commonjs/page-header/EdgeScrim.js +136 -0
- package/lib/commonjs/page-header/EdgeScrim.js.map +1 -0
- package/lib/commonjs/page-header/PageHeader.js +236 -61
- package/lib/commonjs/page-header/PageHeader.js.map +1 -1
- package/lib/commonjs/provider/BloomProvider.js +5 -2
- package/lib/commonjs/provider/BloomProvider.js.map +1 -1
- package/lib/commonjs/social-button/OxyMark.js +2 -2
- package/lib/commonjs/social-button/OxyMark.js.map +1 -1
- package/lib/commonjs/social-button/SocialButton.js +2 -2
- package/lib/commonjs/social-button/SocialButton.js.map +1 -1
- package/lib/commonjs/styles/svg-id.js +29 -0
- package/lib/commonjs/styles/svg-id.js.map +1 -0
- package/lib/commonjs/text-field/TextField.js +39 -6
- package/lib/commonjs/text-field/TextField.js.map +1 -1
- package/lib/commonjs/theme/glass-colors.js +81 -1
- package/lib/commonjs/theme/glass-colors.js.map +1 -1
- package/lib/module/button/Button.js +2 -0
- package/lib/module/button/Button.js.map +1 -1
- package/lib/module/button-group/ButtonGroup.js +124 -19
- package/lib/module/button-group/ButtonGroup.js.map +1 -1
- package/lib/module/control-surface/ControlSurface.js +41 -0
- package/lib/module/control-surface/ControlSurface.js.map +1 -0
- package/lib/module/control-surface/context.js +77 -0
- package/lib/module/control-surface/context.js.map +1 -0
- package/lib/module/control-surface/index.js +5 -0
- package/lib/module/control-surface/index.js.map +1 -0
- package/lib/module/control-surface/types.js +4 -0
- package/lib/module/control-surface/types.js.map +1 -0
- package/lib/module/field/Field.js +72 -27
- package/lib/module/field/Field.js.map +1 -1
- package/lib/module/field/context.js +74 -0
- package/lib/module/field/context.js.map +1 -0
- package/lib/module/field/index.js +1 -0
- package/lib/module/field/index.js.map +1 -1
- package/lib/module/floating/TriggerSlot.js +33 -1
- package/lib/module/floating/TriggerSlot.js.map +1 -1
- package/lib/module/glass/GlassIsland.js +102 -0
- package/lib/module/glass/GlassIsland.js.map +1 -0
- package/lib/module/glass/GlassSurface.js +5 -2
- package/lib/module/glass/GlassSurface.js.map +1 -1
- package/lib/module/glass/index.js +1 -0
- package/lib/module/glass/index.js.map +1 -1
- package/lib/module/index.js +2 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/index.web.js +2 -1
- package/lib/module/index.web.js.map +1 -1
- package/lib/module/label/Label.js +4 -1
- package/lib/module/label/Label.js.map +1 -1
- package/lib/module/layout/bottom-edge.js +2 -41
- package/lib/module/layout/bottom-edge.js.map +1 -1
- package/lib/module/layout/edge-store.js +58 -0
- package/lib/module/layout/edge-store.js.map +1 -0
- package/lib/module/layout/index.js +8 -3
- package/lib/module/layout/index.js.map +1 -1
- package/lib/module/layout/scroll-offset.js +77 -0
- package/lib/module/layout/scroll-offset.js.map +1 -0
- package/lib/module/layout/top-edge.js +102 -0
- package/lib/module/layout/top-edge.js.map +1 -0
- package/lib/module/page-header/EdgeScrim.js +132 -0
- package/lib/module/page-header/EdgeScrim.js.map +1 -0
- package/lib/module/page-header/PageHeader.js +233 -58
- package/lib/module/page-header/PageHeader.js.map +1 -1
- package/lib/module/provider/BloomProvider.js +5 -2
- package/lib/module/provider/BloomProvider.js.map +1 -1
- package/lib/module/social-button/OxyMark.js +1 -1
- package/lib/module/social-button/OxyMark.js.map +1 -1
- package/lib/module/social-button/SocialButton.js +1 -1
- package/lib/module/social-button/SocialButton.js.map +1 -1
- package/lib/module/styles/svg-id.js +26 -0
- package/lib/module/styles/svg-id.js.map +1 -0
- package/lib/module/text-field/TextField.js +39 -6
- package/lib/module/text-field/TextField.js.map +1 -1
- package/lib/module/theme/glass-colors.js +79 -0
- package/lib/module/theme/glass-colors.js.map +1 -1
- package/lib/typescript/commonjs/button/Button.d.ts.map +1 -1
- package/lib/typescript/commonjs/button-group/ButtonGroup.d.ts.map +1 -1
- package/lib/typescript/commonjs/button-group/types.d.ts +61 -5
- package/lib/typescript/commonjs/button-group/types.d.ts.map +1 -1
- package/lib/typescript/commonjs/control-surface/ControlSurface.d.ts +4 -0
- package/lib/typescript/commonjs/control-surface/ControlSurface.d.ts.map +1 -0
- package/lib/typescript/commonjs/control-surface/context.d.ts +21 -0
- package/lib/typescript/commonjs/control-surface/context.d.ts.map +1 -0
- package/lib/typescript/commonjs/control-surface/index.d.ts +4 -0
- package/lib/typescript/commonjs/control-surface/index.d.ts.map +1 -0
- package/lib/typescript/commonjs/control-surface/types.d.ts +37 -0
- package/lib/typescript/commonjs/control-surface/types.d.ts.map +1 -0
- package/lib/typescript/commonjs/field/Field.d.ts +1 -1
- package/lib/typescript/commonjs/field/Field.d.ts.map +1 -1
- package/lib/typescript/commonjs/field/context.d.ts +55 -0
- package/lib/typescript/commonjs/field/context.d.ts.map +1 -0
- package/lib/typescript/commonjs/field/index.d.ts +2 -0
- package/lib/typescript/commonjs/field/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/field/types.d.ts +22 -3
- package/lib/typescript/commonjs/field/types.d.ts.map +1 -1
- package/lib/typescript/commonjs/floating/TriggerSlot.d.ts.map +1 -1
- package/lib/typescript/commonjs/glass/GlassIsland.d.ts +4 -0
- package/lib/typescript/commonjs/glass/GlassIsland.d.ts.map +1 -0
- package/lib/typescript/commonjs/glass/GlassSurface.d.ts.map +1 -1
- package/lib/typescript/commonjs/glass/index.d.ts +2 -1
- package/lib/typescript/commonjs/glass/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/glass/types.d.ts +43 -0
- package/lib/typescript/commonjs/glass/types.d.ts.map +1 -1
- package/lib/typescript/commonjs/index.d.ts +2 -1
- package/lib/typescript/commonjs/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/index.web.d.ts +2 -1
- package/lib/typescript/commonjs/index.web.d.ts.map +1 -1
- package/lib/typescript/commonjs/label/Label.d.ts.map +1 -1
- package/lib/typescript/commonjs/label/types.d.ts +7 -1
- package/lib/typescript/commonjs/label/types.d.ts.map +1 -1
- package/lib/typescript/commonjs/layout/bottom-edge.d.ts.map +1 -1
- package/lib/typescript/commonjs/layout/edge-store.d.ts +31 -0
- package/lib/typescript/commonjs/layout/edge-store.d.ts.map +1 -0
- package/lib/typescript/commonjs/layout/index.d.ts +8 -3
- package/lib/typescript/commonjs/layout/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/layout/scroll-offset.d.ts +16 -0
- package/lib/typescript/commonjs/layout/scroll-offset.d.ts.map +1 -0
- package/lib/typescript/commonjs/layout/top-edge.d.ts +77 -0
- package/lib/typescript/commonjs/layout/top-edge.d.ts.map +1 -0
- package/lib/typescript/commonjs/page-header/EdgeScrim.d.ts +95 -0
- package/lib/typescript/commonjs/page-header/EdgeScrim.d.ts.map +1 -0
- package/lib/typescript/commonjs/page-header/PageHeader.d.ts +1 -1
- package/lib/typescript/commonjs/page-header/PageHeader.d.ts.map +1 -1
- package/lib/typescript/commonjs/page-header/index.d.ts +1 -1
- package/lib/typescript/commonjs/page-header/index.d.ts.map +1 -1
- package/lib/typescript/commonjs/page-header/types.d.ts +97 -10
- package/lib/typescript/commonjs/page-header/types.d.ts.map +1 -1
- package/lib/typescript/commonjs/provider/BloomProvider.d.ts.map +1 -1
- package/lib/typescript/commonjs/styles/svg-id.d.ts +20 -0
- package/lib/typescript/commonjs/styles/svg-id.d.ts.map +1 -0
- package/lib/typescript/commonjs/text-field/TextField.d.ts.map +1 -1
- package/lib/typescript/commonjs/theme/glass-colors.d.ts +67 -0
- package/lib/typescript/commonjs/theme/glass-colors.d.ts.map +1 -1
- package/lib/typescript/module/button/Button.d.ts.map +1 -1
- package/lib/typescript/module/button-group/ButtonGroup.d.ts.map +1 -1
- package/lib/typescript/module/button-group/types.d.ts +61 -5
- package/lib/typescript/module/button-group/types.d.ts.map +1 -1
- package/lib/typescript/module/control-surface/ControlSurface.d.ts +4 -0
- package/lib/typescript/module/control-surface/ControlSurface.d.ts.map +1 -0
- package/lib/typescript/module/control-surface/context.d.ts +21 -0
- package/lib/typescript/module/control-surface/context.d.ts.map +1 -0
- package/lib/typescript/module/control-surface/index.d.ts +4 -0
- package/lib/typescript/module/control-surface/index.d.ts.map +1 -0
- package/lib/typescript/module/control-surface/types.d.ts +37 -0
- package/lib/typescript/module/control-surface/types.d.ts.map +1 -0
- package/lib/typescript/module/field/Field.d.ts +1 -1
- package/lib/typescript/module/field/Field.d.ts.map +1 -1
- package/lib/typescript/module/field/context.d.ts +55 -0
- package/lib/typescript/module/field/context.d.ts.map +1 -0
- package/lib/typescript/module/field/index.d.ts +2 -0
- package/lib/typescript/module/field/index.d.ts.map +1 -1
- package/lib/typescript/module/field/types.d.ts +22 -3
- package/lib/typescript/module/field/types.d.ts.map +1 -1
- package/lib/typescript/module/floating/TriggerSlot.d.ts.map +1 -1
- package/lib/typescript/module/glass/GlassIsland.d.ts +4 -0
- package/lib/typescript/module/glass/GlassIsland.d.ts.map +1 -0
- package/lib/typescript/module/glass/GlassSurface.d.ts.map +1 -1
- package/lib/typescript/module/glass/index.d.ts +2 -1
- package/lib/typescript/module/glass/index.d.ts.map +1 -1
- package/lib/typescript/module/glass/types.d.ts +43 -0
- package/lib/typescript/module/glass/types.d.ts.map +1 -1
- package/lib/typescript/module/index.d.ts +2 -1
- package/lib/typescript/module/index.d.ts.map +1 -1
- package/lib/typescript/module/index.web.d.ts +2 -1
- package/lib/typescript/module/index.web.d.ts.map +1 -1
- package/lib/typescript/module/label/Label.d.ts.map +1 -1
- package/lib/typescript/module/label/types.d.ts +7 -1
- package/lib/typescript/module/label/types.d.ts.map +1 -1
- package/lib/typescript/module/layout/bottom-edge.d.ts.map +1 -1
- package/lib/typescript/module/layout/edge-store.d.ts +31 -0
- package/lib/typescript/module/layout/edge-store.d.ts.map +1 -0
- package/lib/typescript/module/layout/index.d.ts +8 -3
- package/lib/typescript/module/layout/index.d.ts.map +1 -1
- package/lib/typescript/module/layout/scroll-offset.d.ts +16 -0
- package/lib/typescript/module/layout/scroll-offset.d.ts.map +1 -0
- package/lib/typescript/module/layout/top-edge.d.ts +77 -0
- package/lib/typescript/module/layout/top-edge.d.ts.map +1 -0
- package/lib/typescript/module/page-header/EdgeScrim.d.ts +95 -0
- package/lib/typescript/module/page-header/EdgeScrim.d.ts.map +1 -0
- package/lib/typescript/module/page-header/PageHeader.d.ts +1 -1
- package/lib/typescript/module/page-header/PageHeader.d.ts.map +1 -1
- package/lib/typescript/module/page-header/index.d.ts +1 -1
- package/lib/typescript/module/page-header/index.d.ts.map +1 -1
- package/lib/typescript/module/page-header/types.d.ts +97 -10
- package/lib/typescript/module/page-header/types.d.ts.map +1 -1
- package/lib/typescript/module/provider/BloomProvider.d.ts.map +1 -1
- package/lib/typescript/module/styles/svg-id.d.ts +20 -0
- package/lib/typescript/module/styles/svg-id.d.ts.map +1 -0
- package/lib/typescript/module/text-field/TextField.d.ts.map +1 -1
- package/lib/typescript/module/theme/glass-colors.d.ts +67 -0
- package/lib/typescript/module/theme/glass-colors.d.ts.map +1 -1
- package/package.json +15 -1
- package/src/button/Button.tsx +10 -1
- package/src/button-group/ButtonGroup.tsx +146 -19
- package/src/button-group/types.ts +68 -5
- package/src/control-surface/ControlSurface.tsx +41 -0
- package/src/control-surface/context.ts +81 -0
- package/src/control-surface/index.ts +4 -0
- package/src/control-surface/types.ts +40 -0
- package/src/field/Field.tsx +84 -27
- package/src/field/context.ts +110 -0
- package/src/field/index.ts +3 -0
- package/src/field/types.ts +22 -3
- package/src/floating/TriggerSlot.tsx +35 -1
- package/src/glass/GlassIsland.tsx +109 -0
- package/src/glass/GlassSurface.tsx +26 -2
- package/src/glass/index.ts +3 -0
- package/src/glass/types.ts +45 -0
- package/src/index.ts +6 -0
- package/src/index.web.ts +6 -0
- package/src/label/Label.tsx +3 -1
- package/src/label/types.ts +7 -1
- package/src/layout/bottom-edge.tsx +3 -56
- package/src/layout/edge-store.ts +69 -0
- package/src/layout/index.ts +8 -3
- package/src/layout/scroll-offset.ts +76 -0
- package/src/layout/top-edge.tsx +109 -0
- package/src/page-header/EdgeScrim.tsx +118 -0
- package/src/page-header/PageHeader.tsx +253 -61
- package/src/page-header/index.ts +9 -1
- package/src/page-header/types.ts +103 -10
- package/src/provider/BloomProvider.tsx +12 -1
- package/src/social-button/OxyMark.tsx +1 -1
- package/src/social-button/SocialButton.tsx +1 -1
- package/src/styles/svg-id.ts +23 -0
- package/src/text-field/TextField.tsx +44 -5
- package/src/theme/glass-colors.ts +80 -0
- package/lib/commonjs/social-button/use-svg-id.js +0 -16
- package/lib/commonjs/social-button/use-svg-id.js.map +0 -1
- package/lib/module/social-button/use-svg-id.js +0 -13
- package/lib/module/social-button/use-svg-id.js.map +0 -1
- package/lib/typescript/commonjs/social-button/use-svg-id.d.ts +0 -7
- package/lib/typescript/commonjs/social-button/use-svg-id.d.ts.map +0 -1
- package/lib/typescript/module/social-button/use-svg-id.d.ts +0 -7
- package/lib/typescript/module/social-button/use-svg-id.d.ts.map +0 -1
- package/src/social-button/use-svg-id.ts +0 -10
package/docs/page-header.mdx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: PageHeader
|
|
3
|
-
description: A screen's top
|
|
3
|
+
description: A screen's top chrome — a floating back capsule, islands of grouped actions and a gradient edge by default, or Bloom's original flat bar, with scroll-linked paint and safe-area handling on both platforms.
|
|
4
4
|
order: 105
|
|
5
5
|
---
|
|
6
6
|
|
|
@@ -8,74 +8,232 @@ order: 105
|
|
|
8
8
|
|
|
9
9
|
```tsx
|
|
10
10
|
import { PageHeader } from '@oxy.so/bloom/page-header';
|
|
11
|
+
import { ButtonGroup, ButtonGroupItem } from '@oxy.so/bloom/button-group';
|
|
11
12
|
|
|
12
13
|
<PageHeader
|
|
13
14
|
onBack={router.back}
|
|
14
|
-
title="
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
title="Lisbon loft"
|
|
16
|
+
actions={
|
|
17
|
+
<ButtonGroup accessibilityLabel="Page actions">
|
|
18
|
+
<ButtonGroupItem iconOnly leadingIcon={RiSearchLine} accessibilityLabel="Search" />
|
|
19
|
+
<ButtonGroupItem iconOnly leadingIcon={RiShare2Line} accessibilityLabel="Share" />
|
|
20
|
+
</ButtonGroup>
|
|
21
|
+
}
|
|
20
22
|
/>
|
|
21
23
|
```
|
|
22
24
|
|
|
23
25
|
Router-agnostic: the back button renders when `onBack` is set. Pass `router.back`, your app's safe-back helper, or omit it on a root screen (`router.canGoBack() ? router.back : undefined`).
|
|
24
26
|
|
|
27
|
+
## The default is floating
|
|
28
|
+
|
|
29
|
+
The header is no longer a strip. The back button sits in its own translucent capsule, the actions you declared as a group share one island, the title floats between them, and the whole thing ends in a soft vertical gradient rather than a hairline. Content passes under it.
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
( ← ) Lisbon loft ( ⌕ ↗ ) ( ⋯ )
|
|
33
|
+
|
|
34
|
+
its own island one island another
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Three things that used to be one flag are three props now:
|
|
38
|
+
|
|
39
|
+
| prop | default | |
|
|
40
|
+
| --- | --- | --- |
|
|
41
|
+
| `presentation` | `'floating'` | `'bar'` is the original opaque strip. |
|
|
42
|
+
| `placement` | `'inline'` | `'overlay'` floats the header over the content. |
|
|
43
|
+
| `scrim` / `titleReveal` | `'auto'` / `'always'` | the edge effect and the title, decided separately. |
|
|
44
|
+
|
|
45
|
+
### The islands are yours to declare
|
|
46
|
+
|
|
47
|
+
The header never infers grouping from its children's types. The `actions` slot is wrapped in a `ControlSurface` with `material: 'glass'`, so a `ButtonGroup` placed there becomes one island with no prop written on it, two `ButtonGroup`s become two islands, and a `Button` keeps its own chrome — which is what a primary action in its own accent capsule should do.
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
actions={
|
|
51
|
+
<>
|
|
52
|
+
<ButtonGroup accessibilityLabel="Page actions">
|
|
53
|
+
<ButtonGroupItem iconOnly leadingIcon={RiSearchLine} accessibilityLabel="Search" />
|
|
54
|
+
<ButtonGroupItem iconOnly leadingIcon={RiShare2Line} accessibilityLabel="Share" />
|
|
55
|
+
</ButtonGroup>
|
|
56
|
+
<Button variant="primary" size="medium">Save</Button>
|
|
57
|
+
</>
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
For an icon action that should sit flush on an island, use `ButtonGroupItem` — a `Button` paints its own fill and would read as a card inside the capsule. The full rule is in [Composition](/docs/composition).
|
|
62
|
+
|
|
63
|
+
### The edge effect
|
|
64
|
+
|
|
65
|
+
A vertical gradient of the page colour, fading to nothing **below** the header's own box — the ramp is 1.55× the header's height, so it finishes past the layout rather than at it. That overhang is the point: a translucent rectangle ends at its own bottom edge, and that edge is a line across the screen whether or not it is drawn.
|
|
66
|
+
|
|
67
|
+
It is an opacity ramp of one flat colour, not a blur of varying intensity. `backdrop-filter` and `expo-blur` both take a single radius for a whole surface; a real blur falloff needs the stacked layers `progressive-blur` uses, and is not what this is.
|
|
68
|
+
|
|
69
|
+
`scrim="auto"` fades it in over `[0, scrollThreshold]`, so it appears when content starts passing under. `"always"` paints it at rest — for a header born over a photograph. `"none"` removes it and leaves legibility to the islands alone.
|
|
70
|
+
|
|
71
|
+
**The colour is the PAGE's, and the header cannot read it.** The ramp's job is to fade content into the surface it is leaving, so its colour has to be that surface — `theme.colors.background` by default. A screen that paints its own background (a tinted section, a brand panel, a dark surface inside a light app) hands it over with `scrimColor`; without it the ramp is a wash of the wrong hue rather than a fade. Pass an **opaque** colour: the alpha belongs to the ramp, and a colour carrying its own would multiply with it.
|
|
72
|
+
|
|
73
|
+
**The islands protect themselves; the title does not.** An island carries its own material and is legible over both ends of the backdrop range (measured, in [Glass](/docs/glass)). A title is bare text on whatever is behind it, and with `scrim="auto"` there is nothing behind it until the page scrolls. So a header that sits over a photograph **at rest** needs one of two explicit answers:
|
|
74
|
+
|
|
75
|
+
- `titleReveal="onScroll"` — the photo already names the screen, and the title arrives with the scrim. This is what the hero pattern wants.
|
|
76
|
+
- `scrim="always"` — the title is the name of the screen and must be readable from the first frame, so the gradient is there from the first frame too.
|
|
77
|
+
|
|
78
|
+
Leaving both at their defaults over a hero photo is the one combination that reads as a bug, and it is a combination the header cannot resolve for you: it does not know what is behind it.
|
|
79
|
+
|
|
25
80
|
## Props
|
|
26
81
|
|
|
27
82
|
| Prop | Default | |
|
|
28
83
|
| --- | --- | --- |
|
|
29
84
|
| `title` | — | A string is the heading (`role="heading"`, `aria-level={headingLevel}`); a node renders as-is and owns its semantics. |
|
|
30
85
|
| `subtitle` | — | A string is a secondary line; a node renders as-is. |
|
|
31
|
-
| `titleAlign` | `'start'` | `'center'` centres the title on the
|
|
86
|
+
| `titleAlign` | `'start'` | `'center'` centres the title on the container whatever the two sides hold. |
|
|
32
87
|
| `headingLevel` | `1` | |
|
|
88
|
+
| `titleReveal` | `'always'` | `'onScroll'` holds the title back and fades it in — for a header over a hero the photo already names. |
|
|
89
|
+
| `presentation` | `'floating'` | `'bar'` for the flat strip. |
|
|
90
|
+
| `placement` | `'inline'` | `'overlay'` positions the header over the content and claims the top edge. |
|
|
33
91
|
| `onBack` / `backLabel` | — / `"Back"` | `backLabel` is the button's accessible name — localise it. |
|
|
34
|
-
| `leading` | — | After the back
|
|
35
|
-
| `actions` | — | End of the bar
|
|
36
|
-
| `
|
|
37
|
-
| `
|
|
38
|
-
| `
|
|
39
|
-
| `
|
|
40
|
-
| `
|
|
92
|
+
| `leading` | — | After the back capsule, before the title (an avatar, a logo). |
|
|
93
|
+
| `actions` | — | End of the bar. Floating: wrapped in a glass `ControlSurface`. |
|
|
94
|
+
| `scrim` | `'auto'` | `presentation="floating"` only. `auto` \| `always` \| `none`. |
|
|
95
|
+
| `scrimColor` | `theme.colors.background` | The opaque colour the edge effect fades from. Pass it when the screen paints a background the theme does not know about. |
|
|
96
|
+
| `border` | `'auto'` | `presentation="bar"` only. `auto` fades the separator in with scroll; `always`; `none`. |
|
|
97
|
+
| `transparent` | `false` | `presentation="bar"` only: background and shadow fade in with scroll. It no longer hides the title. |
|
|
98
|
+
| `scrollY` | — | A Reanimated `SharedValue<number>`. Omitted, the header reads `ScrollOffsetProvider`, then `window.scrollY` on web. |
|
|
99
|
+
| `scrollThreshold` | `20` | The offset over which the scroll-linked paint arrives. Over a hero, use the hero height minus the bar. |
|
|
100
|
+
| `sticky` | `true` | Web, `placement="inline"`: `position: sticky; top: 0`. No effect on native or on an overlay. |
|
|
41
101
|
| `safeArea` | native `true`, web `false` | Pads the top by the safe-area inset (read from `SafeAreaInsetsContext`; no provider → 0). |
|
|
42
102
|
|
|
43
103
|
## Look
|
|
44
104
|
|
|
45
|
-
- Bar min-height 56; side inset 16 below `sm`, 24 from `sm
|
|
46
|
-
-
|
|
47
|
-
-
|
|
48
|
-
-
|
|
49
|
-
-
|
|
105
|
+
- Bar min-height 56; side inset 16 below `sm`, 24 from `sm` — measured against the header's **container**, not the window, so a narrow desktop panel gets the narrow inset.
|
|
106
|
+
- Islands are 36 tall (a 34 control plus the hairline), 8 apart. The back capsule carries 4px of hit slop on every side, which makes it a 44pt target with nothing beside it to steal from. **A grouped item is 34 × 34 with no slop** — items in a group are adjacent, and slop on one overlaps its neighbour. Where the 44pt floor matters for every action, give each one its own island instead of grouping them.
|
|
107
|
+
- Island material: rung 1 of the surface ladder (the fill a card and a menu panel paint) at the chrome alpha — 0.72 light, 0.80 dark. See [Glass](/docs/glass) for what those two numbers buy and cost.
|
|
108
|
+
- Title `headline-medium` text-primary, subtitle `body-2-regular` secondary. Both truncate to one line.
|
|
109
|
+
- `bar`: background `background/full` (card; dark neutral-925), separator 1px (neutral-200; dark neutral-800), shadow `shadow-xs` once scrolled.
|
|
110
|
+
- No press scale. Every fade is scroll-linked, not timed, so there is no motion to reduce.
|
|
111
|
+
- **RTL** is structural rather than handled: the bar is a `flexDirection: 'row'`, which React Native mirrors, and the centred title's inset is the *wider* of the two sides applied to *both*, so it is symmetric by construction and has no side to get backwards.
|
|
112
|
+
|
|
113
|
+
## Placement, and who reserves the space
|
|
114
|
+
|
|
115
|
+
**`inline`** — the header is a sibling above the content in a column. It occupies layout; nothing passes under it and nothing needs padding. On web it is `position: sticky` unless you pass `sticky={false}`.
|
|
116
|
+
|
|
117
|
+
**`overlay`** — the header is absolutely positioned over the content, which starts at the top of the container and scrolls under the islands. The header then claims its measured height on the top-edge registry, and the content reads it:
|
|
118
|
+
|
|
119
|
+
```tsx
|
|
120
|
+
import { useTopEdgeInset } from '@oxy.so/bloom/layout';
|
|
121
|
+
|
|
122
|
+
function Screen() {
|
|
123
|
+
const inset = useTopEdgeInset();
|
|
124
|
+
return (
|
|
125
|
+
<View style={{ flex: 1 }}>
|
|
126
|
+
<ScrollView contentContainerStyle={{ paddingTop: inset }}>…</ScrollView>
|
|
127
|
+
<PageHeader title="Inbox" onBack={router.back} placement="overlay" actions={…} />
|
|
128
|
+
</View>
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
`BloomProvider` already mounts `TopEdgeProvider`. The height is **measured**, not computed from a constant plus the insets — a subtitle, an enlarged font and a notch all move it, and a computed height fails silently, with content starting a few points under the islands as if that were the design.
|
|
134
|
+
|
|
135
|
+
The claim registers in an effect, so a reader mounted in the same commit sees `0` on its first render. The header narrows that to one frame by claiming its resting height (safe area + 56) immediately.
|
|
136
|
+
|
|
137
|
+
Apply the safe area **once**: the header pads itself by `insets.top` on native, and the content's padding comes from the claim, which already includes it. Do not add `insets.top` again in the scroll container.
|
|
50
138
|
|
|
51
139
|
## Scroll
|
|
52
140
|
|
|
53
|
-
|
|
141
|
+
Everything scroll-linked interpolates over `[0, scrollThreshold]` of the resolved offset. The header resolves it in this order:
|
|
142
|
+
|
|
143
|
+
1. the `scrollY` prop,
|
|
144
|
+
2. the nearest `ScrollOffsetProvider` (`@oxy.so/bloom/layout`),
|
|
145
|
+
3. `window.scrollY` — **web only**.
|
|
54
146
|
|
|
55
|
-
|
|
56
|
-
- **A scroll container (any platform):** pass the offset.
|
|
147
|
+
On native with none of the three, the header stays at rest.
|
|
57
148
|
|
|
58
149
|
```tsx
|
|
150
|
+
import { ScrollOffsetProvider } from '@oxy.so/bloom/layout';
|
|
151
|
+
|
|
59
152
|
const scrollY = useSharedValue(0);
|
|
60
|
-
const onScroll = useAnimatedScrollHandler(
|
|
153
|
+
const onScroll = useAnimatedScrollHandler(
|
|
154
|
+
{ onScroll: (e) => { scrollY.value = e.contentOffset.y; } },
|
|
155
|
+
[scrollY],
|
|
156
|
+
);
|
|
61
157
|
|
|
62
|
-
<
|
|
63
|
-
<
|
|
158
|
+
<ScrollOffsetProvider value={scrollY}>
|
|
159
|
+
<PageHeader title="Inbox" onBack={back} sticky={false} />
|
|
160
|
+
<Animated.ScrollView onScroll={onScroll} scrollEventThrottle={16}>…</Animated.ScrollView>
|
|
161
|
+
</ScrollOffsetProvider>
|
|
64
162
|
```
|
|
65
163
|
|
|
66
|
-
|
|
164
|
+
The context is what makes a desktop panel work: `window.scrollY` never moves inside a fixed shell, so a header following it looked deliberately inert. Name `scrollY` in the handler's dependency array — without the worklets Babel plugin (Storybook, some web builds) a shared value missing from it never updates.
|
|
67
165
|
|
|
68
|
-
**Over media
|
|
166
|
+
**Over media:** let the photo start under the chrome (`placement="overlay"`, or a negative margin on the hero), and set `scrollThreshold` to the hero height minus the bar so the scrim arrives as the photo leaves. Add `titleReveal="onScroll"` if the photo already names the screen.
|
|
69
167
|
|
|
70
168
|
## Accessibility
|
|
71
169
|
|
|
72
170
|
- The title is a `heading` (level 1 by default: the page header titles the page).
|
|
73
171
|
- The container carries no landmark role. `role="banner"` would be one banner per header, and an app shell already owns the page's banner; a page header inside `main` is not a landmark in HTML either.
|
|
74
|
-
- The back button is named by `backLabel`.
|
|
172
|
+
- The back button is named by `backLabel`. Its island carries no `role="group"` — a group of one is a container a screen reader steps into for nothing.
|
|
173
|
+
- The gradient is `pointerEvents: none` and is not in the accessibility tree. The bar and the actions row are `box-none`, so the gaps between islands stay transparent to touch — a floating header covers content it does not own, and an invisible rectangle that swallowed presses across the screen would be total and silent.
|
|
174
|
+
- **Reduced transparency is not yet wired.** The islands are translucent on every device. Where the platform reports a reduce-transparency preference, Bloom does not currently read it; the material is legible over both ends of the backdrop range (see [Glass](/docs/glass)), but that is a legibility argument, not the preference being honoured.
|
|
175
|
+
|
|
176
|
+
## Platform notes
|
|
177
|
+
|
|
178
|
+
- **Web.** The material is `backdrop-filter` through `expo-blur`'s real web build; the gradient is `react-native-svg`. A browser without `backdrop-filter` still gets the tint and the hairline — the island keeps its geometry and its legibility, it just stops blurring.
|
|
179
|
+
- **iOS.** `expo-blur` provides the radius. `expo-glass-effect` is NOT used here; the tab bar is the only family on it.
|
|
180
|
+
- **Android.** The islands paint tint, hairline, sheen and rim with **no blur**, deliberately. `expo-blur` needs a `blurTarget` pointing at a `BlurTargetView` wrapping the content to blur, and a `BlurView` that is a descendant of the view it points at takes the process down with SIGSEGV — which is the only topology available to a surface that fills its own caller. The mechanism is in [Glass](/docs/glass); it has not changed for this header.
|
|
181
|
+
|
|
182
|
+
## What was measured, and where
|
|
183
|
+
|
|
184
|
+
Everything about a translucent surface that matters is a property of **painted pixels**, and jest sees markup. `scripts/verify-header-islands.mjs` drives a real Chrome over the Storybook stories, screenshots them, reloads the PNG into the page and samples a canvas — the round trip being the only way to read the composited result of a `backdrop-filter`, which exists nowhere in the DOM.
|
|
185
|
+
|
|
186
|
+
```bash
|
|
187
|
+
bun run storybook
|
|
188
|
+
node scripts/verify-header-islands.mjs --out docs/page-header-islands.png
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
Measured at 900 × 780, device scale 1, on the `teal` preset:
|
|
192
|
+
|
|
193
|
+
| property | how | result |
|
|
194
|
+
| --- | --- | --- |
|
|
195
|
+
| islands, not a strip | runs of chrome ≥20px along a line through the bar | **2** light (48, 126), **3** dark (36, 70, 36) |
|
|
196
|
+
| the island is translucent | the same back capsule over the page and over a photograph | moved **35** of 255 |
|
|
197
|
+
| the edge ends in nothing | the ramp against a deliberately mismatched scrim colour | travelled **67** of 255 |
|
|
198
|
+
| no horizontal cut | the largest single-row step down that ramp | **2** of 255 |
|
|
199
|
+
| a matched scrim is invisible | the same ramp with `scrimColor` = the page colour | travelled **0** |
|
|
200
|
+
| control | the same row sampler on `presentation="bar"` | **0** runs — a strip is one colour |
|
|
201
|
+
|
|
202
|
+
Three of those readings deserve their real explanation rather than a round number.
|
|
203
|
+
|
|
204
|
+
The ramp is measured against a **deliberately mismatched** `scrimColor`, because that is the only configuration in which its shape is visible at all: a correctly configured scrim is the page's own colour, so over the page it paints nothing and its profile is a flat line. The row below it measures exactly that — the same header, the same `scrim="always"`, the colour handed over, travelling 0.
|
|
205
|
+
|
|
206
|
+
In **light** mode the sampler reports two island runs, not three: the two action islands are 8px apart and their drop shadows meet in the gap, so at a 1-level tolerance the gap is not backdrop. The gap is visible; it is not *measurably* backdrop. In **dark** mode, where the shadow is weaker against a dark page, all three separate cleanly.
|
|
207
|
+
|
|
208
|
+
And the island fill in light mode is the card fill over a near-white page — the same relation a `Card` has to the page, read by its hairline and shadow rather than by its fill. That is deliberate, and it is why an island reads as Bloom chrome rather than as a new material.
|
|
209
|
+
|
|
210
|
+

|
|
211
|
+
|
|
212
|
+

|
|
213
|
+
|
|
214
|
+

|
|
215
|
+
|
|
216
|
+

|
|
217
|
+
|
|
218
|
+
**Not verified on a device.** Every number above is Chrome on Linux. iOS and Android have not been run for this change: the material is `expo-blur` on both and is unchanged from the `GlassSurface` the library already shipped, but the geometry, the safe-area padding, the top-edge claim and the scroll linkage have only been exercised in jest and in a browser. Android additionally paints **no blur at all** here, by the design described above, so what a device would show is the tint, the hairline, the sheen and the rim.
|
|
75
219
|
|
|
76
220
|
## Not included
|
|
77
221
|
|
|
78
|
-
- **iOS large title.** A large title that collapses into the bar needs to live inside the scroll content (so it scrolls under the
|
|
222
|
+
- **iOS large title.** A large title that collapses into the bar needs to live inside the scroll content (so it scrolls under the chrome) while the chrome lives outside it; a standalone header cannot own both without making content move at twice the scroll speed on native. `Dialog`'s own header ([Dialog](/docs/dialog)) does it because the Dialog owns its scroller.
|
|
223
|
+
- **Adaptive overflow.** Actions that do not fit are not collapsed into a menu. Declare fewer islands, or a menu of your own.
|
|
224
|
+
|
|
225
|
+
## Migrating to 3.0
|
|
226
|
+
|
|
227
|
+
**The default presentation changed.** A `<PageHeader>` with no `presentation` was a flat opaque bar and is now floating. Two ways forward:
|
|
228
|
+
|
|
229
|
+
- Keep the old look: add `presentation="bar"`. Everything else about that header is byte-for-byte what it was.
|
|
230
|
+
- Take the new one: the header is transparent, so make sure something is behind it. Either leave `placement="inline"` (the page colour shows through, which looks like the old bar minus the strip) or move to `placement="overlay"` and pad the content with `useTopEdgeInset()`.
|
|
231
|
+
|
|
232
|
+
**`transparent` no longer hides the title.** It faded the background in with scroll AND held the title back; those are `transparent` and `titleReveal="onScroll"` now. A header that wants the old combined behaviour passes both. A header that only ever wanted the fading background gets it without losing its title.
|
|
233
|
+
|
|
234
|
+
**`border` and `transparent` apply to `presentation="bar"` only.** They are ignored by the floating presentation, which has no strip and no separator; `scrim` is its counterpart.
|
|
235
|
+
|
|
236
|
+
**Icon actions want `ButtonGroupItem`.** A `Button variant="secondary"` in a floating header's actions paints its own opaque fill, which reads as a card floating over the content. It still works; it is just not the shape the islands are for.
|
|
79
237
|
|
|
80
238
|
## Migrating from app headers
|
|
81
239
|
|
|
@@ -89,13 +247,11 @@ Mention, Allo and Homiio each hand-roll a `Header` with an `options` object. The
|
|
|
89
247
|
| `options.showBackButton` (+ `useSafeBack` / `router.back` inside) | `onBack={safeBack}` — omit to hide |
|
|
90
248
|
| Homiio `showBackButton && router.canGoBack()` | `onBack={router.canGoBack() ? router.back : undefined}` |
|
|
91
249
|
| `options.leftComponents: ReactNode[]` | `leading={<>…</>}` |
|
|
92
|
-
| `options.rightComponents: ReactNode[]` | `actions={<>…</>}` |
|
|
93
|
-
| `hideBottomBorder` | `
|
|
250
|
+
| `options.rightComponents: ReactNode[]` | `actions={<>…</>}`, grouped into `ButtonGroup`s |
|
|
251
|
+
| `hideBottomBorder` | `presentation="bar"` + `border="none"` |
|
|
94
252
|
| `disableSticky` | `sticky={false}` |
|
|
95
253
|
| web `window.scrollY > 20` sticky state | built in (`scrollThreshold`, default 20) |
|
|
96
|
-
| Homiio `options.transparent` / `options.scrollThreshold` | `transparent` / `scrollThreshold` |
|
|
97
|
-
| Homiio `scrollY` | `scrollY` |
|
|
254
|
+
| Homiio `options.transparent` / `options.scrollThreshold` | `presentation="bar" transparent titleReveal="onScroll"` / `scrollThreshold` |
|
|
255
|
+
| Homiio `scrollY` | `scrollY`, or a `ScrollOffsetProvider` around the screen |
|
|
98
256
|
| Homiio `useSafeAreaInsets().top` | `safeArea` (default on native) |
|
|
99
257
|
| Mention `options.headerTitleStyle` | pass a node `title` |
|
|
100
|
-
|
|
101
|
-
Two visual changes: the title is `headline-medium` (16/22, 500) instead of 18/800, and the back button is a pill icon button instead of a bare arrow.
|
|
@@ -132,6 +132,8 @@ const ButtonGradientFill = /*#__PURE__*/(0, _react.memo)(function ButtonGradient
|
|
|
132
132
|
overflow: 'hidden'
|
|
133
133
|
}],
|
|
134
134
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
|
|
135
|
+
width: "100%",
|
|
136
|
+
height: "100%",
|
|
135
137
|
style: _reactNative.StyleSheet.absoluteFill,
|
|
136
138
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
|
|
137
139
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.LinearGradient, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeSvg","_reactNativeCss","_useTheme","_Typography","_useInteractionState","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_HIT_SLOP","xs","top","bottom","left","right","small","medium","large","LINK_HIT_SLOP","SQUARE_HIT_SLOP","ButtonPressable","Pressable","StyledPressable","styled","className","buttonGradientIdCounter","ButtonGradientFill","memo","gradient","radius","id","useMemo","jsx","View","pointerEvents","style","StyleSheet","absoluteFill","borderRadius","overflow","children","jsxs","Defs","LinearGradient","x1","y1","x2","y2","Stop","offset","stopColor","Rect","x","y","width","height","fill","ButtonComponent","onPress","disabled","variant","variantProp","size","sizeProp","textStyle","icon","iconPosition","leadingIcon","LeadingIcon","trailingIcon","TrailingIcon","iconOnly","linkTone","underline","textVariant","numberOfLines","href","loading","loadingColor","accessibilityLabel","accessibilityHint","accessibilityRole","hitSlop","testID","ariaExpanded","ariaHasPopup","theme","useTheme","BUTTON_SIZE_ALIAS","geometry","BUTTON_GEOMETRY","isIconVariant","isSquare","isText","isLink","isInteractionBlocked","iconSize","ICON_BUTTON_ICON_SIZE","palette","resolveButtonPalette","underlineMode","resolveButtonUnderline","state","pressed","onIn","onPressedIn","onOut","onPressedOut","useInteractionState","hovered","onHoveredIn","onHoveredOut","handlePressIn","undefined","handlePressOut","paint","active","hover","rest","baseStyles","styles","alignItems","justifyContent","flexDirection","gap","paddingHorizontal","BUTTON_RADIUS","borderWidth","borderColor","border","backgroundColor","background","shadow","boxShadow","BUTTON_SHADOW","isDark","disabledOpacity","opacity","iconOnlyWidth","paddingVertical","LINK_BUTTON_GAP","computedTextStyle","labelPaddingHorizontal","color","foreground","textDecorationLine","defaultHitSlop","IconFromProp","isIconComponent","iconNode","content","Fragment","Text","type","handlePress","Linking","openURL","onPressIn","onPressOut","onHoverIn","onHoverOut","loadingHiddenContent","importantForAccessibility","accessibilityElementsHidden","loadingOverlay","ActivityIndicator","create","Button","exports","displayName","PrimaryButton","props","SecondaryButton","IconButton","GhostButton","InverseButton","TextButton","OutlineButton","LinkButton","DestructiveButton"],"sourceRoot":"../../../src","sources":["button/Button.tsx"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeSvg","_reactNativeCss","_useTheme","_Typography","_useInteractionState","_shared","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SIZE_HIT_SLOP","xs","top","bottom","left","right","small","medium","large","LINK_HIT_SLOP","SQUARE_HIT_SLOP","ButtonPressable","Pressable","StyledPressable","styled","className","buttonGradientIdCounter","ButtonGradientFill","memo","gradient","radius","id","useMemo","jsx","View","pointerEvents","style","StyleSheet","absoluteFill","borderRadius","overflow","children","jsxs","width","height","Defs","LinearGradient","x1","y1","x2","y2","Stop","offset","stopColor","Rect","x","y","fill","ButtonComponent","onPress","disabled","variant","variantProp","size","sizeProp","textStyle","icon","iconPosition","leadingIcon","LeadingIcon","trailingIcon","TrailingIcon","iconOnly","linkTone","underline","textVariant","numberOfLines","href","loading","loadingColor","accessibilityLabel","accessibilityHint","accessibilityRole","hitSlop","testID","ariaExpanded","ariaHasPopup","theme","useTheme","BUTTON_SIZE_ALIAS","geometry","BUTTON_GEOMETRY","isIconVariant","isSquare","isText","isLink","isInteractionBlocked","iconSize","ICON_BUTTON_ICON_SIZE","palette","resolveButtonPalette","underlineMode","resolveButtonUnderline","state","pressed","onIn","onPressedIn","onOut","onPressedOut","useInteractionState","hovered","onHoveredIn","onHoveredOut","handlePressIn","undefined","handlePressOut","paint","active","hover","rest","baseStyles","styles","alignItems","justifyContent","flexDirection","gap","paddingHorizontal","BUTTON_RADIUS","borderWidth","borderColor","border","backgroundColor","background","shadow","boxShadow","BUTTON_SHADOW","isDark","disabledOpacity","opacity","iconOnlyWidth","paddingVertical","LINK_BUTTON_GAP","computedTextStyle","labelPaddingHorizontal","color","foreground","textDecorationLine","defaultHitSlop","IconFromProp","isIconComponent","iconNode","content","Fragment","Text","type","handlePress","Linking","openURL","onPressIn","onPressOut","onHoverIn","onHoverOut","loadingHiddenContent","importantForAccessibility","accessibilityElementsHidden","loadingOverlay","ActivityIndicator","create","Button","exports","displayName","PrimaryButton","props","SecondaryButton","IconButton","GhostButton","InverseButton","TextButton","OutlineButton","LinkButton","DestructiveButton"],"sourceRoot":"../../../src","sources":["button/Button.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,18 +6,37 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.ButtonGroupItem = exports.ButtonGroup = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
|
+
var _index = require("../control-surface/index.js");
|
|
10
|
+
var _index2 = require("../glass/index.js");
|
|
9
11
|
var _useTheme = require("../theme/use-theme.js");
|
|
10
12
|
var _Typography = require("../typography/Typography.js");
|
|
11
13
|
var _useInteractionState = require("../hooks/use-interaction-state.js");
|
|
14
|
+
var _surfaceLevels = require("../styles/surface-levels.js");
|
|
12
15
|
var _interactiveWebCss = require("../styles/interactive-web-css.js");
|
|
16
|
+
var _colorUtils = require("../theme/color-utils.js");
|
|
13
17
|
var _shared = require("../button/shared.js");
|
|
14
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
19
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
16
20
|
/**
|
|
17
|
-
* A group of
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
+
* A group of buttons the consumer has declared as ONE control.
|
|
22
|
+
*
|
|
23
|
+
* ── TWO MATERIALS, ONE GROUP ────────────────────────────────────────────────
|
|
24
|
+
*
|
|
25
|
+
* `solid` is the original: one bordered, shadowed container, items divided by
|
|
26
|
+
* 1px hairlines, only the outer ends rounded, colours from the same
|
|
27
|
+
* Bloom-derived ramps as `Button` (`button/shared.ts`).
|
|
28
|
+
*
|
|
29
|
+
* `glass` is the same group as a floating ISLAND — one translucent pane
|
|
30
|
+
* (`glass/GlassIsland`) that the items sit FLUSH on. The group owns the
|
|
31
|
+
* material and the items paint no fill of their own at rest; a second fill
|
|
32
|
+
* under a translucent pane is the thing that makes a row of controls read as a
|
|
33
|
+
* row of cards rather than as one island, and a second BLUR is not available at
|
|
34
|
+
* all on Android.
|
|
35
|
+
*
|
|
36
|
+
* Neither is a decoration a caller has to ask for by name. The variant is
|
|
37
|
+
* INHERITED from the nearest `ControlSurface`, so `<ButtonGroup>` inside a
|
|
38
|
+
* floating `PageHeader` is glass and the same group inside a card is solid,
|
|
39
|
+
* with no prop either way. An explicit `variant` still wins.
|
|
21
40
|
*
|
|
22
41
|
* medium small
|
|
23
42
|
* item h 34 30 (plus the container's 1px border = 36 / 32)
|
|
@@ -68,6 +87,51 @@ function resolveGroupPalette(theme) {
|
|
|
68
87
|
};
|
|
69
88
|
}
|
|
70
89
|
|
|
90
|
+
/**
|
|
91
|
+
* The items' paint on a GLASS island.
|
|
92
|
+
*
|
|
93
|
+
* Every state that is not "at rest" is an alpha of the theme's own `text` — an
|
|
94
|
+
* ink wash, not a fill. That is the one recipe that works on a pane whose
|
|
95
|
+
* composited colour Bloom cannot predict: a fixed neutral tuned against the
|
|
96
|
+
* island's own fill goes invisible the moment a photograph behind it moves the
|
|
97
|
+
* pane 40 levels, while a wash of the label's colour keeps the same relation to
|
|
98
|
+
* the label at every composite.
|
|
99
|
+
*
|
|
100
|
+
* `transparent` at rest is load-bearing rather than tidy. It is what makes the
|
|
101
|
+
* island ONE pane: give the items a fill and the group is a row of chips inside
|
|
102
|
+
* a capsule, which is the shape this variant exists to stop.
|
|
103
|
+
*
|
|
104
|
+
* The disabled label is read off the island's own fill with `surfaceTextOn`
|
|
105
|
+
* rather than picked from the ramp, because a ramp stop measured against the
|
|
106
|
+
* page is not measured against this surface.
|
|
107
|
+
*/
|
|
108
|
+
function resolveGlassItemPalette(theme) {
|
|
109
|
+
const {
|
|
110
|
+
accent
|
|
111
|
+
} = (0, _shared.resolveButtonRamps)(theme);
|
|
112
|
+
const level = (0, _surfaceLevels.resolveSurfaceLevel)(theme, 1);
|
|
113
|
+
const ink = theme.colors.text;
|
|
114
|
+
const wash = theme.isDark ? {
|
|
115
|
+
hover: 0.12,
|
|
116
|
+
active: 0.2
|
|
117
|
+
} : {
|
|
118
|
+
hover: 0.08,
|
|
119
|
+
active: 0.14
|
|
120
|
+
};
|
|
121
|
+
return {
|
|
122
|
+
// The island owns the box: the group draws neither border nor divider.
|
|
123
|
+
groupBorder: 'transparent',
|
|
124
|
+
divider: (0, _colorUtils.withAlpha)(ink, theme.isDark ? 0.16 : 0.12),
|
|
125
|
+
background: 'transparent',
|
|
126
|
+
hover: (0, _colorUtils.withAlpha)(ink, wash.hover),
|
|
127
|
+
active: (0, _colorUtils.withAlpha)(ink, wash.active),
|
|
128
|
+
disabledBackground: 'transparent',
|
|
129
|
+
foreground: ink,
|
|
130
|
+
disabledForeground: level.textGraphical,
|
|
131
|
+
ring: accent[500]
|
|
132
|
+
};
|
|
133
|
+
}
|
|
134
|
+
|
|
71
135
|
// ---------------------------------------------------------------------------
|
|
72
136
|
// Keyboard focus on web — an inset `ring-2`. Items are react-native-web
|
|
73
137
|
// `Pressable`s, so the rules hang off a `dataSet` attribute (a class never
|
|
@@ -104,7 +168,9 @@ ${SELECTOR}${_interactiveWebCss.NOT_DISABLED}:focus-visible {
|
|
|
104
168
|
const IS_WEB = _reactNative.Platform.OS === 'web';
|
|
105
169
|
const GroupContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
106
170
|
const ButtonGroupComponent = ({
|
|
107
|
-
|
|
171
|
+
variant,
|
|
172
|
+
size: sizeProp,
|
|
173
|
+
dividers,
|
|
108
174
|
children,
|
|
109
175
|
accessibilityLabel,
|
|
110
176
|
style,
|
|
@@ -112,12 +178,36 @@ const ButtonGroupComponent = ({
|
|
|
112
178
|
}) => {
|
|
113
179
|
const theme = (0, _useTheme.useTheme)();
|
|
114
180
|
(0, _interactiveWebCss.useInteractiveWebCss)(STYLE_ID, BUTTON_GROUP_CSS);
|
|
115
|
-
const
|
|
181
|
+
const material = (0, _index.useInheritedControl)('material', variant, 'solid');
|
|
182
|
+
const size = (0, _index.useInheritedControl)('density', sizeProp, 'medium');
|
|
183
|
+
const palette = (0, _react.useMemo)(() => material === 'glass' ? resolveGlassItemPalette(theme) : resolveGroupPalette(theme), [material, theme]);
|
|
116
184
|
const context = (0, _react.useMemo)(() => ({
|
|
117
185
|
size,
|
|
186
|
+
material,
|
|
118
187
|
palette
|
|
119
|
-
}), [size, palette]);
|
|
188
|
+
}), [size, material, palette]);
|
|
120
189
|
const items = _react.Children.toArray(children).filter(_react.isValidElement);
|
|
190
|
+
const showDividers = dividers ?? material === 'solid';
|
|
191
|
+
const row = items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
192
|
+
children: [showDividers && index > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
193
|
+
style: {
|
|
194
|
+
width: 1,
|
|
195
|
+
backgroundColor: palette.divider
|
|
196
|
+
}
|
|
197
|
+
}) : null, item]
|
|
198
|
+
}, item.key ?? index));
|
|
199
|
+
if (material === 'glass') {
|
|
200
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(GroupContext.Provider, {
|
|
201
|
+
value: context,
|
|
202
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.GlassIsland, {
|
|
203
|
+
role: "group",
|
|
204
|
+
accessibilityLabel: accessibilityLabel,
|
|
205
|
+
style: style,
|
|
206
|
+
testID: testID,
|
|
207
|
+
children: row
|
|
208
|
+
})
|
|
209
|
+
});
|
|
210
|
+
}
|
|
121
211
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(GroupContext.Provider, {
|
|
122
212
|
value: context,
|
|
123
213
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
@@ -135,34 +225,40 @@ const ButtonGroupComponent = ({
|
|
|
135
225
|
boxShadow: _shared.BUTTON_SHADOW[theme.isDark ? 'dark' : 'light'],
|
|
136
226
|
overflow: 'hidden'
|
|
137
227
|
}, style],
|
|
138
|
-
children:
|
|
139
|
-
children: [index > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
140
|
-
style: {
|
|
141
|
-
width: 1,
|
|
142
|
-
backgroundColor: palette.divider
|
|
143
|
-
}
|
|
144
|
-
}) : null, item]
|
|
145
|
-
}, item.key ?? index))
|
|
228
|
+
children: row
|
|
146
229
|
})
|
|
147
230
|
});
|
|
148
231
|
};
|
|
149
232
|
const ButtonGroupItemComponent = ({
|
|
150
233
|
onPress,
|
|
234
|
+
onLongPress,
|
|
151
235
|
children,
|
|
152
236
|
size: sizeProp,
|
|
237
|
+
variant,
|
|
153
238
|
selected = false,
|
|
154
239
|
disabled = false,
|
|
155
240
|
iconOnly = false,
|
|
156
241
|
leadingIcon: LeadingIcon,
|
|
157
242
|
trailingIcon: TrailingIcon,
|
|
158
243
|
accessibilityLabel,
|
|
244
|
+
accessibilityRole = 'button',
|
|
245
|
+
hitSlop,
|
|
246
|
+
'aria-expanded': ariaExpanded,
|
|
247
|
+
'aria-haspopup': ariaHasPopup,
|
|
159
248
|
style,
|
|
160
249
|
testID
|
|
161
250
|
}) => {
|
|
162
251
|
const theme = (0, _useTheme.useTheme)();
|
|
163
252
|
const group = (0, _react.useContext)(GroupContext);
|
|
164
|
-
|
|
165
|
-
|
|
253
|
+
// An item can be rendered OUTSIDE its group's children — an anchored family's
|
|
254
|
+
// `asChild` trigger clones it into the caller's tree — so the material falls
|
|
255
|
+
// back to the inherited `ControlSurface` (which `GlassIsland` mounts) before
|
|
256
|
+
// it falls back to `solid`.
|
|
257
|
+
const inheritedMaterial = (0, _index.useInheritedControl)('material', undefined, 'solid');
|
|
258
|
+
const inheritedDensity = (0, _index.useInheritedControl)('density', undefined, 'medium');
|
|
259
|
+
const material = variant ?? group?.material ?? inheritedMaterial;
|
|
260
|
+
const palette = (0, _react.useMemo)(() => group && group.material === material ? group.palette : material === 'glass' ? resolveGlassItemPalette(theme) : resolveGroupPalette(theme), [group, material, theme]);
|
|
261
|
+
const size = sizeProp ?? group?.size ?? inheritedDensity;
|
|
166
262
|
const geometry = GEOMETRY[size];
|
|
167
263
|
const {
|
|
168
264
|
state: hovered,
|
|
@@ -186,6 +282,10 @@ const ButtonGroupItemComponent = ({
|
|
|
186
282
|
justifyContent: 'center',
|
|
187
283
|
gap: 4,
|
|
188
284
|
backgroundColor: background,
|
|
285
|
+
// On glass the island does not clip (a clipping node loses its iOS drop
|
|
286
|
+
// shadow), so the item rounds its OWN highlight. On solid the container
|
|
287
|
+
// clips and a square item is what makes the fused ends read as one pill.
|
|
288
|
+
borderRadius: material === 'glass' ? _shared.BUTTON_RADIUS : undefined,
|
|
189
289
|
'--bloom-button-group-ring': palette.ring
|
|
190
290
|
};
|
|
191
291
|
const labelStyle = {
|
|
@@ -199,21 +299,26 @@ const ButtonGroupItemComponent = ({
|
|
|
199
299
|
} : {}),
|
|
200
300
|
style: [containerStyle, style],
|
|
201
301
|
onPress: disabled ? undefined : onPress,
|
|
302
|
+
onLongPress: disabled ? undefined : onLongPress,
|
|
202
303
|
onPressIn: disabled ? undefined : onPressIn,
|
|
203
304
|
onPressOut: disabled ? undefined : onPressOut,
|
|
204
305
|
onHoverIn: onHoverIn,
|
|
205
306
|
onHoverOut: onHoverOut,
|
|
307
|
+
hitSlop: hitSlop,
|
|
206
308
|
disabled: disabled,
|
|
207
|
-
accessibilityRole:
|
|
309
|
+
accessibilityRole: accessibilityRole,
|
|
208
310
|
accessibilityLabel: accessibilityLabel
|
|
209
311
|
// Both spellings: react-native-web reads only `aria-pressed`, React Native
|
|
210
312
|
// has no `aria-pressed` and reads `accessibilityState`.
|
|
211
313
|
,
|
|
212
314
|
accessibilityState: {
|
|
213
315
|
disabled,
|
|
214
|
-
selected
|
|
316
|
+
selected,
|
|
317
|
+
expanded: ariaExpanded
|
|
215
318
|
},
|
|
216
319
|
"aria-pressed": selected,
|
|
320
|
+
"aria-expanded": ariaExpanded,
|
|
321
|
+
"aria-haspopup": ariaHasPopup,
|
|
217
322
|
testID: testID,
|
|
218
323
|
children: [LeadingIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LeadingIcon, {
|
|
219
324
|
width: geometry.iconSize,
|