Use data attribute to select loading message, instead of CSS class… (#9248)
* 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.
This commit is contained in:
parent
4d6e0d726e
commit
7cdd29822f
|
@ -116,17 +116,19 @@ block content
|
|||
.kibanaWelcomeLogo
|
||||
.kibanaLoader__content
|
||||
| Loading Kibana
|
||||
.kibanaLoadingMessage.
|
||||
Give me a moment here. I’m loading a whole bunch of code. Don’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’m loading a whole bunch of code. Don’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};
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue