From a240cf98bbff44563c004a399c82285d2879d740 Mon Sep 17 00:00:00 2001
From: "dave.snider@gmail.com" <dave.snider@gmail.com>
Date: Mon, 17 Jul 2017 09:20:20 -0700
Subject: [PATCH] [K7] BEM mixin (#12884)

Bemify mixin for handling namespacing in our sass.
---
 package.json                                  |  1 +
 style_guides/scss_style_guide.md              | 38 +++++++++++++++++++
 .../src/global_styling/mixins/_bemify.scss    | 15 ++++++++
 .../src/global_styling/mixins/_index.scss     |  1 +
 4 files changed, 55 insertions(+)
 create mode 100644 ui_framework/src/global_styling/mixins/_bemify.scss

diff --git a/package.json b/package.json
index b1a98b36fffc3..5d8db3c4e02ef 100644
--- a/package.json
+++ b/package.json
@@ -206,6 +206,7 @@
     "@elastic/eslint-plugin-kibana-custom": "1.0.3",
     "angular-mocks": "1.4.7",
     "babel-eslint": "7.2.3",
+    "bemify": "0.1.4",
     "chai": "3.5.0",
     "chance": "1.0.6",
     "cheerio": "0.22.0",
diff --git a/style_guides/scss_style_guide.md b/style_guides/scss_style_guide.md
index 2b34238312adb..3d87529613a84 100644
--- a/style_guides/scss_style_guide.md
+++ b/style_guides/scss_style_guide.md
@@ -15,6 +15,44 @@ Our style guide is an extension of [Sass Guidelines by Hugo Giraudel](https://sa
 The Sass Guidelines site recommends using RBG and HSL values to format colors, but we're using
 hex values.
 
+### Bemify for namespacing
+
+We use [bemify](https://github.com/franzheidl/bemify) for namespacing the sass into a BEM format. We use `component`, `child`, `modifier` and `state` as our mixin names. We've adjusted the plugin's state mixin so that you need to write out the full selector (`@include state('isHappening')`).
+
+#### Example
+
+```
+// Generates .kuiButton
+@include component('kuiButton') {
+  color: white;
+  background: gray;
+  padding: 20px;
+
+  // Generates .kuiButton__icon
+  @include child('icon') {
+    display: inline-block;
+    margin-right: 4px;
+    color: white;
+
+    // Generates .kuiButton__icon--danger
+    @include modifier('danger') {
+      color: red;
+    }
+  }
+
+  // Generates .kuiButton--primary
+  @include modifier('primary') {
+    background: blue;
+  }
+
+  // Generates .kuiButton.isLoading
+  @include state('isLoading') {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+}
+```
+
 ## Dealing with extends
 
 Don't extend classes. The only time use should use an extend is when you are extending a placeholder. Even then, do it rarely and only for code maintainability.
diff --git a/ui_framework/src/global_styling/mixins/_bemify.scss b/ui_framework/src/global_styling/mixins/_bemify.scss
new file mode 100644
index 0000000000000..c5098cff3757b
--- /dev/null
+++ b/ui_framework/src/global_styling/mixins/_bemify.scss
@@ -0,0 +1,15 @@
+// Bemify lets us use mixins to define namespacing
+// https://github.com/franzheidl/bemify
+
+$state-prefix: null;
+
+@import '../../../../node_modules/bemify/sass/_bemify';
+
+@mixin state($state) {
+  @at-root {
+    &.#{$state} {
+      @content;
+    }
+  }
+}
+
diff --git a/ui_framework/src/global_styling/mixins/_index.scss b/ui_framework/src/global_styling/mixins/_index.scss
index addb915b9770e..b75760d8db917 100644
--- a/ui_framework/src/global_styling/mixins/_index.scss
+++ b/ui_framework/src/global_styling/mixins/_index.scss
@@ -1,3 +1,4 @@
+@import 'bemify';
 @import 'naming';
 @import 'responsive';
 @import 'typography';