From bb16f3f04fcc2e978cb7f4c0440e4af5ed015a19 Mon Sep 17 00:00:00 2001
From: Vivy <4380412+Matthbo@users.noreply.github.com>
Date: Mon, 20 Jul 2026 17:02:10 +0200
Subject: [PATCH 1/3] Improve visibility of deprecated attributes

---
 .../details-element-attributes.component.html | 16 +++++++----
 .../details-element-attributes.component.ts   | 11 +++++++-
 .../details-element-options.scss              | 27 +++++++++++++++++++
 3 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.html b/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.html
index 3317d496..26e891bc 100644
--- a/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.html
+++ b/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.html
@@ -80,11 +80,17 @@
         forRemoval: attribute.deprecated && attribute.deprecated.forRemoval,
       }"
     >
-      <td
-        class="name"
-        [title]="attribute.deprecated ? getDeprecatedTitle(attribute.deprecated) : ''"
-        [innerHTML]="attributeEntry.name | nameWbr"
-      ></td>
+      <td class="name">
+        @if (attribute.deprecated) {
+          <app-icon-help class="icon" height="18" width="18" colour="grey" />
+          <span class="deprecated-text" [innerHTML]="attributeEntry.name | nameWbr"></span>
+          <span class="deprecated-description">
+            {{ getDeprecatedTitle(attribute.deprecated) }}
+          </span>
+        } @else {
+          <span class="name-text" [innerHTML]="attributeEntry.name | nameWbr"></span>
+        }
+      </td>
       <td>{{ attribute.enum ? 'options' : getFriendlyType(attribute.type) }}</td>
       <td
         class="attribute-default-value"
diff --git a/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.ts b/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.ts
index 19a319a0..a76f711c 100644
--- a/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.ts
+++ b/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.ts
@@ -13,6 +13,7 @@ import { CollapseDirective } from '../../../../components/collapse.directive';
 import { NameWbrPipe } from '../../../../components/name-wbr.pipe';
 import { IconCaretComponent } from '../../../../icons/icon-caret-down/icon-caret.component';
 import { DEFAULT_RETURN_CHARACTER } from '../../../../app.constants';
