Merge pull request #748 from iowillhoit/746-app-launcher-classname

allow className on app launcher modal

Author: interactivellama

components/app-launcher/index.jsx

@@ -80,17 +80,21 @@ const AppLauncher = React.createClass({
 		 */
 		isOpen: PropTypes.bool,
 		/**
-		 * Button that exists in the upper right hand corner of the App Launcher modal
+		 * CSS classes to be added to App Launcher Modal.
 		 */
-		modalHeaderButton: PropTypes.node,
+		modalClassName: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
 		/**
-		 * Callback when the App Launcher Modal is closed
+		 * Button that exists in the upper right hand corner of the App Launcher modal
 		 */
-		onClose: PropTypes.func,
+		modalHeaderButton: PropTypes.node,
 		/**
 		 * Allows longer application names without truncating them.
 		 */
 		noTruncate: PropTypes.bool,
+		/**
+		 * Callback when the App Launcher Modal is closed
+		 */
+		onClose: PropTypes.func,
 		/**
 		 * Search bar for the Modal's header. Will typically be an instance of `design-system-react/forms/input/search`
 		 */
@@ -230,7 +234,7 @@ const AppLauncher = React.createClass({
 					contentStyle={{ minHeight: modalContentStaticHeight }}
 					isOpen={isOpen}
 					onRequestClose={this.closeAppLauncher}
-					containerClassName="app-launcher"
+					containerClassName={classNames('app-launcher', this.props.modalClassName)}
 					size="large"
 					header={customModalHeader}
 					headerClassName="slds-app-launcher__header"

components/forms/input/index.jsx

@@ -216,7 +216,7 @@ const Input = React.createClass({
 			// Using [object destructuring](https://facebook.github.io/react/docs/transferring-props.html#transferring-with-...-in-jsx) to pass on any properties which are not explicitly defined.
 			...props
 		} = this.props;
-		
+
 		const labelText = label || assistiveText; // One of these is required to pass accessibility tests
 
 		// this is a hack to make left the default prop unless overwritten by `iconPosition="right"`

stories/app-launcher/index.jsx

@@ -273,6 +273,7 @@ const DemoAppLauncher = React.createClass({
 					<AppLauncher
 						triggerName="App Name"
 						search={search}
+						modalClassName="custom-modal-class"
 						modalHeaderButton={modalHeaderButton}
 						isOpen={this.state.appLauncherOpen}
 						triggerOnClick={this.toggleAppLauncher}

tests/app-launcher/app-launcher.test.jsx

@@ -80,6 +80,7 @@ describe('SLDS APP LAUNCHER *******************************************', () =>
 			onClose = sinon.spy();
 
 			mountAppLauncher({
+				modalClassName: 'custom-modal-class',
 				modalHeaderButton: <Button label="App Exchange" />,
 				onClose,
 				search: <Search assistiveText="Find an app" />,
@@ -95,6 +96,10 @@ describe('SLDS APP LAUNCHER *******************************************', () =>
 			should.exist(handles.modal);
 		});
 
+		it('renders custom modal class', () => {
+			should.exist(handles.modal.find('.custom-modal-class'));
+		});
+
 		it('renders modal header', () => {
 			should.exist(handles.modal.find('.slds-app-launcher__header'));
 		});