Navigation button#65
Conversation
|
View your CI Pipeline Execution ↗ for commit 5a19700
💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗ ☁️ Nx Cloud last updated this comment at |
🚀 Preview Deploy Report✅ Successfully deployed preview here |
LibbyUX
left a comment
LibbyUX
left a comment
There was a problem hiding this comment.
Hi @edlu77 ! This looks good. One change request:
Can you please remove the underline from the unselected/enabled state? There is no underline for this specific state. On hover unselected, the underline appears while the user is hovering, but if they move away from the button, the component returns to unselected/enabled with no underline.
Please let me know if you have questions! Thanks so much!
![nx-cloud[bot]](https://avatars.githubusercontent.com/in/80458?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
axdanbol
left a comment
axdanbol
left a comment
There was a problem hiding this comment.
Please move the toggle into its own entrypoint
| styleUrl: './navigation-toggle.scss', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| host: { | ||
| '[attr.selected]': 'selected()', |
There was a problem hiding this comment.
Change to a class, i.e. [class.ang-navigation-toggle-selected]
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| host: { | ||
| '[attr.selected]': 'selected()', | ||
| '(click)': 'selected.set(!selected())', |
There was a problem hiding this comment.
Prefer using the update method. selected.update(s => !s)
| outline: solid 0.125rem token-utils.slot(focus-outline-color, $config); | ||
| } | ||
|
|
||
| :is(&:hover, &:active, &:focus) { |
There was a problem hiding this comment.
Use focus-visible instead of focus
| outline: solid 0.125rem token-utils.slot(focus-outline-color, $config); | ||
| } | ||
|
|
||
| :is(&.selected, &:hover, &:active, &:focus) { |
There was a problem hiding this comment.
Use focus-visible instead of focus
| }) | ||
| export class Navigation { | ||
| /** The link to navigate to */ | ||
| readonly link = input<AnyLinkCommand | null>(null); |
There was a problem hiding this comment.
Remove null, input<AnyLinkCommand>()
| }) | ||
| export class NavigationToggle { | ||
| /** Whether the button is currently selected */ | ||
| readonly selected = model<boolean>(false); |
There was a problem hiding this comment.
Remove <boolean>, it is inferred
| "@atlasng/core": ["./libs/core/src/index.ts"], | ||
| "@atlasng/design-system": ["./libs/design-system/src/index.ts"], | ||
| "@atlasng/design-system/buttons/help": ["./libs/design-system/buttons/help/src/index.ts"], | ||
| "@atlasng/design-system/buttons/navigation-category-toggle": [ |
There was a problem hiding this comment.
✅ The fix from Nx Cloud was applied
We corrected the export path in libs/design-system/buttons/navigation-toggle/src/index.ts from ../../navigation-toggle/src/lib/navigation-toggle to ./lib/navigation-toggle. This fix aligns the entry point with its sibling navigation package and resolves the ng-packagr build failure caused by an unresolvable path in the emitted .d.ts file.
Tip
✅ We verified this fix by re-running design-system:build:production.
Suggested Fix changes
diff --git a/libs/design-system/buttons/navigation-toggle/src/index.ts b/libs/design-system/buttons/navigation-toggle/src/index.ts
index b929bdf..bbdd2d1 100644
--- a/libs/design-system/buttons/navigation-toggle/src/index.ts
+++ b/libs/design-system/buttons/navigation-toggle/src/index.ts
@@ -1 +1 @@
-export { NavigationToggle } from '../../navigation-toggle/src/lib/navigation-toggle';
+export { NavigationToggle } from './lib/navigation-toggle';
🔔 Heads up, your workspace has pending recommendations ↗ to auto-apply fixes for similar failures.
➡️ This fix was applied by Edward Lu
🎓 Learn more about Self-Healing CI on nx.dev
Co-authored-by: edlu77 <edlu77@users.noreply.github.com>
LibbyUX
left a comment
LibbyUX
left a comment
There was a problem hiding this comment.
@edlu77 - The navigation button is approved!
One question on the navigation toggle button: Is it possible to keep the underline visible when it is selected?
The goal is to see the underline when a menu is open:
Inspiration: Figma's mega menu
3 participants
Uh oh!
There was an error while loading. Please reload this page.