Fix focus border cut-off

CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## 1.0.7
+Make room for button focus border when button is at the bottom of the expanded area
+
 ## 1.0.6
 Make sure content has 100% width of container
 

examples/ExpandableDemo.js

@@ -40,6 +40,9 @@ class ExpandableDemo extends Component {
                             <ComponentIpsum />
                             <ComponentIpsum />
                             <ComponentIpsum />
+                            <button className="button-in-expandable">
+                                A button
+                            </button>
                         </Expandable>
                         <h3 className="ffe-h3">Here is more content after the expandable content</h3>
                         <ComponentIpsum />

examples/examples.less

@@ -8,3 +8,8 @@ body {
 .example-class {
     margin: 10px 0;
 }
+
+.button-in-expandable {
+  border: none;
+  color: #0071CD;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffe-expandable-react",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "main": "lib/ffe-expandable-react.js",
   "scripts": {
     "build": "babel -d lib/. --ignore=*.test.js src/.",

src/ffe-expandable-react.jsx

@@ -30,9 +30,9 @@ class Expandable extends React.Component {
         const ExpandedElementTag = isTable ? 'td' : 'div';
 
         const styles = {
-            maxHeight: isOpen ? height : 0,
+            height: isOpen ? height + 2 : 0,
             overflow: 'hidden',
-            transition: `max-height ${expandTime}s ease-out`,
+            transition: `height ${expandTime}s ease-out`,
         };
 
         return (

src/ffe-expandable-react.test.jsx

@@ -37,11 +37,11 @@ describe('ffe-expandable-react', () => {
         expect(componentMounted).to.contain(<ExpandedContent />);
     });
 
-    it('has wrapped Expandable with max-height set to 5000', () => {
-        expect(componentMounted.find('.expandable-wrapper')).to.have.style('max-height', '5000px');
+    it('adds 2 pixels to height to allow for focus border', () => {
+        expect(componentMounted.find('.expandable-wrapper')).to.have.style('height', '5002px');
     });
 
-    it('has wrapped Expandable with max-height set to 0 when isOpen is false', () => {
+    it('has wrapped Expandable with height set to 0px when isOpen is false', () => {
         componentMounted = mount(
             <Expandable
                 isOpen={false}
@@ -50,6 +50,6 @@ describe('ffe-expandable-react', () => {
                 customClass="expandable-wrapper"
             />
         );
-        expect(componentMounted.find('.expandable-wrapper')).to.have.style('max-height', '0');
+        expect(componentMounted.find('.expandable-wrapper')).to.have.style('height', '0px');
     });
 });