diff --git a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx b/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx index b9ea8a6e76..78347aa321 100644 --- a/packages/canary-web-components/src/components/ic-data-table/ic-data-table.stories.mdx +++ b/packages/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 - - {TruncationTooltip()} - + {TruncationTooltip()} #### 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 index a97b748964..29356e1e24 100644 --- 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 index 6e63959cb3..993e503588 100644 --- 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,30 +166,28 @@ 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, @@ -197,7 +195,6 @@ export const LONG_DATA_VALUES_UPDATE = [ }, ]; - 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,27 +915,27 @@ 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"; @@ -945,7 +943,7 @@ export const TruncationShowHide = (): HTMLElement => { 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 index 0ca7064e7e..a5697c2020 100644 --- 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" > { const tempPx = parseInt(px); return `${(1 / base) * tempPx}rem`; -}; \ No newline at end of file +};