fix(datagrid): improve documentation

ovh · Dec 26, 2023 · 717349a · 717349a
1 parent c28c054
commit 717349a
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 11 deletions.
diff --git a/packages/components/src/datagrid/documentation/usage-guidelines/usage.mdx b/packages/components/src/datagrid/documentation/usage-guidelines/usage.mdx
@@ -135,6 +135,68 @@ export const datagridFormatter = () => {
 </script>
 ```
 
+
+### Overflowing elements
+
+You can add a `position: absolute` styling if you want to allow the formatted elements in your row to overflow.
+
+export const overflowingElementsFormatter = () => {
+  setTimeout(() => {
+    const datagrid = document.getElementById('overflowingElements');
+    if (!datagrid) {
+      return;
+    }
+    datagrid.columns = [
+      { title: "Without overflow", field: "nooverflow", formatter: (value) => {
+          return '<osds-menu><osds-button slot="menu-title" color="error" variant="stroked">I can&apos;t overflow<osds-icon color="error" name="close" size="xs"></osds-icon></osds-button><osds-menu-item><osds-buttoncolor="primary"size="sm"variant="ghost"text-align="start"flex=""><span>Action 1</span></osds-button></osds-menu-item><osds-menu-item><osds-buttoncolor="primary"size="sm"variant="ghost"text-align="start"flex=""><span>Action 2</span></osds-button></osds-menu-item><osds-menu-item><osds-buttoncolor="primary"size="sm"variant="ghost"text-align="start"flex=""><span>Action 3</span></osds-button></osds-menu-item></osds-menu>'
+        }
+      },
+        { title: "With overflow", field: "overflow", formatter: (value) => {
+          return '<osds-menu style="position: absolute;"><osds-button slot="menu-title" color="primary" variant="stroked">I can overflow<osds-icon color="primary" name="ok" size="xs"></osds-icon></osds-button><osds-menu-item><osds-buttoncolor="primary"size="sm"variant="ghost"text-align="start"flex=""><span>Action 1</span></osds-button></osds-menu-item><osds-menu-item><osds-buttoncolor="primary"size="sm"variant="ghost"text-align="start"flex=""><span>Action 2</span></osds-button></osds-menu-item><osds-menu-item><osds-buttoncolor="primary"size="sm"variant="ghost"text-align="start"flex=""><span>Action 3</span></osds-button></osds-menu-item></osds-menu>'
+        }
+      },
+    ];
+    datagrid.rows = [
+      { nooverflow: "", overflow: ""},
+      { nooverflow: "", overflow: ""},
+      { nooverflow: "", overflow: ""},
+    ];
+    datagrid.height = 150;
+  }, 1000);
+};
+
+<osds-datagrid id="overflowingElements">
+</osds-datagrid>
+
+<>{ overflowingElementsFormatter() }</>
+
+```html
+<osds-datagrid id="datagrid"></osds-datagrid>
+
+<script>
+    const datagrid = document.getElementById('datagrid');
+    if (!datagrid) {
+      return;
+    }
+    datagrid.columns = [
+      { title: "Without overflow", field: "nooverflow", formatter: (value) => {
+          return '<osds-menu><osds-button slot="menu-title" color="error" variant="stroked">I can&apos;t overflow<osds-icon color="error" name="close" size="xs"></osds-icon></osds-button><osds-menu-item><osds-buttoncolor="primary"size="sm"variant="ghost"text-align="start"flex=""><span>Action 1</span></osds-button></osds-menu-item><osds-menu-item><osds-buttoncolor="primary"size="sm"variant="ghost"text-align="start"flex=""><span>Action 2</span></osds-button></osds-menu-item><osds-menu-item><osds-buttoncolor="primary"size="sm"variant="ghost"text-align="start"flex=""><span>Action 3</span></osds-button></osds-menu-item></osds-menu>'
+        }
+      },
+        { title: "With overflow", field: "overflow", formatter: (value) => {
+          return '<osds-menu style="position: absolute;"><osds-button slot="menu-title" color="primary" variant="stroked">I can overflow<osds-icon color="primary" name="ok" size="xs"></osds-icon></osds-button><osds-menu-item><osds-buttoncolor="primary"size="sm"variant="ghost"text-align="start"flex=""><span>Action 1</span></osds-button></osds-menu-item><osds-menu-item><osds-buttoncolor="primary"size="sm"variant="ghost"text-align="start"flex=""><span>Action 2</span></osds-button></osds-menu-item><osds-menu-item><osds-buttoncolor="primary"size="sm"variant="ghost"text-align="start"flex=""><span>Action 3</span></osds-button></osds-menu-item></osds-menu>'
+        }
+      },
+    ];
+    datagrid.rows = [
+      { nooverflow: "", overflow: ""},
+      { nooverflow: "", overflow: ""},
+      { nooverflow: "", overflow: ""},
+    ];
+    datagrid.height = 150;
+</script>
+```
+
 ### Empty rows
 <osds-datagrid
   columns='[{"title":"Name","field":"name", "isSortable": true},{"title":"Firstname","field":"firstname"},{"title":"Gender","field":"gender"},{"title":"Date Of Birth","field":"dob"}]'

diff --git a/packages/components/src/datagrid/src/components/osds-datagrid/osds-datagrid.scss b/packages/components/src/datagrid/src/components/osds-datagrid/osds-datagrid.scss
@@ -84,8 +84,7 @@ $ods-border-datagrid: solid 1px var(--ods-color-blue-200);
             position: relative;
             border-top: $ods-border-datagrid;
             border-right: none;
-            overflow-x: hidden;
-            overflow-y: visible;
+            overflow: hidden;
 
             &:not(.ods-selectable__input-checkbox) {
                 position: initial;
@@ -104,13 +103,6 @@ $ods-border-datagrid: solid 1px var(--ods-color-blue-200);
 
                 padding-left: 9px;
             }
-
-            osds-menu,
-            osds-popover,
-            osds-select,
-            osds-tooltip {
-                position: absolute;
-            }
         }
 
         .tabulator-placeholder {

diff --git a/packages/components/src/datagrid/src/index.html b/packages/components/src/datagrid/src/index.html
@@ -69,7 +69,7 @@ <h1>Empty state</h1>
     datagrid.addEventListener('odsRowSelectedChange', (data) => console.log('odsRowSelectedChange', data))
 
     datagrid.columns = [
-      { title: "First name", field: "firstname", overflow: true, formatter: (cellValue, rowValue) => {
+      { title: "First name", field: "firstname", formatter: (cellValue, rowValue) => {
           return `<osds-menu>
 <osds-button slot="menu-title" color="primary" variant="stroked">
   Action menu
@@ -90,7 +90,7 @@ <h1>Empty state</h1>
         }
       },
       { title: "Test", field: "test", formatter: (cellValue, rowValue) => {
-        return `<osds-menu>
+        return `<osds-menu style='position: absolute;'>
     <osds-button slot="menu-title" color="primary" variant="stroked">Menu <osds-icon name='home' size='xs'></osds-icon></osds-button>
     <osds-menu-group>
       <osds-text>Group/Text 1</osds-text>