Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Page Header] Add responsiveness for page header #8171

Merged
merged 1 commit into from
Sep 18, 2024
Merged

[Page Header] Add responsiveness for page header #8171

merged 1 commit into from
Sep 18, 2024

Conversation

zhongnansu
Copy link
Member

@zhongnansu zhongnansu commented Sep 12, 2024 •
edited
Loading

Description

  • Add responsiveness for page header
  • Stop converting data source picker actions to popover

Issues Resolved

Screenshot

iShot_2024-09-17_01.01.08.mp4

Testing the changes

Changelog

  • skip

Check List

  • All tests pass
    • yarn test:jest
    • yarn test:jest_integration
  • New functionality includes testing.
  • New functionality has been documented.
  • Update CHANGELOG.md
  • Commits are signed per the DCO using --signoff

@github-actions GitHub Actions
Copy link
Contributor

❌ Empty Changelog Section

The Changelog section in your PR description is empty. Please add a valid changelog entry or entries. If you did add a changelog entry, check to make sure that it was not accidentally included inside the comment block in the Changelog section.

@zhongnansu zhongnansu marked this pull request as ready for review September 12, 2024 21:18
@zhongnansu zhongnansu force-pushed the responsiveness-header branch from 710647d to b36cc04 Compare September 13, 2024 16:47
@virajsanghvi
Copy link
Collaborator

Just to confirm, the additional whitespace after removing the popover behavior will be addressed separately?
@virajsanghvi What's the whitespace you are referring to? Is it the one from this screenshot?
image

Sorry, the space I'm referring to is the whitespace above the area selected in your screenshot.

@zhongnansu zhongnansu force-pushed the responsiveness-header branch 2 times, most recently from e61ab07 to a0ba3a9 Compare September 17, 2024 08:04
@zhongnansu
Copy link
Member Author

@virajsanghvi Fixed the spacing issue, and updated the attached video, could you re-review?

virajsanghvi
virajsanghvi reviewed Sep 17, 2024
View reviewed changes
Copy link
Collaborator

@virajsanghvi virajsanghvi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we will want to address vertical padding between items but can be done after this cr:
image

src/core/public/chrome/ui/header/header.tsx Outdated Show resolved Hide resolved
src/core/public/chrome/ui/header/header.tsx Outdated Show resolved Hide resolved
src/core/public/chrome/utils.ts Outdated Show resolved Hide resolved
src/core/public/chrome/ui/header/header.tsx Show resolved Hide resolved
@zhongnansu
Copy link
Member Author

I think we will want to address vertical padding between items but can be done after this cr: image

@virajsanghvi This comes with the default EuiFlexItem, to fix it, we need to update in OUI

@virajsanghvi
Copy link
Collaborator

I think we will want to address vertical padding between items but can be done after this cr: image

@virajsanghvi This comes with the default EuiFlexItem, to fix it, we need to update in OUI

Can we not address with using smaller padding sizes on the elements or a css override? Anyways, may be easier to identify options once its pushed.

@zhongnansu zhongnansu force-pushed the responsiveness-header branch from a0ba3a9 to c57c1a5 Compare September 17, 2024 21:13
@zhongnansu zhongnansu force-pushed the responsiveness-header branch from c57c1a5 to f5fba22 Compare September 18, 2024 17:49
virajsanghvi
virajsanghvi reviewed Sep 18, 2024
View reviewed changes
Copy link
Collaborator

@virajsanghvi virajsanghvi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change looks good assuming checks pass

src/core/public/chrome/ui/header/header.scss
@@ -110,3 +110,11 @@
#globalHeaderBars:has(.primaryApplicationHeader) {
border-bottom: 1px solid $euiColorLightShade;
}

/* Control flex items to wrap when the viewport is less than the medium size */
@media (max-width: 768px) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: are $euiBreakpoints available here? If so, could use $euiBreakpoints['m'] instead of the hard coded value

