Repository: mapbox/mr-ui
Pull request #28 (2018-08-03 22:01:26)

Remove Mbx prefix
I've turned against the `Mbx` prefix. I don't think such a stark difference between old and new components is necessary. Instead, we can adjust and alter both however Nature demands. Adjustments to older components might just involve making sure it is easy to get the styling that we typically want (a la https://github.com/mapbox/mr-ui/issues/26).


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b62a1d0..7ad4d2b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,9 +2,9 @@
 
 ## HEAD
 
-- Add **MbxButton** component.
-- Add **MbxIconText** component.
-- Add **MbxUnderlineTabs** component.
+- Add **Button** component.
+- Add **IconText** component.
+- Add **UnderlineTabs** component.
 - **PopoverTrigger**
   - If the trigger responds to focus but not click, and you focus the trigger *first* and *then* click, that click *closes* the popover instead of leaving it open even after you move the mouse away.
 
diff --git a/src/components/mbx-button/mbx-button.js b/src/components/button/button.js
similarity index 96%
rename from src/components/mbx-button/mbx-button.js
rename to src/components/button/button.js
index 4a38a43..b5a56f5 100644
--- a/src/components/mbx-button/mbx-button.js
+++ b/src/components/button/button.js
@@ -30,14 +30,14 @@ const propNames = [
  * render a different element altogether.)
  *
  * If you'd like to put an icon before or after the text of your button,
- * use [MbxIconText](#mbxicontext) for the content.
+ * use [IconText](#mbxicontext) for the content.
  *
  * Any props you provide other than those documented here are passed through
  * directly to the element itself. This can be useful if you want to disable
  * the button, assign an ID for testing, add an ARIA attribute, toss in some
  * custom style properties, etc.
  */
-class MbxButton extends React.Component {
+class Button extends React.Component {
   render() {
     const props = applyVariant(this.props);
 
@@ -151,11 +151,11 @@ function applyVariant(props) {
   }
 }
 
-MbxButton.propTypes = {
+Button.propTypes = {
   /**
    * The button's content. A string is recommended, but you can put an element
    * in here if you think that's right. If you do, it should be inline-level,
-   * using `<span>`s instead of `<div>`s. ([MbxIconText](#mbxicontext) is
+   * using `<span>`s instead of `<div>`s. ([IconText](#mbxicontext) is
    * inline-level.)
    */
   children: PropTypes.node.isRequired,
@@ -245,10 +245,10 @@ MbxButton.propTypes = {
   component: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 
-MbxButton.defaultProps = {
+Button.defaultProps = {
   variant: 'primary',
   block: false,
   transformClasses: x => x
 };
 
-export default MbxButton;
+export default Button;
diff --git a/src/components/mbx-button/examples/mbx-button-a.js b/src/components/button/examples/button-a.js
similarity index 53%
rename from src/components/mbx-button/examples/mbx-button-a.js
rename to src/components/button/examples/button-a.js
index ad1dbd9..05b672e 100644
--- a/src/components/mbx-button/examples/mbx-button-a.js
+++ b/src/components/button/examples/button-a.js
@@ -2,39 +2,39 @@
 All the standard variants.
 */
 import React from 'react';
-import MbxButton from '../mbx-button';
+import Button from '../button';
 
 export default class Example extends React.Component {
   render() {
     return (
       <div>
         <div className="my6">
-          <MbxButton onClick={noop}>Primary</MbxButton>
+          <Button onClick={noop}>Primary</Button>
         </div>
         <div className="my6">
-          <MbxButton variant="secondary" onClick={noop}>
+          <Button variant="secondary" onClick={noop}>
             Secondary
-          </MbxButton>
+          </Button>
         </div>
         <div className="my6">
-          <MbxButton variant="discouraging" onClick={noop}>
+          <Button variant="discouraging" onClick={noop}>
             Discouraging
-          </MbxButton>
+          </Button>
         </div>
         <div className="my6">
-          <MbxButton variant="destructive" onClick={noop}>
+          <Button variant="destructive" onClick={noop}>
             Destructive
-          </MbxButton>
+          </Button>
         </div>
         <div className="my6">
-          <MbxButton variant="appPrimary" onClick={noop}>
+          <Button variant="appPrimary" onClick={noop}>
             AppPrimary
-          </MbxButton>
+          </Button>
         </div>
         <div className="my6">
-          <MbxButton variant="appSecondary" onClick={noop}>
+          <Button variant="appSecondary" onClick={noop}>
             AppSecondary
-          </MbxButton>
+          </Button>
         </div>
       </div>
     );
diff --git a/src/components/button/examples/button-b.js b/src/components/button/examples/button-b.js
new file mode 100644
index 0000000..337bea2
--- /dev/null
+++ b/src/components/button/examples/button-b.js
@@ -0,0 +1,16 @@
+/*
+A slightly wider, outlined button with an alternate color, using [IconText](#mbxicontext) to prefix the text with an icon.
+*/
+import React from 'react';
+import Button from '../button';
+import IconText from '../../icon-text';
+
+export default class Example extends React.Component {
+  render() {
+    return (
+      <Button onClick={() => {}} width="large" outline={true} color="purple">
+        <IconText iconBefore="floppy">Save your map</IconText>
+      </Button>
+    );
+  }
+}
diff --git a/src/components/mbx-button/examples/mbx-button-c.js b/src/components/button/examples/button-c.js
similarity index 80%
rename from src/components/mbx-button/examples/mbx-button-c.js
rename to src/components/button/examples/button-c.js
index 8461454..ea822dd 100644
--- a/src/components/mbx-button/examples/mbx-button-c.js
+++ b/src/components/button/examples/button-c.js
@@ -6,7 +6,7 @@ The additional prop `data-test` is passed on directly to the `<a>`.
 Also, `transformClasses` is used to add the drop-shadow class.
 */
 import React from 'react';
-import MbxButton from '../mbx-button';
+import Button from '../button';
 
 export default class Example extends React.Component {
   render() {
@@ -14,15 +14,15 @@ export default class Example extends React.Component {
       return `${variantClasses} shadow-darken25`;
     };
     return (
-      <div id="mbx-button-c">
-        <MbxButton
-          href="#mbx-button-c"
+      <div id="button-c">
+        <Button
+          href="#button-c"
           size="medium"
           data-test="link-to-c"
           transformClasses={btnClasses}
         >
           You are here
-        </MbxButton>
+        </Button>
       </div>
     );
   }
diff --git a/src/components/mbx-button/examples/mbx-button-d.js b/src/components/button/examples/button-d.js
similarity index 74%
rename from src/components/mbx-button/examples/mbx-button-d.js
rename to src/components/button/examples/button-d.js
index ce06896..26ea970 100644
--- a/src/components/mbx-button/examples/mbx-button-d.js
+++ b/src/components/button/examples/button-d.js
@@ -5,7 +5,7 @@ wrapper container with an Assembly width class.
 Sometimes, for example, you might want a column or row of equal-width buttons.
 */
 import React from 'react';
-import MbxButton from '../mbx-button';
+import Button from '../button';
 
 export default class Example extends React.Component {
   render() {
@@ -13,51 +13,51 @@ export default class Example extends React.Component {
       <div>
         <div className="mb24 flex-parent">
           <div className="flex-child w120 mr12">
-            <MbxButton size="medium" width="full" onClick={noop}>
+            <Button size="medium" width="full" onClick={noop}>
               Door
-            </MbxButton>
+            </Button>
           </div>
           <div className="flex-child w120 mr12">
-            <MbxButton size="medium" width="full" onClick={noop}>
+            <Button size="medium" width="full" onClick={noop}>
               Dog
-            </MbxButton>
+            </Button>
           </div>
           <div className="flex-child w120 mr12">
-            <MbxButton size="medium" width="full" onClick={noop}>
+            <Button size="medium" width="full" onClick={noop}>
               Dash
-            </MbxButton>
+            </Button>
           </div>
         </div>
         <div className="w60">
           <div className="my3">
-            <MbxButton
+            <Button
               variant="secondary"
               size="medium"
               width="full"
               onClick={noop}
             >
               A
-            </MbxButton>
+            </Button>
           </div>
           <div className="my3">
-            <MbxButton
+            <Button
               variant="secondary"
               size="medium"
               width="full"
               onClick={noop}
             >
               B
-            </MbxButton>
+            </Button>
           </div>
           <div className="my3">
-            <MbxButton
+            <Button
               variant="secondary"
               size="medium"
               width="full"
               onClick={noop}
             >
               C
-            </MbxButton>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/src/components/button/index.js b/src/components/button/index.js
new file mode 100644
index 0000000..ec63ae7
--- /dev/null
+++ b/src/components/button/index.js
@@ -0,0 +1,3 @@
+import main from './button';
+
+export default main;
diff --git a/src/components/mbx-icon-text/examples/mbx-icon-text-a.js b/src/components/icon-text/examples/icon-text-a.js
similarity index 71%
rename from src/components/mbx-icon-text/examples/mbx-icon-text-a.js
rename to src/components/icon-text/examples/icon-text-a.js
index 0c44735..13d3e46 100644
--- a/src/components/mbx-icon-text/examples/mbx-icon-text-a.js
+++ b/src/components/icon-text/examples/icon-text-a.js
@@ -2,13 +2,13 @@
 The standard button-without-a-background look. Also useful for menu items.
 */
 import React from 'react';
-import MbxIconText from '../mbx-icon-text';
+import IconText from '../icon-text';
 
 export default class Example extends React.Component {
   render() {
     return (
       <button type="button" className="link txt-bold txt-s block">
-        <MbxIconText iconBefore="duplicate">Duplicate</MbxIconText>
+        <IconText iconBefore="duplicate">Duplicate</IconText>
       </button>
     );
   }
diff --git a/src/components/mbx-icon-text/examples/mbx-icon-text-b.js b/src/components/icon-text/examples/icon-text-b.js
similarity index 65%
rename from src/components/mbx-icon-text/examples/mbx-icon-text-b.js
rename to src/components/icon-text/examples/icon-text-b.js
index 08ad0ec..ad4e7b7 100644
--- a/src/components/mbx-icon-text/examples/mbx-icon-text-b.js
+++ b/src/components/icon-text/examples/icon-text-b.js
@@ -2,13 +2,13 @@
 Go see the next thing!
 */
 import React from 'react';
-import MbxIconText from '../mbx-icon-text';
+import IconText from '../icon-text';
 
 export default class Example extends React.Component {
   render() {
     return (
       <button type="button" className="link link-purple">
-        <MbxIconText iconAfter="chevron-right">Take me there</MbxIconText>
+        <IconText iconAfter="chevron-right">Take me there</IconText>
       </button>
     );
   }
diff --git a/src/components/mbx-icon-text/mbx-icon-text.js b/src/components/icon-text/icon-text.js
similarity index 93%
rename from src/components/mbx-icon-text/mbx-icon-text.js
rename to src/components/icon-text/icon-text.js
index ae66add..4768b46 100644
--- a/src/components/mbx-icon-text/mbx-icon-text.js
+++ b/src/components/icon-text/icon-text.js
@@ -7,7 +7,7 @@ import Icon from '../icon';
  *
  * The icon and text will be vertically centered, with standard spacing between.
  */
-class MbxIconText extends React.Component {
+class IconText extends React.Component {
   renderIcon(icon) {
     if (typeof icon === 'string') {
       return <Icon name={icon} />;
@@ -41,7 +41,7 @@ class MbxIconText extends React.Component {
   }
 }
 
-MbxIconText.propTypes = {
+IconText.propTypes = {
   /**
    * The text. A string is recommended, but you can put an element in here if
    * you think it's right. If you do, it should be inline-level,
@@ -64,8 +64,8 @@ MbxIconText.propTypes = {
   iconAfter: PropTypes.oneOfType([PropTypes.node, PropTypes.string])
 };
 
-MbxIconText.defaultProps = {
+IconText.defaultProps = {
   spacing: 'small'
 };
 
-export default MbxIconText;
+export default IconText;
diff --git a/src/components/icon-text/index.js b/src/components/icon-text/index.js
new file mode 100644
index 0000000..84cde85
--- /dev/null
+++ b/src/components/icon-text/index.js
@@ -0,0 +1,3 @@
+import main from './icon-text';
+
+export default main;
diff --git a/src/components/mbx-button/examples/mbx-button-b.js b/src/components/mbx-button/examples/mbx-button-b.js
deleted file mode 100644
index c81944b..0000000
--- a/src/components/mbx-button/examples/mbx-button-b.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
-A slightly wider, outlined button with an alternate color, using [MbxIconText](#mbxicontext) to prefix the text with an icon.
-*/
-import React from 'react';
-import MbxButton from '../mbx-button';
-import MbxIconText from '../../mbx-icon-text';
-
-export default class Example extends React.Component {
-  render() {
-    return (
-      <MbxButton onClick={() => {}} width="large" outline={true} color="purple">
-        <MbxIconText iconBefore="floppy">Save your map</MbxIconText>
-      </MbxButton>
-    );
-  }
-}
diff --git a/src/components/mbx-button/index.js b/src/components/mbx-button/index.js
deleted file mode 100644
index f5a42cc..0000000
--- a/src/components/mbx-button/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import main from './mbx-button';
-
-export default main;
diff --git a/src/components/mbx-icon-text/index.js b/src/components/mbx-icon-text/index.js
deleted file mode 100644
index 7fef300..0000000
--- a/src/components/mbx-icon-text/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import main from './mbx-icon-text';
-
-export default main;
diff --git a/src/components/mbx-underline-tabs/index.js b/src/components/mbx-underline-tabs/index.js
deleted file mode 100644
index b96b53a..0000000
--- a/src/components/mbx-underline-tabs/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import main from './mbx-underline-tabs';
-
-export default main;
diff --git a/src/components/mbx-underline-tabs/examples/mbx-underline-tabs-a.js b/src/components/underline-tabs/examples/underline-tabs-a.js
similarity index 77%
rename from src/components/mbx-underline-tabs/examples/mbx-underline-tabs-a.js
rename to src/components/underline-tabs/examples/underline-tabs-a.js
index c6536ac..416da20 100644
--- a/src/components/mbx-underline-tabs/examples/mbx-underline-tabs-a.js
+++ b/src/components/underline-tabs/examples/underline-tabs-a.js
@@ -2,7 +2,7 @@
 Standard usage.
 */
 import React from 'react';
-import MbxUnderlineTabs from '../mbx-underline-tabs';
+import UnderlineTabs from '../underline-tabs';
 
 const items = [
   {
@@ -20,7 +20,7 @@ const items = [
   {
     label: 'Link here',
     id: 'link',
-    href: '#mbx-underline-tabs-a'
+    href: '#underline-tabs-a'
   }
 ];
 
@@ -35,8 +35,8 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <div id="mbx-underline-tabs-a" className="border-b border--gray-light">
-        <MbxUnderlineTabs
+      <div id="underline-tabs-a" className="border-b border--gray-light">
+        <UnderlineTabs
           items={items}
           active={this.state.active}
           onChange={this.changeTab}
diff --git a/src/components/mbx-underline-tabs/examples/mbx-underline-tabs-b.js b/src/components/underline-tabs/examples/underline-tabs-b.js
similarity index 92%
rename from src/components/mbx-underline-tabs/examples/mbx-underline-tabs-b.js
rename to src/components/underline-tabs/examples/underline-tabs-b.js
index f336f66..bd1d2ea 100644
--- a/src/components/mbx-underline-tabs/examples/mbx-underline-tabs-b.js
+++ b/src/components/underline-tabs/examples/underline-tabs-b.js
@@ -7,7 +7,7 @@ Also, the container's layout classes illustrate one way that you can
 right-align the tabs.
 */
 import React from 'react';
-import MbxUnderlineTabs from '../mbx-underline-tabs';
+import UnderlineTabs from '../underline-tabs';
 
 const items = [
   {
@@ -35,7 +35,7 @@ export default class Example extends React.Component {
       <div className="px12 py12 bg-gray-faint">
         <div className="border-b border--gray-light w300 flex-parent flex-parent--end-main">
           <div className="flex-child">
-            <MbxUnderlineTabs
+            <UnderlineTabs
               items={items}
               active={this.state.active}
               onChange={this.changeTab}
diff --git a/src/components/mbx-underline-tabs/examples/mbx-underline-tabs-c.js b/src/components/underline-tabs/examples/underline-tabs-c.js
similarity index 90%
rename from src/components/mbx-underline-tabs/examples/mbx-underline-tabs-c.js
rename to src/components/underline-tabs/examples/underline-tabs-c.js
index 58e191d..77488c3 100644
--- a/src/components/mbx-underline-tabs/examples/mbx-underline-tabs-c.js
+++ b/src/components/underline-tabs/examples/underline-tabs-c.js
@@ -2,7 +2,7 @@
 Large tabs with custom colors, a disabled item, and a container without a bottom border.
 */
 import React from 'react';
-import MbxUnderlineTabs from '../mbx-underline-tabs';
+import UnderlineTabs from '../underline-tabs';
 
 const items = [
   {
@@ -31,7 +31,7 @@ export default class Example extends React.Component {
 
   render() {
     return (
-      <MbxUnderlineTabs
+      <UnderlineTabs
         items={items}
         active={this.state.active}
         onChange={this.changeTab}
diff --git a/src/components/underline-tabs/index.js b/src/components/underline-tabs/index.js
new file mode 100644
index 0000000..7074d22
--- /dev/null
+++ b/src/components/underline-tabs/index.js
@@ -0,0 +1,3 @@
+import main from './underline-tabs';
+
+export default main;
diff --git a/src/components/mbx-underline-tabs/mbx-underline-tab-item.js b/src/components/underline-tabs/underline-tab-item.js
similarity index 93%
rename from src/components/mbx-underline-tabs/mbx-underline-tab-item.js
rename to src/components/underline-tabs/underline-tab-item.js
index 35b2958..af09955 100644
--- a/src/components/mbx-underline-tabs/mbx-underline-tab-item.js
+++ b/src/components/underline-tabs/underline-tab-item.js
@@ -5,10 +5,10 @@ import {
   SIZE_SMALL,
   SIZE_MEDIUM,
   SIZE_LARGE
-} from './mbx-underline-tabs-constants';
+} from './underline-tabs-constants';
 import capitalize from '../utils/capitalize';
 
-class MbxUnderlineTabItem extends React.PureComponent {
+class UnderlineTabItem extends React.PureComponent {
   constructor(props) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
@@ -93,7 +93,7 @@ class MbxUnderlineTabItem extends React.PureComponent {
   }
 }
 
-MbxUnderlineTabItem.propTypes = {
+UnderlineTabItem.propTypes = {
   id: PropTypes.string.isRequired,
   inactiveColor: PropTypes.string.isRequired,
   activeColor: PropTypes.string.isRequired,
@@ -107,10 +107,10 @@ MbxUnderlineTabItem.propTypes = {
   disabled: PropTypes.bool
 };
 
-MbxUnderlineTabItem.defaultProps = {
+UnderlineTabItem.defaultProps = {
   size: SIZE_MEDIUM,
   active: false,
   disabled: false
 };
 
-export default MbxUnderlineTabItem;
+export default UnderlineTabItem;
diff --git a/src/components/mbx-underline-tabs/mbx-underline-tabs-constants.js b/src/components/underline-tabs/underline-tabs-constants.js
similarity index 100%
rename from src/components/mbx-underline-tabs/mbx-underline-tabs-constants.js
rename to src/components/underline-tabs/underline-tabs-constants.js
diff --git a/src/components/mbx-underline-tabs/mbx-underline-tabs.js b/src/components/underline-tabs/underline-tabs.js
similarity index 90%
rename from src/components/mbx-underline-tabs/mbx-underline-tabs.js
rename to src/components/underline-tabs/underline-tabs.js
index 2e3ad12..85760cf 100644
--- a/src/components/mbx-underline-tabs/mbx-underline-tabs.js
+++ b/src/components/underline-tabs/underline-tabs.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import MbxUnderlineTabItem from './mbx-underline-tab-item';
-import { SIZE_SMALL, SIZE_MEDIUM } from './mbx-underline-tabs-constants';
+import UnderlineTabItem from './underline-tab-item';
+import { SIZE_SMALL, SIZE_MEDIUM } from './underline-tabs-constants';
 
 /**
  * For navigation between pages or sections.
@@ -10,7 +10,7 @@ import { SIZE_SMALL, SIZE_MEDIUM } from './mbx-underline-tabs-constants';
  * Items will be `<button>`s or `<a>`s, depending on whether they
  * have `href` props or not.
  */
-class MbxUnderlineTabs extends React.Component {
+class UnderlineTabs extends React.Component {
   render() {
     const { props } = this;
 
@@ -31,7 +31,7 @@ class MbxUnderlineTabs extends React.Component {
       });
       return (
         <li key={item.id} className={layoutClasses}>
-          <MbxUnderlineTabItem
+          <UnderlineTabItem
             active={props.active === item.id}
             onClick={props.onChange}
             size={props.size}
@@ -49,7 +49,7 @@ class MbxUnderlineTabs extends React.Component {
   }
 }
 
-MbxUnderlineTabs.propTypes = {
+UnderlineTabs.propTypes = {
   /**
    * Each item is an object with the following properties:
    * - `id` (required): A string ID.
@@ -99,7 +99,7 @@ MbxUnderlineTabs.propTypes = {
   bold: PropTypes.bool
 };
 
-MbxUnderlineTabs.defaultProps = {
+UnderlineTabs.defaultProps = {
   size: 'medium',
   inactiveColor: 'gray',
   activeColor: 'gray-dark',
@@ -108,4 +108,4 @@ MbxUnderlineTabs.defaultProps = {
   bold: true
 };
 
-export default MbxUnderlineTabs;
+export default UnderlineTabs;


Test patch:
diff --git a/src/components/mbx-button/__tests__/__snapshots__/mbx-button.test.js.snap b/src/components/button/__tests__/__snapshots__/button.test.js.snap
similarity index 98%
rename from src/components/mbx-button/__tests__/__snapshots__/mbx-button.test.js.snap
rename to src/components/button/__tests__/__snapshots__/button.test.js.snap
index 0075c14..c8c2149 100644
--- a/src/components/mbx-button/__tests__/__snapshots__/mbx-button.test.js.snap
+++ b/src/components/button/__tests__/__snapshots__/button.test.js.snap
@@ -76,12 +76,12 @@ exports[`Link with outline and icon text, extra padding renders as expected 1`]
   href="#"
   onClick={[MockFunction]}
 >
-  <MbxIconText
+  <IconText
     iconBefore="bug"
     spacing="small"
   >
     Go do things
-  </MbxIconText>
+  </IconText>
 </a>
 `;
 
diff --git a/src/components/mbx-button/__tests__/mbx-button-test-cases.js b/src/components/button/__tests__/button-test-cases.js
similarity index 83%
rename from src/components/mbx-button/__tests__/mbx-button-test-cases.js
rename to src/components/button/__tests__/button-test-cases.js
index d0b6652..a75f11b 100644
--- a/src/components/mbx-button/__tests__/mbx-button-test-cases.js
+++ b/src/components/button/__tests__/button-test-cases.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import safeSpy from '../../../test-utils/safe-spy';
-import MbxButton from '../mbx-button';
-import MbxIconText from '../../mbx-icon-text';
+import Button from '../button';
+import IconText from '../../icon-text';
 
 const testCases = {};
 
 testCases.primary = {
   description: 'Primary',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Primary',
     onClick: safeSpy()
@@ -16,7 +16,7 @@ testCases.primary = {
 
 testCases.secondary = {
   description: 'Secondary',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Secondary',
     variant: 'secondary',
@@ -26,7 +26,7 @@ testCases.secondary = {
 
 testCases.discouraging = {
   description: 'Discouraging',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Discouraging',
     variant: 'discouraging',
@@ -36,7 +36,7 @@ testCases.discouraging = {
 
 testCases.destructive = {
   description: 'Destructive',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Destructive',
     variant: 'destructive',
@@ -46,7 +46,7 @@ testCases.destructive = {
 
 testCases.appPrimary = {
   description: 'AppPrimary',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'AppPrimary',
     variant: 'appPrimary',
@@ -56,7 +56,7 @@ testCases.appPrimary = {
 
 testCases.appSecondary = {
   description: 'AppSecondary',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'AppSecondary',
     variant: 'appSecondary',
@@ -66,9 +66,9 @@ testCases.appSecondary = {
 
 testCases.linkOutlinePadding = {
   description: 'Link with outline and icon text, extra padding',
-  component: MbxButton,
+  component: Button,
   props: {
-    children: <MbxIconText iconBefore="bug">Go do things</MbxIconText>,
+    children: <IconText iconBefore="bug">Go do things</IconText>,
     href: '#',
     onClick: safeSpy(),
     outline: true,
@@ -78,7 +78,7 @@ testCases.linkOutlinePadding = {
 
 testCases.fullWidthPurple = {
   description: 'Full width, alternate color',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Here we are',
     color: 'purple',
@@ -89,7 +89,7 @@ testCases.fullWidthPurple = {
 testCases.weird = {
   description:
     'Div styled like a medium destructive button with some extended props and transformed classes',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Save',
     size: 'medium',
@@ -106,7 +106,7 @@ testCases.weird = {
 
 testCases.disabled = {
   description: 'Disabled',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Oops',
     disabled: true
@@ -115,7 +115,7 @@ testCases.disabled = {
 
 testCases.disabledSecondary = {
   description: 'Disabled secondary',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Oops',
     disabled: true,
@@ -126,7 +126,7 @@ testCases.disabledSecondary = {
 
 testCases.disabledSpecial = {
   description: 'Disabled appPrimary with color',
-  component: MbxButton,
+  component: Button,
   props: {
     children: 'Oops',
     variant: 'appPrimary',
diff --git a/src/components/mbx-button/__tests__/mbx-button.test.js b/src/components/button/__tests__/button.test.js
similarity index 98%
rename from src/components/mbx-button/__tests__/mbx-button.test.js
rename to src/components/button/__tests__/button.test.js
index 12e09a7..975c695 100644
--- a/src/components/mbx-button/__tests__/mbx-button.test.js
+++ b/src/components/button/__tests__/button.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { testCases } from './mbx-button-test-cases';
+import { testCases } from './button-test-cases';
 
 describe(testCases.primary.description, () => {
   let testCase;
diff --git a/src/components/mbx-icon-text/__tests__/__snapshots__/mbx-icon-text.test.js.snap b/src/components/icon-text/__tests__/__snapshots__/icon-text.test.js.snap
similarity index 100%
rename from src/components/mbx-icon-text/__tests__/__snapshots__/mbx-icon-text.test.js.snap
rename to src/components/icon-text/__tests__/__snapshots__/icon-text.test.js.snap
diff --git a/src/components/mbx-icon-text/__tests__/mbx-icon-text-test-cases.js b/src/components/icon-text/__tests__/icon-text-test-cases.js
similarity index 79%
rename from src/components/mbx-icon-text/__tests__/mbx-icon-text-test-cases.js
rename to src/components/icon-text/__tests__/icon-text-test-cases.js
index 986cb41..66443e5 100644
--- a/src/components/mbx-icon-text/__tests__/mbx-icon-text-test-cases.js
+++ b/src/components/icon-text/__tests__/icon-text-test-cases.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import MbxIconText from '../mbx-icon-text';
+import IconText from '../icon-text';
 import Icon from '../../icon';
 
 const testCases = {};
 
 testCases.iconBefore = {
   description: 'icon before',
-  component: MbxIconText,
+  component: IconText,
   props: {
     children: 'Copy',
     iconBefore: 'clipboard'
@@ -15,7 +15,7 @@ testCases.iconBefore = {
 
 testCases.iconAfter = {
   description: 'icon after',
-  component: MbxIconText,
+  component: IconText,
   props: {
     children: 'Next',
     iconAfter: 'chevron-right'
@@ -24,7 +24,7 @@ testCases.iconAfter = {
 
 testCases.largeSpacing = {
   description: 'large spacing',
-  component: MbxIconText,
+  component: IconText,
   props: {
     children: 'Done',
     iconBefore: 'check',
@@ -34,7 +34,7 @@ testCases.largeSpacing = {
 
 testCases.bothIcons = {
   description: 'icons on both sides, including a non-string one',
-  component: MbxIconText,
+  component: IconText,
   props: {
     children: 'What',
     iconBefore: 'check',
@@ -46,7 +46,7 @@ testCases.buttonyDisplay = {
   description: 'a buttony look',
   element: (
     <button type="button" className="link txt-bold txt-s block">
-      <MbxIconText iconBefore="duplicate">Duplicate</MbxIconText>
+      <IconText iconBefore="duplicate">Duplicate</IconText>
     </button>
   )
 };
diff --git a/src/components/mbx-icon-text/__tests__/mbx-icon-text.test.js b/src/components/icon-text/__tests__/icon-text.test.js
similarity index 95%
rename from src/components/mbx-icon-text/__tests__/mbx-icon-text.test.js
rename to src/components/icon-text/__tests__/icon-text.test.js
index 4f8234f..3b3ab5d 100644
--- a/src/components/mbx-icon-text/__tests__/mbx-icon-text.test.js
+++ b/src/components/icon-text/__tests__/icon-text.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { testCases } from './mbx-icon-text-test-cases';
+import { testCases } from './icon-text-test-cases';
 
 let testCase;
 let wrapper;
diff --git a/src/components/mbx-underline-tabs/__tests__/__snapshots__/mbx-underline-tabs.test.js.snap b/src/components/underline-tabs/__tests__/__snapshots__/underline-tabs.test.js.snap
similarity index 99%
rename from src/components/mbx-underline-tabs/__tests__/__snapshots__/mbx-underline-tabs.test.js.snap
rename to src/components/underline-tabs/__tests__/__snapshots__/underline-tabs.test.js.snap
index 7f426db..3737cd1 100644
--- a/src/components/mbx-underline-tabs/__tests__/__snapshots__/mbx-underline-tabs.test.js.snap
+++ b/src/components/underline-tabs/__tests__/__snapshots__/underline-tabs.test.js.snap
@@ -289,7 +289,7 @@ exports[`large links with icons renders as expected 1`] = `
         <span
           className="flex-child"
         >
-          MbxIconText
+          IconText
         </span>
         <span
           className="absolute bottom left right border-b border-b--2"
@@ -318,7 +318,7 @@ exports[`large links with icons renders as expected 1`] = `
         <span
           className="flex-child"
         >
-          MbxIconText
+          IconText
         </span>
       </span>
     </a>
@@ -344,7 +344,7 @@ exports[`large links with icons renders as expected 1`] = `
         <span
           className="flex-child"
         >
-          MbxIconText
+          IconText
         </span>
       </span>
     </a>
diff --git a/src/components/mbx-underline-tabs/__tests__/mbx-underline-tabs-test-cases.js b/src/components/underline-tabs/__tests__/underline-tabs-test-cases.js
similarity index 87%
rename from src/components/mbx-underline-tabs/__tests__/mbx-underline-tabs-test-cases.js
rename to src/components/underline-tabs/__tests__/underline-tabs-test-cases.js
index 92ead6b..71561df 100644
--- a/src/components/mbx-underline-tabs/__tests__/mbx-underline-tabs-test-cases.js
+++ b/src/components/underline-tabs/__tests__/underline-tabs-test-cases.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import MbxIconText from '../../mbx-icon-text';
-import MbxUnderlineTabs from '../mbx-underline-tabs';
+import IconText from '../../icon-text';
+import UnderlineTabs from '../underline-tabs';
 import safeSpy from '../../../test-utils/safe-spy';
 
 const testCases = {};
@@ -36,7 +36,7 @@ class InteractiveDemo extends React.Component {
     return (
       <div className="px12 py12">
         <div className="border-b border--gray-light">
-          <MbxUnderlineTabs
+          <UnderlineTabs
             items={items}
             active={this.state.active}
             onChange={this.changeActive}
@@ -60,7 +60,7 @@ testCases.interactive = {
 
 testCases.manyItems = {
   description: 'many items',
-  component: MbxUnderlineTabs,
+  component: UnderlineTabs,
   props: {
     items: [
       {
@@ -107,7 +107,7 @@ testCases.manyItems = {
 
 testCases.defaults = {
   description: 'defaults',
-  component: MbxUnderlineTabs,
+  component: UnderlineTabs,
   props: {
     items: [
       {
@@ -130,7 +130,7 @@ testCases.defaults = {
 
 testCases.overlap = {
   description: 'overlap',
-  component: MbxUnderlineTabs,
+  component: UnderlineTabs,
   props: {
     overlapBorder: true,
     items: [
@@ -154,7 +154,7 @@ testCases.overlap = {
 
 testCases.small = {
   description: 'small',
-  component: MbxUnderlineTabs,
+  component: UnderlineTabs,
   props: {
     items: [
       {
@@ -178,7 +178,7 @@ testCases.small = {
 
 testCases.large = {
   description: 'large',
-  component: MbxUnderlineTabs,
+  component: UnderlineTabs,
   props: {
     items: [
       {
@@ -202,22 +202,22 @@ testCases.large = {
 
 testCases.largeLinksIcons = {
   description: 'large links with icons',
-  component: MbxUnderlineTabs,
+  component: UnderlineTabs,
   props: {
     items: [
       {
         id: 'A',
-        label: <MbxIconText iconBefore="floppy">Disk</MbxIconText>,
+        label: <IconText iconBefore="floppy">Disk</IconText>,
         href: '#'
       },
       {
         id: 'B',
-        label: <MbxIconText iconBefore="alert">Alert</MbxIconText>,
+        label: <IconText iconBefore="alert">Alert</IconText>,
         href: '#'
       },
       {
         id: 'C',
-        label: <MbxIconText iconBefore="book">Book</MbxIconText>,
+        label: <IconText iconBefore="book">Book</IconText>,
         href: '#'
       }
     ],
@@ -229,7 +229,7 @@ testCases.largeLinksIcons = {
 
 testCases.customized = {
   description: 'customized',
-  component: MbxUnderlineTabs,
+  component: UnderlineTabs,
   props: {
     items: [
       {
@@ -257,7 +257,7 @@ testCases.customized = {
 
 testCases.idLabelsAndDisabledItem = {
   description: 'ID labels and a disabled item',
-  component: MbxUnderlineTabs,
+  component: UnderlineTabs,
   props: {
     items: [
       {
diff --git a/src/components/mbx-underline-tabs/__tests__/mbx-underline-tabs.test.js b/src/components/underline-tabs/__tests__/underline-tabs.test.js
similarity index 94%
rename from src/components/mbx-underline-tabs/__tests__/mbx-underline-tabs.test.js
rename to src/components/underline-tabs/__tests__/underline-tabs.test.js
index 5ab48b7..da84473 100644
--- a/src/components/mbx-underline-tabs/__tests__/mbx-underline-tabs.test.js
+++ b/src/components/underline-tabs/__tests__/underline-tabs.test.js
@@ -1,11 +1,11 @@
 /* eslint-disable react/display-name */
 import React from 'react';
 import { mount } from 'enzyme';
-import { testCases } from './mbx-underline-tabs-test-cases';
+import { testCases } from './underline-tabs-test-cases';
 
-jest.mock('../../mbx-icon-text', () => () => 'MbxIconText');
+jest.mock('../../icon-text', () => () => 'IconText');
 
-// Using Enzyme's mount instead of shallow in order to test MbxUnderlineTabItem
+// Using Enzyme's mount instead of shallow in order to test UnderlineTabItem
 // at the same time, since its independent existence is an implementation
 // detail that may change.