Replace use of utility classes in components with component classes. (#…

…13138)

ui_framework/dist/ui_framework.css

@@ -310,6 +310,10 @@ table {
   height: 64px; }
 
 .kuiHeader {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   background: #FFF;
   border-bottom: 1px solid #D9D9D9; }
 
@@ -398,6 +402,12 @@ table {
   width: 24px;
   opacity: 1; }
 
+.kuiHeaderBreadcrumbs {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex; }
+
 .kuiHeaderBreadcrumb {
   display: inline-block;
   height: 64px;
@@ -449,6 +459,23 @@ table {
   .kuiHeaderBreadcrumb {
     display: none; } }
 
+.kuiHeaderSection {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex; }
+
+.kuiHeaderSection--left {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1; }
+
+.kuiHeaderSection--right {
+  -webkit-flex-shrink: 1;
+      -ms-flex-negative: 1;
+          flex-shrink: 1; }
+
 .kuiHeaderSectionItem {
   position: relative; }
   .kuiHeaderSectionItem:hover {
@@ -589,6 +616,7 @@ table {
     margin-top: 8px; }
 
 .kuiPopover__body {
+  box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
   background: #FFF;
   position: absolute;
   min-width: 256px;

ui_framework/src/components/header/__snapshots__/header.test.js.snap

@@ -3,7 +3,7 @@
 exports[`KuiHeader is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="kuiHeader kui--flex testClass1 testClass2"
+  class="kuiHeader testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;

ui_framework/src/components/header/_header.scss

@@ -1,6 +1,7 @@
 // Header. Includes breadcrumbs of nav buttons.
 
 .kuiHeader {
+  display: flex;
   background: $kuiHeaderBackgroundColor;
   border-bottom: $kuiBorderThin;
 }

ui_framework/src/components/header/header.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 export const KuiHeader = ({ children, className, ...rest }) => {
-  const classes = classNames('kuiHeader kui--flex', className);
+  const classes = classNames('kuiHeader', className);
 
   return (
     <div

ui_framework/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.js.snap

@@ -3,7 +3,7 @@
 exports[`KuiHeaderBreadcrumbs is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="kui--flex testClass1 testClass2"
+  class="kuiHeaderBreadcrumbs testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;

ui_framework/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss

@@ -1,5 +1,9 @@
 // Breadcrumb navigation included in the header.
 
+.kuiHeaderBreadcrumbs {
+  display: flex;
+}
+
 .kuiHeaderBreadcrumb {
   display: inline-block;
   height: $kuiHeaderChildSize;

ui_framework/src/components/header/header_breadcrumbs/header_breadcrumbs.js

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 export const KuiHeaderBreadcrumbs = ({ children, className, ...rest }) => {
-  const classes = classNames('kui--flex', className);
+  const classes = classNames('kuiHeaderBreadcrumbs', className);
 
   return (
     <div

ui_framework/src/components/header/header_section/__snapshots__/header_section.test.js.snap

@@ -3,19 +3,19 @@
 exports[`KuiHeaderSection is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="kuiHeaderSection kui--flexGrow1 kui--flex testClass1 testClass2"
+  class="kuiHeaderSection kuiHeaderSection--left testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`KuiHeaderSection side defaults to left 1`] = `
 <div
-  class="kuiHeaderSection kui--flexGrow1 kui--flex"
+  class="kuiHeaderSection kuiHeaderSection--left"
 />
 `;
 
 exports[`KuiHeaderSection side renders right 1`] = `
 <div
-  class="kuiHeaderSection kui--flexShrink1 kui--flex"
+  class="kuiHeaderSection kuiHeaderSection--right"
 />
 `;

ui_framework/src/components/header/header_section/_header_section.scss

@@ -0,0 +1,11 @@
+.kuiHeaderSection {
+  display: flex;
+}
+
+.kuiHeaderSection--left {
+  flex-grow: 1;
+}
+
+.kuiHeaderSection--right {
+  flex-shrink: 1;
+}

ui_framework/src/components/header/header_section/_index.scss

@@ -1 +1,2 @@
+@import 'header_section';
 @import 'header_section_item';

ui_framework/src/components/header/header_section/header_section.js

@@ -4,8 +4,8 @@ import React, {
 import classNames from 'classnames';
 
 const sideToClassNameMap = {
-  left: 'kui--flexGrow1 kui--flex',
-  right: 'kui--flexShrink1 kui--flex',
+  left: 'kuiHeaderSection--left',
+  right: 'kuiHeaderSection--right',
 };
 
 const SIDES = Object.keys(sideToClassNameMap);

ui_framework/src/components/popover/__snapshots__/popover.test.js.snap

@@ -6,7 +6,7 @@ exports[`KuiPopover anchorPosition defaults to center 1`] = `
 >
   <button />
   <div
-    class="kuiPopover__body kui--bottomShadow"
+    class="kuiPopover__body"
   />
 </div>
 `;
@@ -17,7 +17,7 @@ exports[`KuiPopover anchorPosition left is rendered 1`] = `
 >
   <button />
   <div
-    class="kuiPopover__body kui--bottomShadow"
+    class="kuiPopover__body"
   />
 </div>
 `;
@@ -28,7 +28,7 @@ exports[`KuiPopover anchorPosition right is rendered 1`] = `
 >
   <button />
   <div
-    class="kuiPopover__body kui--bottomShadow"
+    class="kuiPopover__body"
   />
 </div>
 `;
@@ -39,7 +39,7 @@ exports[`KuiPopover children is rendered 1`] = `
 >
   <button />
   <div
-    class="kuiPopover__body kui--bottomShadow"
+    class="kuiPopover__body"
   >
     Children
   </div>
@@ -54,7 +54,7 @@ exports[`KuiPopover is rendered 1`] = `
 >
   <button />
   <div
-    class="kuiPopover__body kui--bottomShadow"
+    class="kuiPopover__body"
   />
 </div>
 `;
@@ -65,18 +65,18 @@ exports[`KuiPopover isOpen defaults to false 1`] = `
 >
   <button />
   <div
-    class="kuiPopover__body kui--bottomShadow"
+    class="kuiPopover__body"
   />
 </div>
 `;
 
-exports[`KuiPopover isOpen true is rendered 1`] = `
+exports[`KuiPopover isOpen renders true 1`] = `
 <div
   class="kuiPopover kuiPopover-isOpen"
 >
   <button />
   <div
-    class="kuiPopover__body kui--bottomShadow"
+    class="kuiPopover__body"
   />
 </div>
 `;

ui_framework/src/components/popover/_popover.scss

@@ -18,6 +18,8 @@
 
   // Animation happens on the body.
   .kuiPopover__body {
+    @include kuiBottomShadow;
+
     background: $kuiColorEmptyShade;
     position: absolute;
     min-width: $kuiSize * 16; // Can expand further, but this size is good for our menus.

ui_framework/src/components/popover/popover.js

@@ -66,7 +66,7 @@ export class KuiPopover extends Component {
       },
     );
 
-    const bodyClasses = classNames('kuiPopover__body kui--bottomShadow', bodyClassName);
+    const bodyClasses = classNames('kuiPopover__body', bodyClassName);
 
     const body = (
       <div className={bodyClasses}>

ui_framework/src/components/popover/popover.test.js

@@ -9,6 +9,7 @@ describe('KuiPopover', () => {
     const component = render(
       <KuiPopover
         button={<button />}
+        closePopover={() => {}}
         { ...requiredProps }
       />
     );
@@ -21,6 +22,7 @@ describe('KuiPopover', () => {
     const component = render(
       <KuiPopover
         button={<button />}
+        closePopover={() => {}}
       >
         Children
       </KuiPopover>
@@ -35,6 +37,7 @@ describe('KuiPopover', () => {
       const component = render(
         <KuiPopover
           button={<button />}
+          closePopover={() => {}}
         />
       );
 
@@ -46,6 +49,7 @@ describe('KuiPopover', () => {
       const component = render(
         <KuiPopover
           button={<button />}
+          closePopover={() => {}}
           anchorPosition="left"
         />
       );
@@ -58,6 +62,7 @@ describe('KuiPopover', () => {
       const component = render(
         <KuiPopover
           button={<button />}
+          closePopover={() => {}}
           anchorPosition="right"
         />
       );
@@ -72,17 +77,19 @@ describe('KuiPopover', () => {
       const component = render(
         <KuiPopover
           button={<button />}
+          closePopover={() => {}}
         />
       );
 
       expect(component)
         .toMatchSnapshot();
     });
 
-    test('true is rendered', () => {
+    test('renders true', () => {
       const component = render(
         <KuiPopover
           button={<button />}
+          closePopover={() => {}}
           isOpen={true}
         />
       );

ui_framework/src/global_styling/mixins/_index.scss

@@ -1,5 +1,6 @@
 @import 'naming';
 @import 'responsive';
 @import 'link';
+@import 'shadow';
 @import 'size';
 @import 'helpers';

ui_framework/src/global_styling/mixins/_shadow.scss

@@ -0,0 +1,3 @@
+@mixin kuiBottomShadow {
+  box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
+}

ui_framework/src/global_styling/utilities/_shadow.scss

@@ -1,3 +1,3 @@
 .kui--bottomShadow {
-  box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1);
+  @include kuiBottomShadow;
 }