[V6] Chat-props deprecation (#2631)

* 🎨 Satt opp codemod boilerplate for chat deprecation

* 🐛 v5 -> v6 i codemod

* 🧪 Tester for alias-import av chat

* 🧪 idempotent codemod-test

* 🔥 Fjernet deprecated props fra Chat

* 📝 Changeset

* 📝 Bedre advarsel i chat-codemod

* 📝 v6-migration update

* 🧪 Tester vanlig import av Chat

* 📝 Oppdatert tekster i codemod

* 🔥 Fjernet return fra removeProps

* Update @navikt/aksel/src/codemod/migrations.ts

.changeset/few-apples-divide.md

@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": major
+"@navikt/aksel": major
+---
+
+Chat: Fjernet deprecated props `backgroundColor` og `avatarBgColor`. Bruk prop `variant` som erstatning.

@navikt/aksel/src/codemod/migrations.ts

@@ -87,6 +87,16 @@ export const migrations: {
       path: "v4.0.0/date/date",
     },
   ],
+  "v6.0.0": [
+    {
+      description:
+        "Removes `backgroundColor` and `avatarBgColor` properties from `Chat` and `Chat.Bubble`",
+      value: "v6-chat",
+      path: "v6.0.0/chat/chat",
+      warning:
+        "Remember to update use of `variant`-prop to match previous use of colors. If needed the component exposes css-variables for custom overrides",
+    },
+  ],
 };
 
 export function getMigrationPath(str: string) {

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/chat.ts

@@ -0,0 +1,75 @@
+import { getLineTerminator } from "../../../utils/lineterminator";
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  let localName = "Chat";
+
+  const root = j(file.source);
+
+  /* Finds used name for Chat component */
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => path.node.source.value === "@navikt/ds-react")
+    .forEach((imp) => {
+      imp.value.specifiers.forEach((x) => {
+        if (x.imported.name === "Chat" && x.local.name !== x.imported.name) {
+          localName = x.local.name;
+        }
+      });
+    });
+
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: localName,
+        },
+      },
+    })
+    .forEach((path) => {
+      j(path)
+        .find(j.JSXAttribute, {
+          name: {
+            name: "backgroundColor",
+          },
+        })
+        .remove();
+      j(path)
+        .find(j.JSXAttribute, {
+          name: {
+            name: "avatarBgColor",
+          },
+        })
+        .remove();
+    });
+
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          type: "JSXMemberExpression",
+          object: {
+            name: localName,
+          },
+          property: {
+            name: "Bubble",
+          },
+        },
+      },
+    })
+    .forEach((path) => {
+      j(path)
+        .find(j.JSXAttribute, {
+          name: {
+            name: "backgroundColor",
+          },
+        })
+        .remove();
+    });
+
+  return root.toSource(getLineTerminator(file.source));
+}

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/chat.test.ts

@@ -0,0 +1,12 @@
+import { check } from "../../../../utils/check";
+
+const migration = "chat";
+const fixtures = ["import-alias", "idempotent"];
+
+for (const fixture of fixtures) {
+  check(__dirname, {
+    fixture,
+    migration,
+    extension: "js",
+  });
+}

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/idempotent.input.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/idempotent.output.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/import-alias.input.js

@@ -0,0 +1,17 @@
+import {
+  Chat as DsChat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <DsChat avatar="ON" name="Ola Normann" backgroundColor="#321" timestamp="01.01.21 14:00" avatarBgColor="#123" >
+    <DsChat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </DsChat.Bubble>
+    <DsChat.Bubble backgroundColor="#fff">Tempor fugiat amet eu sint in in ullamco.</DsChat.Bubble>
+    <DsChat.Bubble backgroundColor="#111">
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </DsChat.Bubble>
+  </DsChat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/import-alias.output.js

@@ -0,0 +1,17 @@
+import {
+  Chat as DsChat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <DsChat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <DsChat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </DsChat.Bubble>
+    <DsChat.Bubble>Tempor fugiat amet eu sint in in ullamco.</DsChat.Bubble>
+    <DsChat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </DsChat.Bubble>
+  </DsChat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/import.input.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" backgroundColor="#321" timestamp="01.01.21 14:00" avatarBgColor="#123" >
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble backgroundColor="#fff">Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble backgroundColor="#111">
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);

@navikt/aksel/src/codemod/transforms/v6.0.0/chat/tests/import.output.js

@@ -0,0 +1,17 @@
+import {
+  Chat,
+  Button,
+} from "@navikt/ds-react";
+
+export const Demo = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);

