@navikt/ds-react 7.40.0 → 8.0.0

package/src/link/Link.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
+import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { OverridableComponent } from "../util/types";
 
@@ -19,14 +20,21 @@ export interface LinkProps
    */
   inlineText?: boolean;
   /**
-   * Variant of the component to use.
-   * @default "action"
+   * @deprecated Deprecated in v8. Use `data-color` prop instead.
    */
   variant?: "action" | "neutral" | "subtle";
   /**
    * Link text
    */
   children: React.ReactNode;
+  /**
+   * Overrides inherited color.
+   *
+   * We recommend only using `accent` and `neutral`. We have disallowed status-colors.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: Exclude<AkselColor, AkselStatusColorRole>;
 }
 
 /**
@@ -64,28 +72,14 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
       },
       ref,
     ) => {
-      const themeContext = useThemeInternal();
       const { cn } = useRenameCSS();
 
-      /*
-       * We avoid defaulting to "action" in darkside.
-       */
-      let localVariant: LinkProps["variant"];
-
-      if (themeContext?.isDarkside) {
-        localVariant = variant;
-      } else {
-        localVariant = variant ?? "action";
-      }
-
       return (
         <Component
-          data-color={color ?? variantToColor(localVariant)}
-          data-variant={localVariant}
+          data-color={color ?? variantToColor(variant)}
           {...rest}
           ref={ref}
           className={cn("navds-link", className, {
-            [`navds-link--${localVariant}`]: localVariant,
             "navds-link--remove-underline": !underline,
             "navds-link--inline-text": inlineText,
           })}
@@ -101,7 +95,6 @@ function variantToColor(
     case "action":
       return "accent";
     case "neutral":
-      return "neutral";
     case "subtle":
       return "neutral";
     default:

package/src/link-card/LinkCard.tsx

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
 import { BodyLong, Heading } from "../typography";
 import { createStrictContext } from "../util/create-strict-context";
 import {
@@ -25,6 +26,14 @@ interface LinkCardProps extends HTMLAttributes<HTMLDivElement> {
    * @default "medium"
    */
   size?: "small" | "medium";
+  /**
+   * Overrides inherited color.
+   *
+   * We reccomend avoiding status-colors (`info`, `success`, `warning`, `danger`) in LinkCards.
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 type LinkCardContextProps = {

package/src/list/List.tsx

@@ -1,20 +1,11 @@
 import React, { forwardRef, useContext } from "react";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
-import { BodyLong, BodyShort, Heading, HeadingProps } from "../typography";
+import { useRenameCSS } from "../theme/Theme";
+import { BodyLong } from "../typography";
 import { ListItem } from "./List.Item";
 import { ListContext } from "./List.context";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { ListItemProps, ListProps } from "./List.types";
 
-const headingSizeMap: Record<
-  Exclude<ListProps["size"], undefined>,
-  HeadingProps["size"]
-> = {
-  small: "xsmall",
-  medium: "small",
-  large: "medium",
-};
-
 export interface ListComponent
   extends React.ForwardRefExoticComponent<
     ListProps & React.RefAttributes<HTMLDivElement>
@@ -46,9 +37,6 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
       children,
       className,
       as: ListTag = "ul",
-      title,
-      description,
-      headingTag,
       size,
       "aria-label": _ariaLabel,
       "aria-labelledby": _ariaLabelledBy,
@@ -59,46 +47,9 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
     const { size: contextSize } = useContext(ListContext);
 
     const { cn } = useRenameCSS();
-    const themeContext = useThemeInternal();
 
     const listSize = size ?? contextSize;
 
-    if (themeContext?.isDarkside) {
-      if (
-        process.env.NODE_ENV !== "production" &&
-        (title || description || headingTag)
-      ) {
-        console.warn(
-          "List: title, description and headingTag are deprecated and will not work with updated theme for Aksel.",
-        );
-      }
-
-      return (
-        <ListContext.Provider
-          value={{
-            listType: ListTag,
-            size: listSize,
-          }}
-        >
-          <BodyLong
-            as="div"
-            {...rest}
-            size={listSize}
-            ref={ref}
-            className={cn("navds-list", `navds-list--${listSize}`, className)}
-          >
-            <ListTag
-              role="list"
-              aria-label={_ariaLabel}
-              aria-labelledby={_ariaLabelledBy}
-            >
-              {children}
-            </ListTag>
-          </BodyLong>
-        </ListContext.Provider>
-      );
-    }
-
     return (
       <ListContext.Provider
         value={{
@@ -113,12 +64,6 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
           ref={ref}
           className={cn("navds-list", `navds-list--${listSize}`, className)}
         >
-          {title && (
-            <Heading size={headingSizeMap[listSize]} as={headingTag ?? "h3"}>
-              {title}
-            </Heading>
-          )}
-          {description && <BodyShort size={listSize}>{description}</BodyShort>}
           <ListTag
             role="list"
             aria-label={_ariaLabel}

package/src/list/List.types.ts

@@ -6,21 +6,9 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   as?: "ul" | "ol";
   /**
-   * List heading title.
-   * @deprecated Use a "plain" <Heading> instead of `title`, Composition of smaller components preferred over smarter components.
+   * @deprecated Use <Heading> instead of `title`.
    */
-  title?: string;
-  /**
-   * List heading description.
-   * @deprecated Use a "plain" <BodyShort> instead of `description`, Composition of smaller components preferred over smarter components.
-   */
-  description?: string;
-  /**
-   * Allows setting a different HTML h-tag.
-   * @default "h3"
-   * @deprecated The `title` prop gets deprecated, so this one follows suit, as it was a supplementary prop to the title.
-   */
-  headingTag?: React.ElementType<any>;
+  title?: never;
   /**
    * Changes margin-block on list and font size on items.
    * @default "medium"

package/src/loader/Loader.tsx

@@ -35,7 +35,10 @@ export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
    */
   variant?: "neutral" | "interaction" | "inverted";
   /**
-   * Overrides loader-color
+   * Overrides color.
+   *
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
    */
   "data-color"?: AkselColor;
 }

package/src/modal/Modal.tsx

@@ -17,7 +17,6 @@ import {
   MouseCoordinates,
   coordsAreInside,
   getCloseHandler,
-  useBodyScrollLock,
   useIsModalOpen,
 } from "./ModalUtils";
 import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
@@ -156,12 +155,6 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       referenceElement: modalRef.current,
     });
 
-    /**
-     * TODO: Kept for legacy support.
-     * - Remove utility in v8 and deprecate body-classes in ModalUtils.ts
-     */
-    useBodyScrollLock(modalRef, portalNode, isNested);
-
     const isWidthPreset =
       typeof width === "string" && ["small", "medium"].includes(width);
 

package/src/modal/ModalUtils.ts

@@ -1,5 +1,4 @@
 import React, { useEffect } from "react";
-import { ownerDocument } from "../util/owner";
 import type { ModalProps } from "./types";
 
 export interface MouseCoordinates {
@@ -55,49 +54,4 @@ function useIsModalOpen(modalRef: HTMLDialogElement | null) {
   return isOpen;
 }
 
-export const BODY_CLASS_LEGACY = "navds-modal__document-body";
-
-function useBodyScrollLock(
-  modalRef: React.RefObject<HTMLDialogElement | null>,
-  portalNode: HTMLElement | null,
-  isNested: boolean,
-) {
-  React.useEffect(() => {
-    if (isNested) {
-      return;
-    }
-
-    // We check both to avoid running this twice when not using portal
-    if (!modalRef.current || !portalNode) {
-      return;
-    }
-
-    const ownerDoc = ownerDocument(modalRef.current);
-
-    // In case `open` is true initially
-    if (modalRef.current.open) {
-      ownerDoc.body.classList.add(BODY_CLASS_LEGACY);
-    }
-
-    const observer = new MutationObserver(() => {
-      if (modalRef.current?.open) {
-        ownerDoc.body.classList.add(BODY_CLASS_LEGACY);
-      } else {
-        ownerDoc.body.classList.remove(BODY_CLASS_LEGACY);
-      }
-    });
-
-    observer.observe(modalRef.current, {
-      attributes: true,
-      attributeFilter: ["open"],
-    });
-
-    return () => {
-      observer.disconnect();
-      // In case modal is unmounted before it's closed
-      ownerDoc.body.classList.remove(BODY_CLASS_LEGACY);
-    };
-  }, [modalRef, portalNode, isNested]);
-}
-
-export { useIsModalOpen, useBodyScrollLock };
+export { useIsModalOpen };

package/src/overlays/action-menu/ActionMenu.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useRef } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
 import { useModalContext } from "../../modal/Modal.context";
 import { Slot } from "../../slot/Slot";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
+import { useRenameCSS } from "../../theme/Theme";
 import { OverridableComponent, useId } from "../../util";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { createStrictContext } from "../../util/create-strict-context";
@@ -391,10 +391,10 @@ export const ActionMenuContent = forwardRef<
           style={{
             ...style,
             ...{
-              "--__ac-action-menu-content-transform-origin":
-                "var(--ac-floating-transform-origin)",
-              "--__ac-action-menu-content-available-height":
-                "var(--ac-floating-available-height)",
+              "--__axc-action-menu-content-transform-origin":
+                "var(--__axc-floating-transform-origin)",
+              "--__axc-action-menu-content-available-height":
+                "var(--__axc-floating-available-height)",
             },
           }}
         >
@@ -669,7 +669,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="24"
                   height="24"
                   rx="4"
-                  fill="var(--ax-border-neutral, var(--a-border-default))"
+                  fill="var(--ax-border-neutral)"
                 />
                 <rect
                   x="1"
@@ -677,7 +677,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="22"
                   height="22"
                   rx="3"
-                  fill="var(--ax-bg-default, var(--a-surface-default))"
+                  fill="var(--ax-bg-default)"
                   strokeWidth="2"
                 />
               </g>
@@ -690,7 +690,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="24"
                   height="24"
                   rx="4"
-                  fill="var(--ax-bg-strong-pressed, var(--a-surface-action-selected))"
+                  fill="var(--ax-bg-strong-pressed)"
                 />
                 <rect
                   x="6"
@@ -698,7 +698,7 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="12"
                   height="4"
                   rx="1"
-                  fill="var(--ax-bg-default, var(--a-surface-default))"
+                  fill="var(--ax-bg-default)"
                 />
               </g>
               <g className={cn("navds-action-menu__indicator-icon--checked")}>
@@ -706,11 +706,11 @@ export const ActionMenuCheckboxItem = forwardRef<
                   width="24"
                   height="24"
                   rx="4"
-                  fill="var(--ax-bg-strong-pressed, var(--a-surface-action-selected))"
+                  fill="var(--ax-bg-strong-pressed)"
                 />
                 <path
                   d="M10.0352 13.4148L16.4752 7.40467C17.0792 6.83965 18.029 6.86933 18.5955 7.47478C19.162 8.08027 19.1296 9.03007 18.5245 9.59621L11.0211 16.5993C10.741 16.859 10.3756 17 10.0002 17C9.60651 17 9.22717 16.8462 8.93914 16.5611L6.43914 14.0611C5.85362 13.4756 5.85362 12.5254 6.43914 11.9399C7.02467 11.3544 7.97483 11.3544 8.56036 11.9399L10.0352 13.4148Z"
-                  fill="var(--ax-bg-default, var(--a-surface-default))"
+                  fill="var(--ax-bg-default)"
                 />
               </g>
             </svg>
@@ -776,7 +776,6 @@ export const ActionMenuRadioItem = forwardRef<
     ref,
   ) => {
     const { cn } = useRenameCSS();
-    const themeContext = useThemeInternal();
 
     return (
       <Menu.RadioItem
@@ -811,7 +810,7 @@ export const ActionMenuRadioItem = forwardRef<
                   width="24"
                   height="24"
                   rx="12"
-                  fill="var(--ax-border-neutral, var(--a-border-default))"
+                  fill="var(--ax-border-neutral)"
                 />
                 <rect
                   x="1"
@@ -820,51 +819,25 @@ export const ActionMenuRadioItem = forwardRef<
                   height="22"
                   rx="11"
                   strokeWidth="2"
-                  fill="var(--ax-bg-default, var(--a-surface-default))"
+                  fill="var(--ax-bg-default)"
+                />
+              </g>
+              <g className={cn("navds-action-menu__indicator-icon--checked")}>
+                <rect
+                  width="24"
+                  height="24"
+                  rx="12"
+                  fill="var(--ax-bg-strong-pressed)"
+                />
+                <rect
+                  x="8"
+                  y="8"
+                  width="8"
+                  height="8"
+                  rx="4"
+                  fill="var(--ax-bg-default)"
                 />
               </g>
-              {themeContext?.isDarkside ? (
-                <g className={cn("navds-action-menu__indicator-icon--checked")}>
-                  <rect
-                    width="24"
-                    height="24"
-                    rx="12"
-                    fill="var(--ax-bg-strong-pressed)"
-                  />
-                  <rect
-                    x="8"
-                    y="8"
-                    width="8"
-                    height="8"
-                    rx="4"
-                    fill="var(--ax-bg-default, var(--a-surface-default))"
-                  />
-                </g>
-              ) : (
-                <g className={cn("navds-action-menu__indicator-icon--checked")}>
-                  <rect
-                    x="1"
-                    y="1"
-                    width="22"
-                    height="22"
-                    rx="11"
-                    fill="var(--ax-bg-default, var(--a-surface-default))"
-                  />
-                  <rect
-                    x="1"
-                    y="1"
-                    width="22"
-                    height="22"
-                    rx="11"
-                    stroke="var(--ax-bg-strong-pressed, var(--a-surface-action-selected))"
-                    strokeWidth="2"
-                  />
-                  <path
-                    d="M20 12C20 16.4178 16.4178 20 12 20C7.58222 20 4 16.4178 4 12C4 7.58222 7.58222 4 12 4C16.4178 4 20 7.58222 20 12Z"
-                    fill="var(--ax-bg-strong-pressed, var(--a-surface-action-selected))"
-                  />
-                </g>
-              )}
             </svg>
           </Menu.ItemIndicator>
         </Marker>
@@ -988,7 +961,7 @@ interface ActionMenuSubContentProps
 export const ActionMenuSubContent = forwardRef<
   ActionMenuSubContentElement,
   ActionMenuSubContentProps
->(({ children, className, style, ...rest }: ActionMenuSubContentProps, ref) => {
+>(({ children, className, ...rest }: ActionMenuSubContentProps, ref) => {
   const { cn } = useRenameCSS();
   const context = useActionMenuContext();
 
@@ -1004,20 +977,6 @@ export const ActionMenuSubContent = forwardRef<
           "navds-action-menu__content navds-action-menu__sub-content",
           className,
         )}
-        style={{
-          ...style,
-          ...{
-            "--ac-action-menu-content-transform-origin":
-              "var(--ac-floating-transform-origin)",
-            "--ac-action-menu-content-available-width":
-              "var(--ac-floating-available-width)",
-            "--ac-action-menu-content-available-height":
-              "var(--ac-floating-available-height)",
-            "--ac-action-menu-trigger-width": "var(--ac-floating-anchor-width)",
-            "--ac-action-menu-trigger-height":
-              "var(--ac-floating-anchor-height)",
-          },
-        }}
       >
         <div className={cn("navds-action-menu__content-inner")}>{children}</div>
       </Menu.SubContent>

package/src/overlays/floating/Floating.tsx

@@ -316,19 +316,19 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
              * Allows styling and animations based on the available space.
              */
             contentStyle.setProperty(
-              "--ac-floating-available-width",
+              "--__axc-floating-available-width",
               `${availableWidth}px`,
             );
             contentStyle.setProperty(
-              "--ac-floating-available-height",
+              "--__axc-floating-available-height",
               `${availableHeight}px`,
             );
             contentStyle.setProperty(
-              "--ac-floating-anchor-width",
+              "--__axc-floating-anchor-width",
               `${anchorWidth}px`,
             );
             contentStyle.setProperty(
-              "--ac-floating-anchor-height",
+              "--__axc-floating-anchor-height",
               `${anchorHeight}px`,
             );
           },
@@ -388,7 +388,7 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
             : "translate(0, -200%)", // keep off the page when measuring
           minWidth: "max-content",
           zIndex: "9999999",
-          ["--ac-floating-transform-origin" as any]: [
+          ["--__axc-floating-transform-origin" as any]: [
             middlewareData.transformOrigin?.x,
             middlewareData.transformOrigin?.y,
           ].join(" "),

package/src/pagination/Pagination.tsx

@@ -1,7 +1,9 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import { useRenameCSS } from "../theme/Theme";
+import { AkselColor } from "../types";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util";
 import { useI18n } from "../util/i18n/i18n.hooks";
@@ -68,6 +70,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 +125,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,7 +156,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       srHeading,
       "aria-labelledby": ariaLabelledBy,
       renderItem: Item = PaginationItem,
-      "data-color": color,
+      "data-color": color = "neutral",
       ...rest
     },
     ref,
@@ -204,9 +210,8 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
           <li>
             <Item
               data-color={color}
-              className={cn("navds-pagination__prev-next", {
+              className={cn({
                 "navds-pagination--invisible": page === 1,
-                "navds-pagination--prev-next--with-text": prevNextTexts,
               })}
               disabled={page === 1}
               onClick={() => onPageChange?.(page - 1)}
@@ -257,9 +262,8 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
           <li>
             <Item
               data-color={color}
-              className={cn("navds-pagination__prev-next", {
+              className={cn({
                 "navds-pagination--invisible": page === count,
-                "navds-pagination--prev-next--with-text": prevNextTexts,
               })}
               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 { useRenameCSS } from "../theme/Theme";
 import { OverridableComponent } from "../util/types";
 
 export interface PaginationItemProps extends ButtonProps {
@@ -37,16 +37,15 @@ 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}

package/src/panel/Panel.tsx

@@ -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
  */