[Navigation]: adds Navigation component #450

AlanBreck · 2023-10-26T01:35:58Z

No description provided.

github-actions · 2023-10-26T01:42:10Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-20b3d6f870c718e74da21aba4f04a33a5f6ffabe/

Variables Diff

--- ./tokens/css/variables.old.css	2023-10-26 01:39:52.003110682 +0000
+++ ./tokens/css/variables.css	2023-10-26 01:39:04.970807681 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Oct 25 2023 21:15:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Oct 26 2023 01:39:04 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

fallaciousreasoning

Looks nice!

src/components/navigation/navigationHeader.svelte

src/components/navigation/navigationItem.svelte

github-actions · 2023-10-26T14:36:56Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-76a4a32dde751873c13e256fd08f9101102e611c/

Variables Diff

--- ./tokens/css/variables.old.css	2023-10-26 14:35:05.171382735 +0000
+++ ./tokens/css/variables.css	2023-10-26 14:34:27.771175611 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Oct 25 2023 21:15:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Oct 26 2023 14:34:27 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2023-11-02T03:03:07Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-c729d270181ecc7bd7fd05d8233c19870cf402d3/

Variables Diff

--- ./tokens/css/variables.old.css	2023-11-02 02:55:45.492408002 +0000
+++ ./tokens/css/variables.css	2023-11-02 02:55:12.164395947 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu Nov 02 2023 00:18:57 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Nov 02 2023 02:55:12 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2023-11-06T21:55:06Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-6dfb887d4ad2b046bddff58d5bca18c05e4e8c94/

Variables Diff

--- ./tokens/css/variables.old.css	2023-11-06 21:51:32.382007127 +0000
+++ ./tokens/css/variables.css	2023-11-06 21:51:06.466114288 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Nov 05 2023 20:24:20 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Nov 06 2023 21:51:06 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

src/components/icon/icon.svelte

github-actions · 2023-11-13T15:43:16Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-8271eca5e6bd6354e12365051d6f3c581d1d3c78/

Variables Diff

--- ./tokens/css/variables.old.css	2023-11-13 15:39:22.771525983 +0000
+++ ./tokens/css/variables.css	2023-11-13 15:38:56.179806046 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Nov 13 2023 00:29:48 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Nov 13 2023 15:38:56 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2023-11-17T19:27:43Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-d5943719f6bda43628d8212488240d5fc4531a91/

Variables Diff

--- ./tokens/css/variables.old.css	2023-11-17 19:24:17.401228121 +0000
+++ ./tokens/css/variables.css	2023-11-17 19:23:50.944983752 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri Nov 17 2023 00:59:55 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Nov 17 2023 19:23:50 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2023-11-27T18:17:23Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-648cb2220bf9f38905aa337a9cde39f370fa9e31/

Variables Diff

--- ./tokens/css/variables.old.css	2023-11-27 18:12:47.103199282 +0000
+++ ./tokens/css/variables.css	2023-11-27 18:12:20.590975298 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Nov 27 2023 16:25:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Nov 27 2023 18:12:20 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

AlanBreck · 2023-11-29T23:26:51Z

src/components/navigation/navigationItem.svelte

+    isCurrent = window.location.pathname === href
+  }
+
+  $: tag = href ? 'a' : ('button' as 'a' | 'button')


This is inexplicably broken when using with web components.

Broken because custom elements doesn't seem to like the double <svelte:elements> bit.

Svelte is a bit funky :/

To clarify, it's not broken in Svelte, but it is broken in WC land. Oh WC... 🙄

I'd like to merge and ignore this, though, as we don't have an immediate WC use case, but we do need it in a current Svelte project.

Hmm okay. It does make me feel a little weird landing it without working WC support, as a lot of the usages for these components are in Brave Core, which is solely WC based.

That said, I want to unblock you, so I guess we can land as is, if you're okay to come back and try and fix it when you have some time?

I'd prefer to avoid a situation where we have a bunch of functionality which only works in Svelte, and a bunch which only works in WCs.

I'm investigating a bit further, and it's almost as if the reactivity of href is lost when nested.

github-actions · 2023-11-29T23:34:18Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-a4ba78794460e48744961e053c80913e8e6f8df0/

Variables Diff

--- ./tokens/css/variables.old.css	2023-11-29 23:27:04.382575166 +0000
+++ ./tokens/css/variables.css	2023-11-29 23:26:37.446711396 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Nov 27 2023 16:25:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Nov 29 2023 23:26:37 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2023-11-30T18:59:42Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-686d4073f0cd58811e7f3e854ba1bf64438981da/

Variables Diff

--- ./tokens/css/variables.old.css	2023-11-30 18:51:15.275809417 +0000
+++ ./tokens/css/variables.css	2023-11-30 18:50:47.955909381 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Nov 27 2023 16:25:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Nov 30 2023 18:50:47 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2023-11-30T19:08:57Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-a509234f949b5db2b5f75f18f039b2b965b591d3/

Variables Diff

