fix(datagrid): align compact select column and add stories

.storybook/stories/datagrid/datagrid.stories.ts

@@ -52,6 +52,7 @@ export default {
  compact: false,
  hidableColumns: false,
  height: 0,
+ selectedRows: [],
  },
 };
 
@@ -91,7 +92,11 @@ const DatagridTemplate: StoryFn = args => ({
  <ng-container ${args.hidableColumns ? '*clrDgHideableColumn' : ''}>Electronegativity</ng-container>
  </clr-dg-column>
 
- <clr-dg-row *clrDgItems="let element of elements" [clrDgItem]="element">
+ <clr-dg-row
+ *clrDgItems="let element of elements; let index = index"
+ [clrDgItem]="element"
+ [clrDgSelected]="selectedRows.includes(index)"
+ >
  <clr-dg-cell>{{ element.name }}</clr-dg-cell>
  <clr-dg-cell>{{ element.symbol }}</clr-dg-cell>
  <clr-dg-cell>{{ element.number }}</clr-dg-cell>
@@ -120,9 +125,58 @@ export const Datagrid: StoryObj = {
  render: DatagridTemplate,
 };
 
+export const SingleSelect: StoryObj = {
+ render: DatagridTemplate,
+ args: {
+ singleSelectable: true,
+ },
+};
+export const MultiSelect: StoryObj = {
+ render: DatagridTemplate,
+ args: {
+ multiSelectable: true,
+ },
+};
+export const MultiSelectWithSelection: StoryObj = {
+ render: DatagridTemplate,
+ args: {
+ multiSelectable: true,
+ selectedRows: [1],
+ },
+};
+
 export const ManageColumns: StoryObj = {
  render: DatagridTemplate,
  args: {
  hidableColumns: true,
  },
 };
+
+export const Compact: StoryObj = {
+ render: DatagridTemplate,
+ args: {
+ compact: true,
+ },
+};
+export const CompactSingleSelect: StoryObj = {
+ render: DatagridTemplate,
+ args: {
+ compact: true,
+ singleSelectable: true,
+ },
+};
+export const CompactMultiSelect: StoryObj = {
+ render: DatagridTemplate,
+ args: {
+ compact: true,
+ multiSelectable: true,
+ },
+};
+export const CompactMultiSelectWithSelection: StoryObj = {
+ render: DatagridTemplate,
+ args: {
+ compact: true,
+ multiSelectable: true,
+ selectedRows: [1],
+ },
+};

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

@@ -860,6 +860,12 @@
  }
  }
 
+ .datagrid-row {
+ .datagrid-select {
+ padding: 0 tokens.$cds-global-space-7;
+ }
+ }
+
  .datagrid-cell {
  clr-icon {
  margin-top: calc((-1 * tokens.$cds-global-space-3) - tokens.$cds-global-space-1);
@@ -913,7 +919,7 @@
  }
 
  .datagrid-footer {
- padding: 0 tables-variables.$clr-table-cellpadding;
+ padding: 0 tokens.$cds-global-space-7;
  line-height: tokens.$cds-global-space-9 - tokens.$cds-global-space-1;
 
  .pagination {