@navikt/core/react/src/chat/Bubble.tsx

@@ -15,37 +15,16 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
    * Timestamp for sent message
    */
   timestamp?: string;
-  /**
-   * Background color on bubble
-   * @deprecated Use `variant` on Chat instead
-   */
-  backgroundColor?: string;
   /**
    * Overrides hoizontal position of toptext
    */
   toptextPosition?: "left" | "right";
 }
 
 const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
-  (
-    {
-      children,
-      className,
-      name,
-      timestamp,
-      backgroundColor,
-      toptextPosition,
-      ...rest
-    },
-    ref,
-  ) => {
+  ({ children, className, name, timestamp, toptextPosition, ...rest }, ref) => {
     return (
-      <div
-        ref={ref}
-        className={cl("navds-chat__bubble", className)}
-        style={{ backgroundColor }}
-        {...rest}
-      >
+      <div ref={ref} className={cl("navds-chat__bubble", className)} {...rest}>
         {(timestamp || name) && (
           <h3
             className={cl(

@navikt/core/react/src/chat/Chat.tsx

@@ -29,16 +29,6 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
    * @default "neutral"
    */
   variant?: "subtle" | "info" | "neutral";
-  /**
-   * Background color on bubbles
-   * @deprecated Use `variant` instead
-   */
-  backgroundColor?: string;
-  /**
-   * Background color for avatar
-   * @deprecated Use `variant` instead
-   */
-  avatarBgColor?: string;
   /**
    * Positions avatar and bubbles
    * @default "left"
@@ -93,8 +83,6 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       avatar,
       position = "left",
       variant = "neutral",
-      avatarBgColor,
-      backgroundColor,
       toptextPosition,
       size = "medium",
       ...rest
@@ -114,11 +102,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       {...rest}
     >
       {avatar && (
-        <div
-          className="navds-chat__avatar"
-          aria-hidden
-          style={{ backgroundColor: avatarBgColor }}
-        >
+        <div className="navds-chat__avatar" aria-hidden>
           {avatar}
         </div>
       )}
@@ -130,7 +114,6 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
                 {React.cloneElement(child, {
                   name: name && i === 0 ? name : undefined,
                   timestamp: timestamp && i === 0 ? timestamp : undefined,
-                  backgroundColor,
                   ...child.props,
                 })}
               </BodyLong>

@navikt/core/react/src/chat/chat.stories.tsx

@@ -7,16 +7,6 @@ export default {
   title: "ds-react/Chat",
   component: Chat,
   argTypes: {
-    backgroundColor: {
-      control: {
-        type: "text",
-      },
-    },
-    avatarBgColor: {
-      control: {
-        type: "text",
-      },
-    },
     position: {
       control: { type: "radio" },
       options: POSITIONS,
@@ -68,27 +58,6 @@ export const Small = () => (
   </Chat>
 );
 
-export const Colors = () => (
-  <Chat
-    avatar="NAV"
-    name="NAV"
-    timestamp="01.01.21 14:00"
-    avatarBgColor="var(--a-surface-alt-1-subtle)"
-    backgroundColor="var(--a-surface-warning-subtle)"
-  >
-    <Chat.Bubble>
-      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </Chat.Bubble>
-    <Chat.Bubble backgroundColor="lightYellow">
-      Tempor fugiat amet eu sint in in ullamco.
-    </Chat.Bubble>
-    <Chat.Bubble>
-      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-      labore nisi ut.
-    </Chat.Bubble>
-  </Chat>
-);
-
 export const Variants = () => (
   <div className="colgap">
     <Chat avatar="NAV" name="NAV" timestamp="01.01.21 14:00" variant="info">

v6-migration.md

@@ -1,5 +1,11 @@
 # Aksel v6 migrations
 
+## Chat
+
+### Props
+
+Fjernet deprecated props `backgroundColor` og `avatarBgColor`. Bruk prop `variant` som erstatning. Om dette ikke dekker behovet eksponerer komponenten css-variabler som kan overstyres.
+
 ## Grid
 
 ### CSS