@joanroucoux/cairn-ui 0.7.0 → 0.7.2
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/CHANGELOG.md +79 -0
- package/fesm2022/joanroucoux-cairn-ui.mjs +380 -111
- package/fesm2022/joanroucoux-cairn-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/motion.css +9 -0
- package/types/joanroucoux-cairn-ui.d.ts +96 -18
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,84 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.7.2
|
|
4
|
+
|
|
5
|
+
### Added
|
|
6
|
+
|
|
7
|
+
- `uiStaleLink` `size` input: `caption` (default, 12/17) or `label` (14/20), both at weight 500, for the dashboard
|
|
8
|
+
total's "1 cours en retard ›". The hit area stays 44px high, 40px with a mouse. `STALE_LINK_SIZES` and
|
|
9
|
+
`StaleLinkSize` are exported.
|
|
10
|
+
- `ui-line-chart` `rangeKey` input (`string | null`, default `null`): when bound, a new series interpolates and
|
|
11
|
+
fades "Départ" and the dashed line only if it comes with a new key. A new series under the same key (a reload
|
|
12
|
+
after a buy) is drawn at once, with no fade. The key may change before its series arrives; the interpolation
|
|
13
|
+
runs when the series does. Unbound, every new series interpolates, as before.
|
|
14
|
+
- `holdTransitionsUntilRendered()`: called in a constructor, it holds the transitions of the host and of everything
|
|
15
|
+
inside it until two frames after its first render, through `data-ui-settling` and the matching rule of
|
|
16
|
+
`styles/motion.css`. For a consumer element whose bound classes carry a transition.
|
|
17
|
+
|
|
18
|
+
### Changed
|
|
19
|
+
|
|
20
|
+
- `ui-button` (and the `ui-async` retry button) no longer fades its opacity when it becomes disabled, busy or
|
|
21
|
+
enabled, and a `ui-segmented` option switches its label colour at once: MOUVEMENT.md animates neither. The press
|
|
22
|
+
scale and the hover fill keep their transitions.
|
|
23
|
+
- `uiAvatarLink` draws its current-page halo as a background image, so it appears at once when the route changes;
|
|
24
|
+
the hover glow keeps its 180 ms fade.
|
|
25
|
+
- `ui-nav-item` switches its active fill (now a background image) and its text colour at once on navigation, as
|
|
26
|
+
MOUVEMENT.md §4.1 asks of the sidebar; only the hover fill keeps its 180 ms fade, and the press scale stays.
|
|
27
|
+
`ui-tab` already switched at once (scale transition only); a story now checks it.
|
|
28
|
+
|
|
29
|
+
### Fixed
|
|
30
|
+
|
|
31
|
+
- Nothing transitions on page open any more. A route's elements are created a tick before their classes are bound,
|
|
32
|
+
and a layout read in between (the router's scroll to the top, a view transition) turned the bound fill, colour
|
|
33
|
+
or switch track into a 180 ms transition. `ui-button`, `ui-async`, `ui-back-link`, `ui-nav-item`, `ui-row`,
|
|
34
|
+
`uiSwitch`, `ui-segmented` and `uiTable` now hold their transitions until rendered. Consumers already import
|
|
35
|
+
`styles/motion.css`, which carries the rule.
|
|
36
|
+
- `ui-menu` items stay on one line, left aligned (`whitespace-nowrap`, `text-left`). The menu places itself from
|
|
37
|
+
its layout size instead of its box scaled by the entry animation, and frees its right and bottom edges, so a
|
|
38
|
+
menu opened beside the right edge of a phone no longer narrows and wraps a long label.
|
|
39
|
+
|
|
40
|
+
## 0.7.1
|
|
41
|
+
|
|
42
|
+
### Added
|
|
43
|
+
|
|
44
|
+
- `uiFlipItem`: marks an item of the nearest `uiFlipList` at any depth. Once one item is marked, the list follows
|
|
45
|
+
its marked items instead of its direct children, so a page made of groups slides as one: put `uiFlipList` on the
|
|
46
|
+
element around every group (the `table`, the page column) and `uiFlipItem` on each group heading and row. A
|
|
47
|
+
removal then slides the rows below in the same group and the groups below. An item inside another item (a row
|
|
48
|
+
inside a card) moves by its own share, the card carrying the rest. A destroyed item stays followed until it
|
|
49
|
+
leaves the page (its `animate.leave` fade), and a live item that is briefly out of the list is followed again
|
|
50
|
+
once back.
|
|
51
|
+
- `ui-dialog` `busy` input (boolean, default `false`): while an action runs, Escape, a click on the backdrop and
|
|
52
|
+
a drag of the sheet leave the dialog open, the cross is disabled and the dialog carries `aria-busy`. The native
|
|
53
|
+
`cancel` and the Escape `keydown` are prevented, and a close the platform makes without asking reopens the
|
|
54
|
+
dialog. The owner disables its own buttons and still closes it through `open`.
|
|
55
|
+
- `ui-tab-bar` publishes its height as `--tab-bar-height` (`calc(52px + env(safe-area-inset-bottom))`) on the
|
|
56
|
+
root element while it is on the page. Use it instead of restating 52px for anything that must clear the bar,
|
|
57
|
+
e.g. `pb-(--tab-bar-height)`.
|
|
58
|
+
|
|
59
|
+
### Changed
|
|
60
|
+
|
|
61
|
+
- `uiFlipList` slides only when an item is added or removed. A change inside an item (a row that grows, content
|
|
62
|
+
toggled in a cell) re-measures without sliding, as MOUVEMENT.md asks of layout changes. A list without
|
|
63
|
+
`uiFlipItem` keeps following its direct children, as in 0.7.0.
|
|
64
|
+
- `ui-toaster` and `ui-action-bar` sit above `var(--tab-bar-height)`, falling back to the former
|
|
65
|
+
`calc(52px + env(safe-area-inset-bottom))` when no tab bar is on the page.
|
|
66
|
+
|
|
67
|
+
### Fixed
|
|
68
|
+
|
|
69
|
+
- `uiFlipList` measures every item from the top of the list itself, no longer from the nearest positioned
|
|
70
|
+
ancestor: a list that moved on the page without resizing (the holdings list when the detail panel lays out)
|
|
71
|
+
slides by the gap only, not from a stale place. Containers no longer need `position: relative` for it; drop
|
|
72
|
+
the `relative` added as a workaround. Positions leave out the translate of any animation running inside the
|
|
73
|
+
list (a slide in progress, an enter fade-up). A move interrupted by the next change restarts from where the
|
|
74
|
+
item is displayed.
|
|
75
|
+
- `uiHighlight` and `animate.enter` on the same element both play: the highlight starts on the next frame and,
|
|
76
|
+
while the element or a painted cell still runs a finite animation of its own, once that animation has
|
|
77
|
+
finished, waiting no longer than `--duration-base`. Angular kept the 1400 ms highlight as the longest
|
|
78
|
+
animation and dropped the enter class after one frame. The enter fade no longer needs to sit on an inner
|
|
79
|
+
element.
|
|
80
|
+
- `uiStaleLink`: the link keeps its 12/17 caption size but now extends its hit area with a `::before` pseudo-element to 44 px high (40 px with `pointer: fine`), centred on the text, so it meets the touch target of the handoff. Its `::after` chevron is unchanged.
|
|
81
|
+
|
|
3
82
|
## 0.7.0
|
|
4
83
|
|
|
5
84
|
Motion release: every animation of the Cairn V3 handoff (MOUVEMENT.md), on shared tokens, with a reduced-motion path.
|