Merge pull request #620 from alphagov/rpa-improvement/status-classname

Add `className` attribute to status component
alphagov · Jan 12, 2024 · 180c230 · 180c230
2 parents 901035a + d28393a
commit 180c230
Show file tree

Hide file tree

Showing 9 changed files with 12 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,8 +2,7 @@
 
 ## Unreleased
 
-## 2.0.5 - 2023-04-25
-
+- [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)
 
 ## 2.0.4 - 2022-02-07

diff --git a/dist/accessible-autocomplete.min.js b/dist/accessible-autocomplete.min.js
diff --git a/dist/accessible-autocomplete.min.js.map b/dist/accessible-autocomplete.min.js.map
diff --git a/dist/lib/accessible-autocomplete.preact.min.js b/dist/lib/accessible-autocomplete.preact.min.js
diff --git a/dist/lib/accessible-autocomplete.preact.min.js.map b/dist/lib/accessible-autocomplete.preact.min.js.map
diff --git a/dist/lib/accessible-autocomplete.react.min.js b/dist/lib/accessible-autocomplete.react.min.js
diff --git a/dist/lib/accessible-autocomplete.react.min.js.map b/dist/lib/accessible-autocomplete.react.min.js.map
diff --git a/src/autocomplete.js b/src/autocomplete.js
@@ -433,6 +433,7 @@ export default class Autocomplete extends Component {
     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`
@@ -486,6 +487,7 @@ export default class Autocomplete extends Component {
           tNoResults={tStatusNoResults}
           tSelectedOption={tStatusSelectedOption}
           tResults={tStatusResults}
+          className={statusClassName}
         />
 
         {hintValue && (

diff --git a/src/status.js b/src/status.js
@@ -62,7 +62,8 @@ export default class Status extends Component {
       tQueryTooShort,
       tNoResults,
       tSelectedOption,
-      tResults
+      tResults,
+      className
     } = this.props
     const { bump, debounced, silenced } = this.state
 
@@ -86,6 +87,7 @@ export default class Status extends Component {
 
     return (
       <div
+        className={className}
         style={{
           border: '0',
           clip: 'rect(0 0 0 0)',