@navikt/ds-react 7.40.0 → 8.0.0

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 { useRenameCSS } from "../theme/Theme";
+import { omit } from "../util";
 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,38 @@ 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 +159,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 +170,15 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       >
         <div
           ref={floatingRef}
-          {...rest}
+          {...omit(restProps, ["arrow"])}
           className={cn("navds-popover", className, {
             "navds-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/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/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 { 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 &
@@ -142,11 +149,11 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
               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,6 +1,8 @@
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
 import { BodyLong } from "../typography";
 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>;
 }
 
 /**

package/src/stepper/Stepper.tsx

@@ -90,11 +90,7 @@ export const Stepper: StepperComponent = forwardRef<
       <ol
         {...rest}
         ref={ref}
-        className={cn(
-          "navds-stepper",
-          orientation === "horizontal" ? "navds-stepper--horizontal" : "",
-          className,
-        )}
+        className={cn("navds-stepper", className)}
         data-orientation={orientation}
       >
         {React.Children.map(children, (step, index) => {
@@ -105,12 +101,8 @@ export const Stepper: StepperComponent = forwardRef<
 
           return (
             <li
-              className={cn("navds-stepper__item", {
-                /* TODO: Remove these 3 classNames in darkmode update */
-                "navds-stepper__item--behind": activeStep > index,
-                "navds-stepper__item--completed": stepProps.completed,
-                "navds-stepper__item--non-interactive": !isInteractive,
-              })}
+              className={cn("navds-stepper__item")}
+              data-interactive={isInteractive}
               data-color={isInteractive ? undefined : "neutral"}
               key={index + (children?.toString?.() ?? "")}
             >

package/src/tag/Tag.tsx

@@ -3,44 +3,41 @@ import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { BodyShort } from "../typography";
 
+type legacyVariants =
+  | "warning"
+  | "warning-filled"
+  | "warning-moderate"
+  | "error"
+  | "error-filled"
+  | "error-moderate"
+  | "info"
+  | "info-filled"
+  | "info-moderate"
+  | "success"
+  | "success-filled"
+  | "success-moderate"
+  | "neutral"
+  | "neutral-filled"
+  | "neutral-moderate"
+  | "alt1"
+  | "alt1-filled"
+  | "alt1-moderate"
+  | "alt2"
+  | "alt2-filled"
+  | "alt2-moderate"
+  | "alt3"
+  | "alt3-filled"
+  | "alt3-moderate";
+
+type HiddenVariant = legacyVariants & { __brand?: never };
+
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;
   /**
    * Changes visual profile of tag
+   * @default "outline"
    */
-  variant:
-    | "warning"
-    | "warning-filled"
-    | "warning-moderate"
-    | "error"
-    | "error-filled"
-    | "error-moderate"
-    | "info"
-    | "info-filled"
-    | "info-moderate"
-    | "success"
-    | "success-filled"
-    | "success-moderate"
-    | "neutral"
-    | "neutral-filled"
-    | "neutral-moderate"
-    | "alt1"
-    | "alt1-filled"
-    | "alt1-moderate"
-    | "alt2"
-    | "alt2-filled"
-    | "alt2-moderate"
-    | "alt3"
-    | "alt3-filled"
-    | "alt3-moderate";
-
-  /* Temp hide these until naming is resolved */
-  // | "meta-purple"
-  // | "meta-purple-filled"
-  // | "meta-purple-moderate"
-  // | "meta-lime"
-  // | "meta-lime-filled"
-  // | "meta-lime-moderate";
+  variant?: "outline" | "moderate" | "strong" | HiddenVariant;
   /**
    * @default "medium"
    */
@@ -49,6 +46,11 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
    * Tag Icon
    */
   icon?: React.ReactNode;
