Disclosure width issues when placed in Flex

[hharnisc]

We're working on the NavigationItem component in the Sidebar and running into some issues with the Disclosure component. If we place the Disclosure component by itself it takes up the full space (as expected):

The markup looks like this:

const NavigationItem = ({ item }: NavigationItemType) => {
  return (
    <Disclosure>
      <DisclosureHeading
        as="div"
        variant="heading50"
        marginBottom="space0"
        style={{ fontWeight: "normal" }}
      >
        <Flex vAlignContent="center">
          <ProductTwilioOrgIcon decorative={true} size="sizeIcon20" />
          <Text as="span" paddingLeft="space30">
            {item.title}
          </Text>
          {!item.tags
            ? null
            : item.tags.map((tag) => (
                <Text
                  key={tag}
                  as="span"
                  fontStyle="italic"
                  color="colorTextLink"
                  paddingLeft="space30"
                >
                  {tag}
                </Text>
              ))}
        </Flex>
      </DisclosureHeading>
    </Disclosure>
  );
};

The NavigationItem calls for a design that as a dropdown menu item to the right of the disclosure:

When I try to place another component next to the Disclosure with Flex the Disclosure shrinks to the size of the content:

(I used chrome dev tools to highlight the size of the parent Flex component)

Code looks like this:

const NavigationItem = ({ item }: NavigationItemType) => {
  return (
    <Flex>
      <Disclosure>
        <DisclosureHeading
          as="div"
          variant="heading50"
          marginBottom="space0"
          style={{ fontWeight: "normal" }}
        >
          <Flex vAlignContent="center" grow>
            <ProductTwilioOrgIcon decorative={true} size="sizeIcon20" />
            <Text as="span" paddingLeft="space30">
              {item.title}
            </Text>
            {!item.tags
              ? null
              : item.tags.map((tag) => (
                  <Text
                    key={tag}
                    as="span"
                    fontStyle="italic"
                    color="colorTextLink"
                    paddingLeft="space30"
                  >
                    {tag}
                  </Text>
                ))}
          </Flex>
        </DisclosureHeading>
      </Disclosure>
    </Flex>
  );
};

After some investigation it looks like it might be due to the Header component as part of the DisclosureHeader: https://github.com/twilio-labs/paste/blob/main/packages/paste-core/components/disclosure/src/DisclosureHeading.tsx#L57-L61

If I use chrome dev tools to set width="100%" I can get the desired behavior:

I'm not sure what the best path forward would be, but a couple options might be to allow properties to be set on the Heading component separate from the Box in the DisclosureHeading or possibly just set the default width="100%" on the Heading if possible.

[hharnisc]

Digging a little deeper and adding DisclosureContent I think adding some level of customization to DisclosureHeader would solve our problem.

The following markup will solve our problem if we could set the width of the underlying Header component within DisclosureHeader to 100%:

const NavigationItem = ({ item, onSetPinnedProduct }: NavigationItemType) => {
  return (
    <Disclosure>
      <Flex>
        <Flex grow>
          <DisclosureHeading
            as="div"
            variant="heading50"
            marginBottom="space0"
            style={{ fontWeight: "normal" }}
          >
            <Flex vAlignContent="center">
              <ProductTwilioOrgIcon decorative={true} size="sizeIcon20" />
              <Text as="span" paddingLeft="space30">
                {item.title}
              </Text>
              {!item.tags
                ? null
                : item.tags.map((tag) => (
                    <Text
                      key={tag}
                      as="span"
                      fontStyle="italic"
                      color="colorTextLink"
                      paddingLeft="space30"
                    >
                      {tag}
                    </Text>
                  ))}
            </Flex>
          </DisclosureHeading>
        </Flex>
        <NavigationItemDropdown
          product={item}
          onSetPinnedProduct={onSetPinnedProduct}
        />
      </Flex>
      <DisclosureContent>
        {item.productPages.map((productPage) => (
          <NavigationSubItem
            productKey={item.key}
            subItem={productPage}
            key={productPage.key}
          />
        ))}
      </DisclosureContent>
    </Disclosure>
  );
};

[hharnisc]

Relevant Console changes: https://code.hq.twilio.com/twilio/console/pull/40

[kate-porter]

Hey @hharnisc - I'm sharing this with the eng team, and we'll followup with you in a bit. Thanks!

[hharnisc]

Thank you @katieporter 🙌 @SiTaggart also requested I create a self contained example in CodeSandbox. Here's a link: https://codesandbox.io/s/ecstatic-grothendieck-ztrsf?file=/src/index.tsx

Focusing on the Disclosure reveals the issue

[richbachman]

Hi @hharnisc. This may be an issue with us over-rotating on the styles in Flex. We're going to take a look and evaluate that more.

In the meantime, you should be to accomplish what you're looking for with Box. I've forked your sandbox and replaced the Flex components with Box: https://codesandbox.io/s/new-night-udlwz?file=/src/index.tsx

Let us know if we're missing anything.

[hharnisc]

Thank you @richbachman I'll give this a try and report back, but with the example it looks it should work. Thank you 🙌

[hharnisc]

To close the loop this resolved the issue -- will keep an eye out for other places where we've used Flex. Thanks again @richbachman and @katieporter

[kate-porter]

Thanks @hharnisc!

[kate-porter]

Thanks for reproducing that in the sandbox @hharnisc! Super helpful.

Sounds like the recommendation would be to use the Disclosure Primitive in this case—rather than the Disclosure Component—since this use case will require custom styling. I think @SiTaggart can jump in and put together a sandbox showing how that would work.