+import { IconHelpComponent } from '../../../../icons/icon-help/icon-help.component';
 
 type EnumValueEntry = {
   valueName: string;
@@ -21,7 +22,15 @@ type EnumValueEntry = {
 
 @Component({
   selector: 'app-details-element-attributes',
-  imports: [IconCaretComponent, NgTemplateOutlet, JavadocTransformDirective, NameWbrPipe, NgClass, CollapseDirective],
+  imports: [
+    IconCaretComponent,
+    NgTemplateOutlet,
+    JavadocTransformDirective,
+    NameWbrPipe,
+    NgClass,
+    CollapseDirective,
+    IconHelpComponent,
+  ],
   templateUrl: './details-element-attributes.component.html',
   styleUrl: '../details-element-options.scss',
 })
diff --git a/frank-doc-frontend/src/app/views/details/details-element/details-element-options.scss b/frank-doc-frontend/src/app/views/details/details-element/details-element-options.scss
index 081adbe4..e20dd2b4 100644
--- a/frank-doc-frontend/src/app/views/details/details-element/details-element-options.scss
+++ b/frank-doc-frontend/src/app/views/details/details-element/details-element-options.scss
@@ -17,10 +17,37 @@ table {
 
   tr.deprecated > td:first-child {
     text-decoration: line-through;
+    position: relative;
 
     &.forRemoval {
+      color: var(--color-alert-error);
       text-decoration-color: var(--color-alert-error);
     }
+
+    .icon {
+      vertical-align: top;
+    }
+
+    .icon,
+    .deprecated-text {
+      padding-right: 8px;
+      &:hover + .deprecated-description,
+      &:hover + .deprecated-text + .deprecated-description {
+        display: block;
+      }
+    }
+
+    .deprecated-description {
+      position: absolute;
+      top: 3em;
+      width: max-content;
+      max-width: 600px;
+      padding: 0.5em;
+      border-radius: 0.25em;
+      display: none;
+      background: var(--color-text-dark);
+      color: white;
+    }
   }
 
   th {

From 85140e773c47797d818cc40234431474d6de8fdf Mon Sep 17 00:00:00 2001
From: Vivy <4380412+Matthbo@users.noreply.github.com>
Date: Mon, 20 Jul 2026 17:08:36 +0200
Subject: [PATCH 2/3] Also for nested components

---
 .../details-element-nested.component.html                | 9 ++++++++-
 .../details-element-nested.component.ts                  | 3 ++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frank-doc-frontend/src/app/views/details/details-element/details-element-nested/details-element-nested.component.html b/frank-doc-frontend/src/app/views/details/details-element/details-element-nested/details-element-nested.component.html
index 0a75b488..97fc20d8 100644
--- a/frank-doc-frontend/src/app/views/details/details-element/details-element-nested/details-element-nested.component.html
+++ b/frank-doc-frontend/src/app/views/details/details-element/details-element-nested/details-element-nested.component.html
@@ -12,7 +12,14 @@
         class="border-top"
         [ngClass]="{ deprecated: nestedElement.deprecated, 'padding-bottom': !nestedElement.type }"
       >
-        <td class="name" [innerHTML]="nestedElement.roleName | nameWbr"></td>
+        <td class="name">
+          @if (nestedElement.deprecated) {
+            <app-icon-help class="icon" height="18" width="18" colour="grey" />
+            <span class="deprecated-text" [innerHTML]="nestedElement.roleName | nameWbr"></span>
+          } @else {
+            <span class="name-text" [innerHTML]="nestedElement.roleName | nameWbr"></span>
+          }
+        </td>
         <td
           class="description"
           *fdJavadocTransform="let text of nestedElement.description ?? DEFAULT_RETURN_CHARACTER; elements: elements()"
diff --git a/frank-doc-frontend/src/app/views/details/details-element/details-element-nested/details-element-nested.component.ts b/frank-doc-frontend/src/app/views/details/details-element/details-element-nested/details-element-nested.component.ts
index c28c33b9..8ebd5178 100644
--- a/frank-doc-frontend/src/app/views/details/details-element/details-element-nested/details-element-nested.component.ts
+++ b/frank-doc-frontend/src/app/views/details/details-element/details-element-nested/details-element-nested.component.ts
@@ -6,10 +6,11 @@ import { JavadocTransformDirective } from '@frankframework/doc-library-ng';
 import { DEFAULT_RETURN_CHARACTER } from '../../../../app.constants';
 import { AppService } from '../../../../app.service';
 import { NameWbrPipe } from '../../../../components/name-wbr.pipe';
+import { IconHelpComponent } from '../../../../icons/icon-help/icon-help.component';
 
 @Component({
   selector: 'app-details-element-nested',
-  imports: [JavadocTransformDirective, NameWbrPipe, NgClass, RouterLink],
+  imports: [JavadocTransformDirective, NameWbrPipe, NgClass, RouterLink, IconHelpComponent],
   templateUrl: './details-element-nested.component.html',
   styleUrl: '../details-element-options.scss',
 })

From 305e2157010e27d9388a11336574700073f4b095 Mon Sep 17 00:00:00 2001
From: Vivy <4380412+Matthbo@users.noreply.github.com>
Date: Fri, 31 Jul 2026 10:19:46 +0200
Subject: [PATCH 3/3] Replace icon and hover text for dedicated description
 text

---
 .../details-element-attributes.component.html | 30 +++++++------------
 .../details-element-attributes.component.ts   |  4 +--
 .../details-element-nested.component.html     | 14 +--------
 .../details-element-options.scss              | 30 ++++---------------
 4 files changed, 19 insertions(+), 59 deletions(-)

diff --git a/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.html b/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.html
index 26e891bc..f1656132 100644
--- a/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.html
+++ b/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.html
@@ -75,22 +75,12 @@
     <tr
       class="border-top"
       [ngClass]="{
-        'padding-bottom': !attribute.enum && !attribute.description,
+        'padding-bottom': !attribute.enum && !attribute.description && !attribute.deprecated,
         deprecated: attribute.deprecated,
         forRemoval: attribute.deprecated && attribute.deprecated.forRemoval,
       }"
     >
-      <td class="name">
-        @if (attribute.deprecated) {
-          <app-icon-help class="icon" height="18" width="18" colour="grey" />
-          <span class="deprecated-text" [innerHTML]="attributeEntry.name | nameWbr"></span>
-          <span class="deprecated-description">
-            {{ getDeprecatedTitle(attribute.deprecated) }}
-          </span>
-        } @else {
-          <span class="name-text" [innerHTML]="attributeEntry.name | nameWbr"></span>
-        }
-      </td>
+      <td class="name" [innerHTML]="attributeEntry.name | nameWbr"></td>
       <td>{{ attribute.enum ? 'options' : getFriendlyType(attribute.type) }}</td>
       <td
         class="attribute-default-value"
@@ -98,14 +88,16 @@
         [innerHTML]="text"
       ></td>
     </tr>
-    @if (attribute.description) {
+    @if (attribute.description || attribute.deprecated) {
       <tr [ngClass]="{ 'padding-bottom': !attribute.enum }">
-        <td
-          colspan="3"
-          class="description"
-          *fdJavadocTransform="let text of attribute.description; elements: elements()"
-          [innerHTML]="text"
-        ></td>
+        <td colspan="3" class="description">
+          @if (attribute.deprecated) {
+            <div class="deprecated-text">{{ getDeprecatedDescription(attribute.deprecated) }}</div>
+          }
+          @if (attribute.description) {
+            <div *fdJavadocTransform="let text of attribute.description; elements: elements()" [innerHTML]="text"></div>
+          }
+        </td>
       </tr>
     }
     @if (attribute.enum) {
diff --git a/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.ts b/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.ts
index a76f711c..5c55f095 100644
--- a/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.ts
+++ b/frank-doc-frontend/src/app/views/details/details-element/details-element-attributes/details-element-attributes.component.ts
@@ -53,8 +53,8 @@ export class DetailsElementAttributesComponent {
     return this.getInheritedCollapseOptions(this.inheritedCollapseOptions, parentElementName, defaultValue);
   }
 
-  protected getDeprecatedTitle(deprecatedInfo: DeprecationInfo): string {
-    return `${deprecatedInfo.description ?? 'This has been deprecated!'}${deprecatedInfo.since ? `\nSince ${deprecatedInfo.since}` : ''}`;
+  protected getDeprecatedDescription(deprecatedInfo: DeprecationInfo): string {
+    return `${deprecatedInfo.description ?? 'This has been deprecated'}${deprecatedInfo.since ? `\nSince ${deprecatedInfo.since}` : ''}`;
   }
 
   protected getFriendlyType(type: Attribute['type']): string {
diff --git a/frank-doc-frontend/src/app/views/details/details-element/details-element-nested/details-element-nested.component.html b/frank-doc-frontend/src/app/views/details/details-element/details-element-nested/details-element-nested.component.html
index 97fc20d8..2a33d7e5 100644
--- a/frank-doc-frontend/src/app/views/details/details-element/details-element-nested/details-element-nested.component.html
+++ b/frank-doc-frontend/src/app/views/details/details-element/details-element-nested/details-element-nested.component.html
@@ -12,19 +12,7 @@
         class="border-top"
         [ngClass]="{ deprecated: nestedElement.deprecated, 'padding-bottom': !nestedElement.type }"
       >
-        <td class="name">
-          @if (nestedElement.deprecated) {
-            <app-icon-help class="icon" height="18" width="18" colour="grey" />
-            <span class="deprecated-text" [innerHTML]="nestedElement.roleName | nameWbr"></span>
-          } @else {
-            <span class="name-text" [innerHTML]="nestedElement.roleName | nameWbr"></span>
-          }
-        </td>
-        <td
-          class="description"
-          *fdJavadocTransform="let text of nestedElement.description ?? DEFAULT_RETURN_CHARACTER; elements: elements()"
-          [innerHTML]="text"
-        ></td>
+        <td class="name" [innerHTML]="nestedElement.roleName | nameWbr"></td>
         <td>{{ nestedElement.mandatory ? '1' : '0' }} .. {{ nestedElement.multiple ? 'n' : '1' }}</td>
       </tr>
       @if (nestedElement.type) {
diff --git a/frank-doc-frontend/src/app/views/details/details-element/details-element-options.scss b/frank-doc-frontend/src/app/views/details/details-element/details-element-options.scss
index e20dd2b4..5525daad 100644
--- a/frank-doc-frontend/src/app/views/details/details-element/details-element-options.scss
+++ b/frank-doc-frontend/src/app/views/details/details-element/details-element-options.scss
@@ -23,31 +23,6 @@ table {
       color: var(--color-alert-error);
       text-decoration-color: var(--color-alert-error);
     }
-
-    .icon {
-      vertical-align: top;
-    }
-
-    .icon,
-    .deprecated-text {
-      padding-right: 8px;
-      &:hover + .deprecated-description,
-      &:hover + .deprecated-text + .deprecated-description {
-        display: block;
-      }
-    }
-
-    .deprecated-description {
-      position: absolute;
-      top: 3em;
-      width: max-content;
-      max-width: 600px;
-      padding: 0.5em;
-      border-radius: 0.25em;
-      display: none;
-      background: var(--color-text-dark);
-      color: white;
-    }
   }
 
   th {
@@ -116,6 +91,11 @@ table {
 .description {
   margin-bottom: 2em;
   color: var(--color-gray-dark);
+
+  .deprecated-text {
+    font-style: italic;
+    white-space: pre-line;
+  }
 }
 
 .options-sub-title {