From 4df1a6472d4b2e045c025872bb8453860e8f3ee7 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Mon, 19 Aug 2024 12:49:07 +0530 Subject: [PATCH 1/3] fix: table sticky column z-index --- packages/blade/src/components/Table/Table.web.tsx | 13 ++++++++----- packages/blade/src/components/Table/tokens.ts | 4 ++-- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx index 66ea177cff4..8aaa490e6ed 100644 --- a/packages/blade/src/components/Table/Table.web.tsx +++ b/packages/blade/src/components/Table/Table.web.tsx @@ -16,7 +16,7 @@ import { TableContext } from './TableContext'; import { ComponentIds } from './componentIds'; import { checkboxCellWidth, - firstColumnStickyHeaderFooterZIndex, + firstColumnStickyZIndex, refreshWrapperZIndex, tableBackgroundColor, tablePagination, @@ -169,14 +169,14 @@ const _Table = ({ &:nth-of-type(1) { left: 0 !important; position: sticky !important; - z-index: ${firstColumnStickyHeaderFooterZIndex} !important; + z-index: ${firstColumnStickyZIndex} !important; } ${ selectionType === 'multiple' && `&:nth-of-type(2) { left: ${checkboxCellWidth}px !important; position: sticky !important; - z-index: ${firstColumnStickyHeaderFooterZIndex} !important; + z-index: ${firstColumnStickyZIndex} !important; } ` }` @@ -186,14 +186,14 @@ const _Table = ({ &:nth-of-type(1) { left: 0 !important; position: sticky !important; - z-index: ${firstColumnStickyHeaderFooterZIndex} !important; + z-index: ${firstColumnStickyZIndex} !important; } ${ selectionType === 'multiple' && `&:nth-of-type(2) { left: ${checkboxCellWidth}px !important; position: sticky !important; - z-index: ${firstColumnStickyHeaderFooterZIndex} !important; + z-index: ${firstColumnStickyZIndex} !important; } ` }` @@ -203,12 +203,14 @@ const _Table = ({ &:nth-of-type(1) { left: 0 !important; position: sticky !important; + z-index: ${firstColumnStickyZIndex} !important; } ${ selectionType === 'multiple' && `&:nth-of-type(2) { left: ${checkboxCellWidth}px !important; position: sticky !important; + z-index: ${firstColumnStickyZIndex} !important; } ` }` @@ -230,6 +232,7 @@ const _Table = ({ `, HeaderCell: ` position: ${shouldHeaderBeSticky ? 'sticky' : 'relative'}; + top: ${shouldHeaderBeSticky ? '0' : undefined}; ${firstColumnStickyHeaderCellCSS} `, diff --git a/packages/blade/src/components/Table/tokens.ts b/packages/blade/src/components/Table/tokens.ts index 3c873397388..68730a4dc12 100644 --- a/packages/blade/src/components/Table/tokens.ts +++ b/packages/blade/src/components/Table/tokens.ts @@ -1,7 +1,7 @@ import { AlertCircleIcon, CheckIcon } from '~components/Icons'; import { size } from '~tokens/global'; -const firstColumnStickyHeaderFooterZIndex = 2; +const firstColumnStickyZIndex = 2; const refreshWrapperZIndex = 3; @@ -145,7 +145,7 @@ export { tablePagination, refreshWrapperZIndex, tableBackgroundColor, - firstColumnStickyHeaderFooterZIndex, + firstColumnStickyZIndex, checkboxCellWidth, tableEditableCellRowDensityToInputSizeMap, validationStateToInputTrailingIconMap, From a7b6d0a6a9b9e1702865ad9e700a63fb9b2eb33b Mon Sep 17 00:00:00 2001 From: Saurabh Daware Date: Mon, 19 Aug 2024 12:50:47 +0530 Subject: [PATCH 2/3] Create cyan-drinks-poke.md --- .changeset/cyan-drinks-poke.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cyan-drinks-poke.md diff --git a/.changeset/cyan-drinks-poke.md b/.changeset/cyan-drinks-poke.md new file mode 100644 index 00000000000..621f4e77e82 --- /dev/null +++ b/.changeset/cyan-drinks-poke.md @@ -0,0 +1,5 @@ +--- +"@razorpay/blade": patch +--- + +fix(Table): table sticky column overlapping with relative cell From 77eb4d390ee1a80799aace96c4e83777754c1a39 Mon Sep 17 00:00:00 2001 From: saurabhdaware Date: Mon, 19 Aug 2024 13:02:06 +0530 Subject: [PATCH 3/3] fix: snapshots --- .../__snapshots__/Table.web.test.tsx.snap | 204 +++++++++--------- 1 file changed, 102 insertions(+), 102 deletions(-) diff --git a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap index 553043dc63c..91b6d573528 100644 --- a/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap +++ b/packages/blade/src/components/Table/__tests__/__snapshots__/Table.web.test.tsx.snap @@ -386,7 +386,7 @@ exports[` should render table 1`] = ` role="rowheader" >
should render table 1`] = ` should render table 1`] = ` should render table 1`] = ` should render table 1`] = ` should render table 1`] = ` should render table with TableEditableCell and Bordered cells role="rowheader" > should render table with TableEditableCell and Bordered cells should render table with TableEditableCell and Bordered cells should render table with TableEditableCell and Bordered cells should render table with TableEditableCell and Bordered cells should render table with TableEditableCell and Bordered cells should render table with comfortable rowDensity 1`] = ` role="rowheader" > should render table with comfortable rowDensity 1`] = ` should render table with comfortable rowDensity 1`] = ` should render table with comfortable rowDensity 1`] = ` should render table with comfortable rowDensity 1`] = ` should render table with comfortable rowDensity 1`] = ` should render table with compact rowDensity 1`] = ` role="rowheader" > should render table with compact rowDensity 1`] = ` should render table with compact rowDensity 1`] = ` should render table with compact rowDensity 1`] = ` should render table with compact rowDensity 1`] = ` should render table with compact rowDensity 1`] = ` should render table with isRefreshing 1`] = ` role="rowheader" > should render table with isRefreshing 1`] = ` should render table with isRefreshing 1`] = ` should render table with isRefreshing 1`] = ` should render table with isRefreshing 1`] = ` should render table with isRefreshing 1`] = ` should render table with showStripedRows 1`] = ` role="rowheader" > should render table with showStripedRows 1`] = ` should render table with showStripedRows 1`] = ` should render table with showStripedRows 1`] = ` should render table with showStripedRows 1`] = ` should render table with showStripedRows 1`] = ` should render table with sticky header, footer & first column role="rowheader" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column role="row" > should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column should render table with sticky header, footer & first column