Order Emotion styles before Sass styles (#161592)

## Summary fixes #161441 fixes #161464 The recent `EuiButtonEmpty`/`EuiButtonIcon` Emotion conversions have highlighted a CSS order/specificity flaw in Kibana compared to EUI - EUI orders its Sass _after_ its Emotion styles (see https://elastic.github.io/eui/#/), and Kibana orders Sass _before_ Emotion styles. I'm not totally sure why Greg set up Kibana's style order the way he did in #134919, but at this point, EUI has enough of its baseline atom components converted to Emotion that remaining components in Sass are all generally molecules or higher level components that need to come after Emotion. ### QA - [x] Test as many pages in Kibana as possible to ensure no visual regressions 🤞 --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Jul 13, 2023 · b9eae62 · b9eae62
1 parent 9e9a09c
commit b9eae62
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/packages/core/rendering/core-rendering-server-internal/src/views/template.tsx b/packages/core/rendering/core-rendering-server-internal/src/views/template.tsx
@@ -54,8 +54,8 @@ export const Template: FunctionComponent<Props> = ({
         <meta name="color-scheme" content="light dark" />
         {/* Inject EUI reset and global styles before all other component styles */}
         <meta name={EUI_STYLES_GLOBAL} />
-        <Styles darkMode={darkMode} stylesheetPaths={stylesheetPaths} />
         <meta name="emotion" />
+        <Styles darkMode={darkMode} stylesheetPaths={stylesheetPaths} />
         {/* Inject stylesheets into the <head> before scripts so that KP plugins with bundled styles will override them */}
         <meta name="add-styles-here" />
         <meta name="add-scripts-here" />

diff --git a/packages/kbn-storybook/templates/index.ejs b/packages/kbn-storybook/templates/index.ejs
@@ -15,6 +15,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta name="eui-global" />
+    <meta name="emotion" />
 
     <!-- Added for Kibana shared dependencies -->
     <script>
@@ -26,8 +27,6 @@
     <link id="eui-theme-css" href="kbn-ui-shared-deps-npm.v8.light.css" rel="stylesheet" />
     <!--                                      -->
 
-    <meta name="emotion" />
-
     <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
     htmlWebpackPlugin.files.css.forEach(file => { %>
     <link href="<%= file %>" rel="stylesheet" />

diff --git a/src/plugins/unified_histogram/public/panels/panels_resizable.tsx b/src/plugins/unified_histogram/public/panels/panels_resizable.tsx
@@ -61,7 +61,7 @@ export const PanelsResizable = ({
     []
   );
   const resizeWithPortalsHackButtonCss = css`
-    z-index: 3;
+    z-index: 3 !important; // !important can be removed once EuiResizableButton is converted to Emotion
   `;
   const resizeWithPortalsHackOverlayCss = css`
     position: absolute;
@@ -164,7 +164,9 @@ export const PanelsResizable = ({
 
   const { euiTheme } = useEuiTheme();
   const buttonCss = css`
-    && {
+    // The selectors here are intended to override EuiResizableButtons's Sass styles
+    // it can be removed once EuiResizableButton has been converted to Emotion
+    &.euiResizableButton.euiResizableButton--vertical {
       margin-top: -${euiTheme.size.base};
       margin-bottom: 0;
     }

diff --git a/x-pack/plugins/aiops/public/components/change_point_detection/change_points_table.tsx b/x-pack/plugins/aiops/public/components/change_point_detection/change_points_table.tsx
@@ -116,7 +116,11 @@ export const ChangePointsTable: FC<ChangePointsTableProps> = ({
       height: '80px',
       truncateText: false,
       valign: 'middle',
-      css: { display: 'block', padding: 0 },
+      css: {
+        // Extra specificity needed here to override Sass styles
+        // TODO: Can be removed once EuiTable has been converted to Emotion
+        ['&.euiTableCellContent']: { display: 'block', padding: 0 },
+      },
       render: (annotation: ChangePointAnnotation) => {
         return <MiniChartPreview annotation={annotation} fieldConfig={fieldConfig} />;
       },