Unable to swizzle sidebar category caret icon

[MisterHarrow]

Edited by @slorber, see https://github.com/facebook/docusaurus/issues/7902#issuecomment-1209598343

---

Have you read the Contributing Guidelines on issues?

• [X] I have read the Contributing Guidelines on issues.

Prerequisites

• [X] I'm using the latest version of Docusaurus.
• [X] I have tried the npm run clear or yarn clear command.
• [X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• [X] I have tried creating a repro with https://new.docusaurus.io.
• [X] I have read the console error message carefully (if applicable).

Description

Changing the size of the IconArrow doesn't reflect on site.

Reproducible demo

No response

Steps to reproduce

1. Swizzle IconArrow
2. Change size of svg Width and height
3. IconArrow doesn't resize

Expected behavior

Expected IconArrow to resize according to size set in index.js

Actual behavior

Nothing, no change.

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• [ ] I'd be willing to fix this bug myself.

[Josh-Cena]

Are you on the latest version? IconArrow has been renamed to Icon/Arrow since beta.22. I tried yarn swizzle @docusaurus/theme-classic Icon/Arrow --eject and then changing width / height to 40, and it gets reflected on the site. But it's very weird: it only reflects the previous change, not the current one.

[MisterHarrow]

I am on the latest and I swizzled Icon/Arrow. I don't see any change at all, not the current nor previous. It just remains default.

User @homotechsual was able to reproduce this issue.

[slorber]

Try running docusaurus clear to see if something changes.

Otherwise submit a repro on v2.0.1

[MisterHarrow]

Screencast_2022-08-09_17:31:43.webm

Tried running the clear command to no effect. Please see repro.

[slorber]

Icon/Arrow is not the component you are looking for. This is Icon/Arrow

If you want to customize the sidebar category caret, we use CSS for that:

.menu__caret:before {
    background: var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem;
}

.menu__link--sublist-caret:after {
    background: var(--ifm-menu-link-sublist-icon) 50%/2rem 2rem;
}

I'll keep this issue open because we'd rather use a component for the sidebar category caret too, for consistency and to avoid this kind of confusion.

[Josh-Cena]

Ugh, if people actually try to figure out where the swizzled components are used...

[MisterHarrow]

Thanks for the help guys, I appreciate it.

How can I find out what each swizzled component corresponds to? Icon/arrow seemed semantically correct for what I was attempting to edit.

[Josh-Cena]

It's actually hard currently, and I've been thinking about what we can do. You would need to eject some higher-level components first, and see what subcomponents they each render. Ref. our docs:

Start with a higher-level component.

At the bare minimum we need to improve the component description. The current one is basically gibberish:

'The arrow icon component

[homotechsual]

Is there a sustainable way to generate component documentation in an automated fashion?

[Josh-Cena]

I have a very fancy solution—we can automatically wrap every component when we build our own site, and use a switch on our site which, when enabled, displays a tooltip of the component's name when you hover over every region.

[slorber]

We can assign a description close to each theme component, and we display those when you use docusaurus swizzle --list

The current description is not great. At the same time this is kind of a "design system component" and I'm not sure the description should contain too much info of how it is used in practice, although it would be convenient to mention it's used in the collapsible sidebar (but would you even understand it's the sidebar collapse button, and not the category collapse button 😅 )

I think we could just rename this component to something better? 🤷‍♂️

[homotechsual]

That would be pretty useful - wonder how much work that'd be to build/maintain long term though. (the Docusaurus website thing). Improving descriptions is a good idea - I suppose the idea behind icon/arrow was that it might be reused in lots of places and would be a fairly "generic" component.

[slorber]

I have a very fancy solution—we can automatically wrap every component when we build our own site, and use a switch on our site which, when enabled, displays a tooltip of the component's name when you hover over every region.

That's also what Storybooks are for 😄

https://nasa-jpl.github.io/explorer-1/?path=/docs/foundation-icons--arrow

Related issue: https://github.com/facebook/docusaurus/issues/3065

[Zenahr]

I have a very fancy solution—we can automatically wrap every component when we build our own site, and use a switch on our site which, when enabled, displays a tooltip of the component's name when you hover over every region.

Makes me think of Unreal Engine's Slate Explorer or React Native's Widget Inspector.