From b892794e069dead426ebbaa3263da92f714bf136 Mon Sep 17 00:00:00 2001
From: Bryce Gilhome <bryce.gilhome@nowdigital.com.au>
Date: Thu, 12 Dec 2024 13:52:19 +1100
Subject: [PATCH 1/4] Use a responsively hidden div instead of pseudo-element
 content to show data table cell label on mobile.

---
 .../src/components/data-table/RplDataTable.css        | 11 +++++++----
 .../src/components/data-table/RplDataTableRow.vue     |  3 ++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTable.css b/packages/ripple-ui-core/src/components/data-table/RplDataTable.css
index 389375d301..b47bc83b4d 100644
--- a/packages/ripple-ui-core/src/components/data-table/RplDataTable.css
+++ b/packages/ripple-ui-core/src/components/data-table/RplDataTable.css
@@ -83,6 +83,10 @@
       }
     }
   }
+
+  &__mobile-label {
+    display: none;
+  }
 }
 
 .rpl-data-table--mobile {
@@ -151,9 +155,8 @@
     }
   }
 
-  [data-label]::before {
+  .rpl-data-table__mobile-label {
     font-weight: var(--rpl-type-weight-bold);
-    content: attr(data-label);
     display: block;
     margin-bottom: var(--rpl-sp-1);
   }
@@ -166,8 +169,8 @@
       line-height: var(--rpl-type-lh-4);
       letter-spacing: var(--rpl-type-ls-1);
 
-      &[data-label]::before {
-        content: '';
+      .rpl-data-table__mobile-label {
+        display: none;
       }
     }
   }
diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
index 812ee7d09c..d9da2e2692 100644
--- a/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
+++ b/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
@@ -114,8 +114,9 @@ const getCellText = (col?: number | string, value = '') => {
         :is="i === 0 && verticalHeader ? 'th' : 'td'"
         v-for="(column, i) of columns"
         :key="i"
-        :data-label="column.label"
       >
+        <div v-if="column.isLabelHTML" class="rpl-data-table__mobile-label" v-html="column.label" />
+        <div v-else class="rpl-data-table__mobile-label">{{ column.label }}</div>
         <template v-if="hasComponent(column)">
           <component
             :is="(column as tableColumnConfig).component"

From cea62acf4e7ed1dac5e1bc3d20b488b54c7cdf92 Mon Sep 17 00:00:00 2001
From: Bryce Gilhome <bryce.gilhome@nowdigital.com.au>
Date: Thu, 12 Dec 2024 14:30:32 +1100
Subject: [PATCH 2/4] Use a single div with v-html for mobile label whether
 `isLabelHTML` is true or not.

---
 .../src/components/data-table/RplDataTableRow.vue              | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
index d9da2e2692..cc29cdc93a 100644
--- a/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
+++ b/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
@@ -115,8 +115,7 @@ const getCellText = (col?: number | string, value = '') => {
         v-for="(column, i) of columns"
         :key="i"
       >
-        <div v-if="column.isLabelHTML" class="rpl-data-table__mobile-label" v-html="column.label" />
-        <div v-else class="rpl-data-table__mobile-label">{{ column.label }}</div>
+        <div class="rpl-data-table__mobile-label" v-html="column.label" />
         <template v-if="hasComponent(column)">
           <component
             :is="(column as tableColumnConfig).component"

From 21095d6884f0cc6ea4780643e75fb1fe25609db7 Mon Sep 17 00:00:00 2001
From: Bryce Gilhome <bryce.gilhome@nowdigital.com.au>
Date: Thu, 12 Dec 2024 15:22:26 +1100
Subject: [PATCH 3/4] Re-add data-label on data table row so tests pass.

---
 .../ripple-ui-core/src/components/data-table/RplDataTableRow.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue b/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
index cc29cdc93a..4efee71f3f 100644
--- a/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
+++ b/packages/ripple-ui-core/src/components/data-table/RplDataTableRow.vue
@@ -114,6 +114,7 @@ const getCellText = (col?: number | string, value = '') => {
         :is="i === 0 && verticalHeader ? 'th' : 'td'"
         v-for="(column, i) of columns"
         :key="i"
+        :data-label="column.label"
       >
         <div class="rpl-data-table__mobile-label" v-html="column.label" />
         <template v-if="hasComponent(column)">

From 55bfe454aa3d3006ea9d6175b355d541558a30d1 Mon Sep 17 00:00:00 2001
From: Bryce Gilhome <bryce.gilhome@nowdigital.com.au>
Date: Thu, 12 Dec 2024 15:24:19 +1100
Subject: [PATCH 4/4] Remove extraneous CSS rule for data table mobile label.

---
 .../ripple-ui-core/src/components/data-table/RplDataTable.css | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/ripple-ui-core/src/components/data-table/RplDataTable.css b/packages/ripple-ui-core/src/components/data-table/RplDataTable.css
index b47bc83b4d..89be394328 100644
--- a/packages/ripple-ui-core/src/components/data-table/RplDataTable.css
+++ b/packages/ripple-ui-core/src/components/data-table/RplDataTable.css
@@ -168,10 +168,6 @@
       font-size: var(--rpl-type-size-2);
       line-height: var(--rpl-type-lh-4);
       letter-spacing: var(--rpl-type-ls-1);
-
-      .rpl-data-table__mobile-label {
-        display: none;
-      }
     }
   }
 }