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

Add Menu button in new header variant #3478

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Add Menu button in new header variant #3478

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
595562b
added menu button
SriHV Jan 21, 2025
46c876b
added nav items to menu item
SriHV Jan 22, 2025
445872a
removed unnecessary css
SriHV Jan 22, 2025
5546dfb
updated snapshot
SriHV Jan 23, 2025
fc8dfc9
Merge branch 'main' into enhancement/159/add-menu-button-in-new-heade…
SriHV Jan 23, 2025
1af164e
changes in menu button
SriHV Jan 29, 2025
467e713
Merge branch 'enhancement/159/add-menu-button-in-new-header-variant' …
SriHV Jan 29, 2025
70e9b03
fix link focus issues
SriHV Jan 29, 2025
4d4c072
Merge branch 'main' into enhancement/159/add-menu-button-in-new-heade…
SriHV Jan 29, 2025
10f6b7d
Merge branch 'main' into enhancement/159/add-menu-button-in-new-heade…
SriHV Jan 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions __snapshots__/layout/_template.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,9 +230,11 @@ exports[`base page template matches the favicons block override snapshot 1`] = `

</div>


</div>
</div>


</div>

<div class="ons-header__main">
Expand Down Expand Up @@ -471,9 +473,11 @@ exports[`base page template matches the footer block override snapshot 1`] = `

</div>


</div>
</div>


</div>

<div class="ons-header__main">
Expand Down Expand Up @@ -844,6 +848,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `

</div>


</div>
</div>

Expand Down Expand Up @@ -885,6 +890,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `

</nav>


</div>

<div class="ons-header__main">
Expand Down Expand Up @@ -1999,9 +2005,11 @@ exports[`base page template matches the meta block override snapshot 1`] = `

</div>


</div>
</div>


</div>

<div class="ons-header__main">
Expand Down Expand Up @@ -2224,9 +2232,11 @@ exports[`base page template matches the social block override snapshot 1`] = `

</div>


</div>
</div>


</div>

<div class="ons-header__main">
Expand Down
4 changes: 2 additions & 2 deletions ...nce/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...ence/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions ...ence/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
88 changes: 87 additions & 1 deletion src/components/button/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -431,7 +431,8 @@ $button-shadow-size: 3px;
}

&--mobile[aria-expanded='true'],
&--text-link[aria-expanded='true'] {
&--text-link[aria-expanded='true'],
&--menu[aria-expanded='true'] {
.ons-icon {
transform: rotate(270deg);
}
Expand Down Expand Up @@ -551,6 +552,91 @@ $button-shadow-size: 3px;
}
}
}

&--menu {
align-items: center;
display: flex;
height: 67px;
Copy link
Contributor

Choose a reason for hiding this comment

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

I think we should avoid setting the height like this. Find out how the height is set on the header and see if you can inherit that

padding: 0 1.5rem;
border-bottom: 4px solid rgb(0 0 0 / 0%);
@include mq(l) {
height: 72px;
}
.ons-icon {
transform: rotate(90deg);
}
}

&--menu & {
&__inner {
background: rgb(0 0 0 / 0%);
border: 0;
border-radius: 0;
Comment on lines +573 to +574
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we need these?

box-shadow: none;
color: var(--ons-color-text-link);
font-weight: 700;
Copy link
Contributor

Choose a reason for hiding this comment

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

This is already being set with the ons-u-fs-s--b class

padding: 0;
.ons-icon {
fill: var(--ons-color-text-link);
height: 1rem;
margin-top: 0;
width: 1rem;
}
}
}

&--menu:focus {
background-color: var(--ons-color-focus);
border-color: var(--ons-color-black);
}

&--menu:hover {
border-color: var(--ons-color-text-link-hover);
}

&--menu:focus & {
&__inner {
background: none;
Copy link
Contributor

Choose a reason for hiding this comment

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

This doesnt need to be set

box-shadow: none;
}
}

&--menu:focus:hover:not(:active, .active) {
.ons-btn__inner {
background: none;
}
}

&--menu:active,
&--menu[aria-expanded='true'] {
background-color: var(--ons-color-branded-tint);
border-color: var(--ons-color-text-link-hover);
}

&--menu:hover &,
&--menu:active &,
&--menu.active & {
&__inner {
background: none;
color: var(--ons-color-text-link-hover);
.ons-icon {
fill: var(--ons-color-text-link-hover);
}
}
}

&--menu:active &,
&--menu:active:focus &,
&--menu.active &,
&--menu.active:focus & {
&__inner {
background: none;
color: var(--ons-color-text-link-hover);
.ons-icon {
fill: var(--ons-color-text-link-hover);
}
}
}
}

.ons-search__btn {
Expand Down
44 changes: 44 additions & 0 deletions src/components/header/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,50 @@
}
}

&--basic & {
&__grid-top {
padding: 0;
}
}

&-nav-menu {
background-color: var(--ons-color-branded-tint);
margin-bottom: 1rem;
padding-top: 2.5rem;
Comment on lines +247 to +248
Copy link
Contributor

Choose a reason for hiding this comment

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

We can extend utility classes here

width: 100%;

&__key-list {
border-bottom: 1px solid var(--ons-color-ocean-blue);
margin-bottom: 1.25rem;
padding-bottom: 1rem;
padding-left: 0;
row-gap: 1rem;
}

&__link,
&__heading,
&__text,
&__description {
line-height: 1.714 !important;
}

&__child-list {
margin-bottom: 2rem !important;
}

.ons-grid {
margin-left: 0;
}

.ons-grid__col {
padding-left: 0;
padding-bottom: 1rem;
@include mq(m) {
padding-bottom: 0;
}
}
}

.ons-btn {
top: 0 !important;
}
Expand Down
Loading