@olenbetong/appframe-ds 1.7.2 → 1.9.0

package/src/grid/Toolbar.tsx

@@ -1,4 +1,4 @@
-import { Button, Dropdown } from "@digdir/designsystemet-react";
+import { Badge, BadgePosition, Button, Dropdown } from "@digdir/designsystemet-react";
 import {
 	type GridApi,
 	type GridExportMenuItemProps,
@@ -7,9 +7,6 @@ import {
 } from "@mui/x-data-grid-premium";
 import {
 	ArrowsCirclepathIcon,
-	Density1Icon,
-	Density2Icon,
-	Density3Icon,
 	FileCsvIcon,
 	FileExcelIcon,
 	FilterIcon,
@@ -20,6 +17,8 @@ import {
 import { type DataObject, exportOptionsFromDataObject } from "@olenbetong/appframe-data";
 import { useDataObject, useLoading, usePermissions } from "@olenbetong/appframe-react";
 
+import { useState } from "react";
+
 import { openDataObjectReportWithProgress } from "../report-downloader/index.js";
 import { useAfGridContext } from "./AfGridContext.js";
 import { addRow } from "./editing.js";
@@ -28,7 +27,7 @@ import { getLocalizedString } from "../i18n.js";
 
 export function GridToolbarAddButton({ onClick }: { onClick: () => void }) {
 	return (
-		<Button variant="tertiary" data-size="sm" onClick={onClick}>
+		<Button variant="tertiary" onClick={onClick}>
 			<PlusIcon aria-hidden />
 			{getLocalizedString("Add")}
 		</Button>
@@ -45,16 +44,29 @@ export function GridToolbarAddIfAllowedButton({ disableInsert }: { disableInsert
 	) : null;
 }
 
-export function GridToolbarRefreshButton() {
+export type GridToolbarIconOnlyProps = {
+	/** Show the icon alone, with the label as its accessible name and tooltip. */
+	iconOnly?: boolean;
+};
+
+export function GridToolbarRefreshButton({ iconOnly }: GridToolbarIconOnlyProps = {}) {
 	let dataObject = useDataObject();
 	let isLoading = useLoading(dataObject);
+	let label = getLocalizedString("Refresh");
 
 	return (
-		<Button variant="tertiary" data-size="sm" loading={isLoading} onClick={() => dataObject.refreshDataSource()}>
+		<Button
+			variant="tertiary"
+			icon={iconOnly}
+			aria-label={iconOnly ? label : undefined}
+			title={iconOnly ? label : undefined}
+			loading={isLoading}
+			onClick={() => dataObject.refreshDataSource()}
+		>
 			{/* Designsystemet prepends the spinner rather than replacing the children, so
 			    the icon is hidden while loading to keep the button from changing width */}
 			{!isLoading && <ArrowsCirclepathIcon aria-hidden />}
-			{getLocalizedString("Refresh")}
+			{!iconOnly && label}
 		</Button>
 	);
 }
@@ -63,7 +75,7 @@ export function GridToolbarColumnsButton() {
 	let { openColumnsPanel } = useAfGridContext();
 
 	return (
-		<Button variant="tertiary" data-size="sm" onClick={openColumnsPanel}>
+		<Button variant="tertiary" onClick={openColumnsPanel}>
 			<TableIcon aria-hidden />
 			{getLocalizedString("Columns")}
 		</Button>
@@ -74,13 +86,26 @@ export function GridToolbarColumnsButton() {
  * Opens the filter builder instead of the grid's own filter panel. The count
  * reflects the conditions in the builder's filter, not the header filters.
  */
-export function GridToolbarFilterButton() {
+export function GridToolbarFilterButton({ iconOnly }: GridToolbarIconOnlyProps = {}) {
 	let { openFilterBuilder, filterCount } = useAfGridContext();
+	let label = getLocalizedString("Filter");
+
+	if (iconOnly) {
+		let name = filterCount > 0 ? `${label} (${filterCount})` : label;
+		return (
+			<BadgePosition placement="top-right" overlap="circle">
+				{filterCount > 0 && <Badge data-color="brand" count={filterCount} aria-hidden="true" />}
+				<Button variant="tertiary" icon aria-label={name} title={name} onClick={openFilterBuilder}>
+					<FilterIcon aria-hidden />
+				</Button>
+			</BadgePosition>
+		);
+	}
 
 	return (
-		<Button variant="tertiary" data-size="sm" onClick={openFilterBuilder}>
+		<Button variant="tertiary" onClick={openFilterBuilder}>
 			<FilterIcon aria-hidden />
-			{getLocalizedString("Filter")}
+			{label}
 			{filterCount > 0 ? ` (${filterCount})` : ""}
 		</Button>
 	);
@@ -94,7 +119,7 @@ export function GridToolbarResetLayoutButton() {
 	}
 
 	return (
-		<Button variant="tertiary" data-size="sm" onClick={handleReset}>
+		<Button variant="tertiary" onClick={handleReset}>
 			<ArrowsCirclepathIcon aria-hidden />
 			{getLocalizedString("Reset layout")}
 		</Button>
@@ -153,23 +178,52 @@ export function AfGridToolbarExcelExportButton({ fileName, title }: { fileName?:
 	let dataObject = useDataObject();
 
 	return (
-		<Button variant="tertiary" data-size="sm" onClick={() => handleExportToExcel(apiRef, dataObject, fileName, title)}>
+		<Button variant="tertiary" onClick={() => handleExportToExcel(apiRef, dataObject, fileName, title)}>
 			<FileExcelIcon aria-hidden />
 			{getLocalizedString("Export")}
 		</Button>
 	);
 }
 
-export function GridToolbarMoreOptionsButton() {
+export type GridToolbarMoreOptionsButtonProps = React.PropsWithChildren<{
+	/** Offer the column panel in the menu, for toolbars without a Columns button. */
+	showColumns?: boolean;
+}>;
+
+/**
+ * The toolbar's "more" menu: exports and layout reset. `children` are extra
+ * `Dropdown.Item`s placed first. The menu closes when an item is chosen.
+ */
+export function GridToolbarMoreOptionsButton({ showColumns, children }: GridToolbarMoreOptionsButtonProps = {}) {
 	let apiRef = useGridApiContext();
+	let { openColumnsPanel } = useAfGridContext();
+	let [open, setOpen] = useState(false);
 
 	return (
 		<Dropdown.TriggerContext>
-			<Dropdown.Trigger variant="tertiary" icon data-size="sm" aria-label={getLocalizedString("More options")}>
+			<Dropdown.Trigger
+				variant="tertiary"
+				icon
+				aria-label={getLocalizedString("More options")}
+				title={getLocalizedString("More options")}
+			>
 				<MenuElipsisVerticalIcon aria-hidden />
 			</Dropdown.Trigger>
-			<Dropdown placement="bottom-end" data-size="sm">
-				<Dropdown.List>
+			<Dropdown open={open} onOpen={() => setOpen(true)} onClose={() => setOpen(false)} placement="bottom-end">
+				<Dropdown.List
+					onClick={(event) => {
+						if ((event.target as HTMLElement).closest("button, a")) setOpen(false);
+					}}
+				>
+					{children}
+					{showColumns && (
+						<Dropdown.Item>
+							<Dropdown.Button onClick={openColumnsPanel}>
+								<TableIcon aria-hidden />
+								{getLocalizedString("Columns")}
+							</Dropdown.Button>
+						</Dropdown.Item>
+					)}
 					<Dropdown.Item>
 						<Dropdown.Button onClick={() => apiRef.current.exportDataAsCsv()}>
 							<FileCsvIcon aria-hidden />
@@ -177,24 +231,6 @@ export function GridToolbarMoreOptionsButton() {
 						</Dropdown.Button>
 					</Dropdown.Item>
 					<AfGridExcelExportMenuItem />
-					<Dropdown.Item>
-						<Dropdown.Button onClick={() => apiRef.current.setDensity("compact")}>
-							<Density1Icon aria-hidden />
-							{getLocalizedString("Compact")}
-						</Dropdown.Button>
-					</Dropdown.Item>
-					<Dropdown.Item>
-						<Dropdown.Button onClick={() => apiRef.current.setDensity("standard")}>
-							<Density2Icon aria-hidden />
-							{getLocalizedString("Standard")}
-						</Dropdown.Button>
-					</Dropdown.Item>
-					<Dropdown.Item>
-						<Dropdown.Button onClick={() => apiRef.current.setDensity("comfortable")}>
-							<Density3Icon aria-hidden />
-							{getLocalizedString("Comfortable")}
-						</Dropdown.Button>
-					</Dropdown.Item>
 					<Dropdown.Item>
 						<Dropdown.Button onClick={() => (apiRef.current as AfGridApi).resetLayout?.()}>
 							<ArrowsCirclepathIcon aria-hidden />

package/src/grid/index.css

@@ -2,6 +2,50 @@
 	height: 100%;
 }
 
+/*
+ * The grid follows the Designsystemet size mode it sits in instead of MUI's density and type
+ * scale: its text is the size mode's body text, like the inputs around it, and its row and header
+ * heights come from the same mode (`useAfSizeMode`).
+ */
+.AfGrid-root .MuiDataGrid-root {
+	font-size: inherit;
+}
+
+/*
+ * The footer is MUI's own, with a 52px minimum height and pagination text in MUI's type scale; it
+ * is as tall as a control and its text is the grid's.
+ */
+.AfGrid-root {
+	.MuiDataGrid-footerContainer,
+	.MuiTablePagination-toolbar {
+		min-height: var(--ds-size-12, 52px);
+	}
+
+	.MuiTablePagination-root,
+	.MuiTablePagination-selectLabel,
+	.MuiTablePagination-displayedRows {
+		font-size: inherit;
+	}
+}
+
+/*
+ * Controls in a data cell - editors, lookup buttons, the row's action buttons - fit the row, which
+ * is `--ds-size-10` tall, rather than taking Designsystemet's `--ds-size-12` control height, which
+ * would overflow it at every size. The custom properties are set on the components themselves,
+ * so they are overridden there and not on the cell.
+ */
+.AfGrid-root .MuiDataGrid-cell {
+	.ds-input {
+		--dsc-input-size: var(--ds-size-10, 2.25rem);
+		--dsc-input-padding-block: 0;
+	}
+
+	.ds-button {
+		--dsc-button-size: var(--ds-size-8, 2rem);
+		--dsc-button-padding: 0 var(--ds-size-2, 0.5rem);
+	}
+}
+
 .AfGrid-loading {
 	display: flex;
 	align-items: center;

package/src/grid/index.tsx

@@ -20,7 +20,7 @@ import { type DataObject, uid } from "@olenbetong/appframe-data";
 import { DataObjectProvider, useLoading } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FilterBuilder } from "../filter/index.js";
 import { AfGridColumnsPanel } from "./AfGridColumnsPanel.js";
 import { AfHeaderFilterCell } from "./AfHeaderFilterCell.js";
@@ -41,7 +41,9 @@ import {
 	GridToolbarColumnsButton,
 	GridToolbarContainer,
 	GridToolbarFilterButton,
+	type GridToolbarIconOnlyProps,
 	GridToolbarMoreOptionsButton,
+	type GridToolbarMoreOptionsButtonProps,
 	GridToolbarRefreshButton,
 	GridToolbarResetLayoutButton,
 } from "./Toolbar.js";
@@ -65,6 +67,7 @@ import { useAfKeepFocusAfterEdit } from "./useAfKeepFocusAfterEdit.js";
 import { useAfRowEditModel } from "./useAfRowEditModel.js";
 import { useAfRowGrouping } from "./useAfRowGrouping.js";
 import { useAfServerAggregation } from "./useAfServerAggregation.js";
+import { useAfSizeMode } from "./useAfSizeMode.js";
 import { useAfSortModel } from "./useAfSortModel.js";
 import { getLocalizedString } from "../i18n.js";
 
@@ -109,6 +112,8 @@ export type {
 	AfGridColumn,
 	AfGridExcelExportOptions,
 	AfGridNewItemRowPosition,
+	GridToolbarIconOnlyProps,
+	GridToolbarMoreOptionsButtonProps,
 	AfGridRowAction,
 };
 export type { AfGridGrouping, AfGridGroupingProps } from "./useAfRowGrouping.js";
@@ -438,6 +443,8 @@ function AfGrid_(props: AfGridProps) {
 	let filterFields = useAfFilterFields(dataObject, columnsProp);
 
 	let keyEvents = useAfKeyBindings({ apiRef, dataObject });
+	let rootRef = useRef<HTMLDivElement>(null);
+	let sizeMode = useAfSizeMode(rootRef);
 
 	useEffect(() => {
 		if (!snackbar) return;
@@ -495,7 +502,7 @@ function AfGrid_(props: AfGridProps) {
 	return (
 		<DataObjectProvider dataObject={dataObject}>
 			<AfGridContextProvider value={gridContext}>
-				<div className="AfGrid-root" style={newItemRow.rootStyle} {...keyEvents} tabIndex={-1}>
+				<div ref={rootRef} className="AfGrid-root" style={newItemRow.rootStyle} {...keyEvents} tabIndex={-1}>
 					<DataGrid
 						apiRef={apiRef}
 						rows={data}
@@ -515,7 +522,13 @@ function AfGrid_(props: AfGridProps) {
 						headerFilters
 						{...paging}
 						showToolbar
+						{...sizeMode}
 						{...other}
+						/*
+						 * The size mode sets the row height (`useAfSizeMode`), so MUI's density stays at the
+						 * standard factor of 1 and is not offered or restored.
+						 */
+						density="standard"
 						{...grouping.gridProps}
 						/*
 						 * Spread rather than passed, because the grid merges props over its defaults with
@@ -576,7 +589,7 @@ function AfGrid_(props: AfGridProps) {
 				/>
 				{!!snackbar && (
 					<div className="AfGrid-snackbar">
-						<Alert data-color="danger" data-size="sm" onClick={() => setSnackbar(null)}>
+						<Alert data-color="danger" onClick={() => setSnackbar(null)}>
 							{snackbar}
 						</Alert>
 					</div>

package/src/grid/slots/index.tsx

@@ -17,22 +17,11 @@ import type { GridSlotProps, GridSlotsComponent } from "@mui/x-data-grid-premium
 import clsx from "clsx";
 import { type Ref, useCallback } from "react";
 
-type DsSize = "2xs" | "xs" | "sm" | "md" | "lg";
-
-/**
- * Maps the MUI slot sizes onto the Designsystemet size tokens. The grid only
- * ever asks for `small` or `medium`, but the toolbar buttons also allow `large`.
+/*
+ * The slots take no size from MUI's `size` prop: they inherit the Designsystemet size mode the
+ * grid sits in, like everything else on the page. Only the spinner's `data-size` is kept, which
+ * picks the spinner's own size rather than the mode.
  */
-function dsSize(size?: "small" | "medium" | "large"): DsSize {
-	switch (size) {
-		case "small":
-			return "sm";
-		case "large":
-			return "lg";
-		default:
-			return "sm";
-	}
-}
 
 /**
  * The grid passes `title` as a `ReactNode`, but Designsystemet's tooltip only
@@ -47,7 +36,7 @@ function BaseCheckbox(props: GridSlotProps["baseCheckbox"]) {
 		indeterminate,
 		inputRef,
 		label,
-		size,
+		size: _size,
 		density: _density,
 		fullWidth: _fullWidth,
 		touchRippleRef: _touchRippleRef,
@@ -79,7 +68,6 @@ function BaseCheckbox(props: GridSlotProps["baseCheckbox"]) {
 			{...slotProps?.htmlInput}
 			ref={ref}
 			className={clsx("AfGrid-checkbox", className)}
-			data-size={dsSize(size)}
 			label={label}
 			aria-label={label ? undefined : ((other as any)["aria-label"] ?? "")}
 		/>
@@ -87,10 +75,10 @@ function BaseCheckbox(props: GridSlotProps["baseCheckbox"]) {
 }
 
 function BaseButton(props: GridSlotProps["baseButton"]) {
-	let { children, size, startIcon, touchRippleRef: _touchRippleRef, ...other } = props;
+	let { children, size: _size, startIcon, touchRippleRef: _touchRippleRef, ...other } = props;
 
 	return (
-		<Button {...(other as any)} variant="tertiary" data-size={dsSize(size)}>
+		<Button {...(other as any)} variant="tertiary">
 			{startIcon}
 			{children}
 		</Button>
@@ -98,17 +86,11 @@ function BaseButton(props: GridSlotProps["baseButton"]) {
 }
 
 function BaseIconButton(props: GridSlotProps["baseIconButton"]) {
-	let { children, size, label, color: _color, edge: _edge, touchRippleRef: _touchRippleRef, ...other } = props;
+	let { children, size: _size, label, color: _color, edge: _edge, touchRippleRef: _touchRippleRef, ...other } = props;
 
 	// `GridActionsCellItem` names its button through `aria-label`, not `label`; keep it
 	return (
-		<Button
-			{...(other as any)}
-			icon
-			variant="tertiary"
-			data-size={dsSize(size)}
-			aria-label={label ?? (other as any)["aria-label"]}
-		>
+		<Button {...(other as any)} icon variant="tertiary" aria-label={label ?? (other as any)["aria-label"]}>
 			{children}
 		</Button>
 	);
@@ -157,7 +139,7 @@ function BaseTooltip(props: GridSlotProps["baseTooltip"]) {
 function BaseTextField(props: GridSlotProps["baseTextField"]) {
 	let {
 		inputRef,
-		size,
+		size: _size,
 		error,
 		helperText,
 		slotProps,
@@ -173,7 +155,6 @@ function BaseTextField(props: GridSlotProps["baseTextField"]) {
 			{...slotProps?.htmlInput}
 			ref={inputRef as Ref<HTMLInputElement>}
 			className={clsx("AfGrid-textField", className)}
-			data-size={dsSize(size)}
 			error={error ? helperText : undefined}
 			aria-label={other.label ? undefined : ((other as any)["aria-label"] ?? "")}
 		/>
@@ -183,7 +164,7 @@ function BaseTextField(props: GridSlotProps["baseTextField"]) {
 function BaseSelect(props: GridSlotProps["baseSelect"]) {
 	let {
 		children,
-		size,
+		size: _size,
 		label,
 		labelId: _labelId,
 		native: _native,
@@ -201,7 +182,6 @@ function BaseSelect(props: GridSlotProps["baseSelect"]) {
 			{...(other as any)}
 			{...slotProps?.htmlInput}
 			className={clsx("AfGrid-select", className)}
-			data-size={dsSize(size)}
 			aria-label={typeof label === "string" ? label : ((other as any)["aria-label"] ?? "")}
 		>
 			{children}
@@ -216,23 +196,18 @@ function BaseSelectOption(props: GridSlotProps["baseSelectOption"]) {
 }
 
 function BaseSwitch(props: GridSlotProps["baseSwitch"]) {
-	let { size, label, ...other } = props;
+	let { size: _size, label, ...other } = props;
 
 	return (
-		<Switch
-			{...(other as any)}
-			data-size={dsSize(size)}
-			label={label}
-			aria-label={label ? undefined : ((other as any)["aria-label"] ?? "")}
-		/>
+		<Switch {...(other as any)} label={label} aria-label={label ? undefined : ((other as any)["aria-label"] ?? "")} />
 	);
 }
 
 function BaseChip(props: GridSlotProps["baseChip"]) {
-	let { label, size, icon, variant, children: _children, ...other } = props;
+	let { label, size: _size, icon, variant, children: _children, ...other } = props;
 
 	return (
-		<Tag {...(other as any)} data-size={dsSize(size)} variant={variant === "outlined" ? "outline" : "default"}>
+		<Tag {...(other as any)} variant={variant === "outlined" ? "outline" : "default"}>
 			{icon}
 			{label}
 		</Tag>

package/src/grid/useAfGridApi.ts

@@ -52,7 +52,6 @@ export function useAfGridApi(props: Partial<AfGridProps>, apiRef: React.RefObjec
 				});
 			}
 
-			apiRef.current?.setDensity(propsRef.current.initialState?.density ?? "compact");
 			apiRef.current?.setPageSize(propsRef.current.dataObject.options.parameters.maxRecords ?? 100);
 			apiRef.current?.setSortModel(
 				afSortOrderToMuiSortModel(

package/src/grid/useAfPersistedState.ts

@@ -47,10 +47,8 @@ function removeNonPersistedState(state: GridInitialState, config?: StatePersiste
 	let pagination: GridInitialState["pagination"] = { paginationModel: {} };
 	let sorting: GridInitialState["sorting"] = {};
 
-	// Persist the relevant state unless explicitly disabled in the config
-	if (config?.density !== false) {
-		newState.density = state.density;
-	}
+	// Persist the relevant state unless explicitly disabled in the config. Not the density: the
+	// size mode sets the row height, and the grid stays at the standard density.
 	if (config?.pinnedColumns !== false) {
 		newState.pinnedColumns = state.pinnedColumns;
 	}
@@ -108,10 +106,7 @@ function getInitialState({ columns, persistenceModel, id, initialState, layoutVe
 	let state: GridInitialState =
 		persistedState?.layoutVersion === layoutVersion
 			? removeNonPersistedState(persistedState.state, persistenceModel)
-			: {
-					density: "compact",
-					...initialState,
-				};
+			: { ...initialState };
 
 	if (!state.columns) {
 		state.columns = {};
@@ -173,6 +168,7 @@ setTimeout(() => {
 
 export type StatePersistenceConfig = {
 	aggregation?: boolean;
+	/** @deprecated The size mode sets the row height, and the density is no longer persisted. */
 	density?: boolean;
 	pinnedColumns?: boolean;
 	rowGrouping?: boolean;

package/src/grid/useAfSizeMode.ts

@@ -0,0 +1,19 @@
+import type { RefObject } from "react";
+
+import { useDsSize } from "../theme/sizeMode.js";
+
+/** MUI's compact row height, the grid's look before it followed the size mode. */
+const FALLBACK_HEIGHT = 36;
+
+/**
+ * Row and header heights from the Designsystemet size mode the grid sits in, in place of MUI's
+ * density: `--ds-size-10`, which is 25px at xs, 31px at sm, 35px at md and 41px at lg with the
+ * site's 14px root. The grid renders at the standard density, so these are the heights as they
+ * are. The text, toolbar and footer follow the same size mode through the stylesheet and by
+ * inheriting `data-size`.
+ */
+export function useAfSizeMode(rootRef: RefObject<HTMLElement | null>) {
+	let height = useDsSize(rootRef, 10, FALLBACK_HEIGHT);
+
+	return { rowHeight: height, columnHeaderHeight: height };
+}

package/src/i18n.ts

@@ -1,13 +1,13 @@
-/*
- * The package's strings live in their own globalization project, `appframe-ds`, so one
- * translation covers every app and the package can word a term its own way. The templates
- * render the dictionary as af.i18n["appframe-ds"]; on a page that does not (a legacy
- * template) the localizer falls back to the article's strings, exactly as before. See
- * `createLocalizer` in @olenbetong/appframe-core.
- */
-
-import { createLocalizer } from "@olenbetong/appframe-core";
-
-export const PROJECT = "appframe-ds";
-
-export const { getLocalizedString, localize } = createLocalizer(PROJECT);
+/*
+ * The package's strings live in their own globalization project, `appframe-ds`, so one
+ * translation covers every app and the package can word a term its own way. The templates
+ * render the dictionary as af.i18n["appframe-ds"]; on a page that does not (a legacy
+ * template) the localizer falls back to the article's strings, exactly as before. See
+ * `createLocalizer` in @olenbetong/appframe-core.
+ */
+
+import { createLocalizer } from "@olenbetong/appframe-core";
+
+export const PROJECT = "appframe-ds";
+
+export const { getLocalizedString, localize } = createLocalizer(PROJECT);

package/src/index.ts

@@ -1,14 +1,14 @@
-export * from "./AfLookup/index.js";
-export * from "./autocomplete/index.js";
-export * from "./binding/index.js";
-export * from "./container/index.js";
-export * from "./cutoff/index.js";
-export * from "./filter/index.js";
-export * from "./input/index.js";
-export * from "./layout/index.js";
-export * from "./link/index.js";
-export * from "./list/index.js";
-export * from "./page/index.js";
-export * from "./paper/index.js";
-export * from "./progress/index.js";
-export * from "./sortable/index.js";
+export * from "./AfLookup/index.js";
+export * from "./autocomplete/index.js";
+export * from "./binding/index.js";
+export * from "./container/index.js";
+export * from "./cutoff/index.js";
+export * from "./filter/index.js";
+export * from "./input/index.js";
+export * from "./layout/index.js";
+export * from "./link/index.js";
+export * from "./list/index.js";
+export * from "./page/index.js";
+export * from "./paper/index.js";
+export * from "./progress/index.js";
+export * from "./sortable/index.js";

package/src/input/NumberInput.tsx

@@ -237,7 +237,6 @@ export function NumberInput({
 							icon
 							type="button"
 							variant="tertiary"
-							data-size="sm"
 							className="ObNumberInput-stepper"
 							tabIndex={-1}
 							disabled={atMin}
@@ -250,7 +249,6 @@ export function NumberInput({
 							icon
 							type="button"
 							variant="tertiary"
-							data-size="sm"
 							className="ObNumberInput-stepper"
 							tabIndex={-1}
 							disabled={atMax}