Skip to content

[Emotion] Convert EuiPanel#5891

Merged
cchaos merged 16 commits intoelastic:mainfrom
cchaos:css-in-js/panel
May 23, 2022
Merged

[Emotion] Convert EuiPanel#5891
cchaos merged 16 commits intoelastic:mainfrom
cchaos:css-in-js/panel

Conversation

@cchaos
Copy link
Copy Markdown
Contributor

@cchaos cchaos commented May 10, 2022 •
edited
Loading

Lots of snapshot updates

EuiPanel

  • Removed explicit borderRadius classnames
  • Moved panelPaddingValues to be declared in resizable_panel
  • By using the useEuiPaddingCSS utility, EuiPanel's now have two more options for padding xs and xl
  • Simplified old legacy vs Amsterdam logic between hasBorder and hasShadow
  • Moved Amsterdam specific euiPanel() mixin to be the global_styles/ version

Other fixes

  • [EuiSplitPanel] Fix border radius by just setting overflow: hidden
  • [EuiCallOut] Fixed description margin when only child (my bad)

Utility fixes

  • Fixed useEuiPaddingCSS and useEuiBackgroundColorCSS to render css blocks so consuming components render the key name in the class
  • Fixed default size value of euiShadow

Checklist

  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Props have proper autodocs and playground toggles
  • [ ] Added documentation
  • [ ] Checked Code Sandbox works for any docs examples
  • Added or updated jest and cypress tests
  • [ ] Checked for breaking changes and labeled appropriately
  • [ ] Checked for accessibility including keyboard-only and screenreader modes
  • Updated the Figma library counterpart
  • A changelog entry exists and is marked appropriately

cchaos added 6 commits May 9, 2022 16:49
Move amsterdam panel overrides to global
d2dc7a7
[EuiPanel] Initial conversion complete
e65340c 
- Removed explicit `paddingSize` and `borderRadius` classnames.
- Fixed `useEuiPaddingCSS` and `useEuiBackgroundColorCSS` to render `css` blocks so consuming components render the key name in the class
- Fixed default size value of `euiShadow`
- Moved `panelPaddingValues` to be declared in resizable_panel
[EuiSplitPanel] Fix border radius by just setting overflow: hidden
24c213a
[EuiPanel] Put paddingSize class name modifiers back but only for p…
6233bc4 
…reviously supported sizes

- Fixes popovers and cards
Fix prop comment and default
583e491
Some fixes
e72d3f2 
- Fixe EuiCallOut description margin when only child
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented May 10, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

cchaos
cchaos commented May 10, 2022
View reviewed changes
src/components/panel/panel.style.ts Outdated
Comment on lines +32 to +37
radius: {
none: css``,
m: css`
border-radius: ${euiTheme.border.radius.medium};
`,
},
Copy link
Copy Markdown
Contributor Author

@cchaos cchaos May 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New pattern of nested styling based on prop values. This allowed me to write

styles.radius[borderRadius]

Since the key name would conflict with sizing or any other t-shirt type prop values without having to re-create a specific string. The only downside is that it sill only renders the final key like -m in the class name. So you could be situations where its -m-l not knowing which is for radius vs size.

Copy link
Copy Markdown
Contributor

@cee-chen cee-chen May 20, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super cool pattern! takes notes

The downside doesn't overly bother me, people probably shouldn't be looking at our classNames for semantic meaning in any case 🤔

src/components/panel/panel.tsx Outdated
import { euiPanelStyles } from './panel.style';

export const SIZES = PADDING_SIZES;
export type PanelPaddingSize = EuiPaddingSize;
Copy link
Copy Markdown
Contributor Author

@cchaos cchaos May 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

EuiPanel now gets its possible padding size values and styles from a single utility. 🙌

Merge remote-tracking branch 'origin/main' into css-in-js/panel
64c178d 
# Conflicts:
#	src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
#	src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
#	src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
#	src/components/popover/__snapshots__/popover.test.tsx.snap
#	src/components/tour/__snapshots__/tour_step.test.tsx.snap
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented May 10, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

@cchaos cchaos mentioned this pull request May 10, 2022
Merged
3 tasks
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented May 10, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

@cchaos cchaos mentioned this pull request May 12, 2022
Closed
49 tasks
@cchaos cchaos added this to the Elastic Stack 8.4 milestone May 16, 2022
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented May 19, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

@cchaos
Copy link
Copy Markdown
Contributor Author

cchaos commented May 19, 2022

@cee-chen
Copy link
Copy Markdown
Contributor

cee-chen commented May 19, 2022

Lol I assumed Greg had this - I'll grab this review tomorrow!

cee-chen
cee-chen reviewed May 20, 2022
View reviewed changes
cee-chen
cee-chen reviewed May 20, 2022
View reviewed changes
cee-chen
cee-chen reviewed May 20, 2022
View reviewed changes
cee-chen
cee-chen reviewed May 20, 2022
View reviewed changes
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented May 20, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

cee-chen
cee-chen reviewed May 20, 2022
View reviewed changes
cee-chen
cee-chen reviewed May 20, 2022
View reviewed changes
src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
</div>
<div
class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiComboBoxOptionsList euiPopover__panel euiPopover__panel-isAttached euiPopover__panel-noArrow euiPopover__panel-isOpen euiPopover__panel--bottom"
class="euiPanel euiPanel--plain euiComboBoxOptionsList euiPopover__panel euiPopover__panel-isAttached euiPopover__panel-noArrow euiPopover__panel-isOpen euiPopover__panel--bottom css-1pupmsc-euiPanel-grow-m-plain"
Copy link
Copy Markdown
Contributor

@cee-chen cee-chen May 20, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Marking all snapshots as viewed, 2022, colorized

woman rubberstamping a huge sheaf of paper very quickly

Copy link
Copy Markdown
Contributor Author

@cchaos cchaos May 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More snapshot updates coming with the removal of the padding class 🤣

@cee-chen
Copy link
Copy Markdown
Contributor

cee-chen commented May 20, 2022

That's all my comments I think! The rest LGTM!

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented May 20, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

cchaos added 2 commits May 23, 2022 10:26
Merge remote-tracking branch 'origin/main' into css-in-js/panel
c613f9e 
# Conflicts:
#	src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
[Review Feedback]:
6cd38cc 
- Renamed `PanelPaddingSize` to `PanelPaddingSize_Deprecated` and added comment
- Removed padding class names
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented May 23, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

@cchaos cchaos requested a review from cee-chen May 23, 2022 18:44
cee-chen
cee-chen reviewed May 23, 2022
View reviewed changes
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented May 23, 2022

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

cee-chen
cee-chen approved these changes May 23, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

@cchaos
Copy link
Copy Markdown
Contributor Author

cchaos commented May 23, 2022

Thank you @constancecchen !

@cchaos cchaos merged commit 8de2483 into elastic:main May 23, 2022
@cchaos cchaos deleted the css-in-js/panel branch May 23, 2022 22:01
@cchaos cchaos mentioned this pull request May 24, 2022
Merged
2 tasks
@thompsongl thompsongl mentioned this pull request Jun 8, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

2 more reviewers

@thompsongl thompsongl thompsongl left review comments

@cee-chen cee-chen cee-chen approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

Elastic Stack 8.4

Development

Successfully merging this pull request may close these issues.

4 participants

@cchaos @kibanamachine @cee-chen @thompsongl