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

feat(ui): adds HeaderContainer component #607

Merged
merged 10 commits into from
Nov 25, 2024
Merged

feat(ui): adds HeaderContainer component #607

merged 10 commits into from
Nov 25, 2024
+164 −13

Conversation

MartinS-git
Copy link
Contributor

@MartinS-git MartinS-git commented Nov 14, 2024 •
edited
Loading

Summary

To enable to behave like , a container component was created: , which is placed in the . The result is that is now also sticky and always remains at the top when scrolling. In addition, the width of both components behaves in the same way as the content. This means that they are now also bordered and centered in width.

Changes Made

  • Created new component
  • Changes on : added. In addition, there was a command that gave the MainContainer a margin to the left. As this is no longer required, it has been deleted
  • Example App: TopNavigation added

Related Issues

There is no ticket

Screenshots (if applicable)

image

Testing Instructions

The behavior can only be viewed in the example app

  1. npm i
  2. npm run clean:cache
  3. npm run pkg @cloudoperators/juno-app-example

Component in Storybook

  1. npm i
  2. npm run storybook -w @cloudoperators/juno-ui-components

Checklist

  • I have performed a self-review of my code.
  • I have commented my code, particularly in hard-to-understand areas.
  • I have added tests that prove my fix is effective or that my feature works.
  • New and existing unit tests pass locally with my changes.
  • I have made corresponding changes to the documentation (if applicable).
  • My changes generate no new warnings or errors.

@MartinS-git MartinS-git requested review from franzheidl and a team as code owners November 14, 2024 09:14
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Nov 14, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 4b18052

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@cloudoperators/juno-ui-components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Nov 14, 2024 •
edited
Loading

PR Preview Action v1.4.8
Preview removed because the pull request was closed.
2024-11-25 14:14 UTC

andypf
andypf reviewed Nov 14, 2024
View reviewed changes
Copy link
Collaborator

@andypf andypf left a comment

Choose a reason for hiding this comment

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

Good Job! Please take alook at my comments

packages/ui-components/src/components/AppShell/AppShell.component.tsx Outdated Show resolved Hide resolved
packages/ui-components/src/components/AppShell/AppShell.component.tsx Outdated Show resolved Hide resolved
packages/ui-components/src/components/AppShell/AppShell.component.tsx Outdated Show resolved Hide resolved
packages/ui-components/src/components/HeaderContainer/HeaderContainer.component.tsx Show resolved Hide resolved
@andypf andypf added the ui-components All tasks related to juno-ui-components library label Nov 14, 2024
guoda-puidokaite
guoda-puidokaite approved these changes Nov 15, 2024
View reviewed changes
Copy link
Contributor

@guoda-puidokaite guoda-puidokaite left a comment

Choose a reason for hiding this comment

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

Really nice to have a component directly in TS! Super cool. 🚀

Just made some suggestions below. Feel free to only fix the blocking and just consider the rest. 💪 Thank You so much.

packages/ui-components/src/components/AppShell/AppShell.component.tsx Outdated Show resolved Hide resolved
packages/ui-components/src/components/AppShell/AppShell.component.tsx Outdated Show resolved Hide resolved
packages/ui-components/src/components/AppShell/AppShell.component.tsx Outdated Show resolved Hide resolved
apps/example/src/App.jsx Show resolved Hide resolved
packages/ui-components/src/components/HeaderContainer/HeaderContainer.stories.tsx Show resolved Hide resolved
packages/ui-components/src/components/HeaderContainer/HeaderContainer.component.tsx Outdated Show resolved Hide resolved
packages/ui-components/src/components/HeaderContainer/HeaderContainer.component.tsx Outdated Show resolved Hide resolved
packages/ui-components/src/components/HeaderContainer/HeaderContainer.component.tsx Show resolved Hide resolved
guoda-puidokaite
guoda-puidokaite requested changes Nov 15, 2024
View reviewed changes
Copy link
Contributor

@guoda-puidokaite guoda-puidokaite left a comment •
edited
Loading

Choose a reason for hiding this comment

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

My brain! 🤯 I meant to request changes above.

barsukov
barsukov requested changes Nov 18, 2024
View reviewed changes
Copy link
Contributor

@barsukov barsukov left a comment

Choose a reason for hiding this comment

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

I have a question of unnecessary check on a stirng.Maybe we could discuss it.

packages/ui-components/src/components/AppShell/AppShell.component.tsx Outdated Show resolved Hide resolved
barsukov
barsukov approved these changes Nov 21, 2024
View reviewed changes
Copy link
Contributor

@barsukov barsukov left a comment

Choose a reason for hiding this comment

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

LGTM

guoda-puidokaite
guoda-puidokaite reviewed Nov 25, 2024
View reviewed changes
Copy link
Contributor

@guoda-puidokaite guoda-puidokaite left a comment

Choose a reason for hiding this comment

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

Looks great, thanks for the improvements!!! And sorry for the delay due to training. 🙏
Last few improvements. Last type related one would be the most important.

Otherwise, ready to approve. 🚀

packages/ui-components/src/components/AppShell/AppShell.component.tsx Show resolved Hide resolved
packages/ui-components/src/components/AppShell/AppShell.component.tsx Show resolved Hide resolved
packages/ui-components/src/components/AppShell/AppShell.component.tsx Show resolved Hide resolved
guoda-puidokaite
guoda-puidokaite approved these changes Nov 25, 2024
View reviewed changes
Copy link
Contributor

@guoda-puidokaite guoda-puidokaite left a comment

Choose a reason for hiding this comment

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

Looks good! Thank You! 💪

@MartinS-git MartinS-git merged commit 385ebcf into main Nov 25, 2024
15 checks passed
@MartinS-git MartinS-git deleted the top-navigation-position branch November 25, 2024 14:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@andypf andypf andypf left review comments

@barsukov barsukov barsukov approved these changes

@guoda-puidokaite guoda-puidokaite guoda-puidokaite approved these changes

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

Assignees

@MartinS-git MartinS-git

Labels
ui-components All tasks related to juno-ui-components library
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@MartinS-git @barsukov @andypf @guoda-puidokaite