pixelize-design-library 2.4.2-beta.48 → 2.4.2-beta.49

package/CHANGELOG.md

@@ -43,6 +43,13 @@ next major.
 
 ### Changed
 
+- **Control heights: `xs` 24px → 28px, `sm` 32px → 35px.** `md` (40px) and `lg` (48px) are
+  unchanged. `CONTROL_SIZES` is the one scale behind every field, select and button, so `Button`,
+  `TextInput`, `InputTextArea`, `NumberInput`, `PinInput`, `Select`, `SelectV2`, `SearchSelect`,
+  `SelectSearch`, `Search`, `Dropdown`, `SegmentedControl` and the `DatePicker` family all grow
+  together and still line up side by side. `sm` is the default size, so most call sites gain 3px of
+  height without passing anything.
+
 - **`SideBar` sizing is one scale.** Rail, submenu, collapsed flyout and `SecondaryBar` rows now all
   read `SIDEBAR_ROW`, so every nav label is 13px at every level. Visible changes: submenu and flyout
   rows grow 20px → 28px with their labels 12/12.5px → 13px, the "Add New" label 12.5px → 13px, and

package/COMPONENT-GOTCHAS.md

@@ -266,7 +266,7 @@ not enough when the overlay sits inside a transition wrapper — the wrapper kee
 
 | Component | beta.43 → beta.44 | Restore the old look |
 | --- | --- | --- |
-| Fields, selects, buttons (`Button`, `TextInput`, `InputTextArea`, `NumberInput`, DatePicker family, `Select`, `SelectV2`, `SearchSelect`, `SelectSearch`, `Search`, `Dropdown`, `SegmentedControl`) | Default size `md` → `sm` (32px). One scale for all: xs 24 / sm 32 / md 40 / lg 48 — `md` is now 40px everywhere (`TextInput` was 44, selects 38, `SegmentedControl` ~36). `TimePicker` has no `size` (fixed `sm`); `SegmentedControl` has no `xs` | `size="md"` |
+| Fields, selects, buttons (`Button`, `TextInput`, `InputTextArea`, `NumberInput`, DatePicker family, `Select`, `SelectV2`, `SearchSelect`, `SelectSearch`, `Search`, `Dropdown`, `SegmentedControl`) | Default size `md` → `sm` (35px). One scale for all: xs 28 / sm 35 / md 40 / lg 48 — `md` is now 40px everywhere (`TextInput` was 44, selects 38, `SegmentedControl` ~36). `TimePicker` has no `size` (fixed `sm`); `SegmentedControl` has no `xs` | `size="md"` |
 | `Button` | Text one step smaller (sm 14→13px, md 16→14, lg 18→16). Busy = spinner only, width kept (was "Loading" + spinner). Outline: 1px border, hover is a tint, not a fill | `loadingText="Loading"` |
 | `Tag` | `solid`/`md` → `subtle`/`sm`. Hover + pointer only with `onTagClick`; `maxW` truncates with the full text as a title. Exact heights 20/24/28/32, weight 500, 1px inset ring (never adds height); subtle is a light tint with ink ≥ 6.5:1 | `variant="solid" size="md"` |
 | `resolveSoftTone` | `bg`/`border` are now translucent (alpha hex) — composite onto the surface before `contrastRatio`; optional 3rd `surface` arg; adds `hoverBg`/`activeBg`. Badge/Alert/Toaster/EmptyState follow | — |
@@ -312,7 +312,7 @@ not enough when the overlay sits inside a transition wrapper — the wrapper kee
 | `Tag` | Label line-height 1.45 so descenders (`p`, `g`, `y`) are no longer clipped by the ellipsis overflow | — |
 | `Toaster` | `error` toasts announce assertively (`role="alert"`); status icons have a text equivalent | — |
 | `FeedbackForm` | Built on `TextInput`/`InputTextArea`/`RadioButtonGroup`; required fields show `*` in the label | — |
-| `PinInput` | `size` now works (square cells 24/32/40/48, default `sm`) — it was silently ignored | `size="md"` |
+| `PinInput` | `size` now works (square cells 28/35/40/48, default `sm`) — it was silently ignored | `size="md"` |
 | `Tag` | New `leadingIcon` (decorative, before the label) and `isDisabled` (sets `aria-disabled` + native `disabled` on the clickable/remove buttons, so they leave the tab order — not just dimmed) | — |
 | `ToolTip` | Defaults a Popper `preventOverflow` padding of 8px, so a bubble near the right edge no longer overhangs by a subpixel and raises page scrollbars. A caller-supplied `preventOverflow` modifier still wins | pass your own `modifiers` |
 | `Table` / `KanbanBoard` | Column sort buttons and draggable cards now show the library focus ring on keyboard focus (was an opacity flicker / the browser default outline). Kanban card wrappers render as Chakra `Box`; keyboard drag (Space, arrows, Space) is unchanged | — |

package/DESIGN-GUIDE.md

@@ -89,7 +89,7 @@ don't lean on that pair to distinguish two categories; reach for a utility schem
 
 ## 5. Controls — one scale, `sm` by default
 
-Every control shares one height scale — `xs` 24px · `sm` 32px · `md` 40px · `lg` 48px — and
+Every control shares one height scale — `xs` 28px · `sm` 35px · `md` 40px · `lg` 48px — and
 **defaults to `sm`**: `Button`, `TextInput`, `InputTextArea`, `NumberInput`, `Select`, `Search`,
 `RangeSlider`, the `DatePicker` family and `SegmentedControl`. So on a desktop page **don't pass `size`**; controls
 side by side line up. Nothing in a toolbar or table row is taller than the fields beside it.

package/dist/Theme/tokens/primitives/controlSizes.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.CONTROL_SIZES = void 0;
 /** One height scale for fields, selects and buttons, so controls side by side line up. */
 exports.CONTROL_SIZES = {
-    xs: { height: "1.5rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
-    sm: { height: "2rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
+    xs: { height: "1.75rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    sm: { height: "2.1875rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
     md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
     lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },
 };

package/dist/esm/Theme/tokens/primitives/controlSizes.js

@@ -1,7 +1,7 @@
 /** One height scale for fields, selects and buttons, so controls side by side line up. */
 export const CONTROL_SIZES = {
-    xs: { height: "1.5rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
-    sm: { height: "2rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
+    xs: { height: "1.75rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    sm: { height: "2.1875rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
     md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
     lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.48",
+  "version": "2.4.2-beta.49",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",