[SharedUX] Remove SCSS from kibana_react #204497
Conversation
tsullivan
force-pushed
the
remove-sass/kibana-react
branch
2 times, most recently
from
b052f17 to
d4c9f09
Compare
tsullivan
force-pushed
the
remove-sass/kibana-react
branch
from
cbe14e7 to
a6c5da4
Compare
| @@ -7,9 +7,5 @@ | |||
| * License v3.0 only", or the "Server Side Public License, v 1". | |||
| */ | |||
|
|
|||
| export type { KibanaPageTemplateSolutionNavProps } from './solution_nav'; | |||
| export { KibanaPageTemplateSolutionNav } from './solution_nav'; | |||
There was a problem hiding this comment.
KibanaPageTemplateSolutionNav is unused in Kibana!
| export type { KibanaPageTemplateSolutionNavAvatarProps } from './solution_nav_avatar'; | ||
| export { KibanaPageTemplateSolutionNavAvatar } from './solution_nav_avatar'; | ||
| export type { KibanaPageTemplateSolutionNavCollapseButtonProps } from './solution_nav_collapse_button'; | ||
| export { KibanaPageTemplateSolutionNavCollapseButton } from './solution_nav_collapse_button'; |
There was a problem hiding this comment.
KibanaPageTemplateSolutionNavCollapseButton is unused in Kibana!
| <div className={'urlTemplateEditor__container'} onKeyDown={handleKeyDown}> | ||
| <div | ||
| data-test-subj="url-template-editor-container" | ||
| className={editorStyle} |
There was a problem hiding this comment.
I'm not entirely sure why we're not able to leverage @emotion/react and set the css property on the div.
There was a problem hiding this comment.
Should you be using import { css } from '@emotion/react' instead of import { css } from '@emotion/css' (see elastic/eui#6828 (comment))? When I tried that, it works 🤔
| { | ||
| [`kbnPageTemplateSolutionNavAvatar--${size}`]: size, | ||
| [pageTemplateSolutionNavAvatarStyles.xxl]: size === 'xxl', |
There was a problem hiding this comment.
I'm not entirely sure why we're not able to leverage @emotion/react and set the css property on the EuiAvatar.
There was a problem hiding this comment.
I'm wondering the same. Is there a reason?
It should just be something like:
css={[pageTemplateSolutionNavAvatarStyles.base, size === 'xxl' && pageTemplateSolutionNavAvatarStyles.xxl]}There was a problem hiding this comment.
I tried a few variations, including removing the className prop altogether, but unfortunately I haven't found the magical incantation needed. I wonder if it's a Babel configuration thing.
There was a problem hiding this comment.
The css prop needs to be supported via babel preset, yes. I thought this is done for Kibana globally, but maybe not? 🤔
| base: css` | ||
| ${css(useEuiShadow('s'))}; | ||
| `, | ||
| xxl: css` |
There was a problem hiding this comment.
@elastic/cloud-security-posture can you review and test this? The xxl style is only used in src/plugins/kibana_react/public/page_template/no_data_page/no_data_page_body/no_data_page_body.tsx and that is only used in:
x-pack/solutions/security/plugins/cloud_security_posturex-pack/solutions/security/plugins/cloud_defend
tsullivan
added
release_note:skip
💚 Build Succeeded
Metrics [docs]Module Count
Async chunks
Page load bundle
Unknown metric groupsmiscellaneous assets size
History
|
Summary
Part of https://github.com/elastic/kibana-team/issues/1082
Removes all Sass files in
src/plugins/kibana_reactto replace with styles declared with Emotion. This PR does not include any changes that would be noticeable by end-users. It changes the internals to use a different technology for styling components.References