Add inputClasses option

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- [Pull request #601: Add input classes to implement a part of #428](https://github.com/alphagov/accessible-autocomplete/pull/601)
 - [Pull request #621: Handle query change when the text length does not change](https://github.com/alphagov/accessible-autocomplete/pull/621)
 - [Pull request #620: Add `className` attribute to status component](https://github.com/alphagov/accessible-autocomplete/pull/620)
 - [Pull request #591: Add menuAttributes to fix #361](https://github.com/alphagov/accessible-autocomplete/pull/591)

README.md

@@ -183,6 +183,12 @@ function suggest (query, populateResults) {
 
 ### Other options
 
+#### `inputClasses` (default: `''`)
+
+Type: `string`
+
+Adds custom html classes to the generated `input` element.
+
 #### `menuAttributes` (default: `{}`)
 
 Type: `Object`

examples/index.html

@@ -434,7 +434,8 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        }
+        },
+        inputClasses: "govuk-input"
       })
     </script>
 
@@ -448,7 +449,8 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        }
+        },
+        inputClasses: "govuk-input"
       })
     </script>
 
@@ -462,7 +464,8 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        }
+        },
+        inputClasses: "govuk-input"
       })
     </script>
 
@@ -476,7 +479,8 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        }
+        },
+        inputClasses: "govuk-input"
       })
     </script>
 
@@ -490,7 +494,8 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        }
+        },
+        inputClasses: "govuk-input"
       })
     </script>
 
@@ -536,6 +541,7 @@ <h3>Translating texts</h3>
         menuAttributes: {
           "aria-labelledby": id
         },
+        inputClasses: "govuk-input",
         templates: {
           inputValue: inputValueTemplate,
           suggestion: suggestionTemplate
@@ -553,7 +559,8 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        }
+        },
+        inputClasses: "govuk-input"
       })
     </script>
 
@@ -567,7 +574,8 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        }
+        },
+        inputClasses: "govuk-input"
       })
     </script>
 
@@ -581,7 +589,8 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        }
+        },
+        inputClasses: "govuk-input"
       })
     </script>
 
@@ -595,7 +604,8 @@ <h3>Translating texts</h3>
         source: countries,
         menuAttributes: {
           "aria-labelledby": id
-        }
+        },
+        inputClasses: "govuk-input"
       })
     </script>
 
@@ -609,6 +619,7 @@ <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.'
@@ -644,6 +655,7 @@ <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

@@ -51,7 +51,8 @@ export default class Autocomplete extends Component {
     tNoResults: () => 'No results found',
     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: {}
+    menuAttributes: {},
+    inputClasses: ''
   }
 
   elementReferences = {}
@@ -418,7 +419,8 @@ export default class Autocomplete extends Component {
       tStatusResults,
       tAssistiveHint,
       dropdownArrow: dropdownArrowFactory,
-      menuAttributes
+      menuAttributes,
+      inputClasses
     } = this.props
     const { focused, hovered, menuOpen, options, query, selected, ariaHint, validChoiceMade } = this.state
     const autoselect = this.hasAutoselect()
@@ -431,12 +433,7 @@ export default class Autocomplete extends Component {
       inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough
 
     const wrapperClassName = `${cssNamespace}__wrapper`
-
-    const inputClassName = `${cssNamespace}__input`
     const statusClassName = `${cssNamespace}__status`
-    const componentIsFocused = focused !== null
-    const inputModifierFocused = componentIsFocused ? ` ${inputClassName}--focused` : ''
-    const inputModifierType = this.props.showAllValues ? ` ${inputClassName}--show-all-values` : ` ${inputClassName}--default`
     const dropdownArrowClassName = `${cssNamespace}__dropdown-arrow-down`
     const optionFocused = focused !== -1 && focused !== null
 
@@ -472,6 +469,21 @@ export default class Autocomplete extends Component {
       }
     }
 
+    const inputClassName = `${cssNamespace}__input`
+    const inputClassList = [
+      inputClassName,
+      this.props.showAllValues ? `${inputClassName}--show-all-values` : `${inputClassName}--default`
+    ]
+
+    const componentIsFocused = focused !== null
+    if (componentIsFocused) {
+      inputClassList.push(`${inputClassName}--focused`)
+    }
+
+    if (inputClasses) {
+      inputClassList.push(inputClasses)
+    }
+
     return (
       <div className={wrapperClassName} onKeyDown={this.handleKeyDown}>
         <Status
@@ -501,7 +513,7 @@ export default class Autocomplete extends Component {
           aria-autocomplete={(this.hasAutoselect()) ? 'both' : 'list'}
           {...ariaDescribedProp}
           autoComplete='off'
-          className={`${inputClassName}${inputModifierFocused}${inputModifierType}`}
+          className={inputClassList.join(' ')}
           id={id}
           onClick={(event) => this.handleInputClick(event)}
           onBlur={this.handleInputBlur}

test/functional/index.js

@@ -119,6 +119,14 @@ describe('Autocomplete', () => {
         expect(inputElement.getAttribute('id')).to.equal('autocomplete-default')
       })
 
+      it('renders with extra class on the input', () => {
+        render(<Autocomplete inputClasses='govuk-input' id='autocomplete-default' />, scratch)
+
+        let inputElement = scratch.getElementsByClassName('autocomplete__input')[0]
+
+        expect(inputElement.getAttribute('class')).to.contain(' govuk-input')
+      })
+
       it('renders with the correct roles', () => {
         render(<Autocomplete required />, scratch)