Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[v4][Collapsible] Remove componentWillReceiveProp from Collapsible #1670

Merged
merged 2 commits into from Jun 17, 2019
Merged

[v4][Collapsible] Remove componentWillReceiveProp from Collapsible #1670

merged 2 commits into from Jun 17, 2019

Conversation

AndrewMusgrave
Copy link
Member

@AndrewMusgrave AndrewMusgrave commented Jun 12, 2019 •
edited

WHY are these changes introduced?

Final fix in ##519 馃帀

WHAT is this pull request doing?

@dleroux and I

  • Removed componentWillReceiveProps / make collapsible a functional component
  • Simplified the animation using css vars
  • Added a duration function to slightly increase the animation speed when collapsing larger areas

How to 馃帺

  • percy + tests
  • storybook deploy
import React, {useState, useCallback} from 'react';
import {Page, Select, Collapsible, TextContainer, Button, Stack} from '../src';

const options = [
  {label: 'short', value: 'short'},
  {label: 'medium', value: 'medium'},
  {label: 'long', value: 'long'},
  {label: 'really long', value: 'really long'},
];

export default function Playground() {
  const [selected, setSelected] = useState('short');
  const [open, setOpen] = useState(false);

  const handleChange = useCallback((value) => {
    setSelected(value);
  }, []);

  const handleToggle = useCallback(
    () => {
      setOpen(!open);
    },
    [open],
  );

  let content;
  switch (selected) {
    case options[0].value:
      content = `
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus odio, convallis sit amet tortor ut, pellentesque tincidunt dui. In non mattis urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus mi arcu, volutpat eget risus vel, pretium vulputate magna. Donec a faucibus leo. Nunc erat est, vulputate ut metus laoreet, tempus commodo libero. Ut consequat diam nunc, eget malesuada neque suscipit vel. Donec a purus hendrerit, convallis elit vel, egestas nisi. Sed euismod rhoncus eros et elementum. Praesent luctus metus sit amet tincidunt sagittis. Pellentesque id commodo purus. Quisque eget dui nulla. Nam libero tellus, congue sit amet pulvinar ut, interdum sed erat.
      `;
      break;
    case options[1].value:
      content = `
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus odio, convallis sit amet tortor ut, pellentesque tincidunt dui. In non mattis urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus mi arcu, volutpat eget risus vel, pretium vulputate magna. Donec a faucibus leo. Nunc erat est, vulputate ut metus laoreet, tempus commodo libero. Ut consequat diam nunc, eget malesuada neque suscipit vel. Donec a purus hendrerit, convallis elit vel, egestas nisi. Sed euismod rhoncus eros et elementum. Praesent luctus metus sit amet tincidunt sagittis. Pellentesque id commodo purus. Quisque eget dui nulla. Nam libero tellus, congue sit amet pulvinar ut, interdum sed erat.

Sed euismod vel metus non sollicitudin. Aliquam nec mollis diam. Donec sit amet leo suscipit, vehicula eros id, efficitur mauris. Donec fringilla eu risus non venenatis. Nulla facilisi. Maecenas eget consequat lorem. Phasellus quis sem et orci mattis porttitor. Phasellus egestas est in neque aliquam, a placerat ipsum condimentum. Phasellus metus diam, finibus quis sagittis in, accumsan vel ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut elementum, erat vitae volutpat maximus, nulla mi finibus nisi, non consectetur nisl tellus ut sapien. Sed nisi urna, tincidunt nec lobortis vel, bibendum a metus. Quisque varius ipsum justo, ac suscipit mi euismod id. Nam sagittis lacinia velit, ut aliquam nibh lobortis sed.

Sed sed tincidunt libero. Sed mattis, quam eu ultricies auctor, lectus dolor tempor elit, eget vulputate lorem dolor sit amet felis. Vestibulum hendrerit orci et dui laoreet, elementum dictum tortor semper. Duis luctus lacus ut lectus feugiat, eget gravida nisl sollicitudin. Mauris scelerisque, libero fermentum faucibus porttitor, tortor neque euismod ex, eu laoreet arcu sem et nisl. Pellentesque eget euismod ipsum, a tristique ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Vivamus quis eleifend nunc. Nunc tincidunt id tellus et sodales. Aliquam elementum nunc vitae sem ornare, at mattis eros mattis. Nulla dignissim convallis nisi, a auctor mi scelerisque ac. Aliquam tincidunt porta mi, vel placerat diam ultricies a. Praesent faucibus mattis pellentesque. Maecenas interdum, dolor id consequat volutpat, sapien mi ultrices nulla, eget efficitur orci ex vel eros.
        `;
      break;
    case options[2].value:
      content = `
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus odio, convallis sit amet tortor ut, pellentesque tincidunt dui. In non mattis urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus mi arcu, volutpat eget risus vel, pretium vulputate magna. Donec a faucibus leo. Nunc erat est, vulputate ut metus laoreet, tempus commodo libero. Ut consequat diam nunc, eget malesuada neque suscipit vel. Donec a purus hendrerit, convallis elit vel, egestas nisi. Sed euismod rhoncus eros et elementum. Praesent luctus metus sit amet tincidunt sagittis. Pellentesque id commodo purus. Quisque eget dui nulla. Nam libero tellus, congue sit amet pulvinar ut, interdum sed erat.

Sed euismod vel metus non sollicitudin. Aliquam nec mollis diam. Donec sit amet leo suscipit, vehicula eros id, efficitur mauris. Donec fringilla eu risus non venenatis. Nulla facilisi. Maecenas eget consequat lorem. Phasellus quis sem et orci mattis porttitor. Phasellus egestas est in neque aliquam, a placerat ipsum condimentum. Phasellus metus diam, finibus quis sagittis in, accumsan vel ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut elementum, erat vitae volutpat maximus, nulla mi finibus nisi, non consectetur nisl tellus ut sapien. Sed nisi urna, tincidunt nec lobortis vel, bibendum a metus. Quisque varius ipsum justo, ac suscipit mi euismod id. Nam sagittis lacinia velit, ut aliquam nibh lobortis sed.

Sed sed tincidunt libero. Sed mattis, quam eu ultricies auctor, lectus dolor tempor elit, eget vulputate lorem dolor sit amet felis. Vestibulum hendrerit orci et dui laoreet, elementum dictum tortor semper. Duis luctus lacus ut lectus feugiat, eget gravida nisl sollicitudin. Mauris scelerisque, libero fermentum faucibus porttitor, tortor neque euismod ex, eu laoreet arcu sem et nisl. Pellentesque eget euismod ipsum, a tristique ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Vivamus quis eleifend nunc. Nunc tincidunt id tellus et sodales. Aliquam elementum nunc vitae sem ornare, at mattis eros mattis. Nulla dignissim convallis nisi, a auctor mi scelerisque ac. Aliquam tincidunt porta mi, vel placerat diam ultricies a. Praesent faucibus mattis pellentesque. Maecenas interdum, dolor id consequat volutpat, sapien mi ultrices nulla, eget efficitur orci ex vel eros.

Ut at magna at enim hendrerit auctor sed pharetra nisi. Curabitur consequat egestas tortor efficitur euismod. Etiam rhoncus, nulla at vulputate sodales, nibh sem rutrum odio, a venenatis lectus lacus et turpis. Suspendisse dictum dui diam, at sagittis purus sagittis sit amet. In hac habitasse platea dictumst. Morbi auctor ante metus, id luctus lacus semper ac. Vivamus ut posuere turpis. Quisque interdum varius metus, eget bibendum diam hendrerit sit amet. Suspendisse quam velit, bibendum id gravida quis, volutpat a magna. Duis elementum vestibulum tortor et sagittis. Nunc quis justo sagittis, tempus mauris eget, blandit diam. Morbi dapibus aliquet diam, id viverra urna molestie quis. Curabitur semper luctus est eget pellentesque. Nulla tempor nisl non tortor ornare, in fermentum risus viverra. Nullam sit amet efficitur velit, eu accumsan sapien.

Vestibulum eleifend massa vitae justo mattis, eget venenatis augue sagittis. Duis aliquam maximus pharetra. Nulla sollicitudin cursus eros ut posuere. Proin rutrum est enim, ac elementum nunc dapibus et. Cras a lorem sit amet orci lacinia ultricies quis eu enim. Praesent sit amet volutpat libero, eget gravida dui. Integer sed ornare tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla purus est.
        `;
      break;
    case options[3].value:
      content = `
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus odio, convallis sit amet tortor ut, pellentesque tincidunt dui. In non mattis urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus mi arcu, volutpat eget risus vel, pretium vulputate magna. Donec a faucibus leo. Nunc erat est, vulputate ut metus laoreet, tempus commodo libero. Ut consequat diam nunc, eget malesuada neque suscipit vel. Donec a purus hendrerit, convallis elit vel, egestas nisi. Sed euismod rhoncus eros et elementum. Praesent luctus metus sit amet tincidunt sagittis. Pellentesque id commodo purus. Quisque eget dui nulla. Nam libero tellus, congue sit amet pulvinar ut, interdum sed erat.

Sed euismod vel metus non sollicitudin. Aliquam nec mollis diam. Donec sit amet leo suscipit, vehicula eros id, efficitur mauris. Donec fringilla eu risus non venenatis. Nulla facilisi. Maecenas eget consequat lorem. Phasellus quis sem et orci mattis porttitor. Phasellus egestas est in neque aliquam, a placerat ipsum condimentum. Phasellus metus diam, finibus quis sagittis in, accumsan vel ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut elementum, erat vitae volutpat maximus, nulla mi finibus nisi, non consectetur nisl tellus ut sapien. Sed nisi urna, tincidunt nec lobortis vel, bibendum a metus. Quisque varius ipsum justo, ac suscipit mi euismod id. Nam sagittis lacinia velit, ut aliquam nibh lobortis sed.

Sed sed tincidunt libero. Sed mattis, quam eu ultricies auctor, lectus dolor tempor elit, eget vulputate lorem dolor sit amet felis. Vestibulum hendrerit orci et dui laoreet, elementum dictum tortor semper. Duis luctus lacus ut lectus feugiat, eget gravida nisl sollicitudin. Mauris scelerisque, libero fermentum faucibus porttitor, tortor neque euismod ex, eu laoreet arcu sem et nisl. Pellentesque eget euismod ipsum, a tristique ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Vivamus quis eleifend nunc. Nunc tincidunt id tellus et sodales. Aliquam elementum nunc vitae sem ornare, at mattis eros mattis. Nulla dignissim convallis nisi, a auctor mi scelerisque ac. Aliquam tincidunt porta mi, vel placerat diam ultricies a. Praesent faucibus mattis pellentesque. Maecenas interdum, dolor id consequat volutpat, sapien mi ultrices nulla, eget efficitur orci ex vel eros.

Ut at magna at enim hendrerit auctor sed pharetra nisi. Curabitur consequat egestas tortor efficitur euismod. Etiam rhoncus, nulla at vulputate sodales, nibh sem rutrum odio, a venenatis lectus lacus et turpis. Suspendisse dictum dui diam, at sagittis purus sagittis sit amet. In hac habitasse platea dictumst. Morbi auctor ante metus, id luctus lacus semper ac. Vivamus ut posuere turpis. Quisque interdum varius metus, eget bibendum diam hendrerit sit amet. Suspendisse quam velit, bibendum id gravida quis, volutpat a magna. Duis elementum vestibulum tortor et sagittis. Nunc quis justo sagittis, tempus mauris eget, blandit diam. Morbi dapibus aliquet diam, id viverra urna molestie quis. Curabitur semper luctus est eget pellentesque. Nulla tempor nisl non tortor ornare, in fermentum risus viverra. Nullam sit amet efficitur velit, eu accumsan sapien.

Vestibulum eleifend massa vitae justo mattis, eget venenatis augue sagittis. Duis aliquam maximus pharetra. Nulla sollicitudin cursus eros ut posuere. Proin rutrum est enim, ac elementum nunc dapibus et. Cras a lorem sit amet orci lacinia ultricies quis eu enim. Praesent sit amet volutpat libero, eget gravida dui. Integer sed ornare tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla purus est.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus odio, convallis sit amet tortor ut, pellentesque tincidunt dui. In non mattis urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus mi arcu, volutpat eget risus vel, pretium vulputate magna. Donec a faucibus leo. Nunc erat est, vulputate ut metus laoreet, tempus commodo libero. Ut consequat diam nunc, eget malesuada neque suscipit vel. Donec a purus hendrerit, convallis elit vel, egestas nisi. Sed euismod rhoncus eros et elementum. Praesent luctus metus sit amet tincidunt sagittis. Pellentesque id commodo purus. Quisque eget dui nulla. Nam libero tellus, congue sit amet pulvinar ut, interdum sed erat.

Sed euismod vel metus non sollicitudin. Aliquam nec mollis diam. Donec sit amet leo suscipit, vehicula eros id, efficitur mauris. Donec fringilla eu risus non venenatis. Nulla facilisi. Maecenas eget consequat lorem. Phasellus quis sem et orci mattis porttitor. Phasellus egestas est in neque aliquam, a placerat ipsum condimentum. Phasellus metus diam, finibus quis sagittis in, accumsan vel ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut elementum, erat vitae volutpat maximus, nulla mi finibus nisi, non consectetur nisl tellus ut sapien. Sed nisi urna, tincidunt nec lobortis vel, bibendum a metus. Quisque varius ipsum justo, ac suscipit mi euismod id. Nam sagittis lacinia velit, ut aliquam nibh lobortis sed.

Sed sed tincidunt libero. Sed mattis, quam eu ultricies auctor, lectus dolor tempor elit, eget vulputate lorem dolor sit amet felis. Vestibulum hendrerit orci et dui laoreet, elementum dictum tortor semper. Duis luctus lacus ut lectus feugiat, eget gravida nisl sollicitudin. Mauris scelerisque, libero fermentum faucibus porttitor, tortor neque euismod ex, eu laoreet arcu sem et nisl. Pellentesque eget euismod ipsum, a tristique ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Vivamus quis eleifend nunc. Nunc tincidunt id tellus et sodales. Aliquam elementum nunc vitae sem ornare, at mattis eros mattis. Nulla dignissim convallis nisi, a auctor mi scelerisque ac. Aliquam tincidunt porta mi, vel placerat diam ultricies a. Praesent faucibus mattis pellentesque. Maecenas interdum, dolor id consequat volutpat, sapien mi ultrices nulla, eget efficitur orci ex vel eros.

Ut at magna at enim hendrerit auctor sed pharetra nisi. Curabitur consequat egestas tortor efficitur euismod. Etiam rhoncus, nulla at vulputate sodales, nibh sem rutrum odio, a venenatis lectus lacus et turpis. Suspendisse dictum dui diam, at sagittis purus sagittis sit amet. In hac habitasse platea dictumst. Morbi auctor ante metus, id luctus lacus semper ac. Vivamus ut posuere turpis. Quisque interdum varius metus, eget bibendum diam hendrerit sit amet. Suspendisse quam velit, bibendum id gravida quis, volutpat a magna. Duis elementum vestibulum tortor et sagittis. Nunc quis justo sagittis, tempus mauris eget, blandit diam. Morbi dapibus aliquet diam, id viverra urna molestie quis. Curabitur semper luctus est eget pellentesque. Nulla tempor nisl non tortor ornare, in fermentum risus viverra. Nullam sit amet efficitur velit, eu accumsan sapien.

Vestibulum eleifend massa vitae justo mattis, eget venenatis augue sagittis. Duis aliquam maximus pharetra. Nulla sollicitudin cursus eros ut posuere. Proin rutrum est enim, ac elementum nunc dapibus et. Cras a lorem sit amet orci lacinia ultricies quis eu enim. Praesent sit amet volutpat libero, eget gravida dui. Integer sed ornare tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla purus est.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus odio, convallis sit amet tortor ut, pellentesque tincidunt dui. In non mattis urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus mi arcu, volutpat eget risus vel, pretium vulputate magna. Donec a faucibus leo. Nunc erat est, vulputate ut metus laoreet, tempus commodo libero. Ut consequat diam nunc, eget malesuada neque suscipit vel. Donec a purus hendrerit, convallis elit vel, egestas nisi. Sed euismod rhoncus eros et elementum. Praesent luctus metus sit amet tincidunt sagittis. Pellentesque id commodo purus. Quisque eget dui nulla. Nam libero tellus, congue sit amet pulvinar ut, interdum sed erat.

Sed euismod vel metus non sollicitudin. Aliquam nec mollis diam. Donec sit amet leo suscipit, vehicula eros id, efficitur mauris. Donec fringilla eu risus non venenatis. Nulla facilisi. Maecenas eget consequat lorem. Phasellus quis sem et orci mattis porttitor. Phasellus egestas est in neque aliquam, a placerat ipsum condimentum. Phasellus metus diam, finibus quis sagittis in, accumsan vel ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut elementum, erat vitae volutpat maximus, nulla mi finibus nisi, non consectetur nisl tellus ut sapien. Sed nisi urna, tincidunt nec lobortis vel, bibendum a metus. Quisque varius ipsum justo, ac suscipit mi euismod id. Nam sagittis lacinia velit, ut aliquam nibh lobortis sed.

Sed sed tincidunt libero. Sed mattis, quam eu ultricies auctor, lectus dolor tempor elit, eget vulputate lorem dolor sit amet felis. Vestibulum hendrerit orci et dui laoreet, elementum dictum tortor semper. Duis luctus lacus ut lectus feugiat, eget gravida nisl sollicitudin. Mauris scelerisque, libero fermentum faucibus porttitor, tortor neque euismod ex, eu laoreet arcu sem et nisl. Pellentesque eget euismod ipsum, a tristique ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Vivamus quis eleifend nunc. Nunc tincidunt id tellus et sodales. Aliquam elementum nunc vitae sem ornare, at mattis eros mattis. Nulla dignissim convallis nisi, a auctor mi scelerisque ac. Aliquam tincidunt porta mi, vel placerat diam ultricies a. Praesent faucibus mattis pellentesque. Maecenas interdum, dolor id consequat volutpat, sapien mi ultrices nulla, eget efficitur orci ex vel eros.

Ut at magna at enim hendrerit auctor sed pharetra nisi. Curabitur consequat egestas tortor efficitur euismod. Etiam rhoncus, nulla at vulputate sodales, nibh sem rutrum odio, a venenatis lectus lacus et turpis. Suspendisse dictum dui diam, at sagittis purus sagittis sit amet. In hac habitasse platea dictumst. Morbi auctor ante metus, id luctus lacus semper ac. Vivamus ut posuere turpis. Quisque interdum varius metus, eget bibendum diam hendrerit sit amet. Suspendisse quam velit, bibendum id gravida quis, volutpat a magna. Duis elementum vestibulum tortor et sagittis. Nunc quis justo sagittis, tempus mauris eget, blandit diam. Morbi dapibus aliquet diam, id viverra urna molestie quis. Curabitur semper luctus est eget pellentesque. Nulla tempor nisl non tortor ornare, in fermentum risus viverra. Nullam sit amet efficitur velit, eu accumsan sapien.

Vestibulum eleifend massa vitae justo mattis, eget venenatis augue sagittis. Duis aliquam maximus pharetra. Nulla sollicitudin cursus eros ut posuere. Proin rutrum est enim, ac elementum nunc dapibus et. Cras a lorem sit amet orci lacinia ultricies quis eu enim. Praesent sit amet volutpat libero, eget gravida dui. Integer sed ornare tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla purus est.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus odio, convallis sit amet tortor ut, pellentesque tincidunt dui. In non mattis urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus mi arcu, volutpat eget risus vel, pretium vulputate magna. Donec a faucibus leo. Nunc erat est, vulputate ut metus laoreet, tempus commodo libero. Ut consequat diam nunc, eget malesuada neque suscipit vel. Donec a purus hendrerit, convallis elit vel, egestas nisi. Sed euismod rhoncus eros et elementum. Praesent luctus metus sit amet tincidunt sagittis. Pellentesque id commodo purus. Quisque eget dui nulla. Nam libero tellus, congue sit amet pulvinar ut, interdum sed erat.

Sed euismod vel metus non sollicitudin. Aliquam nec mollis diam. Donec sit amet leo suscipit, vehicula eros id, efficitur mauris. Donec fringilla eu risus non venenatis. Nulla facilisi. Maecenas eget consequat lorem. Phasellus quis sem et orci mattis porttitor. Phasellus egestas est in neque aliquam, a placerat ipsum condimentum. Phasellus metus diam, finibus quis sagittis in, accumsan vel ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut elementum, erat vitae volutpat maximus, nulla mi finibus nisi, non consectetur nisl tellus ut sapien. Sed nisi urna, tincidunt nec lobortis vel, bibendum a metus. Quisque varius ipsum justo, ac suscipit mi euismod id. Nam sagittis lacinia velit, ut aliquam nibh lobortis sed.

Sed sed tincidunt libero. Sed mattis, quam eu ultricies auctor, lectus dolor tempor elit, eget vulputate lorem dolor sit amet felis. Vestibulum hendrerit orci et dui laoreet, elementum dictum tortor semper. Duis luctus lacus ut lectus feugiat, eget gravida nisl sollicitudin. Mauris scelerisque, libero fermentum faucibus porttitor, tortor neque euismod ex, eu laoreet arcu sem et nisl. Pellentesque eget euismod ipsum, a tristique ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Vivamus quis eleifend nunc. Nunc tincidunt id tellus et sodales. Aliquam elementum nunc vitae sem ornare, at mattis eros mattis. Nulla dignissim convallis nisi, a auctor mi scelerisque ac. Aliquam tincidunt porta mi, vel placerat diam ultricies a. Praesent faucibus mattis pellentesque. Maecenas interdum, dolor id consequat volutpat, sapien mi ultrices nulla, eget efficitur orci ex vel eros.

Ut at magna at enim hendrerit auctor sed pharetra nisi. Curabitur consequat egestas tortor efficitur euismod. Etiam rhoncus, nulla at vulputate sodales, nibh sem rutrum odio, a venenatis lectus lacus et turpis. Suspendisse dictum dui diam, at sagittis purus sagittis sit amet. In hac habitasse platea dictumst. Morbi auctor ante metus, id luctus lacus semper ac. Vivamus ut posuere turpis. Quisque interdum varius metus, eget bibendum diam hendrerit sit amet. Suspendisse quam velit, bibendum id gravida quis, volutpat a magna. Duis elementum vestibulum tortor et sagittis. Nunc quis justo sagittis, tempus mauris eget, blandit diam. Morbi dapibus aliquet diam, id viverra urna molestie quis. Curabitur semper luctus est eget pellentesque. Nulla tempor nisl non tortor ornare, in fermentum risus viverra. Nullam sit amet efficitur velit, eu accumsan sapien.

Vestibulum eleifend massa vitae justo mattis, eget venenatis augue sagittis. Duis aliquam maximus pharetra. Nulla sollicitudin cursus eros ut posuere. Proin rutrum est enim, ac elementum nunc dapibus et. Cras a lorem sit amet orci lacinia ultricies quis eu enim. Praesent sit amet volutpat libero, eget gravida dui. Integer sed ornare tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla purus est.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus odio, convallis sit amet tortor ut, pellentesque tincidunt dui. In non mattis urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus mi arcu, volutpat eget risus vel, pretium vulputate magna. Donec a faucibus leo. Nunc erat est, vulputate ut metus laoreet, tempus commodo libero. Ut consequat diam nunc, eget malesuada neque suscipit vel. Donec a purus hendrerit, convallis elit vel, egestas nisi. Sed euismod rhoncus eros et elementum. Praesent luctus metus sit amet tincidunt sagittis. Pellentesque id commodo purus. Quisque eget dui nulla. Nam libero tellus, congue sit amet pulvinar ut, interdum sed erat.

Sed euismod vel metus non sollicitudin. Aliquam nec mollis diam. Donec sit amet leo suscipit, vehicula eros id, efficitur mauris. Donec fringilla eu risus non venenatis. Nulla facilisi. Maecenas eget consequat lorem. Phasellus quis sem et orci mattis porttitor. Phasellus egestas est in neque aliquam, a placerat ipsum condimentum. Phasellus metus diam, finibus quis sagittis in, accumsan vel ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut elementum, erat vitae volutpat maximus, nulla mi finibus nisi, non consectetur nisl tellus ut sapien. Sed nisi urna, tincidunt nec lobortis vel, bibendum a metus. Quisque varius ipsum justo, ac suscipit mi euismod id. Nam sagittis lacinia velit, ut aliquam nibh lobortis sed.

Sed sed tincidunt libero. Sed mattis, quam eu ultricies auctor, lectus dolor tempor elit, eget vulputate lorem dolor sit amet felis. Vestibulum hendrerit orci et dui laoreet, elementum dictum tortor semper. Duis luctus lacus ut lectus feugiat, eget gravida nisl sollicitudin. Mauris scelerisque, libero fermentum faucibus porttitor, tortor neque euismod ex, eu laoreet arcu sem et nisl. Pellentesque eget euismod ipsum, a tristique ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Vivamus quis eleifend nunc. Nunc tincidunt id tellus et sodales. Aliquam elementum nunc vitae sem ornare, at mattis eros mattis. Nulla dignissim convallis nisi, a auctor mi scelerisque ac. Aliquam tincidunt porta mi, vel placerat diam ultricies a. Praesent faucibus mattis pellentesque. Maecenas interdum, dolor id consequat volutpat, sapien mi ultrices nulla, eget efficitur orci ex vel eros.

Ut at magna at enim hendrerit auctor sed pharetra nisi. Curabitur consequat egestas tortor efficitur euismod. Etiam rhoncus, nulla at vulputate sodales, nibh sem rutrum odio, a venenatis lectus lacus et turpis. Suspendisse dictum dui diam, at sagittis purus sagittis sit amet. In hac habitasse platea dictumst. Morbi auctor ante metus, id luctus lacus semper ac. Vivamus ut posuere turpis. Quisque interdum varius metus, eget bibendum diam hendrerit sit amet. Suspendisse quam velit, bibendum id gravida quis, volutpat a magna. Duis elementum vestibulum tortor et sagittis. Nunc quis justo sagittis, tempus mauris eget, blandit diam. Morbi dapibus aliquet diam, id viverra urna molestie quis. Curabitur semper luctus est eget pellentesque. Nulla tempor nisl non tortor ornare, in fermentum risus viverra. Nullam sit amet efficitur velit, eu accumsan sapien.

Vestibulum eleifend massa vitae justo mattis, eget venenatis augue sagittis. Duis aliquam maximus pharetra. Nulla sollicitudin cursus eros ut posuere. Proin rutrum est enim, ac elementum nunc dapibus et. Cras a lorem sit amet orci lacinia ultricies quis eu enim. Praesent sit amet volutpat libero, eget gravida dui. Integer sed ornare tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas fringilla purus est.
        `;
      break;
  }

  return (
    <Page title="Playground">
      <Stack>
        <Select
          label="Switch Collapsible content"
          options={options}
          onChange={handleChange}
          value={selected}
        />
        <Button onClick={handleToggle}>Toggle collapsible</Button>
      </Stack>
      <Collapsible open={open} id="collapsible">
        <TextContainer>{content}</TextContainer>
      </Collapsible>
    </Page>
  );
}

