Icon based on Disclosure state

[kateschwarz]

Hi team! We have another implementation question regarding the Console Navigation. When the user has a bug, a pulsing red icon shows up on the monitor tab and moves to nested components as the user goes deeper.

1. User is on develop tab and there is a pulsing red icon on the monitor tab
2. User clicks on monitor tab, red icon should move to the Debugger menu disclosure
3. User clicks on Debugger disclosure which causes the disclosure to expand, red icon should move to nested menu item "Events"

I tried the following solution using disclosure state, but this causes the components to rerender and "jiggle" when the disclosure is opened or closed. Do you have any recommendations on the best way to accomplish this?

const MonitorNavitationItem = ({ navigationItem, hasBugs }) => {
  const disclosure = useDisclosureState();
  const isDebugger = navigationItem.key === "debugger";

  return (
    <Disclosure key={navigationItem.key} state={disclosure}>
      <DisclosureHeading as="div" variant="heading50">
        <Box>
          <Text as="span">{navigationItem.title}</Text>
          {isDebugger && hasBugs && !disclosure.visible ? (
            <DebuggerNotification />
          ) : null}
        </Box>
      </DisclosureHeading>
        <>
          {navigationItem.productPages.map((subItem: any) => {
            const isEventPage =
              navigationItem.key === "debugger" && subItem.key === "events";
            return (
              <DisclosureContent key={subItem.key}>
                  <Box>
                    <NavigationSubItem subItem={subItem} />
                    {isEventPage && hasBugs && disclosure.visible ? (
                      <DebuggerNotification />
                    ) : null}
                  </Box>
              </DisclosureContent>
            );
          })}
        </>
    </Disclosure>
  );
};

[kate-porter]

Hey @kateschwarz - I'll forward this along to our eng team and see if they have any suggestions. We'll report back soon!

[kateschwarz]

Thank you!

[SiTaggart]

Hi @kateschwarz, can you provide more information for us please? A Code sandbox using the paste starter template that demonstrates your issue would be super useful to show us whats going on.

[kateschwarz]

I created a code sandbox, but I'm not seeing the same issue in the sandbox that I'm seeing in Storybook...
Here's a link to the sandbox: https://codesandbox.io/s/dry-sun-rzelj?file=/src/index.js

Is it appropriate to use disclosure state this way? See src/App.js

I can also send you a screen recording of what's happening in Storybook.

[SiTaggart]

The Code Sandbox doesn't seem to load for me, just as an FYI

[kateschwarz]

Sorry about that. One of the files didn't save.

[kateschwarz]

https://codesandbox.io/s/mystifying-keller-j5nsr

[kateschwarz]

@SiTaggart After some investigation, I found the issue is outside of Paste. Sorry for the unnecessary discussion, and thank you for your help!

[SiTaggart]

All good, no worries! 👍