hisd3-ui-kit 4.1.0 → 4.2.1

package/README.md

@@ -110,15 +110,15 @@ const menuItems = [
 | Component | What it is |
 | --- | --- |
 | `HISD3Provider` | Root theme provider (see above). |
-| `HISD3Sidebar` | App shell: brand block, grouped menu with accent bar on the active route, account dropdown (Settings / Logout with confirm), collapsible, optional top-nav mode (`layoutTop`). `menuItems` accept `{ key, path, name, icon, children, group, hideInMenu, disabled }`. `renderMenuLink` lets you plug in react-router's `<Link>`. Props `bareContent` + `hideHeaderBar` hand the header over to `HISD3PageHeader`. |
-| `HISD3PageHeader` / `HISD3PageBody` | Sticky top bar (breadcrumb left, actions right) plus large title + subtitle; `HISD3PageBody` is the matching padded content area. |
+| `HISD3Sidebar` | App shell (see *Scrolling* below): brand block, grouped menu with accent bar on the active route, account dropdown (Settings / Logout with confirm), collapsible, optional top-nav mode (`layoutTop`). `menuItems` accept `{ key, path, name, icon, children, group, hideInMenu, disabled }`. `renderMenuLink` lets you plug in react-router's `<Link>`. Props `bareContent` + `hideHeaderBar` hand the header over to `HISD3PageHeader`. `collapseTrigger` places the collapse control: `"edge"` (default) floats a round chevron on the sidebar's right edge, level with the top bar — it works even when the top bar is hidden, and `collapseTriggerOffset` moves it down — `"header"` puts a square button in the shell's own top bar, `"none"` renders neither. |
+| `HISD3PageHeader` / `HISD3PageBody` | Top bar (breadcrumb left, actions right) that stays pinned while the page scrolls, plus a large title + subtitle that scrolls away; `HISD3PageBody` is the matching padded content area. |
 | `HISD3Table<T>` | antd `Table` restyled (uppercase muted headers, 2px row rules) with the HISD3 pagination bar: "Total N items", square page buttons, page-size toggle. Pass `pagination={{ current, pageSize, total, onChange, pageSizeOptions?, hidePageSize? }}` or `false`. Optional `footer` strip. Cell helper classes: `hisd3-cell-primary`, `hisd3-cell-link`, `hisd3-cell-muted`. |
 | `HISD3Tabs` | Underlined filter tabs; each item may carry a `count`. |
 | `HISD3Tag` | Uppercase status pill. `variant`: `neutral` (grey, e.g. ACTIVE / IN PATIENT), `soft` (primary tint, e.g. ER PATIENT), `outline` (2px primary border, e.g. OUT PATIENT), `solid`. `tone`: `primary` \| `success` \| `warning` \| `danger` \| `default`. |
 | `HISD3Button` | `variant`: `primary` (filled), `secondary` (default, dark 2px outline), `ghost`, `danger`. Accepts all antd `Button` props (`icon`, `size`, `loading`, …). |
 | `HISD3Input` / `HISD3SearchInput` | 2px-bordered input; the search variant is the grey filled hero field with a leading icon (`compact` for a 48px version). |
 | `HISD3HeaderActions` | Spacing wrapper for the top-right controls; `divided` inserts a rule before the last child. |
-| `HISD3NotificationButton` | Soft-grey circular bell button (Facebook-style) with an unread badge; tints to the primary color while its panel is open. Props: `items` (`{ id, title, description, time, unread, avatarSrc, icon, onClick }`), `count` (defaults to the unread tally), `loading`, `size` (default 40), `onMarkAllRead`, `onSeeAll`, `emptyText`. |
+| `HISD3NotificationButton` | Soft-grey circular button with a solid bell glyph and a count pill on its top-right edge; tints to the primary color while its panel is open. Pass `icon` to swap the glyph. Props: `items` (`{ id, title, description, time, unread, avatarSrc, icon, onClick }`), `count` (defaults to the unread tally), `loading`, `size` (default 40), `icon`, `onMarkAllRead`, `onSeeAll`, `emptyText`. |
 | `HISD3AvatarMenu` | Circular avatar button with a small chevron badge (Facebook-style); clicking it opens a menu with the signed-in identity plus Settings and Logout (confirm dialog by default). Falls back to initials on a grey circle when there is no photo. Props: `account`, `avatarSrc`, `settingsUrl` / `onSettings`, `onLogout`, `confirmLogout`, `extraItems`, `shape` (`circle` \| `square`), `size` (default 40), `hideChevron`. |
 | `UserMenu` | The sidebar-footer account card, on its own. |
 
@@ -130,6 +130,20 @@ Theme utilities: `createHisd3Theme`, `hisd3AntdTheme` (red default),
 Modal, …) inherit the same tokens automatically, so use them freely alongside
 the kit.
 
+### Scrolling
+
+The shell fills exactly one viewport and the content column scrolls inside it,
+so the page header stays pinned and the document never rubber-bands ("bounces")
+past the top or bottom — the behaviour you expect from a desktop app. Nothing to
+configure; pass `scrollContent={false}` to `HISD3Sidebar` if you need the window
+to be the scroller instead (infinite scroll bound to `window`, browser scroll
+restoration, and similar).
+
+Because the scroller is the content column rather than the window, code that
+listens for `window` scroll events or calls `window.scrollTo` inside a page
+needs to target that element instead — for example
+`document.querySelector(".ant-layout-has-sider > .ant-layout")`.
+
 Typography: Archivo throughout, loaded from Google Fonts by the kit — body 400,
 headings 800. The kit defines `--font-body`, `--font-heading` and
 `--font-weight-heading` on `:root`, so your own CSS can use them, and native
@@ -141,7 +155,7 @@ Inside styled-components or CSS you can rely on antd's variables:
 `var(--ant-color-text)`, `var(--ant-color-text-tertiary)`,
 `var(--ant-color-bg-layout)`. The header controls additionally read
 `--hisd3-control-bg` / `--hisd3-control-bg-hover` (the grey circle fill) and
-`--hisd3-popup-radius`, so you can retune them per app without forking the
+`--hisd3-popup-radius`, `--hisd3-bell-stretch` (how wide the bell glyph is drawn, default `1.12`), `--hisd3-edge-trigger-bg` / `--hisd3-edge-trigger-color` (the sidebar collapse chevron, primary-filled by default), so you can retune them per app without forking the
 components.
 
 ## Migrating
@@ -150,6 +164,8 @@ components.
 
 - Wrap the app in `HISD3Provider` (the sidebar still works standalone with the red default, but the provider is what lets you pick a primary).
 - The default look changed from teal/rounded to the red/square Backoffice style. To keep teal: `<HISD3Provider primary="teal">`.
+- The collapse control now defaults to a round chevron on the sidebar edge (`collapseTrigger="edge"`). Pass `collapseTrigger="header"` for the old top-bar button, or `"none"` if your app renders its own.
+- The shell now scrolls its content column instead of the window (pinned header, no rubber-banding). Pass `scrollContent={false}` to `HISD3Sidebar` to restore window scrolling.
 - Borders are now hairline by default; pass `borders="bold"` to `HISD3Provider` to keep the 2px near-black look.
 - New `hideAccountCard` prop on `HISD3Sidebar` for apps that put the account in the header via `HISD3AvatarMenu`.
 - `HISD3Sidebar`: `logoUrl` and `styledTheme` are now optional; a primary-colored square is shown when there is no logo. `HISD3_COLORS` is deprecated in favour of `HISD3_PRESETS`.