diff --git a/.browserslistrc b/.browserslistrc index 40d69b91230..9154f755301 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -2,5 +2,7 @@ last 2 versions not dead not IE 11 Safari 7 +# adding as part of Storybook upgrade to v8 https://github.com/babel/babel/issues/16171#issuecomment-2015227043 +not op_mob >= 1 # Safari 7 for PhantomJS support \ No newline at end of file diff --git a/.buildkite/pipelines/pipeline_prune_staging_docs.yml b/.buildkite/pipelines/pipeline_prune_staging_docs.yml new file mode 100644 index 00000000000..4134b919239 --- /dev/null +++ b/.buildkite/pipelines/pipeline_prune_staging_docs.yml @@ -0,0 +1,6 @@ +## 🏠/.buildkite/pipelines/pipeline_prune_staging_docs.yml + +steps: + - agents: + provider: "gcp" + command: .buildkite/scripts/pipelines/pipeline_prune_staging_docs.sh diff --git a/.buildkite/pipelines/pipeline_pull_request_test.yml b/.buildkite/pipelines/pipeline_pull_request_test.yml index 11764ba1ec1..1674c938222 100644 --- a/.buildkite/pipelines/pipeline_pull_request_test.yml +++ b/.buildkite/pipelines/pipeline_pull_request_test.yml @@ -51,6 +51,8 @@ steps: artifact_paths: - "cypress/screenshots/**/*.png" - "cypress/videos/**/*.mp4" + retry: + automatic: true - command: .buildkite/scripts/pipelines/pipeline_test.sh label: ":cypress: Cypress tests on React 17" @@ -62,6 +64,8 @@ steps: artifact_paths: - "cypress/screenshots/**/*.png" - "cypress/videos/**/*.mp4" + retry: + automatic: true - command: .buildkite/scripts/pipelines/pipeline_test.sh label: ":cypress: Cypress tests on React 18" @@ -73,6 +77,8 @@ steps: artifact_paths: - "cypress/screenshots/**/*.png" - "cypress/videos/**/*.mp4" + retry: + automatic: true - command: .buildkite/scripts/pipelines/pipeline_test.sh label: ":axe: Cypress accessibility (a11y) tests on React 18" diff --git a/.buildkite/scripts/pipelines/pipeline_prune_staging_docs.sh b/.buildkite/scripts/pipelines/pipeline_prune_staging_docs.sh new file mode 100644 index 00000000000..b66f377b93c --- /dev/null +++ b/.buildkite/scripts/pipelines/pipeline_prune_staging_docs.sh @@ -0,0 +1,41 @@ +#!/bin/bash + +set -euo pipefail +set +x + +# Expected env variables: +# * GPROJECT - GCE project name, e.g. elastic-bekitzur +# * GCE_ACCOUNT - credentials for the google service account (JSON blob) +if [[ -z "${GCE_ACCOUNT}" ]]; then + echo ":fire: GCP credentials not set." 1>&2 + exit 1 +fi +if [[ -z "${GPROJECT}" ]]; then + echo "GPROJECT is not set, e.g. 'GPROJECT=elastic-bekitzur'" + exit 1 +fi + +# Login to the cloud with the service account +gcloud auth activate-service-account --key-file <(echo "${GCE_ACCOUNT}") +unset GCE_ACCOUNT + +EUI_DOCS_PROJECT=eui-docs-live +BUCKET=${GPROJECT}-${EUI_DOCS_PROJECT} + +# https://cloud.google.com/storage/docs/gsutil/commands/ls +ls_options=( + -d # only list directories + -l # include additional details about the subdir, notably the date as a second field +) +echo "Getting all but the most recent 50 PR staging links..." +list=$(gsutil ls "${ls_options[@]}" "gs://${BUCKET}/pr_*" \ + | sort -k 2 `# sort by the 2nd field returned by -l which is a timestamp` \ + | head -n -50 `# remove the last 50 items, so basically keep the latest 50 staging docs` \ +) +while IFS= read -r line || [[ -n $line ]]; do + url="$(echo -e "${line}" | tr -d '[:space:]')" # trim the leading whitespaces + url=${url%/} # trim the trailing slash + echo "Deleting $url" + # https://cloud.google.com/storage/docs/gsutil/commands/rm + gsutil -m rm -r "$url" +done < <(printf '%s' "$list") diff --git a/.loki/.gitignore b/.loki/.gitignore new file mode 100644 index 00000000000..a60a0897d2d --- /dev/null +++ b/.loki/.gitignore @@ -0,0 +1,2 @@ +current +difference diff --git a/.loki/reference/chrome_desktop_Display_EuiAspectRatio_Playground.png b/.loki/reference/chrome_desktop_Display_EuiAspectRatio_Playground.png new file mode 100644 index 00000000000..445db444328 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiAspectRatio_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiAvatar_Playground.png b/.loki/reference/chrome_desktop_Display_EuiAvatar_Playground.png new file mode 100644 index 00000000000..29908666e80 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiAvatar_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadgeGroup_Playground.png b/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadgeGroup_Playground.png new file mode 100644 index 00000000000..7edd6e7a7fd Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadgeGroup_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadge_Playground.png b/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadge_Playground.png new file mode 100644 index 00000000000..e1eea1fa45c Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiBadge_EuiBadge_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png b/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png new file mode 100644 index 00000000000..da93c102b51 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiBetaBadge_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiCallOut_Playground.png b/.loki/reference/chrome_desktop_Display_EuiCallOut_Playground.png new file mode 100644 index 00000000000..5bd344191d9 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiCallOut_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png b/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png new file mode 100644 index 00000000000..8ee2e263fce Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiCheckableCard_Playground.png b/.loki/reference/chrome_desktop_Display_EuiCheckableCard_Playground.png new file mode 100644 index 00000000000..fe9c079c176 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiCheckableCard_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png b/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png new file mode 100644 index 00000000000..bf1e8399479 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Custom.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png b/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png new file mode 100644 index 00000000000..a8b27831af9 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Regular.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png b/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png new file mode 100644 index 00000000000..a0bab6e7012 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentEvent_Update.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png b/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png new file mode 100644 index 00000000000..5c38193dcc5 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiComment_EuiCommentList_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png b/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png new file mode 100644 index 00000000000..c408d984962 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiComment_EuiComment_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png b/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png new file mode 100644 index 00000000000..efef66173ad Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png b/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png new file mode 100644 index 00000000000..78b45a64392 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiHealth_Playground.png b/.loki/reference/chrome_desktop_Display_EuiHealth_Playground.png new file mode 100644 index 00000000000..2a64cda7833 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiHealth_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiIcon_Playground.png b/.loki/reference/chrome_desktop_Display_EuiIcon_Playground.png new file mode 100644 index 00000000000..abbf6e06fdb Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiIcon_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiImage_Playground.png b/.loki/reference/chrome_desktop_Display_EuiImage_Playground.png new file mode 100644 index 00000000000..f24c67633f9 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiImage_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiListGroup_EuiListGroupItem_Playground.png b/.loki/reference/chrome_desktop_Display_EuiListGroup_EuiListGroupItem_Playground.png new file mode 100644 index 00000000000..8e6579d3d29 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiListGroup_EuiListGroupItem_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiListGroup_EuiListGroup_Playground.png b/.loki/reference/chrome_desktop_Display_EuiListGroup_EuiListGroup_Playground.png new file mode 100644 index 00000000000..bb7a56b52cf Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiListGroup_EuiListGroup_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiLoadingChart_Playground.png b/.loki/reference/chrome_desktop_Display_EuiLoadingChart_Playground.png new file mode 100644 index 00000000000..0ebb110d0d9 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiLoadingChart_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiLoadingElastic_Playground.png b/.loki/reference/chrome_desktop_Display_EuiLoadingElastic_Playground.png new file mode 100644 index 00000000000..2a99297fd41 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiLoadingElastic_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiLoadingLogo_Playground.png b/.loki/reference/chrome_desktop_Display_EuiLoadingLogo_Playground.png new file mode 100644 index 00000000000..9bf824a27da Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiLoadingLogo_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Custom_Color.png b/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Custom_Color.png new file mode 100644 index 00000000000..df7e27c4dec Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Custom_Color.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Playground.png b/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Playground.png new file mode 100644 index 00000000000..20fc80849d5 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiLoadingSpinner_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png b/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png new file mode 100644 index 00000000000..95bfa33e6f0 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiNotificationBadge_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Display_EuiPinnableListGroup_Playground.png b/.loki/reference/chrome_desktop_Display_EuiPinnableListGroup_Playground.png new file mode 100644 index 00000000000..6438599d221 Binary files /dev/null and b/.loki/reference/chrome_desktop_Display_EuiPinnableListGroup_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Playground.png b/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Playground.png new file mode 100644 index 00000000000..98e95fea216 Binary files /dev/null and b/.loki/reference/chrome_desktop_Editors_Syntax_EuiCodeBlock_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Editors_Syntax_EuiCode_Playground.png b/.loki/reference/chrome_desktop_Editors_Syntax_EuiCode_Playground.png new file mode 100644 index 00000000000..d73b7a2eabc Binary files /dev/null and b/.loki/reference/chrome_desktop_Editors_Syntax_EuiCode_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_Errors.png b/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_Errors.png new file mode 100644 index 00000000000..6eb1cf9668b Binary files /dev/null and b/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_Errors.png differ diff --git a/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_Playground.png b/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_Playground.png new file mode 100644 index 00000000000..e781cb2349a Binary files /dev/null and b/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_View_Mode.png b/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_View_Mode.png new file mode 100644 index 00000000000..938d1a737fe Binary files /dev/null and b/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_View_Mode.png differ diff --git a/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownFormat_Playground.png b/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownFormat_Playground.png new file mode 100644 index 00000000000..4c08848f839 Binary files /dev/null and b/.loki/reference/chrome_desktop_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownFormat_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Playground.png b/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Playground.png new file mode 100644 index 00000000000..eb3ab63b715 Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png b/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png new file mode 100644 index 00000000000..414de016f85 Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPickerSwatch_Playground.png b/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPickerSwatch_Playground.png new file mode 100644 index 00000000000..7e4a4ef3361 Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPickerSwatch_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.png b/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.png new file mode 100644 index 00000000000..d1c8044163d Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPicker_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png b/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png new file mode 100644 index 00000000000..b78bb812930 Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiComboBox_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png b/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png new file mode 100644 index 00000000000..19d66d07c07 Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiExpression_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Controlled_Component.png b/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Controlled_Component.png new file mode 100644 index 00000000000..897272a25fc Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Controlled_Component.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Icon_Shape.png b/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Icon_Shape.png new file mode 100644 index 00000000000..76b42b78108 Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Icon_Shape.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Playground.png b/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Playground.png new file mode 100644 index 00000000000..c570b904487 Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiFieldNumber_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiFieldText_Icon_Shape.png b/.loki/reference/chrome_desktop_Forms_EuiFieldText_Icon_Shape.png new file mode 100644 index 00000000000..ce79e9cbd46 Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiFieldText_Icon_Shape.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiFieldText_Playground.png b/.loki/reference/chrome_desktop_Forms_EuiFieldText_Playground.png new file mode 100644 index 00000000000..adb9412ebed Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiFieldText_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png b/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png new file mode 100644 index 00000000000..ac9e60bf2e3 Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Full_Width_And_Grow.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png b/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png new file mode 100644 index 00000000000..2ee18e6db07 Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Multiple_Buttons.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png b/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png new file mode 100644 index 00000000000..8c4f0d394cd Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiFilterButton_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png b/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png new file mode 100644 index 00000000000..3fe6ad213c3 Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Multiple_Popovers.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png b/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png new file mode 100644 index 00000000000..8c4f0d394cd Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png b/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png new file mode 100644 index 00000000000..6f6399ad19a Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiFilterGroup_With_Popover.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiInlineEditText_Edit_Mode.png b/.loki/reference/chrome_desktop_Forms_EuiInlineEditText_Edit_Mode.png new file mode 100644 index 00000000000..d5345ffd17c Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiInlineEditText_Edit_Mode.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiInlineEditText_Playground.png b/.loki/reference/chrome_desktop_Forms_EuiInlineEditText_Playground.png new file mode 100644 index 00000000000..767d3511c45 Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiInlineEditText_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiInlineEditTitle_Edit_Mode.png b/.loki/reference/chrome_desktop_Forms_EuiInlineEditTitle_Edit_Mode.png new file mode 100644 index 00000000000..542923048a8 Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiInlineEditTitle_Edit_Mode.png differ diff --git a/.loki/reference/chrome_desktop_Forms_EuiInlineEditTitle_Playground.png b/.loki/reference/chrome_desktop_Forms_EuiInlineEditTitle_Playground.png new file mode 100644 index 00000000000..8f9db493ed9 Binary files /dev/null and b/.loki/reference/chrome_desktop_Forms_EuiInlineEditTitle_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiAccordion_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiAccordion_Playground.png new file mode 100644 index 00000000000..4e558f7303b Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiAccordion_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png new file mode 100644 index 00000000000..ea8b30ef1fc Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png new file mode 100644 index 00000000000..ff1323b8d91 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiFlexGrid_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiFlexGrid_Playground.png new file mode 100644 index 00000000000..036be5d5f17 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiFlexGrid_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiFlexGroup_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiFlexGroup_Playground.png new file mode 100644 index 00000000000..ff0769b43b2 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiFlexGroup_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiFlexItem_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiFlexItem_Playground.png new file mode 100644 index 00000000000..cce68e1e8bd Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiFlexItem_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png new file mode 100644 index 00000000000..f000215269f Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png new file mode 100644 index 00000000000..48dd0e64783 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png new file mode 100644 index 00000000000..61ed27631cf Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png new file mode 100644 index 00000000000..369a2353f06 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png new file mode 100644 index 00000000000..6103f791df1 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png b/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png new file mode 100644 index 00000000000..835a6087b63 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png new file mode 100644 index 00000000000..11158f6e0a9 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Playground.png new file mode 100644 index 00000000000..b09b627b66f Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png new file mode 100644 index 00000000000..836ed36b56b Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png new file mode 100644 index 00000000000..d1ddd615fe3 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLink_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLink_Playground.png new file mode 100644 index 00000000000..19c33f75be8 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLink_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png new file mode 100644 index 00000000000..a41e1c1cd15 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png new file mode 100644 index 00000000000..bed076302c8 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_With_Text.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_With_Text.png new file mode 100644 index 00000000000..bed076302c8 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_With_Text.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png new file mode 100644 index 00000000000..c9930b05a7c Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png new file mode 100644 index 00000000000..373efe479f3 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png new file mode 100644 index 00000000000..0724f4fb19d Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png new file mode 100644 index 00000000000..54e2ac37744 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png new file mode 100644 index 00000000000..f0bc4017f7a Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png new file mode 100644 index 00000000000..ee25bc6eb39 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Playground.png new file mode 100644 index 00000000000..4d881502ce3 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png new file mode 100644 index 00000000000..a9acae61004 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Sections.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiHorizontalRule_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiHorizontalRule_Playground.png new file mode 100644 index 00000000000..04a703be7d4 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiHorizontalRule_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalBody_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalBody_Playground.png new file mode 100644 index 00000000000..2e2ee746c7b Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalBody_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalFooter_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalFooter_Playground.png new file mode 100644 index 00000000000..2c77e1fb759 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalFooter_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeaderTitle_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeaderTitle_Playground.png new file mode 100644 index 00000000000..43177605000 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeaderTitle_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeader_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeader_Playground.png new file mode 100644 index 00000000000..b46b499ae31 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeader_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.png b/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.png new file mode 100644 index 00000000000..897b37e0fef Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Playground.png new file mode 100644 index 00000000000..684d06d3b65 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png b/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png new file mode 100644 index 00000000000..3e10427638d Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageBody_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageBody_Playground.png new file mode 100644 index 00000000000..440f7316ace Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageBody_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png new file mode 100644 index 00000000000..db75c1f9f20 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png new file mode 100644 index 00000000000..c451a29b198 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png new file mode 100644 index 00000000000..34ddf0a46c9 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSection_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSection_Playground.png new file mode 100644 index 00000000000..5ea191ba6e5 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSection_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSidebar_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSidebar_Playground.png new file mode 100644 index 00000000000..c18ae7a8333 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSidebar_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSidebar_Sticky_Offset.png b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSidebar_Sticky_Offset.png new file mode 100644 index 00000000000..a1016adf03a Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageSidebar_Sticky_Offset.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Playground.png new file mode 100644 index 00000000000..f3000878467 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Restrict_Width.png b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Restrict_Width.png new file mode 100644 index 00000000000..c4170549816 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Restrict_Width.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png new file mode 100644 index 00000000000..165f232a7be Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableButton_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableButton_Playground.png new file mode 100644 index 00000000000..c1e52f4dcd3 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableButton_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableCollapseButton_Playground.png b/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableCollapseButton_Playground.png new file mode 100644 index 00000000000..655b6a44644 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableCollapseButton_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableCollapseButton_Production_Usage.png b/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableCollapseButton_Production_Usage.png new file mode 100644 index 00000000000..04a7ee9938c Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_EuiResizableCollapseButton_Production_Usage.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png b/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png new file mode 100644 index 00000000000..e2627892233 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png differ diff --git a/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png b/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png new file mode 100644 index 00000000000..cb83c4f1030 Binary files /dev/null and b/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiBreadcrumbs_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiBreadcrumbs_Playground.png new file mode 100644 index 00000000000..fc9322e5b71 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiBreadcrumbs_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png new file mode 100644 index 00000000000..f662f080694 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiButtonEmpty_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png b/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png new file mode 100644 index 00000000000..93ca5192bc7 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Multi_Selection.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png b/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png new file mode 100644 index 00000000000..93ca5192bc7 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_Single_Selection.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png b/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png new file mode 100644 index 00000000000..f01cfedf46d Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiButtonGroup_With_Tooltips.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiButtonIcon_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiButtonIcon_Playground.png new file mode 100644 index 00000000000..0b69926358a Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiButtonIcon_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiButton_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiButton_Playground.png new file mode 100644 index 00000000000..609038ef2c9 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiButton_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsedNavItem_Accordion.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsedNavItem_Accordion.png new file mode 100644 index 00000000000..d5129d5aa62 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsedNavItem_Accordion.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsedNavItem_Link.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsedNavItem_Link.png new file mode 100644 index 00000000000..d5129d5aa62 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsedNavItem_Link.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png new file mode 100644 index 00000000000..b96d21f6fad Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Flyout_Overlay.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Flyout_Overlay.png new file mode 100644 index 00000000000..38d2bf7e0f5 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Flyout_Overlay.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Global_CSS_Variable.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Global_CSS_Variable.png new file mode 100644 index 00000000000..e4b3c23b8a5 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Global_CSS_Variable.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Group_Edge_Case_Testing.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Group_Edge_Case_Testing.png new file mode 100644 index 00000000000..87fa6dcba82 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Group_Edge_Case_Testing.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Group_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Group_Playground.png new file mode 100644 index 00000000000..70a144a74a9 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Group_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Kibana_Example.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Kibana_Example.png new file mode 100644 index 00000000000..ac062aed3cf Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Kibana_Example.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Security_Example.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Security_Example.png new file mode 100644 index 00000000000..08fb7e45863 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Security_Example.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Accordion.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Accordion.png new file mode 100644 index 00000000000..5a0406df798 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Accordion.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_No_Title.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_No_Title.png new file mode 100644 index 00000000000..602ac6a04dd Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_No_Title.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Non_Accordion.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Non_Accordion.png new file mode 100644 index 00000000000..bb0183add2d Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Non_Accordion.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavItem_Edge_Case_Testing.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavItem_Edge_Case_Testing.png new file mode 100644 index 00000000000..56de98d363f Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavItem_Edge_Case_Testing.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavItem_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavItem_Playground.png new file mode 100644 index 00000000000..5a26da14acd Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNavItem_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Playground.png new file mode 100644 index 00000000000..b82f374f4ad Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenuItem_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenuItem_Playground.png new file mode 100644 index 00000000000..c12fe8a5726 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenuItem_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenuPanel_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenuPanel_Playground.png new file mode 100644 index 00000000000..9de9f793979 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenuPanel_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png b/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png new file mode 100644 index 00000000000..2afb7180a2b Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_Playground.png new file mode 100644 index 00000000000..95b825d1a85 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiFacetButton_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiFacetButton_Playground.png new file mode 100644 index 00000000000..434201992c6 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiFacetButton_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiFacetGroup_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiFacetGroup_Playground.png new file mode 100644 index 00000000000..2a6d59a8ef7 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiFacetGroup_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenuItem_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenuItem_Playground.png new file mode 100644 index 00000000000..70fdd78a31f Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenuItem_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png b/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png new file mode 100644 index 00000000000..bbc227be798 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png b/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png new file mode 100644 index 00000000000..60aa61c6819 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Playground.png new file mode 100644 index 00000000000..997d5bf1d19 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiLink_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiLink_Playground.png new file mode 100644 index 00000000000..59331cf3256 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiLink_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPaginationButtonArrow_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPaginationButtonArrow_Playground.png new file mode 100644 index 00000000000..160c4c1ac11 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPaginationButtonArrow_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPaginationButton_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPaginationButton_Playground.png new file mode 100644 index 00000000000..1e0532a8db3 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPaginationButton_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPagination_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPagination_Playground.png new file mode 100644 index 00000000000..48f5489e85b Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiPagination_EuiPagination_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Mobile_Side_Nav.png b/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Mobile_Side_Nav.png new file mode 100644 index 00000000000..659380240dd Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Mobile_Side_Nav.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Playground.png new file mode 100644 index 00000000000..5d42f0e5fe6 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Render_Item.png b/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Render_Item.png new file mode 100644 index 00000000000..fbb4913b19e Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiSideNav_Render_Item.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiTreeView_EuiTreeView_Item_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiTreeView_EuiTreeView_Item_Playground.png new file mode 100644 index 00000000000..2567b3d540f Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiTreeView_EuiTreeView_Item_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Navigation_EuiTreeView_EuiTreeView_Playground.png b/.loki/reference/chrome_desktop_Navigation_EuiTreeView_EuiTreeView_Playground.png new file mode 100644 index 00000000000..416023a05f2 Binary files /dev/null and b/.loki/reference/chrome_desktop_Navigation_EuiTreeView_EuiTreeView_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png b/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png new file mode 100644 index 00000000000..5bf97025bee Binary files /dev/null and b/.loki/reference/chrome_desktop_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png differ diff --git a/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_Playground.png b/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_Playground.png new file mode 100644 index 00000000000..c3696feaaec Binary files /dev/null and b/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png b/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png new file mode 100644 index 00000000000..c92521b09fe Binary files /dev/null and b/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png b/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png new file mode 100644 index 00000000000..25537c9bcd6 Binary files /dev/null and b/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Theming_EuiProvider_Font_Default_Units.png b/.loki/reference/chrome_desktop_Theming_EuiProvider_Font_Default_Units.png new file mode 100644 index 00000000000..ee3ee149bf6 Binary files /dev/null and b/.loki/reference/chrome_desktop_Theming_EuiProvider_Font_Default_Units.png differ diff --git a/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Global.png b/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Global.png new file mode 100644 index 00000000000..a4943650fd3 Binary files /dev/null and b/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Global.png differ diff --git a/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png b/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png new file mode 100644 index 00000000000..bfc4fb7339b Binary files /dev/null and b/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_CSS_Variables_Nearest.png differ diff --git a/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Wrapper_Clone_Element.png b/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Wrapper_Clone_Element.png new file mode 100644 index 00000000000..8223f6ca857 Binary files /dev/null and b/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Wrapper_Clone_Element.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiAutoSizer_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiAutoSizer_Playground.png new file mode 100644 index 00000000000..84bd33bfbc3 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiAutoSizer_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiBeacon_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiBeacon_Playground.png new file mode 100644 index 00000000000..9b8f908d715 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiBeacon_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiContext_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiContext_Playground.png new file mode 100644 index 00000000000..8c4fe99cc6d Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiContext_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiCopy_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiCopy_Playground.png new file mode 100644 index 00000000000..3ee6513de21 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiCopy_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiErrorBoundary_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiErrorBoundary_Playground.png new file mode 100644 index 00000000000..21f7f150774 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiErrorBoundary_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiHideFor_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiHideFor_Playground.png new file mode 100644 index 00000000000..ebd519267cb Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiHideFor_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiHighlight_Multiple_Search_Strings.png b/.loki/reference/chrome_desktop_Utilities_EuiHighlight_Multiple_Search_Strings.png new file mode 100644 index 00000000000..272ffb31ba6 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiHighlight_Multiple_Search_Strings.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiHighlight_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiHighlight_Playground.png new file mode 100644 index 00000000000..7c6bd342dbe Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiHighlight_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiI18nNumber_Multiple_Values.png b/.loki/reference/chrome_desktop_Utilities_EuiI18nNumber_Multiple_Values.png new file mode 100644 index 00000000000..bbdd5481af1 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiI18nNumber_Multiple_Values.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiI18nNumber_Single_Value.png b/.loki/reference/chrome_desktop_Utilities_EuiI18nNumber_Single_Value.png new file mode 100644 index 00000000000..b472c041748 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiI18nNumber_Single_Value.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiI18n_Interpolation.png b/.loki/reference/chrome_desktop_Utilities_EuiI18n_Interpolation.png new file mode 100644 index 00000000000..157b4a498a8 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiI18n_Interpolation.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Token_Interpolation.png b/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Token_Interpolation.png new file mode 100644 index 00000000000..ee860979fc2 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Token_Interpolation.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Tokens.png b/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Tokens.png new file mode 100644 index 00000000000..8ee2e263fce Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Tokens.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiI18n_Single_Token.png b/.loki/reference/chrome_desktop_Utilities_EuiI18n_Single_Token.png new file mode 100644 index 00000000000..6e3fc174af0 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiI18n_Single_Token.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiInnerText_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiInnerText_Playground.png new file mode 100644 index 00000000000..59a56585a04 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiInnerText_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiMark_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiMark_Playground.png new file mode 100644 index 00000000000..97f2a237a2c Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiMark_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png new file mode 100644 index 00000000000..c65808fa3e1 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiOutsideClickDetector_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiOutsideClickDetector_Playground.png new file mode 100644 index 00000000000..946ef9cc296 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiOutsideClickDetector_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiOverlayMask_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiOverlayMask_Playground.png new file mode 100644 index 00000000000..a2ac0534e38 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiOverlayMask_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png new file mode 100644 index 00000000000..a6224b12ba4 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiTextBlockTruncate_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiTextBlockTruncate_Playground.png new file mode 100644 index 00000000000..030bfba169e Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiTextBlockTruncate_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Playground.png b/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Playground.png new file mode 100644 index 00000000000..1236506bd09 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Playground.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png b/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png new file mode 100644 index 00000000000..f347171ba34 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Resize_Observer.png differ diff --git a/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png b/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png new file mode 100644 index 00000000000..44bcb0a8df6 Binary files /dev/null and b/.loki/reference/chrome_desktop_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiAspectRatio_Playground.png b/.loki/reference/chrome_mobile_Display_EuiAspectRatio_Playground.png new file mode 100644 index 00000000000..f00413d91cb Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiAspectRatio_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiAvatar_Playground.png b/.loki/reference/chrome_mobile_Display_EuiAvatar_Playground.png new file mode 100644 index 00000000000..5ab7daf4530 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiAvatar_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadgeGroup_Playground.png b/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadgeGroup_Playground.png new file mode 100644 index 00000000000..34eef1b3acd Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadgeGroup_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadge_Playground.png b/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadge_Playground.png new file mode 100644 index 00000000000..88b2985d315 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiBadge_EuiBadge_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png b/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png new file mode 100644 index 00000000000..b5dd8d9fd2d Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiBetaBadge_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiCallOut_Playground.png b/.loki/reference/chrome_mobile_Display_EuiCallOut_Playground.png new file mode 100644 index 00000000000..f916356bee3 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiCallOut_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png b/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png new file mode 100644 index 00000000000..af0d16de1e0 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiCheckableCard_Playground.png b/.loki/reference/chrome_mobile_Display_EuiCheckableCard_Playground.png new file mode 100644 index 00000000000..8a848e2ea23 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiCheckableCard_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png b/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png new file mode 100644 index 00000000000..ac7f1f15ef6 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Custom.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png b/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png new file mode 100644 index 00000000000..99beda1e931 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Regular.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png b/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png new file mode 100644 index 00000000000..04d5312bc66 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentEvent_Update.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png b/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png new file mode 100644 index 00000000000..1594366751c Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiComment_EuiCommentList_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png b/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png new file mode 100644 index 00000000000..8a83c12a79c Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiComment_EuiComment_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png b/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png new file mode 100644 index 00000000000..0eed498b64b Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png b/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png new file mode 100644 index 00000000000..2b3b4ecbf4d Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiHealth_Playground.png b/.loki/reference/chrome_mobile_Display_EuiHealth_Playground.png new file mode 100644 index 00000000000..db4e2413027 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiHealth_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiIcon_Playground.png b/.loki/reference/chrome_mobile_Display_EuiIcon_Playground.png new file mode 100644 index 00000000000..ccf5b5b6122 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiIcon_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiImage_Playground.png b/.loki/reference/chrome_mobile_Display_EuiImage_Playground.png new file mode 100644 index 00000000000..28bb274856e Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiImage_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiListGroup_EuiListGroupItem_Playground.png b/.loki/reference/chrome_mobile_Display_EuiListGroup_EuiListGroupItem_Playground.png new file mode 100644 index 00000000000..256c5cdb030 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiListGroup_EuiListGroupItem_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiListGroup_EuiListGroup_Playground.png b/.loki/reference/chrome_mobile_Display_EuiListGroup_EuiListGroup_Playground.png new file mode 100644 index 00000000000..b00713b12b7 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiListGroup_EuiListGroup_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiLoadingChart_Playground.png b/.loki/reference/chrome_mobile_Display_EuiLoadingChart_Playground.png new file mode 100644 index 00000000000..4b58a762d8e Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiLoadingChart_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiLoadingElastic_Playground.png b/.loki/reference/chrome_mobile_Display_EuiLoadingElastic_Playground.png new file mode 100644 index 00000000000..0eb444f8774 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiLoadingElastic_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiLoadingLogo_Playground.png b/.loki/reference/chrome_mobile_Display_EuiLoadingLogo_Playground.png new file mode 100644 index 00000000000..dc8820ae34b Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiLoadingLogo_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Custom_Color.png b/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Custom_Color.png new file mode 100644 index 00000000000..bc1afcede21 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Custom_Color.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Playground.png b/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Playground.png new file mode 100644 index 00000000000..4d41373ab9a Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiLoadingSpinner_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.png b/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.png new file mode 100644 index 00000000000..185f4c27e46 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiNotificationBadge_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Display_EuiPinnableListGroup_Playground.png b/.loki/reference/chrome_mobile_Display_EuiPinnableListGroup_Playground.png new file mode 100644 index 00000000000..fb655cb8478 Binary files /dev/null and b/.loki/reference/chrome_mobile_Display_EuiPinnableListGroup_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Playground.png b/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Playground.png new file mode 100644 index 00000000000..479576e38ca Binary files /dev/null and b/.loki/reference/chrome_mobile_Editors_Syntax_EuiCodeBlock_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Editors_Syntax_EuiCode_Playground.png b/.loki/reference/chrome_mobile_Editors_Syntax_EuiCode_Playground.png new file mode 100644 index 00000000000..3cce5f317ec Binary files /dev/null and b/.loki/reference/chrome_mobile_Editors_Syntax_EuiCode_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_Errors.png b/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_Errors.png new file mode 100644 index 00000000000..df01a477d7e Binary files /dev/null and b/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_Errors.png differ diff --git a/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_Playground.png b/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_Playground.png new file mode 100644 index 00000000000..fb75cc4eda8 Binary files /dev/null and b/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_View_Mode.png b/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_View_Mode.png new file mode 100644 index 00000000000..20d5fcee38b Binary files /dev/null and b/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownEditor_View_Mode.png differ diff --git a/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownFormat_Playground.png b/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownFormat_Playground.png new file mode 100644 index 00000000000..af2a09cbbaf Binary files /dev/null and b/.loki/reference/chrome_mobile_Editors_Syntax_EuiMarkdownEditor_EuiMarkdownFormat_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Playground.png b/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Playground.png new file mode 100644 index 00000000000..79f3911b1b6 Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPaletteDisplay_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png b/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png new file mode 100644 index 00000000000..12d93862c70 Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPickerSwatch_Playground.png b/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPickerSwatch_Playground.png new file mode 100644 index 00000000000..383a825f81b Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPickerSwatch_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Playground.png b/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Playground.png new file mode 100644 index 00000000000..b206566d572 Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPicker_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png b/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png new file mode 100644 index 00000000000..eba304a0eb9 Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiComboBox_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png b/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png new file mode 100644 index 00000000000..6fbdf345ab1 Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiExpression_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Controlled_Component.png b/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Controlled_Component.png new file mode 100644 index 00000000000..f60a83766ba Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Controlled_Component.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Icon_Shape.png b/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Icon_Shape.png new file mode 100644 index 00000000000..b549f45fe90 Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Icon_Shape.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Playground.png b/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Playground.png new file mode 100644 index 00000000000..54a9d1b3047 Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiFieldNumber_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiFieldText_Icon_Shape.png b/.loki/reference/chrome_mobile_Forms_EuiFieldText_Icon_Shape.png new file mode 100644 index 00000000000..41ba657c2fa Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiFieldText_Icon_Shape.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiFieldText_Playground.png b/.loki/reference/chrome_mobile_Forms_EuiFieldText_Playground.png new file mode 100644 index 00000000000..8a2c59b54ce Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiFieldText_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png b/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png new file mode 100644 index 00000000000..2f5b10f6ceb Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Full_Width_And_Grow.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png b/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png new file mode 100644 index 00000000000..2fa56e1bc01 Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Multiple_Buttons.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png b/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png new file mode 100644 index 00000000000..e88b5c9330a Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiFilterButton_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png b/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png new file mode 100644 index 00000000000..e21dcd4db5d Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Multiple_Popovers.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png b/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png new file mode 100644 index 00000000000..e88b5c9330a Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png b/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png new file mode 100644 index 00000000000..7e8dbaffcd0 Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiFilterGroup_With_Popover.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiInlineEditText_Edit_Mode.png b/.loki/reference/chrome_mobile_Forms_EuiInlineEditText_Edit_Mode.png new file mode 100644 index 00000000000..d283bca72ef Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiInlineEditText_Edit_Mode.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiInlineEditText_Playground.png b/.loki/reference/chrome_mobile_Forms_EuiInlineEditText_Playground.png new file mode 100644 index 00000000000..8d27a145d3c Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiInlineEditText_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiInlineEditTitle_Edit_Mode.png b/.loki/reference/chrome_mobile_Forms_EuiInlineEditTitle_Edit_Mode.png new file mode 100644 index 00000000000..d0d7ec3719e Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiInlineEditTitle_Edit_Mode.png differ diff --git a/.loki/reference/chrome_mobile_Forms_EuiInlineEditTitle_Playground.png b/.loki/reference/chrome_mobile_Forms_EuiInlineEditTitle_Playground.png new file mode 100644 index 00000000000..a96e957ac61 Binary files /dev/null and b/.loki/reference/chrome_mobile_Forms_EuiInlineEditTitle_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiAccordion_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiAccordion_Playground.png new file mode 100644 index 00000000000..2fd523bd26d Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiAccordion_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png new file mode 100644 index 00000000000..125842f64fe Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiConfirmModal_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiConfirmModal_Playground.png new file mode 100644 index 00000000000..c08739cdc87 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiConfirmModal_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiFlexGrid_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiFlexGrid_Playground.png new file mode 100644 index 00000000000..40737e817a9 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiFlexGrid_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiFlexGroup_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiFlexGroup_Playground.png new file mode 100644 index 00000000000..40737e817a9 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiFlexGroup_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiFlexItem_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiFlexItem_Playground.png new file mode 100644 index 00000000000..d0dc8536783 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiFlexItem_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png new file mode 100644 index 00000000000..ee7660c44c6 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png new file mode 100644 index 00000000000..d59ac2dbab3 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png new file mode 100644 index 00000000000..310d89075f6 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png new file mode 100644 index 00000000000..976a4267fd6 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png new file mode 100644 index 00000000000..a534170f28d Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png b/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png new file mode 100644 index 00000000000..932c9756cef Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Push_Flyouts.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png new file mode 100644 index 00000000000..942cdb5dd53 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Flyout_Example.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Playground.png new file mode 100644 index 00000000000..749f973105b Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png new file mode 100644 index 00000000000..8a87cb4e436 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderAlert_Popover_Example.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png new file mode 100644 index 00000000000..bca9e5c8e75 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderBreadcrumbs_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLink_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLink_Playground.png new file mode 100644 index 00000000000..0ec039a6437 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLink_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png new file mode 100644 index 00000000000..2cd588a3021 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_Playground.png new file mode 100644 index 00000000000..b11fd32b716 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_With_Text.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_With_Text.png new file mode 100644 index 00000000000..b11fd32b716 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLogo_With_Text.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png new file mode 100644 index 00000000000..88169e50c31 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Animation.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png new file mode 100644 index 00000000000..65c77c2197b Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Notification.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png new file mode 100644 index 00000000000..064a1069b94 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItemButton_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png new file mode 100644 index 00000000000..d25635499f3 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSectionItem_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png new file mode 100644 index 00000000000..a51223bb98f Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderSection_EuiHeaderSection_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png new file mode 100644 index 00000000000..257fbf7aba4 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Playground.png new file mode 100644 index 00000000000..69f6ddf9b14 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png new file mode 100644 index 00000000000..54055bd3e3c Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Sections.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiHorizontalRule_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiHorizontalRule_Playground.png new file mode 100644 index 00000000000..c33411bba92 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiHorizontalRule_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalBody_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalBody_Playground.png new file mode 100644 index 00000000000..081e1a3c140 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalBody_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalFooter_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalFooter_Playground.png new file mode 100644 index 00000000000..63b61378bb1 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalFooter_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalHeaderTitle_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalHeaderTitle_Playground.png new file mode 100644 index 00000000000..3dddea7f1d1 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalHeaderTitle_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalHeader_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalHeader_Playground.png new file mode 100644 index 00000000000..d9bc5fa0af3 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModalHeader_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.png b/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.png new file mode 100644 index 00000000000..19471672eb0 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Initial_Focus.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Playground.png new file mode 100644 index 00000000000..57ae3e0542d Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Toggle_Example.png b/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Toggle_Example.png new file mode 100644 index 00000000000..57ae3e0542d Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiModal_EuiModal_Toggle_Example.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageBody_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageBody_Playground.png new file mode 100644 index 00000000000..ad25d6805ea Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageBody_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png new file mode 100644 index 00000000000..492955a2a3f Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png new file mode 100644 index 00000000000..23cd229e0ce Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderSection_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png new file mode 100644 index 00000000000..fdd022c48f1 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSection_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSection_Playground.png new file mode 100644 index 00000000000..9920d422f7c Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSection_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSidebar_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSidebar_Playground.png new file mode 100644 index 00000000000..29ee9f8e36d Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSidebar_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSidebar_Sticky_Offset.png b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSidebar_Sticky_Offset.png new file mode 100644 index 00000000000..f4fd63bd9dd Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageSidebar_Sticky_Offset.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Playground.png new file mode 100644 index 00000000000..82180e28237 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Restrict_Width.png b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Restrict_Width.png new file mode 100644 index 00000000000..0029320fb6c Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Restrict_Width.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png new file mode 100644 index 00000000000..601b9521bfb Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableButton_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableButton_Playground.png new file mode 100644 index 00000000000..b9ccdb1104b Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableButton_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableCollapseButton_Playground.png b/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableCollapseButton_Playground.png new file mode 100644 index 00000000000..74abcab44d9 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableCollapseButton_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableCollapseButton_Production_Usage.png b/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableCollapseButton_Production_Usage.png new file mode 100644 index 00000000000..8e289b802c9 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_EuiResizableCollapseButton_Production_Usage.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png b/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png new file mode 100644 index 00000000000..040736f4141 Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png differ diff --git a/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png b/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png new file mode 100644 index 00000000000..405e5e807ee Binary files /dev/null and b/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiBreadcrumbs_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiBreadcrumbs_Playground.png new file mode 100644 index 00000000000..a0dc15eb2db Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiBreadcrumbs_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png new file mode 100644 index 00000000000..554037ef800 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiButtonEmpty_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png b/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png new file mode 100644 index 00000000000..f2aee429432 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Multi_Selection.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png b/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png new file mode 100644 index 00000000000..f2aee429432 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_Single_Selection.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png b/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png new file mode 100644 index 00000000000..f6d5ea7f8f4 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiButtonGroup_With_Tooltips.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiButtonIcon_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiButtonIcon_Playground.png new file mode 100644 index 00000000000..d5910f8b826 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiButtonIcon_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiButton_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiButton_Playground.png new file mode 100644 index 00000000000..8a127bb1356 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiButton_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsedNavItem_Accordion.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsedNavItem_Accordion.png new file mode 100644 index 00000000000..b26eeae6653 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsedNavItem_Accordion.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsedNavItem_Link.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsedNavItem_Link.png new file mode 100644 index 00000000000..b26eeae6653 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsedNavItem_Link.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png new file mode 100644 index 00000000000..c8ce24d2ae5 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Flyout_Overlay.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Flyout_Overlay.png new file mode 100644 index 00000000000..8ed48af52e1 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Flyout_Overlay.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Global_CSS_Variable.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Global_CSS_Variable.png new file mode 100644 index 00000000000..ad4f324d261 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Global_CSS_Variable.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Group_Edge_Case_Testing.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Group_Edge_Case_Testing.png new file mode 100644 index 00000000000..c97f128baf9 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Group_Edge_Case_Testing.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Group_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Group_Playground.png new file mode 100644 index 00000000000..c97f128baf9 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Group_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Kibana_Example.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Kibana_Example.png new file mode 100644 index 00000000000..c97f128baf9 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Kibana_Example.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Security_Example.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Security_Example.png new file mode 100644 index 00000000000..c97f128baf9 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavBeta_Security_Example.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Accordion.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Accordion.png new file mode 100644 index 00000000000..ff48325cdc1 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Accordion.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_No_Title.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_No_Title.png new file mode 100644 index 00000000000..f32888122af Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_No_Title.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Non_Accordion.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Non_Accordion.png new file mode 100644 index 00000000000..bb85090cbfb Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavGroup_Non_Accordion.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavItem_Edge_Case_Testing.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavItem_Edge_Case_Testing.png new file mode 100644 index 00000000000..e720f1e765e Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavItem_Edge_Case_Testing.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavItem_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavItem_Playground.png new file mode 100644 index 00000000000..34619f41a3b Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNavItem_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Playground.png new file mode 100644 index 00000000000..0606400f8bd Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenuItem_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenuItem_Playground.png new file mode 100644 index 00000000000..acfcd73d74b Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenuItem_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenuPanel_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenuPanel_Playground.png new file mode 100644 index 00000000000..7931a031c3e Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenuPanel_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png b/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png new file mode 100644 index 00000000000..176ef26452a Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_Playground.png new file mode 100644 index 00000000000..7df66374fc4 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiFacetButton_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiFacetButton_Playground.png new file mode 100644 index 00000000000..b256fa1de2e Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiFacetButton_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiFacetGroup_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiFacetGroup_Playground.png new file mode 100644 index 00000000000..0e5662e7291 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiFacetGroup_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenuItem_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenuItem_Playground.png new file mode 100644 index 00000000000..416900abcbb Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenuItem_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png b/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png new file mode 100644 index 00000000000..b782f52345d Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Multi.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png b/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png new file mode 100644 index 00000000000..cf659518bab Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Checkable_Single.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Playground.png new file mode 100644 index 00000000000..9ed7dc8acc0 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiKeyPadMenu_EuiKeyPadMenu_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiLink_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiLink_Playground.png new file mode 100644 index 00000000000..152fcc7a6f7 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiLink_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiPagination_EuiPaginationButtonArrow_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiPagination_EuiPaginationButtonArrow_Playground.png new file mode 100644 index 00000000000..9282fa382b3 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiPagination_EuiPaginationButtonArrow_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiPagination_EuiPaginationButton_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiPagination_EuiPaginationButton_Playground.png new file mode 100644 index 00000000000..13675bacf8e Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiPagination_EuiPaginationButton_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiPagination_EuiPagination_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiPagination_EuiPagination_Playground.png new file mode 100644 index 00000000000..02fb9624db5 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiPagination_EuiPagination_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Mobile_Side_Nav.png b/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Mobile_Side_Nav.png new file mode 100644 index 00000000000..aba847e171c Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Mobile_Side_Nav.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Playground.png new file mode 100644 index 00000000000..46d9a53bd85 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Render_Item.png b/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Render_Item.png new file mode 100644 index 00000000000..de2be93c161 Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiSideNav_Render_Item.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiTreeView_EuiTreeView_Item_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiTreeView_EuiTreeView_Item_Playground.png new file mode 100644 index 00000000000..248bd191c2a Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiTreeView_EuiTreeView_Item_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Navigation_EuiTreeView_EuiTreeView_Playground.png b/.loki/reference/chrome_mobile_Navigation_EuiTreeView_EuiTreeView_Playground.png new file mode 100644 index 00000000000..9bfedec546c Binary files /dev/null and b/.loki/reference/chrome_mobile_Navigation_EuiTreeView_EuiTreeView_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png b/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png new file mode 100644 index 00000000000..e6207ccfafc Binary files /dev/null and b/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png differ diff --git a/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_Playground.png b/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_Playground.png new file mode 100644 index 00000000000..7696f88eb7e Binary files /dev/null and b/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png b/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png new file mode 100644 index 00000000000..e6d78637952 Binary files /dev/null and b/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png b/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png new file mode 100644 index 00000000000..1a0e923b0b4 Binary files /dev/null and b/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Theming_EuiProvider_Font_Default_Units.png b/.loki/reference/chrome_mobile_Theming_EuiProvider_Font_Default_Units.png new file mode 100644 index 00000000000..54b39830dfa Binary files /dev/null and b/.loki/reference/chrome_mobile_Theming_EuiProvider_Font_Default_Units.png differ diff --git a/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Global.png b/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Global.png new file mode 100644 index 00000000000..5fbe14b9fd1 Binary files /dev/null and b/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Global.png differ diff --git a/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Nearest.png b/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Nearest.png new file mode 100644 index 00000000000..7e95385f76a Binary files /dev/null and b/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_CSS_Variables_Nearest.png differ diff --git a/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Wrapper_Clone_Element.png b/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Wrapper_Clone_Element.png new file mode 100644 index 00000000000..c467d42fee1 Binary files /dev/null and b/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Wrapper_Clone_Element.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiAutoSizer_Playground.png b/.loki/reference/chrome_mobile_Utilities_EuiAutoSizer_Playground.png new file mode 100644 index 00000000000..0da98b77e7b Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiAutoSizer_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiBeacon_Playground.png b/.loki/reference/chrome_mobile_Utilities_EuiBeacon_Playground.png new file mode 100644 index 00000000000..34e4b0616f8 Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiBeacon_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiContext_Playground.png b/.loki/reference/chrome_mobile_Utilities_EuiContext_Playground.png new file mode 100644 index 00000000000..683bebab753 Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiContext_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiCopy_Playground.png b/.loki/reference/chrome_mobile_Utilities_EuiCopy_Playground.png new file mode 100644 index 00000000000..41f16c88b27 Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiCopy_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiErrorBoundary_Playground.png b/.loki/reference/chrome_mobile_Utilities_EuiErrorBoundary_Playground.png new file mode 100644 index 00000000000..be476232d4b Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiErrorBoundary_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiHighlight_Multiple_Search_Strings.png b/.loki/reference/chrome_mobile_Utilities_EuiHighlight_Multiple_Search_Strings.png new file mode 100644 index 00000000000..53232669916 Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiHighlight_Multiple_Search_Strings.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiHighlight_Playground.png b/.loki/reference/chrome_mobile_Utilities_EuiHighlight_Playground.png new file mode 100644 index 00000000000..18d7448e57b Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiHighlight_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiI18nNumber_Multiple_Values.png b/.loki/reference/chrome_mobile_Utilities_EuiI18nNumber_Multiple_Values.png new file mode 100644 index 00000000000..4c45783a287 Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiI18nNumber_Multiple_Values.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiI18nNumber_Single_Value.png b/.loki/reference/chrome_mobile_Utilities_EuiI18nNumber_Single_Value.png new file mode 100644 index 00000000000..4a2eb57f89a Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiI18nNumber_Single_Value.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiI18n_Interpolation.png b/.loki/reference/chrome_mobile_Utilities_EuiI18n_Interpolation.png new file mode 100644 index 00000000000..a72725f1b56 Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiI18n_Interpolation.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Token_Interpolation.png b/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Token_Interpolation.png new file mode 100644 index 00000000000..ad948a038cc Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Token_Interpolation.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Tokens.png b/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Tokens.png new file mode 100644 index 00000000000..af0d16de1e0 Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Tokens.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiI18n_Single_Token.png b/.loki/reference/chrome_mobile_Utilities_EuiI18n_Single_Token.png new file mode 100644 index 00000000000..61d4d222784 Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiI18n_Single_Token.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiInnerText_Playground.png b/.loki/reference/chrome_mobile_Utilities_EuiInnerText_Playground.png new file mode 100644 index 00000000000..1540048729c Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiInnerText_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiMark_Playground.png b/.loki/reference/chrome_mobile_Utilities_EuiMark_Playground.png new file mode 100644 index 00000000000..e42b5fc8585 Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiMark_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png b/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png new file mode 100644 index 00000000000..317cc1a963b Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiOutsideClickDetector_Playground.png b/.loki/reference/chrome_mobile_Utilities_EuiOutsideClickDetector_Playground.png new file mode 100644 index 00000000000..2806ebe9d7a Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiOutsideClickDetector_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiOverlayMask_Playground.png b/.loki/reference/chrome_mobile_Utilities_EuiOverlayMask_Playground.png new file mode 100644 index 00000000000..3d88e5ef567 Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiOverlayMask_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png b/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png new file mode 100644 index 00000000000..a6bb9683537 Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiTextBlockTruncate_Playground.png b/.loki/reference/chrome_mobile_Utilities_EuiTextBlockTruncate_Playground.png new file mode 100644 index 00000000000..82f64e5daab Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiTextBlockTruncate_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png b/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png new file mode 100644 index 00000000000..a1925a29e22 Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Playground.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png b/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png new file mode 100644 index 00000000000..c124690cf84 Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Resize_Observer.png differ diff --git a/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png b/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png new file mode 100644 index 00000000000..50f1e94799b Binary files /dev/null and b/.loki/reference/chrome_mobile_Utilities_EuiTextTruncate_Start_End_Anchor_For_Search.png differ diff --git a/.storybook/loki.ts b/.storybook/loki.ts new file mode 100644 index 00000000000..d585baf77a3 --- /dev/null +++ b/.storybook/loki.ts @@ -0,0 +1,24 @@ +/* + * 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. + */ + +export const LOKI_SELECTORS = { + /** + * Default story selector + * Please keep in sync with loki.config.js + */ + default: '#story-wrapper > *', + /** + * Text node only selector + * To be used in stories for components rendering a text node instead of JSX elements + */ + textOnly: '#story-wrapper', + /** + * Portal element content selector + */ + portal: '[data-euiportal="true"]', +} as const; diff --git a/.storybook/main.ts b/.storybook/main.ts index 28888a6b150..74943e3b54c 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -14,6 +14,7 @@ const config: StorybookConfig = { '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', + '@storybook/addon-webpack5-compiler-babel', ], framework: { name: '@storybook/react-webpack5', @@ -34,6 +35,9 @@ const config: StorybookConfig = { docs: { autodocs: 'tag', }, + typescript: { + reactDocgen: 'react-docgen-typescript', + }, }; export default config; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 5c469f94a12..78dd319a6b0 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -60,6 +60,8 @@ const preview: Preview = { {...(context.componentId === 'theming-euiprovider' && context.args)} >
*/ + id="story-wrapper" css={[ writingModeStyles.writingMode, // @ts-ignore - we're manually ensuring `writingMode` globals match our Emotion style keys @@ -101,7 +103,6 @@ const preview: Preview = { }, }, parameters: { - actions: { argTypesRegex: '^on[A-Z].*' }, backgrounds: { disable: true }, // Use colorMode instead options: { showPanel: true, // default to showing the controls panel diff --git a/.storybook/utils.test.ts b/.storybook/utils.test.ts index c8d8ee9db33..20201423aeb 100644 --- a/.storybook/utils.test.ts +++ b/.storybook/utils.test.ts @@ -6,11 +6,14 @@ * Side Public License, v 1. */ -import { +import * as utils from './utils'; + +const { hideStorybookControls, disableStorybookControls, moveStorybookControlsToCategory, -} from './utils'; + enableFunctionToggleControls, +} = utils; describe('hideStorybookControls', () => { it('updates the provided config with the expected `argTypes` object when passed prop name strings', () => { @@ -198,3 +201,67 @@ describe('moveStorybookControlsToCategory', () => { ]); }); }); + +describe('enableFunctionToggleControls', () => { + it('updates the provided config with the expected `argTypes` object when passed function prop name strings', () => { + expect(enableFunctionToggleControls({ argTypes: {} }, ['onClick'])).toEqual( + { + args: { + onClick: true, + }, + argTypes: { + onClick: { + control: 'boolean', + mapping: { false: undefined, true: expect.any(Function) }, + }, + }, + parameters: { actions: { argTypesRegex: null } }, + } + ); + }); + + it('merges existing and new `argTypes` objects correctly', () => { + type TestProps = { hello: boolean; onHello: () => {} }; + + expect( + enableFunctionToggleControls( + { + args: { hello: true }, + argTypes: { + isDisabled: { control: { type: 'boolean' } }, + }, + }, + ['onHello'] + ) + ).toEqual({ + args: { + hello: true, + onHello: true, + }, + argTypes: { + isDisabled: { control: { type: 'boolean' } }, + onHello: { + control: 'boolean', + mapping: { false: undefined, true: expect.any(Function) }, + }, + }, + parameters: { actions: { argTypesRegex: null } }, + }); + }); + + it('throws a typescript error if a generic is passed and the prop names do not match', () => { + type TestProps = { hello: boolean; onHello: () => {} }; + + // No typescript error + enableFunctionToggleControls({ argTypes: {} }, [ + 'hello', + 'onHello', + ]); + enableFunctionToggleControls({ argTypes: {} }, [ + 'hello', + 'onHello', + // @ts-expect-error - will fail `yarn lint` if a TS error is *not* produced + 'error', + ]); + }); +}); diff --git a/.storybook/utils.ts b/.storybook/utils.ts index 2c1bfa6336f..ecb91fa4cb0 100644 --- a/.storybook/utils.ts +++ b/.storybook/utils.ts @@ -11,6 +11,7 @@ */ import type { Args, ArgTypes, Meta, Preview, StoryObj } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; type StorybookConfig = Meta | StoryObj | Preview; @@ -27,10 +28,12 @@ export const hideStorybookControls = ( config: StorybookConfig, propNames: Array ): StorybookConfig => { - const updatedConfig = _updateArgTypes(config, propNames, { - key: 'table', - value: { disable: true }, - }); + const updatedConfig = _updateArgTypes(config, propNames, [ + { + key: 'table', + value: { disable: true }, + }, + ]); return updatedConfig; }; @@ -49,10 +52,12 @@ export const disableStorybookControls = ( config: StorybookConfig, propNames: Array ): StorybookConfig => { - const updatedConfig = _updateArgTypes(config, propNames, { - key: 'control', - value: false, - }); + const updatedConfig = _updateArgTypes(config, propNames, [ + { + key: 'control', + value: false, + }, + ]); return updatedConfig; }; @@ -72,11 +77,70 @@ export const moveStorybookControlsToCategory = ( propNames: Array, category = 'Additional' ): StorybookConfig => { - const updatedConfig = _updateArgTypes(config, propNames, { - key: 'table', - value: { category }, + const updatedConfig = _updateArgTypes(config, propNames, [ + { + key: 'table', + value: { category }, + }, + ]); + + return updatedConfig; +}; + +/** + * Configures passed argTypes to be setup as toggle control + * which fires a Storybook action when enabled. + * Should be used for function props only. + * + * Can be used for preview (Preview), component (Meta) or story (Story) + * context by passing the config object for either. Use after defining + * the specific config to be able to pass the config to this util. + * + * @returns the mutated config + */ +export const enableFunctionToggleControls = ( + config: StorybookConfig, + propNames: Array +) => { + const setAction = (propName: string | number) => ({ + true: action(propName.toString()), + false: undefined, }); + /* Sets the default value for the passed function prop. + This is needed to ensure the coolean control is set and + to prevent additional clicks. + NOTE: This has to happen before the argTypes are updated */ + config.args = propNames.reduce( + (acc, propName) => ({ + ...acc, + [propName]: true, + }), + config.args + ); + + let updatedConfig = _updateArgTypes(config, propNames, [ + { key: 'control', value: 'boolean' }, + { + key: 'mapping', + value: setAction, + }, + ]); + + updatedConfig = { + ...updatedConfig, + /* Overwrites global parameters.actions setting in preview.tsx which enables + actions on function props starting with "on[Name]" by default. This is needed + to ensure the default "false" state is actually false. */ + parameters: { + ...updatedConfig.parameters, + actions: { + ...updatedConfig.parameters?.actions, + argTypesRegex: null, + }, + }, + }; + return updatedConfig; }; @@ -112,29 +176,43 @@ export const hidePanel = { const _updateArgTypes = ( config: StorybookConfig, propNames: Array, - { - key, - value, - }: { key: string; value: Record | boolean } + controls: Array<{ + key: string; + value: + | Record + | boolean + | string + | ((propName: any) => Record); + }> ): StorybookConfig => { const currentArgTypes = config.argTypes as Partial>; const newArgTypes = { ...currentArgTypes }; for (const propName of propNames) { - const currentArgTypeValue = newArgTypes?.[propName] ?? ({} as Args); - const currentControlValue = currentArgTypeValue.hasOwnProperty(key) - ? currentArgTypeValue[key] - : ({} as Record); - - const newValue = - typeof value === 'object' && typeof currentArgTypeValue[key] === 'object' - ? { ...currentControlValue, ...value } - : value; - - newArgTypes[propName] = { - ...currentArgTypeValue, - [key]: newValue, - }; + for (const { key, value } of controls) { + const currentArgTypeValue = newArgTypes?.[propName] ?? ({} as Args); + const currentControlValue = currentArgTypeValue.hasOwnProperty(key) + ? currentArgTypeValue[key] + : ({} as Record); + + let newValue = value; + + if (typeof value === 'function') { + newValue = value(propName); + } + + if ( + typeof value === 'object' && + typeof currentArgTypeValue[key] === 'object' + ) { + newValue = { ...currentControlValue, ...value }; + } + + newArgTypes[propName] = { + ...currentArgTypeValue, + [key]: newValue, + }; + } } config.argTypes = newArgTypes; diff --git a/catalog-info.yaml b/catalog-info.yaml index dad75e9b53b..a9f97961927 100644 --- a/catalog-info.yaml +++ b/catalog-info.yaml @@ -205,7 +205,6 @@ spec: build_tags: false build_pull_requests: true filter_enabled: true - # Start Buildkite jobs using the API only filter_condition: | (build.creator.name == 'elasticmachine' && build.pull_request.id != null) teams: @@ -258,6 +257,48 @@ spec: everyone: access_level: READ_ONLY +--- +## +# buildkite-pipeline-eui-prune-staging-docs +# Run this pipeline manually in Buildkite's UI whenever we need to delete old PR staging servers +## + +# yaml-language-server: $schema=https://gist.githubusercontent.com/elasticmachine/988b80dae436cafea07d9a4a460a011d/raw/e57ee3bed7a6f73077a3f55a38e76e40ec87a7cf/rre.schema.json +apiVersion: backstage.io/v1alpha1 +kind: Resource +metadata: + name: buildkite-pipeline-eui-prune-staging-docs + description: EUI pipeline to prune old PR staging docs + links: [ + { + title: "EUI - prune-staging-docs", + url: "https://buildkite.com/elastic/eui-prune-staging-docs", + } + ] + +spec: + type: buildkite-pipeline + owner: group:eui-team + system: buildkite + implementation: + apiVersion: buildkite.elastic.dev/v1 + kind: Pipeline + metadata: + name: eui-prune-staging-docs + spec: + repository: elastic/eui + pipeline_file: ".buildkite/pipelines/pipeline_prune_staging_docs.yml" + provider_settings: + # Start Buildkite jobs using the web UI only + build_branches: false + build_tags: false + build_pull_requests: false + teams: + eui-team: + access_level: MANAGE_BUILD_AND_READ + everyone: + access_level: READ_ONLY + --- ## # buildkite-pipeline-eui-release diff --git a/changelogs/CHANGELOG_2024.md b/changelogs/CHANGELOG_2024.md index 62cdfead958..f26603424a3 100644 --- a/changelogs/CHANGELOG_2024.md +++ b/changelogs/CHANGELOG_2024.md @@ -1,3 +1,53 @@ +## [`v94.2.1`](https://github.com/elastic/eui/releases/v94.2.1) + +**Bug fixes** + +- Fixed an `EuiTabbedContent` edge case bug that occurred when updated with a completely different set of `tabs` ([#7713](https://github.com/elastic/eui/pull/7713)) +- Fixed the `@storybook/test` dependency to be listed in `devDependencies` and not `dependencies` ([#7719](https://github.com/elastic/eui/pull/7719)) + +## [`v94.2.0`](https://github.com/elastic/eui/releases/v94.2.0) + +- Updated `getDefaultEuiMarkdownPlugins()` to allow excluding the following plugins in addition to `tooltip`: ([#7676](https://github.com/elastic/eui/pull/7676)) + - `checkbox` + - `linkValidator` + - `lineBreaks` + - `emoji` +- Updated `EuiSelectable`'s `isPreFiltered` prop to allow passing a configuration object, which allows disabling search highlighting in addition to search filtering ([#7683](https://github.com/elastic/eui/pull/7683)) +- Updated `EuiFlexGroup` and `EuiFlexItem` prop types to support passing any valid React component type to the `component` prop and ensure proper type checking of the extra props forwarded to the `component`. ([#7688](https://github.com/elastic/eui/pull/7688)) +- Updated `EuiSearchBar` to allow the `@` special character in query string searches ([#7702](https://github.com/elastic/eui/pull/7702)) +- Added a new, optional `optionMatcher` prop to `EuiSelectable` and `EuiComboBox` allowing passing a custom option matcher function to these components and controlling option filtering for given search string ([#7709](https://github.com/elastic/eui/pull/7709)) + +**Bug fixes** + +- Fixed an `EuiPageTemplate` bug where prop updates would not cascade down to child sections ([#7648](https://github.com/elastic/eui/pull/7648)) + - To cascade props down to the sidebar, `EuiPageTemplate` now explicitly requires using the `EuiPageTemplate.Sidebar` rather than `EuiPageSidebar` +- Fixed `EuiFieldNumber`'s typing to accept an icon configuration shape ([#7666](https://github.com/elastic/eui/pull/7666)) +- Fixed `EuiFieldText` and `EuiFieldNumber` to render the correct paddings for icon shapes set to `side: 'right'` ([#7666](https://github.com/elastic/eui/pull/7666)) +- Fixed `EuiFieldText` and `EuiFieldNumber` to fully ignore `icon`/`prepend`/`append` when `controlOnly` is set to true ([#7666](https://github.com/elastic/eui/pull/7666)) +- Fixed `EuiColorPicker`'s input not setting the correct right padding for the number of icons displayed ([#7666](https://github.com/elastic/eui/pull/7666)) +- Visual fixes for `EuiRange`s with `showInput`: ([#7678](https://github.com/elastic/eui/pull/7678)) + - Longer `append`/`prepend` labels no longer cause a background bug + - Inputs can no longer overwhelm the actual range in width +- Fixed a visual text alignment regression in `EuiTableRowCell`s with the `row` header scope ([#7681](https://github.com/elastic/eui/pull/7681)) +- Fixed `toolTipProps` type on `EuiSuperUpdateButton` to use `Partial` ([#7692](https://github.com/elastic/eui/pull/7692)) +- Fixes missing prop type for `popperProps` on `EuiDatePicker` ([#7694](https://github.com/elastic/eui/pull/7694)) +- Fixed a focus bug with `EuiDataGrid`s with `leadingControlColumns` when moving columns to the left/right ([#7701](https://github.com/elastic/eui/pull/7701)) ([#7698](https://github.com/elastic/eui/pull/7698)) +- Fixed `EuiSuperDatePicker` to validate date string with respect of locale on `EuiAbsoluteTab`. ([#7705](https://github.com/elastic/eui/pull/7705)) +- Fixed a visual bug with `EuiSuperDatePicker`'s absolute tab on small mobile screens ([#7708](https://github.com/elastic/eui/pull/7708)) +- Fixed i18n of empty and loading state messages for the `FieldValueSelectionFilter` component ([#7718](https://github.com/elastic/eui/pull/7718)) + +**Dependency updates** + +- Updated `@hello-pangea/dnd` to v16.6.0 ([#7599](https://github.com/elastic/eui/pull/7599)) +- Updated `remark-rehype` to v8.1.0 ([#7601](https://github.com/elastic/eui/pull/7601)) + +**Accessibility** + +- Improved `EuiBasicTable` and `EuiInMemoryTable`'s selection checkboxes to have unique aria-labels per row ([#7672](https://github.com/elastic/eui/pull/7672)) +- Added `aria-valuetext` attributes to `EuiRange`s with tick labels for improved screen reader UX ([#7675](https://github.com/elastic/eui/pull/7675)) +- Updated `EuiAccordion` to keep focus on accordion trigger instead of moving to content on click/keypress ([#7696](https://github.com/elastic/eui/pull/7696)) +- Added `aria-disabled` attribute to `EuiHorizontalSteps` when status is "disabled" ([#7699](https://github.com/elastic/eui/pull/7699)) + ## [`v94.1.0`](https://github.com/elastic/eui/releases/v94.1.0) - Updated `EuiTableHeaderCell` to show a subdued `sortable` icon for columns that are not currently sorted but can be ([#7656](https://github.com/elastic/eui/pull/7656)) diff --git a/i18ntokens.json b/i18ntokens.json index b7f7fe182c6..1602a96b228 100644 --- a/i18ntokens.json +++ b/i18ntokens.json @@ -127,18 +127,18 @@ }, { "token": "euiBasicTable.selectThisRow", - "defString": "Select this row", + "defString": "Select row {index}", "highlighting": "string", "loc": { "start": { - "line": 1103, + "line": 1109, "column": 8, - "index": 30673 + "index": 30781 }, "end": { - "line": 1103, - "column": 79, - "index": 30744 + "line": 1113, + "column": 9, + "index": 30936 } }, "filepath": "src/components/basic_table/basic_table.tsx" @@ -149,14 +149,14 @@ "highlighting": "string", "loc": { "start": { - "line": 1329, + "line": 1339, "column": 8, - "index": 37489 + "index": 37681 }, "end": { - "line": 1333, + "line": 1343, "column": 9, - "index": 37648 + "index": 37840 } }, "filepath": "src/components/basic_table/basic_table.tsx" @@ -467,6 +467,60 @@ }, "filepath": "src/components/code/code_block_full_screen.tsx" }, + { + "token": "euiCollapsibleNavKibanaSolution.switcherTitle", + "defString": "Solution view", + "highlighting": "string", + "loc": { + "start": { + "line": 73, + "column": 40, + "index": 2535 + }, + "end": { + "line": 76, + "column": 3, + "index": 2623 + } + }, + "filepath": "src/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.tsx" + }, + { + "token": "euiCollapsibleNavKibanaSolution.switcherAriaLabel", + "defString": " - click to switch to another solution", + "highlighting": "string", + "loc": { + "start": { + "line": 77, + "column": 44, + "index": 2669 + }, + "end": { + "line": 80, + "column": 3, + "index": 2786 + } + }, + "filepath": "src/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.tsx" + }, + { + "token": "euiCollapsibleNavKibanaSolution.groupLabel", + "defString": "Navigate to solution", + "highlighting": "string", + "loc": { + "start": { + "line": 81, + "column": 37, + "index": 2825 + }, + "end": { + "line": 84, + "column": 3, + "index": 2917 + } + }, + "filepath": "src/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.tsx" + }, { "token": "euiCollapsibleNavBeta.ariaLabel", "defString": "Site menu", @@ -581,14 +635,14 @@ "highlighting": "string", "loc": { "start": { - "line": 216, + "line": 217, "column": 6, - "index": 5838 + "index": 5932 }, "end": { - "line": 235, + "line": 236, "column": 3, - "index": 6396 + "index": 6490 } }, "filepath": "src/components/color_picker/color_picker.tsx" @@ -599,14 +653,14 @@ "highlighting": "string", "loc": { "start": { - "line": 216, + "line": 217, "column": 6, - "index": 5838 + "index": 5932 }, "end": { - "line": 235, + "line": 236, "column": 3, - "index": 6396 + "index": 6490 } }, "filepath": "src/components/color_picker/color_picker.tsx" @@ -617,14 +671,14 @@ "highlighting": "string", "loc": { "start": { - "line": 216, + "line": 217, "column": 6, - "index": 5838 + "index": 5932 }, "end": { - "line": 235, + "line": 236, "column": 3, - "index": 6396 + "index": 6490 } }, "filepath": "src/components/color_picker/color_picker.tsx" @@ -635,14 +689,14 @@ "highlighting": "string", "loc": { "start": { - "line": 216, + "line": 217, "column": 6, - "index": 5838 + "index": 5932 }, "end": { - "line": 235, + "line": 236, "column": 3, - "index": 6396 + "index": 6490 } }, "filepath": "src/components/color_picker/color_picker.tsx" @@ -653,14 +707,14 @@ "highlighting": "string", "loc": { "start": { - "line": 216, + "line": 217, "column": 6, - "index": 5838 + "index": 5932 }, "end": { - "line": 235, + "line": 236, "column": 3, - "index": 6396 + "index": 6490 } }, "filepath": "src/components/color_picker/color_picker.tsx" @@ -671,14 +725,14 @@ "highlighting": "string", "loc": { "start": { - "line": 216, + "line": 217, "column": 6, - "index": 5838 + "index": 5932 }, "end": { - "line": 235, + "line": 236, "column": 3, - "index": 6396 + "index": 6490 } }, "filepath": "src/components/color_picker/color_picker.tsx" @@ -689,14 +743,14 @@ "highlighting": "string", "loc": { "start": { - "line": 216, + "line": 217, "column": 6, - "index": 5838 + "index": 5932 }, "end": { - "line": 235, + "line": 236, "column": 3, - "index": 6396 + "index": 6490 } }, "filepath": "src/components/color_picker/color_picker.tsx" @@ -905,14 +959,14 @@ "highlighting": "string", "loc": { "start": { - "line": 775, + "line": 792, "column": 8, - "index": 22517 + "index": 23108 }, "end": { - "line": 778, + "line": 795, "column": 9, - "index": 22636 + "index": 23227 } }, "filepath": "src/components/combo_box/combo_box.tsx" @@ -995,14 +1049,14 @@ "highlighting": "string", "loc": { "start": { - "line": 119, + "line": 122, "column": 6, - "index": 3133 + "index": 3246 }, "end": { - "line": 119, + "line": 122, "column": 75, - "index": 3202 + "index": 3315 } }, "filepath": "src/components/datagrid/body/header/column_actions.tsx" @@ -1013,14 +1067,14 @@ "highlighting": "string", "loc": { "start": { - "line": 161, + "line": 178, "column": 13, - "index": 4181 + "index": 4719 }, "end": { - "line": 161, + "line": 178, "column": 78, - "index": 4246 + "index": 4784 } }, "filepath": "src/components/datagrid/body/header/column_actions.tsx" @@ -1031,14 +1085,14 @@ "highlighting": "string", "loc": { "start": { - "line": 182, + "line": 199, "column": 8, - "index": 4816 + "index": 5340 }, "end": { - "line": 182, + "line": 199, "column": 75, - "index": 4883 + "index": 5407 } }, "filepath": "src/components/datagrid/body/header/column_actions.tsx" @@ -1049,14 +1103,14 @@ "highlighting": "string", "loc": { "start": { - "line": 263, + "line": 280, "column": 8, - "index": 6935 + "index": 7459 }, "end": { - "line": 267, + "line": 284, "column": 10, - "index": 7075 + "index": 7599 } }, "filepath": "src/components/datagrid/body/header/column_actions.tsx" @@ -1067,14 +1121,14 @@ "highlighting": "string", "loc": { "start": { - "line": 294, + "line": 311, "column": 8, - "index": 7773 + "index": 8297 }, "end": { - "line": 298, + "line": 315, "column": 10, - "index": 7913 + "index": 8437 } }, "filepath": "src/components/datagrid/body/header/column_actions.tsx" @@ -1085,14 +1139,14 @@ "highlighting": "string", "loc": { "start": { - "line": 225, + "line": 227, "column": 16, - "index": 7475 + "index": 7525 }, "end": { - "line": 228, + "line": 230, "column": 18, - "index": 7628 + "index": 7678 } }, "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx" @@ -1103,14 +1157,14 @@ "highlighting": "string", "loc": { "start": { - "line": 296, + "line": 298, "column": 16, - "index": 9645 + "index": 9695 }, "end": { - "line": 300, + "line": 302, "column": 18, - "index": 9819 + "index": 9869 } }, "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx" @@ -1121,14 +1175,14 @@ "highlighting": "string", "loc": { "start": { - "line": 304, + "line": 306, "column": 16, - "index": 9897 + "index": 9947 }, "end": { - "line": 308, + "line": 310, "column": 18, - "index": 10073 + "index": 10123 } }, "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx" @@ -1139,14 +1193,14 @@ "highlighting": "string", "loc": { "start": { - "line": 314, + "line": 316, "column": 16, - "index": 10219 + "index": 10269 }, "end": { - "line": 319, + "line": 321, "column": 18, - "index": 10447 + "index": 10497 } }, "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx" @@ -1157,14 +1211,14 @@ "highlighting": "string", "loc": { "start": { - "line": 323, + "line": 325, "column": 16, - "index": 10525 + "index": 10575 }, "end": { - "line": 328, + "line": 330, "column": 18, - "index": 10755 + "index": 10805 } }, "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx" @@ -1175,14 +1229,14 @@ "highlighting": "string", "loc": { "start": { - "line": 334, + "line": 336, "column": 16, - "index": 10884 + "index": 10934 }, "end": { - "line": 339, + "line": 341, "column": 18, - "index": 11122 + "index": 11172 } }, "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx" @@ -1193,14 +1247,14 @@ "highlighting": "string", "loc": { "start": { - "line": 343, + "line": 345, "column": 16, - "index": 11200 + "index": 11250 }, "end": { - "line": 348, + "line": 350, "column": 18, - "index": 11440 + "index": 11490 } }, "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx" @@ -1211,14 +1265,14 @@ "highlighting": "string", "loc": { "start": { - "line": 413, + "line": 415, "column": 6, - "index": 13286 + "index": 13336 }, "end": { - "line": 416, + "line": 418, "column": 8, - "index": 13479 + "index": 13529 } }, "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx" @@ -2651,14 +2705,14 @@ "highlighting": "string", "loc": { "start": { - "line": 163, + "line": 168, "column": 8, - "index": 4696 + "index": 4826 }, "end": { - "line": 173, + "line": 178, "column": 9, - "index": 5080 + "index": 5210 } }, "filepath": "src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx" @@ -2669,14 +2723,14 @@ "highlighting": "string", "loc": { "start": { - "line": 163, + "line": 168, "column": 8, - "index": 4696 + "index": 4826 }, "end": { - "line": 173, + "line": 178, "column": 9, - "index": 5080 + "index": 5210 } }, "filepath": "src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx" @@ -3769,12 +3823,12 @@ "start": { "line": 204, "column": 8, - "index": 5149 + "index": 5158 }, "end": { "line": 207, "column": 10, - "index": 5256 + "index": 5265 } }, "filepath": "src/components/date_picker/super_date_picker/super_update_button.tsx" @@ -3787,12 +3841,12 @@ "start": { "line": 213, "column": 8, - "index": 5319 + "index": 5328 }, "end": { "line": 216, "column": 10, - "index": 5422 + "index": 5431 } }, "filepath": "src/components/date_picker/super_date_picker/super_update_button.tsx" @@ -3805,12 +3859,12 @@ "start": { "line": 221, "column": 6, - "index": 5458 + "index": 5467 }, "end": { "line": 224, "column": 8, - "index": 5557 + "index": 5566 } }, "filepath": "src/components/date_picker/super_date_picker/super_update_button.tsx" @@ -3823,12 +3877,12 @@ "start": { "line": 231, "column": 8, - "index": 5672 + "index": 5681 }, "end": { "line": 234, "column": 10, - "index": 5784 + "index": 5793 } }, "filepath": "src/components/date_picker/super_date_picker/super_update_button.tsx" @@ -3841,12 +3895,12 @@ "start": { "line": 240, "column": 8, - "index": 5883 + "index": 5892 }, "end": { "line": 243, "column": 10, - "index": 5996 + "index": 6005 } }, "filepath": "src/components/date_picker/super_date_picker/super_update_button.tsx" @@ -4847,14 +4901,14 @@ "highlighting": "string", "loc": { "start": { - "line": 188, + "line": 205, "column": 6, - "index": 4979 + "index": 5494 }, "end": { - "line": 191, + "line": 208, "column": 8, - "index": 5156 + "index": 5671 } }, "filepath": "src/components/form/range/range.tsx" @@ -5711,14 +5765,14 @@ "highlighting": "string", "loc": { "start": { - "line": 682, + "line": 693, "column": 16, - "index": 20150 + "index": 20529 }, "end": { - "line": 685, + "line": 696, "column": 18, - "index": 20344 + "index": 20723 } }, "filepath": "src/components/popover/popover.tsx" @@ -6089,14 +6143,14 @@ "highlighting": "string", "loc": { "start": { - "line": 588, + "line": 626, "column": 16, - "index": 18853 + "index": 20193 }, "end": { - "line": 591, + "line": 629, "column": 18, - "index": 18979 + "index": 20319 } }, "filepath": "src/components/selectable/selectable.tsx" @@ -6107,14 +6161,14 @@ "highlighting": "string", "loc": { "start": { - "line": 610, + "line": 648, "column": 14, - "index": 19467 + "index": 20807 }, "end": { - "line": 614, + "line": 652, "column": 16, - "index": 19687 + "index": 21027 } }, "filepath": "src/components/selectable/selectable.tsx" @@ -6125,14 +6179,14 @@ "highlighting": "string", "loc": { "start": { - "line": 629, + "line": 667, "column": 14, - "index": 20098 + "index": 21438 }, "end": { - "line": 632, + "line": 670, "column": 16, - "index": 20227 + "index": 21567 } }, "filepath": "src/components/selectable/selectable.tsx" @@ -6143,14 +6197,14 @@ "highlighting": "string", "loc": { "start": { - "line": 694, + "line": 732, "column": 6, - "index": 21892 + "index": 23232 }, "end": { - "line": 703, + "line": 741, "column": 7, - "index": 22220 + "index": 23560 } }, "filepath": "src/components/selectable/selectable.tsx" @@ -6161,14 +6215,14 @@ "highlighting": "string", "loc": { "start": { - "line": 694, + "line": 732, "column": 6, - "index": 21892 + "index": 23232 }, "end": { - "line": 703, + "line": 741, "column": 7, - "index": 22220 + "index": 23560 } }, "filepath": "src/components/selectable/selectable.tsx" @@ -6179,14 +6233,14 @@ "highlighting": "code", "loc": { "start": { - "line": 740, + "line": 779, "column": 6, - "index": 23620 + "index": 24998 }, "end": { - "line": 746, + "line": 785, "column": 8, - "index": 23845 + "index": 25223 } }, "filepath": "src/components/selectable/selectable.tsx" @@ -6197,14 +6251,14 @@ "highlighting": "string", "loc": { "start": { - "line": 758, + "line": 797, "column": 6, - "index": 24139 + "index": 25517 }, "end": { - "line": 758, + "line": 797, "column": 78, - "index": 24211 + "index": 25589 } }, "filepath": "src/components/selectable/selectable.tsx" diff --git a/i18ntokens_changelog.json b/i18ntokens_changelog.json index 595ea51e90c..ce1e6fad1d5 100644 --- a/i18ntokens_changelog.json +++ b/i18ntokens_changelog.json @@ -1,4 +1,29 @@ [ + { + "version": "94.2.0", + "changes": [ + { + "token": "euiBasicTable.selectThisRow", + "changeType": "modified", + "value": "Select row {index}" + }, + { + "token": "euiCollapsibleNavKibanaSolution.switcherTitle", + "changeType": "added", + "value": "Solution view" + }, + { + "token": "euiCollapsibleNavKibanaSolution.switcherAriaLabel", + "changeType": "added", + "value": " - click to switch to another solution" + }, + { + "token": "euiCollapsibleNavKibanaSolution.groupLabel", + "changeType": "added", + "value": "Navigate to solution" + } + ] + }, { "version": "93.6.0", "changes": [ diff --git a/loki.config.js b/loki.config.js new file mode 100644 index 00000000000..e2d362a16be --- /dev/null +++ b/loki.config.js @@ -0,0 +1,23 @@ +module.exports = { + // We're adding EUI-specific wrapper elements in .storybook/preview.tsx. + // Please keep in sync with .storybook/loki.ts + chromeSelector: '#story-wrapper > *', + chromeRetries: 3, + chromeDockerImage: 'yukinying/chrome-headless-browser-stable:latest', + chromeFlags: '--headless --disable-gpu --hide-scrollbars --force-prefers-reduced-motion', + configurations: { + 'chrome.desktop': { + target: 'chrome.docker', + width: 1440, + height: 900, + }, + 'chrome.mobile': { + target: 'chrome.docker', + preset: 'iPhone 7', + // Override default iPhone 7 screen dimensions but keep other + // preset properties like features and Safari user agent + width: 390, + height: 844, + }, + }, +}; diff --git a/package.json b/package.json index 3d6a18a73d9..3f07aab4f97 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@elastic/eui", "description": "Elastic UI Component Library", - "version": "94.1.0", + "version": "94.2.1", "license": "SEE LICENSE IN LICENSE.txt", "main": "lib", "module": "es", @@ -34,6 +34,7 @@ "test-cypress": "node ./scripts/test-cypress", "test-cypress-dev": "yarn test-cypress --dev", "test-cypress-a11y": "yarn test-cypress --a11y", + "test-visual-regression": "node ./scripts/test-visual-regression.js", "combine-test-coverage": "sh ./scripts/combine-coverage.sh", "yo-component": "yo ./generator-eui/app/component.js", "yo-doc": "yo ./generator-eui/app/documentation.js", @@ -58,7 +59,7 @@ "test-staged" ], "dependencies": { - "@hello-pangea/dnd": "^16.3.0", + "@hello-pangea/dnd": "^16.6.0", "@types/lodash": "^4.14.202", "@types/numeral": "^2.0.5", "@types/react-window": "^1.8.8", @@ -83,7 +84,7 @@ "remark-breaks": "^2.0.2", "remark-emoji": "^2.1.0", "remark-parse-no-trim": "^8.0.4", - "remark-rehype": "^8.0.0", + "remark-rehype": "^8.1.0", "tabbable": "^5.3.3", "text-diff": "^1.0.1", "unified": "^9.2.2", @@ -118,13 +119,14 @@ "@emotion/react": "^11.11.0", "@faker-js/faker": "^8.0.2", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", - "@storybook/addon-essentials": "^7.5.2", - "@storybook/addon-interactions": "^7.5.2", - "@storybook/addon-links": "^7.5.2", - "@storybook/blocks": "^7.5.2", - "@storybook/react": "^7.5.2", - "@storybook/react-webpack5": "^7.5.2", - "@storybook/testing-library": "^0.2.2", + "@storybook/addon-essentials": "^8.0.5", + "@storybook/addon-interactions": "^8.0.5", + "@storybook/addon-links": "^8.0.5", + "@storybook/addon-webpack5-compiler-babel": "^3.0.3", + "@storybook/blocks": "^8.0.5", + "@storybook/react": "^8.0.5", + "@storybook/react-webpack5": "^8.0.5", + "@storybook/test": "^8.0.5", "@svgr/core": "8.0.0", "@svgr/plugin-jsx": "^8.0.1", "@svgr/plugin-svgo": "^8.0.1", @@ -151,7 +153,7 @@ "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6", "assert": "^2.0.0", "autoprefixer": "^9.8.6", - "axe-core": "^4.8.2", + "axe-core": "^4.9.0", "babel-jest": "^24.1.0", "babel-loader": "^9.1.2", "babel-plugin-add-module-exports": "^1.0.4", @@ -188,7 +190,7 @@ "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-storybook": "^0.6.15", + "eslint-plugin-storybook": "^0.8.0", "expose-gc": "^1.0.0", "file-loader": "^6.1.0", "findup": "^0.1.5", @@ -200,6 +202,7 @@ "inquirer": "^9.1.4", "jest": "^24.1.0", "jest-cli": "^24.1.0", + "loki": "^0.35.0", "moment": "^2.27.0", "moment-timezone": "^0.5.31", "path": "^0.12.7", @@ -233,7 +236,7 @@ "sass-loader": "^13.2.0", "shelljs": "^0.8.4", "start-server-and-test": "^1.11.3", - "storybook": "^7.5.2", + "storybook": "^8.0.5", "style-loader": "^3.3.1", "stylelint": "^15.7.0", "stylelint-config-prettier-scss": "^1.0.0", diff --git a/scripts/jest/config.js b/scripts/jest/config.js index 84006d237aa..5e8dc2ccee8 100644 --- a/scripts/jest/config.js +++ b/scripts/jest/config.js @@ -63,6 +63,12 @@ if (['16', '17'].includes(reactVersion)) { ] = `@testing-library/react-16-17$1`; config.moduleNameMapper['^react((\\/.*)?)$'] = `react-${reactVersion}$1`; + // This import override is here just to make jest module resolver happy. + // The import wouldn't actually work if executed on React <18 + // since there's no such export as react-dom/client on previous + // React versions + config.moduleNameMapper['^react-dom/client'] = 'react-dom'; + config.moduleNameMapper[ '^react-dom((\\/.*)?)$' ] = `react-dom-${reactVersion}$1`; diff --git a/scripts/test-visual-regression.js b/scripts/test-visual-regression.js new file mode 100644 index 00000000000..00cbab6e6d2 --- /dev/null +++ b/scripts/test-visual-regression.js @@ -0,0 +1,47 @@ +const { execSync } = require('child_process'); +const yargs = require('yargs/yargs'); +const { hideBin } = require('yargs/helpers'); +const chalk = require('chalk'); +const { } = require('loki/bin/loki'); + +const { argv } = yargs(hideBin(process.argv)) + .parserConfiguration({ + // @see https://github.com/yargs/yargs-parser#configuration + 'camel-case-expansion': false, + 'unknown-options-as-args': true, + 'halt-at-non-option': true, + }) + .options({ + dev: { type: 'boolean', default: false }, + }); +const isDev = argv.dev; + +const error = (...args) => console.error('%s %s', chalk.red('[Error]'), chalk.reset(...args)); + +console.log('Running visual regression tests'); + +try { + const output = execSync('docker ps -q', { encoding: 'utf-8', stdio: 'pipe' }); + console.log(output); +} catch (err) { + if (err.status === 127) { + error('"docker" command not found. You must have Docker installed to run visual regression tests in dev mode'); + error('Check out https://docs.docker.com/get-docker/ for installation instructions.') + return; + } + + error(err.stderr); + + if (err.status === 1 && err.stderr.toLowerCase().includes('is the docker daemon running?')) { + error('Did you forget to start Docker Desktop or Docker Engine?'); + return; + } +} + +const cmd = [ + 'yarn loki', + !isDev && '--requireReference', + ...argv._, +]; + +execSync(cmd.filter(Boolean).join(' '), { stdio: 'inherit' }); diff --git a/src-docs/src/components/guide_page/versions.json b/src-docs/src/components/guide_page/versions.json index 9ed64cf7345..6725d2203c1 100644 --- a/src-docs/src/components/guide_page/versions.json +++ b/src-docs/src/components/guide_page/versions.json @@ -1,5 +1,7 @@ { "euiVersions": [ + "94.2.1", + "94.2.0", "94.1.0", "94.0.0", "93.6.0", diff --git a/src-docs/src/views/combo_box/combo_box_example.js b/src-docs/src/views/combo_box/combo_box_example.js index 8944d40e0b4..010edf189ca 100644 --- a/src-docs/src/views/combo_box/combo_box_example.js +++ b/src-docs/src/views/combo_box/combo_box_example.js @@ -258,6 +258,17 @@ const labelledbySnippet = ``; +import OptionMatcher from './option_matcher'; +const optionMatcherSource = require('!!raw-loader!./option_matcher'); +const optionMatcherSnippet = ``; + export const ComboBoxExample = { title: 'Combo box', intro: ( @@ -677,6 +688,35 @@ export const ComboBoxExample = { snippet: startingWithSnippet, demo: , }, + { + title: 'Custom option matcher', + text: ( + <> +

+ When searching for options, EuiComboBox uses a + partial equality string matcher by default, displaying all options + whose labels include the searched string and taking{' '} + isCaseSensitive prop value into account. +

+

+ In rare cases, you may want to customize this behavior. You can do + so by passing a custom option matcher function to the{' '} + optionMatcher prop. The function must be of type{' '} + EuiComboBoxOptionMatcher and return + true for options that should be visible for given + search string. +

+ + ), + source: [ + { + type: GuideSectionTypes.TSX, + code: optionMatcherSource, + }, + ], + snippet: optionMatcherSnippet, + demo: , + }, { title: 'Duplicate labels', source: [ diff --git a/src-docs/src/views/combo_box/option_matcher.tsx b/src-docs/src/views/combo_box/option_matcher.tsx new file mode 100644 index 00000000000..9aef76ae99c --- /dev/null +++ b/src-docs/src/views/combo_box/option_matcher.tsx @@ -0,0 +1,69 @@ +import React, { useCallback, useState } from 'react'; + +import { + EuiComboBox, + EuiComboBoxOptionOption, + EuiComboBoxOptionMatcher, +} from '../../../../src'; + +const options: EuiComboBoxOptionOption[] = [ + { + label: 'Titan', + 'data-test-subj': 'titanOption', + }, + { + label: 'Enceladus', + }, + { + label: 'Mimas', + }, + { + label: 'Dione', + }, + { + label: 'Iapetus', + }, + { + label: 'Phoebe', + }, + { + label: 'Rhea', + }, + { + label: + "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + }, + { + label: 'Tethys', + }, + { + label: 'Hyperion', + }, +]; + +export default () => { + const [selectedOptions, setSelected] = useState( + [] + ); + const onChange = (selectedOptions: EuiComboBoxOptionOption[]) => { + setSelected(selectedOptions); + }; + + const startsWithMatcher = useCallback>( + ({ option, searchValue }) => { + return option.label.startsWith(searchValue); + }, + [] + ); + + return ( + + ); +}; diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js index 9fd7a0e7c83..f395d74bd18 100644 --- a/src-docs/src/views/flex/flex_example.js +++ b/src-docs/src/views/flex/flex_example.js @@ -246,7 +246,7 @@ export const FlexExample = { ), }, { - title: 'Spans instead of divs', + title: 'Override output component type', source: [ { type: GuideSectionTypes.JS, @@ -255,9 +255,12 @@ export const FlexExample = { ], text: (

- Specify component=“span” on{' '} + Pass the component property to{' '} EuiFlexGroup and/or EuiFlexItem to - change from the default div. + change the rendered component type from the default{' '} + div. It can be any valid React component type like + a tag name string such as div + or span or a React component.

), snippet: componentSpanSnippet, diff --git a/src-docs/src/views/markdown_editor/markdown_editor.js b/src-docs/src/views/markdown_editor/markdown_editor.js index 3e6b98a12c0..aa88476100c 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor.js +++ b/src-docs/src/views/markdown_editor/markdown_editor.js @@ -21,7 +21,6 @@ The editor also ships with some built in plugins. For example it can handle chec - [ ] Or empty It can also handle emojis! :smile: - And it can render !{tooltip[tooltips like this](Look! I'm a very helpful tooltip content!)} `; diff --git a/src-docs/src/views/markdown_editor/markdown_editor_example.js b/src-docs/src/views/markdown_editor/markdown_editor_example.js index baa91ddf511..81f795fb07d 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor_example.js +++ b/src-docs/src/views/markdown_editor/markdown_editor_example.js @@ -60,7 +60,15 @@ const markdownEditorNoPluginsSnippet = `const { parsingPlugins, processingPlugins, uiPlugins, -} = getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] }); +} = getDefaultEuiMarkdownPlugins({ + exclude: [ + 'tooltip', + 'checkbox', + 'linkValidator', + 'lineBreaks', + 'emoji', + ], +}); - The EuiMarkdownEditor comes with a default plugin for{' '} - tooltip support. However, this may be unfamiliar or - unnecessary in some contexts, and you can unregister this plugin by - excluding it from the - parsingPlugins,{' '} + The EuiMarkdownEditor comes with several default + plugins, demo'd below. If these defaults are unnecessary for your + use-case or context, you can unregister these plugins by excluding + them from the parsingPlugins,{' '} processingPlugins and uiPlugins{' '} options with a single exclude parameter passed to{' '} getDefaultEuiMarkdownPlugins(). This will ensure - the syntax won't be identified or rendered and no additional UI, - like the button and help syntax, will be displayed. + the syntax won't be identified or rendered, and no additional UI (like + toolbar buttons or help syntax) will be displayed by the unregistered + plugins.

), props: { diff --git a/src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js b/src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js index 5b4dc9b2e64..f77e9207cc0 100644 --- a/src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js +++ b/src-docs/src/views/markdown_editor/markdown_editor_no_plugins.js @@ -1,35 +1,112 @@ -import React, { useState } from 'react'; +import React, { useState, useMemo } from 'react'; import { EuiMarkdownEditor, getDefaultEuiMarkdownPlugins, + EuiFlexGroup, + EuiFlexItem, + EuiSwitch, } from '../../../../src/components'; -const initialContent = `## This is how we do it :smile: +const initialContent = ` +### tooltip -In this example, we unregistered the built in **tooltip** plugin. So the button in the toolbar and the help syntax won't be displayed. - -And the following syntax no longer works. +When disabled, the button in the toolbar and the help syntax won't be displayed, and the following syntax will no longer works. !{tooltip[anchor text](Tooltip content)} -`; -const { parsingPlugins, processingPlugins, uiPlugins } = - getDefaultEuiMarkdownPlugins({ exclude: ['tooltip'] }); +### checkbox + +When disabled, a EuiCheckbox will no longer render. + +- [ ] TODO: Disable some default plugins + +### emoji + +When disabled, text will render instead of an emoji. + +:smile: + +### linkValidator + +When disabled, all links will render as links instead of as text. + +[This is a sus link](file://) + +### lineBreaks + +When disabled, these sentence will be in the same line. +When enabled, these sentences will be separated by a line break. + +Two blank lines in a row will create a new paragraph as usual. +`; export default () => { const [value, setValue] = useState(initialContent); + const [tooltip, excludeTooltips] = useState(false); + const [checkbox, excludeCheckboxes] = useState(true); + const [emoji, excludeEmojis] = useState(true); + const [linkValidator, excludeLinkValidator] = useState(true); + const [lineBreaks, excludeLineBreaks] = useState(false); + + const { parsingPlugins, processingPlugins, uiPlugins } = useMemo(() => { + const excludedPlugins = []; + if (!tooltip) excludedPlugins.push('tooltip'); + if (!checkbox) excludedPlugins.push('checkbox'); + if (!emoji) excludedPlugins.push('emoji'); + if (!linkValidator) excludedPlugins.push('linkValidator'); + if (!lineBreaks) excludedPlugins.push('lineBreaks'); + + return getDefaultEuiMarkdownPlugins({ + exclude: excludedPlugins, + }); + }, [tooltip, checkbox, emoji, linkValidator, lineBreaks]); + return ( <> - + + + excludeTooltips(!tooltip)} + /> + excludeCheckboxes(!checkbox)} + /> + excludeEmojis(!emoji)} + /> + excludeLinkValidator(!linkValidator)} + /> + excludeLineBreaks(!lineBreaks)} + /> + + + + + ); }; diff --git a/src-docs/src/views/range/range_example.js b/src-docs/src/views/range/range_example.js index 7a845151721..c6cd7244a83 100644 --- a/src-docs/src/views/range/range_example.js +++ b/src-docs/src/views/range/range_example.js @@ -238,6 +238,13 @@ export const RangeControlExample = { label. The value must be included in the range of values (min-max), though the label may be anything you choose.

+

+ Tick labels can improve the accessibility of your range. If your + label is a simple string, it will be read out to screen readers + alongside the value. You can also use the{' '} + accessibleLabel property to provide more explicit + screen reader text. +

{ min={0} max={84} ticks={[ - { label: '1 GB', value: 0 }, - { label: '2GB', value: 14 }, - { label: '4GB', value: 28 }, - { label: '8GB', value: 42 }, - { label: '16GB', value: 56 }, - { label: '32GB', value: 70 }, - { label: '64GB', value: 84 }, + { label: '1 GB', value: 0, accessibleLabel: 'one gigabyte' }, + { label: '2GB', value: 14, accessibleLabel: 'two gigabytes' }, + { label: '4GB', value: 28, accessibleLabel: 'four gigabytes' }, + { label: '8GB', value: 42, accessibleLabel: 'eight gigabytes' }, + { label: '16GB', value: 56, accessibleLabel: 'sixteen gigabytes' }, + { label: '32GB', value: 70, accessibleLabel: 'thirty-two gigabytes' }, + { label: '64GB', value: 84, accessibleLabel: 'sixty-four gigabytes' }, ]} - aria-label="An example of EuiDualRange with no linear intervals" + aria-label="An example of EuiRange with no linear intervals" /> ); diff --git a/src-docs/src/views/selectable/selectable_example.js b/src-docs/src/views/selectable/selectable_example.js index 9f6dae7c1b1..301af959245 100644 --- a/src-docs/src/views/selectable/selectable_example.js +++ b/src-docs/src/views/selectable/selectable_example.js @@ -45,6 +45,9 @@ const truncationSource = require('!!raw-loader!./selectable_truncation'); import SelectableCustomRender from './selectable_custom_render'; const selectableCustomRenderSource = require('!!raw-loader!./selectable_custom_render'); +import SelectableOptionMatcher from './selectable_option_matcher'; +const selectableOptionMatcherSource = require('!!raw-loader!./selectable_option_matcher'); + const props = { EuiSelectable, EuiSelectableOptionProps, @@ -526,5 +529,39 @@ export const SelectableExample = { `, props, }, + { + title: 'Custom option matcher', + text: ( + <> +

+ When searching for options, EuiSelectable uses a + partial equality string matcher by default, displaying all options + whose labels include the searched string. +

+

+ In rare cases, you may want to customize this behavior. You can do + so by passing a custom option matcher function to the{' '} + optionMatcher prop. The function must be of type{' '} + EuiSelectableOptionMatcher and return + true for options that should be visible for given + search string. +

+ + ), + source: [ + { + type: GuideSectionTypes.TSX, + code: selectableOptionMatcherSource, + }, + ], + demo: , + snippet: ` setOptions(newOptions)} + optionMatcher={optionMatcher} +> + {list => list} +`, + }, ], }; diff --git a/src-docs/src/views/selectable/selectable_option_matcher.tsx b/src-docs/src/views/selectable/selectable_option_matcher.tsx new file mode 100644 index 00000000000..1e7387496f2 --- /dev/null +++ b/src-docs/src/views/selectable/selectable_option_matcher.tsx @@ -0,0 +1,71 @@ +import React, { useCallback, useState } from 'react'; + +import { EuiSelectable, EuiSelectableOption } from '../../../../src'; +import { EuiSelectableOptionMatcher } from '../../../../src/components/selectable/selectable'; + +export default () => { + const [options, setOptions] = useState([ + { + label: 'Titan', + 'data-test-subj': 'titanOption', + }, + { + label: 'Enceladus is disabled', + disabled: true, + }, + { + label: 'Mimas', + checked: 'on', + }, + { + label: 'Dione', + }, + { + label: 'Iapetus', + checked: 'on', + }, + { + label: 'Phoebe', + }, + { + label: 'Rhea', + }, + { + label: + "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology", + }, + { + label: 'Tethys', + }, + { + label: 'Hyperion', + }, + ]); + + const startsWithMatcher = useCallback>( + ({ option, searchValue }) => { + return option.label.startsWith(searchValue); + }, + [] + ); + + return ( + setOptions(newOptions)} + optionMatcher={startsWithMatcher} + > + {(list, search) => ( + <> + {search} + {list} + + )} + + ); +}; diff --git a/src-docs/src/views/selectable/selectable_sizing.tsx b/src-docs/src/views/selectable/selectable_sizing.tsx index db6cb59549f..088824723ad 100644 --- a/src-docs/src/views/selectable/selectable_sizing.tsx +++ b/src-docs/src/views/selectable/selectable_sizing.tsx @@ -9,102 +9,154 @@ import { EuiPopoverFooter, EuiPopoverTitle, EuiSelectable, - EuiSelectableOption, + type EuiSelectableOption, + type EuiSelectableProps, EuiSpacer, EuiTitle, + EuiInputPopover, } from '../../../../src'; -export default () => { - const [isPopoverOpen, setIsPopoverOpen] = useState(false); - const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); +const OPTIONS: EuiSelectableOption[] = [ + { label: 'Titan' }, + { label: 'Enceladus' }, + { label: 'Mimas', checked: 'on' }, + { label: 'Dione' }, + { label: 'Iapetus' }, + { label: 'Phoebe' }, + { label: 'Rhea' }, + { label: 'Pandora' }, + { label: 'Tethys' }, + { label: 'Hyperion' }, + { label: 'Pan' }, + { label: 'Atlas' }, + { label: 'Prometheus' }, + { label: 'Janus' }, + { label: 'Epimetheus' }, + { label: 'Amalthea' }, + { label: 'Thebe' }, + { label: 'Io' }, + { label: 'Europa' }, + { label: 'Ganymede' }, + { label: 'Callisto' }, + { label: 'Himalia' }, + { label: 'Phobos' }, + { label: 'Deimos' }, + { label: 'Puck' }, + { label: 'Miranda' }, + { label: 'Ariel' }, + { label: 'Umbriel' }, + { label: 'Titania' }, + { label: 'Oberon' }, + { label: 'Despina' }, + { label: 'Galatea' }, + { label: 'Larissa' }, + { label: 'Triton' }, + { label: 'Nereid' }, + { label: 'Charon' }, + { label: 'Styx' }, + { label: 'Nix' }, + { label: 'Kerberos' }, + { label: 'Hydra' }, +]; - const [options, setOptions] = useState([ - { label: 'Titan' }, - { label: 'Enceladus' }, - { label: 'Mimas', checked: 'on' }, - { label: 'Dione' }, - { label: 'Iapetus', checked: 'on' }, - { label: 'Phoebe' }, - { label: 'Rhea' }, - { label: 'Pandora' }, - { label: 'Tethys' }, - { label: 'Hyperion' }, - { label: 'Pan' }, - { label: 'Atlas' }, - { label: 'Prometheus' }, - { label: 'Janus' }, - { label: 'Epimetheus' }, - { label: 'Amalthea' }, - { label: 'Thebe' }, - { label: 'Io' }, - { label: 'Europa' }, - { label: 'Ganymede' }, - { label: 'Callisto' }, - { label: 'Himalia' }, - { label: 'Phobos' }, - { label: 'Deimos' }, - { label: 'Puck' }, - { label: 'Miranda' }, - { label: 'Ariel' }, - { label: 'Umbriel' }, - { label: 'Titania' }, - { label: 'Oberon' }, - { label: 'Despina' }, - { label: 'Galatea' }, - { label: 'Larissa' }, - { label: 'Triton' }, - { label: 'Nereid' }, - { label: 'Charon' }, - { label: 'Styx' }, - { label: 'Nix' }, - { label: 'Kerberos' }, - { label: 'Hydra' }, - ]); +export default () => { + const [options, setOptions] = useState(OPTIONS); const onChange = (options: EuiSelectableOption[]) => { setOptions(options); }; return ( <> - setIsPopoverOpen(!isPopoverOpen)} - > - Show popover - - } - isOpen={isPopoverOpen} - closePopover={() => setIsPopoverOpen(false)} + + + + + + + +

In an input popover

+
+ + + + + +

+ Using listProps.bordered=true and{' '} + + listProps.paddingSize="none" + +

+
+ + - list} + + + ); +}; + +const SelectablePopover = ( + props: Pick +) => { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const { options, onChange } = props; + + return ( + setIsPopoverOpen(!isPopoverOpen)} > - {(list, search) => ( -
- {search} - {list} - - - Manage this list - - -
- )} -
-
+ Show popover + + } + isOpen={isPopoverOpen} + closePopover={() => setIsPopoverOpen(false)} + > + + {(list, search) => ( +
+ {search} + {list} + + + Manage this list + + +
+ )} +
+ + ); +}; - +const SelectableFlyout = ( + props: Pick +) => { + const [isFlyoutVisible, setIsFlyoutVisible] = useState(false); + const { options, onChange } = props; + return ( + <> setIsFlyoutVisible(true)}> Show flyout @@ -116,7 +168,7 @@ export default () => { aria-labelledby="selectableFlyout" > { )} + + ); +}; - - - -

- Using listProps.bordered=true and{' '} - - listProps.paddingSize="none" - -

-
+const SelectableInputPopover = () => { + const [options, setOptions] = useState(OPTIONS); + const [isOpen, setIsOpen] = useState(false); + const [inputValue, setInputValue] = useState(''); + const [isSearching, setIsSearching] = useState(true); - + return ( + { + setOptions(newOptions); + setIsOpen(false); - - {(list) => list} - - + if (changedOption.checked === 'on') { + setInputValue(changedOption.label); + setIsSearching(false); + } else { + setInputValue(''); + } + }} + singleSelection + searchable + searchProps={{ + value: inputValue, + onChange: (value) => { + setInputValue(value); + setIsSearching(true); + }, + onKeyDown: (event) => { + if (event.key === 'Tab') return setIsOpen(false); + if (event.key !== 'Escape') return setIsOpen(true); + }, + onClick: () => setIsOpen(true), + onFocus: () => setIsOpen(true), + }} + isPreFiltered={isSearching ? false : { highlightSearch: false }} // Shows the full list when not actively typing to search + listProps={{ + css: { '.euiSelectableList__list': { maxBlockSize: 200 } }, + }} + > + {(list, search) => ( + setIsOpen(false)} + disableFocusTrap + closeOnScroll + isOpen={isOpen} + input={search!} + panelPaddingSize="none" + > + {list} + + )} + ); }; diff --git a/src-docs/src/views/super_date_picker/super_date_picker_example.js b/src-docs/src/views/super_date_picker/super_date_picker_example.js index 1607e80d973..4fea50c1a86 100644 --- a/src-docs/src/views/super_date_picker/super_date_picker_example.js +++ b/src-docs/src/views/super_date_picker/super_date_picker_example.js @@ -4,6 +4,7 @@ import { Link } from 'react-router-dom'; import { GuideSectionTypes } from '../../components'; import { + EuiCallOut, EuiCode, EuiCodeBlock, EuiIcon, @@ -37,6 +38,9 @@ const autoRefreshOnlySource = require('!!raw-loader!./auto_refresh_only'); import SuperDatePickerPattern from './super_date_picker_pattern'; const superDatePickerPatternSource = require('!!raw-loader!./super_date_picker_pattern'); +import SuperDatePickerLocale from './super_date_picker_locale'; +const superDatePickerLocaleSource = require('!!raw-loader!./super_date_picker_locale'); + const superDatePickerSnippet = ` `; +const superDatePickerLocaleSnippet = ``; + export const SuperDatePickerExample = { title: 'Super date picker', intro: ( @@ -346,5 +358,38 @@ if (!endMoment || !endMoment.isValid()) { demo: , dempPanelProps: { color: 'subdued' }, }, + { + title: 'Locale', + source: [ + { + type: GuideSectionTypes.TSX, + code: superDatePickerLocaleSource, + }, + ], + text: ( + <> +

+ Locale formatting is achieved by using the locale + ,timeFormat, and dateFormat{' '} + props. The latter will take any moment(){' '} + notation. Check{' '} + + Date format by country + {' '} + for formatting examples. +

+ + Moment will try to load the locale on demand when it is used. + Bundlers that do not support dynamic require statements will need to + explicitly import the locale, e.g.{' '} + {"import 'moment/locale/zh-cn'"}. See the below + demo TSX for examples. + + + ), + props: { EuiSuperDatePicker }, + snippet: superDatePickerLocaleSnippet, + demo: , + }, ], }; diff --git a/src-docs/src/views/super_date_picker/super_date_picker_locale.tsx b/src-docs/src/views/super_date_picker/super_date_picker_locale.tsx new file mode 100644 index 00000000000..d19a304ac4a --- /dev/null +++ b/src-docs/src/views/super_date_picker/super_date_picker_locale.tsx @@ -0,0 +1,100 @@ +import React, { useState } from 'react'; + +// NOTE: These explicit imports are required for CodeSandbox and any +// bundler that does not support Moment dynamically loading locales +import 'moment/locale/zh-cn'; +import 'moment/locale/ja'; +import 'moment/locale/fr'; + +import { + EuiButtonGroup, + EuiComboBox, + EuiComboBoxOptionOption, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, + EuiSuperDatePicker, + OnTimeChangeProps, +} from '../../../../src/components'; +import { htmlIdGenerator } from '../../../../src/services'; + +const localeId = htmlIdGenerator('locale'); +const locales = [ + { id: localeId(), label: 'en' }, + { id: localeId(), label: 'zh-CN' }, + { id: localeId(), label: 'ja-JP' }, + { id: localeId(), label: 'fr-FR' }, +]; +const dateFormats = [ + { label: 'MMM D, YYYY @ HH:mm:ss.SSS' }, + { label: 'dddd, MMMM Do YYYY, h:mm:ss a' }, + { label: 'YYYY-MM-DDTHH:mm:ss.SSSZ' }, +]; + +export default () => { + const [start, setStart] = useState('now-1h'); + const [end, setEnd] = useState('now-15m'); + const onTimeChange = ({ start, end }: OnTimeChangeProps) => { + setStart(start); + setEnd(end); + }; + + const [locale, setLocale] = useState(); + const [localeSelected, setLocaleSelected] = useState(locales[0].id); + const onLocaleChange = (optionId: React.SetStateAction) => { + setLocale(locales.find(({ id }) => id === optionId)!.label); + setLocaleSelected(optionId); + }; + + const [dateFormat, setDateFormat] = useState(); + const [dateFormatsSelected, setDateFormatsSelected] = useState([ + dateFormats[0], + ]); + const onDateFormatChange = (selectedOptions: EuiComboBoxOptionOption[]) => { + setDateFormat(selectedOptions.length ? selectedOptions[0].label : ''); + setDateFormatsSelected(selectedOptions); + }; + const onDateFormatCreate = (searchValue: string) => { + const normalizedSearchValue = searchValue.trim().toLowerCase(); + if (!normalizedSearchValue) return; + + setDateFormat(searchValue); + setDateFormatsSelected([{ label: searchValue }]); + }; + + return ( + <> + + + + + + + + + + + + ); +}; diff --git a/src-docs/src/views/tables/auto/auto.tsx b/src-docs/src/views/tables/auto/auto.tsx index e0f98b12dc5..c82018ec59a 100644 --- a/src-docs/src/views/tables/auto/auto.tsx +++ b/src-docs/src/views/tables/auto/auto.tsx @@ -217,6 +217,7 @@ export default () => { tableCaption="Demo of EuiBasicTable's table layout options" items={users} columns={columns} + rowHeader="firstName" tableLayout={tableLayout === 'tableLayoutAuto' ? 'auto' : 'fixed'} /> diff --git a/src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx b/src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx index 561afb05324..f2232bd174b 100644 --- a/src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx +++ b/src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx @@ -22,6 +22,12 @@ const meta: Meta = { isActive: true, focusRegionOnTextChange: false, }, + parameters: { + loki: { + // There are no visual elements to test + skip: true, + }, + }, }; export default meta; diff --git a/src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx b/src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx index 4340f68826b..3e56c217801 100644 --- a/src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx +++ b/src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx @@ -21,6 +21,12 @@ const meta: Meta = { // Component defaults showOnFocus: false, }, + parameters: { + loki: { + // There are no visual elements to test + skip: true, + }, + }, }; export default meta; diff --git a/src/components/accessibility/skip_link/skip_link.stories.tsx b/src/components/accessibility/skip_link/skip_link.stories.tsx index 82650d832e4..473c0903b1a 100644 --- a/src/components/accessibility/skip_link/skip_link.stories.tsx +++ b/src/components/accessibility/skip_link/skip_link.stories.tsx @@ -25,6 +25,12 @@ const meta: Meta = { // Override default to true for clearer Storybook behavior overrideLinkBehavior: true, }, + parameters: { + loki: { + // There are no visual elements to test + skip: true, + }, + }, }; moveStorybookControlsToCategory( meta, diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap index 460bc19f21f..94a560bdfc6 100644 --- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap +++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap @@ -41,7 +41,6 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = ` inert="" role="group" style="block-size: 0;" - tabindex="-1" >
/// -import React, { useState } from 'react'; +import React from 'react'; import { EuiAccordion, EuiAccordionProps } from './index'; const sharedProps: EuiAccordionProps = { @@ -47,88 +47,18 @@ describe('EuiAccordion', () => { cy.realMount(); cy.realPress('Tab'); cy.realPress('Enter'); - cy.realPress(['Shift', 'Tab']); cy.focused().invoke('attr', 'aria-expanded').should('equal', 'true'); cy.realPress('Space'); cy.focused().invoke('attr', 'aria-expanded').should('equal', 'false'); }); }); - describe('focus management', () => { - const expectChildrenIsFocused = () => { - cy.focused() - .should('have.class', 'euiAccordion__childWrapper') - .should('have.attr', 'tabindex', '-1'); - }; - - it('focuses the accordion content when the arrow is clicked', () => { - cy.realMount(); - cy.get('.euiAccordion__arrow').realClick(); - expectChildrenIsFocused(); - }); - - it('focuses the accordion content when the button is clicked', () => { - cy.realMount(); - cy.realPress('Tab'); - cy.focused().contains('Click me to toggle').realPress('Enter'); - expectChildrenIsFocused(); - }); - - describe('forceState', () => { - it('does not focus the accordion when `forceState` prevents the accordion from opening', () => { - cy.realMount(); - - cy.contains('Click me to toggle').realClick(); - // cy.focused() is flaky here and doesn't always return an element, so use document.activeElement instead - cy.then(() => { - expect(document.activeElement).not.to.have.class( - 'euiAccordion__childWrapper' - ); - }); - }); - - it('does not focus the accordion when programmatically toggled from outside the accordion', () => { - const ControlledComponent = () => { - const [accordionOpen, setAccordionOpen] = useState(false); - return ( - <> - - - - ); - }; - cy.realMount(); - - cy.get('[data-test-subj="toggleForceState"]').realClick(); - cy.focused() - .should('not.have.class', 'euiAccordion__childWrapper') - .should('have.attr', 'data-test-subj', 'toggleForceState'); - }); - - it('attempts to focus the accordion children when `onToggle` controls `forceState`', () => { - const ControlledComponent = () => { - const [accordionOpen, setAccordionOpen] = useState(false); - return ( - setAccordionOpen(open)} - forceState={accordionOpen ? 'open' : 'closed'} - /> - ); - }; - cy.realMount(); - - cy.contains('Click me to toggle').realClick(); - expectChildrenIsFocused(); - }); - }); + // Note: we used to move focus automatically to the accordion contents on open/ + // toggle button click, but we no longer do so after receiving a11y audit feedback + // that the change of context was confusing/not helpful + it('maintains focus on the toggle button when opened', () => { + cy.realMount(); + cy.get('.euiAccordion__button').realClick(); + cy.focused().should('have.class', 'euiAccordion__button'); }); }); diff --git a/src/components/accordion/accordion.test.tsx b/src/components/accordion/accordion.test.tsx index 64599153f7c..b7b8258a419 100644 --- a/src/components/accordion/accordion.test.tsx +++ b/src/components/accordion/accordion.test.tsx @@ -319,18 +319,5 @@ describe('EuiAccordion', () => { expect(onToggleHandler).toBeCalled(); expect(onToggleHandler).toBeCalledWith(false); }); - - it('moves focus to the content when expanded', () => { - const component = mount(); - const childWrapper = component.find('div[role="group"]').getDOMNode(); - - expect(childWrapper).not.toBeFalsy(); - expect(childWrapper).not.toBe(document.activeElement); - - // click the button - component.find('button').at(0).simulate('click'); - - expect(childWrapper).toBe(document.activeElement); - }); }); }); diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx index 640576bc606..3ceb0af6bd4 100644 --- a/src/components/accordion/accordion.tsx +++ b/src/components/accordion/accordion.tsx @@ -152,16 +152,6 @@ export class EuiAccordionClass extends Component< if (forceState) { const nextState = !this.isOpen; this.props.onToggle?.(nextState); - - // If the accordion should theoretically be opened, wait a tick (allows - // consumer state to update) and attempt to focus the child content. - // NOTE: Even if the accordion does not actually open, this is fine - - // the `inert` property on the hidden children will prevent focus - if (nextState === true) { - requestAnimationFrame(() => { - this.accordionChildrenEl?.focus(); - }); - } } else { this.setState( (prevState) => ({ @@ -169,23 +159,11 @@ export class EuiAccordionClass extends Component< }), () => { this.props.onToggle?.(this.state.isOpen); - - // If the accordion is open, programmatically move focus - // from the accordion trigger to the child content - if (this.state.isOpen) { - this.accordionChildrenEl?.focus(); - } } ); } }; - // Used to focus the accordion children on user trigger click only (vs controlled/programmatic open) - accordionChildrenEl: HTMLDivElement | null = null; - accordionChildrenRef = (node: HTMLDivElement | null) => { - this.accordionChildrenEl = node; - }; - generatedId = htmlIdGenerator()(); render() { @@ -256,7 +234,6 @@ export class EuiAccordionClass extends Component< isLoading={isLoading} isLoadingMessage={isLoadingMessage} isOpen={this.isOpen} - accordionChildrenRef={this.accordionChildrenRef} > {children} diff --git a/src/components/accordion/accordion_children/accordion_children.tsx b/src/components/accordion/accordion_children/accordion_children.tsx index 62a2d7ffad8..d119d9b725b 100644 --- a/src/components/accordion/accordion_children/accordion_children.tsx +++ b/src/components/accordion/accordion_children/accordion_children.tsx @@ -9,7 +9,6 @@ import React, { FunctionComponent, HTMLAttributes, - Ref, useCallback, useMemo, useState, @@ -32,14 +31,12 @@ type _EuiAccordionChildrenProps = HTMLAttributes & 'role' | 'children' | 'paddingSize' | 'isLoading' | 'isLoadingMessage' > & { isOpen: boolean; - accordionChildrenRef: Ref; }; export const EuiAccordionChildren: FunctionComponent< _EuiAccordionChildrenProps > = ({ role, children, - accordionChildrenRef, paddingSize, isLoading, isLoadingMessage, @@ -90,9 +87,7 @@ export const EuiAccordionChildren: FunctionComponent< className="euiAccordion__childWrapper" css={wrapperCssStyles} style={heightInlineStyle} - ref={accordionChildrenRef} role={role} - tabIndex={-1} // @ts-expect-error - inert property not yet available in React TS defs. TODO: Remove this once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822 is merged inert={!isOpen ? '' : undefined} // Can't pass a boolean currently, Jest throws errors > diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap index 3fa583c6f2a..741253a831f 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -271,11 +271,11 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox" >
extends Component< hasPagination(this.props) && this.pageSize > 0 ? this.props.pagination.pageIndex * this.pageSize + index : index; - return this.renderItemRow(item, tableItemIndex); + return this.renderItemRow(item, tableItemIndex, index); }); } @@ -950,7 +950,7 @@ export class EuiBasicTable extends Component< ); } - renderItemRow(item: T, rowIndex: number) { + renderItemRow(item: T, rowIndex: number, displayedRowIndex: number) { const { columns, selection, rowHeader, itemIdToExpandedRowMap } = this.props; @@ -974,7 +974,8 @@ export class EuiBasicTable extends Component< const [checkboxCell, isDisabled] = this.renderItemSelectionCell( itemId, item, - selected + selected, + displayedRowIndex ); cells.push(checkboxCell); rowSelectionDisabled = !!isDisabled; @@ -1075,7 +1076,12 @@ export class EuiBasicTable extends Component< ); } - renderItemSelectionCell(itemId: ItemId, item: T, selected: boolean) { + renderItemSelectionCell( + itemId: ItemId, + item: T, + selected: boolean, + displayedRowIndex: number + ) { const { selection } = this.props; const key = `_selection_column_${itemId}`; const checked = selected; @@ -1100,7 +1106,11 @@ export class EuiBasicTable extends Component< }; return [ - + {(selectThisRow: string) => ( = { title: 'Tabular Content/EuiInMemoryTable', // @ts-ignore complex diff --git a/src/components/bottom_bar/bottom_bar.stories.tsx b/src/components/bottom_bar/bottom_bar.stories.tsx index 0f295fc118c..956820b147a 100644 --- a/src/components/bottom_bar/bottom_bar.stories.tsx +++ b/src/components/bottom_bar/bottom_bar.stories.tsx @@ -8,6 +8,7 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { LOKI_SELECTORS } from '../../../.storybook/loki'; import { EuiBottomBar, EuiBottomBarProps } from './bottom_bar'; const meta: Meta = { @@ -26,6 +27,12 @@ const meta: Meta = { usePortal: true, affordForDisplacement: true, }, + parameters: { + loki: { + // Bottom bar content is rendered in a portal + chromeSelector: LOKI_SELECTORS.portal, + }, + }, }; export default meta; diff --git a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap index d60f9fd81de..7f6277f2a14 100644 --- a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap +++ b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap @@ -256,7 +256,6 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion pro inert="" role="group" style="block-size: 0;" - tabindex="-1" >
+
+ + + +
+
+ + + +
+
+`; + +exports[`KibanaCollapsibleNavSolution renders docked icons: popover 1`] = ` +