@olenbetong/appframe-ds 1.7.1 → 1.8.0

package/src/input/InputAdornments.css

@@ -1,80 +1,101 @@
-/*
- * The wrapper is the visual input: it owns the border, background, hover and
- * focus styling, while the inner Designsystemet input is rendered bare so the
- * input and the adornments read as a single control.
- */
-.ObInputAdornments-root {
-	--obInputAdornments-padding: 0.25rem;
-	--obInputAdornments-gap: 0.25rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
-
-	display: flex;
-	align-items: center;
-	box-sizing: border-box;
-	gap: var(--obInputAdornments-gap);
-	padding: var(--obInputAdornments-padding);
-	inline-size: 100%;
-	color: var(--ds-color-neutral-text-default, #1e2b3c);
-	background-color: var(--ds-color-neutral-surface-default, #fff);
-	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
-	border-radius: var(--ds-border-radius-md, 0.375rem);
-}
-
-/* Designsystemet components come in sm, md and lg; xs and xl are typography-only sizes */
-.ObInputAdornments-root[data-size="sm"] {
-	--obInputAdornments-padding: 0.25rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-2, 0.875rem);
-}
-
-.ObInputAdornments-root[data-size="md"] {
-	--obInputAdornments-padding: 0.25rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
-}
-
-.ObInputAdornments-root[data-size="lg"] {
-	--obInputAdornments-padding: 0.375rem;
-	--obInputAdornments-fontSize: var(--ds-font-size-4, 1.125rem);
-}
-
-/* The Designsystemet input hover (an inner outline doubling the border), drawn on the wrapper */
-.ObInputAdornments-root:hover:not(
-		:focus-within,
-		:has(.ObInputAdornments-field:disabled, .ObInputAdornments-field[readonly])
-	) {
-	outline: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
-	outline-offset: -0.1px;
-}
-
-.ObInputAdornments-root:has(.ObInputAdornments-field:focus-visible) {
-	box-shadow: var(--dsc-focus-boxShadow);
-	outline: var(--dsc-focus-outline);
-	outline-offset: var(--ds-border-width-focus, 3px);
-}
-
-.ObInputAdornments-root:has(.ObInputAdornments-field:disabled) {
-	cursor: not-allowed;
-	opacity: var(--ds-disabled-opacity, 0.3);
-}
-
-/* The bare input: all the visual styling lives on the wrapper instead */
-.ObInputAdornments-root .ObInputAdornments-field {
-	flex: 1;
-	min-inline-size: 0;
-	font-size: var(--obInputAdornments-fontSize);
-	background: transparent;
-	border: none;
-}
-
-.ObInputAdornments-root .ObInputAdornments-field:disabled {
-	opacity: 1;
-}
-
-.ObInputAdornments-root .ObInputAdornments-field:hover {
-	outline: none;
-}
-
-.ObInputAdornments-root .ObInputAdornments-field:focus-visible {
-	box-shadow: none;
-	outline: none;
-	outline-offset: 0;
-}
+/*
+ * The wrapper is the visual input: it owns the border, background, hover and
+ * focus styling, while the inner Designsystemet input is rendered bare so the
+ * input and the adornments read as a single control.
+ */
+.ObInputAdornments-root {
+	--obInputAdornments-padding: 0.25rem;
+	--obInputAdornments-gap: 0.25rem;
+	/* A Textfield's font size (`--dsc-input-font-size`) when no `data-size` is given. */
+	--obInputAdornments-fontSize: max(1rem, 1em);
+
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	gap: var(--obInputAdornments-gap);
+	padding: var(--obInputAdornments-padding);
+	inline-size: 100%;
+	color: var(--ds-color-neutral-text-default, #1e2b3c);
+	background-color: var(--ds-color-neutral-surface-default, #fff);
+	border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
+	border-radius: var(--ds-border-radius-md, 0.375rem);
+
+	/*
+	 * As tall as a Textfield (`--dsc-input-size`), whatever the adornments are: the bare input and
+	 * any button inside get the height left inside the padding and border, so a full-size
+	 * Designsystemet button no longer makes the control taller than the fields beside it.
+	 */
+	--obInputAdornments-innerSize: calc(
+		var(--ds-size-12) - 2 * var(--obInputAdornments-padding) - 2 * var(--ds-border-width-default, 1px)
+	);
+
+	min-block-size: var(--ds-size-12);
+}
+
+.ObInputAdornments-root > .ds-button {
+	--dsc-button-size: var(--obInputAdornments-innerSize);
+	--dsc-button-padding: 0 var(--ds-size-2);
+}
+
+/* Designsystemet components come in sm, md and lg; xs and xl are typography-only sizes */
+.ObInputAdornments-root[data-size="sm"] {
+	--obInputAdornments-padding: 0.25rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-2, 0.875rem);
+}
+
+.ObInputAdornments-root[data-size="md"] {
+	--obInputAdornments-padding: 0.25rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-3, 1rem);
+}
+
+.ObInputAdornments-root[data-size="lg"] {
+	--obInputAdornments-padding: 0.375rem;
+	--obInputAdornments-fontSize: var(--ds-font-size-4, 1.125rem);
+}
+
+/* The Designsystemet input hover (an inner outline doubling the border), drawn on the wrapper */
+.ObInputAdornments-root:hover:not(
+		:focus-within,
+		:has(.ObInputAdornments-field:disabled, .ObInputAdornments-field[readonly])
+	) {
+	outline: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-default, #b3b3b3);
+	outline-offset: -0.1px;
+}
+
+.ObInputAdornments-root:has(.ObInputAdornments-field:focus-visible) {
+	box-shadow: var(--dsc-focus-boxShadow);
+	outline: var(--dsc-focus-outline);
+	outline-offset: var(--ds-border-width-focus, 3px);
+}
+
+.ObInputAdornments-root:has(.ObInputAdornments-field:disabled) {
+	cursor: not-allowed;
+	opacity: var(--ds-disabled-opacity, 0.3);
+}
+
+/* The bare input: all the visual styling lives on the wrapper instead */
+.ObInputAdornments-root .ObInputAdornments-field {
+	--dsc-input-size: var(--obInputAdornments-innerSize);
+	/* The text starts where a Textfield's does (its inline padding, inside the wrapper's own). */
+	--dsc-input-padding-inline: calc(var(--ds-size-3) - var(--obInputAdornments-padding));
+
+	flex: 1;
+	min-inline-size: 0;
+	font-size: var(--obInputAdornments-fontSize);
+	background: transparent;
+	border: none;
+}
+
+.ObInputAdornments-root .ObInputAdornments-field:disabled {
+	opacity: 1;
+}
+
+.ObInputAdornments-root .ObInputAdornments-field:hover {
+	outline: none;
+}
+
+.ObInputAdornments-root .ObInputAdornments-field:focus-visible {
+	box-shadow: none;
+	outline: none;
+	outline-offset: 0;
+}

package/src/input/InputAdornments.tsx

@@ -1,102 +1,102 @@
-import "./InputAdornments.css";
-
-import { Input, type InputProps } from "@digdir/designsystemet-react";
-import clsx from "clsx";
-import { Children, isValidElement, type ReactElement, type ReactNode, type Ref } from "react";
-
-export type InputSlotProps = {
-	/**
-	 * Extra classes for the input rendered in this slot
-	 */
-	className?: string;
-};
-
-/**
- * Marks where the input should be rendered among the children of
- * `InputAdornments`. Renders nothing on its own; `InputAdornments` swaps it
- * for the actual input. When it is left out, the input is rendered before the
- * adornments.
- *
- * @example
- * ```jsx
- * <InputAdornments value={value} onChange={handleChange}>
- *   <SearchIcon aria-hidden />
- *   <InputSlot />
- *   <Button icon variant="tertiary"><XMarkIcon aria-hidden /></Button>
- * </InputAdornments>
- * ```
- */
-export function InputSlot(_props: InputSlotProps) {
-	return null;
-}
-
-export type InputAdornmentsProps = Omit<InputProps, "children"> & {
-	/**
-	 * Adornments rendered next to the input, e.g. icons or buttons. Include an
-	 * `InputSlot` to control where the input itself ends up.
-	 */
-	children?: ReactNode;
-	/**
-	 * Classes for the wrapper that carries the input styling
-	 */
-	className?: string;
-	/**
-	 * Classes for the bare input element itself
-	 */
-	inputClassName?: string;
-	/**
-	 * Ref to the input element. The wrapper is an implementation detail, so the
-	 * ref points at the input rather than at the element carrying the styling.
-	 */
-	ref?: Ref<HTMLInputElement>;
-};
-
-/**
- * Input with adornments, equivalent to a MUI `TextField` with
- * `InputProps.startAdornment` / `endAdornment`. Designsystemet has no
- * equivalent, so the border, background, hover and focus styling is moved from
- * the input onto a wrapper element, making the input and its adornments read
- * as a single control.
- *
- * All other props are forwarded to the Designsystemet `Input`, so `ref`,
- * `value`, `onChange`, `data-size` and `data-color` work as usual.
- *
- * @example
- * ```jsx
- * // Input first (default), adornments after
- * <InputAdornments aria-label="Search" value={value} onChange={handleChange}>
- *   <Button icon variant="tertiary"><MagnifyingGlassIcon aria-hidden /></Button>
- * </InputAdornments>
- *
- * // Explicit placement with InputSlot
- * <InputAdornments aria-label="Amount" data-size="lg">
- *   <span aria-hidden>kr</span>
- *   <InputSlot />
- *   <span aria-hidden>,-</span>
- * </InputAdornments>
- * ```
- */
-export function InputAdornments({ children, className, inputClassName, ...props }: InputAdornmentsProps) {
-	let size = props["data-size"];
-	let color = props["data-color"];
-	let childArray = Children.toArray(children);
-	let slot = childArray.find((child) => isValidElement(child) && child.type === InputSlot) as
-		| ReactElement<InputSlotProps>
-		| undefined;
-
-	let input = (
-		<Input
-			key="ObInputAdornments-input"
-			{...props}
-			className={clsx("ObInputAdornments-field", inputClassName, slot?.props.className)}
-		/>
-	);
-
-	let content = slot ? childArray.map((child) => (child === slot ? input : child)) : [input, ...childArray];
-
-	return (
-		<div className={clsx("ObInputAdornments-root", className)} data-size={size} data-color={color}>
-			{content}
-		</div>
-	);
-}
+import "./InputAdornments.css";
+
+import { Input, type InputProps } from "@digdir/designsystemet-react";
+import clsx from "clsx";
+import { Children, isValidElement, type ReactElement, type ReactNode, type Ref } from "react";
+
+export type InputSlotProps = {
+	/**
+	 * Extra classes for the input rendered in this slot
+	 */
+	className?: string;
+};
+
+/**
+ * Marks where the input should be rendered among the children of
+ * `InputAdornments`. Renders nothing on its own; `InputAdornments` swaps it
+ * for the actual input. When it is left out, the input is rendered before the
+ * adornments.
+ *
+ * @example
+ * ```jsx
+ * <InputAdornments value={value} onChange={handleChange}>
+ *   <SearchIcon aria-hidden />
+ *   <InputSlot />
+ *   <Button icon variant="tertiary"><XMarkIcon aria-hidden /></Button>
+ * </InputAdornments>
+ * ```
+ */
+export function InputSlot(_props: InputSlotProps) {
+	return null;
+}
+
+export type InputAdornmentsProps = Omit<InputProps, "children"> & {
+	/**
+	 * Adornments rendered next to the input, e.g. icons or buttons. Include an
+	 * `InputSlot` to control where the input itself ends up.
+	 */
+	children?: ReactNode;
+	/**
+	 * Classes for the wrapper that carries the input styling
+	 */
+	className?: string;
+	/**
+	 * Classes for the bare input element itself
+	 */
+	inputClassName?: string;
+	/**
+	 * Ref to the input element. The wrapper is an implementation detail, so the
+	 * ref points at the input rather than at the element carrying the styling.
+	 */
+	ref?: Ref<HTMLInputElement>;
+};
+
+/**
+ * Input with adornments, equivalent to a MUI `TextField` with
+ * `InputProps.startAdornment` / `endAdornment`. Designsystemet has no
+ * equivalent, so the border, background, hover and focus styling is moved from
+ * the input onto a wrapper element, making the input and its adornments read
+ * as a single control.
+ *
+ * All other props are forwarded to the Designsystemet `Input`, so `ref`,
+ * `value`, `onChange`, `data-size` and `data-color` work as usual.
+ *
+ * @example
+ * ```jsx
+ * // Input first (default), adornments after
+ * <InputAdornments aria-label="Search" value={value} onChange={handleChange}>
+ *   <Button icon variant="tertiary"><MagnifyingGlassIcon aria-hidden /></Button>
+ * </InputAdornments>
+ *
+ * // Explicit placement with InputSlot
+ * <InputAdornments aria-label="Amount" data-size="lg">
+ *   <span aria-hidden>kr</span>
+ *   <InputSlot />
+ *   <span aria-hidden>,-</span>
+ * </InputAdornments>
+ * ```
+ */
+export function InputAdornments({ children, className, inputClassName, ...props }: InputAdornmentsProps) {
+	let size = props["data-size"];
+	let color = props["data-color"];
+	let childArray = Children.toArray(children);
+	let slot = childArray.find((child) => isValidElement(child) && child.type === InputSlot) as
+		| ReactElement<InputSlotProps>
+		| undefined;
+
+	let input = (
+		<Input
+			key="ObInputAdornments-input"
+			{...props}
+			className={clsx("ObInputAdornments-field", inputClassName, slot?.props.className)}
+		/>
+	);
+
+	let content = slot ? childArray.map((child) => (child === slot ? input : child)) : [input, ...childArray];
+
+	return (
+		<div className={clsx("ObInputAdornments-root", className)} data-size={size} data-color={color}>
+			{content}
+		</div>
+	);
+}

package/src/input/NumberInput.css

@@ -1,9 +1,9 @@
-.ObNumberInput-root .ObInputAdornments-field {
-	/* Numbers read best right aligned, and the steppers sit at the end anyway */
-	text-align: end;
-	font-variant-numeric: tabular-nums;
-}
-
-.ObNumberInput-root .ObNumberInput-stepper {
-	flex-shrink: 0;
-}
+.ObNumberInput-root .ObInputAdornments-field {
+	/* Numbers read best right aligned, and the steppers sit at the end anyway */
+	text-align: end;
+	font-variant-numeric: tabular-nums;
+}
+
+.ObNumberInput-root .ObNumberInput-stepper {
+	flex-shrink: 0;
+}