@zhongnansu zhongnansu merged commit 636f399 into opensearch-project:main Sep 18, 2024
69 checks passed
opensearch-trigger-bot bot pushed a commit that referenced this pull request Sep 18, 2024
@github-actions
[Page Headder]Add responsiveness for page header (#8171)
f15b501 
Signed-off-by: Zhongnan Su <[email protected]>
(cherry picked from commit 636f399)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@opensearch-trigger-bot opensearch-trigger-bot bot mentioned this pull request Sep 18, 2024
Merged
opensearch-trigger-bot bot pushed a commit that referenced this pull request Sep 18, 2024
@github-actions
[Page Headder]Add responsiveness for page header (#8171)
b8e2da5 
Signed-off-by: Zhongnan Su <[email protected]>
(cherry picked from commit 636f399)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@opensearch-trigger-bot opensearch-trigger-bot bot mentioned this pull request Sep 18, 2024
Merged
virajsanghvi pushed a commit that referenced this pull request Sep 19, 2024
@opensearch-trigger-bot @github-actions
[Page Headder]Add responsiveness for page header (#8171) (#8230)
428cf55 
(cherry picked from commit 636f399)

Signed-off-by: Zhongnan Su <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
zhongnansu pushed a commit that referenced this pull request Sep 23, 2024
@opensearch-trigger-bot @github-actions
[Page Headder]Add responsiveness for page header (#8171) (#8231)
4803961 
(cherry picked from commit 636f399)

Signed-off-by: Zhongnan Su <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
abbyhu2000 added a commit to abbyhu2000/OpenSearch-Dashboards that referenced this pull request Sep 24, 2024
@abbyhu2000
Revert "[Page Headder]Add responsiveness for page header (opensearch-…
7553498 
…project#8171) (opensearch-project#8231)"

This reverts commit 4803961.
SuZhou-Joe pushed a commit to SuZhou-Joe/OpenSearch-Dashboards that referenced this pull request Oct 3, 2024
@opensearch-trigger-bot @github-actions @SuZhou-Joe
[Page Headder]Add responsiveness for page header (opensearch-project#…
3807e4b 
…8171) (opensearch-project#8230)

(cherry picked from commit 636f399)

Signed-off-by: Zhongnan Su <[email protected]>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ZilongX ZilongX ZilongX approved these changes

@virajsanghvi virajsanghvi virajsanghvi approved these changes

@ananzh ananzh Awaiting requested review from ananzh ananzh is a code owner

@kavilla kavilla Awaiting requested review from kavilla kavilla is a code owner

@AMoo-Miki AMoo-Miki Awaiting requested review from AMoo-Miki AMoo-Miki is a code owner

@ashwin-pc ashwin-pc Awaiting requested review from ashwin-pc ashwin-pc is a code owner

@joshuarrrr joshuarrrr Awaiting requested review from joshuarrrr joshuarrrr is a code owner

@abbyhu2000 abbyhu2000 Awaiting requested review from abbyhu2000 abbyhu2000 is a code owner

@zengyan-amazon zengyan-amazon Awaiting requested review from zengyan-amazon zengyan-amazon is a code owner

@manasvinibs manasvinibs Awaiting requested review from manasvinibs manasvinibs is a code owner

@Flyingliuhub Flyingliuhub Awaiting requested review from Flyingliuhub Flyingliuhub is a code owner

@curq curq Awaiting requested review from curq curq is a code owner

@bandinib-amzn bandinib-amzn Awaiting requested review from bandinib-amzn bandinib-amzn is a code owner

@SuZhou-Joe SuZhou-Joe Awaiting requested review from SuZhou-Joe SuZhou-Joe is a code owner

@ruanyl ruanyl Awaiting requested review from ruanyl ruanyl is a code owner

@BionIT BionIT Awaiting requested review from BionIT BionIT is a code owner

@xinruiba xinruiba Awaiting requested review from xinruiba xinruiba is a code owner

@zhyuanqi zhyuanqi Awaiting requested review from zhyuanqi zhyuanqi is a code owner

@mengweieric mengweieric Awaiting requested review from mengweieric mengweieric is a code owner

@LDrago27 LDrago27 Awaiting requested review from LDrago27 LDrago27 is a code owner

@sejli sejli Awaiting requested review from sejli sejli is a code owner

@joshuali925 joshuali925 Awaiting requested review from joshuali925 joshuali925 is a code owner

@huyaboo huyaboo Awaiting requested review from huyaboo huyaboo is a code owner

Assignees
No one assigned
Labels
2.17.1 backport 2.x backport 2.17 in-next look & feel Look and Feel Improvements Skip-Changelog PRs that are too trivial to warrant a changelog or release notes entry v2.18.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@zhongnansu @virajsanghvi @ZilongX @AMoo-Miki