fix(datagrid): opened details missing vertical separator (backport to…

… 16.x) (#1516)

Backport 63da5a5 from #1493.
## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Vertical border between opened details and datagrid rows doesn't extend
to bottom.

Issue Number: CDE-2188

## What is the new behavior?
Vertical border between opened details and datagrid rows extend to
bottom.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

## Other information


![image](https://github.com/user-attachments/assets/c865922d-e2c8-489e-be8c-36f794f74d60)

---------

Co-authored-by: GitHub <[email protected]>

.storybook/helpers/common.ts

@@ -12,7 +12,7 @@ import { StoryContext } from '@storybook/angular';
 
 export const CommonModules = [CommonModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule];
 
-export function removeFocusOutline({ canvasElement }: StoryContext) {
+export function removeFocusOutline({ canvasElement }: Pick<StoryContext, 'canvasElement'>) {
   // remove keyboard focus outline from focused element (e.g. modal title)
   canvasElement.querySelector<HTMLElement>(':focus')?.blur();
 }

.storybook/stories/datagrid/datagrid-detail.stories.ts

@@ -6,27 +6,66 @@
  */
 
 import { ClrConditionalModule, ClrDatagridDetail, ClrDatagridModule } from '@clr/angular';
-import { Parameters } from '@storybook/addons';
-import { Story } from '@storybook/angular';
+import { moduleMetadata, StoryContext, StoryFn, StoryObj } from '@storybook/angular';
 
+import { removeFocusOutline } from '../../helpers/common';
 import { Element, elements } from '../../helpers/elements.data';
-import { setupStorybook } from '../../helpers/setup-storybook.helpers';
 
+export default {
+  title: 'Datagrid/Detail',
+  component: ClrDatagridDetail,
+  decorators: [
+    moduleMetadata({
+      imports: [ClrDatagridModule, ClrConditionalModule],
+    }),
+  ],
+  argTypes: {
+    // methods
+    close: { control: { disable: true } },
+    // story helpers
+    elements: { control: { disable: true }, table: { disable: true } },
+    detailContentType: { control: 'inline-radio', options: ['json', 'datagrid'] },
+    clrDetailAriaLabel: {
+      description: 'Title of the modal',
+    },
+    clrDetailAriaLabelledBy: {
+      description: "Id or multiple space separated Id's referencing existing text on the page",
+    },
+  },
+  args: {
+    //inputs
+    clrDetailAriaLabel: '',
+    clrDetailAriaLabelledBy: '',
+    // story helpers
+    elements,
+    detailContentType: 'json',
+    showLongContent: false,
+    highlight: true,
+    singleSelectable: false,
+    multiSelectable: false,
+    expandable: false,
+    compact: false,
+    hidableColumns: false,
+    height: 0,
+  },
+};
 const longContentElement: Element = {
   name: 'A really really really really really really really really really long content in the cell',
   symbol: 'Ac',
   number: 89,
   electronegativity: 1.1,
 };
-
-const defaultStory: Story = args => {
+const DetailTemplate: StoryFn = args => {
   args.elements = args.showLongContent ? [longContentElement, ...args.elements] : args.elements;
-
   return {
     template: `
       <style>
-        .highlight { border: 1px solid red !important; }
-        .electronegativity-container { border-bottom: 4px solid #119cd4; }
+        .highlight {
+          border: 1px solid red !important;
+        }
+        .electronegativity-container {
+          border-bottom: 4px solid #119cd4;
+        }
       </style>
       <clr-datagrid
         ${args.height ? '[style.height.px]="height"' : ''}
@@ -46,92 +85,75 @@ const defaultStory: Story = args => {
         <clr-dg-column>
           <ng-container ${args.hidableColumns ? '*clrDgHideableColumn' : ''}>Electronegativity</ng-container>
         </clr-dg-column>
-
         <clr-dg-row *clrDgItems="let element of elements; let index = index" [clrDgItem]="element">
-          <clr-dg-cell>{{element.name}}</clr-dg-cell>
-          <clr-dg-cell>{{element.symbol}}</clr-dg-cell>
-          <clr-dg-cell>{{element.number}}</clr-dg-cell>
+          <clr-dg-cell>{{ element.name }}</clr-dg-cell>
+          <clr-dg-cell>{{ element.symbol }}</clr-dg-cell>
+          <clr-dg-cell>{{ element.number }}</clr-dg-cell>
           <clr-dg-cell>
-            <div [style.width.%]="element.electronegativity * 100 / 4" class="electronegativity-container">
-              {{element.electronegativity}}
+            <div [style.width.%]="(element.electronegativity * 100) / 4" class="electronegativity-container">
+              {{ element.electronegativity }}
             </div>
           </clr-dg-cell>
           <ng-container *ngIf="expandable" ngProjectAs="clr-dg-row-detail">
-            <clr-dg-row-detail *clrIfExpanded>{{element|json}}</clr-dg-row-detail>
+            <clr-dg-row-detail *clrIfExpanded>{{ element | json }}</clr-dg-row-detail>
           </ng-container>
         </clr-dg-row>
-
-        <clr-dg-detail [ngClass]="{ highlight }" *clrIfDetail="let element">
-          <clr-dg-detail-header>{{element.name}}</clr-dg-detail-header>
+        <clr-dg-detail
+          [ngClass]="{ highlight }"
+          *clrIfDetail="let element"
+          ${args.clrDetailAriaLabel ? '[clrDetailAriaLabel]="clrDetailAriaLabel"' : ''}
+          ${args.clrDetailAriaLabelledBy ? '[clrDetailAriaLabelledBy]="clrDetailAriaLabelledBy"' : ''}
+        >
+          <clr-dg-detail-header>{{ element.name }}</clr-dg-detail-header>
           <clr-dg-detail-body [ngSwitch]="detailContentType">
-            <ng-container *ngSwitchCase="'json'">
-              {{element | json}}
-            </ng-container>
-          
+            <ng-container *ngSwitchCase="'json'">{{ element | json }}</ng-container>
             <clr-datagrid *ngSwitchCase="'datagrid'">
               <clr-dg-column>Key</clr-dg-column>
               <clr-dg-column>Value</clr-dg-column>
-
               <clr-dg-row>
                 <clr-dg-cell>Name</clr-dg-cell>
-                <clr-dg-cell>{{element.name}}</clr-dg-cell>
+                <clr-dg-cell>{{ element.name }}</clr-dg-cell>
               </clr-dg-row>
-
               <clr-dg-row>
                 <clr-dg-cell>Symbol</clr-dg-cell>
-                <clr-dg-cell>{{element.symbol}}</clr-dg-cell>
+                <clr-dg-cell>{{ element.symbol }}</clr-dg-cell>
               </clr-dg-row>
-
               <clr-dg-row>
                 <clr-dg-cell>Number</clr-dg-cell>
-                <clr-dg-cell>{{element.number}}</clr-dg-cell>
+                <clr-dg-cell>{{ element.number }}</clr-dg-cell>
               </clr-dg-row>
-
               <clr-dg-row>
                 <clr-dg-cell>Electronegativity</clr-dg-cell>
-                <clr-dg-cell>{{element.electronegativity}}</clr-dg-cell>
+                <clr-dg-cell>{{ element.electronegativity }}</clr-dg-cell>
               </clr-dg-row>
             </clr-datagrid>
           </clr-dg-detail-body>
         </clr-dg-detail>
-        
         <clr-dg-footer>
           <clr-dg-pagination #pagination>
-            <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Elements per page</clr-dg-page-size>
-            {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} elements
+            <clr-dg-page-size [clrPageSizeOptions]="[10, 20, 50, 100]">Elements per page</clr-dg-page-size>
+            {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of {{ pagination.totalItems }} elements
           </clr-dg-pagination>
         </clr-dg-footer>
       </clr-datagrid>
     `,
     props: { ...args },
   };
 };
+export const Detail: StoryObj = {
+  render: DetailTemplate,
+};
 
-const defaultParameters: Parameters = {
-  title: 'Datagrid/Detail',
-  component: ClrDatagridDetail,
-  argTypes: {
-    // methods
-    close: { control: { disable: true } },
-    // story helpers
-    elements: { control: { disable: true }, table: { disable: true } },
-    detailContentType: { control: { type: 'inline-radio', options: ['json', 'datagrid'] } },
+export const OpenDetail: StoryObj = {
+  render: DetailTemplate,
+  play({ canvasElement }: StoryContext) {
+    canvasElement.querySelector<HTMLButtonElement>('button.datagrid-detail-caret-button').click();
+
+    removeFocusOutline({ canvasElement });
   },
   args: {
-    // story helpers
-    elements,
-    detailContentType: 'json',
-    showLongContent: false,
-    highlight: true,
-    singleSelectable: false,
-    multiSelectable: false,
-    expandable: false,
-    compact: false,
-    hidableColumns: false,
-    height: 0,
+    detailContentType: 'datagrid',
+    // The height is set larger than the height of the rows to regression test the detail pane border. (CDE-2188)
+    height: 500,
   },
 };
-
-const variants: Parameters[] = [];
-
-setupStorybook([ClrDatagridModule, ClrConditionalModule], defaultStory, defaultParameters, variants);

projects/angular/src/data/datagrid/_datagrid.clarity.scss

@@ -553,6 +553,12 @@
     flex: 1 1 auto;
     align-content: flex-start;
 
+    .datagrid-rows {
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 auto;
+    }
+
     .datagrid-body {
       width: auto;
     }