From c99a6b10fbac84e9acd0825e7e41aa2f5d8646c4 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 6 May 2022 15:23:35 +0200
Subject: [PATCH] DEV: allows to set a class on d-popover component (#16670)

---
 .../javascripts/discourse/app/components/d-popover.js     | 2 ++
 .../discourse/app/templates/components/d-popover.hbs      | 2 +-
 .../tests/integration/components/d-popover-test.js        | 8 ++++++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/components/d-popover.js b/app/assets/javascripts/discourse/app/components/d-popover.js
index 697d922fdfe..a5c935fc400 100644
--- a/app/assets/javascripts/discourse/app/components/d-popover.js
+++ b/app/assets/javascripts/discourse/app/components/d-popover.js
@@ -10,6 +10,8 @@ export default class DiscoursePopover extends Component {
 
   options = null;
 
+  class = null;
+
   didInsertElement() {
     this._super(...arguments);
 
diff --git a/app/assets/javascripts/discourse/app/templates/components/d-popover.hbs b/app/assets/javascripts/discourse/app/templates/components/d-popover.hbs
index 011a176bdaa..f17c8d5f9dc 100644
--- a/app/assets/javascripts/discourse/app/templates/components/d-popover.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/d-popover.hbs
@@ -1,3 +1,3 @@
-<div id={{componentId}} class="d-popover {{if isExpanded "is-expanded"}}">
+<div id={{componentId}} class="d-popover {{class}} {{if isExpanded "is-expanded"}}">
   {{yield (hash isExpanded=isExpanded)}}
 </div>
diff --git a/app/assets/javascripts/discourse/tests/integration/components/d-popover-test.js b/app/assets/javascripts/discourse/tests/integration/components/d-popover-test.js
index bc6ce8ff2b5..85ebf875ab5 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/d-popover-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/d-popover-test.js
@@ -73,4 +73,12 @@ discourseModule("Integration | Component | d-popover", function (hooks) {
       assert.ok(exists(".d-icon-chevron-up"));
     },
   });
+
+  componentTest("d-popover component accepts a class property", {
+    template: hbs`{{#d-popover class="foo"}}{{/d-popover}}`,
+
+    async test(assert) {
+      assert.ok(exists(".d-popover.foo"));
+    },
+  });
 });