fix(datagrid): apply open detail panel styles only to owning datagrid

The open detail panel styles should only be applied to the datagrid that owns the open detail panel, not to datagrids inside said detail panel. closes #338
vmware-clarity · Oct 11, 2022 · bcce110 · bcce110
1 parent f87a627
commit bcce110
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/.storybook/stories/datagrid/datagrid-detail.stories.ts b/.storybook/stories/datagrid/datagrid-detail.stories.ts
@@ -62,7 +62,36 @@ const defaultStory: Story = args => {
 
         <clr-dg-detail [ngClass]="{ highlight }" *clrIfDetail="let element">
           <clr-dg-detail-header>{{element.name}}</clr-dg-detail-header>
-          <clr-dg-detail-body>{{element | json}}</clr-dg-detail-body>
+          <clr-dg-detail-body [ngSwitch]="detailContentType">
+            <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-row>
+
+              <clr-dg-row>
+                <clr-dg-cell>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-row>
+
+              <clr-dg-row>
+                <clr-dg-cell>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>
@@ -85,10 +114,12 @@ const defaultParameters: Parameters = {
     closeCheck: { control: { disable: true } },
     // story helpers
     elements: { control: { disable: true }, table: { disable: true } },
+    detailContentType: { control: { type: 'inline-radio', options: ['json', 'datagrid'] } },
   },
   args: {
     // story helpers
     elements,
+    detailContentType: 'json',
     showLongContent: false,
     highlight: true,
     singleSelectable: false,

diff --git a/projects/angular/src/data/datagrid/_datagrid.clarity.scss b/projects/angular/src/data/datagrid/_datagrid.clarity.scss
@@ -1647,7 +1647,7 @@
     min-width: $clr_baselineRem_10;
   }
 
-  .datagrid-detail-open {
+  .datagrid-detail-open > .datagrid-outer-wrapper > .datagrid-inner-wrapper {
     div.datagrid-table-wrapper {
       /**
          * So the content with no spaces in the cell doesn't get cut when and the row selected indicator is not hidden