[Look&Feel] Consistency and density improvements #836

danieldong51 · 2024-08-09T01:32:08Z

Description

This PR makes consistency and density improvements, including:

Using small context menus
Using small tabs: <EuiTabs size="s">
Using small font size as normal paragraph font size through <EuiText size="s">
Using semantic headers (H1s on main pages, H2s on modals/flyouts) wrapped under <EuiText size="s">
Only using primary buttons for primary calls to action.

Screenshots

All screenshots are in the v8 Next Dark theme.

Small Context Menus

Note that because the context menu items are not passed as an attribute, each individual context menu item was modified to be size="s".

Scope	Before	After
Detector: Actions
Detector: Controls

Small Tabs

Scope	Before	After
Detector: Anomaly History
Detector: Config

Paragraph font size

Scope	Before	After
Get Started
Get Started: Description
Get Started: Sample
Get Started: Link
Create Detector: Configure
Create Detector: Configure Callout
Dashboard: Empty
Dashboard: No Result
Detectors: Empty
Detector Details: Attempting
Detector Details: Features
Detector Details: No Anomalies
Detector Details: Not Available
Detector Details: Start
Detector Details: Historical
Feature Anywhere: Empty
Feature Anywhere: Add
Feature Anywhere: Successful
Modals: Confirm
Modals: Delete
Modals: Confirm Start
Modals: Confirm Stop
Modals: Confirm Delete
Modals: Unlink

Semantic Headers

Scope	Before	After
Create Inspector: Define
Create Inspector: Configure
Create Inspector: Jobs
Create Inspector: Review
Dashboards
Detector Name
Get Started
Modals: Code
Modals: Feature Code
Modals: Confirm Stop
Modals: Confirm Start
Modals: Confirm Stop
Modals: Confirm Delete
Modals: Remove Association
Modals: Set Up
Flyouts: Associated Detectors
Flyouts: Add Detectors
Flyouts: Sample

Buttons

Note that the below page has another primary button at the bottom.

Scope	Before	After
Refresh Preview

Check List

New functionality includes testing.
- All tests pass
New functionality has been documented.
Commits are signed per the DCO using --signoff

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
For more information on following Developer Certificate of Origin and signing off your commits, please check here.

jackiehanyang · 2024-08-09T18:05:45Z

@danieldong51 what's the purpose of having this change? Is it part of the header redesign project?

danieldong51 · 2024-08-09T18:09:37Z

@danieldong51 what's the purpose of having this change? Is it part of the header redesign project?

This is part of the density and consistency improvements for Look & Feel

virajsanghvi

Minor comment, changes look good, but likely want to check test failure

virajsanghvi · 2024-08-09T18:17:27Z

public/pages/DetectorDetail/components/DetectorControls/DetectorControls.tsx

