From b41b12ad71eeb11e2ce1ed7e0eb759cc33cc7c59 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 21 Oct 2019 12:22:55 -0400
Subject: [PATCH] Add unique class to custom field wrappers (#8193)

---
 .../discourse/components/user-field.js.es6          | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/components/user-field.js.es6 b/app/assets/javascripts/discourse/components/user-field.js.es6
index 1585e9a3a5a..9851b457628 100644
--- a/app/assets/javascripts/discourse/components/user-field.js.es6
+++ b/app/assets/javascripts/discourse/components/user-field.js.es6
@@ -2,11 +2,22 @@ import { fmt } from "discourse/lib/computed";
 import computed from "ember-addons/ember-computed-decorators";
 
 export default Ember.Component.extend({
-  classNameBindings: [":user-field", "field.field_type"],
+  classNameBindings: [":user-field", "field.field_type", "customFieldClass"],
   layoutName: fmt("field.field_type", "components/user-fields/%@"),
 
   @computed
   noneLabel() {
     return "user_fields.none";
+  },
+
+  @computed("field.name")
+  customFieldClass(fieldName) {
+    if (fieldName) {
+      fieldName = fieldName
+        .replace(/\s+/g, "-")
+        .replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, "")
+        .toLowerCase();
+      return fieldName && `user-field-${fieldName}`;
+    }
   }
 });