Have just a search Icon using the Nav Link (no text) in my Nested Nav and I notice the inline position is slightly off. Looking at the DOM I see that the SPAN for the text is still included even though it has no text in it. Manually removing the text SPAN in the DOM fixes the issue.
So ideally if the nav link has no text it shouldn’t include the empty SPAN tag.
We add a check that checks if the text inside the link is empty (a bit absurd since it’s a text link element, but ok). Alternatively, you could use the icon element, right?
Thanks. The icon span disappears if it is not used so it makes sense for the text as well since it is a Nav Link.
To me the Text Link (or what it is called in the Nested Nav Structure Panel Nav Link) is the best option since it was made to be used within the Nav. Maybe the Text Link Element should be renamed to Nav Link?
Alternatively, you could use the icon element, right?
Or the SVG element or the Basic Text but they all got their little intricacies or issues.
For example:
The SVG element doesn’t have built in aria label stuff or link… (which obviously I can manually add)
The Icon element is missing the focus ring when it is in the Nav and you navigate to it by keyboard (yes I know I could manually add it via custom CSS).
Bricks has a lot of similar elements that do things slightly differently and have features missing from each other.
I think ideally to make things less confusing at some point Bricks should combine the Text Link and Basic Text together and the Icon and SVG together (and maybe even the image) since they all are really similar…