From 7cdd29822f88b4d5a62e7120b1499557876f6883 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Tue, 29 Nov 2016 14:21:57 -0700
Subject: [PATCH] =?UTF-8?q?Use=20data=20attribute=20to=20select=20loading?=
 =?UTF-8?q?=20message,=20instead=20of=20CSS=20class=E2=80=A6=20(#9248)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Use uniquely and semantically named data attribute to select loading message, instead of CSS class since that creates a brittle coupling between JS and CSS.
* Formalize this rule in the CSS style guide.
---
 src/ui/views/ui_app.jade        | 12 +++++++-----
 style_guides/css_style_guide.md | 18 ++++++++++++++++++
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/ui/views/ui_app.jade b/src/ui/views/ui_app.jade
index 262ea898933d..975dec6ecd77 100644
--- a/src/ui/views/ui_app.jade
+++ b/src/ui/views/ui_app.jade
@@ -116,17 +116,19 @@ block content
         .kibanaWelcomeLogo
       .kibanaLoader__content
         | Loading Kibana
-    .kibanaLoadingMessage.
-      Give me a moment here. I&rsquo;m loading a whole bunch of code. Don&rsquo;t worry, all this
-      good stuff will be cached up for next time!
+    .kibanaLoadingMessage(
+      data-remove-message-when-embedded
+    )
+      | Give me a moment here. I&rsquo;m loading a whole bunch of code. Don&rsquo;t worry, all this
+      | good stuff will be cached up for next time!
 
   script.
     window.onload = function () {
 
       var hideLoadingMessage = /#.*[?&]embed(&|$|=true)/.test(window.location.href);
       if (hideLoadingMessage) {
-        var loading = document.querySelector('.kibanaWelcomeView');
-        loading.removeChild(loading.lastChild);
+        var loadingMessage = document.querySelector('[data-remove-message-when-embedded]');
+        loadingMessage.parentNode.removeChild(loadingMessage);
       }
 
       var buildNum = #{kibanaPayload.buildNum};
diff --git a/style_guides/css_style_guide.md b/style_guides/css_style_guide.md
index 1aed04bc3d33..f617f5a62ee7 100644
--- a/style_guides/css_style_guide.md
+++ b/style_guides/css_style_guide.md
@@ -2,6 +2,7 @@
 # CSS Style Guide
 
 - [CSS Style Guide](#css-style-guide)
+  - [Selecting elements](#selecting-elements)
   - [Using the preprocessor](#using-the-preprocessor)
     - [Don't build concatenated selector names](#dont-build-concatenated-selector-names)
     - [Avoid nested selectors](#avoid-nested-selectors)
@@ -15,6 +16,23 @@
     - [How to apply DRY](#how-to-apply-dry)
       - [Compelling reasons for using mixins](#compelling-reasons-for-using-mixins)
 
+## Selecting elements
+
+References to CSS selectors within JavaScript are difficult to discover, making it easy to accidentally
+break the UI when refactoring markup or CSS.
+
+Instead, add a `data` attribute with a unique and descriptive name and select the element using that.
+
+```html
+<div data-welcome-message>Hello, world</div>
+```
+
+```javascript
+const welcomeMessage = document.querySelector('[data-welcome-message]');
+```
+
+This uncouples our CSS from our JavaScript, making it easy to change each independently of the other.
+
 ## Using the preprocessor
 
 ### Don't build concatenated selector names