Replace style with css in CSP plugin
#202487
Conversation
albertoblaz
added
release_note:skip
|
Pinging @elastic/kibana-cloud-security-posture (Team:Cloud Security) |
albertoblaz
force-pushed
the
replace-style-cloud-security-posture
branch
from
bc09a92 to
d50e01f
Compare
💚 Build Succeeded
Metrics [docs]Async chunks
Page load bundle
History
cc @albertoblaz |
| @@ -24,6 +25,7 @@ interface ChartPanelProps { | |||
| isError?: boolean; | |||
| rightSideItems?: ReactNode[]; | |||
| styles?: React.CSSProperties; | |||
There was a problem hiding this comment.
Why do we still need the styles if we are using css?
| @@ -24,6 +25,7 @@ interface ChartPanelProps { | |||
| isError?: boolean; | |||
| rightSideItems?: ReactNode[]; | |||
| styles?: React.CSSProperties; | |||
| css?: Interpolation<Theme>; | |||
There was a problem hiding this comment.
I saw how we are using this prop here, can we use a size prop instead if there are other components using this with different sizes?
| css?: Interpolation<Theme>; | |
| size?: 'small' | 'medium' | `large`; |
| @@ -104,7 +104,7 @@ const TotalIntegrationsCount = ({ | |||
| pageCount, | |||
| totalCount, | |||
| }: Record<'pageCount' | 'totalCount', number>) => ( | |||
| <EuiText size="xs" style={{ marginLeft: 8 }}> | |||
| <EuiText size="xs" css={{ marginLeft: 8 }}> | |||
There was a problem hiding this comment.
Should we use an euiTheme.size here?
| @@ -87,12 +87,14 @@ const CounterButtonLink = ({ | |||
| <EuiText | |||
| color={color} | |||
| css={css` | |||
| font-weight: ${euiTheme.font.weight.medium}; | |||
| font-size: 18px; | |||
There was a problem hiding this comment.
Should we use an euiTheme.size here? ( or the typography equivalent)
| @@ -72,7 +72,7 @@ const AccountDropDown = ({ | |||
| options: Array<{ value: string; label: string }>; | |||
| }) => ( | |||
| <EuiComboBox | |||
| style={{ width: 320 }} | |||
| css={{ width: 320 }} | |||
There was a problem hiding this comment.
Is this responsive?
If it's not we should raise this in a follow-up issue to use breakpoints if we can.
Summary
Part of the resolution of this issue:
stylewithemotion.css#149246Removes the
styleprop in React components and elements to avoid using inline styles. Instead, it uses now theemotion.cssprop to dynamically attach all styles to the nativeclassattribute.Motivation
Using inline styles at scale causes a performance penalty at rendering time. It's way more efficient to attach styles to a single or several classnames instead.
Checklist
Check the PR satisfies following conditions.
Reviewers should verify this PR satisfies this list as well.
release_note:*label is applied per the guidelines