use flexbox in ProductMenu and prevent tag from getting truncated

CHANGELOG.md

@@ -6,6 +6,7 @@
 * Fix a bug in `NumberedCodeSnippet` where if the last line was included in `copyRanges` that code chunk would not be highlighted. [#268](https://github.com/mapbox/dr-ui/pull/268)
 * Add `Topbar` component. [#274](https://github.com/mapbox/dr-ui/pull/274)
 * Update mr-ui and other dependencies for security fixes. [#266](https://github.com/mapbox/dr-ui/pull/266)
+* Prevent `ProductMenu` from truncating `tag`. [#277](https://github.com/mapbox/dr-ui/pull/277)
 
 ## 0.27.0
 

src/components/feedback/__tests__/__snapshots__/feedback.test.js.snap

@@ -87,12 +87,16 @@ exports[`feedback Feedback placement (sends anonymous user information) renders
               }
             }
           >
-            <a
-              className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
-              href="/api/"
+            <div
+              className="flex-parent"
             >
-              API Documentation
-            </a>
+              <a
+                className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
+                href="/api/"
+              >
+                API Documentation
+              </a>
+            </div>
           </div>
         </div>
       </div>

src/components/product-menu/__tests__/__snapshots__/product-menu.test.js.snap

@@ -1,18 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`product-menu Beta product renders as expected 1`] = `
-<a
-  className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
-  href="/vision/"
+<div
+  className="flex-parent"
 >
-  Vision SDK for Android
+  <a
+    className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
+    href="/vision/"
+  >
+    Vision SDK for Android
+  </a>
   <span
-    className="inline-block ml6 relative"
-    style={
-      Object {
-        "top": "-2px",
-      }
-    }
+    className="flex-child mx6"
   >
     <div
       className="inline-block"
@@ -47,45 +46,110 @@ exports[`product-menu Beta product renders as expected 1`] = `
       </div>
     </div>
   </span>
-</a>
+</div>
 `;
 
-exports[`product-menu Custom trigger style - display only renders as expected 1`] = `
+exports[`product-menu Beta product renders as expected 2`] = `
 <div
-  className="bg-gray-dark py6"
+  className="flex-parent"
 >
   <a
-    className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-white color-gray-light-on-hover"
-    href="/api-documentation/"
+    className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
+    href="/vision/"
   >
-    Light on dark
+    Navigation SDK for Android
   </a>
+  <span
+    className="flex-child mx6"
+  >
+    <div
+      className="inline-block"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+    >
+      <div
+        aria-describedby="tooltip-2"
+        className="txt-s txt-bold round px6 inline-block cursor-default border"
+        style={
+          Object {
+            "background": "#f1f3fd",
+            "borderColor": "#0428c8",
+            "color": "#0c248d",
+          }
+        }
+      >
+        Beta
+      </div>
+      <div
+        className="hide-visually"
+        id="tooltip-2"
+        role="tooltip"
+      >
+        <div
+          className="txt-s wmax120"
+        >
+          This feature is in public beta and is subject to changes.
+        </div>
+      </div>
+    </div>
+  </span>
+</div>
+`;
+
+exports[`product-menu Custom trigger style - display only renders as expected 1`] = `
+<div
+  className="bg-gray-dark py6"
+>
+  <div
+    className="flex-parent"
+  >
+    <a
+      className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-white color-gray-light-on-hover"
+      href="/api-documentation/"
+    >
+      Light on dark
+    </a>
+  </div>
 </div>
 `;
 
 exports[`product-menu Fake items, but one matches this test case's location renders as expected 1`] = `
-<a
-  className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
-  href="/api-documentation/"
+<div
+  className="flex-parent"
 >
-  Items in here
-</a>
+  <a
+    className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
+    href="/api-documentation/"
+  >
+    Items in here
+  </a>
+</div>
 `;
 
 exports[`product-menu Mapbox product menu renders as expected 1`] = `
-<a
-  className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
-  href="/api-documentation/"
+<div
+  className="flex-parent"
 >
-  Mapbox product names
-</a>
+  <a
+    className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
+    href="/api-documentation/"
+  >
+    Mapbox product names
+  </a>
+</div>
 `;
 
 exports[`product-menu Product menu with something arbitrary in it renders as expected 1`] = `
-<a
-  className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
-  href="/api-documentation/"
+<div
+  className="flex-parent"
 >
-  Pizza pie
-</a>
+  <a
+    className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
+    href="/api-documentation/"
+  >
+    Pizza pie
+  </a>
+</div>
 `;

src/components/product-menu/__tests__/product-menu-test-cases.js

@@ -1,6 +1,12 @@
 import React from 'react';
 import ProductMenu from '../product-menu';
 
+import Search from '../../search';
+import PageLayout from '../../page-layout/page-layout';
+import NavigationAccordion from '../../navigation-accordion/navigation-accordion';
+import Topbar from '../../topbar/topbar';
+import TabList from '@mapbox/mr-ui/tab-list';
+
 const testCases = {};
 
 testCases.mapboxMenu = {
@@ -53,6 +59,99 @@ testCases.beta = {
   }
 };
 
+testCases.betaLong = {
+  component: ProductMenu,
+  description: 'Beta product',
+  props: {
+    productName: 'Navigation SDK for Android',
+    tag: 'beta',
+    homePage: '/vision/'
+  }
+};
+
+testCases.withLayout = {
+  description: 'with page layout',
+  element: (
+    <div>
+      <Topbar>
+        <div className="grid">
+          <div className="col col--4-mm col--12">
+            <div className="ml24-mm pt12">
+              <ProductMenu
+                productName="Navigation SDK for Android"
+                tag="beta"
+                homePage="/api/"
+              />
+            </div>
+          </div>
+          <div className="col col--6-mm col--12 flex-parent flex-parent--main-mm flex-parent--center-cross align-r mb12 mb0-mm">
+            <TabList
+              items={[
+                { id: 'one', label: 'Label one' },
+                { id: 'two', label: 'Label two' },
+                { id: 'three', label: 'Label three' },
+                { id: 'four', label: 'Label four' }
+              ]}
+            />
+          </div>
+
+          <div className="col col--2-mm col--12 flex-parent flex-parent--end-main-mm flex-parent--center-cross">
+            <div className="w-full mb12 mb0-mm mr36">
+              <Search inputId="search4" />
+            </div>
+          </div>
+        </div>
+      </Topbar>
+      <div className="limiter">
+        <PageLayout
+          sidebarTitle="Section title"
+          sidebarContent={
+            <NavigationAccordion
+              currentPath="page-one"
+              contents={{
+                firstLevelItems: [
+                  {
+                    title: 'Title one',
+                    path: 'page-one'
+                  },
+                  {
+                    title: 'Title two',
+                    path: 'page-two'
+                  }
+                ],
+                secondLevelItems: [
+                  {
+                    title: 'Heading one',
+                    path: 'heading-one'
+                  },
+                  {
+                    title: 'Heading two',
+                    path: 'heading-two'
+                  }
+                ]
+              }}
+              onDropdownChange={() => {}}
+            />
+          }
+          sidebarContentStickyTop={60}
+          sidebarContentStickyTopNarrow={0}
+          sidebarStackedOnNarrowScreens={true}
+        >
+          <div className="prose">
+            <h1>Title</h1>
+            <p>
+              Vestibulum id ligula porta felis euismod semper. Cum sociis
+              natoque penatibus et magnis dis parturient montes, nascetur
+              ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing
+              elit. Vestibulum id ligula porta felis euismod semper.
+            </p>
+          </div>
+        </PageLayout>
+      </div>
+    </div>
+  )
+};
+
 testCases.customTag = {
   component: ProductMenu,
   description: 'Beta product',

src/components/product-menu/__tests__/product-menu.test.js

@@ -86,6 +86,23 @@ describe('product-menu', () => {
       tree = wrapper.toJSON();
     });
 
+    test('renders as expected', () => {
+      expect(tree).toMatchSnapshot();
+    });
+  });
+  describe(testCases.betaLong.description, () => {
+    let testCase;
+    let wrapper;
+    let tree;
+
+    beforeEach(() => {
+      testCase = testCases.betaLong;
+      wrapper = renderer.create(
+        React.createElement(testCase.component, testCase.props)
+      );
+      tree = wrapper.toJSON();
+    });
+
     test('renders as expected', () => {
       expect(tree).toMatchSnapshot();
     });

src/components/product-menu/product-menu.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Tag from '../tag/tag';
+import classnames from 'classnames';
 
 class ProductMenu extends React.PureComponent {
   buildTag = item => {
@@ -17,7 +18,7 @@ class ProductMenu extends React.PureComponent {
         : undefined
     };
     return (
-      <span className="inline-block ml6 relative" style={{ top: '-2px' }}>
+      <span className="flex-child mx6">
         <Tag {...tagProps} />
       </span>
     );
@@ -26,17 +27,21 @@ class ProductMenu extends React.PureComponent {
   render() {
     const { props } = this;
     return (
-      <a
-        href={props.homePage}
-        className={`wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate${
-          props.lightText
-            ? ' color-white color-gray-light-on-hover'
-            : ' color-blue-on-hover'
-        }`}
-      >
-        {props.productName}
+      <div className="flex-parent">
+        <a
+          href={props.homePage}
+          className={classnames(
+            'wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate',
+            {
+              'color-white color-gray-light-on-hover': props.lightText,
+              'color-blue-on-hover': !props.lightText
+            }
+          )}
+        >
+          {props.productName}
+        </a>
         {props.tag && this.buildTag(props)}
-      </a>
+      </div>
     );
   }
 }

src/components/search/__tests__/__snapshots__/search.test.js.snap

@@ -176,12 +176,16 @@ exports[`search Search with \`narrow\` option set renders as expected 2`] = `
               }
             }
           >
-            <a
-              className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
-              href="/api/"
+            <div
+              className="flex-parent"
             >
-              API Documentation
-            </a>
+              <a
+                className="wmax240-ml wmax180-mm txt-fancy txt-l block txt-truncate color-blue-on-hover"
+                href="/api/"
+              >
+                API Documentation
+              </a>
+            </div>
           </div>
         </div>
         <div