Yoast · moorscode · Apr 5, 2019 · Apr 2, 2019 · Apr 3, 2019 · Apr 4, 2019
diff --git a/apps/components/tests/__snapshots__/appTest.js.snap b/apps/components/tests/__snapshots__/appTest.js.snap
@@ -155,21 +155,21 @@ exports[`App renders without problems 1`] = `
       className="ButtonsWrapper__ButtonsContainer-sc-1nb1s31-0 cDHlch"
     >
       <button
-        className="Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
+        className="Button__BaseButton-sc-32rbq-5 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 glyHEG"
         type="button"
       >
         BaseButton
       </button>
 
       <button
-        className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
+        className="Button__BaseButton-sc-32rbq-5 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 Button-sc-32rbq-4 dxagDO"
         type="button"
       >
         Button
       </button>
 
       <button
-        className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
+        className="Button__BaseButton-sc-32rbq-5 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 Button-sc-32rbq-4 dxagDO"
         type="button"
       >
         <svg
@@ -191,7 +191,7 @@ exports[`App renders without problems 1`] = `
 
       <button
         aria-label="IconButton with icon only"
-        className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
+        className="Button__BaseButton-sc-32rbq-5 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 Button-sc-32rbq-4 dxagDO"
         type="button"
       >
         <svg
@@ -211,7 +211,7 @@ exports[`App renders without problems 1`] = `
       </button>
 
       <button
-        className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
+        className="Button__BaseButton-sc-32rbq-5 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 Button-sc-32rbq-4 dxagDO"
         type="button"
       >
         <svg
@@ -248,14 +248,14 @@ exports[`App renders without problems 1`] = `
         className="ButtonsWrapper__Separator-sc-1nb1s31-1 ZmEFB"
       />
       <a
-        className="Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv LinkButton__BaseLinkButton-sc-8lzs74-0 dkXoPT"
+        className="LinkButton__BaseLinkButton-sc-8lzs74-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 eSBBKS"
         href="#someresource"
       >
         BaseLinkButton
       </a>
 
       <a
-        className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv LinkButton__BaseLinkButton-sc-8lzs74-0 dkXoPT"
+        className="LinkButton__BaseLinkButton-sc-8lzs74-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 Button-sc-32rbq-4 eDFihP"
         href="#someresource"
       >
         LinkButton
@@ -293,7 +293,7 @@ exports[`App renders without problems 1`] = `
       />
       <button
         aria-expanded={undefined}
-        className="YoastButton-gx5w7q-0 kHUgXc YoastButton-gx5w7q-1 bQXGlm"
+        className="YoastButton-gx5w7q-1 YoastButton-gx5w7q-0 dnvPfT"
         onClick={undefined}
         type="button"
       >
@@ -304,7 +304,7 @@ exports[`App renders without problems 1`] = `
 
       <button
         aria-expanded={undefined}
-        className="UpsellButton-sc-7vlxuh-1 nVzPF UpsellButton__UpsellButtonBase-sc-7vlxuh-2 cAGllX"
+        className="UpsellButton__UpsellButtonBase-sc-7vlxuh-2 UpsellButton-sc-7vlxuh-1 dMNgsz"
         onClick={undefined}
         type="button"
       >
@@ -337,7 +337,7 @@ exports[`App renders without problems 1`] = `
         className="ButtonsWrapper__Separator-sc-1nb1s31-1 ZmEFB"
       />
       <button
-        className="Button-sc-32rbq-2 emdVop Button-sc-32rbq-1 kYzALm Button-sc-32rbq-3 bYChMW IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 ITzLP"
+        className="IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 oyBPh"
         type="button"
       >
         <svg
@@ -357,7 +357,7 @@ exports[`App renders without problems 1`] = `
         Need help?
       </button>
       <button
-        className="Button-sc-32rbq-2 emdVop Button-sc-32rbq-1 kYzALm Button-sc-32rbq-3 bYChMW IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 ITzLP"
+        className="IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 oyBPh"
         type="button"
       >
         <svg
@@ -377,7 +377,7 @@ exports[`App renders without problems 1`] = `
         Settings
       </button>
       <button
-        className="Button-sc-32rbq-2 dpPCCR Button-sc-32rbq-1 kYzALm Button-sc-32rbq-3 bYChMW IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 ITzLP"
+        className="IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 jXoQXj"
         type="button"
       >
         <svg
@@ -397,7 +397,7 @@ exports[`App renders without problems 1`] = `
         Custom Hover
       </button>
       <button
-        className="Button-sc-32rbq-2 emdVop Button-sc-32rbq-1 JPjJJ Button-sc-32rbq-3 bYChMW IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 ITzLP"
+        className="IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 dpAKxO"
         type="button"
       >
         <svg
