Emotion: Add main package with version 10 (#21560)

* Update version and snapshots

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

package.json

@@ -221,6 +221,7 @@
     "core-js": "2.6.9",
     "core-js": "2.6.9",
     "d3": "5.15.0",
     "d3": "5.15.0",
     "d3-scale-chromatic": "1.5.0",
     "d3-scale-chromatic": "1.5.0",
+    "emotion": "10.0.27",
     "eventemitter3": "2.0.3",
     "eventemitter3": "2.0.3",
     "fast-text-encoding": "^1.0.0",
     "fast-text-encoding": "^1.0.0",
     "file-saver": "1.3.8",
     "file-saver": "1.3.8",

packages/grafana-toolkit/README.md

@@ -169,7 +169,7 @@ loadPluginCss({
 });
 });
 ```
 ```
 
 
-You must add `@grafana/runtime` to your plugin dependencies by running `yarn add @grafana/runtime` or `npm instal @grafana/runtime`.
+You must add `@grafana/runtime` to your plugin dependencies by running `yarn add @grafana/runtime` or `npm install @grafana/runtime`.
 
 
 > Note that in this case static files (png, svg, json, html) are all copied to dist directory when the plugin is bundled. Relative paths to those files does not change!
 > Note that in this case static files (png, svg, json, html) are all copied to dist directory when the plugin is bundled. Relative paths to those files does not change!
 
 
@@ -179,7 +179,7 @@ Starting from Grafana 6.2 *our suggested way* for styling plugins is by using [E
 To start using Emotion, you first must add it to your plugin dependencies:
 To start using Emotion, you first must add it to your plugin dependencies:
 
 
 ```
 ```
-  yarn add "@emotion/core"@10.0.14
+  yarn add "emotion"@10.0.27
 ```
 ```
 
 
 Then, import `css` function from Emotion:
 Then, import `css` function from Emotion:

packages/grafana-ui/package.json

@@ -36,6 +36,7 @@
     "bizcharts": "^3.5.5",
     "bizcharts": "^3.5.5",
     "classnames": "2.2.6",
     "classnames": "2.2.6",
     "d3": "5.15.0",
     "d3": "5.15.0",
+    "emotion": "10.0.27",
     "immutable": "3.8.2",
     "immutable": "3.8.2",
     "jquery": "3.4.1",
     "jquery": "3.4.1",
     "lodash": "4.17.15",
     "lodash": "4.17.15",

packages/grafana-ui/src/components/Button/__snapshots__/Button.test.tsx.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 
-exports[`Button renders correct html 1`] = `"<button class=\\"css-uzitec-button\\" type=\\"button\\"><span class=\\"css-1beih13\\"><span class=\\"css-xhe2zh\\"><i class=\\"fa fa-plus\\"></i></span><span>Click me</span></span></button>"`;
+exports[`Button renders correct html 1`] = `"<button class=\\"css-1kiu3dy-button\\" type=\\"button\\"><span class=\\"css-1beih13\\"><span class=\\"css-xhe2zh\\"><i class=\\"fa fa-plus\\"></i></span><span>Click me</span></span></button>"`;
 
 
-exports[`LinkButton renders correct html 1`] = `"<a class=\\"css-uzitec-button\\"><span class=\\"css-1beih13\\"><span class=\\"css-xhe2zh\\"><i class=\\"fa fa-plus\\"></i></span><span>Click me</span></span></a>"`;
+exports[`LinkButton renders correct html 1`] = `"<a class=\\"css-1kiu3dy-button\\"><span class=\\"css-1beih13\\"><span class=\\"css-xhe2zh\\"><i class=\\"fa fa-plus\\"></i></span><span>Click me</span></span></a>"`;

packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap

@@ -2,7 +2,7 @@
 
 
 exports[`CallToActionCard rendering when message and footer provided 1`] = `
 exports[`CallToActionCard rendering when message and footer provided 1`] = `
 <div
 <div
-  class="css-1ph0cdx-call-to-action-card"
+  class="css-1ud9puf-call-to-action-card"
 >
 >
   <div
   <div
     class="css-m2iibx"
     class="css-m2iibx"
@@ -24,7 +24,7 @@ exports[`CallToActionCard rendering when message and footer provided 1`] = `
 
 
 exports[`CallToActionCard rendering when message and no footer provided 1`] = `
 exports[`CallToActionCard rendering when message and no footer provided 1`] = `
 <div
 <div
-  class="css-1ph0cdx-call-to-action-card"
+  class="css-1ud9puf-call-to-action-card"
 >
 >
   <div
   <div
     class="css-m2iibx"
     class="css-m2iibx"
@@ -41,7 +41,7 @@ exports[`CallToActionCard rendering when message and no footer provided 1`] = `
 
 
 exports[`CallToActionCard rendering when no message and footer provided 1`] = `
 exports[`CallToActionCard rendering when no message and footer provided 1`] = `
 <div
 <div
-  class="css-1ph0cdx-call-to-action-card"
+  class="css-1ud9puf-call-to-action-card"
 >
 >
   <a
   <a
     href="http://dummy.link"
     href="http://dummy.link"

public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap

@@ -15,13 +15,13 @@ exports[`TimeSyncButton should render component 1`] = `
     >
     >
       <button
       <button
         aria-label="Synced times"
         aria-label="Synced times"
-        className="btn navbar-button navbar-button--attached explore-active-button-glow css-14r9fpj-timePickerSynced"
+        className="btn navbar-button navbar-button--attached explore-active-button-glow css-1tn4rnx-timePickerSynced"
         onClick={[Function]}
         onClick={[Function]}
         onMouseEnter={[Function]}
         onMouseEnter={[Function]}
         onMouseLeave={[Function]}
         onMouseLeave={[Function]}
       >
       >
         <i
         <i
-          className="fa fa-link css-xmj56l-topPadding icon-brand-gradient"
+          className="fa fa-link css-1c3xqzq-topPadding icon-brand-gradient"
         />
         />
       </button>
       </button>
     </PopoverController>
     </PopoverController>