Allow better customization of Hint component

Author: ericgio

docs/API.md

@@ -173,7 +173,11 @@ The `Hint` component can be used to wrap custom inputs.
 #### Props
 Name | Type | Default | Description
 -----|------|---------|------------
-children `(required)` | node | |
+children `(required)` | `ReactNode` | |
+className | `string` | Class names applied to the containing element. |
+hintClassName | `string` | Class names applied to the the hint element. |
+hintStyle | `CSSProperties` | Inline styles applied to the hint element. |
+style | `CSSProperties` | Inline styl;es applied to the containing element. |
 
 ### `<Input>`
 Abstract `<input>` component that handles an `inputRef` prop and is used as the basis for both single- and multi-select input components.

src/components/Hint/Hint.test.tsx

@@ -1,6 +1,32 @@
+import * as React from 'react';
+
 import * as stories from './Hint.stories';
-import { generateSnapshots } from '../../tests/helpers';
+import {
+  composeStories,
+  generateSnapshots,
+  render,
+  screen,
+} from '../../tests/helpers';
+
+const { Default } = composeStories(stories);
 
 describe('<Hint>', () => {
   generateSnapshots(stories);
+
+  it('applies a classname and style to the containing element', () => {
+    const { container } = render(
+      <Default className="custom-class" style={{ backgroundColor: 'blue' }} />
+    );
+
+    expect(container.firstChild).toHaveClass('custom-class');
+    expect(container.firstChild).toHaveStyle({ backgroundColor: 'blue' });
+  });
+
+  it('applies a classname and style to the hint element', () => {
+    render(<Default hintClassName="hint-class" hintStyle={{ color: 'red' }} />);
+
+    const hintElement = screen.getByDisplayValue('california');
+    expect(hintElement).toHaveClass('hint-class');
+    expect(hintElement).toHaveStyle({ color: 'red' });
+  });
 });

src/components/Hint/Hint.tsx

@@ -1,28 +1,33 @@
-import React, { ReactNode } from 'react';
+import cx from 'classnames';
+import React, { CSSProperties, ReactNode } from 'react';
 
 import { useHint } from '../../hooks';
 
 export interface HintProps {
   children: ReactNode;
   className?: string;
+  hintClassName?: string;
+  hintStyle?: CSSProperties;
+  style?: CSSProperties;
 }
 
-const Hint = ({ children, className }: HintProps) => {
+const Hint = (props: HintProps) => {
   const { hintRef, hintText } = useHint();
 
   return (
     <div
-      className={className}
+      className={props.className}
       style={{
         display: 'flex',
         flex: 1,
         height: '100%',
         position: 'relative',
+        ...props.style,
       }}>
-      {children}
+      {props.children}
       <input
         aria-hidden
-        className="rbt-input-hint"
+        className={cx('rbt-input-hint', props.hintClassName)}
         ref={hintRef}
         readOnly
         style={{
@@ -35,6 +40,7 @@ const Hint = ({ children, className }: HintProps) => {
           position: 'absolute',
           top: 0,
           width: '100%',
+          ...props.hintStyle,
         }}
         tabIndex={-1}
         value={hintText}