@@ -417,7 +417,7 @@ exports[`App renders without problems 1`] = `
         Custom Focus
       </button>
       <button
-        className="Button-sc-32rbq-2 emdVop Button-sc-32rbq-1 kYzALm Button-sc-32rbq-3 fEWBQa IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 ITzLP"
+        className="IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 gEmqXM"
         type="button"
       >
         <svg
@@ -437,7 +437,7 @@ exports[`App renders without problems 1`] = `
         Custom Active
       </button>
       <button
-        className="Button-sc-32rbq-2 emdVop Button-sc-32rbq-1 kYzALm Button-sc-32rbq-3 bYChMW IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 jHiVsN"
+        className="IconLabeledButton__IconLabelledBaseButton-sc-10fuids-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 gecabx"
         type="button"
       >
         <svg
@@ -464,7 +464,7 @@ exports[`App renders without problems 1`] = `
       </h2>
       <button
         aria-label="IconButton with icon only"
-        className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
+        className="Button__BaseButton-sc-32rbq-5 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 Button-sc-32rbq-4 dxagDO"
         type="button"
       >
         <svg
@@ -484,7 +484,7 @@ exports[`App renders without problems 1`] = `
       </button>
 
       <button
-        className="with-max-width Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
+        className="Button__BaseButton-sc-32rbq-5 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 with-max-width Button-sc-32rbq-4 dxagDO"
         type="button"
       >
         <svg
@@ -506,7 +506,7 @@ exports[`App renders without problems 1`] = `
 
       <button
         aria-expanded={undefined}
-        className="YoastButton-gx5w7q-0 ZkSNk YoastButton-gx5w7q-1 clbiFf"
+        className="YoastButton-gx5w7q-1 YoastButton-gx5w7q-0 fQIjQA"
         onClick={undefined}
         type="button"
       >
@@ -517,7 +517,7 @@ exports[`App renders without problems 1`] = `
 
       <button
         aria-expanded={undefined}
-        className="test-large-button YoastButton-gx5w7q-0 kHUgXc YoastButton-gx5w7q-1 bQXGlm"
+        className="YoastButton-gx5w7q-1 test-large-button YoastButton-gx5w7q-0 dnvPfT"
         onClick={undefined}
         type="button"
       >
@@ -547,15 +547,15 @@ exports[`App renders without problems 1`] = `
         Buttons
       </h3>
       <button
-        className="Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
+        className="Button__BaseButton-sc-32rbq-5 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 glyHEG"
         type="button"
       >
         Base
       </button>
 
       <button
         aria-expanded={undefined}
-        className="YoastButton-gx5w7q-0 ZkSNk YoastButton-gx5w7q-1 clbiFf"
+        className="YoastButton-gx5w7q-1 YoastButton-gx5w7q-0 fQIjQA"
         onClick={undefined}
         type="button"
       >
@@ -566,7 +566,7 @@ exports[`App renders without problems 1`] = `
 
       <button
         aria-expanded={undefined}
-        className="test-large-button YoastButton-gx5w7q-0 kHUgXc YoastButton-gx5w7q-1 bQXGlm"
+        className="YoastButton-gx5w7q-1 test-large-button YoastButton-gx5w7q-0 dnvPfT"
         onClick={undefined}
         type="button"
       >
@@ -577,7 +577,7 @@ exports[`App renders without problems 1`] = `
 
       <button
         aria-label="IconButton with icon only"
-        className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
+        className="Button__BaseButton-sc-32rbq-5 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 Button-sc-32rbq-4 dxagDO"
         type="button"
       >
         <svg
@@ -597,7 +597,7 @@ exports[`App renders without problems 1`] = `
       </button>
 
       <button
-        className="with-max-width Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv Button__BaseButton-sc-32rbq-5 ksmnMF"
+        className="Button__BaseButton-sc-32rbq-5 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 with-max-width Button-sc-32rbq-4 dxagDO"
         type="button"
       >
         <svg
