Skip to content

AppSideNav::List:Link - Fix background issue #3032

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

Merged
merged 7 commits into from
Jul 23, 2025
Merged

AppSideNav::List:Link - Fix background issue #3032

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
26ac866
updated showcase for status of `AppSideNav::List:Link` to make the pr…
didoo Jul 18, 2025
a204e75
set transparent background color for `.hds-app-side-nav__list-item-link`
didoo Jul 18, 2025
116fd5a
changeset
didoo Jul 18, 2025
c40b28a
updated showcase for status of `AppSideNav::List:Link` for focus befo…
didoo Jul 18, 2025
09cb98f
added toggle for showing interactive states to mock app-side-nav
didoo Jul 21, 2025
9e68039
possible fix to the issue of the focus ring being cut out from siblin…
didoo Jul 21, 2025
48f098d
Update .changeset/fuzzy-pumpkins-fix.md
didoo Jul 22, 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
7 changes: 7 additions & 0 deletions .changeset/fuzzy-pumpkins-fix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@hashicorp/design-system-components": patch
---

<!-- START components/app-side-nav-->
`AppSideNav::List::Link` - Applied transparent background to the element to avoid ovelapping with previous item's focus ring
<!-- END -->
8 changes: 5 additions & 3 deletions packages/components/src/styles/components/app-side-nav/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@