--- ./tokens/css/variables.old.css	2023-11-30 19:04:57.933146008 +0000
+++ ./tokens/css/variables.css	2023-11-30 19:04:31.789250390 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Nov 27 2023 16:25:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Nov 30 2023 19:04:31 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2023-12-01T04:14:11Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-b574065801a7a72c4928b01f9f9bcce58f4845c7/

Variables Diff

--- ./tokens/css/variables.old.css	2023-12-01 04:10:20.654625834 +0000
+++ ./tokens/css/variables.css	2023-12-01 04:09:54.126628767 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Nov 27 2023 16:25:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Dec 01 2023 04:09:54 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2023-12-01T04:23:18Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-ba9c605cd1ce7b88a4b4dd00727c137fbbcb35e3/

Variables Diff

--- ./tokens/css/variables.old.css	2023-12-01 04:14:59.470553444 +0000
+++ ./tokens/css/variables.css	2023-12-01 04:14:32.642477546 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Nov 27 2023 16:25:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Dec 01 2023 04:14:32 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2023-12-01T04:27:52Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-cb874b11ef0fd70822b3a34ac50bd40c5e7f7938/

Variables Diff

--- ./tokens/css/variables.old.css	2023-12-01 04:23:03.350963786 +0000
+++ ./tokens/css/variables.css	2023-12-01 04:22:36.414775654 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon Nov 27 2023 16:25:03 GMT+0000 (Coordinated Universal Time)
+ * Generated on Fri Dec 01 2023 04:22:36 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

fallaciousreasoning

LGTM

fallaciousreasoning · 2023-12-06T01:41:21Z

src/components/navigation/navigation.stories.svelte

