Major changes in this PR:
## Removal of `.euiAccordionForm` classNames
EUI is moving away from providing global `classNames` styles for
components - where possible, we want to provide props as opposed to
styles. As part of our ongoing Emotion conversion, we have removed the
following `EuiAccordion`-specific classes:
- `.euiAccordionForm` (replaced with `borders="horizontal"`)
- `.euiAccordionForm__button` (replaced with `buttonProps={{
paddingSize: 'm' }}`)
- `.euiAccordionForm__title` styles - this was only removing text
underlines on hover. If still desired, re-add this behavior with custom
CSS.
- `.euiAccordionForm__extraAction` - there was 1 usage of this in Kibana
in Watcher, which was converted to one-off custom inline Emotion CSS
instead.
This change accounts for the first 3-4 commits in the PR. ⚠️ If your
team was one of the 4-5 teams affected by this change, we would greatly
appreciate your help QAing the UI and ensuring it looks as desired/the
same as before.
## Fixed `EuiHeader` affordance
The Sass `euiHeaderAffordForFixed` mixin has been deprecated and
replaced by a global `--euiFixedHeadersOffset` CSS variable. This
variable updates independently and dynamically based on the number of
fixed headers on the page, and is usable by both Sass and Emotion. All
underlying EUI components that need to account for fixed headers (such
as flyouts and page sidebars/templates) have been updated to consume
this new variable.
This change cleans up a great deal of Sass code, and is incidentally
extremely timely with serverless efforts (as serverless has only one
fixed header and the classic Kibana chrome has two).
This change constitutes a majority of the commits in this PR, which
involve removing various fixed Sass header variables and replacing them
with the new CSS variable. I strongly recommend [reviewing changes by
commit if
possible](https://github.com/elastic/kibana/pull/165790/commits) to see
any associated changes that make sense together with any of your touched
file(s). ⚠️ If your team was affected by this change (primarily due to
custom header layouts), your help would be greatly appreciated QAing
your app to ensure no UI regressions in that regard have occurred.
---
`v88.1.0`⏩ `v88.2.0`
## [`88.2.0`](https://github.com/elastic/eui/tree/v88.2.0)
- Added a new `EuiTextTruncate` component, which provides custom
truncation options beyond native CSS
([#7116](https://github.com/elastic/eui/pull/7116))
- Fixed-positioned `EuiHeader`s now set a global CSS
`--euiFixedHeadersOffset` variable, which updates dynamically based on
the number of fixed headers on the page.
([#7144](https://github.com/elastic/eui/pull/7144))
- `EuiFlyout`s now dynamically set their position, height, and mask
based on the number of fixed headers on the page.
([#7144](https://github.com/elastic/eui/pull/7144))
- Sticky-positioned `EuiPageSidebar`s now dynamically set their position
and height based on the number of fixed headers on the page. This can
still be overridden via the `sticky.offset` prop if needed.
([#7144](https://github.com/elastic/eui/pull/7144))
- `EuiPageTemplate` now dynamically offsets content from any fixed
headers on the page. This can still be overridden via the `offset` prop
if needed. ([#7144](https://github.com/elastic/eui/pull/7144))
- Updated `EuiAccordion` with a new `borders` prop
([#7154](https://github.com/elastic/eui/pull/7154))
- Updated `EuiAccordion` with a new `buttonProps.paddingSize` prop
([#7154](https://github.com/elastic/eui/pull/7154))
**Deprecations**
- Deprecated the Sass `euiHeaderAffordForFixed` mixin. Use the new
global CSS `var(--euiFixedHeadersOffset)` variable instead.
([#7144](https://github.com/elastic/eui/pull/7144))
**CSS-in-JS conversions**
- Except for generic CSS utilities, EUI is moving away from providing
global `classNames` that are component-specific. As part of this effort,
we have removed the following `EuiAccordion`-specific classes:
([#7154](https://github.com/elastic/eui/pull/7154))
- Removed `.euiAccordionForm` styles. Use the `borders="horizontal"`
prop instead
- Removed `.euiAccordionForm__button` styles. Use the `buttonProps={{
paddingSize: 'm' }}` prop instead
- Removed `.euiAccordionForm__extraAction` styles. Convert this to your
own custom CSS if necessary.
- Removed `.euiAccordionForm__title` styles. Convert this to your own
custom CSS if necessary.
---------
Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
## Summary
Fixes an issue with the field browser where all types currently display
as unkown, this was because in a code path where a type cast happens, we
were using the wrong type. To see this, remove the as unknown from the
cast, and the typescript compiler will show the problem:
```
'BrowserField' is deprecated.ts(6385)
index.ts(70, 4): The declaration was marked as deprecated here.
Conversion of type 'DataViewField' to type 'BrowserField' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Type 'DataViewField' is missing the following properties from type 'BrowserField': category, description, example, fields, and 2 more.ts(2352)
```
DataViewField actually only has spec and kbnFieldType properties, spec
is of type FieldSpec which is basically the same type as BrowserField,
and has sufficient overlap for the (still unsafe, but more safe than as
unknown) cast to occur.
Before:
<img width="338" alt="image"
src="f31c1f9e-25f0-41ee-9e1c-a70171e41d29">
After:
<img width="555" alt="image"
src="8b462477-2dce-41bb-9592-f34b20634b84">
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
## Summary
Relevant issues:
Overall telemetry: https://github.com/elastic/kibana/issues/144945
Alerts telemetry: https://github.com/elastic/kibana/issues/150656
Preview dashboard:
40755fc0-b454-11ed-a6e6-d32d2209b7b7?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-7d%2Fd,to:now))
**UI counter added** - overall counts
1. alerts_table_group_by_{tableId}_{groupByField} -
`alerts_table_group_by_alerts-page_host.name ` triggered on grouping
option changed.
2. alerts_table_toggled_{on|off}_{tableId}_group-{groupNumber} -
`alerts_table_toggled_off_alerts-page_group-0` sent when grouped alerts
toggled
3. alerts_table_{tableId}_group-{groupNumber}_mark-{status} -
`alerts_table_alerts-page_group-0_mark-open` sent when group actions
taken
**Event based telemetry added** - extra info from `properties` can be
aggregated / visualised
1. Alerts grouping take action - sent when group actions taken
2. Alerts grouping toggled - sent when grouped alerts toggled
3. Alerts grouping changed - triggered on grouping option changed
[Example
events](9b0f2080-bcd1-11ed-a6e6-d32d2209b7b7?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-7d%2Fd,to:now))&_a=(columns:!(context.applicationId,properties,properties.groupingId,properties.groupNumber,properties.status,event_type,properties.tableId),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,index:c5dc7cd0-2950-4e51-b428-d0451b1b8d9d,key:context.applicationId,negate:!f,params:(query:securitySolutionUI),type:phrase),query:(match_phrase:(context.applicationId:securitySolutionUI)))),grid:(),hideChart:!f,index:c5dc7cd0-2950-4e51-b428-d0451b1b8d9d,interval:auto,query:(language:kuery,query:'event_type%20:%20Alerts%20Grouping*'),sort:!(!(timestamp,desc))))
**Steps to verify:**
1. add telemetry.optIn: true to kibana.dev.yml
2. Visit alerts page or rule details page, change the grouping , toggle
each group, and take actions to grouped alerts
3. Usually the event would be sent every hour to
[staging](9b0f2080-bcd1-11ed-a6e6-d32d2209b7b7?_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:now-7d%2Fd,to:now))&_a=(columns:!(context.applicationId,properties,properties.groupingId,properties.groupNumber,properties.status,event_type,properties.tableId),filters:!(('$state':(store:appState),meta:(alias:!n,disabled:!f,index:c5dc7cd0-2950-4e51-b428-d0451b1b8d9d,key:context.applicationId,negate:!f,params:(query:securitySolutionUI),type:phrase),query:(match_phrase:(context.applicationId:securitySolutionUI)))),grid:(),hideChart:!f,index:c5dc7cd0-2950-4e51-b428-d0451b1b8d9d,interval:auto,query:(language:kuery,query:'event_type%20:%20Alerts%20Grouping*'),sort:!(!(timestamp,desc)))),
if not, visit staging again on the next day.
### Checklist
Delete any items that are not applicable to this PR.
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Pablo Neves Machado <pablo.nevesmachado@elastic.co>
