Feature/Link element white version

[Kushagra-ag]

Need to implement the navbar of frontend-website which consists of white colored link elements (which turn blue on hover/focus).

Currently this is not possible in blade as the default color of Link component is #80B3F9 (light blue)

A variant prop is needed with a version of Link component that supports white coloured text.

[saurabhdaware]

@saurav12 I think we had discussed about the white links few days back right? for the places where background is dark? are we planning to add them on design?

[saurav12]

No, we will not be adding any such variants for now.

[saurabhdaware]

@Kushagra-ag I think you can use custom Link from your repo for now. Some of the designs might change with new redesign so we can take a look at this again then.

Just wondering, apart from visual things, do you see any other blockers to use Link component from blade for such usecases? Anything from functionality-side or any prop that you would need to implement such menu that doesn't exist right now?

[divyanshu013]

Could you please also check with your design team if the banking dark theme link can be used? This would be supported by Blade's link. Docs

[Kushagra-ag]

@saurav12 how do you propose to move ahead with migrating current version of navbar to blade. You have shared this figma with me but in here, you have used the heading text component for nav link elements (screenshot attached in issue description) instead of the link component.

[saurav12]

@Kushagra-ag This was done a while back. In the new version, there is a body token that is being used. I've made all those changes to Figma as well, please check.

Also, please check the Blade version. All the Chakra version has the screenshot attached as there is no point in re-creating everything for Chakra.

[Kushagra-ag]

@saurav12 saw the changes. There's some confusion I think. The body variant can be used with the Text component. Here we will need to use the Link component (to render nav links in the screenshot) which doesn't support body token.

[saurav12]

@Kushagra-ag The Link token also has 3 variants:

• Small (12px)
• Medium (14px)
• Large (16px)

Are you talking about some other variants?

[Kushagra-ag]

Discussed over call. Saurav will get back with some solution if possible without adding another variant.

Just wondering, apart from visual things, do you see any other blockers to use Link component from blade for such usecases? Anything from functionality-side or any prop that you would need to implement such menu that doesn't exist right now?

@saurabhdaware I do have one question for the button component For scenarios like this (login btn navbar) -

Can't use Link here, as this border appearance is not possible with Link component But we also do not support to or href attribute on the button component. What should be the way to go in this case to redirect the user to login page?

[saurav12]

Discussed over call. Saurav will get back with some solution if possible without adding another variant.

@Kushagra-ag You will need to create a custom component for this. This is not supported in Blade.

For scenarios like this (login btn navbar) -

I think in the new designs I proposed the secondary variant of the Button component to be used here.

[Kushagra-ag]

No, it doesn't matter which variant of button is used. The button component in blade doesn't support to or href attribute. My question is how do I redirect to another page using button component from blade (Is onClick the only option here?)

@saurabhdaware @divyanshu013

[saurabhdaware]

Created #1166 for tracking Button with href. This one can be used for tracking the white link only.

[kamleshchandnani]

@Kushagra-ag This is a custom case and pattern not generalized across the org. So if you want to migrate the existing chakra navbar you can easily create this using our tokens. This isn't just a link component because it has other things like when you hover the dropdown opens, similarly when you hover there's a dash that appears below Nav Bar Item. so semantically its not even link

[divyanshu013]

Closing this with regard to white link with blue dash that appears on hover. For other asks in the OP, created separate issues.

[iAmServerless]

@saurav12 @kamleshchandnani How can we ensure that designs are also restricted to design guideline if Blade do not permit changes?

[chaitanyadeorukhkar]

@saurav12 @kamleshchandnani How can we ensure that designs are also restricted to design guideline if Blade do not permit changes?

@iAmServerless Some of these are tool limitations. Figma allows designers to detach components, the fact that we've added restrictions on code helps us to stop such diversions from being implemented. We've also formed a designer group called Blade Advocates where we're constantly driving education efforts and getting components & their restrictions reviewed.