From 0626247df632eafd01d00f50b8e9c59e774cbb14 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 12 Feb 2024 08:33:42 -0800 Subject: [PATCH 01/14] update i18ntokens --- i18ntokens.json | 346 ++++++++++++++++++-------------------- i18ntokens_changelog.json | 9 + 2 files changed, 173 insertions(+), 182 deletions(-) diff --git a/i18ntokens.json b/i18ntokens.json index 26bbf5073e1..141ad082606 100644 --- a/i18ntokens.json +++ b/i18ntokens.json @@ -2543,14 +2543,14 @@ "highlighting": "string", "loc": { "start": { - "line": 48, + "line": 50, "column": 26, - "index": 1623 + "index": 1659 }, "end": { - "line": 51, + "line": 53, "column": 3, - "index": 1696 + "index": 1732 } }, "filepath": "src/components/date_picker/auto_refresh/auto_refresh.tsx" @@ -2561,14 +2561,14 @@ "highlighting": "string", "loc": { "start": { - "line": 121, + "line": 129, "column": 29, - "index": 3517 + "index": 3709 }, "end": { - "line": 124, + "line": 132, "column": 3, - "index": 3595 + "index": 3787 } }, "filepath": "src/components/date_picker/auto_refresh/auto_refresh.tsx" @@ -2579,14 +2579,14 @@ "highlighting": "string", "loc": { "start": { - "line": 125, + "line": 133, "column": 28, - "index": 3625 + "index": 3817 }, "end": { - "line": 129, + "line": 141, "column": 3, - "index": 3808 + "index": 4051 } }, "filepath": "src/components/date_picker/auto_refresh/auto_refresh.tsx" @@ -2597,14 +2597,14 @@ "highlighting": "string", "loc": { "start": { - "line": 178, + "line": 219, "column": 6, - "index": 4666 + "index": 5824 }, "end": { - "line": 185, + "line": 226, "column": 8, - "index": 4896 + "index": 6054 } }, "filepath": "src/components/date_picker/auto_refresh/refresh_interval.tsx" @@ -2615,14 +2615,14 @@ "highlighting": "string", "loc": { "start": { - "line": 187, + "line": 228, "column": 6, - "index": 4913 + "index": 6071 }, "end": { - "line": 194, + "line": 235, "column": 8, - "index": 5141 + "index": 6299 } }, "filepath": "src/components/date_picker/auto_refresh/refresh_interval.tsx" @@ -2633,14 +2633,14 @@ "highlighting": "string", "loc": { "start": { - "line": 227, + "line": 268, "column": 22, - "index": 6117 + "index": 7280 }, "end": { - "line": 230, + "line": 271, "column": 24, - "index": 6256 + "index": 7419 } }, "filepath": "src/components/date_picker/auto_refresh/refresh_interval.tsx" @@ -2687,14 +2687,14 @@ "highlighting": "string", "loc": { "start": { - "line": 93, + "line": 94, "column": 23, - "index": 2474 + "index": 2558 }, "end": { - "line": 97, + "line": 98, "column": 3, - "index": 2573 + "index": 2657 } }, "filepath": "src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx" @@ -2705,14 +2705,14 @@ "highlighting": "string", "loc": { "start": { - "line": 98, + "line": 99, "column": 24, - "index": 2599 + "index": 2683 }, "end": { - "line": 102, + "line": 103, "column": 3, - "index": 2700 + "index": 2784 } }, "filepath": "src/components/date_picker/super_date_picker/date_popover/date_popover_button.tsx" @@ -2723,14 +2723,14 @@ "highlighting": "string", "loc": { "start": { - "line": 64, + "line": 66, "column": 25, - "index": 1770 + "index": 1837 }, "end": { - "line": 67, + "line": 69, "column": 3, - "index": 1846 + "index": 1913 } }, "filepath": "src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx" @@ -2741,14 +2741,14 @@ "highlighting": "string", "loc": { "start": { - "line": 68, + "line": 70, "column": 23, - "index": 1871 + "index": 1938 }, "end": { - "line": 71, + "line": 73, "column": 3, - "index": 1943 + "index": 2010 } }, "filepath": "src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx" @@ -2759,14 +2759,14 @@ "highlighting": "string", "loc": { "start": { - "line": 74, + "line": 76, "column": 24, - "index": 2046 + "index": 2113 }, "end": { - "line": 77, + "line": 79, "column": 3, - "index": 2122 + "index": 2189 } }, "filepath": "src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx" @@ -2777,14 +2777,14 @@ "highlighting": "string", "loc": { "start": { - "line": 78, + "line": 80, "column": 24, - "index": 2148 + "index": 2215 }, "end": { - "line": 81, + "line": 83, "column": 3, - "index": 2224 + "index": 2291 } }, "filepath": "src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx" @@ -2795,14 +2795,14 @@ "highlighting": "string", "loc": { "start": { - "line": 82, + "line": 84, "column": 19, - "index": 2245 + "index": 2312 }, "end": { - "line": 82, + "line": 84, "column": 73, - "index": 2299 + "index": 2366 } }, "filepath": "src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx" @@ -2813,14 +2813,14 @@ "highlighting": "string", "loc": { "start": { - "line": 132, + "line": 136, "column": 12, - "index": 3582 + "index": 3705 }, "end": { - "line": 136, + "line": 140, "column": 14, - "index": 3803 + "index": 3926 } }, "filepath": "src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx" @@ -2831,14 +2831,14 @@ "highlighting": "string", "loc": { "start": { - "line": 148, + "line": 152, "column": 14, - "index": 4093 + "index": 4216 }, "end": { - "line": 151, + "line": 155, "column": 16, - "index": 4239 + "index": 4362 } }, "filepath": "src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx" @@ -2849,14 +2849,14 @@ "highlighting": "string", "loc": { "start": { - "line": 153, + "line": 157, "column": 14, - "index": 4272 + "index": 4395 }, "end": { - "line": 156, + "line": 160, "column": 16, - "index": 4414 + "index": 4537 } }, "filepath": "src/components/date_picker/super_date_picker/date_popover/date_popover_content.tsx" @@ -2959,12 +2959,12 @@ "start": { "line": 30, "column": 5, - "index": 1045 + "index": 1062 }, "end": { "line": 34, "column": 3, - "index": 1199 + "index": 1216 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -2977,12 +2977,12 @@ "start": { "line": 35, "column": 8, - "index": 1209 + "index": 1226 }, "end": { "line": 39, "column": 3, - "index": 1363 + "index": 1380 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -2995,12 +2995,12 @@ "start": { "line": 40, "column": 5, - "index": 1370 + "index": 1387 }, "end": { "line": 44, "column": 3, - "index": 1524 + "index": 1541 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3013,12 +3013,12 @@ "start": { "line": 45, "column": 8, - "index": 1534 + "index": 1551 }, "end": { "line": 49, "column": 3, - "index": 1688 + "index": 1705 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3031,12 +3031,12 @@ "start": { "line": 50, "column": 5, - "index": 1695 + "index": 1712 }, "end": { "line": 54, "column": 3, - "index": 1845 + "index": 1862 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3049,12 +3049,12 @@ "start": { "line": 55, "column": 8, - "index": 1855 + "index": 1872 }, "end": { "line": 59, "column": 3, - "index": 2005 + "index": 2022 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3067,12 +3067,12 @@ "start": { "line": 60, "column": 5, - "index": 2012 + "index": 2029 }, "end": { "line": 64, "column": 3, - "index": 2160 + "index": 2177 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3085,12 +3085,12 @@ "start": { "line": 65, "column": 8, - "index": 2170 + "index": 2187 }, "end": { "line": 69, "column": 3, - "index": 2319 + "index": 2336 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3103,12 +3103,12 @@ "start": { "line": 70, "column": 5, - "index": 2326 + "index": 2343 }, "end": { "line": 74, "column": 3, - "index": 2476 + "index": 2493 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3121,12 +3121,12 @@ "start": { "line": 75, "column": 8, - "index": 2486 + "index": 2503 }, "end": { "line": 79, "column": 3, - "index": 2636 + "index": 2653 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3139,12 +3139,12 @@ "start": { "line": 80, "column": 5, - "index": 2643 + "index": 2660 }, "end": { "line": 84, "column": 3, - "index": 2795 + "index": 2812 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3157,12 +3157,12 @@ "start": { "line": 85, "column": 8, - "index": 2805 + "index": 2822 }, "end": { "line": 89, "column": 3, - "index": 2957 + "index": 2974 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3175,12 +3175,12 @@ "start": { "line": 90, "column": 5, - "index": 2964 + "index": 2981 }, "end": { "line": 94, "column": 3, - "index": 3114 + "index": 3131 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3193,12 +3193,12 @@ "start": { "line": 95, "column": 8, - "index": 3124 + "index": 3141 }, "end": { "line": 99, "column": 3, - "index": 3274 + "index": 3291 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3211,12 +3211,12 @@ "start": { "line": 103, "column": 5, - "index": 3356 + "index": 3373 }, "end": { "line": 107, "column": 3, - "index": 3489 + "index": 3506 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3229,12 +3229,12 @@ "start": { "line": 108, "column": 5, - "index": 3496 + "index": 3513 }, "end": { "line": 112, "column": 3, - "index": 3629 + "index": 3646 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3247,12 +3247,12 @@ "start": { "line": 113, "column": 5, - "index": 3636 + "index": 3653 }, "end": { "line": 117, "column": 3, - "index": 3765 + "index": 3782 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3265,12 +3265,12 @@ "start": { "line": 118, "column": 5, - "index": 3772 + "index": 3789 }, "end": { "line": 122, "column": 3, - "index": 3899 + "index": 3916 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3283,12 +3283,12 @@ "start": { "line": 123, "column": 5, - "index": 3906 + "index": 3923 }, "end": { "line": 127, "column": 3, - "index": 4035 + "index": 4052 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3301,12 +3301,12 @@ "start": { "line": 128, "column": 5, - "index": 4042 + "index": 4059 }, "end": { "line": 132, "column": 3, - "index": 4173 + "index": 4190 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3319,12 +3319,12 @@ "start": { "line": 133, "column": 5, - "index": 4180 + "index": 4197 }, "end": { "line": 137, "column": 3, - "index": 4309 + "index": 4326 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3335,14 +3335,14 @@ "highlighting": "string", "loc": { "start": { - "line": 153, + "line": 162, "column": 21, - "index": 4598 + "index": 4777 }, "end": { - "line": 153, + "line": 162, "column": 63, - "index": 4640 + "index": 4819 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3353,14 +3353,14 @@ "highlighting": "string", "loc": { "start": { - "line": 154, + "line": 163, "column": 29, - "index": 4671 + "index": 4850 }, "end": { - "line": 157, + "line": 166, "column": 3, - "index": 4738 + "index": 4917 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3371,14 +3371,14 @@ "highlighting": "string", "loc": { "start": { - "line": 250, + "line": 279, "column": 27, - "index": 7136 + "index": 8250 }, "end": { - "line": 254, + "line": 283, "column": 3, - "index": 7260 + "index": 8374 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_duration.tsx" @@ -3389,14 +3389,14 @@ "highlighting": "code", "loc": { "start": { - "line": 25, + "line": 33, "column": 5, - "index": 821 + "index": 854 }, "end": { - "line": 29, + "line": 37, "column": 3, - "index": 956 + "index": 989 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_interval.ts" @@ -3407,14 +3407,14 @@ "highlighting": "code", "loc": { "start": { - "line": 30, + "line": 38, "column": 5, - "index": 963 + "index": 996 }, "end": { - "line": 34, + "line": 42, "column": 3, - "index": 1098 + "index": 1131 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_interval.ts" @@ -3425,14 +3425,14 @@ "highlighting": "code", "loc": { "start": { - "line": 35, + "line": 43, "column": 5, - "index": 1105 + "index": 1138 }, "end": { - "line": 39, + "line": 47, "column": 3, - "index": 1236 + "index": 1269 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_interval.ts" @@ -3443,14 +3443,14 @@ "highlighting": "code", "loc": { "start": { - "line": 40, + "line": 48, "column": 5, - "index": 1243 + "index": 1276 }, "end": { - "line": 44, + "line": 52, "column": 3, - "index": 1372 + "index": 1405 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_interval.ts" @@ -3461,14 +3461,14 @@ "highlighting": "string", "loc": { "start": { - "line": 46, + "line": 54, "column": 7, - "index": 1396 + "index": 1429 }, "end": { - "line": 48, + "line": 56, "column": 6, - "index": 1485 + "index": 1518 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_interval.ts" @@ -3479,14 +3479,14 @@ "highlighting": "string", "loc": { "start": { - "line": 49, + "line": 57, "column": 7, - "index": 1494 + "index": 1527 }, "end": { - "line": 51, + "line": 59, "column": 6, - "index": 1583 + "index": 1616 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_interval.ts" @@ -3497,14 +3497,14 @@ "highlighting": "string", "loc": { "start": { - "line": 52, + "line": 60, "column": 7, - "index": 1592 + "index": 1625 }, "end": { - "line": 54, + "line": 62, "column": 6, - "index": 1679 + "index": 1712 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_interval.ts" @@ -3515,14 +3515,14 @@ "highlighting": "string", "loc": { "start": { - "line": 55, + "line": 63, "column": 7, - "index": 1688 + "index": 1721 }, "end": { - "line": 57, + "line": 65, "column": 6, - "index": 1774 + "index": 1807 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_interval.ts" @@ -3533,14 +3533,14 @@ "highlighting": "string", "loc": { "start": { - "line": 88, + "line": 103, "column": 14, - "index": 2593 + "index": 2870 }, "end": { - "line": 88, + "line": 103, "column": 56, - "index": 2635 + "index": 2912 } }, "filepath": "src/components/date_picker/super_date_picker/pretty_interval.ts" @@ -3569,14 +3569,14 @@ "highlighting": "string", "loc": { "start": { - "line": 85, + "line": 87, "column": 22, - "index": 2713 + "index": 2775 }, "end": { - "line": 88, + "line": 90, "column": 3, - "index": 2793 + "index": 2855 } }, "filepath": "src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx" @@ -6899,32 +6899,14 @@ "highlighting": "string", "loc": { "start": { - "line": 295, - "column": 12, - "index": 8348 - }, - "end": { - "line": 298, - "column": 13, - "index": 8508 - } - }, - "filepath": "src/components/tree_view/tree_view.tsx" - }, - { - "token": "euiTreeView.ariaLabel", - "defString": "{nodeLabel} child of {ariaLabel}", - "highlighting": "string", - "loc": { - "start": { - "line": 322, - "column": 20, - "index": 9387 + "line": 291, + "column": 10, + "index": 8054 }, "end": { - "line": 330, - "column": 21, - "index": 9762 + "line": 294, + "column": 11, + "index": 8208 } }, "filepath": "src/components/tree_view/tree_view.tsx" diff --git a/i18ntokens_changelog.json b/i18ntokens_changelog.json index 37142bb6810..be77080cc1c 100644 --- a/i18ntokens_changelog.json +++ b/i18ntokens_changelog.json @@ -1,4 +1,13 @@ [ + { + "version": "93.1.0", + "changes": [ + { + "token": "euiTreeView.ariaLabel", + "changeType": "deleted" + } + ] + }, { "version": "93.0.0", "changes": [ From 500a99ca465c8e82d0595e0db909f60945668f36 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 12 Feb 2024 08:33:42 -0800 Subject: [PATCH 02/14] Updated changelog --- changelogs/CHANGELOG_2024.md | 24 +++++++++++++++++++ changelogs/upcoming/7496.md | 5 ---- changelogs/upcoming/7498.md | 1 - changelogs/upcoming/7501.md | 3 --- changelogs/upcoming/7502.md | 1 - changelogs/upcoming/7504.md | 3 --- changelogs/upcoming/7510.md | 1 - changelogs/upcoming/7513.md | 9 ------- changelogs/upcoming/7516.md | 2 -- .../src/components/guide_page/versions.json | 1 + 10 files changed, 25 insertions(+), 25 deletions(-) delete mode 100644 changelogs/upcoming/7496.md delete mode 100644 changelogs/upcoming/7498.md delete mode 100644 changelogs/upcoming/7501.md delete mode 100644 changelogs/upcoming/7502.md delete mode 100644 changelogs/upcoming/7504.md delete mode 100644 changelogs/upcoming/7510.md delete mode 100644 changelogs/upcoming/7513.md delete mode 100644 changelogs/upcoming/7516.md diff --git a/changelogs/CHANGELOG_2024.md b/changelogs/CHANGELOG_2024.md index c296edeff6a..a169a650578 100644 --- a/changelogs/CHANGELOG_2024.md +++ b/changelogs/CHANGELOG_2024.md @@ -1,3 +1,27 @@ +## [`v93.1.0`](https://github.com/elastic/eui/releases/v93.1.0) + +- Updated `EuiHighlight` to accept an array of `search` strings, which allows highlighting multiple, separate words within its children. This new type and behavior *only* works if `highlightAll` is also set to true. ([#7496](https://github.com/elastic/eui/pull/7496)) +- Added `index` glyph to `EuiIcon` ([#7498](https://github.com/elastic/eui/pull/7498)) +- Updated `EuiSuperDatePicker` with a new `refreshIntervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. ([#7501](https://github.com/elastic/eui/pull/7501)) +- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `intervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. ([#7501](https://github.com/elastic/eui/pull/7501)) +- Updated `onRefreshChange` to pass back a new `intervalUnits` key that contains the current interval unit format (seconds, minutes, or hours). ([#7501](https://github.com/elastic/eui/pull/7501)) +- Updated `EuiSuperDatePicker` with a new `canRoundRelativeUnits` prop, which defaults to true (current behavior). To preserve displaying the unit that users select for relative time, set this to false. ([#7502](https://github.com/elastic/eui/pull/7502)) +- Updated `EuiContextMenu` with a new `panels.items.renderItem` property, which allows rendering completely custom items next to standard `EuiContextMenuItem` objects ([#7510](https://github.com/elastic/eui/pull/7510)) +- Updated `EuiSuperDatePicker` with a new `refreshMinInterval` prop, which accepts a minimum number in milliseconds ([#7516](https://github.com/elastic/eui/pull/7516)) +- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `minInterval` prop, which accepts a minimum number in milliseconds ([#7516](https://github.com/elastic/eui/pull/7516)) + +**Bug fixes** + +- Fixed `EuiHighlight` to not parse `search` strings as regexes ([#7496](https://github.com/elastic/eui/pull/7496)) +- Fixed `EuiSuperDatePicker` submit bug when used within `
` elements ([#7504](https://github.com/elastic/eui/pull/7504)) +- Fixed an `EuiTreeView` bug where `aria-expanded` was being applied to items without expandable children ([#7513](https://github.com/elastic/eui/pull/7513)) + +**CSS-in-JS conversions** + +- Converted `EuiTreeView` to Emotion. Updates as part of the conversion: ([#7513](https://github.com/elastic/eui/pull/7513)) + - Removed `.euiTreeView__wrapper` div node + - Enforced consistent `icon` size based on `display` size + ## [`v93.0.0`](https://github.com/elastic/eui/releases/v93.0.0) **Bug fixes** diff --git a/changelogs/upcoming/7496.md b/changelogs/upcoming/7496.md deleted file mode 100644 index fcb4b3e8f93..00000000000 --- a/changelogs/upcoming/7496.md +++ /dev/null @@ -1,5 +0,0 @@ -- Updated `EuiHighlight` to accept an array of `search` strings, which allows highlighting multiple, separate words within its children. This new type and behavior *only* works if `highlightAll` is also set to true. - -**Bug fixes** - -- Fixed `EuiHighlight` to not parse `search` strings as regexes diff --git a/changelogs/upcoming/7498.md b/changelogs/upcoming/7498.md deleted file mode 100644 index 80cbd1217e1..00000000000 --- a/changelogs/upcoming/7498.md +++ /dev/null @@ -1 +0,0 @@ -- Added `index` glyph to `EuiIcon` \ No newline at end of file diff --git a/changelogs/upcoming/7501.md b/changelogs/upcoming/7501.md deleted file mode 100644 index 1dc88c525a2..00000000000 --- a/changelogs/upcoming/7501.md +++ /dev/null @@ -1,3 +0,0 @@ -- Updated `EuiSuperDatePicker` with a new `refreshIntervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. -- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `intervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. -- Updated `onRefreshChange` to pass back a new `intervalUnits` key that contains the current interval unit format (seconds, minutes, or hours). diff --git a/changelogs/upcoming/7502.md b/changelogs/upcoming/7502.md deleted file mode 100644 index f4ff0ca7b86..00000000000 --- a/changelogs/upcoming/7502.md +++ /dev/null @@ -1 +0,0 @@ -- Updated `EuiSuperDatePicker` with a new `canRoundRelativeUnits` prop, which defaults to true (current behavior). To preserve displaying the unit that users select for relative time, set this to false. diff --git a/changelogs/upcoming/7504.md b/changelogs/upcoming/7504.md deleted file mode 100644 index 98a468b0d2d..00000000000 --- a/changelogs/upcoming/7504.md +++ /dev/null @@ -1,3 +0,0 @@ -**Bug fixes** - -- Fixed `EuiSuperDatePicker` submit bug when used within `` elements diff --git a/changelogs/upcoming/7510.md b/changelogs/upcoming/7510.md deleted file mode 100644 index aa4670142b8..00000000000 --- a/changelogs/upcoming/7510.md +++ /dev/null @@ -1 +0,0 @@ -- Updated `EuiContextMenu` with a new `panels.items.renderItem` property, which allows rendering completely custom items next to standard `EuiContextMenuItem` objects diff --git a/changelogs/upcoming/7513.md b/changelogs/upcoming/7513.md deleted file mode 100644 index 30a64d7248a..00000000000 --- a/changelogs/upcoming/7513.md +++ /dev/null @@ -1,9 +0,0 @@ -**Bug fixes** - -- Fixed an `EuiTreeView` bug where `aria-expanded` was being applied to items without expandable children - -**CSS-in-JS conversions** - -- Converted `EuiTreeView` to Emotion. Updates as part of the conversion: - - Removed `.euiTreeView__wrapper` div node - - Enforced consistent `icon` size based on `display` size diff --git a/changelogs/upcoming/7516.md b/changelogs/upcoming/7516.md deleted file mode 100644 index f05e82de4e9..00000000000 --- a/changelogs/upcoming/7516.md +++ /dev/null @@ -1,2 +0,0 @@ -- Updated `EuiSuperDatePicker` with a new `refreshMinInterval` prop, which accepts a minimum number in milliseconds -- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `minInterval` prop, which accepts a minimum number in milliseconds diff --git a/src-docs/src/components/guide_page/versions.json b/src-docs/src/components/guide_page/versions.json index d685571e72a..b52425653f9 100644 --- a/src-docs/src/components/guide_page/versions.json +++ b/src-docs/src/components/guide_page/versions.json @@ -1,5 +1,6 @@ { "euiVersions": [ + "93.1.0", "93.0.0", "92.2.0", "92.1.1", From 8d96f4b8527bf1acc984fed4eecfe5e28a3e8341 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 12 Feb 2024 08:33:43 -0800 Subject: [PATCH 03/14] 93.1.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c7b8eaa58f3..08fc5265234 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@elastic/eui", "description": "Elastic UI Component Library", - "version": "93.0.0", + "version": "93.1.0", "license": "SEE LICENSE IN LICENSE.txt", "main": "lib", "module": "es", From b5f4460f3885f696ad81f81c599294a1a91c5e25 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 12 Feb 2024 08:39:34 -0800 Subject: [PATCH 04/14] changelog readability tweaks --- changelogs/CHANGELOG_2024.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/changelogs/CHANGELOG_2024.md b/changelogs/CHANGELOG_2024.md index a169a650578..5e25b56cf0a 100644 --- a/changelogs/CHANGELOG_2024.md +++ b/changelogs/CHANGELOG_2024.md @@ -1,14 +1,15 @@ ## [`v93.1.0`](https://github.com/elastic/eui/releases/v93.1.0) -- Updated `EuiHighlight` to accept an array of `search` strings, which allows highlighting multiple, separate words within its children. This new type and behavior *only* works if `highlightAll` is also set to true. ([#7496](https://github.com/elastic/eui/pull/7496)) - Added `index` glyph to `EuiIcon` ([#7498](https://github.com/elastic/eui/pull/7498)) -- Updated `EuiSuperDatePicker` with a new `refreshIntervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. ([#7501](https://github.com/elastic/eui/pull/7501)) -- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `intervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. ([#7501](https://github.com/elastic/eui/pull/7501)) -- Updated `onRefreshChange` to pass back a new `intervalUnits` key that contains the current interval unit format (seconds, minutes, or hours). ([#7501](https://github.com/elastic/eui/pull/7501)) -- Updated `EuiSuperDatePicker` with a new `canRoundRelativeUnits` prop, which defaults to true (current behavior). To preserve displaying the unit that users select for relative time, set this to false. ([#7502](https://github.com/elastic/eui/pull/7502)) +- Updated `EuiHighlight` to accept an array of `search` strings, which allows highlighting multiple, separate words within its children. This new type and behavior *only* works if `highlightAll` is also set to true. ([#7496](https://github.com/elastic/eui/pull/7496)) - Updated `EuiContextMenu` with a new `panels.items.renderItem` property, which allows rendering completely custom items next to standard `EuiContextMenuItem` objects ([#7510](https://github.com/elastic/eui/pull/7510)) -- Updated `EuiSuperDatePicker` with a new `refreshMinInterval` prop, which accepts a minimum number in milliseconds ([#7516](https://github.com/elastic/eui/pull/7516)) -- Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `minInterval` prop, which accepts a minimum number in milliseconds ([#7516](https://github.com/elastic/eui/pull/7516)) +- `EuiSuperDatePicker` updates: + - Updated `EuiSuperDatePicker` with a new `refreshIntervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. ([#7501](https://github.com/elastic/eui/pull/7501)) + - Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `intervalUnits` prop. Passing this prop allows controlling and overriding the default unit rounding behavior. ([#7501](https://github.com/elastic/eui/pull/7501)) + - Updated `onRefreshChange` to pass back a new `intervalUnits` key that contains the current interval unit format (seconds, minutes, or hours). ([#7501](https://github.com/elastic/eui/pull/7501)) + - Updated `EuiSuperDatePicker` with a new `canRoundRelativeUnits` prop, which defaults to true (current behavior). To preserve displaying the unit that users select for relative time, set this to false. ([#7502](https://github.com/elastic/eui/pull/7502)) + - Updated `EuiSuperDatePicker` with a new `refreshMinInterval` prop, which accepts a minimum number in milliseconds ([#7516](https://github.com/elastic/eui/pull/7516)) + - Updated `EuiAutoRefresh` and `EuiRefreshInterval` with a new `minInterval` prop, which accepts a minimum number in milliseconds ([#7516](https://github.com/elastic/eui/pull/7516)) **Bug fixes** From a559b6b41a7ce9771572871f3f065fa37c5896ce Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Mon, 12 Feb 2024 12:40:15 -0800 Subject: [PATCH 05/14] [EuiTreeView] Export `EuiTreeView.Item` (#7526) --- changelogs/upcoming/7526.md | 1 + src/components/tree_view/tree_view.tsx | 7 +++- .../tree_view/tree_view_item.stories.tsx | 39 +++++++++++++++++++ ...tem.styles.ts => tree_view_item.styles.ts} | 4 +- ..._tree_view_item.tsx => tree_view_item.tsx} | 39 ++++++++++++++++--- 5 files changed, 82 insertions(+), 8 deletions(-) create mode 100644 changelogs/upcoming/7526.md create mode 100644 src/components/tree_view/tree_view_item.stories.tsx rename src/components/tree_view/{_tree_view_item.styles.ts => tree_view_item.styles.ts} (97%) rename src/components/tree_view/{_tree_view_item.tsx => tree_view_item.tsx} (78%) diff --git a/changelogs/upcoming/7526.md b/changelogs/upcoming/7526.md new file mode 100644 index 00000000000..253827bb43c --- /dev/null +++ b/changelogs/upcoming/7526.md @@ -0,0 +1 @@ +- Added top-level `EuiTreeView.Item` export diff --git a/src/components/tree_view/tree_view.tsx b/src/components/tree_view/tree_view.tsx index 36daca8febc..1a148e12df4 100644 --- a/src/components/tree_view/tree_view.tsx +++ b/src/components/tree_view/tree_view.tsx @@ -24,7 +24,7 @@ import { CommonProps } from '../common'; import { EuiI18n } from '../i18n'; import { EuiScreenReaderOnly } from '../accessibility'; -import { EuiTreeViewItem } from './_tree_view_item'; +import { EuiTreeViewItem } from './tree_view_item'; import { euiTreeViewStyles } from './tree_view.styles'; const EuiTreeViewContext = createContext(''); @@ -367,4 +367,7 @@ export class EuiTreeViewClass extends Component< } } -export const EuiTreeView = withEuiTheme(EuiTreeViewClass); +export const EuiTreeView = Object.assign( + withEuiTheme(EuiTreeViewClass), + { Item: EuiTreeViewItem } +); diff --git a/src/components/tree_view/tree_view_item.stories.tsx b/src/components/tree_view/tree_view_item.stories.tsx new file mode 100644 index 00000000000..43e1a82f34f --- /dev/null +++ b/src/components/tree_view/tree_view_item.stories.tsx @@ -0,0 +1,39 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { EuiIcon } from '../icon'; + +import { EuiTreeView } from './tree_view'; +import type { EuiTreeViewItemProps } from './tree_view_item'; + +const meta: Meta = { + title: 'EuiTreeView.Item', + component: EuiTreeView.Item, + args: { + // Component defaults + display: 'default', + hasArrow: false, + isActive: false, + isExpanded: false, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + id: 'id', + label: 'Hello world', + icon: , + children: '', + }, +}; diff --git a/src/components/tree_view/_tree_view_item.styles.ts b/src/components/tree_view/tree_view_item.styles.ts similarity index 97% rename from src/components/tree_view/_tree_view_item.styles.ts rename to src/components/tree_view/tree_view_item.styles.ts index f33c875ce6d..5089c5aac96 100644 --- a/src/components/tree_view/_tree_view_item.styles.ts +++ b/src/components/tree_view/tree_view_item.styles.ts @@ -19,7 +19,9 @@ export const euiTreeViewItemStyles = (euiThemeContext: UseEuiTheme) => { return { li: { - euiTreeView__node: css``, + euiTreeView__node: css` + list-style: none; + `, default: css` ${logicalCSS('max-height', defaultSize)} line-height: ${defaultSize}; diff --git a/src/components/tree_view/_tree_view_item.tsx b/src/components/tree_view/tree_view_item.tsx similarity index 78% rename from src/components/tree_view/_tree_view_item.tsx rename to src/components/tree_view/tree_view_item.tsx index 3330e188099..2c8fec105bd 100644 --- a/src/components/tree_view/_tree_view_item.tsx +++ b/src/components/tree_view/tree_view_item.tsx @@ -8,7 +8,6 @@ import React, { FunctionComponent, - PropsWithChildren, HTMLAttributes, ReactNode, Ref, @@ -21,19 +20,49 @@ import { CommonProps } from '../common'; import { EuiIcon } from '../icon'; import { EuiTreeViewProps } from './tree_view'; -import { euiTreeViewItemStyles } from './_tree_view_item.styles'; +import { euiTreeViewItemStyles } from './tree_view_item.styles'; -type EuiTreeViewItemProps = HTMLAttributes & - CommonProps & - PropsWithChildren & { +export type EuiTreeViewItemProps = Omit< + HTMLAttributes, + 'id' | 'children' +> & + CommonProps & { + /** + * Required for `aria-controls` accessibility + */ id: string; + /** + * The main button content + */ label: ReactNode; + /** + * Used to render nested `EuiTreeView`s + */ + children?: ReactNode; + /** + * Optional icon to render. Pass, e.g., `` or `` + */ icon?: ReactNode; + /** + * Renders an arrow if `children` exists. Otherwise renders a blank icon + */ hasArrow?: boolean; + /** + * Adds a targetable modifier class + */ isActive?: boolean; + /** + * Sets the `aria-expanded` attribute + */ isExpanded?: boolean; + /** + * Determines default or compressed display + */ display?: EuiTreeViewProps['display']; buttonRef?: Ref; + /** + * Optional extra props to pass to the wrapping `
  • ` + */ wrapperProps?: HTMLAttributes; }; From cdc4beaf48b88b3e3ab8a9d6e90ddad32d7b834a Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 12 Feb 2024 12:49:26 -0800 Subject: [PATCH 06/14] update i18ntokens --- i18ntokens.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/i18ntokens.json b/i18ntokens.json index 141ad082606..c0f5b2856ac 100644 --- a/i18ntokens.json +++ b/i18ntokens.json @@ -6901,12 +6901,12 @@ "start": { "line": 291, "column": 10, - "index": 8054 + "index": 8053 }, "end": { "line": 294, "column": 11, - "index": 8208 + "index": 8207 } }, "filepath": "src/components/tree_view/tree_view.tsx" From 4a69af979b8736f7082fffec110c83857c104d73 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 12 Feb 2024 12:49:42 -0800 Subject: [PATCH 07/14] Updated changelog --- changelogs/CHANGELOG_2024.md | 6 ++++++ changelogs/upcoming/7526.md | 1 - src-docs/src/components/guide_page/versions.json | 1 + 3 files changed, 7 insertions(+), 1 deletion(-) delete mode 100644 changelogs/upcoming/7526.md diff --git a/changelogs/CHANGELOG_2024.md b/changelogs/CHANGELOG_2024.md index 5e25b56cf0a..de9ddb66bef 100644 --- a/changelogs/CHANGELOG_2024.md +++ b/changelogs/CHANGELOG_2024.md @@ -1,3 +1,9 @@ +## [`v93.1.1`](https://github.com/elastic/eui/releases/v93.2.0) + +**This is a patch release primarily intended for use by Kibana.** + +- Added top-level `EuiTreeView.Item` export ([#7526](https://github.com/elastic/eui/pull/7526)) + ## [`v93.1.0`](https://github.com/elastic/eui/releases/v93.1.0) - Added `index` glyph to `EuiIcon` ([#7498](https://github.com/elastic/eui/pull/7498)) diff --git a/changelogs/upcoming/7526.md b/changelogs/upcoming/7526.md deleted file mode 100644 index 253827bb43c..00000000000 --- a/changelogs/upcoming/7526.md +++ /dev/null @@ -1 +0,0 @@ -- Added top-level `EuiTreeView.Item` export diff --git a/src-docs/src/components/guide_page/versions.json b/src-docs/src/components/guide_page/versions.json index b52425653f9..3e289eda6cb 100644 --- a/src-docs/src/components/guide_page/versions.json +++ b/src-docs/src/components/guide_page/versions.json @@ -1,5 +1,6 @@ { "euiVersions": [ + "93.1.1", "93.1.0", "93.0.0", "92.2.0", From b06a6e20418cbda17b79e195f2b61e5780181eb2 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 12 Feb 2024 12:50:24 -0800 Subject: [PATCH 08/14] 93.1.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 08fc5265234..7d158957a4f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@elastic/eui", "description": "Elastic UI Component Library", - "version": "93.1.0", + "version": "93.1.1", "license": "SEE LICENSE IN LICENSE.txt", "main": "lib", "module": "es", From 13a13147b2f24467827841d052bc61d6434991b5 Mon Sep 17 00:00:00 2001 From: Tomasz Kajtoch Date: Tue, 13 Feb 2024 11:32:18 +0100 Subject: [PATCH 09/14] fix(EuiPageTemplate): replace `CSS.escape` usage with string replace to fix SSR support (#7525) --- changelogs/upcoming/7525.md | 3 +++ src/components/page_template/page_template.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) create mode 100644 changelogs/upcoming/7525.md diff --git a/changelogs/upcoming/7525.md b/changelogs/upcoming/7525.md new file mode 100644 index 00000000000..7bbd4785cfb --- /dev/null +++ b/changelogs/upcoming/7525.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed the `CSS is not defined` bug in `EuiPageTemplate` when rendering in some SSR environments, particularly Next.js v13 and up diff --git a/src/components/page_template/page_template.tsx b/src/components/page_template/page_template.tsx index e99361f7145..9f9b4b959f4 100644 --- a/src/components/page_template/page_template.tsx +++ b/src/components/page_template/page_template.tsx @@ -141,7 +141,7 @@ export const _EuiPageTemplate: FunctionComponent = ({ restrictWidth, paddingSize, // pageInnerId may contain colons that are parsed as pseudo-elements if not escaped - parent: `#${CSS.escape(pageInnerId)}`, + parent: `#${pageInnerId.replaceAll(':', '\\:')}`, }); const innerPanelled = () => panelled ?? Boolean(sidebar.length > 0); From 6468ebd4b8a8451464b2408f86e645524ad2faac Mon Sep 17 00:00:00 2001 From: Trevor Pierce <1Copenut@users.noreply.github.com> Date: Wed, 14 Feb 2024 10:25:24 -0600 Subject: [PATCH 10/14] [DOCS] Added a11y guidance for `EuiTooltip` and `EuiPopover` (#7527) --- src-docs/src/views/popover/popover_example.js | 35 ++++++++++++++--- .../src/views/tool_tip/tool_tip_example.js | 38 ++++++++++--------- 2 files changed, 50 insertions(+), 23 deletions(-) diff --git a/src-docs/src/views/popover/popover_example.js b/src-docs/src/views/popover/popover_example.js index 356288d8bbc..f8f532dbcd8 100644 --- a/src-docs/src/views/popover/popover_example.js +++ b/src-docs/src/views/popover/popover_example.js @@ -10,6 +10,7 @@ import { EuiPopoverTitle, EuiPopoverFooter, EuiCallOut, + EuiText, } from '../../../../src/components'; import { EuiPopoverPanelProps } from './props'; @@ -157,6 +158,35 @@ const inputPopoverSnippet = ` +

    + Use the EuiPopover component to hide controls or + options behind a clickable element. A popover is temporary so keep tasks + simple and narrowly focused. +

    + + + <> +
      +
    • + Popover triggers must be anchored to elements + that accept keyboard focus. +
      • +
    • + Popovers can contain interactive elements. They{' '} + must be controlled by a click handler. +
      • +
    • Popovers must not be activated by hover or focus events.
      • +
    + +     + + ), sections: [ { source: [ @@ -167,11 +197,6 @@ export const PopoverExample = { ], text: ( <> -

    - Use the EuiPopover component to hide controls or - options behind a clickable element. A popover is temporary so keep - tasks simple and narrowly focused. -

    While the visibility of the popover is maintained by the consuming application, popovers will automatically close when clicking outside diff --git a/src-docs/src/views/tool_tip/tool_tip_example.js b/src-docs/src/views/tool_tip/tool_tip_example.js index 9415195fee4..e2bcaff6d58 100644 --- a/src-docs/src/views/tool_tip/tool_tip_example.js +++ b/src-docs/src/views/tool_tip/tool_tip_example.js @@ -66,13 +66,26 @@ export const ToolTipExample = { - Putting anything other than plain text in a tooltip is lost on - screen readers. - - } - /> + title="Tooltips have three accessibilty requirements:" + > + <> +

      +
    • + Tooltips must be anchored to elements that accept + keyboard focus. +
      • +
    • + Put only plain text in tooltips so the content is accessible to + keyboard and screen reader users. +
      • +
    • + {' '} + Do not add links, buttons, or other interactive content inside + tooltips. +
      • +
    + + ), sections: [ @@ -87,17 +100,6 @@ export const ToolTipExample = { will change it if the tooltip gets too close to the edge of the screen.

    - - - Anchoring a tooltip to a non-interactive element makes it - difficult for keyboard-only and screen reader users to read. - - } - /> ), source: [ From a428963dee2f1e93818fa3c81849c441899740fc Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Wed, 14 Feb 2024 08:49:03 -0800 Subject: [PATCH 11/14] [Emotion] Convert EuiSideNav (#7521) --- changelogs/upcoming/7521.md | 19 ++ .../components/guide_page/_guide_page.scss | 4 - src-docs/src/views/app_view.js | 2 +- src-docs/src/views/side_nav/props.tsx | 2 +- src/components/index.scss | 1 - .../page_sidebar/page_sidebar.stories.tsx | 2 + .../page/page_sidebar/page_sidebar.styles.ts | 44 +++- .../page/page_sidebar/page_sidebar.tsx | 6 + .../__snapshots__/side_nav.test.tsx.snap | 249 +++++++++++------- .../__snapshots__/side_nav_item.test.tsx.snap | 72 ++--- src/components/side_nav/_index.scss | 5 - src/components/side_nav/_mixins.scss | 7 - src/components/side_nav/_side_nav.scss | 47 ---- src/components/side_nav/_side_nav_heading.tsx | 62 +++++ src/components/side_nav/_side_nav_item.scss | 181 ------------- src/components/side_nav/_variables.scss | 15 -- src/components/side_nav/side_nav.stories.tsx | 122 +++++++-- src/components/side_nav/side_nav.styles.ts | 62 +++++ src/components/side_nav/side_nav.test.tsx | 88 ++++++- src/components/side_nav/side_nav.tsx | 194 +++++++------- .../side_nav/side_nav_item.styles.ts | 191 ++++++++++++++ .../side_nav/side_nav_item.test.tsx | 5 +- src/components/side_nav/side_nav_item.tsx | 164 +++++++----- src/themes/amsterdam/overrides/_index.scss | 1 - src/themes/amsterdam/overrides/_side_nav.scss | 17 -- 25 files changed, 929 insertions(+), 633 deletions(-) create mode 100644 changelogs/upcoming/7521.md delete mode 100644 src/components/side_nav/_index.scss delete mode 100644 src/components/side_nav/_mixins.scss delete mode 100644 src/components/side_nav/_side_nav.scss create mode 100644 src/components/side_nav/_side_nav_heading.tsx delete mode 100644 src/components/side_nav/_side_nav_item.scss delete mode 100644 src/components/side_nav/_variables.scss create mode 100644 src/components/side_nav/side_nav.styles.ts create mode 100644 src/components/side_nav/side_nav_item.styles.ts delete mode 100644 src/themes/amsterdam/overrides/_side_nav.scss diff --git a/changelogs/upcoming/7521.md b/changelogs/upcoming/7521.md new file mode 100644 index 00000000000..abf1dfb39f7 --- /dev/null +++ b/changelogs/upcoming/7521.md @@ -0,0 +1,19 @@ +- Updated `EuiPageSidebar` and `EuiPageTemplate.Sidebar` with a new `hasEmbellish` prop (defaults to false) + +**Bug fixes** + +- Fixed `EuiSideNav` not correctly typing the `items` prop as required + +**Accessibility** + +- Fixed `EuiSideNav` to render a fallback aria-label on mobile toggles if no heading or mobile title exists + +**CSS-in-JS conversions** + +- Converted `EuiSideNav` to Emotion; Removed the following Sass variables: + - `$euiSideNavEmphasizedBackgroundColor` + - `$euiSideNavRootTextcolor` + - `$euiSideNavBranchTextcolor` + - `$euiSideNavSelectedTextcolor` + - `$euiSideNavDisabledTextcolor` +- Removed the `euiSideNavEmbellish` Sass mixin. Use the new `EuiPageSidebar` `hasEmbellish` prop instead diff --git a/src-docs/src/components/guide_page/_guide_page.scss b/src-docs/src/components/guide_page/_guide_page.scss index af407b0b542..9e45f31f4b7 100644 --- a/src-docs/src/components/guide_page/_guide_page.scss +++ b/src-docs/src/components/guide_page/_guide_page.scss @@ -1,9 +1,5 @@ @import '../../../../src/global_styling/mixins/helpers'; -.guideSideNav { - @include euiSideNavEmbellish; -} - .guideSideNav__content { @include euiYScroll; padding: 0 $euiSizeL $euiSizeL; diff --git a/src-docs/src/views/app_view.js b/src-docs/src/views/app_view.js index 7425a452d36..2821844c740 100644 --- a/src-docs/src/views/app_view.js +++ b/src-docs/src/views/app_view.js @@ -50,7 +50,7 @@ export const AppView = ({ children, currentRoute = {} }) => { restrictWidth={false} mainProps={{ id: 'start-of-content' }} > - + > = () =>
    ; -import { EuiSideNavHeadingProps } from '../../../../src/components/side_nav/side_nav'; +import { EuiSideNavHeadingProps } from '../../../../src/components/side_nav/_side_nav_heading'; export const EuiSideNavHeading: FunctionComponent< EuiSideNavHeadingProps > = () =>
    ; diff --git a/src/components/index.scss b/src/components/index.scss index 5b934fcc505..dcfd6a3c324 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -6,6 +6,5 @@ @import 'datagrid/index'; @import 'form/index'; @import 'markdown_editor/index'; -@import 'side_nav/index'; @import 'selectable/index'; @import 'table/index'; diff --git a/src/components/page/page_sidebar/page_sidebar.stories.tsx b/src/components/page/page_sidebar/page_sidebar.stories.tsx index 5b0d1d7959c..2321cb71900 100644 --- a/src/components/page/page_sidebar/page_sidebar.stories.tsx +++ b/src/components/page/page_sidebar/page_sidebar.stories.tsx @@ -28,6 +28,7 @@ const meta: Meta = { args: { // Component defaults paddingSize: 'm', // The component default is actually 'none', but for nicer visuals in Storybook we'll set it to 'm' + hasEmbellish: false, sticky: false, minWidth: 248, responsive: ['xs', 's'], @@ -70,6 +71,7 @@ export const StickyOffset: Story = { ...hideStorybookControls([ 'minWidth', 'paddingSize', + 'hasEmbellish', 'responsive', ]), }, diff --git a/src/components/page/page_sidebar/page_sidebar.styles.ts b/src/components/page/page_sidebar/page_sidebar.styles.ts index 047ea201eea..51eeed04328 100644 --- a/src/components/page/page_sidebar/page_sidebar.styles.ts +++ b/src/components/page/page_sidebar/page_sidebar.styles.ts @@ -7,18 +7,38 @@ */ import { css } from '@emotion/react'; + +import { UseEuiTheme, transparentize } from '../../../services'; import { euiYScroll } from '../../../global_styling'; -import { UseEuiTheme } from '../../../services'; -export const euiPageSidebarStyles = (euiThemeContext: UseEuiTheme) => ({ - euiPageSidebar: css` - /* Prevent side bar width from changing when content width changes */ - flex: 0 1 0%; - `, +export const euiPageSidebarStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + const embellishColor = transparentize(euiTheme.colors.lightShade, 0.3); - sticky: css` - ${euiYScroll(euiThemeContext, { height: 'auto' })} - flex-grow: 1; - position: sticky; - `, -}); + return { + euiPageSidebar: css` + /* Prevent side bar width from changing when content width changes */ + flex: 0 1 0%; + `, + sticky: css` + ${euiYScroll(euiThemeContext, { height: 'auto' })} + flex-grow: 1; + position: sticky; + `, + embellish: css` + background: linear-gradient( + 160deg, + ${embellishColor} 0, + ${embellishColor} ${euiTheme.size.xl}, + transparent 0 + ), + linear-gradient( + 175deg, + ${embellishColor} 0, + ${embellishColor} ${euiTheme.size.base}, + transparent 0 + ); + `, + }; +}; diff --git a/src/components/page/page_sidebar/page_sidebar.tsx b/src/components/page/page_sidebar/page_sidebar.tsx index f4233e51884..4fcc8e9dd82 100644 --- a/src/components/page/page_sidebar/page_sidebar.tsx +++ b/src/components/page/page_sidebar/page_sidebar.tsx @@ -31,6 +31,10 @@ export interface EuiPageSidebarProps * When using this setting it's best to be consistent throughout all similar usages. */ paddingSize?: EuiPaddingSize; + /** + * Renders a fancy little visual in the top left corner of the side bar + */ + hasEmbellish?: boolean; /** * Adds `position: sticky` and affords for any fixed position headers. */ @@ -61,6 +65,7 @@ export const EuiPageSidebar: FunctionComponent = ({ paddingSize = 'none', minWidth = 248, responsive = ['xs', 's'], + hasEmbellish = false, style, ...rest }) => { @@ -71,6 +76,7 @@ export const EuiPageSidebar: FunctionComponent = ({ const cssStyles = [ styles.euiPageSidebar, !isResponding && sticky && styles.sticky, + hasEmbellish && styles.embellish, useEuiPaddingCSS()[paddingSize], ]; diff --git a/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap b/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap index 31b7ef46d28..58e307a5f25 100644 --- a/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap +++ b/src/components/side_nav/__snapshots__/side_nav.test.tsx.snap @@ -7,7 +7,7 @@ exports[`EuiSideNav is rendered 1`] = ` data-test-subj="test subject string" >
    @@ -20,14 +20,14 @@ exports[`EuiSideNav props heading accepts more headingProps 1`] = ` >

    Side Nav Heading

    @@ -39,13 +39,13 @@ exports[`EuiSideNav props heading is hidden with screenReaderOnly 1`] = ` class="euiSideNav" >

    Side Nav Heading

    @@ -57,13 +57,13 @@ exports[`EuiSideNav props heading is rendered 1`] = ` class="euiSideNav" >

    Side Nav Heading

    @@ -71,10 +71,34 @@ exports[`EuiSideNav props heading is rendered 1`] = ` exports[`EuiSideNav props isOpenOnMobile defaults to false 1`] = ` @@ -82,10 +106,35 @@ exports[`EuiSideNav props isOpenOnMobile defaults to false 1`] = ` exports[`EuiSideNav props isOpenOnMobile is rendered when specified as true 1`] = ` @@ -96,20 +145,20 @@ exports[`EuiSideNav props items is rendered 1`] = ` class="euiSideNav" >
    A @@ -117,21 +166,21 @@ exports[`EuiSideNav props items is rendered 1`] = `
    B @@ -140,17 +189,17 @@ exports[`EuiSideNav props items is rendered 1`] = `
    E @@ -293,22 +342,22 @@ exports[`EuiSideNav props items renders items using a specified callback 1`] = ` class="euiSideNav" >
    A @@ -316,20 +365,20 @@ exports[`EuiSideNav props items renders items using a specified callback 1`] = `
    B @@ -348,22 +397,22 @@ exports[`EuiSideNav props items renders items which are links 1`] = ` class="euiSideNav" >
    A @@ -371,19 +420,19 @@ exports[`EuiSideNav props items renders items which are links 1`] = `
    B @@ -392,17 +441,17 @@ exports[`EuiSideNav props items renders items which are links 1`] = `
    D @@ -508,16 +557,16 @@ exports[`EuiSideNav props items renders selected item and automatically opens pa
    E @@ -539,18 +588,20 @@ exports[`EuiSideNav props mobileBreakpoints can be adjusted is rendered 1`] = ` class="euiSideNav" >

    @@ -571,7 +622,7 @@ exports[`EuiSideNav props mobileBreakpoints can be adjusted null is rendered 1`] class="euiSideNav" >
    diff --git a/src/components/side_nav/__snapshots__/side_nav_item.test.tsx.snap b/src/components/side_nav/__snapshots__/side_nav_item.test.tsx.snap index 8bb99340e41..aeef93a39a4 100644 --- a/src/components/side_nav/__snapshots__/side_nav_item.test.tsx.snap +++ b/src/components/side_nav/__snapshots__/side_nav_item.test.tsx.snap @@ -2,18 +2,18 @@ exports[`EuiSideNavItem can be disabled 1`] = `
    + + ), items: [ { name: 'Kibana', id: 'kibana', - }, - { - name: 'Observability', - id: 'observability', + icon: , + items: [ + { + name: 'Observability', + id: 'observability', + items: [ + { + name: 'Test', + id: 'test', + }, + ], + }, + ], }, { name: 'Security', id: 'security', + icon: , renderItem: ({ children }) => ( {children} ), diff --git a/src/components/side_nav/side_nav.styles.ts b/src/components/side_nav/side_nav.styles.ts new file mode 100644 index 00000000000..cb58d335505 --- /dev/null +++ b/src/components/side_nav/side_nav.styles.ts @@ -0,0 +1,62 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; + +import { UseEuiTheme } from '../../services'; +import { euiCanAnimate, logicalCSS } from '../../global_styling'; + +export const euiSideNavMobileStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + const fastTransition = `${euiTheme.animation.extraFast} ${euiTheme.animation.resistance}`; + const slowTransition = `${euiTheme.animation.extraSlow} ${euiTheme.animation.resistance}`; + + return { + // Mobile button + euiSideNav__mobileToggle: css` + ${logicalCSS('width', '100%')} + ${logicalCSS('height', 'auto')} + + /* Inherit from the wrapping heading element */ + padding: 1em; + font-size: inherit; + text-align: start; + + border-radius: 0; + ${logicalCSS('border-bottom', euiTheme.border.thin)} + `, + euiSideNav__mobileToggleContent: css` + justify-content: space-between; + `, + + // Mobile content + content: { + euiSideNav__mobileContent: css` + ${euiCanAnimate} { + transition: max-block-size ${fastTransition}, + padding-block ${fastTransition}, opacity ${slowTransition}, + visibility ${slowTransition}; + } + `, + hidden: css` + overflow: hidden; + visibility: hidden; + opacity: 0; + max-block-size: 0; + padding-inline: ${euiTheme.size.l}; + `, + open: css` + visibility: visible; + opacity: 1; + max-block-size: 5000px; + padding: ${euiTheme.size.l}; + `, + }, + }; +}; diff --git a/src/components/side_nav/side_nav.test.tsx b/src/components/side_nav/side_nav.test.tsx index 3be16f9097a..1df520b3d34 100644 --- a/src/components/side_nav/side_nav.test.tsx +++ b/src/components/side_nav/side_nav.test.tsx @@ -14,13 +14,15 @@ import { render } from '../../test/rtl'; import { EuiSideNav } from './side_nav'; import { RenderItem } from './side_nav_item'; +const JSDOM_BREAKPOINT = ['l']; + describe('EuiSideNav', () => { - shouldRenderCustomStyles(, { + shouldRenderCustomStyles(, { childProps: ['headingProps'], }); test('is rendered', () => { - const { container } = render(); + const { container } = render(); expect(container.firstChild).toMatchSnapshot(); }); @@ -28,13 +30,21 @@ describe('EuiSideNav', () => { describe('props', () => { describe('isOpenOnMobile', () => { test('defaults to false', () => { - const { container } = render(); + const { container } = render( + + ); expect(container.firstChild).toMatchSnapshot(); }); test('is rendered when specified as true', () => { - const { container } = render(); + const { container } = render( + + ); expect(container.firstChild).toMatchSnapshot(); }); @@ -43,7 +53,10 @@ describe('EuiSideNav', () => { describe('mobileBreakpoints can be adjusted', () => { test('is rendered', () => { const { container } = render( - + ); expect(container.firstChild).toMatchSnapshot(); @@ -51,7 +64,7 @@ describe('EuiSideNav', () => { test('null is rendered', () => { const { container } = render( - + ); expect(container.firstChild).toMatchSnapshot(); @@ -60,7 +73,9 @@ describe('EuiSideNav', () => { describe('heading', () => { test('is rendered', () => { - const { container } = render(); + const { container } = render( + + ); expect(container.firstChild).toMatchSnapshot(); }); @@ -68,6 +83,7 @@ describe('EuiSideNav', () => { test('is hidden with screenReaderOnly', () => { const { container } = render( @@ -79,6 +95,7 @@ describe('EuiSideNav', () => { test('accepts more headingProps', () => { const { container } = render( @@ -86,6 +103,63 @@ describe('EuiSideNav', () => { expect(container.firstChild).toMatchSnapshot(); }); + + describe('mobile behavior', () => { + it('is overridden by `mobileTitle`', () => { + const { getByTestSubject } = render( + + ); + const heading = getByTestSubject('heading'); + + expect(heading).toHaveTextContent('Mobile heading'); + expect(heading.querySelector('button')).toHaveAccessibleName( + 'Mobile heading' + ); + }); + + it('renders a fallback aria-label if neither `heading` nor `mobileTitle` is passed', () => { + const { getByTestSubject } = render( + + ); + const heading = getByTestSubject('heading'); + + expect(heading).toHaveTextContent(''); + expect(heading.querySelector('button')).toHaveAccessibleName( + 'Toggle navigation' + ); + }); + + it('does not render any visible text if `headingProps.screenReaderOnly` is true, but does render an aria-label', () => { + const { getByTestSubject } = render( + + ); + const heading = getByTestSubject('heading'); + + expect(heading).toHaveTextContent(''); + expect(heading.querySelector('button')).toHaveAccessibleName( + 'Toggle navigation' + ); + }); + }); }); describe('items', () => { diff --git a/src/components/side_nav/side_nav.tsx b/src/components/side_nav/side_nav.tsx index 663042523f5..d54d2bbac0a 100644 --- a/src/components/side_nav/side_nav.tsx +++ b/src/components/side_nav/side_nav.tsx @@ -10,26 +10,20 @@ import React, { Component, ReactNode, MouseEventHandler } from 'react'; import classNames from 'classnames'; import { CommonProps, PropsOf } from '../common'; - -import { EuiSideNavItem, RenderItem } from './side_nav_item'; -import { EuiSideNavItemType } from './side_nav_types'; import { EuiButtonEmpty } from '../button'; -import { EuiTitle, EuiTitleProps } from '../title'; -import { EuiScreenReaderOnly } from '../accessibility'; -import { EuiBreakpointSize, htmlIdGenerator } from '../../services'; +import { EuiI18n } from '../i18n'; +import { + EuiBreakpointSize, + htmlIdGenerator, + withEuiTheme, + WithEuiThemeProps, +} from '../../services'; import { EuiHideFor, EuiShowFor } from '../responsive'; -export type EuiSideNavHeadingProps = Partial & { - /** - * The actual HTML heading element to wrap the `heading`. - * Default is `h2` - */ - element?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'; - /** - * For best accessibility, `