+  /**
+   * Tag color
+   * @default "neutral"
+   */
+  "data-color"?: AkselColor;
 }
 
 /**
@@ -67,7 +69,7 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
     {
       children,
       className,
-      variant,
+      variant = "outline",
       size = "medium",
       icon,
       "data-color": color,
@@ -79,20 +81,22 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
     const filledVariant = variant?.endsWith("-filled") && "strong";
     const moderateVariant = variant?.endsWith("-moderate") && "moderate";
 
+    const updatedVariant =
+      variant === "moderate" || variant === "strong" || variant === "outline";
+
     return (
       <BodyShort
         data-color={color ?? variantToColor(variant)}
-        data-variant={filledVariant || moderateVariant || "outline"}
+        data-variant={
+          updatedVariant
+            ? variant
+            : filledVariant || moderateVariant || "outline"
+        }
         {...rest}
         ref={ref}
         as="span"
         size={size === "medium" ? "medium" : "small"}
-        className={cn(
-          "navds-tag",
-          className,
-          `navds-tag--${variant}`,
-          `navds-tag--${size}`,
-        )}
+        className={cn("navds-tag", className, `navds-tag--${size}`)}
       >
         {icon && <span className={cn("navds-tag__icon--left")}>{icon}</span>}
         {children}

package/src/theme/Theme.tsx

@@ -15,12 +15,6 @@ type RenameCSSContext = {
   cn: (...inputs: Parameters<typeof cl>) => ReturnType<typeof cl>;
 };
 
-const { Provider: RenameCSSProvider, useContext: useRenameCSS } =
-  createStrictContext<RenameCSSContext>({
-    name: "RenameCSS",
-    defaultValue: { cn: cl },
-  });
-
 export const compositeClassFunction = (
   ...inputs: Parameters<typeof cl>
 ): string => {
@@ -33,6 +27,12 @@ export const compositeClassFunction = (
   return classes.trim();
 };
 
+const { Provider: RenameCSSProvider, useContext: useRenameCSS } =
+  createStrictContext<RenameCSSContext>({
+    name: "RenameCSS",
+    defaultValue: { cn: compositeClassFunction },
+  });
+
 const RenameCSS = ({ children }: { children: React.ReactNode }) => {
   return (
     <RenameCSSProvider cn={compositeClassFunction}>
@@ -48,16 +48,15 @@ const DEFAULT_COLOR: AkselColor = "accent";
 
 type ThemeContext = {
   /**
-   * Color theme
-   * @default Inherits parent theme, or "light" if root
+   * Color theme.
+   * @default Inherits parent theme, or "light" if root.
    */
   theme?: "light" | "dark";
   color?: AkselColor;
   /**
-   * Indicates if Theme-component is used or not.
-   * @default false
+   * Indicates if Theme-component is on root-level or not.
    */
-  isDarkside: boolean;
+  isRoot: boolean;
 };
 
 const { Provider: ThemeProvider, useContext: useThemeInternal } =
@@ -65,21 +64,22 @@ const { Provider: ThemeProvider, useContext: useThemeInternal } =
     name: "ThemeProvider",
     defaultValue: {
       color: DEFAULT_COLOR,
-      isDarkside: false,
+      isRoot: true,
     },
   });
 
 export type ThemeProps = {
   className?: string;
   /**
-   * Sets default background when enabled
+   * Whether to apply the default background.
+   * @default `true` if this is the root instance and `theme` is defined, otherwise `false`.
    */
   hasBackground?: boolean;
   /**
-   * Sets default 'base'-color for application
+   * Changes default 'base'-color for application.
    */
   "data-color"?: AkselColor;
-} & Omit<ThemeContext, "color" | "isDarkside"> &
+} & Omit<ThemeContext, "color" | "isRoot"> &
   AsChildProps;
 
 const Theme = forwardRef<HTMLDivElement, ThemeProps>(
@@ -91,11 +91,11 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
       className,
       asChild = false,
       theme = context?.theme,
-      hasBackground: hasBackgroundProp = true,
+      hasBackground: hasBackgroundProp,
       "data-color": color = context?.color,
     } = props;
 
-    const isRoot = !context?.isDarkside;
+    const isRoot = context?.isRoot;
 
     const hasBackground =
       hasBackgroundProp ?? (isRoot && props.theme !== undefined);
