Console Navigation Sidebar Components

[hbatres]

Looking at the designs, we were wondering what type of component was in mind for the "Explore Products" link. Is this part of the Menu as a MenuItem or is it separate link/anchor?

[serifluous]

Hey, @hbatres! Do you mean "Menu" as in part of the navigation list? We have a Paste Menu/MenuItem component, so I just want to make sure we're talking about the same thing.

And yep, "Explore Products" is meant to be a link in the same way that the other nav items are, with the same focus/hover/selected states and behavior.

[hbatres]

I meant the Navigation list as the Menu and Explore Products as a MenuItem of that Menu, referring to the Paste Menu/MenuItem components. I am trying to see if "Explore Products" is an Anchor or a MenuItem? I originally thought it was an Anchor component but after looking at the MenuItem component I thought that could also be it.

[SiTaggart]

For this specifically we'd just recommend creating a custom composition using the Box primitive probably (You don't need any specific text styles, just text decoration on hover).

It can be achieved by doing something like

<Box
  as="a"
  href="/link/to/the/page"
  _hover={{
    ...
  }}
  _focus={{
    ...
  }} 
>
  Explore Products
  <PlusIcon />
</Box>

I'm fairly confident Box will do everything you need for this. If not, just reach out again and we'll see what we need to add.

[hbatres]

Is there a way to change the default appearance of the link? When it's not hovered or focused, there should be no underline, only when its hovered or focused should it be underlined.

[SiTaggart]

I'm not entirely sure I follow what your question is here. Would it be possible to post the snippet code you've written to create the navigation item composition, a screen shot of actual rendered result and a screen shot of the intended result, so I can follow along?

[hharnisc]

Hey @SiTaggart going to take a crack at this one today. I'll drop findings and feedback after getting bit deeper into the problem 😄

[hharnisc]

Hey @SiTaggart I tried a few different ways to implement the spec we were given for the Sidebar. The following approach works but not sure if this is the best way to go:

https://code.hq.twilio.com/twilio/console/pull/29/files#diff-a6d06ff156faa73cda9da98d7d5b5d84

I ended up bringing in parts of the Anchor component to build our own custom version of it. (I opened a related discussion about some if the exports we needed to consume to make this work: #601)

A few things I tried that didn't work:

• passing in custom css via the css prop (like how styled system works: https://styled-system.com/css/)
• setting the style prop with the customizations and using onFocus to transition the style (these always seemed to get overridden)
• The Box approach you mentioned: Console Navigation Sidebar Components #596 (comment) didn't work because TS complained about setting the href prop on Box

[SiTaggart]

OK this is useful feedback. We definitely intend on you being able to use Box and Text to build these things. You're approach is totally fine, and the reason we export the styling library is so that if you really need to get into it you can use the same tools we use, but it's not some I would expect you to have to do. Like, at all. So feedback on which bits are missing from Box and Text is super useful so we can plug the holes.

For some of the bullet points I'll address them one by one:

passing in custom css via the css prop

Kind of intended, we only want folks styling using the styling props and tokens we provide. A fully open css prop would allow just arbitrary custom CSS and we're being pretty strict about that self imposed constraint for now.

setting the style prop with the customizations and using onFocus to transition the style

Also intended, but I am interested to hear what you're trying to do and how _focus styles on Box or Text doesn't support the use case. Some extra deets here would be useful.

The Box approach you mentioned: #596 (comment) didn't work because TS complained about setting the href prop on Box

Yeah, that's potentially my bad, I forgot that it's Text that supports href and not Box. Is there anything in the design that using Text would support you here to prevent you from having to use the styling libs?

Adding props is fairly trivial, 5 minute tasks so we should be able to unblock thing pretty quick.

[hharnisc]

Looks like we're hitting the expected guardrails here!

The onFocus approach was updating some local state used in the style prop. No big deal there, was hoping to avoid having to do that anyways.

I spent a bit more time with Text and almost have it working to spec:

import * as React from "react";
import { Text, TextProps } from "@twilio-paste/core";

interface SidebarAnchorProps extends Omit<TextProps, "as"> {
  as?: TextProps["as"];
}

const SidebarAnchor = (props: SidebarAnchorProps) => (
  <Text
    as="a"
    textDecoration="none"
    _focus={{ textDecoration: "underline" }}
    _hover={{ textDecoration: "underline" }}
    {...props}
  />
);

SidebarAnchor.displayName = "SidebarAnchor";

export { SidebarAnchor };

The only thing missing matching the outline style on focus. I've tried this but doesn't quite work, it removes the outline but doesn't set the box shadow on focus:

const SidebarAnchor = (props: SidebarAnchorProps) => (
  <Text
    as="a"
    textDecoration="none"
    style={{ outline: "none" }}
    _focus={{
      textDecoration: "underline",
      style: { boxShadow: "shadowFocus" },
    }}
    _hover={{ textDecoration: "underline" }}
    {...props}
  />
);

[hharnisc]

This works but fails TS checks 'boxShadow' does not exist in type 'BaseTextProps':

const SidebarAnchor = (props: SidebarAnchorProps) => (
  <Text
    as="a"
    textDecoration="none"
    style={{ outline: "none" }}
    _focus={{
      textDecoration: "underline",
      boxShadow: "shadowFocus",
    }}
    _active={{
      textDecoration: "underline",
      boxShadow: "shadowFocus",
    }}
    _hover={{ textDecoration: "underline" }}
    {...props}
  />
);

Is there anything in the design that using Text would support you here to prevent you from having to use the styling libs?

Adding boxShadow would be a good one and gives us a pretty solid path forward!

[SiTaggart]

I can probably create a ticket for that for our next sprint (Wednesday) as it's pretty trivial to add. If you don't mind @ts-ignore'ing it for now, you'll just get it in the next update to Text.

[hharnisc]

That works for us! We'll move forward with the @ts-ignore and would appreciate a ping when you've got that rolled out. Thank you @SiTaggart 🙌

[SiTaggart]

To round this out we're adding a bunch of props to Box including Typography styling.

This way you'll be able to create the navigation items using a composition of Box Just let us know if there are any props missing from the typings once the Box updates get merged.

This can be tracked in this PR #616