Skip to content

Commit c82207a

Browse files
yuriyivanenkoyuriyivanenko
authored
[PLAY-1790] Dark Mode Audit Table (#4134)
**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.
1 parent 1d42d4d commit c82207a

File tree

6 files changed

+88
-19
lines changed

6 files changed

+88
-19
lines changed

‎playbook/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,20 +39,17 @@
3939
</tr>
4040
</tbody>
4141
<% end %>
42-
4342
<%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
4443
<colgroup>
4544
<%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
46-
<%= pb_rails("background", props: { background_color: "card_light", tag: "col" }) %>
45+
<%= pb_rails("background", props: { background_color: "info_subtle", tag: "col" }) %>
4746
<%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
4847
</colgroup>
49-
<%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %>
50-
<tr>
51-
<th>Column 1</th>
52-
<th>Column 2</th>
53-
<th>Column 3</th>
54-
</tr>
55-
<% end %>
48+
<thead>
49+
<th>Column 1</th>
50+
<th>Column 2</th>
51+
<th>Column 3</th>
52+
</thead>
5653
<tbody>
5754
<tr>
5855
<td>Value 1</td>

‎playbook/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -68,24 +68,21 @@ const TableWithBackgroundKit = (props) => {
6868
tag='col'
6969
/>
7070
<Background
71-
backgroundColor="card_light"
71+
backgroundColor="info_subtle"
7272
tag='col'
7373
/>
7474
<Background
7575
backgroundColor="warning_subtle"
7676
tag='col'
7777
/>
7878
</colgroup>
79-
<Background
80-
backgroundColor="card_light"
81-
tag='thead'
82-
>
79+
<thead>
8380
<tr>
84-
<th>{'Column 1'}</th>
85-
<th>{'Column 2'}</th>
86-
<th>{'Column 3'}</th>
81+
<th>{'Column 1'}</th>
82+
<th>{'Column 2'}</th>
83+
<th>{'Column 3'}</th>
8784
</tr>
88-
</Background>
85+
</thead>
8986
<tbody>
9087
<tr>
9188
<td>{'Value 1'}</td>

‎playbook/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,39 @@
7474
&.table-card {
7575
background: none !important;
7676

77+
&.dark {
78+
tbody, .pb_table_tbody {
79+
tr, .pb_table_tr {
80+
td, .pb_table_td {
81+
background: $bg_dark_card !important;
82+
border-color: $border_dark !important;
83+
&:before {
84+
color: $text_dk_light !important;
85+
}
86+
&:after {
87+
height: 0;
88+
background-color: transparent;
89+
}
90+
91+
&:first-child {
92+
border-radius: $border_rad_light $border_rad_light 0 0 !important;
93+
}
94+
&:last-child {
95+
border-radius: 0 0 $border_rad_light $border_rad_light !important;
96+
}
97+
}
98+
}
99+
}
100+
}
101+
77102
tbody, .pb_table_tbody {
78103
tr, .pb_table_tr {
79104
td, .pb_table_td {
80105
background: $white !important;
81106
border-left-width: 1px !important;
82107
border-right-width: 1px !important;
83108
border-top-width: 1px !important;
109+
84110
&:after {
85111
height: 0;
86112
background-color: transparent;

‎playbook/app/pb_kits/playbook/pb_table/styles/_mobile.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@
7777
tbody, .pb_table_tbody {
7878
tr, .pb_table_tr {
7979
td, .pb_table_td {
80-
background: $white !important;
8180
border-left-width: 1px !important;
8281
border-right-width: 1px !important;
8382
border-top-width: 1px !important;

‎playbook/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,31 @@
7474
&.table-card {
7575
background: none !important;
7676

77+
&.dark {
78+
tbody, .pb_table_tbody {
79+
tr, .pb_table_tr {
80+
td, .pb_table_td {
81+
background: $bg_dark_card !important;
82+
border-color: $border_dark !important;
83+
&:before {
84+
color: $text_dk_light !important;
85+
}
86+
&:after {
87+
height: 0;
88+
background-color: transparent;
89+
}
90+
91+
&:first-child {
92+
border-radius: $border_rad_light $border_rad_light 0 0 !important;
93+
}
94+
&:last-child {
95+
border-radius: 0 0 $border_rad_light $border_rad_light !important;
96+
}
97+
}
98+
}
99+
}
100+
}
101+
77102
tbody, .pb_table_tbody {
78103
tr, .pb_table_tr {
79104
td, .pb_table_td {

‎playbook/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,31 @@
7474
&.table-card {
7575
background: none !important;
7676

77+
&.dark {
78+
tbody, .pb_table_tbody {
79+
tr, .pb_table_tr {
80+
td, .pb_table_td {
81+
background: $bg_dark_card !important;
82+
border-color: $border_dark !important;
83+
&:before {
84+
color: $text_dk_light !important;
85+
}
86+
&:after {
87+
height: 0;
88+
background-color: transparent;
89+
}
90+
91+
&:first-child {
92+
border-radius: $border_rad_light $border_rad_light 0 0 !important;
93+
}
94+
&:last-child {
95+
border-radius: 0 0 $border_rad_light $border_rad_light !important;
96+
}
97+
}
98+
}
99+
}
100+
}
101+
77102
tbody, .pb_table_tbody {
78103
tr, .pb_table_tr {
79104
td, .pb_table_td {

0 commit comments

Comments
 (0)