[SharedUX] EUI visual refresh for SharedUX #202780

tsullivan · 2024-12-03T17:36:16Z

Summary

Closes #200620

Remove usage of deprecated color variables
Remove usage of @kbn/ui-theme
A few other changes as requested by @andreadelrio

tsullivan · 2024-12-04T03:27:53Z

src/plugins/guided_onboarding/public/components/guide_panel_step.styles.ts

    .euiAccordion-isOpen & {
-      color: ${euiTheme.colors.title};
+      color: ${euiTheme.colors.textHeading};


How to access this UI:

guide-panel-step.mov

tsullivan · 2024-12-04T21:15:37Z

src/plugins/home/public/application/components/tutorial/instruction_set.js

-          <EuiTabs css={{ padding: `0 ${euiThemeVars.euiSizeL}` }}>{this.renderTabs()}</EuiTabs>
+          <EuiTabs css={({ euiTheme }) => ({ padding: `0 ${euiTheme.size.l}` })}>
+            {this.renderTabs()}
+          </EuiTabs>


Accessing this element in Kibana:

tutorial-instruction-set.mov

I might strip this change out of this PR because the Jest test that is impacted is pretty difficult to get updated.

tsullivan · 2024-12-04T22:26:34Z

packages/shared-ux/button_toolbar/src/buttons/toolbar_button/toolbar_button.styles.ts

      border: `${euiTheme.border.thin}`,
-      color: `${euiTheme.colors.text}`,
+      color: `${euiTheme.colors.textParagraph}`,


Accessing this from Kibana:

toolbar-buttons.mov

tsullivan · 2024-12-04T22:45:21Z

packages/shared-ux/chrome/navigation/src/ui/components/panel/label_badge.tsx

  return (
    <EuiBetaBadge
      label={text}
      size="s"
      css={css`
        margin-left: ${euiTheme.size.s};
-        color: ${euiTheme.colors.text};
+        color: ${euiTheme.colors.textParagraph};


I'm not sure we are actually using this component anywhere currently, but it could be somewhere in the navigation panel for solutions:

navigation-panels.mov

tsullivan · 2024-12-04T23:03:47Z

packages/shared-ux/file/file_upload/impl/src/file_upload.component.tsx

@@ -143,7 +143,7 @@ export const FileUpload = React.forwardRef<EuiFilePickerClass, Props>(
                css={css`
                  display: flex;
                  align-items: center;
-                  min-height: ${euiButtonHeightSmall};
+                  min-height: ${euiTheme.size.xl};


I tested this component through the developer examples. To do this, you have to run Kibana with the --run-examples flag

file-example.mov

tsullivan · 2024-12-05T00:12:52Z

src/plugins/guided_onboarding/public/components/quit_guide_modal.tsx

@@ -94,7 +94,7 @@ export const QuitGuideModal = ({
          onClick={deactivateGuide}
          isLoading={isLoading}
          fill
-          color="warning"
+          color="primary"


This change request came from @andreadelrio

tsullivan · 2024-12-05T00:24:21Z

src/plugins/navigation/public/side_navigation/index.tsx

+    >
+      <SideNavComponentLazy {...props} />
+    </Suspense>
+  );


This just affects the loading state of the solution side nav. You will need to throttle the browser's network or play back a video frame-by-frame to see it.

side-nav-loading-state.mov

…fix'

tsullivan · 2024-12-05T18:41:56Z

src/plugins/kibana_overview/public/components/_overview.scss

@@ -48,7 +48,7 @@
  }
  &.securitySolution {
    .euiCard__image {
-      background-color: $euiColorSuccess;
+      background-color: $euiColorAccentSecondary;


analytics-overview.mov

tsullivan · 2024-12-05T18:58:21Z

src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx

+          <EuiFlexItem
+            css={({ euiTheme }) => ({ marginLeft: `-${euiTheme.size.base}` })}
+            grow={false}
+          >
            <EuiIconTip type="iInCircle" content={this.props.mustCopyOnSaveMessage} />


This message was added by #175062. It looks like this code might no longer be reachable, as there seems to be no longer an "Edit" button when viewing managed content (tested with a managed dashboard). There is only a "Duplicate" button.

tsullivan · 2024-12-05T19:07:34Z

x-pack/plugins/saved_objects_tagging/public/management/components/table.tsx

@@ -72,7 +79,7 @@ export const TagTable: FC<TagTableProps> = ({
          <>
            <TagBadge tag={tag} />
            {tag.managed && (
-              <div css={{ marginLeft: euiThemeVars.euiSizeS }}>
+              <div css={{ marginLeft: euiTheme.size.s }}>


saved-objects-tagging-management.mov

tsullivan · 2024-12-05T19:24:08Z

x-pack/plugins/serverless/public/navigation/index.tsx

+      <SideNavComponentLazy {...props} />
+    </Suspense>
+  );
+};


We need to run Kibana in serverless mode to see this. When Kibana first loads, the side navigation shows a loading icon where the navigation elements appear, similar to https://github.com/elastic/kibana/pull/202780/files#r1870452922

serverless-side-navigation.mov

andreadelrio

Design changes LGTM. Thanks! I will create a follow up issue for the illustration that have hard-coded colors.

tsullivan · 2024-12-10T21:06:55Z

The build metrics show large increase in module count and async chunk sizes for the imageEmbeddable and cases plugins.

I've pushed 73d9d65 to test if this has a positive impact on the build metrics. Details to come soon.

mattkime

codeowner changes lgtm

src/plugins/saved_objects/tsconfig.json

src/plugins/saved_objects/emotion.d.ts

eokoneyo · 2024-12-11T10:59:27Z

src/plugins/home/public/application/components/tutorial/instruction_set.js

@@ -28,7 +28,7 @@ import {
 import * as StatusCheckStates from './status_check_states';

 import { injectI18n, FormattedMessage } from '@kbn/i18n-react';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { euiThemeVars } from '@kbn/ui-theme'; // FIXME: remove this, and access style variables from EUI context


We might be able to be rid of this, if we adopt the css style function callback on L281

@eokoneyo that works fine as a solution to remove this import, but unfortunately that has heavy impact to the Jest unit test for the src/plugins/home/public/application/components/tutorial/tutorial.test.js file. The test would need to mount the component wrapped in <EuiProvider>, which changes the structure of the component, and the tests themselves are using Enzyme and are heavily dependent on the structure of the component.

This entire plugin is on the roadmap to be rewritten into TypeScript in the next quarter. Maybe just adding this FIXME comment is the right thing to do for now?

@tsullivan right... it's probably best to resolve this much later then

mgadewoll · 2024-12-11T17:31:58Z

src/plugins/guided_onboarding/public/components/guide_button.tsx

@@ -58,7 +58,7 @@ export const GuideButton = ({
    <EuiButton
      isLoading={isLoading}
      onClick={toggleGuidePanel}
-      color="success"
+      color="accent"


❓ Is this expected? Or should it rather be accentSecondary? @andreadelrio
I thought accent buttons shouldn't really be used? 🤔

My understanding is that we don't know for certain if we will make accentSecondary an available button given the numerous concerns raised by designers about having two greens (particularly in buttons). Therefore I think it's safer to use the accent button which has existed in the system for a long time.

Ok, yeah I think I was behind on latest button color decisions 😅 I also just saw this (message).

mgadewoll

Changes LGTM from EUI side 👍

elasticmachine · 2024-12-12T16:56:51Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: ec429d3

Failed CI Steps

FTR Configs #102

Test Failures

[job] [logs] FTR Configs #102 / Entity Manager _search API includes source and additional metadata fields

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`canvas`	1.1MB	1.1MB	+18.0B
`cases`	491.2KB	491.2KB	+12.0B
`dashboard`	668.3KB	668.3KB	+18.0B
`discover`	785.8KB	785.8KB	+18.0B
`imageEmbeddable`	70.2KB	70.2KB	+17.0B
`lens`	1.5MB	1.5MB	+18.0B
`navigation`	26.4KB	26.4KB	+9.0B
`presentationUtil`	74.1KB	74.2KB	+54.0B
`savedObjectsTagging`	46.9KB	47.0KB	+13.0B
`securitySolution`	14.7MB	14.7MB	+18.0B
`serverless`	27.0KB	27.0KB	+9.0B
`slo`	851.1KB	851.1KB	+18.0B
`unifiedHistogram`	71.4KB	71.4KB	+18.0B
total			+240.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`guidedOnboarding`	30.2KB	30.2KB	+27.0B
`imageEmbeddable`	6.0KB	6.0KB	-54.0B
`navigation`	18.3KB	18.3KB	-22.0B
`savedObjects`	18.2KB	18.1KB	-76.0B
`savedObjectsTagging`	23.2KB	23.2KB	-54.0B
`serverless`	15.0KB	15.0KB	-26.0B
total			-205.0B

History

💔 Build #259531 failed d5ee36b
💛 Build #259086 was flaky fb95f53
💛 Build #259042 was flaky 73d9d65
💚 Build #258820 succeeded ddf07f5
💔 Build #258508 failed 06778d3

eokoneyo

Changes LGTM, thanks for this!

eokoneyo

Changes LGTM, thanks for this!

kibanamachine · 2024-12-12T19:02:53Z

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/12303034965

tsullivan · 2024-12-12T19:07:34Z

Backport workflow has been cancelled

@andreadelrio

## Summary Part of elastic#200620 1. Remove usage of deprecated color variables 2. Remove usage of `@kbn/ui-theme` 3. A few other changes as requested by @andreadelrio --------- Co-authored-by: kibanamachine <[email protected]>

tsullivan force-pushed the sharedux/eui-visual-refresh-audit branch from 282c488 to 9c6ba0d Compare December 3, 2024 17:52

tsullivan commented Dec 4, 2024

View reviewed changes

tsullivan force-pushed the sharedux/eui-visual-refresh-audit branch from c63463d to a24e855 Compare December 4, 2024 23:55

elastic deleted a comment from elasticmachine Dec 4, 2024

tsullivan commented Dec 5, 2024

View reviewed changes

tsullivan and others added 9 commits December 5, 2024 11:33

[SharedUX] EUI visual refresh for SharedUX

e58f61a

update kibana package type for button_toolbar

ea3654b

[CI] Auto-commit changed files from 'node scripts/notice'

57be122

[CI] Auto-commit changed files from 'node scripts/yarn_deduplicate'

e33c2ca

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

abc049b

…fix'

update snapshot

c3704f1

WIP fix jest test

74bf238

update package type for File Upload

7a70b81

updates per designer feedback

1b69f1c

tsullivan commented Dec 5, 2024

View reviewed changes

strip out changes to src/plugins/home/public/application/components

b4798c8

tsullivan force-pushed the sharedux/eui-visual-refresh-audit branch from abcc004 to b4798c8 Compare December 5, 2024 18:47

tsullivan commented Dec 5, 2024

View reviewed changes

fix package type lint

9a7a624

tsullivan marked this pull request as ready for review December 5, 2024 19:26

tsullivan requested review from a team as code owners December 5, 2024 19:26

tsullivan added the release_note:skip Skip the PR/issue when compiling release notes label Dec 5, 2024

import euiFormMaxWidth from EUI form styles

7ef630b

andreadelrio approved these changes Dec 9, 2024

View reviewed changes

tsullivan and others added 4 commits December 9, 2024 13:54

correction to import path

06778d3

Merge branch 'main' into sharedux/eui-visual-refresh-audit

ddf07f5

Merge branch 'main' into sharedux/eui-visual-refresh-audit

46ea1b4

revert import to test build metrics

73d9d65

tsullivan mentioned this pull request Dec 10, 2024

[EuiTheme context] Add a token for euiFormMaxWidth elastic/eui#8217

Closed

add FIXME comment

fb95f53

mattkime approved these changes Dec 11, 2024

View reviewed changes

eokoneyo reviewed Dec 11, 2024

View reviewed changes

src/plugins/saved_objects/tsconfig.json Outdated Show resolved Hide resolved

eokoneyo reviewed Dec 11, 2024

View reviewed changes

src/plugins/saved_objects/emotion.d.ts Outdated Show resolved Hide resolved

eokoneyo reviewed Dec 11, 2024

View reviewed changes

mgadewoll reviewed Dec 11, 2024

View reviewed changes

mgadewoll approved these changes Dec 11, 2024

View reviewed changes

tsullivan and others added 3 commits December 11, 2024 13:57

Merge branch 'main' into sharedux/eui-visual-refresh-audit

06858e7

Use global typings for emotion

d5ee36b

Merge branch 'main' into sharedux/eui-visual-refresh-audit

ec429d3

eokoneyo approved these changes Dec 12, 2024

View reviewed changes

tsullivan merged commit 0a38463 into elastic:main Dec 12, 2024
9 checks passed

tsullivan deleted the sharedux/eui-visual-refresh-audit branch December 12, 2024 19:02

kibanamachine added the v9.0.0 label Dec 12, 2024

tsullivan mentioned this pull request Dec 12, 2024

[SharedUX] Check integration and QA for Visual Refresh #200620

Closed

tsullivan added backport:skip This commit does not require backporting and removed backport:prev-minor Backport to (9.0) the previous minor version (i.e. one version back from main) labels Dec 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SharedUX] EUI visual refresh for SharedUX #202780

[SharedUX] EUI visual refresh for SharedUX #202780

tsullivan commented Dec 3, 2024 •

edited

Loading

tsullivan Dec 4, 2024

tsullivan Dec 4, 2024

tsullivan Dec 5, 2024

tsullivan Dec 4, 2024 •

edited

Loading

tsullivan Dec 4, 2024 •

edited

Loading

tsullivan Dec 4, 2024

tsullivan Dec 5, 2024

tsullivan Dec 5, 2024

tsullivan Dec 5, 2024

tsullivan Dec 5, 2024

tsullivan Dec 5, 2024

tsullivan Dec 5, 2024

andreadelrio left a comment

tsullivan commented Dec 10, 2024

mattkime left a comment

eokoneyo Dec 11, 2024

tsullivan Dec 11, 2024

eokoneyo Dec 12, 2024

mgadewoll Dec 11, 2024

andreadelrio Dec 11, 2024

mgadewoll Dec 11, 2024

mgadewoll left a comment

elasticmachine commented Dec 12, 2024

eokoneyo left a comment

eokoneyo left a comment

kibanamachine commented Dec 12, 2024

tsullivan commented Dec 12, 2024

[SharedUX] EUI visual refresh for SharedUX #202780

[SharedUX] EUI visual refresh for SharedUX #202780

Conversation

tsullivan commented Dec 3, 2024 • edited Loading

Summary

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tsullivan Dec 4, 2024 • edited Loading

Choose a reason for hiding this comment

tsullivan Dec 4, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andreadelrio left a comment

Choose a reason for hiding this comment

tsullivan commented Dec 10, 2024

mattkime left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mgadewoll left a comment

Choose a reason for hiding this comment

elasticmachine commented Dec 12, 2024

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Async chunks

Page load bundle

History

eokoneyo left a comment

Choose a reason for hiding this comment

eokoneyo left a comment

Choose a reason for hiding this comment

kibanamachine commented Dec 12, 2024

tsullivan commented Dec 12, 2024

tsullivan commented Dec 3, 2024 •

edited

Loading

tsullivan Dec 4, 2024 •

edited

Loading

tsullivan Dec 4, 2024 •

edited

Loading