// <li> element
.hds-app-side-nav__list-item {
position: relative; // for the "active" state indicator
list-style-type: none;

& + & {
Expand All @@ -89,8 +88,8 @@
var(--token-app-side-nav-body-list-item-padding-horizontal);
color: var(--token-app-side-nav-color-foreground-primary);
text-decoration: none;
background: var(--token-app-side-nav-color-surface-primary);
// "Link" could render as an HTML button element so this overrides the default border style in that case:
// "Link" could render as an HTML button element so these override the default background and border styles in that case
background: transparent;
border-color: transparent;
border-width: 0;
border-radius: var(--token-app-side-nav-body-list-item-border-radius);
Expand All @@ -99,6 +98,8 @@
&:focus,
&.mock-focus {
@include hds-focus-ring-with-pseudo-element();
// to move the item link above the siblings elements when they have a solid background (eg. active) so that the focus ring is not cut out
z-index: 1;
}

// :Hover
Expand Down Expand Up @@ -130,6 +131,7 @@
// Important: This element does not doing anything when interacted with so should not change color according to state
&.active,
&.active:hover:focus {
position: relative; // for the "active" indicator bar to be correctly positioned
Copy link
Contributor

Choose a reason for hiding this comment

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

So far, I haven't been able to uncover issues related to this change and the z-index above.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Nice!

background: var(--token-color-surface-strong);

// indicator bar
Expand Down
56 changes: 46 additions & 10 deletions showcase/app/components/mock/app/sidebar/app-side-nav.gts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,15 @@
*/

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { on } from '@ember/modifier';
import style from 'ember-style-modifier/modifiers/style';

// HDS components
import {
HdsAppSideNav,
HdsAppSideNavList,
HdsFormToggleField,
} from '@hashicorp/design-system-components/components';

// types
Expand All @@ -19,26 +23,26 @@ export interface MockAppSidebarAppSideNavSignature {
Args: {
isResponsive?: HdsAppSideNavSignature['Args']['isResponsive'];
isCollapsible?: HdsAppSideNavSignature['Args']['isCollapsible'];
showHeader?: boolean;
showFooter?: boolean;
showDevToggle?: boolean;
};
Element: HdsAppSideNavSignature['Element'];
}

export default class MockAppSidebarAppSideNav extends Component<MockAppSidebarAppSideNavSignature> {
isResponsive;
isCollapsible;
showHeader;
showFooter;
@tracked showMockInteractionState = false;

constructor(owner: Owner, args: MockAppSidebarAppSideNavSignature['Args']) {
super(owner, args);
this.isResponsive = this.args.isResponsive ?? true;
this.isCollapsible = this.args.isCollapsible ?? true;
this.showHeader = this.args.showHeader ?? true;
this.showFooter = this.args.showFooter ?? true;
}

toggleMockInteractionState = () => {
this.showMockInteractionState = !this.showMockInteractionState;
};

<template>
<HdsAppSideNav
@isResponsive={{this.isResponsive}}
Expand All @@ -57,10 +61,30 @@ export default class MockAppSidebarAppSideNav extends Component<MockAppSidebarAp
as |SNL|
>
<SNL.Title>Services</SNL.Title>
<SNL.Link @text="Boundary" @icon="boundary" @href="#" />
<SNL.Link @text="Consul" @icon="consul" @href="#" />
<SNL.Link @text="Packer" @icon="packer" @href="#" />
<SNL.Link @text="Vault" @icon="vault" @href="#" />
<SNL.Link
@text={{if this.showMockInteractionState "isActive" "Boundary"}}
@icon="boundary"
@href="#"
class="active"
/>
<SNL.Link
@text={{if this.showMockInteractionState ":focus" "Consul"}}
@icon="consul"
@href="#"
class="mock-focus"
/>
<SNL.Link
@text={{if this.showMockInteractionState ":hover" "Packer"}}
@icon="packer"
@href="#"
class="mock-hover"
/>
<SNL.Link
@text={{if this.showMockInteractionState ":active" "Vault"}}
@icon="vault"
@href="#"
class="mock-active"
/>
<SNL.Link
@text="Vault Secrets"
@icon="vault-secrets-square"
Expand Down Expand Up @@ -110,6 +134,18 @@ export default class MockAppSidebarAppSideNav extends Component<MockAppSidebarAp
@icon="guide"
@text="Documentation"
/>
{{#if @showDevToggle}}
<SNL.ExtraAfter>
<div {{style margin="32px 6px"}}>
<HdsFormToggleField
{{on "change" this.toggleMockInteractionState}}
as |F|
>
<F.Label>Show mock states</F.Label>
</HdsFormToggleField>
</div>
</SNL.ExtraAfter>
{{/if}}
</HdsAppSideNavList>
</HdsAppSideNav>
</template>
Expand Down
13 changes: 7 additions & 6 deletions showcase/app/styles/showcase-pages/app-side-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ body.page-components-app-side-nav {
// used to simulate an "header" container for the app-side-nav
.shw-component-sim-app-side-nav-header {
width: 280px;
padding: var(--token-app-side-nav-wrapper-padding-horizontal) var(--token-app-side-nav-wrapper-padding-vertical);
padding: var(--token-app-side-nav-wrapper-padding-vertical) var(--token-app-side-nav-wrapper-padding-horizontal);
background: $shw-component-app-side-nav-background;
border: 1px solid $shw-component-app-side-nav-border-color;
}
Expand All @@ -43,28 +43,29 @@ body.page-components-app-side-nav {
.shw-component-sim-app-side-nav-body {
width: 280px;
margin: 0;
padding: var(--token-app-side-nav-wrapper-padding-horizontal) var(--token-app-side-nav-wrapper-padding-vertical);
padding: var(--token-app-side-nav-wrapper-padding-vertical) var(--token-app-side-nav-wrapper-padding-horizontal);
background: $shw-component-app-side-nav-background;
border: 1px solid $shw-component-app-side-nav-border-color;
}

.shw-component-app-side-nav-home-link-wrapper {
width: 80px;
height: 80px;
padding: var(--token-app-side-nav-wrapper-padding-horizontal) var(--token-app-side-nav-wrapper-padding-vertical);
padding: var(--token-app-side-nav-wrapper-padding-vertical) var(--token-app-side-nav-wrapper-padding-horizontal);
background: $shw-component-app-side-nav-background;
border: 1px solid $shw-component-app-side-nav-border-color;
}

.shw-component-sim-app-side-nav-list-link-wrapper {
padding: var(--token-app-side-nav-wrapper-padding-horizontal) var(--token-app-side-nav-wrapper-padding-vertical);
margin: 0;
padding: var(--token-app-side-nav-wrapper-padding-vertical) var(--token-app-side-nav-wrapper-padding-horizontal);
background: $shw-component-app-side-nav-background;
border: 1px solid $shw-component-app-side-nav-border-color;
}

.shw-component-sim-app-side-nav-elem-wrapper {
width: fit-content;
padding: var(--token-app-side-nav-wrapper-padding-horizontal) var(--token-app-side-nav-wrapper-padding-vertical);
padding: var(--token-app-side-nav-wrapper-padding-vertical) var(--token-app-side-nav-wrapper-padding-horizontal);
background: $shw-component-app-side-nav-background;
}

Expand All @@ -81,7 +82,7 @@ body.page-components-app-side-nav {

.shw-component-sim-other-elements {
width: fit-content;
padding: var(--token-app-side-nav-wrapper-padding-horizontal) var(--token-app-side-nav-wrapper-padding-vertical);
padding: var(--token-app-side-nav-wrapper-padding-vertical) var(--token-app-side-nav-wrapper-padding-horizontal);
background: $shw-component-app-side-nav-background;

.hds-app-side-nav {
Expand Down
Loading