[K7] Remove namespacing mixins. (#13135)

* Change state names to include name of component. * Update snapshots.
elastic · Jul 27, 2017 · bd9659a · bd9659a
1 parent 307d007
commit bd9659a
Show file tree

Hide file tree

Showing 26 changed files with 408 additions and 474 deletions.
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
diff --git a/ui_framework/src/components/avatar/_avatar.scss b/ui_framework/src/components/avatar/_avatar.scss
@@ -1,17 +1,17 @@
-@include component('kuiAvatar') {
+.kuiAvatar {
   border-radius: 50%;
   width: $kuiSizeL;
   height: $kuiSizeL;
   display: inline-block;
   @include innerBorder('dark', 50%);
+}
 
-  @include modifier('small') {
-    width: $kuiSize;
-    height: $kuiSize;
-  }
+.kuiAvatar--small {
+  width: $kuiSize;
+  height: $kuiSize;
+}
 
-  @include modifier('large') {
-    width: $kuiSize * 4;
-    height: $kuiSize * 4;
-  }
+.kuiAvatar--large {
+  width: $kuiSize * 4;
+  height: $kuiSize * 4;
 }
diff --git a/ui_framework/src/components/header/__snapshots__/header_logo.test.js.snap b/ui_framework/src/components/header/__snapshots__/header_logo.test.js.snap
@@ -2,10 +2,12 @@
 
 exports[`KuiHeaderLogo is rendered 1`] = `
 <a
+  aria-label="aria-label"
   class="kuiHeaderLogo testClass1 testClass2"
+  data-test-subj="test subject string"
 >
   <svg
-    class="kuiIcon kuiHeaderLogo__icon kuiIcon--medium"
+    class="kuiIcon kuiHeaderLogo__icon"
   >
     <title>
       Go to Kibana home page
@@ -23,7 +25,7 @@ exports[`KuiHeaderLogo renders href 1`] = `
   href="#"
 >
   <svg
-    class="kuiIcon kuiHeaderLogo__icon kuiIcon--medium"
+    class="kuiIcon kuiHeaderLogo__icon"
   >
     <title>
       Go to Kibana home page

diff --git a/ui_framework/src/components/header/_header.scss b/ui_framework/src/components/header/_header.scss
@@ -1,10 +1,11 @@
 // Header. Includes breadcrumbs of nav buttons.
 
-@include component('kuiHeader') {
+.kuiHeader {
   background: $kuiHeaderBackgroundColor;
   border-bottom: $kuiBorderThin;
+}
 
-  @include child('notification') {
+  .kuiHeader__notification {
     display: inline-block;
     border-radius: $kuiBorderRadius;
     background: $kuiHeaderNotificationBackgroundColor;
@@ -15,4 +16,3 @@
     min-width: $kuiSize;
     vertical-align: middle;
   }
-}
diff --git a/ui_framework/src/components/header/_header_alert.scss b/ui_framework/src/components/header/_header_alert.scss
@@ -1,4 +1,4 @@
-@include component('kuiHeaderAlert') {
+.kuiHeaderAlert {
   text-align: left;
   min-width: 300px;
   position: relative;
@@ -7,12 +7,13 @@
   border-top: $kuiBorderThin;
 
   &:hover {
-    @include child('dismiss') {
+    .kuiHeaderAlert__dismiss {
       opacity: 1;
     }
   }
+}
 
-  @include child('dismiss') {
+  .kuiHeaderAlert__dismiss {
     opacity: 0;
     position: absolute;
     right: $kuiSize;
@@ -21,18 +22,18 @@
     cursor: pointer;
   }
 
-  @include child('title') {
+  .kuiHeaderAlert__title {
     font-weight: $kuiFontWeightMedium;
     @include kuiFontSizeM;
     padding-right: $kuiSizeL; // Accounts for the dismiss button.
   }
 
-  @include child('text') {
+  .kuiHeaderAlert__text {
     @include kuiFontSizeXS;
     margin-bottom: $kuiSizeS;
   }
 
-  @include child('action') {
+  .kuiHeaderAlert__action {
     @include kuiFontSizeXS;
     color: $kuiLinkColor;
 
@@ -41,9 +42,8 @@
     }
   }
 
-  @include child('date') {
+  .kuiHeaderAlert__date {
     @include kuiFontSizeXS;
     color: $kuiColorDarkShade;
     text-align: right;
   }
-}
diff --git a/ui_framework/src/components/header/_header_logo.scss b/ui_framework/src/components/header/_header_logo.scss
@@ -1,15 +1,15 @@
-@include component('kuiHeaderLogo') {
+.kuiHeaderLogo {
   @include kuiLink;
 
   position: relative;
   height: $kuiHeaderChildSize;
   padding: $kuiSize $kuiSizeXL;
   display: inline-block;
   vertical-align: middle;
+}
 
-  @include child('icon') {
+  .kuiHeaderLogo__icon {
     height: $kuiSizeXL;
     width: $kuiSizeL;
     opacity: 1;
   }
-}
diff --git a/ui_framework/src/components/header/_header_profile.scss b/ui_framework/src/components/header/_header_profile.scss
@@ -1,4 +1,4 @@
-@include component('kuiHeaderProfile') {
+.kuiHeaderProfile {
   text-align: left;
   padding-bottom: $kuiSize;
 }
diff --git a/...ork/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumb.test.js.snap b/...ork/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumb.test.js.snap
@@ -13,7 +13,9 @@ exports[`KuiHeaderBreadcrumb href is rendered 1`] = `
 
 exports[`KuiHeaderBreadcrumb is rendered 1`] = `
 <a
+  aria-label="aria-label"
   class="kuiHeaderBreadcrumb testClass1 testClass2"
+  data-test-subj="test subject string"
 >
   <div
     class="kuiHeaderBreadcrumb__text"
@@ -25,7 +27,7 @@ exports[`KuiHeaderBreadcrumb is rendered 1`] = `
 
 exports[`KuiHeaderBreadcrumb isActive is rendered 1`] = `
 <a
-  class="kuiHeaderBreadcrumb isActive"
+  class="kuiHeaderBreadcrumb kuiHeaderBreadcrumb-isActive"
 >
   <div
     class="kuiHeaderBreadcrumb__text"

diff --git a/ui_framework/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss b/ui_framework/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss
@@ -1,6 +1,6 @@
 // Breadcrumb navigation included in the header.
 
-@include component('kuiHeaderBreadcrumb') {
+.kuiHeaderBreadcrumb {
   display: inline-block;
   height: $kuiHeaderChildSize;
   line-height: $kuiHeaderChildSize;
@@ -24,26 +24,26 @@
     @include kuiLink;
   }
 
-  @include state('isActive') {
+  &.kuiHeaderBreadcrumb-isActive {
     color: $kuiColorMediumShade;
   }
+}
 
-  @include modifier('collapsed') {
-    color: $kuiColorLightShade;
-  }
-
-  @include child('text') {
+  .kuiHeaderBreadcrumb__text {
     white-space: nowrap;
     max-width: 150px;
     display: block;
     text-overflow: ellipsis;
     overflow: hidden;
   }
+
+.kuiHeaderBreadcrumb--collapsed {
+  color: $kuiColorLightShade;
 }
 
 // Laptop
 @include screenMedium {
-  @include component('kuiHeaderBreadcrumb') {
+  .kuiHeaderBreadcrumb {
     display: none;
 
     // Only show last 4 breadcrumbs
@@ -55,7 +55,7 @@
 
 // Tablets
 @include screenSmall {
-  @include component('kuiHeaderBreadcrumb') {
+  .kuiHeaderBreadcrumb {
     display: none;
 
     // Only show last 2 breadcrumbs
@@ -67,7 +67,7 @@
 
 // Mobile
 @include screenXSmall {
-  @include component('kuiHeaderBreadcrumb') {
+  .kuiHeaderBreadcrumb {
     display: none;
   }
 }
diff --git a/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb.js b/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb.js
@@ -11,7 +11,7 @@ export const KuiHeaderBreadcrumb = ({
   ...rest,
 }) => {
   const classes = classNames('kuiHeaderBreadcrumb', className, {
-    'isActive': isActive,
+    'kuiHeaderBreadcrumb-isActive': isActive,
   });
 
   return (

diff --git a/ui_framework/src/components/header/header_section/_header_section_item.scss b/ui_framework/src/components/header/header_section/_header_section_item.scss
@@ -1,6 +1,6 @@
 // Header items are the small icon links that pop up menus.
 
-@include component('kuiHeaderSectionItem') {
+.kuiHeaderSectionItem {
   position: relative;
 
   &:hover {
@@ -16,15 +16,9 @@
     background: $kuiBorderColor;
     left: 0;
   }
+}
 
-  @include modifier('borderRight') {
-    &:after {
-      left: auto;
-      right: 0;
-    }
-  }
-
-  @include child('button') {
+  .kuiHeaderSectionItem__button {
     height: $kuiHeaderChildSize;
     min-width: $kuiHeaderChildSize;
     text-align: center;
@@ -33,5 +27,10 @@
       background: $kuiFocusBackgroundColor;
     }
   }
-}
 
+.kuiHeaderSectionItem--borderRight {
+  &:after {
+    left: auto;
+    right: 0;
+  }
+}
diff --git a/ui_framework/src/components/header/header_section/_header_section_item_button.scss b/ui_framework/src/components/header/header_section/_header_section_item_button.scss