@navikt/ds-react 7.40.0 → 8.0.1

package/src/pagination/Pagination.tsx

@@ -1,9 +1,10 @@
-import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
+import { AkselColor } from "../types";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util";
+import { cl } from "../util/className";
 import { useI18n } from "../util/i18n/i18n.hooks";
 import PaginationItem, {
   PaginationItemProps,
@@ -68,6 +69,16 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
     tag: "h2" | "h3" | "h4" | "h5" | "h6";
     text: string;
   };
+  /**
+   * Overrides color.
+   *
+   * We have disallowed status-colors.
+   * @default "neutral"
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   * @private
+   */
+  "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
 interface PaginationType
@@ -113,12 +124,6 @@ export const getSteps = ({
   ];
 };
 
-/**
- * TODO: These classes can be removed in darkside update
- * - navds-pagination--prev-next--with-text
- * - navds-pagination__prev-next
- */
-
 /**
  * A component that displays pagination controls.
  *
@@ -150,12 +155,11 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       srHeading,
       "aria-labelledby": ariaLabelledBy,
       renderItem: Item = PaginationItem,
-      "data-color": color,
+      "data-color": color = "neutral",
       ...rest
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const headingId = useId();
     const translate = useI18n("Pagination");
 
@@ -184,9 +188,9 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
         aria-labelledby={
           srHeading ? cl(headingId, ariaLabelledBy) : ariaLabelledBy
         }
-        className={cn(
-          "navds-pagination",
-          `navds-pagination--${size}`,
+        className={cl(
+          "aksel-pagination",
+          `aksel-pagination--${size}`,
           className,
         )}
       >
@@ -200,13 +204,12 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
             {srHeading.text}
           </Heading>
         )}
-        <ul className={cn("navds-pagination__list")}>
+        <ul className="aksel-pagination__list">
           <li>
             <Item
               data-color={color}
-              className={cn("navds-pagination__prev-next", {
-                "navds-pagination--invisible": page === 1,
-                "navds-pagination--prev-next--with-text": prevNextTexts,
+              className={cl({
+                "aksel-pagination--invisible": page === 1,
               })}
               disabled={page === 1}
               onClick={() => onPageChange?.(page - 1)}
@@ -227,10 +230,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
             (step, i) => {
               const n = Number(step);
               return Number.isNaN(n) ? (
-                <li
-                  className={cn("navds-pagination__ellipsis")}
-                  key={`${step}${i}`}
-                >
+                <li className="aksel-pagination__ellipsis" key={`${step}${i}`}>
                   <BodyShort
                     size={size === "xsmall" ? "small" : size}
                     as="span"
@@ -257,9 +257,8 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
           <li>
             <Item
               data-color={color}
-              className={cn("navds-pagination__prev-next", {
-                "navds-pagination--invisible": page === count,
-                "navds-pagination--prev-next--with-text": prevNextTexts,
+              className={cl({
+                "aksel-pagination--invisible": page === count,
               })}
               disabled={page === count}
               onClick={() => onPageChange?.(page + 1)}

package/src/pagination/PaginationItem.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import { Button, ButtonProps } from "../button";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 
 export interface PaginationItemProps extends ButtonProps {
@@ -37,22 +37,19 @@ export const Item: PaginationItemType = forwardRef(
       page,
       "data-color": color,
       ...rest
-    },
+    }: PaginationItemProps & { as?: React.ElementType },
     ref,
   ) => {
-    const themeContext = useThemeInternal();
-    const { cn } = useRenameCSS();
-
     return (
       <Button
         as={Component}
-        variant={themeContext?.isDarkside ? "tertiary-neutral" : "tertiary"}
+        variant="tertiary"
         data-color={color}
         aria-current={selected}
         data-pressed={selected}
         ref={ref}
-        className={cn("navds-pagination__item", className, {
-          "navds-pagination__item--selected": selected,
+        className={cl("aksel-pagination__item", className, {
+          "aksel-pagination__item--selected": selected,
         })}
         data-page={page}
         /* TODO: Breaking change to remove since it's in use by some applications. Add to future major version. */