+  title="Components/Navigation"
+  component={Navigation}
+  argTypes={{
+    kind: {


We should probably list all the args here (including CSS props)

The navigation component itself doesn't have any CSS props. Some of the sub components have more props/CSS props, but I'm not sure that we'd want to add them here?

Hmmm, that's a good point. It'd be good to have some way to figure out all the different knobs for the component, but I guess we can do that separately.

I'm maybe less familiar with Storybook than you are. Are there standard ways of handling this kind of thing?

src/components/navigation/navigation.stories.svelte

examples/plain-html/index.html

src/components/navigation/navigation.svelte

src/components/navigation/navigationItem.svelte

fallaciousreasoning · 2023-12-06T01:55:25Z

src/components/navigation/navigationMenu.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  let isSubnav = $$props.slot === 'subnav'


ooooh nice! Does this work in WebComponents land?

No, but that's what this is for: https://github.com/brave/leo/pull/450/files#diff-57281b32d31843b9f8f3688b85aeb8d876a8d64057458e54a349300fc7ae8a8aR20

src/components/navigation/navigationSeparator.svelte

This reverts commit 686d407.

github-actions · 2023-12-06T23:34:29Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-e7e4e0c1f0afed1bc9c7dc195d1223e45602d803/

Variables Diff

--- ./tokens/css/variables.old.css	2023-12-06 23:30:42.644314374 +0000
+++ ./tokens/css/variables.css	2023-12-06 23:30:15.336321167 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Dec 06 2023 19:57:56 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Dec 06 2023 23:30:15 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

github-actions · 2023-12-06T23:43:42Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-a773ec3860f2d0a2dd7adaf726db29579ed4da1a/

Variables Diff

--- ./tokens/css/variables.old.css	2023-12-06 23:35:24.066594622 +0000
+++ ./tokens/css/variables.css	2023-12-06 23:34:57.198626608 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Dec 06 2023 19:57:56 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Dec 06 2023 23:34:57 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

fallaciousreasoning

I don't want to block you (any more than I already have 😆), so I'm approving. It'd be great if we could get this into a state where it works in WebComponents & Svelte though.

Apart from that, this looks great!

github-actions · 2023-12-07T18:40:08Z

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://450.pr.nala.bravesoftware.com/
✅ Commit preview: https://450.pr.nala.bravesoftware.com/commit-e3fb6c1864f2ba9c51b450f15841d9ac44a34977/

Variables Diff

--- ./tokens/css/variables.old.css	2023-12-07 18:31:47.387543936 +0000
+++ ./tokens/css/variables.css	2023-12-07 18:31:20.951798989 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Dec 06 2023 19:57:56 GMT+0000 (Coordinated Universal Time)
+ * Generated on Thu Dec 07 2023 18:31:20 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {

AlanBreck had a problem deploying to staging October 26, 2023 01:36 — with GitHub Actions Failure

AlanBreck force-pushed the navigation-component branch from 5a6d92e to 20b3d6f Compare October 26, 2023 01:37

AlanBreck temporarily deployed to staging October 26, 2023 01:38 — with GitHub Actions Inactive

fallaciousreasoning reviewed Oct 26, 2023

View reviewed changes

AlanBreck temporarily deployed to staging October 26, 2023 14:33 — with GitHub Actions Inactive

AlanBreck force-pushed the navigation-component branch from 76a4a32 to c729d27 Compare November 2, 2023 02:54

AlanBreck force-pushed the navigation-component branch from c729d27 to 6dfb887 Compare November 6, 2023 21:50

AlanBreck commented Nov 11, 2023

View reviewed changes

src/components/icon/icon.svelte Outdated Show resolved Hide resolved

AlanBreck force-pushed the navigation-component branch from f0660f2 to 8271eca Compare November 13, 2023 15:38

AlanBreck force-pushed the navigation-component branch from 8271eca to d594371 Compare November 17, 2023 19:23

AlanBreck force-pushed the navigation-component branch from d594371 to 648cb22 Compare November 27, 2023 18:11

AlanBreck changed the title ~~WIP: adds Navigation component~~ adds Navigation component Nov 29, 2023

AlanBreck commented Nov 29, 2023

View reviewed changes

AlanBreck changed the title ~~adds Navigation component~~ [Navigation]: adds Navigation component Nov 29, 2023

AlanBreck marked this pull request as ready for review November 29, 2023 23:27

AlanBreck requested a review from petemill as a code owner November 29, 2023 23:27

AlanBreck force-pushed the navigation-component branch from b574065 to ba9c605 Compare December 1, 2023 04:13

AlanBreck requested a review from fallaciousreasoning December 5, 2023 20:36

fallaciousreasoning reviewed Dec 6, 2023

View reviewed changes

AlanBreck added 10 commits December 6, 2023 16:02

WIP: adds Navigation component

818e457

changes icon size for navigationItem

a5baa99

addresses PR feedback for navigation

cf03915

adds navigationSeparator and fixes web component compat

af0c329

removes width: 100% from navigationItem

961d27e

Revert "removes width: 100% from navigationItem"

1397e95

This reverts commit 686d407.

adds border-box sizing to navigationItem

f45d34d

removes unnecessary file

8df9bab

adds note about web component issue

2d691ba

addresses PR feedback

e7e4e0c

AlanBreck force-pushed the navigation-component branch from cb874b1 to e7e4e0c Compare December 6, 2023 23:29

addresses PR feedback

a773ec3

AlanBreck requested a review from fallaciousreasoning December 6, 2023 23:35

fallaciousreasoning approved these changes Dec 6, 2023

View reviewed changes

fixes incorrect default for outsideList prop

e3fb6c1

AlanBreck merged commit 1542bde into main Dec 7, 2023
6 checks passed

AlanBreck deleted the navigation-component branch December 7, 2023 18:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Navigation]: adds Navigation component #450

[Navigation]: adds Navigation component #450

AlanBreck commented Oct 26, 2023

github-actions bot commented Oct 26, 2023

fallaciousreasoning left a comment

github-actions bot commented Oct 26, 2023

github-actions bot commented Nov 2, 2023

github-actions bot commented Nov 6, 2023

github-actions bot commented Nov 13, 2023

github-actions bot commented Nov 17, 2023

github-actions bot commented Nov 27, 2023

AlanBreck Nov 29, 2023

AlanBreck Nov 30, 2023

fallaciousreasoning Dec 6, 2023

AlanBreck Dec 6, 2023

AlanBreck Dec 6, 2023

fallaciousreasoning Dec 6, 2023

AlanBreck Dec 7, 2023

github-actions bot commented Nov 29, 2023

github-actions bot commented Nov 30, 2023

github-actions bot commented Nov 30, 2023

github-actions bot commented Dec 1, 2023

github-actions bot commented Dec 1, 2023

github-actions bot commented Dec 1, 2023

fallaciousreasoning left a comment

fallaciousreasoning Dec 6, 2023

AlanBreck Dec 6, 2023

fallaciousreasoning Dec 6, 2023

AlanBreck Dec 7, 2023

fallaciousreasoning Dec 6, 2023

AlanBreck Dec 6, 2023

github-actions bot commented Dec 6, 2023

github-actions bot commented Dec 6, 2023

fallaciousreasoning left a comment

github-actions bot commented Dec 7, 2023

		@@ -0,0 +1,25 @@
		<script lang="ts">
		let isSubnav = $$props.slot === 'subnav'

[Navigation]: adds Navigation component #450

[Navigation]: adds Navigation component #450

Conversation

AlanBreck commented Oct 26, 2023

github-actions bot commented Oct 26, 2023

fallaciousreasoning left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 26, 2023

github-actions bot commented Nov 2, 2023

github-actions bot commented Nov 6, 2023

github-actions bot commented Nov 13, 2023

github-actions bot commented Nov 17, 2023

github-actions bot commented Nov 27, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Nov 29, 2023

github-actions bot commented Nov 30, 2023

github-actions bot commented Nov 30, 2023

github-actions bot commented Dec 1, 2023

github-actions bot commented Dec 1, 2023

github-actions bot commented Dec 1, 2023

fallaciousreasoning left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Dec 6, 2023

github-actions bot commented Dec 6, 2023

fallaciousreasoning left a comment

Choose a reason for hiding this comment

github-actions bot commented Dec 7, 2023