@@ -103,13 +103,13 @@ const Theme = forwardRef<HTMLDivElement, ThemeProps>(
     const SlotElement = asChild ? Slot : "div";
 
     return (
-      <ThemeProvider theme={theme} color={color} isDarkside={true}>
+      <ThemeProvider theme={theme} color={color} isRoot={false}>
         <RenameCSS>
           <SlotElement
             ref={ref}
             className={cl("aksel-theme", className, theme)}
             data-background={hasBackground}
-            data-color={color ?? ""}
+            data-color={color ?? DEFAULT_COLOR}
           >
             {children}
           </SlotElement>

package/src/timeline/period/index.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from "react";
+import type { AkselColor } from "../../types";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import type { TimelineComponentTypes } from "../utils/types.internal";
@@ -24,6 +25,13 @@ export interface TimelinePeriodProps
    * @default "neutral"
    */
   status?: "success" | "warning" | "danger" | "info" | "neutral";
+  /**
+   * Overrides color set by status.
+   *
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
   /**
    * Status label for screen-readers
    * e.g "Sykemeldt", "foreldrepermisjon"

package/src/toggle-group/ToggleGroup.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from "react";
-import { useRenameCSS, useThemeInternal } from "../theme/Theme";
+import { useRenameCSS } from "../theme/Theme";
 import { AkselColor } from "../types";
 import { Label } from "../typography";
 import { useId } from "../util";
@@ -55,7 +55,6 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
     ref,
   ) => {
     const { cn } = useRenameCSS();
-    const themeContext = useThemeInternal();
     const descendants = useToggleGroupDescendants();
 
     const toggleGroupContext = useToggleGroup({
@@ -82,14 +81,6 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       console.error("ToggleGroup needs either a value or defaultValue");
     }
 
-    let localVariant: ToggleGroupProps["variant"] | undefined;
-
-    if (themeContext?.isDarkside) {
-      localVariant = variant;
-    } else {
-      localVariant = variant ?? "action";
-    }
-
     return (
       <ToggleGroupDescendantsProvider value={descendants}>
         <ToggleGroupProvider {...context}>
@@ -97,7 +88,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
             className={cn("navds-toggle-group__wrapper", className, {
               "navds-toggle-group__wrapper--fill": fill,
             })}
-            data-color={color ?? variantToColor(localVariant)}
+            data-color={color ?? variantToColor(variant)}
           >
             {label && (
               <Label
@@ -116,7 +107,6 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
               className={cn(
                 "navds-toggle-group",
                 `navds-toggle-group--${size}`,
-                { [`navds-toggle-group--${localVariant}`]: localVariant },
               )}
               role="radiogroup"
             >

package/src/toggle-group/ToggleGroup.types.ts

@@ -1,4 +1,6 @@
 import { HTMLAttributes } from "react";
+import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
+import type { AkselColor } from "../types";
 
 export interface ToggleGroupProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
@@ -28,10 +30,17 @@ export interface ToggleGroupProps
    */
   label?: React.ReactNode;
   /**
-   * Changes design and interaction-visuals.
-   * @default "action"
+   * @deprecated Use `data-color` prop instead.
    */
   variant?: "action" | "neutral";
+  /**
+   * 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>;
   /**
    * Stretch each button to fill avaliable space in container.
    * @default false

package/src/types/theme.d.ts

@@ -9,7 +9,7 @@ export type AkselColor = AkselColorRole | keyof CustomAkselColor;
 declare global {
   namespace React {
     interface HTMLAttributes {
-      "data-color"?: AkselColor | (string & {});
+      "data-color"?: AkselColor;
     }
   }
 }

package/src/typography/BodyLong.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -16,6 +17,14 @@ export interface BodyLongProps
    * Text.
    */
   children: React.ReactNode;
+  /**
+   * Overrides inherited color.
+   * @default "neutral"
+   *
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 /**

package/src/typography/BodyShort.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -16,6 +17,14 @@ export interface BodyShortProps
    * Paragraph text.
    */
   children: React.ReactNode;
+  /**
+   * Overrides inherited color.
+   * @default "neutral"
+   *
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 /**

package/src/typography/Detail.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -19,6 +20,14 @@ export interface DetailProps
    * ALL CAPS.
    */
   uppercase?: boolean;
+  /**
+   * Overrides inherited color.
+   * @default "neutral"
+   *
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 /**

package/src/typography/Heading.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
+import type { AkselColor } from "../types";
 import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
@@ -20,6 +21,14 @@ export interface HeadingProps
    * Heading text.
    */
   children: React.ReactNode;
+  /**
+   * Overrides inherited color.
+   * @default "neutral"
+   *
+   * @see 🏷️ {@link AkselColor}
+   * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
+   */
+  "data-color"?: AkselColor;
 }
 
 /**