Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PBNTR-716] Table kit: "Sticky Left Column" variant styling - React and Rails #4027

Merged
merged 14 commits into from
Dec 20, 2024
Merged

[PBNTR-716] Table kit: "Sticky Left Column" variant styling - React and Rails #4027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d9b54a4
Updated doc example and sticky column functionality
skduncan Dec 18, 2024
a4274da
Removed unnecessary props from react
skduncan Dec 18, 2024
f9d0453
Changed scroll css to fix border issue
skduncan Dec 18, 2024
5ddc553
Adjusted table view on rails component to better match divs from react
skduncan Dec 18, 2024
2426b1c
Updated spec test
skduncan Dec 18, 2024
1da5235
Adjusted class
skduncan Dec 18, 2024
3eb366c
Reverted classname generator and spec changes
skduncan Dec 18, 2024
4e757b5
Adjusted styling to show right border on smaller screens
skduncan Dec 19, 2024
8b9fa50
Adjusted border css
skduncan Dec 19, 2024
45da6ef
Removed box-shadow on left side and readded spec for sticky columns
skduncan Dec 19, 2024
eb8aff5
Updated border css
skduncan Dec 19, 2024
6eb5b52
Moved css styling
skduncan Dec 19, 2024
17d4ae1
Restored doc example
skduncan Dec 20, 2024
510cf4f
Adjusted advanced table classname to separate from basic table
skduncan Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@

