Merge pull request #237 from dabapps/fix-safari-collapse-fade-bug

Fix safari collapse fade bug
dabapps · Apr 4, 2018 · f52683e · f52683e
2 parents 4337578 + f0bda44
commit f52683e
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dabapps/roe",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "description": "A Collection of React Components for Project Development",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

diff --git a/src/ts/components/collapse.tsx b/src/ts/components/collapse.tsx
@@ -7,7 +7,8 @@ const ENOUGH_TIME_FOR_RERENDER = 50;
 const DEFAULT_HEIGHT = 0;
 const DEFAULT_DURATION = 200;
 const DEFAULT_FADE_HEIGHT = 50;
-const DEFAULT_FADE_COLOR = '#FFF';
+const DEFAULT_TRANSPARENT_COLOR = 'rgba(255, 255, 255, 0)';
+const DEFAULT_FADE_COLOR = 'rgba(255, 255, 255, 1)';
 
 export interface CollapseProps
   extends ComponentProps,
@@ -34,9 +35,14 @@ export interface CollapseProps
   fadeOut?: boolean;
   /**
    * Color to fade to
-   * @default white
+   * @default rgba(255, 255, 255, 1)
    */
   fadeColor?: string;
+  /**
+   * Transparent color to fade from (this should be a transparent version of the fadeColor)
+   * @default rgba(255, 255, 255, 0)
+   */
+  transparentColor?: string;
   /**
    * Height of the faded area
    * @default 50
@@ -125,6 +131,7 @@ export class Collapse extends PureComponent<CollapseProps, CollapseState> {
       fadeOut,
       fadeColor = DEFAULT_FADE_COLOR,
       fadeHeight = DEFAULT_FADE_HEIGHT,
+      transparentColor = DEFAULT_TRANSPARENT_COLOR,
       open,
       maxCollapsedHeight,
       animationDuration = DEFAULT_DURATION,
@@ -147,7 +154,7 @@ export class Collapse extends PureComponent<CollapseProps, CollapseState> {
       position: 'absolute' as 'absolute',
       bottom: 0,
       opacity: opening ? 0 : 1,
-      background: `linear-gradient(transparent, ${fadeColor} 80%)`,
+      background: `linear-gradient(${transparentColor}, ${fadeColor} 80%)`,
       transition: `ease-in-out ${animationDuration}ms opacity`,
     };
 

diff --git a/tests/__snapshots__/collapse.tsx.snap b/tests/__snapshots__/collapse.tsx.snap
@@ -98,7 +98,7 @@ exports[`Collapse should close to custom height 2`] = `
       className="collapse-fade"
       style={
         Object {
-          "background": "linear-gradient(transparent, #FFF 80%)",
+          "background": "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%)",
           "bottom": 0,
           "height": 50,
           "opacity": 0,
@@ -133,7 +133,7 @@ exports[`Collapse should close to custom height 3`] = `
       className="collapse-fade"
       style={
         Object {
-          "background": "linear-gradient(transparent, #FFF 80%)",
+          "background": "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%)",
           "bottom": 0,
           "height": 50,
           "opacity": 1,
@@ -168,7 +168,7 @@ exports[`Collapse should close to custom height 4`] = `
       className="collapse-fade"
       style={
         Object {
-          "background": "linear-gradient(transparent, #FFF 80%)",
+          "background": "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%)",
           "bottom": 0,
           "height": 50,
           "opacity": 1,
@@ -221,7 +221,7 @@ exports[`Collapse should close to default height 2`] = `
       className="collapse-fade"
       style={
         Object {
-          "background": "linear-gradient(transparent, #FFF 80%)",
+          "background": "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%)",
           "bottom": 0,
           "height": 50,
           "opacity": 0,
@@ -255,7 +255,7 @@ exports[`Collapse should close to default height 3`] = `
       className="collapse-fade"
       style={
         Object {
-          "background": "linear-gradient(transparent, #FFF 80%)",
+          "background": "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%)",
           "bottom": 0,
           "height": 50,
           "opacity": 1,
@@ -289,7 +289,7 @@ exports[`Collapse should close to default height 4`] = `
       className="collapse-fade"
       style={
         Object {
-          "background": "linear-gradient(transparent, #FFF 80%)",
+          "background": "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%)",
           "bottom": 0,
           "height": 50,
           "opacity": 1,
@@ -361,7 +361,7 @@ exports[`Collapse should match snapshot with customized fade out 1`] = `
     className="collapse-fade"
     style={
       Object {
-        "background": "linear-gradient(transparent, red 80%)",
+        "background": "linear-gradient(rgba(0, 0, 0, 0), red 80%)",
         "bottom": 0,
         "height": 10,
         "opacity": 1,
@@ -390,7 +390,7 @@ exports[`Collapse should match snapshot with fade out 1`] = `
     className="collapse-fade"
     style={
       Object {
-        "background": "linear-gradient(transparent, #FFF 80%)",
+        "background": "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%)",
         "bottom": 0,
         "height": 50,
         "opacity": 1,
@@ -424,7 +424,7 @@ exports[`Collapse should open from custom height 1`] = `
       className="collapse-fade"
       style={
         Object {
-          "background": "linear-gradient(transparent, #FFF 80%)",
+          "background": "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%)",
           "bottom": 0,
           "height": 50,
           "opacity": 1,
@@ -459,7 +459,7 @@ exports[`Collapse should open from custom height 2`] = `
       className="collapse-fade"
       style={
         Object {
-          "background": "linear-gradient(transparent, #FFF 80%)",
+          "background": "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%)",
           "bottom": 0,
           "height": 50,
           "opacity": 1,
@@ -494,7 +494,7 @@ exports[`Collapse should open from custom height 3`] = `
       className="collapse-fade"
       style={
         Object {
-          "background": "linear-gradient(transparent, #FFF 80%)",
+          "background": "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%)",
           "bottom": 0,
           "height": 50,
           "opacity": 0,
@@ -548,7 +548,7 @@ exports[`Collapse should open from default height 1`] = `
       className="collapse-fade"
       style={
         Object {
-          "background": "linear-gradient(transparent, #FFF 80%)",
+          "background": "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%)",
           "bottom": 0,
           "height": 50,
           "opacity": 1,
@@ -582,7 +582,7 @@ exports[`Collapse should open from default height 2`] = `
       className="collapse-fade"
       style={
         Object {
-          "background": "linear-gradient(transparent, #FFF 80%)",
+          "background": "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%)",
           "bottom": 0,
           "height": 50,
           "opacity": 1,
@@ -616,7 +616,7 @@ exports[`Collapse should open from default height 3`] = `
       className="collapse-fade"
       style={
         Object {
-          "background": "linear-gradient(transparent, #FFF 80%)",
+          "background": "linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 80%)",
           "bottom": 0,
           "height": 50,
           "opacity": 0,

diff --git a/tests/collapse.tsx b/tests/collapse.tsx
@@ -59,7 +59,13 @@ describe('Collapse', () => {
 
   it('should match snapshot with customized fade out', () => {
     const tree = renderer.create(
-      <Collapse open={false} fadeOut fadeColor="red" fadeHeight={10} />
+      <Collapse
+        open={false}
+        fadeOut
+        fadeColor="red"
+        fadeHeight={10}
+        transparentColor="rgba(0, 0, 0, 0)"
+      />
     );
 
     expect(tree).toMatchSnapshot();