@@ -55,6 +55,7 @@ export const DetectorControls = (props: DetectorControls) => {
              key="editDetector"
              data-test-subj="editDetectorSettingsItem"
              onClick={props.onEditDetector}
+              size="s"


Can you make the EuiContextMenuPanel small instead? may just make it easier to add stuff in the future (not sure if this is possible)

Because the EuiContextMenu items weren't passed in as items, setting the size attribute for EuiContextMenuPanel didn't change the size of the context menu

virajsanghvi · 2024-08-09T18:25:37Z

@danieldong51 what's the purpose of having this change? Is it part of the header redesign project?

This is part of the density and consistency improvements for Look & Feel

Just FYI, we previously made these changes to the core experiences and are going through all the plugins to make these changes to ideally get a more consistent/denser look and feel across the product for 2.17.

jackiehanyang · 2024-08-09T18:28:52Z

I see FTR E2E test CI failed, could you please take a look? @danieldong51

Also, I see there's another open PR that seems to be doing similar things - #826. Could you verify if we still need that PR if we merge yours?

jackiehanyang · 2024-08-09T18:38:59Z

@virajsanghvi Do have a sanity test planned for this pr/project? I’m mostly concerned about whether the PR includes every possible text/button/tab/... that needs to be updated, so the page is consistent with the new look

danieldong51 · 2024-08-09T18:42:17Z

#826

That one updates the buttons and form elements for Look & Feel, and this PR does the rest of the target areas for the project. The changes in these two PRs shouldn't overlap, so both would be needed.

virajsanghvi · 2024-08-09T19:14:42Z

@virajsanghvi Do have a sanity test planned for this pr/project? I’m mostly concerned about whether the PR includes every possible text/button/tab/... that needs to be updated, so the page is consistent with the new look

We won't have any automated mechanisms, but given we're making changes to all pages with the header, left nav, and look and feel items, we've discussed having plugin-level and product-wide bug bashes to identify issues/unevenness across all the projects, which I think will provide the sanity you're looking for (for look and feel, its mostly calling out anything that looks off/inconsistent).

We won't be perfect given the product is already inconsistent and we're not addressing everything, there's ongoing development, and that we're not plugin experts so don't know the full surface area, but as was aligned on while undertaking this effort, given we're already inconsistent in the product, we just want to move in the right direction without introducing any additional unevenness.

Signed-off-by: Dan Dong <[email protected]>

* Changed context menus to be small Signed-off-by: Dan Dong <[email protected]> * Updated tabs to be small Signed-off-by: Dan Dong <[email protected]> * Updated paragraph text to be EuiText size="s" Signed-off-by: Dan Dong <[email protected]> * Updated semantic headers Signed-off-by: Dan Dong <[email protected]> * Updated primary buttons Signed-off-by: Dan Dong <[email protected]> * Reverted unintended changes Signed-off-by: Dan Dong <[email protected]> * Updated snapshot testing Signed-off-by: Dan Dong <[email protected]> * Fixed merge conflict Signed-off-by: Dan Dong <[email protected]> * Updated snapshot tests --------- Signed-off-by: Dan Dong <[email protected]> (cherry picked from commit 07908a0)

* Changed context menus to be small Signed-off-by: Dan Dong <[email protected]> * Updated tabs to be small Signed-off-by: Dan Dong <[email protected]> * Updated paragraph text to be EuiText size="s" Signed-off-by: Dan Dong <[email protected]> * Updated semantic headers Signed-off-by: Dan Dong <[email protected]> * Updated primary buttons Signed-off-by: Dan Dong <[email protected]> * Reverted unintended changes Signed-off-by: Dan Dong <[email protected]> * Updated snapshot testing Signed-off-by: Dan Dong <[email protected]> * Fixed merge conflict Signed-off-by: Dan Dong <[email protected]> * Updated snapshot tests --------- Signed-off-by: Dan Dong <[email protected]> (cherry picked from commit 07908a0) Co-authored-by: Dan Dong <[email protected]>

opensearch-trigger-bot bot added the backport 2.x label Aug 9, 2024

danieldong51 force-pushed the look&feel branch 4 times, most recently from e03514b to adfda03 Compare August 9, 2024 17:18

danieldong51 marked this pull request as ready for review August 9, 2024 17:32

danieldong51 requested review from ohltyler, kaituo, jackiehanyang, amitgalitz, sean-zheng-amazon, dbwiddis, owaiskazi19 and joshpalis as code owners August 9, 2024 17:32

zhongnansu added the v2.17.0 label Aug 9, 2024

virajsanghvi approved these changes Aug 9, 2024

View reviewed changes

danieldong51 mentioned this pull request Aug 13, 2024

Update Anomaly Detection Plugin test opensearch-project/opensearch-dashboards-functional-test#1518

Merged

1 task

danieldong51 added 6 commits August 21, 2024 10:54

Changed context menus to be small

4bafaa0

Signed-off-by: Dan Dong <[email protected]>

Updated tabs to be small

58230ff

Signed-off-by: Dan Dong <[email protected]>

Updated paragraph text to be EuiText size="s"

4ef2ada

Signed-off-by: Dan Dong <[email protected]>

Updated semantic headers

a5f1c5c

Signed-off-by: Dan Dong <[email protected]>

Updated primary buttons

37ac9c0

Signed-off-by: Dan Dong <[email protected]>

Reverted unintended changes

2019019

Signed-off-by: Dan Dong <[email protected]>

Updated snapshot testing

a64e770

Signed-off-by: Dan Dong <[email protected]>

danieldong51 force-pushed the look&feel branch from 6f46d25 to f1a6687 Compare August 21, 2024 18:04

Fixed merge conflict

eeebfec

Signed-off-by: Dan Dong <[email protected]>

danieldong51 force-pushed the look&feel branch from f1a6687 to eeebfec Compare August 21, 2024 18:08

Updated snapshot tests

eea2933

jackiehanyang approved these changes Aug 21, 2024

View reviewed changes

jackiehanyang merged commit 07908a0 into opensearch-project:main Aug 21, 2024
8 of 9 checks passed

opensearch-trigger-bot bot mentioned this pull request Aug 21, 2024

[Backport 2.x] [Look&Feel] Consistency and density improvements #847

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Look&Feel] Consistency and density improvements #836

[Look&Feel] Consistency and density improvements #836

danieldong51 commented Aug 9, 2024 •

edited

Loading

jackiehanyang commented Aug 9, 2024

danieldong51 commented Aug 9, 2024 •

edited

Loading

virajsanghvi left a comment

virajsanghvi Aug 9, 2024

danieldong51 Aug 9, 2024

virajsanghvi commented Aug 9, 2024 •

edited

Loading

jackiehanyang commented Aug 9, 2024

jackiehanyang commented Aug 9, 2024

danieldong51 commented Aug 9, 2024

virajsanghvi commented Aug 9, 2024 •

edited

Loading

[Look&Feel] Consistency and density improvements #836

[Look&Feel] Consistency and density improvements #836

Conversation

danieldong51 commented Aug 9, 2024 • edited Loading

Description

Screenshots

Small Context Menus

Small Tabs

Paragraph font size

Semantic Headers

Buttons

Check List

jackiehanyang commented Aug 9, 2024

danieldong51 commented Aug 9, 2024 • edited Loading

virajsanghvi left a comment

Choose a reason for hiding this comment

virajsanghvi Aug 9, 2024

Choose a reason for hiding this comment

danieldong51 Aug 9, 2024

Choose a reason for hiding this comment

virajsanghvi commented Aug 9, 2024 • edited Loading

jackiehanyang commented Aug 9, 2024

jackiehanyang commented Aug 9, 2024

danieldong51 commented Aug 9, 2024

virajsanghvi commented Aug 9, 2024 • edited Loading

danieldong51 commented Aug 9, 2024 •

edited

Loading

danieldong51 commented Aug 9, 2024 •

edited

Loading

virajsanghvi commented Aug 9, 2024 •

edited

Loading

virajsanghvi commented Aug 9, 2024 •

edited

Loading