@@ -621,28 +621,28 @@ exports[`App renders without problems 1`] = `
         Links
       </h3>
       <a
-        className="Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv LinkButton__BaseLinkButton-sc-8lzs74-0 dkXoPT"
+        className="LinkButton__BaseLinkButton-sc-8lzs74-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 eSBBKS"
         href="#somewhere1"
       >
         Base
       </a>
 
       <a
-        className="Button-sc-32rbq-4 iTjlOE Button-sc-32rbq-0 ixkmSo Button-sc-32rbq-2 jFAPie Button-sc-32rbq-1 jfEXPW Button-sc-32rbq-3 iRJtrv LinkButton__BaseLinkButton-sc-8lzs74-0 dkXoPT"
+        className="LinkButton__BaseLinkButton-sc-8lzs74-0 Button-sc-32rbq-3 Button-sc-32rbq-1 Button-sc-32rbq-2 Button-sc-32rbq-0 Button-sc-32rbq-4 eDFihP"
         href="#somewhere2"
       >
         Button
       </a>
 
       <a
-        className="YoastButton-gx5w7q-0 ZkSNk YoastLinkButton-dntyts-0 kwzqgY"
+        className="YoastLinkButton-dntyts-0 YoastButton-gx5w7q-0 kVjfWG"
         href="#somewhere4"
       >
         Color
       </a>
 
       <a
-        className="test-large-button YoastButton-gx5w7q-0 kHUgXc YoastLinkButton-dntyts-0 cWHZQQ"
+        className="YoastLinkButton-dntyts-0 test-large-button YoastButton-gx5w7q-0 exJvQq"
         href="#somewhere3"
       >
         Min width

diff --git a/packages/algolia-search/package.json b/packages/algolia-search/package.json
@@ -22,17 +22,17 @@
     "prop-types": "^15.6.0",
     "react": "16.6.3",
     "react-intl": "^2.4.0",
-    "styled-components": "^2.1.2"
+    "styled-components": "^4.2.0"
   },
   "devDependencies": {
     "babel-jest": "^24.5.0",
     "babel-loader": "^7.1.1",
-    "babel-plugin-styled-components": "^1.5.1",
+    "babel-plugin-styled-components": "^1.10.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "enzyme-to-json": "^3.3.3",
     "jest": "^24.5.0",
-    "jest-styled-components": "5.0.1",
+    "jest-styled-components": "^6.3.1",
     "react-test-renderer": "16.8.4"
   },
   "scripts": {

diff --git a/packages/algolia-search/src/AlgoliaSearcher.js b/packages/algolia-search/src/AlgoliaSearcher.js
@@ -302,7 +302,7 @@ class AlgoliaSearcher extends React.Component {
 	getSearchView() {
 		return (
 			<AlgoliaSearchWrapper
-				innerRef={ ( el ) => {
+				ref={ ( el ) => {
 					this.searchViewWrapper = el;
 				} }
 			>

diff --git a/packages/algolia-search/src/SearchResultDetail.js b/packages/algolia-search/src/SearchResultDetail.js
@@ -114,7 +114,7 @@ class SearchResultDetail extends React.Component {
 			<Detail
 				aria-label={ searchResulLabel }
 				tabIndex="-1"
-				innerRef={ ( el ) => {
+				ref={ ( el ) => {
 					this.detailWrapper = el;
 				} }
 			>

diff --git a/packages/algolia-search/tests/__snapshots__/AlgoliaSearcherTest.js.snap b/packages/algolia-search/tests/__snapshots__/AlgoliaSearcherTest.js.snap
@@ -1,33 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`the AlgoliaSearcher component with headingText matches the snapshot 1`] = `
-.c5 {
+.c4 {
   color: #fff;
   background: #64a60a;
   min-width: 152px;
   text-shadow: 0 0 2px #000;
   overflow: visible;
   cursor: pointer;
-}
-
-.c5::-moz-focus-inner {
-  border-width: 0;
-}
-
-.c5 span {
-  display: inherit;
-  -webkit-align-items: inherit;
-  -webkit-box-align: inherit;
-  -ms-flex-align: inherit;
-  align-items: inherit;
-  -webkit-box-pack: inherit;
-  -webkit-justify-content: inherit;
-  -ms-flex-pack: inherit;
-  justify-content: inherit;
-  width: 100%;
-}
-
-.c4 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -55,6 +35,23 @@ exports[`the AlgoliaSearcher component with headingText matches the snapshot 1`]
   transition: box-shadow 150ms ease-out;
 }
 
+.c4::-moz-focus-inner {
+  border-width: 0;
+}
+
+.c4 span {
+  display: inherit;
+  -webkit-align-items: inherit;
+  -webkit-box-align: inherit;
+  -ms-flex-align: inherit;
+  align-items: inherit;
+  -webkit-box-pack: inherit;
+  -webkit-justify-content: inherit;
+  -ms-flex-pack: inherit;
+  justify-content: inherit;
+  width: 100%;
+}
+
 .c4:hover,
 .c4:focus,
 .c4:active {
@@ -162,7 +159,7 @@ exports[`the AlgoliaSearcher component with headingText matches the snapshot 1`]
         type="text"
       />
       <button
-        className="c4 c5"
+        className="c4"
         type="submit"
       >
         <span>