package/src/panel/Panel.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 import { OverridableComponent } from "../util/types";
 
 /**
@@ -23,8 +23,8 @@ export type PanelType = OverridableComponent<PanelProps, HTMLElement>;
  * @deprecated
  * Use Box with padding and border instead
  * ```
- * <Box padding="4" borderRadius="small" />
- * <Box padding="4" borderWidth="1" borderRadius="small" />
+ * <Box padding="4" borderRadius="2" />
+ * <Box padding="4" borderWidth="1" borderRadius="2" />
  * ```
  * Component will be removed in a future major release
  */
@@ -33,12 +33,11 @@ export const Panel: PanelType = forwardRef(
     { children, className, border = false, as: Component = "div", ...rest },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     return (
       <Component
         ref={ref}
-        className={cn("navds-panel", className, {
-          "navds-panel--border": border,
+        className={cl("aksel-panel", className, {
+          "aksel-panel--border": border,
         })}
         {...rest}
       >

package/src/popover/Popover.tsx

@@ -3,16 +3,16 @@ import {
   Placement,
   Side,
   autoUpdate,
-  arrow as flArrow,
   offset as flOffset,
   flip,
   shift,
   useFloating,
 } from "@floating-ui/react";
-import React, { HTMLAttributes, forwardRef, useRef } from "react";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { useModalContext } from "../modal/Modal.context";
 import { DismissableLayer } from "../overlays/dismissablelayer/DismissableLayer";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { omit } from "../util";
+import { cl } from "../util/className";
 import { useClientLayoutEffect } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
@@ -54,13 +54,12 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
     | "left-start"
     | "left-end";
   /**
-   * Adds a arrow from dialog to anchor when true
-   * @default true
+   * @deprecated No longer has any effect.
    */
   arrow?: boolean;
   /**
    * Distance from anchor to popover
-   * @default 16 w/arrow, 4 w/no-arrow
+   * @default 8
    */
   offset?: number;
   /**
@@ -109,43 +108,36 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       className,
       children,
       anchorEl,
-      arrow = true,
       open,
       onClose,
       placement = "top",
       offset,
       strategy: userStrategy,
       flip: _flip = true,
-      ...rest
+      ...restProps
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
-    const arrowRef = useRef<HTMLDivElement | null>(null);
     const isInModal = useModalContext(false) !== undefined;
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
 
-    const themeContext = useThemeInternal();
-
     const {
       update,
       refs,
       placement: flPlacement,
-      middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
       floatingStyles,
     } = useFloating({
       strategy: chosenStrategy,
       placement,
       open,
       middleware: [
-        flOffset(offset ?? (themeContext?.isDarkside ? 8 : arrow ? 16 : 4)),
+        flOffset(offset ?? 8),
         _flip &&
           flip({
             padding: 5,
             fallbackPlacements: getOppositePlacement(placement),
           }),
         shift({ padding: 12 }),
-        flArrow({ element: arrowRef, padding: 8 }),
       ],
     });
 
@@ -165,13 +157,6 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       return () => cleanup();
     }, [refs.floating, refs.reference, update, open, anchorEl]);
 
-    const staticSide = {
-      top: "bottom",
-      right: "left",
-      bottom: "top",
-      left: "right",
-    }[flPlacement.split("-")[0]];
-
     return (
       <DismissableLayer
         asChild
@@ -183,29 +168,15 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       >
         <div
           ref={floatingRef}
-          {...rest}
-          className={cn("navds-popover", className, {
-            "navds-popover--hidden": !open || !anchorEl,
+          {...omit(restProps, ["arrow"])}
+          className={cl("aksel-popover", className, {
+            "aksel-popover--hidden": !open || !anchorEl,
           })}
-          style={{ ...rest.style, ...floatingStyles }}
+          style={{ ...restProps.style, ...floatingStyles }}
           data-placement={flPlacement}
           aria-hidden={!open || !anchorEl}
         >
           {children}
-          {/* Hide arrow in new design, prop will be removed in breaking change update */}
-          {arrow && !themeContext?.isDarkside && (
-            <div
-              ref={(node) => {
-                arrowRef.current = node;
-              }}
-              style={{
-                ...(arrowX != null ? { left: arrowX } : {}),
-                ...(arrowY != null ? { top: arrowY } : {}),
-                ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
-              }}
-              className={cn("navds-popover__arrow")}
-            />
-          )}
         </div>
       </DismissableLayer>
     );

package/src/popover/PopoverContent.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 
 export interface PopoverContentProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -12,12 +12,11 @@ export type PopoverContentType = React.ForwardRefExoticComponent<
 
 const PopoverContent: PopoverContentType = forwardRef(
   ({ className, ...rest }, ref) => {
-    const { cn } = useRenameCSS();
     return (
       <div
         {...rest}
         ref={ref}
-        className={cn("navds-popover__content", className)}
+        className={cl("aksel-popover__content", className)}
       />
     );
   },

package/src/portal/Portal.tsx

@@ -92,20 +92,16 @@ const PortalDiv = forwardRef<HTMLDivElement, PortalDivProps>(
   (props: PortalDivProps, forwardedRef) => {
     const themeContext = useThemeInternal();
 
-    if (themeContext?.isDarkside) {
-      return (
-        <Theme
-          theme={themeContext?.theme}
-          asChild
-          hasBackground={false}
-          data-color={themeContext?.color}
-        >
-          <div ref={forwardedRef} {...props} />
-        </Theme>
-      );
-    }
-
-    return <div ref={forwardedRef} {...props} />;
+    return (
+      <Theme
+        theme={themeContext?.theme}
+        asChild
+        hasBackground={false}
+        data-color={themeContext?.color}
+      >
+        <div ref={forwardedRef} {...props} />
+      </Theme>
+    );
   },
 );
 

package/src/process/Process.tsx

@@ -5,9 +5,9 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useRenameCSS } from "../theme/Theme";
 import { BodyLong, BodyShort, Heading } from "../typography";
 import { useId } from "../util";
+import { cl } from "../util/className";
 import { createStrictContext } from "../util/create-strict-context";
 import { useMergeRefs } from "../util/hooks";
 import { useI18n } from "../util/i18n/i18n.hooks";
@@ -108,8 +108,6 @@ export const Process: ProcessComponent = forwardRef<
     }: ProcessProps,
     forwardedRef,
   ) => {
-    const { cn } = useRenameCSS();
-
     const rootId = useId(id);
 
     const rootRef = useRef<HTMLOListElement>(null);
@@ -158,7 +156,7 @@ export const Process: ProcessComponent = forwardRef<
         // biome-ignore lint/a11y/noRedundantRoles: See comment above
         role="list"
         {...restProps}
-        className={cn("navds-process", className)}
+        className={cl("aksel-process", className)}
         id={rootId}
         aria-controls={activeChildId}
         data-truncated={isTruncated}
@@ -220,7 +218,6 @@ export const ProcessEvent = forwardRef<HTMLLIElement, ProcessEventProps>(
     forwardedRef,
   ) => {
     const translate = useI18n("Process");
-    const { cn } = useRenameCSS();
     const eventId = useId();
     const { syncAriaControls, hideStatusText, rootId } = useProcessContext();
 
@@ -237,22 +234,19 @@ export const ProcessEvent = forwardRef<HTMLLIElement, ProcessEventProps>(
         id={id ?? eventId}
         {...restProps}
         aria-controls={isActive ? rootId : undefined}
-        className={cn("navds-process__event", className)}
+        className={cl("aksel-process__event", className)}
         data-dot={bullet === undefined}
         data-process-event=""
         data-status={status}
       >
         <ProcessLine position="start" />
-        <div className={cn("navds-process__item")}>
+        <div className="aksel-process__item">
           <ProcessBullet>{bullet}</ProcessBullet>
 
-          <div className={cn("navds-process__body")}>
+          <div className="aksel-process__body">
             {title && <ProcessTitle>{title}</ProcessTitle>}
             {isActive && !hideStatusText && (
-              <BodyShort
-                size="small"
-                className={cn("navds-process__active-label")}
-              >
+              <BodyShort size="small" className="aksel-process__active-label">
                 {translate("active")}
               </BodyShort>
             )}
@@ -277,10 +271,8 @@ interface ProcessTitleProps {
 }
 
 const ProcessTitle = ({ children }: ProcessTitleProps) => {
-  const { cn } = useRenameCSS();
-
   return (
-    <Heading size="small" as="div" className={cn("navds-process__title")}>
+    <Heading size="small" as="div" className="aksel-process__title">
       {children}
     </Heading>
   );
@@ -295,15 +287,13 @@ interface ProcessTimestampProps {
 }
 
 const ProcessTimestamp = ({ children }: ProcessTimestampProps) => {
-  const { cn } = useRenameCSS();
-
   return (
     <BodyShort
       spacing
       as="div"
       size="small"
       textColor="subtle"
-      className={cn("navds-process__timestamp")}
+      className="aksel-process__timestamp"
     >
       {children}
     </BodyShort>
@@ -319,10 +309,8 @@ interface ProcessContentProps {
 }
 
 const ProcessContent = ({ children }: ProcessContentProps) => {
-  const { cn } = useRenameCSS();
-
   return (
-    <BodyLong as="div" className={cn("navds-process__content")}>
+    <BodyLong as="div" className="aksel-process__content">
       {children}
     </BodyLong>
   );
@@ -337,13 +325,11 @@ interface ProcessBulletProps {
 }
 
 const ProcessBullet = ({ children }: ProcessBulletProps) => {
-  const { cn } = useRenameCSS();
-
   return (
     <BodyShort
       as="span"
       weight="semibold"
-      className={cn("navds-process__bullet")}
+      className="aksel-process__bullet"
       aria-hidden
     >
       {children}
@@ -357,11 +343,7 @@ type ProcessLineProps = {
   position?: "start" | "end";
 };
 const ProcessLine = ({ position }: ProcessLineProps) => {
-  const { cn } = useRenameCSS();
-
-  return (
-    <span className={cn("navds-process__line")} data-position={position} />
-  );
+  return <span className="aksel-process__line" data-position={position} />;
 };
 
 /* -------------------------- Process exports ------------------------- */

package/src/progress-bar/ProgressBar.tsx

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes, forwardRef, useEffect } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
+import { cl } from "../util/className";
 import { useTimeout } from "../util/hooks/useTimeout";
 import { useValueAsRef } from "../util/hooks/useValueAsRef";
 import { useI18n } from "../util/i18n/i18n.hooks";
@@ -45,6 +46,12 @@ interface ProgressBarPropsBase
    * Not needed if `aria-labelledby` is used.
    */
   "aria-label"?: string;
+  /**
+   * Overrides inherited color.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 export type ProgressBarProps = ProgressBarPropsBase &
@@ -95,7 +102,6 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const translateX = 100 - (Math.round(value) / valueMax) * 100;
     const onTimeoutRef = useValueAsRef(simulated?.onTimeout);
 
@@ -114,9 +120,9 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     return (
       <div
         ref={ref}
-        className={cn(
-          "navds-progress-bar",
-          `navds-progress-bar--${size}`,
+        className={cl(
+          "aksel-progress-bar",
+          `aksel-progress-bar--${size}`,
           className,
         )}
         aria-valuemax={simulated?.seconds ? 0 : Math.round(valueMax)}
@@ -137,16 +143,16 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
         {...rest}
       >
         <div
-          className={cn("navds-progress-bar__foreground", {
-            "navds-progress-bar__foreground--indeterminate":
+          className={cl("aksel-progress-bar__foreground", {
+            "aksel-progress-bar__foreground--indeterminate":
               simulated?.seconds !== undefined,
           })}
           style={{
-            "--__ac-progress-bar-simulated":
+            "--__axc-progress-bar-simulated":
               simulated?.seconds !== undefined
                 ? `${simulated?.seconds}s`
                 : undefined,
-            "--__ac-progress-bar-translate": `-${translateX}%`,
+            "--__axc-progress-bar-translate": `-${translateX}%`,
           }}
         />
       </div>

package/src/react-css.d.ts

@@ -2,9 +2,6 @@ import "react";
 
 declare module "react" {
   interface CSSProperties {
-    [key: `--ac-${string}`]: string | number | undefined;
-    [key: `--__ac-${string}`]: string | number | undefined;
-    [key: `--axc-${string}`]: string | number | undefined;
     [key: `--__axc-${string}`]: string | number | undefined;
   }
 }

package/src/read-more/ReadMore.tsx

@@ -1,7 +1,9 @@
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import { useRenameCSS } from "../theme/Theme";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
+import type { AkselColor } from "../types";
 import { BodyLong } from "../typography";
+import { cl } from "../util/className";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useControllableState } from "../util/hooks/useControllableState";
 
@@ -34,6 +36,15 @@ export interface ReadMoreProps
    * @default "medium"
    */
   size?: "large" | "medium" | "small";
+  /**
+   * Overrides inherited color.
+   *
+   * We recommend only using `accent`. We have disallowed status-colors.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   * @private
+   */
+  "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
 /**
@@ -61,7 +72,6 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
     }: ReadMoreProps,
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
       value: open,
@@ -72,11 +82,11 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
 
     return (
       <div
-        className={cn(
-          "navds-read-more",
-          `navds-read-more--${size}`,
+        className={cl(
+          "aksel-read-more",
+          `aksel-read-more--${size}`,
           className,
-          { "navds-read-more--open": _open },
+          { "aksel-read-more--open": _open },
         )}
         data-volume="low"
       >
@@ -84,15 +94,15 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
           {...rest}
           ref={ref}
           type="button"
-          className={cn("navds-read-more__button", "navds-body-short", {
-            "navds-body-short--small": size === "small",
+          className={cl("aksel-read-more__button", "aksel-body-short", {
+            "aksel-body-short--small": size === "small",
           })}
           onClick={composeEventHandlers(onClick, () => _setOpen((x) => !x))}
           aria-expanded={_open}
           data-state={_open ? "open" : "closed"}
         >
           <ChevronDownIcon
-            className={cn("navds-read-more__expand-icon")}
+            className="aksel-read-more__expand-icon"
             aria-hidden
           />
           <span>{header}</span>
@@ -100,8 +110,8 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
 
         <BodyLong
           as="div"
-          className={cn("navds-read-more__content", {
-            "navds-read-more__content--closed": !_open,
+          className={cl("aksel-read-more__content", {
+            "aksel-read-more__content--closed": !_open,
           })}
           size={typoSize}
           data-state={_open ? "open" : "closed"}

package/src/skeleton/Skeleton.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS } from "../theme/Theme";
+import { cl } from "../util/className";
 
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
@@ -45,20 +45,19 @@ export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
     },
     ref,
   ) => {
-    const { cn } = useRenameCSS();
     return (
       <As
         {...rest}
         ref={ref}
-        className={cn(
-          "navds-skeleton",
+        className={cl(
+          "aksel-skeleton",
           className,
-          `navds-skeleton--${variant}`,
+          `aksel-skeleton--${variant}`,
           {
-            "navds-skeleton--has-children": Boolean(children),
-            "navds-skeleton--no-height": !height,
-            "navds-skeleton--no-width": !width,
-            "navds-skeleton--inline": As === "span",
+            "aksel-skeleton--has-children": Boolean(children),
+            "aksel-skeleton--no-height": !height,
+            "aksel-skeleton--no-width": !width,
+            "aksel-skeleton--inline": As === "span",
           },
         )}
         style={{ ...style, width, height }}