github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

Order Emotion styles before Sass styles (#161592)

Browse source 
## Summary

fixes https://github.com/elastic/kibana/issues/161441
fixes https://github.com/elastic/kibana/issues/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 https://github.com/elastic/kibana/pull/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>
This commit is contained in:
Cee Chen 2023-07-13 07:41:17 -07:00 • committed by GitHub
parent 9e9a09cd33
commit b9eae62b5d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/core/rendering/core-rendering-server-internal/src/views/template.tsx
View file

@ -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" />

3
packages/kbn-storybook/templates/index.ejs
View file

@ -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" />

6
src/plugins/unified_histogram/public/panels/panels_resizable.tsx
View file

@ -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;
}

6
x-pack/plugins/aiops/public/components/change_point_detection/change_points_table.tsx
View file

@ -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} />;
},