Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Delete remaining component-specific mixins #8055

Merged
merged 4 commits into from
Oct 2, 2024
Merged

Delete remaining component-specific mixins #8055

merged 4 commits into from
Oct 2, 2024

Conversation

cee-chen
Copy link
Contributor

@cee-chen cee-chen commented Oct 2, 2024 •
edited
Loading

Summary

I f'ed up in #8031 and deleted some component-specific Sass variables that were still being used by component-specific Sass mixins that I hadn't yet removed from Kibana 🙃 (specifically, the @euiPanel, @euiButton, and @euiToolTipTitle mixins)

I'm kind of shocked our linter/build pipeline didn't catch the issue - Kibana's build CI did however, and it's holding up elastic/kibana#194619.

Rather than revert or monkeypatch the failure, I'm opting to move forward with Even More Sass Deletions. See:

QA

N/A

General checklist

  • Release checklist
    • A changelog entry exists and is marked appropriately.

@cee-chen cee-chen force-pushed the sass/remove-remaining-component-mixins branch from 4e6754c to 5716f34 Compare October 2, 2024 01:36
@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

@cee-chen cee-chen marked this pull request as ready for review October 2, 2024 02:10
@cee-chen cee-chen requested a review from a team as a code owner October 2, 2024 02:10
mgadewoll
mgadewoll approved these changes Oct 2, 2024
View reviewed changes
Copy link
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

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

🚢 🐈‍⬛ Thanks for fixing it by converting it further! 🎉