@BPScott BPScott temporarily deployed to polaris-react-pr-1670 June 12, 2019 16:41 Inactive
@BPScott BPScott temporarily deployed to polaris-react-pr-1670 June 12, 2019 17:00 Inactive
@BPScott BPScott temporarily deployed to polaris-react-pr-1670 June 12, 2019 17:02 Inactive
AndrewMusgrave
AndrewMusgrave commented Jun 12, 2019
View reviewed changes
src/components/Collapsible/tests/Collapsible.test.tsx
@@ -5,18 +5,6 @@ import Collapsible from '../Collapsible';
describe('<Collapsible />', () => {
const ariaHiddenSelector = '[aria-hidden=true]';

it('does not render its children and indicates hidden with aria-hidden', () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We keep the collapsed content in the DOM now for our animation. Does one see a problem with that?

@AndrewMusgrave AndrewMusgrave added the 馃Skip Changelog Causes CI to ignore changelog update check. label Jun 12, 2019
@BPScott
Copy link
Member

BPScott commented Jun 12, 2019

Aww yiss. Not checked the code but this is a fantastic milestone!

Let's configure our react/no-unsafe eslint rule to enable the checkAliases option so that it'll shout at us in the future if we try and use any of the unprefixed unsafe methods in the future. (Currently this rule is enabled in eslint-plugin-shopify but the checkAliases param the default of false).

https://github.com/yannickcr/eslint-plugin-react/blob/45833426924fd70971265ff6fa4f2e8845c77239/docs/rules/no-unsafe.md

@dleroux
Copy link
Contributor

dleroux commented Jun 17, 2019

Added a duration function to slightly increase the animation speed when collapsing larger areas

It actually slows it down, which is want we want. Just so that it doesn't play out really fast to reach the desired height in the same amount of time.

@dleroux
Copy link
Contributor

dleroux commented Jun 17, 2019

Looks good! I don't see an issue with simply hiding the content given the nature of this component, but when we are ready we should definitely test out instances of it in web.

alex-page
alex-page approved these changes Jun 17, 2019
View reviewed changes
Copy link
Member

@alex-page alex-page left a comment •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me, 馃帺 in firefox.

One minor problem I have with will-change is that is should be added and removed.

...if an element will change when it is clicked, then setting up will-change when that element is hovered gives the browser enough time to optimize for that change

We could add will-change to the collapsible container when hovering on the button.

The optimizations that the browser makes for changes that are about to occur are usually costly and, as we mentioned earlier, can take up much of the machine鈥檚 resources. The usual browser behavior for optimizations that it makes is to remove these optimizations and revert back to normal behavior as soon as it can. However, will-change overrides this behavior maintaining the optimizations for much longer than the browser would otherwise do.

As such, you should always remember to remove will-change after the element is done changing, so the browser can recover whatever resources the optimizations are claiming.

We could remove will-change when the transition is done.

@johanstromqvist
Copy link
Contributor

Haven't been able to test it yet, but love the dynamic approach!

@AndrewMusgrave
Copy link
Member Author

Going to merge this in without the animation improvements and handle those in a follow-up

@AndrewMusgrave AndrewMusgrave merged commit 7a916de into version-4.0.0 Jun 17, 2019
@AndrewMusgrave AndrewMusgrave deleted the col-rm-cwrp branch June 17, 2019 20:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dleroux dleroux dleroux approved these changes

@alex-page alex-page alex-page approved these changes

@johanstromqvist johanstromqvist Awaiting requested review from johanstromqvist

Assignees
No one assigned
Labels
馃Skip Changelog Causes CI to ignore changelog update check.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@AndrewMusgrave @BPScott @dleroux @johanstromqvist @alex-page