From 581833c5ff77ec86d0f706de4496bde14a918688 Mon Sep 17 00:00:00 2001
From: Patrick Wolfert <patrickrwolfert@gmail.com>
Date: Mon, 2 Apr 2018 10:04:50 -0700
Subject: [PATCH] Adds an optional className prop to Autocomplete and
 appropriate tests (#263)

---
 .../src/components/Autocomplete/Autocomplete.jsx  | 15 ++++++++++++++-
 .../components/Autocomplete/Autocomplete.test.jsx |  9 +++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/Autocomplete/Autocomplete.jsx b/packages/core/src/components/Autocomplete/Autocomplete.jsx
index 62515ba3b6..0a47eb68e1 100644
--- a/packages/core/src/components/Autocomplete/Autocomplete.jsx
+++ b/packages/core/src/components/Autocomplete/Autocomplete.jsx
@@ -4,6 +4,7 @@ import Downshift from 'downshift';
 import PropTypes from 'prop-types';
 import React from 'react';
 import TextField from '../TextField/TextField';
+import classNames from 'classnames';
 import uniqueId from 'lodash.uniqueid';
 
 /**
@@ -95,9 +96,16 @@ export class Autocomplete extends React.PureComponent {
       label,
       loading,
       children,
+      className,
       ...autocompleteProps
     } = this.props;
 
+    const rootClassName = classNames(
+      'ds-u-clearfix',
+      'ds-c-autocomplete',
+      className
+    );
+
     return (
       <Downshift
         render={({
@@ -108,7 +116,7 @@ export class Autocomplete extends React.PureComponent {
           inputValue,
           isOpen
         }) => (
-          <div className="ds-u-clearfix ds-c-autocomplete">
+          <div className={rootClassName}>
             {this.renderChildren(getInputProps)}
 
             {isOpen && (loading || items) ? (
@@ -171,6 +179,11 @@ Autocomplete.propTypes = {
    */
   ariaClearLabel: PropTypes.string,
   children: PropTypes.node,
+  /**
+   * Additional classes to be added to the root element.
+   * Useful for adding utility classes.
+   */
+  className: PropTypes.string,
   /**
    * Clear search text that will appear on the page as part of the rendered `<button>` component
    */
diff --git a/packages/core/src/components/Autocomplete/Autocomplete.test.jsx b/packages/core/src/components/Autocomplete/Autocomplete.test.jsx
index e556b130c3..54a66b8b38 100644
--- a/packages/core/src/components/Autocomplete/Autocomplete.test.jsx
+++ b/packages/core/src/components/Autocomplete/Autocomplete.test.jsx
@@ -81,6 +81,15 @@ describe('Autocomplete', () => {
     expect(child.hasClass('ds-c-autocomplete')).toBe(true);
   });
 
+  it('renders custom class names', () => {
+    const data = render({ className: 'additional-class' }, true);
+    const wrapper = data.wrapper;
+    const child = wrapper.find('Downshift').childAt(0);
+
+    expect(child.hasClass('ds-c-autocomplete')).toBe(true);
+    expect(child.hasClass('additional-class')).toBe(true);
+  });
+
   it('allows default props to be overridden', () => {
     const data = render(
       {