Skip to content

Add underline, arrow, and subtitle href structure#3231

Merged
KATIETOLER merged 10 commits into
mainfrom
nav-ui-updates/kt
Mar 20, 2026
Merged

Add underline, arrow, and subtitle href structure#3231
KATIETOLER merged 10 commits into
mainfrom
nav-ui-updates/kt

Conversation

@KATIETOLER

@KATIETOLER KATIETOLER commented Mar 18, 2026

Copy link
Copy Markdown
Contributor

New style structure for Contextual Nav
This adds a subtitle that is also a link.
This will allow the subtitles to link back to previous nav contexts.

  • Adds underline to subtitle if it is an href
  • Adds arrow on the left of the subtitle to indicate navigation
  • Adds some padding to account for new UI elements
  • Adds new icons for the nav: [action, usage, slash-forward, workflows, support, settings, overview, house]
Screenshot 2026-03-18 at 4 03 20 PM

@KATIETOLER
KATIETOLER requested a review from rossedfort as a code owner March 18, 2026 19:44
@vercel

vercel Bot commented Mar 18, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
holocene Ready Ready Preview, Comment Mar 20, 2026 5:48pm

Request Review

@bilal-karim

Copy link
Copy Markdown
Member

For the back arrow icon, subtitle link, and the expand/collapse icon, can we update to indigo/100 from our colors? Reason being to further differentiate them for other nav items.

Comment thread src/lib/holocene/navigation/navigation-item.svelte
Comment thread src/lib/holocene/navigation/navigation-container.svelte Outdated
@bilal-karim

Copy link
Copy Markdown
Member

I don't know if you want to tackle this as part of this PR, but I just want to make sure the icons are all lined up nicely like this screenshot. You might have to play around with spacing. Happy to a pair session on this.

Screenshot 2026-03-19 at 10 57 40 AM

@GraceGardner

GraceGardner commented Mar 19, 2026

Copy link
Copy Markdown
Contributor

I don't know if you want to tackle this as part of this PR, but I just want to make sure the icons are all lined up nicely like this screenshot. You might have to play around with spacing. Happy to a pair session on this.

Screenshot 2026-03-19 at 10 57 40 AM

Hey @bilal-karim I think that this is something we should talk about. We have been struggling with Icon's lately. Sometimes they seem to be not quite square even after doing the whole download format thing. I think that's why the team brought up the Icon's in the last FEUX meeting. I think we might want to find a better system for getting the Icon's right. The formatting should be consistent on the FE side so really if we can get the Icons to all be exact, It should automatically line up perfectly. Any more thoughts on how to get the icons right? We would appreciate any help you can give us on the icons front for sure. It's a pain point for the whole team.

My personal thoughts are to get the couple of padding tweaks in and then get this in. We can follow up with getting the icons right, unless there's a way to get that done quickly?

@KATIETOLER

KATIETOLER commented Mar 19, 2026

Copy link
Copy Markdown
Contributor Author

I don't know if you want to tackle this as part of this PR, but I just want to make sure the icons are all lined up nicely ...


I'll add a new screenshot with the new icons once I have them in place in Cloud and have linked everything up, then ya'll can judge if they're centered etc. I just wanted to show the dividers initially, next time I'll make a more explicit note about the repo context.

@bilal-karim

Copy link
Copy Markdown
Member

Sounds good, thanks @KATIETOLER and @GraceGardner. Let's talk about icons separately once everything is linked up.

@temporal-cicd

temporal-cicd Bot commented Mar 19, 2026

Copy link
Copy Markdown
Contributor
Warnings
⚠️

📊 Strict Mode: 1 error in 1 file (0.1% of 1089 total)

src/routes/(app)/+layout.svelte (1)
  • L62:23: Argument of type '(namespace: string) => { namespace: string; onClick: (namespace: string) => void; }' is not assignable to parameter of type '(value: string | null | undefined, index: number, array: (string | null | undefined)[]) => { namespace: string; onClick: (namespace: string) => void; }'.

Generated by 🚫 dangerJS against 1606271

import verticalEllipsis from './svg/vertical-ellipsis.svelte';
import warning from './svg/warning.svelte';
import workflow from './svg/workflow.svelte';
import workflows from './svg/workflows.svelte';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is this replacing the workflow icon?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

yes. It is.

@KATIETOLER
KATIETOLER merged commit 3061496 into main Mar 20, 2026
19 checks passed
@KATIETOLER
KATIETOLER deleted the nav-ui-updates/kt branch March 20, 2026 18:52
temporal-cicd Bot pushed a commit that referenced this pull request Mar 23, 2026
Auto-generated version bump from 2.48.0 to 2.48.1

Bump type: patch

Changes included:
- [`30614969`](3061496) Add underline, arrow, and subtitle href structure (#3231)
- [`75176b6c`](75176b6) remove animation in refresh (#3240)
- [`1c2cdc0a`](1c2cdc0) Remove 120 max/min height and make it 300 to be consistent with others (#3242)
Alex-Tideman added a commit that referenced this pull request Mar 24, 2026
Auto-generated version bump from 2.48.0 to 2.48.1

Bump type: patch

Changes included:
- [`30614969`](3061496) Add underline, arrow, and subtitle href structure (#3231)
- [`75176b6c`](75176b6) remove animation in refresh (#3240)
- [`1c2cdc0a`](1c2cdc0) Remove 120 max/min height and make it 300 to be consistent with others (#3242)

Co-authored-by: Alex-Tideman <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants