Skip to content

Commit

Permalink
[PLAY-1790] Dark Mode Audit Table (#4134)
Browse files Browse the repository at this point in the history 
**What does this PR do?** A clear and concise description with your
runway ticket url.
This PR fixes some tables having a white background in dark mode.

[Story](https://runway.powerhrg.com/backlog_items/PLAY-1790)

![Screenshot 2025-01-30 at 10 32
50 AM](https://github.com/user-attachments/assets/8f391b46-a650-44e0-9a96-3db63fe76ef8)

![Screenshot 2025-01-23 at 11 49
20 AM](https://github.com/user-attachments/assets/9db09935-4f11-455f-be36-c45fe2427bcb)


**How to test?** Steps to confirm the desired behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See addition/change


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.
  • Loading branch information
@yuriyivanenko
yuriyivanenko authored Jan 31, 2025
1 parent 1d42d4d commit c82207a
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 19 deletions.
15 changes: 6 additions & 9 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,17 @@
</tr>
</tbody>
<% end %>

<%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
<colgroup>
<%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
<%= pb_rails("background", props: { background_color: "card_light", tag: "col" }) %>
<%= pb_rails("background", props: { background_color: "info_subtle", tag: "col" }) %>
<%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
</colgroup>
<%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<% end %>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</thead>
<tbody>
<tr>
<td>Value 1</td>
Expand Down
15 changes: 6 additions & 9 deletions playbook/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,24 +68,21 @@ const TableWithBackgroundKit = (props) => {
tag='col'
/>
<Background
backgroundColor="card_light"
backgroundColor="info_subtle"
tag='col'
/>
<Background
backgroundColor="warning_subtle"
tag='col'
/>
</colgroup>
<Background
backgroundColor="card_light"
tag='thead'
>
<thead>
<tr>
<th>{'Column 1'}</th>
<th>{'Column 2'}</th>
<th>{'Column 3'}</th>
<th>{'Column 1'}</th>
<th>{'Column 2'}</th>
<th>{'Column 3'}</th>
</tr>
</Background>
</thead>
<tbody>
<tr>
<td>{'Value 1'}</td>
Expand Down
26 changes: 26 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,39 @@
&.table-card {
background: none !important;

&.dark {
tbody, .pb_table_tbody {
tr, .pb_table_tr {
td, .pb_table_td {
background: $bg_dark_card !important;
border-color: $border_dark !important;
&:before {
color: $text_dk_light !important;
}
&:after {
height: 0;
background-color: transparent;
}

&:first-child {
border-radius: $border_rad_light $border_rad_light 0 0 !important;
}
&:last-child {
border-radius: 0 0 $border_rad_light $border_rad_light !important;
}
}
}
}
}

tbody, .pb_table_tbody {
tr, .pb_table_tr {
td, .pb_table_td {
background: $white !important;
border-left-width: 1px !important;
border-right-width: 1px !important;
border-top-width: 1px !important;

&:after {
height: 0;
background-color: transparent;
Expand Down
1 change: 0 additions & 1 deletion playbook/app/pb_kits/playbook/pb_table/styles/_mobile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,6 @@
tbody, .pb_table_tbody {
tr, .pb_table_tr {
td, .pb_table_td {
background: $white !important;
border-left-width: 1px !important;
border-right-width: 1px !important;
border-top-width: 1px !important;
Expand Down
25 changes: 25 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,31 @@
&.table-card {
background: none !important;

&.dark {
tbody, .pb_table_tbody {
tr, .pb_table_tr {
td, .pb_table_td {
background: $bg_dark_card !important;
border-color: $border_dark !important;
&:before {
color: $text_dk_light !important;
}
&:after {
height: 0;
background-color: transparent;
}

&:first-child {
border-radius: $border_rad_light $border_rad_light 0 0 !important;
}
&:last-child {
border-radius: 0 0 $border_rad_light $border_rad_light !important;
}
}
}
}
}

tbody, .pb_table_tbody {
tr, .pb_table_tr {
td, .pb_table_td {
Expand Down
25 changes: 25 additions & 0 deletions playbook/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,31 @@
&.table-card {
background: none !important;

&.dark {
tbody, .pb_table_tbody {
tr, .pb_table_tr {
td, .pb_table_td {
background: $bg_dark_card !important;
border-color: $border_dark !important;
&:before {
color: $text_dk_light !important;
}
&:after {
height: 0;
background-color: transparent;
}

&:first-child {
border-radius: $border_rad_light $border_rad_light 0 0 !important;
}
&:last-child {
border-radius: 0 0 $border_rad_light $border_rad_light !important;
}
}
}
}
}

tbody, .pb_table_tbody {
tr, .pb_table_tr {
td, .pb_table_td {
Expand Down

0 comments on commit c82207a

Please sign in to comment.