kibana/packages/kbn-securitysolution-exception-list-components
Bree Hall 4cf630bfec
Upgrade EUI to 83.0.0 (#160813)
`eui@82.1.0`  `83.0.0`

⚠️ The biggest change in this PR by far is the `EuiButtonEmpty` Emotion
conversion, which changes the DOM structure of the button slightly as
well as several CSS classes around it.

EUI has attempted to convert any custom EuiButtonEmpty CSS overrides
where possible, but would super appreciate it if CODEOWNERS checked
their touched files. If anything other than a snapshot or test was
touched, please double check the display of your button(s) and confirm
everything still looks shipshape. Feel free to ping us for advice if
not.

---

## [`83.0.0`](https://github.com/elastic/eui/tree/v83.0.0)

**Bug fixes**

- Fixed `EuiPaginationButton` styling affected by `EuiButtonEmpty`'s
Emotion conversion ([#6893](https://github.com/elastic/eui/pull/6893))

**Breaking changes**

- Removed `isPlaceholder` prop from `EuiPaginationButton`
([#6893](https://github.com/elastic/eui/pull/6893))

## [`82.2.1`](https://github.com/elastic/eui/tree/v82.2.1)

- Updated supported Node engine versions to allow Node 16, 18 and >=20
([#6884](https://github.com/elastic/eui/pull/6884))

## [`82.2.0`](https://github.com/elastic/eui/tree/v82.2.0)

- Updated EUI's SVG icons library to use latest SVGO v3 optimization
([#6843](https://github.com/elastic/eui/pull/6843))
- Added success color `EuiNotificationBadge`
([#6864](https://github.com/elastic/eui/pull/6864))
- Added `badgeColor` prop to `EuiFilterButton`
([#6864](https://github.com/elastic/eui/pull/6864))
- Updated `EuiBadge` to use CSS-in-JS for named colors instead of inline
styles. Custom colors will still use inline styles.
([#6864](https://github.com/elastic/eui/pull/6864))

**CSS-in-JS conversions**

- Converted `EuiButtonGroup` and `EuiButtonGroupButton` to Emotion
([#6841](https://github.com/elastic/eui/pull/6841))
- Converted `EuiButtonIcon` to Emotion
([#6844](https://github.com/elastic/eui/pull/6844))
- Converted `EuiButtonEmpty` to Emotion
([#6863](https://github.com/elastic/eui/pull/6863))
- Converted `EuiCollapsibleNav` and `EuiCollapsibleNavGroup` to Emotion
([#6865](https://github.com/elastic/eui/pull/6865))
- Removed Sass variables `$euiCollapsibleNavGroupLightBackgroundColor`,
`$euiCollapsibleNavGroupDarkBackgroundColor`, and
`$euiCollapsibleNavGroupDarkHighContrastColor`
([#6865](https://github.com/elastic/eui/pull/6865))

---------

Co-authored-by: Cee Chen <constance.chen@elastic.co>
Co-authored-by: Jeramy Soucy <jeramy.soucy@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
2023-07-06 12:46:55 -07:00
..
src Upgrade EUI to 83.0.0 (#160813) 2023-07-06 12:46:55 -07:00
index.ts [Security Solution][Exception]: Add to shared lists fixes (#146750) 2022-12-02 15:02:33 +01:00
jest.config.js [Security Solution][Exceptions] - Create/ refactor Exception-List common's components in @kbn/securitysolution-exception-list-components (#143363) 2022-10-19 19:33:17 +02:00
kibana.jsonc [Security Solution] Clean up CODEOWNERS and other files for the Detection Engine team (#159729) 2023-06-14 10:39:50 -07:00
package.json Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
README.md [Security Solution][Exceptions] - Create/ refactor Exception-List common's components in @kbn/securitysolution-exception-list-components (#143363) 2022-10-19 19:33:17 +02:00
setup_test.ts Exceptions List component (#140985) 2022-09-28 20:36:05 +02:00
tsconfig.json Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00

@kbn/securitysolution-exception-list-components

Common exceptions' components

Aim

  • To have most of the Exceptions' components in one place, to be shared accross multiple pages and used for different logic.
  • This package holds the presetational part of the components only as the API or the logic part should reside under the consumer page

Pattern used

component
    index.tsx
    index.styles.ts <-- to hold styles if the component has many custom styles
    use_component.ts <-- for logic if the Presentational Component has logic
    component.test.tsx
    use_component.test.tsx
  

Testing

In order to unify our testing tools, we configured only two libraries, the React-Testing-Library to test the component UI part and the Reat-Testing-Hooks to test the component's UI interactions

Styling

In order to follow the KBN-Packages's recommendations, to define a custom CSS we can only use the @emotion/react or @emotion/css libraries

Next

  • Now the ExceptionItems, ExceptionItemCard and ExceptionItemCardMetaInfo receive securityLinkAnchorComponent, exceptionsUtilityComponent , and exceptionsUtilityComponent as props to avoid moving all the common components under the x-pack at once, later we should move all building blocks to this kbn-package