Update options for styling component inputs

examples/index.html

@@ -46,6 +46,17 @@
         max-width: 20em;
         margin-bottom: 4rem;
       }
+
+      /* Custom classes for the `XYZClasses` props with visual changes to see their effect without inspecting */ 
+      .custom-input-class {
+        /* Adjust the font to check that both hint and input get the class by default,
+           if they don't text won't overlap properly */
+        font-family: serif;
+      }
+
+      .custom-hint-class {
+        box-shadow: inset 0 0 0 5px #44952e;
+      }
     </style>
     <link rel="stylesheet" href="../dist/accessible-autocomplete.min.css">
   </head>
@@ -121,6 +132,22 @@ <h3><code>{ showAllValues: true, dropdownArrow: () => '' }</code></h3>
       <label for="autocomplete-customDropdownArrow">Country</label>
       <div id="tt-customDropdownArrow" class="autocomplete-wrapper"></div>
 
+      <h3><code>{ inputClasses: 'custom-input-class'}</code></h3>
+      <p>
+        The classes provided in <code>inputClasses</code> are added to
+        the component's <code>&lt;input&gt;</code>.
+      </p>
+      <label for="autocomplete-inputClasses">Country</label>
+      <div id="tt-inputClasses" class="autocomplete-wrapper"></div>
+
+      <h3><code>{ hintClasses: 'custom-hint-class'}</code></h3>
+      <p>
+        The classes provided in <code>hintClasses</code> are added to
+        the component's hint that appears when the value matches the start of a suggestion.
+      </p>
+      <label for="autocomplete-hintClasses">Country</label>
+      <div id="tt-hintClasses" class="autocomplete-wrapper"></div>
+
       <h2>Advanced features</h2>
 
       <h3>Progressive enhancement</h3>
@@ -434,8 +461,7 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        },
-        inputClasses: "govuk-input"
+        }
       })
     </script>
 
@@ -449,8 +475,7 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        },
-        inputClasses: "govuk-input"
+        }
       })
     </script>
 
@@ -464,8 +489,7 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        },
-        inputClasses: "govuk-input"
+        }
       })
     </script>
 
@@ -479,8 +503,7 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        },
-        inputClasses: "govuk-input"
+        }
       })
     </script>
 
@@ -489,13 +512,42 @@ <h3>Translating texts</h3>
       id = 'autocomplete-defaultValue'
       accessibleAutocomplete({
         defaultValue: 'Germany',
+        element: element,
+        id: id,
+        source: countries,
+        menuAttributes: {
+          "aria-labelledby": id
+        }
+      })
+    </script>
+
+    <script type="text/javascript">
+      element = document.querySelector('#tt-inputClasses')
+      id = 'autocomplete-inputClasses'
+      accessibleAutocomplete({
         element: element,
         id: id,
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
         },
-        inputClasses: "govuk-input"
+        autoselect: true,
+        inputClasses: 'custom-input-class'
+      })
+    </script>
+
+    <script type="text/javascript">
+      element = document.querySelector('#tt-hintClasses')
+      id = 'autocomplete-hintClasses'
+      accessibleAutocomplete({
+        element: element,
+        id: id,
+        source: countries,
+        menuAttributes: {
+          "aria-labelledby": id
+        },
+        autoselect: true,
+        hintClasses: 'custom-hint-class'
       })
     </script>
 
@@ -541,7 +593,6 @@ <h3>Translating texts</h3>
         menuAttributes: {
           "aria-labelledby": id
         },
-        inputClasses: "govuk-input",
         templates: {
           inputValue: inputValueTemplate,
           suggestion: suggestionTemplate
@@ -559,8 +610,7 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        },
-        inputClasses: "govuk-input"
+        }
       })
     </script>
 
@@ -574,8 +624,7 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        },
-        inputClasses: "govuk-input"
+        }
       })
     </script>
 
@@ -589,8 +638,7 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        },
-        inputClasses: "govuk-input"
+        }
       })
     </script>
 
@@ -604,8 +652,7 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        },
-        inputClasses: "govuk-input"
+        }
       })
     </script>
 
@@ -619,7 +666,6 @@ <h3>Translating texts</h3>
         menuAttributes: {
           "aria-labelledby": id
         },
-        inputClasses: "govuk-input",
         source: countries,
         tStatusQueryTooShort: function (minQueryLength) {
           return 'Tippe mindestens ' + minQueryLength + ' Zeichen ein für Resultate.'
@@ -655,7 +701,6 @@ <h3>Translating texts</h3>
         menuAttributes: {
           "aria-labelledby": id
         },
-        inputClasses: "govuk-input",
         dropdownArrow: function (config) {
           return '<svg class="' + config.className + '" style="top: 8px;" viewBox="0 0 512 512" ><path d="M256,298.3L256,298.3L256,298.3l174.2-167.2c4.3-4.2,11.4-4.1,15.8,0.2l30.6,29.9c4.4,4.3,4.5,11.3,0.2,15.5L264.1,380.9  c-2.2,2.2-5.2,3.2-8.1,3c-3,0.1-5.9-0.9-8.1-3L35.2,176.7c-4.3-4.2-4.2-11.2,0.2-15.5L66,131.3c4.4-4.3,11.5-4.4,15.8-0.2L256,298.3  z"/></svg>'
         }

src/autocomplete.js

@@ -52,7 +52,8 @@ export default class Autocomplete extends Component {
     tAssistiveHint: () => 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
     dropdownArrow: DropdownArrowDown,
     menuAttributes: {},
-    inputClasses: ''
+    inputClasses: null,
+    hintClasses: null
   }
 
   elementReferences = {}
@@ -420,7 +421,8 @@ export default class Autocomplete extends Component {
       tAssistiveHint,
       dropdownArrow: dropdownArrowFactory,
       menuAttributes,
-      inputClasses
+      inputClasses,
+      hintClasses
     } = this.props
     const { focused, hovered, menuOpen, options, query, selected, ariaHint, validChoiceMade } = this.state
     const autoselect = this.hasAutoselect()
@@ -507,7 +509,7 @@ export default class Autocomplete extends Component {
         />
 
         {hintValue && (
-          <span><input className={hintClassName} readonly tabIndex='-1' value={hintValue} /></span>
+          <span><input className={[hintClassName, hintClasses === null ? inputClasses : hintClasses].filter(Boolean).join(' ')} readonly tabIndex='-1' value={hintValue} /></span>
         )}
 
         <input