feat(canary-web-components): conditionally change the placement of th…

…e tooltip on truncated text ensure that when the tooltip truncation pattern is chosen and text has been truncated, the tooltip does not cause a double scroll on ic-data-table. Update the positioning of the tooltip in the pagination bar to prevent a double scroll. Prettier fixes . #977
mi6 · Jan 17, 2024 · 4289803 · 4289803
1 parent 3624513
commit 4289803
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 38 deletions.
diff --git a/...es/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx b/...es/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx
@@ -1038,9 +1038,7 @@ If there is a certain row or column that should be exempt from truncation, then
 </Canvas>
 
 <Canvas withSource="none">
-  <Story name="Truncating Cell Data with Tooltip">
-    {TruncationTooltip()}
-  </Story>
+  <Story name="Truncating Cell Data with Tooltip">{TruncationTooltip()}</Story>
 </Canvas>
 
 #### Truncating Cell Data code example

diff --git a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.tsx
@@ -263,7 +263,6 @@ export class DataTable {
   }
 
   componentDidUpdate(): void {
-    console.log("HERE");
     this.updateTruncation = true;
     this.dataTruncation();
   }
@@ -289,15 +288,13 @@ export class DataTable {
     typographyEl: HTMLIcTypographyElement,
     cellContainer: HTMLElement
   ) => {
-    // console.log(cellContainer.clientHeight);
     typographyEl.maxLines = Math.max(
       Math.floor(cellContainer.clientHeight / 24) - 1,
       1
     ); // Math.floor
-    typographyEl.checkMaxLines(
+    typographyEl.checkCellTextMaxLines(
       cellContainer.clientHeight,
-      typographyEl.scrollHeight,
-      true
+      typographyEl.scrollHeight
     );
 
     this.removeDivStyles(cellContainer);
@@ -323,14 +320,8 @@ export class DataTable {
 
       if (this.updateTruncation) {
         this.resetMaxLines(typographyEl);
-      }
-
-      if (typographyEl.id === "jobTitle-0") {
-        console.log({
-          typographyEl: typographyEl,
-          cellContainer: cellContainer?.clientHeight,
-          scrollHeight: typographyEl.scrollHeight,
-        });
+        cellContainer.appendChild(typographyEl);
+        tooltip?.remove();
       }
 
       if (
@@ -354,11 +345,33 @@ export class DataTable {
           typographyEl.style.webkitLineClamp = `${Math.floor(
             cellContainer.clientHeight / 24
           )}`;
+          if (tooltip) {
+            cellContainer.appendChild(typographyEl);
+            tooltip.remove();
+          }
           if (!tooltip) {
             // if truncation pattern is tooltip and the tooltip does not exist, dynamically create one and add the content inside
             const tooltipEl = document.createElement("ic-tooltip");
+            const rowIndex = Number(typographyEl.id.match(/-(\d+)$/)[1]);
             tooltipEl.setAttribute("target", typographyEl.id);
             tooltipEl.setAttribute("label", typographyEl.innerHTML);
+
+            // Checks if the truncated text is in the first row of the displayed page
+            rowIndex === 0 && tooltipEl.setAttribute("placement", "bottom");
+            // Checks if the truncated text is in the last row of the displayed page
+            if (
+              rowIndex === this.data.length - 1 ||
+              rowIndex === this.rowsPerPage - 1
+            ) {
+              tooltipEl.setAttribute("placement", "top");
+            }
+            // Checks if the truncated text is in the first column
+            typographyEl.id.includes(this.columns[0].key) &&
+              tooltipEl.setAttribute("placement", "right");
+            // Checks if the truncated text is in the last column
+            typographyEl.id.includes(
+              this.columns[this.columns.length - 1].key
+            ) && tooltipEl.setAttribute("placement", "left");
             typographyEl.parentNode.replaceChild(tooltipEl, typographyEl);
             tooltipEl.appendChild(typographyEl);
           }
@@ -386,6 +399,7 @@ export class DataTable {
   handleItemsPerPageChange(ev: CustomEvent): void {
     this.previousRowsPerPage = this.rowsPerPage;
     this.rowsPerPage = ev.detail.value;
+    this.dataTruncation();
   }
 
   @Listen("icPageChange")
@@ -403,6 +417,7 @@ export class DataTable {
     } else {
       this.previousRowsPerPage = this.rowsPerPage;
     }
+    this.dataTruncation();
   }
 
   @Listen("icTableDensityUpdate")
@@ -769,7 +784,6 @@ export class DataTable {
           ...row,
           index,
         });
-
         this.currentRowHeight = variableRowHeightVal
           ? variableRowHeightVal !== "auto" && variableRowHeightVal
           : this.globalRowHeight !== "auto" && this.globalRowHeight;

diff --git a/packages/canary-web-components/src/components/ic-data-table/story-data.ts b/packages/canary-web-components/src/components/ic-data-table/story-data.ts
@@ -166,38 +166,35 @@ export const LONG_DATA_VALUES = [
 
 export const LONG_DATA_VALUES_UPDATE = [
   {
-    name: 'Michael Phelps',
+    name: "Michael Phelps",
     age: 23,
     department: "United States",
     employeeNumber: 1,
     jobTitle: "Swimmer",
   },
   {
-    name: 'Natalie Coughlin',
+    name: "Natalie Coughlin",
     age: 25,
     department: "United States",
     employeeNumber: 2,
-    jobTitle:
-      "Swimmer",
+    jobTitle: "Swimmer",
   },
   {
     name: "Debbie Flood",
     age: 28,
     department: "Great Britain",
     employeeNumber: 3,
-    jobTitle:
-      "7 time Olympic and Commonwealth Champion for Rowing",
+    jobTitle: "7 time Olympic and Commonwealth Champion for Rowing",
   },
   {
-    name: 'Gillian Charleton',
+    name: "Gillian Charleton",
     age: "22",
     department: "Canada",
     employeeNumber: 4,
     jobTitle: "Cycling",
   },
 ];
 
-
 export const DATA_CELL_ALIGNMENT = [
   {
     firstName: {
@@ -445,7 +442,7 @@ export const LONG_DATA = [
   },
   {
     employeeNumber: 5,
-    name: "Luke Ashford",
+    name: "Bartholomew Christoper Augustine Zacchaeus Ashford",
     age: 18,
     jobTitle: "Junior Developer",
     address: "5 New Street, Town, Country, Postcode",
@@ -487,7 +484,7 @@ export const LONG_DATA = [
   },
   {
     employeeNumber: 11,
-    name: "Pete Norton",
+    name: "Chrysanthemum Finnleigh Carrington Savannah Norton",
     age: 32,
     jobTitle: "Analyst",
     address: "6 Key Street, Town, County, Postcode",
@@ -515,7 +512,7 @@ export const LONG_DATA = [
   },
   {
     employeeNumber: 15,
-    name: "Mary Lincoln",
+    name: "Bernadette Mariah Genevieve Maddison Lincoln",
     age: 23,
     jobTitle: "Developer",
     address: "10 Main Street, Town, Country, Postcode",
@@ -802,6 +799,7 @@ export const SortOptions = (): HTMLIcDataTableElement => {
 export const Pagination = (): HTMLIcDataTableElement => {
   const dataTable = createDataTableElement("Pagination", LONG_COLS, LONG_DATA);
   dataTable.setAttribute("show-pagination", "true");
+  dataTable.setAttribute("truncation-pattern", "tooltip");
   dataTable.paginationOptions = {
     itemsPerPage: [
       { label: "5", value: "5" },
@@ -917,35 +915,35 @@ export const TruncationShowHide = (): HTMLElement => {
   dataTable.globalRowHeight = 40;
   dataTable.variableRowHeight = null;
   dataTable.setAttribute("truncation-pattern", "showHide");
- 
+
   const resetButton = document.createElement("ic-button");
   resetButton.addEventListener("click", () => dataTable.resetRowHeights());
   resetButton.innerHTML = "Reset";
- 
+
   const setButton = document.createElement("ic-button");
   setButton.addEventListener("click", () => {
     dataTable.globalRowHeight = 80;
     dataTable.variableRowHeight = ({ name, age }) =>
-      (name === "John Smith" || age === 41) ? 200 : null;
+      name === "John Smith" || age === 41 ? 200 : null;
   });
   setButton.innerHTML = "Set";
 
-  const updateDataButton = document.createElement('ic-button');
-  updateDataButton.addEventListener('click', () => {
+  const updateDataButton = document.createElement("ic-button");
+  updateDataButton.addEventListener("click", () => {
     setTimeout(() => {
       dataTable.data = LONG_DATA_VALUES_UPDATE;
-    }, 500)
+    }, 500);
   });
   updateDataButton.innerHTML = "Update data";
- 
+
   const buttonWrapper = document.createElement("div");
   buttonWrapper.style["display"] = "flex";
   buttonWrapper.style["paddingTop"] = "10px";
   buttonWrapper.style["gap"] = "8px";
   buttonWrapper.insertAdjacentElement("afterbegin", setButton);
   buttonWrapper.insertAdjacentElement("beforeend", resetButton);
   buttonWrapper.insertAdjacentElement("beforeend", updateDataButton);
- 
+
   const wrapper = document.createElement("div");
   wrapper.insertAdjacentElement("afterbegin", dataTable);
   wrapper.insertAdjacentElement("beforeend", buttonWrapper);

diff --git a/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx b/packages/canary-web-components/src/components/ic-pagination-bar/ic-pagination-bar.tsx
@@ -487,6 +487,7 @@ export class PaginationBar {
                 target={`#${PAGE_INPUT_FIELD_ID}`}
                 disableHover
                 disableClick
+                placement="top"
               >
                 <ic-text-field
                   type="number"

diff --git a/packages/canary-web-components/src/utils/helpers.ts b/packages/canary-web-components/src/utils/helpers.ts
@@ -79,8 +79,7 @@ export const inheritAttributes = (
   return attributeObject;
 };
 
-
 export const pxToRem = (px: string, base = 16): string => {
   const tempPx = parseInt(px);
   return `${(1 / base) * tempPx}rem`;
-};
+};