fix(datagrid): row change & storybook (#288)

* fix(datagrid): row change & storybook * fix(phone-bumber): on open select * fix(datagrid): doc set data
ovh · Nov 24, 2023 · 1bb506e · 1bb506e
1 parent 92900be
commit 1bb506e
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 33 deletions.
diff --git a/packages/components/datagrid/documentation/usage-guidelines/usage-style.css b/packages/components/datagrid/documentation/usage-guidelines/usage-style.css
@@ -1,6 +1,6 @@
-:root {
-    --ods-menu-position: absolute;
-    --ods-select-position: absolute;
-    --ods-popover-position: absolute;
-    --ods-tooltip-position: absolute;
+:root osds-datagrid {
+    --ods-menu-position: static;
+    --ods-select-position: static;
+    --ods-popover-position: static;
+    --ods-tooltip-position: static;
 }
diff --git a/packages/components/datagrid/documentation/usage-guidelines/usage.mdx b/packages/components/datagrid/documentation/usage-guidelines/usage.mdx
@@ -106,7 +106,7 @@ export const datagridFormatter = () => {
       { name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" },
     ];
     datagrid.height = 150;
-  }, 0);
+  }, 1000);
 };
 
 <osds-datagrid id="datagridWithFormatter">
@@ -196,9 +196,17 @@ export const datagridWithMenu = () => {
     datagrid.rows = [
       { name: "Dupont", firstname: "Antoine", gender: "male", dob: "15/11/1996" },
       { name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" },
+      { name: "Dupont", firstname: "Antoine", gender: "male", dob: "15/11/1996" },
+      { name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" },
+      { name: "Dupont", firstname: "Antoine", gender: "male", dob: "15/11/1996" },
+      { name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" },
+      { name: "Dupont", firstname: "Antoine", gender: "male", dob: "15/11/1996" },
+      { name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" },
+      { name: "Dupont", firstname: "Antoine", gender: "male", dob: "15/11/1996" },
+      { name: "Garnbret", firstname: "Janja", gender: "female", dob: "12/03/1999" },
     ];
-    datagrid.height = 150;
-  }, 0);
+    datagrid.height = 300;
+  }, 1000);
 };
 
 <osds-datagrid id="datagridWithMenu">
@@ -210,11 +218,11 @@ export const datagridWithMenu = () => {
 <osds-datagrid id="datagrid" no-result-label="Aucun résultat"></osds-datagrid>
 
 <style>
-  :root {
-    --ods-menu-position: absolute;
-    --ods-select-position: absolute;
-    --ods-popover-position: absolute;
-    --ods-tooltip-position: absolute;
+  :root osds-datagrid {
+    --ods-menu-position: static;
+    --ods-select-position: static;
+    --ods-popover-position: static;
+    --ods-tooltip-position: static;
   }
 </style> 
 

diff --git a/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.e2e.ts b/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.e2e.ts
@@ -195,4 +195,17 @@ describe('e2e:osds-datagrid', () => {
     expect(columns?.[0].innerText).toContain('Name');
     expect(columns?.[1].innerText).toContain('Firstname');
   });
+
+  it('should update rows', async() => {
+    await setup({ attributes: {
+      columns: JSON.stringify([{ field: 'name', title: 'Name' }, { field: 'firstname', title: 'Firstname' }]),
+      hasHideableColumns: false,
+      rows: JSON.stringify([{ firstname: 'Simpson', name: 'Homer' }]),
+    } });
+    el.setProperty('rows', JSON.stringify([{ firstname: 'Simpson', name: 'Homer' }, { firstname: 'Simpson', name: 'Marge' }]));
+    await page.waitForChanges();
+
+    const rows = JSON.parse(await el.getProperty('rows'));
+    expect(rows).toHaveLength(2);
+  });
 });
diff --git a/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.tsx b/packages/components/datagrid/src/components/osds-datagrid/osds-datagrid.tsx
@@ -153,7 +153,9 @@ export class OsdsDatagrid implements OdsDatagridAttribute, OdsDatagridEvent {
 
   private handlerEvent(): void {
     this.table?.on('dataSorting', (sorters: SorterFromTable[]): void => {
-      this.odsSortChange.emit({ dir: sorters[0].dir, field: sorters[0].field });
+      if (sorters[0]) {
+        this.odsSortChange.emit({ dir: sorters[0].dir, field: sorters[0].field });
+      }
     });
 
     // @ts-ignore type not good, doc: https://tabulator.info/docs/5.5/events#select

diff --git a/packages/components/datagrid/src/index.html b/packages/components/datagrid/src/index.html
@@ -18,10 +18,10 @@
 
   <style>
     :root {
-      --ods-menu-position: absolute;
-      --ods-select-position: absolute;
-      --ods-popover-position: absolute;
-      --ods-tooltip-position: absolute;
+      --ods-menu-position: static;
+      --ods-select-position: static;
+      --ods-popover-position: static;
+      --ods-tooltip-position: static;
     }
   </style>
 </head>
@@ -66,7 +66,13 @@ <h1>Empty state</h1>
     const datagrid = document.getElementById('datagridFormatter');
     const button = document.getElementById('buttonDatagrid');
     button.addEventListener('click', () => {
-      datagrid.isSelectable = !datagrid.isSelectable;
+      datagrid.rows = [{
+        firstname: `firstname1`,
+        name: `name1`,
+      }, {
+        firstname: `firstname2`,
+        name: `name2`,
+      }];
     });
     datagrid.addEventListener('odsSortChange', (data) => console.log('odsSortChange', data));
     datagrid.addEventListener('odsRowSelectedChange', (data) => console.log('odsRowSelectedChange', data))

diff --git a/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.scss b/packages/components/phone-number/src/components/osds-phone-number/osds-phone-number.scss
@@ -8,6 +8,17 @@
 $phone-number-input-width: 236px;
 
 .phone-number {
+  &__input {
+    flex: auto;
+    width: $phone-number-input-width;
+
+    &--not-first {
+      border-left-width: 0;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
   &__select {
     --ods-size-select-border-radius-bottom-right: 0;
     --ods-size-select-border-radius-top-right: 0;
@@ -29,20 +40,9 @@ $phone-number-input-width: 236px;
         width: 24px;
       }
     }
-  }
-
-  &__input {
-    flex: auto;
-    width: $phone-number-input-width;
-
-    &--not-first {
-      border-left-width: 0;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+
+    &.opened + .phone-number__input {
+      border-bottom-right-radius: 0;
     }
   }
-
-  &.opened + .phone-number__input {
-    border-bottom-right-radius: 0;
-  }
 }