@cee-chen cee-chen merged commit 6bf25b4 into elastic:main Oct 2, 2024
6 checks passed
@cee-chen cee-chen deleted the sass/remove-remaining-component-mixins branch October 2, 2024 16:02
@cee-chen cee-chen mentioned this pull request Oct 2, 2024
Merged
cee-chen added a commit to elastic/kibana that referenced this pull request Oct 4, 2024
@cee-chen
Upgrade EUI to v96.1.0 (#194619)
19e37bf 
`v95.12.0`⏩`v96.1.0`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

## [`v96.0.0`](https://github.com/elastic/eui/releases/v96.0.0)

- Improved `EuiPageHeader`/`EuiPageTemplate.Header`'s responsive UX:
([#8044](elastic/eui#8044))
- `rightSideItems` are no longer pushed to the side by wide `tabs`
content
- `rightSideItems` now wrap more responsively at smaller container
widths
- Updated `EuiDraggable` with a new `usePortal` prop.
([#8048](elastic/eui#8048))
- This prop portals the dragged element to the body, allowing it to
escape stacking contexts which prevents buggy drag positioning in e.g.
popovers, modals, and flyouts.

**Bug fixes**

- Fixed `EuiProvider`'s system color mode detection causing errors
during server-side rendering
([#8040](elastic/eui#8040))
- Fixed an `EuiDataGrid` rendering bug that was causing bouncing
scrollbar issues ([#8041](elastic/eui#8041))
- Fixed `EuiSearchBox` skips input when running with React 18 in Legacy
Mode ([#8047](elastic/eui#8047))

**Deprecations**

- Deprecated `EuiPopover`'s `hasDragDrop` prop. Use `EuiDraggable`'s new
`usePortal` prop instead.
([#8048](elastic/eui#8048))

**Breaking changes**

- Removed the following exported `.css` files:
([#8045](elastic/eui#8045))
  - `@elastic/eui/dist/eui_theme_light.css`
  - `@elastic/eui/dist/eui_theme_light.min.css`
  - `@elastic/eui/dist/eui_theme_dark.css`
  - `@elastic/eui/dist/eui_theme_dark.min.css`
- All EUI components are now on CSS-in-JS. A CSS file/import in
consuming applications is no longer needed, and is safe to remove.
([#8045](elastic/eui#8045))
- Removed all `src/theme/legacy` Sass exports
([#8054](elastic/eui#8054))

**CSS-in-JS conversions**

- Removed the following component-specific Sass variables:
([#8031](elastic/eui#8031))
  - `$euiButtonColorDisabled`
  - `$euiButtonColorDisabledText`
  - `$euiButtonColorGhostDisabled`
  - `$euiButtonFontWeight`
  - `$euiFormControlIconSizes`
  - `$euiFormControlLayoutGroupInputHeight`
  - `$euiFormControlLayoutGroupInputCompressedHeight`
  - `$euiFormControlLayoutGroupInputCompressedBorderRadius`
  - `$euiPageSidebarMinWidth`
  - `$euiPageDefaultMaxWidth`
  - `$euiPanelPaddingModifiers`
  - `$euiPanelBorderRadiusModifiers`
  - `$euiPanelBackgroundColorModifiers`
  - `$euiRangeTrackColor`
  - `$euiRangeHighlightColor`
  - `$euiRangeThumbHeight`
  - `$euiRangeThumbWidth`
  - `$euiRangeThumbBorderColor`
  - `$euiRangeThumbBackgroundColor`
  - `$euiRangeTrackWidth`
  - `$euiRangeTrackHeight`
  - `$euiRangeTrackCompressedHeight`
  - `$euiRangeTrackBorderWidth`
  - `$euiRangeTrackBorderColor`
  - `$euiRangeTrackRadius`
  - `$euiRangeDisabledOpacity`
  - `$euiRangeHighlightHeight`
  - `$euiRangeHighlightCompressedHeight`
  - `$euiRangeHeight`
  - `$euiRangeCompressedHeight`
  - `$euiTooltipAnimations`
  - `$euiTooltipBackgroundColor`
  - `$euiTooltipBorderColor`
- Removed the following Sass mixins due to low external usage:
([#8031](elastic/eui#8031))
  - `euiHoverState`
  - `euiFocusState`
  - `euiDisabledState`
  - `euiInteractiveStates`
  - `euiFormControlStyle`
  - `euiFormControlStyleCompressed`
  - `euiFormControlFocusStyle`
  - `euiFormControlInvalidStyle`
  - `euiFormControlDisabledTextStyle`
  - `euiFormControlDisabledStyle`
  - `euiFormControlReadOnlyStyle`
  - `euiFormControlText`
  - `euiFormControlSize`
  - `euiFormControlGradient`
  - `euiFormControlLayoutPadding`
  - `euiFormControlWithIcon`
  - `euiFormControlIsLoading`
  - `euiFormControlSideBorderRadius`
  - `euiPlaceholderPerBrowser`
  - `euiHiddenSelectableInput`
  - `euiLink`
  - `euiLoadingSpinnerBorderColors`
  - `euiRangeTrackSize`
  - `euiRangeTrackPerBrowser`
  - `euiRangeThumbBorder`
  - `euiRangeThumbBoxShadow`
  - `euiRangeThumbFocusBoxShadow`
  - `euiRangeThumbStyle`
  - `euiRangeThumbPerBrowser`
  - `euiRangeThumbFocus`
  - `euiToolTipAnimation`

## [`v96.1.0`](https://github.com/elastic/eui/releases/v96.1.0)

**CSS-in-JS conversions**

- Removed the following component-specific Sass mixins:
([#8055](elastic/eui#8055))
  - `euiButton`
  - `euiButtonBase`
  - `euiButtonFocus`
  - `euiButtonContent`
  - `euiButtonContentDisabled`
  - `euiButtonDefaultStyle`
  - `euiButtonFillStyle`
  - `euiPanel`
  - `euiFormControlDefaultShadow`
  - `euiToolTipTitle`
cee-chen added a commit to cee-chen/kibana that referenced this pull request Oct 4, 2024
@cee-chen
Upgrade EUI to v96.1.0 (elastic#194619)
273d52c 
`v95.12.0`⏩`v96.1.0`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

## [`v96.0.0`](https://github.com/elastic/eui/releases/v96.0.0)

- Improved `EuiPageHeader`/`EuiPageTemplate.Header`'s responsive UX:
([elastic#8044](elastic/eui#8044))
- `rightSideItems` are no longer pushed to the side by wide `tabs`
content
- `rightSideItems` now wrap more responsively at smaller container
widths
- Updated `EuiDraggable` with a new `usePortal` prop.
([elastic#8048](elastic/eui#8048))
- This prop portals the dragged element to the body, allowing it to
escape stacking contexts which prevents buggy drag positioning in e.g.
popovers, modals, and flyouts.

**Bug fixes**

- Fixed `EuiProvider`'s system color mode detection causing errors
during server-side rendering
([elastic#8040](elastic/eui#8040))
- Fixed an `EuiDataGrid` rendering bug that was causing bouncing
scrollbar issues ([elastic#8041](elastic/eui#8041))
- Fixed `EuiSearchBox` skips input when running with React 18 in Legacy
Mode ([elastic#8047](elastic/eui#8047))

**Deprecations**

- Deprecated `EuiPopover`'s `hasDragDrop` prop. Use `EuiDraggable`'s new
`usePortal` prop instead.
([elastic#8048](elastic/eui#8048))

**Breaking changes**

- Removed the following exported `.css` files:
([elastic#8045](elastic/eui#8045))
  - `@elastic/eui/dist/eui_theme_light.css`
  - `@elastic/eui/dist/eui_theme_light.min.css`
  - `@elastic/eui/dist/eui_theme_dark.css`
  - `@elastic/eui/dist/eui_theme_dark.min.css`
- All EUI components are now on CSS-in-JS. A CSS file/import in
consuming applications is no longer needed, and is safe to remove.
([elastic#8045](elastic/eui#8045))
- Removed all `src/theme/legacy` Sass exports
([elastic#8054](elastic/eui#8054))

**CSS-in-JS conversions**

- Removed the following component-specific Sass variables:
([elastic#8031](elastic/eui#8031))
  - `$euiButtonColorDisabled`
  - `$euiButtonColorDisabledText`
  - `$euiButtonColorGhostDisabled`
  - `$euiButtonFontWeight`
  - `$euiFormControlIconSizes`
  - `$euiFormControlLayoutGroupInputHeight`
  - `$euiFormControlLayoutGroupInputCompressedHeight`
  - `$euiFormControlLayoutGroupInputCompressedBorderRadius`
  - `$euiPageSidebarMinWidth`
  - `$euiPageDefaultMaxWidth`
  - `$euiPanelPaddingModifiers`
  - `$euiPanelBorderRadiusModifiers`
  - `$euiPanelBackgroundColorModifiers`
  - `$euiRangeTrackColor`
  - `$euiRangeHighlightColor`
  - `$euiRangeThumbHeight`
  - `$euiRangeThumbWidth`
  - `$euiRangeThumbBorderColor`
  - `$euiRangeThumbBackgroundColor`
  - `$euiRangeTrackWidth`
  - `$euiRangeTrackHeight`
  - `$euiRangeTrackCompressedHeight`
  - `$euiRangeTrackBorderWidth`
  - `$euiRangeTrackBorderColor`
  - `$euiRangeTrackRadius`
  - `$euiRangeDisabledOpacity`
  - `$euiRangeHighlightHeight`
  - `$euiRangeHighlightCompressedHeight`
  - `$euiRangeHeight`
  - `$euiRangeCompressedHeight`
  - `$euiTooltipAnimations`
  - `$euiTooltipBackgroundColor`
  - `$euiTooltipBorderColor`
- Removed the following Sass mixins due to low external usage:
([elastic#8031](elastic/eui#8031))
  - `euiHoverState`
  - `euiFocusState`
  - `euiDisabledState`
  - `euiInteractiveStates`
  - `euiFormControlStyle`
  - `euiFormControlStyleCompressed`
  - `euiFormControlFocusStyle`
  - `euiFormControlInvalidStyle`
  - `euiFormControlDisabledTextStyle`
  - `euiFormControlDisabledStyle`
  - `euiFormControlReadOnlyStyle`
  - `euiFormControlText`
  - `euiFormControlSize`
  - `euiFormControlGradient`
  - `euiFormControlLayoutPadding`
  - `euiFormControlWithIcon`
  - `euiFormControlIsLoading`
  - `euiFormControlSideBorderRadius`
  - `euiPlaceholderPerBrowser`
  - `euiHiddenSelectableInput`
  - `euiLink`
  - `euiLoadingSpinnerBorderColors`
  - `euiRangeTrackSize`
  - `euiRangeTrackPerBrowser`
  - `euiRangeThumbBorder`
  - `euiRangeThumbBoxShadow`
  - `euiRangeThumbFocusBoxShadow`
  - `euiRangeThumbStyle`
  - `euiRangeThumbPerBrowser`
  - `euiRangeThumbFocus`
  - `euiToolTipAnimation`

## [`v96.1.0`](https://github.com/elastic/eui/releases/v96.1.0)

**CSS-in-JS conversions**

- Removed the following component-specific Sass mixins:
([elastic#8055](elastic/eui#8055))
  - `euiButton`
  - `euiButtonBase`
  - `euiButtonFocus`
  - `euiButtonContent`
  - `euiButtonContentDisabled`
  - `euiButtonDefaultStyle`
  - `euiButtonFillStyle`
  - `euiPanel`
  - `euiFormControlDefaultShadow`
  - `euiToolTipTitle`

(cherry picked from commit 19e37bf)

# Conflicts:
#	packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap
tiansivive pushed a commit to tiansivive/kibana that referenced this pull request Oct 7, 2024
@cee-chen @tiansivive
Upgrade EUI to v96.1.0 (elastic#194619)
784cc49 
`v95.12.0`⏩`v96.1.0`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

## [`v96.0.0`](https://github.com/elastic/eui/releases/v96.0.0)

- Improved `EuiPageHeader`/`EuiPageTemplate.Header`'s responsive UX:
([elastic#8044](elastic/eui#8044))
- `rightSideItems` are no longer pushed to the side by wide `tabs`
content
- `rightSideItems` now wrap more responsively at smaller container
widths
- Updated `EuiDraggable` with a new `usePortal` prop.
([elastic#8048](elastic/eui#8048))
- This prop portals the dragged element to the body, allowing it to
escape stacking contexts which prevents buggy drag positioning in e.g.
popovers, modals, and flyouts.

**Bug fixes**

- Fixed `EuiProvider`'s system color mode detection causing errors
during server-side rendering
([elastic#8040](elastic/eui#8040))
- Fixed an `EuiDataGrid` rendering bug that was causing bouncing
scrollbar issues ([elastic#8041](elastic/eui#8041))
- Fixed `EuiSearchBox` skips input when running with React 18 in Legacy
Mode ([elastic#8047](elastic/eui#8047))

**Deprecations**

- Deprecated `EuiPopover`'s `hasDragDrop` prop. Use `EuiDraggable`'s new
`usePortal` prop instead.
([elastic#8048](elastic/eui#8048))

**Breaking changes**

- Removed the following exported `.css` files:
([elastic#8045](elastic/eui#8045))
  - `@elastic/eui/dist/eui_theme_light.css`
  - `@elastic/eui/dist/eui_theme_light.min.css`
  - `@elastic/eui/dist/eui_theme_dark.css`
  - `@elastic/eui/dist/eui_theme_dark.min.css`
- All EUI components are now on CSS-in-JS. A CSS file/import in
consuming applications is no longer needed, and is safe to remove.
([elastic#8045](elastic/eui#8045))
- Removed all `src/theme/legacy` Sass exports
([elastic#8054](elastic/eui#8054))

**CSS-in-JS conversions**

- Removed the following component-specific Sass variables:
([elastic#8031](elastic/eui#8031))
  - `$euiButtonColorDisabled`
  - `$euiButtonColorDisabledText`
  - `$euiButtonColorGhostDisabled`
  - `$euiButtonFontWeight`
  - `$euiFormControlIconSizes`
  - `$euiFormControlLayoutGroupInputHeight`
  - `$euiFormControlLayoutGroupInputCompressedHeight`
  - `$euiFormControlLayoutGroupInputCompressedBorderRadius`
  - `$euiPageSidebarMinWidth`
  - `$euiPageDefaultMaxWidth`
  - `$euiPanelPaddingModifiers`
  - `$euiPanelBorderRadiusModifiers`
  - `$euiPanelBackgroundColorModifiers`
  - `$euiRangeTrackColor`
  - `$euiRangeHighlightColor`
  - `$euiRangeThumbHeight`
  - `$euiRangeThumbWidth`
  - `$euiRangeThumbBorderColor`
  - `$euiRangeThumbBackgroundColor`
  - `$euiRangeTrackWidth`
  - `$euiRangeTrackHeight`
  - `$euiRangeTrackCompressedHeight`
  - `$euiRangeTrackBorderWidth`
  - `$euiRangeTrackBorderColor`
  - `$euiRangeTrackRadius`
  - `$euiRangeDisabledOpacity`
  - `$euiRangeHighlightHeight`
  - `$euiRangeHighlightCompressedHeight`
  - `$euiRangeHeight`
  - `$euiRangeCompressedHeight`
  - `$euiTooltipAnimations`
  - `$euiTooltipBackgroundColor`
  - `$euiTooltipBorderColor`
- Removed the following Sass mixins due to low external usage:
([elastic#8031](elastic/eui#8031))
  - `euiHoverState`
  - `euiFocusState`
  - `euiDisabledState`
  - `euiInteractiveStates`
  - `euiFormControlStyle`
  - `euiFormControlStyleCompressed`
  - `euiFormControlFocusStyle`
  - `euiFormControlInvalidStyle`
  - `euiFormControlDisabledTextStyle`
  - `euiFormControlDisabledStyle`
  - `euiFormControlReadOnlyStyle`
  - `euiFormControlText`
  - `euiFormControlSize`
  - `euiFormControlGradient`
  - `euiFormControlLayoutPadding`
  - `euiFormControlWithIcon`
  - `euiFormControlIsLoading`
  - `euiFormControlSideBorderRadius`
  - `euiPlaceholderPerBrowser`
  - `euiHiddenSelectableInput`
  - `euiLink`
  - `euiLoadingSpinnerBorderColors`
  - `euiRangeTrackSize`
  - `euiRangeTrackPerBrowser`
  - `euiRangeThumbBorder`
  - `euiRangeThumbBoxShadow`
  - `euiRangeThumbFocusBoxShadow`
  - `euiRangeThumbStyle`
  - `euiRangeThumbPerBrowser`
  - `euiRangeThumbFocus`
  - `euiToolTipAnimation`

## [`v96.1.0`](https://github.com/elastic/eui/releases/v96.1.0)

**CSS-in-JS conversions**

- Removed the following component-specific Sass mixins:
([elastic#8055](elastic/eui#8055))
  - `euiButton`
  - `euiButtonBase`
  - `euiButtonFocus`
  - `euiButtonContent`
  - `euiButtonContentDisabled`
  - `euiButtonDefaultStyle`
  - `euiButtonFillStyle`
  - `euiPanel`
  - `euiFormControlDefaultShadow`
  - `euiToolTipTitle`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mgadewoll mgadewoll mgadewoll approved these changes

Assignees
No one assigned
Labels
emotion
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@cee-chen @elasticmachine @mgadewoll