Skip to content

Feature/priority navigation #573

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
Merged
merged 45 commits into from
Sep 18, 2023
Merged

Feature/priority navigation #573

merged 45 commits into from
Sep 18, 2023

Conversation

JesmoDev
Copy link
Contributor

@JesmoDev JesmoDev commented Sep 14, 2023 •
edited
Loading

Description

Updates tab-group to enable collapsible tabs (priority navigation) which will collapse tabs into a dropdown when there is not enough space. Uses a resizeObserver to listen to changes in the tab group size.

priority-navigation - enables priority navigation
dropdown-content-direction - Set the flex direction of the content of the dropdown. ( Usefull if you have a stacked tab with an icon or similar.

Adds the following to uui-tab:
CSS Vars:
--uui-tab-padding-horizontal - Define the tab horizontal padding
--uui-tab-text-align - Define the tab text align

Properties:
active-bar-location - Set the location of the active bar. ( this is used in the dropdown to make the active bar appear on the left)

CSS:
Enables users to overwrite the width of a tab. by adding width: fit-content on host and width: 100% on the tab button

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Screenshots (if appropriate)

image image

Checklist

  • If my change requires a change to the documentation, I have updated the documentation in this pull request.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.

@JesmoDev
setup resizeObserver
0418368
@JesmoDev
hide tabs that overflow
f56113d
@JesmoDev
unset display value on visible tabs
70c57ba
@JesmoDev
add css var for tab horizontal padding
7441e64
@JesmoDev
Merge branch 'feature/popover-container' into feature/priority-naviga…
c2ae4c5 
…tion
@JesmoDev
package lock
8edead8
@JesmoDev
add popover
882afd4
@JesmoDev
Merge branch 'feature/popover-container' into feature/priority-naviga…
5d44fa6 
…tion
@JesmoDev
move styles to the bottom of the file
7544944
@JesmoDev
work
9fd31bc
@JesmoDev
hide tabs
27d5730
@JesmoDev
cleanup
e221a5e
@JesmoDev
show if active tab inside dropdown
9960eb0
@JesmoDev
add label
254294e
@JesmoDev
more labels
2ca6850
@JesmoDev
link proxies
1fb1f86
@JesmoDev
dropdown styling
2e9cdad
@JesmoDev
clone tab node instead of factory function
f28c72c
@JesmoDev
add comment
73f86ec
@JesmoDev
Merge branch 'feature/popover-v2' into feature/priority-navigation
1ae74f2
@JesmoDev
Merge remote-tracking branch 'origin/v1/contrib' into feature/priorit…
dfcf9e0 
…y-navigation
@JesmoDev
add navigation dropdown direction
747d345
@JesmoDev
makes tab items able to be 100% width by overwriting host width
c63ede5
@JesmoDev
add activeBarLocation so that the active bar can be on all sides
0bdcb2a
@JesmoDev
make hidden tabs 100% width
6582637
@JesmoDev
rename
4795ed7
@JesmoDev
set dropdown active bar location
aa7d4b7
@JesmoDev
cleanup
4fd8606
@github-actions
Copy link

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-573.westeurope.azurestaticapps.net

@github-actions
Copy link

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-573.westeurope.azurestaticapps.net

@github-actions
Copy link

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-573.westeurope.azurestaticapps.net

@github-actions
Copy link

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-573.westeurope.azurestaticapps.net

@JesmoDev JesmoDev marked this pull request as ready for review September 15, 2023 06:18
nielslyngsoe
nielslyngsoe reviewed Sep 15, 2023
View reviewed changes
nielslyngsoe
nielslyngsoe reviewed Sep 15, 2023
View reviewed changes
nielslyngsoe
nielslyngsoe reviewed Sep 15, 2023
View reviewed changes
@github-actions
Copy link

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-573.westeurope.azurestaticapps.net

@github-actions
Copy link

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-573.westeurope.azurestaticapps.net

@JesmoDev JesmoDev enabled auto-merge September 18, 2023 06:54
@github-actions
Copy link

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-573.westeurope.azurestaticapps.net

nielslyngsoe
nielslyngsoe approved these changes Sep 18, 2023
View reviewed changes
Copy link
Member

@nielslyngsoe nielslyngsoe left a comment

Choose a reason for hiding this comment

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

Good

@github-actions
Copy link

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-573.westeurope.azurestaticapps.net

@github-actions
Copy link

Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-573.westeurope.azurestaticapps.net

@nielslyngsoe nielslyngsoe merged commit e6a2cd8 into v1/contrib Sep 18, 2023
@nielslyngsoe nielslyngsoe deleted the feature/priority-navigation branch September 18, 2023 10:32
@iOvergaard iOvergaard added the feature Something we are looking to build label Sep 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@nielslyngsoe nielslyngsoe nielslyngsoe approved these changes

Assignees
No one assigned
Labels
feature Something we are looking to build
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@JesmoDev @nielslyngsoe @iOvergaard