// Responsive Styles
@media only screen and (max-width: $screen-xl-min) {
&[class*="table-responsive-scroll"] {
&[class*="advanced-table-responsive-scroll"] {
border-radius: 4px;
box-shadow: 1px 0 0 0px $border_light,
-1px 0 0 0px $border_light;
Expand Down Expand Up @@ -150,7 +150,7 @@
}
}
@media only screen and (min-width: $screen-xl-min) {
&[class*="table-responsive-scroll"] {
&[class*="advanced-table-responsive-scroll"] {
overflow-x: visible;
}
}
Expand Down Expand Up @@ -200,7 +200,7 @@
}
// Dark Mode Responsive Styles
@media only screen and (max-width: $screen-xl-min) {
&[class*="table-responsive-scroll"] {
&[class*="advanced-table-responsive-scroll"] {
border-radius: 4px;
box-shadow: 1px 0 0 0px $border_dark,
-1px 0 0 0px $border_dark;
Expand Down
2 changes: 1 addition & 1 deletion playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
const htmlProps = buildHtmlProps(htmlOptions)
const classes = classnames(
buildCss("pb_advanced_table"),
`table-responsive-${responsive}`,
`advanced-table-responsive-${responsive}`,
globalProps(props),
className
)
Expand Down
4 changes: 2 additions & 2 deletions playbook/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,7 +468,7 @@ test("responsive prop functions as expected", () => {
)

const kit = screen.getByTestId(testId)
expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll")
expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-scroll")
})

test("responsive none prop functions as expected", () => {
Expand All @@ -483,7 +483,7 @@ test("responsive none prop functions as expected", () => {
)

const kit = screen.getByTestId(testId)
expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
expect(kit).toHaveClass("pb_advanced_table advanced-table-responsive-none")
})

test("customRenderer prop functions as expected", () => {
Expand Down
12 changes: 6 additions & 6 deletions playbook/app/pb_kits/playbook/pb_table/_table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,31 +92,31 @@ const Table = (props: TableProps): React.ReactElement => {
useEffect(() => {
const handleStickyColumns = () => {
let accumulatedWidth = 0;

stickyLeftcolumn.forEach((colId, index) => {
const isLastColumn = index === stickyLeftcolumn.length - 1;
const header = document.querySelector(`th[id="${colId}"]`);
const cells = document.querySelectorAll(`td[id="${colId}"]`);

if (header) {
header.classList.add('sticky');
(header as HTMLElement).style.left = `${accumulatedWidth}px`;

if (!isLastColumn) {
header.classList.add('with-border');
header.classList.remove('sticky-shadow');
} else {
header.classList.remove('with-border');
header.classList.add('sticky-shadow');
}

accumulatedWidth += (header as HTMLElement).offsetWidth;
}

cells.forEach((cell) => {
cell.classList.add('sticky');
(cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;

if (!isLastColumn) {
cell.classList.add('with-border');
cell.classList.remove('sticky-shadow');
Expand Down
78 changes: 30 additions & 48 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,16 @@
<td id="3">Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>

</tr>
<tr>
Expand All @@ -43,16 +43,16 @@
<td id="3">Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>

</tr>
<tr>
Expand All @@ -61,34 +61,16 @@
<td id="3">Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>

</tr>
<tr>
<td id="1">Value 1</td>
<td id="2">Value 2</td>
<td id="3">Value 3</td>
<td>Value 4</td>
<td>Value 5</td>
<td>Column 6</td>
<td>Column 7</td>
<td>Column 8</td>
<td>Column 9</td>
<td>Column 10</td>
<td>Column 11</td>
<td>Column 12</td>
<td>Column 13</td>
<td>Column 14</td>
<td>Column 15</td>
<td>Value 6</td>
<td>Value 7</td>
<td>Value 8</td>
<td>Value 9</td>
<td>Value 10</td>
<td>Value 11</td>
<td>Value 12</td>
<td>Value 13</td>
<td>Value 14</td>
<td>Value 15</td>

</tr>
</tbody>
Expand Down
1 change: 1 addition & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
2 changes: 2 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/docs/example.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ examples:
- table_md: Medium
- table_lg: Large
- table_sticky: Sticky Header
- table_sticky_left_columns: Sticky Left Column
- table_header: Table Header
- table_alignment_row_rails: Row Alignment
- table_alignment_column_rails: Cell Alignment
Expand Down Expand Up @@ -33,6 +34,7 @@ examples:
- table_md: Medium
- table_lg: Large
- table_sticky: Sticky Header
- table_sticky_left_columns: Sticky Left Column
- table_alignment_row: Row Alignment
ElisaShapiro marked this conversation as resolved.
Show resolved Hide resolved
- table_alignment_column: Cell Alignment
- table_alignment_shift_row: Row Shift
Expand Down
8 changes: 5 additions & 3 deletions playbook/app/pb_kits/playbook/pb_table/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,11 @@ export default class PbTable extends PbEnhancedElement {
.split('-');

if (this.stickyLeftColumns.length > 0) {
this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
this.handleStickyColumns();
window.addEventListener('resize', this.handleStickyColumnsRef);
setTimeout(() => {
this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
this.handleStickyColumns();
window.addEventListener('resize', this.handleStickyColumnsRef);
}, 10);
}
}
});
Expand Down
31 changes: 28 additions & 3 deletions playbook/app/pb_kits/playbook/pb_table/styles/_scroll.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,29 @@
.table-responsive-scroll {
display: block;
overflow-x: auto;
@import "../../tokens/screen_sizes";

.table-responsive-scroll {
display: block;
overflow-x: scroll;

// Responsive Styles
@media (max-width: 1600px) {
&[class*="table-responsive-scroll"] {
border-radius: 4px;
box-shadow: 1px 0 0 0px $border_light
}

&[class^=pb_table].table-sm.table-card thead tr th:last-child,
&[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
border-right-width: 0px;
}

&[class^=pb_table].table-md.table-card thead tr th:last-child,
&[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:last-child {
border-right-width: 0px;
}

&[class^=pb_table].table-lg.table-card thead tr th:last-child,
&[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:last-child {
border-right-width: 0px;
}
}
}
1 change: 0 additions & 1 deletion playbook/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
[class^="pb_table"] {
.sticky {
position: sticky !important;
left: 0;
z-index: 1;
background-color: white;
}
Expand Down
8 changes: 7 additions & 1 deletion playbook/app/pb_kits/playbook/pb_table/table.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
<%= content_tag(:div) do %>
<% if object.responsive_classname %>
<% responsive_class = object.responsive_classname %>
<% else %>
<% responsive_class = nil %>
<% end %>

<%= content_tag(:div, class: responsive_class) do %>
<% if object.tag == "table" %>
<%= content_tag(:table,
aria: object.aria,
Expand Down
4 changes: 4 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/table.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,10 @@ def classname
)
end

def responsive_classname
responsive ? "table-responsive-#{responsive}" : nil
end

private

def dark_class
Expand Down
Loading