From 559046e36a586333d0b7001f8f123eacdc70aa57 Mon Sep 17 00:00:00 2001
From: Roger Andreassen <roger.andreassen2@sparebank1.no>
Date: Tue, 4 Oct 2016 14:14:03 +0200
Subject: [PATCH] =?UTF-8?q?DIG-11112=20-=20Styling=20nytt=20s=C3=B8knadssk?=
 =?UTF-8?q?jema=20kredittkort.=20Lagt=20til=20mulighet=20til=20=C3=A5=20st?=
 =?UTF-8?q?ilsette=20ytre=20container=20div=20vha=20prop=20containerClassN?=
 =?UTF-8?q?ame.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md    |  4 ++++
 README.md       | 10 ++++++++++
 package.json    |  2 +-
 src/dropdown.js |  5 +++--
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bec28e4465..9b8f00260b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.4.0
+
+* Added added support for css styling of container-div, using prop containerClassName
+
 ## 2.3.0
 
 * Added onBlur support
diff --git a/README.md b/README.md
index a405a2fe88..1a62dfeae1 100644
--- a/README.md
+++ b/README.md
@@ -57,6 +57,16 @@ Passing `invalid` to the `Dropdown` will give a red color on the element.
 </Dropdown>
 ```
 
+If you need to add styling to the outer div-container of the component and pass the attribute containerClassName.
+The containerClassName will be appended to the default class 'ffe-input-group'.
+
+```javascript
+<label for={ uniqueIdString }>{ labelTextString }</label>
+<Dropdown containerClassName={ myContainterClass }>
+    <option value="val1">Option text</option>
+</Dropdown>
+```
+
 ### Loading state
 
 Loading state can be indicated using `isLoading`. When this is set a loading spinner will be rendered next to the dropdown.
diff --git a/package.json b/package.json
index a01d36cde6..14390f6674 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ffe-dropdown-react",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "lib/dropdown.js",
   "scripts": {
     "build": "babel -d lib/. --ignore=*.test.js src/. && npm run example",
diff --git a/src/dropdown.js b/src/dropdown.js
index 547f84b171..867fe468a1 100644
--- a/src/dropdown.js
+++ b/src/dropdown.js
@@ -10,6 +10,7 @@ const createID = (label, options) => {
 function Dropdown({
     id,
     className = '',
+    containerClassName = '',
     label,
     onChange,
     onBlur,
@@ -22,14 +23,14 @@ function Dropdown({
 }) {
     const domId = id || createID(label, children);
 
-    return  <div className="ffe-input-group" aria-live="polite">
+    return  <div className={ `ffe-input-group ${containerClassName}` } aria-live="polite">
                 { label &&
                         <label className="ffe-form-label" htmlFor={ domId }>
                             { label }
                         </label>
                 }
                 <select
-                        className={`ffe-dropdown ${className}`}
+                        className={ `ffe-dropdown ${className}` }
                         id={ domId }
                         onChange={ onChange }
                         onBlur={ onBlur }