Adds an optional className prop to Autocomplete and appropriate tests (…

…#263)
CMSgov · Apr 2, 2018 · 581833c · 581833c
1 parent cf1e39c
commit 581833c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git 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
@@ -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(
       {