Hi @bhaveshraja, I'm firming up the nav section header (the collapsible group title in the sidebar, like "Inbox") and want your call on the defaults.
For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent and nobody has to think about it), or whether it should be adjustable depending on where it's used?
-
The caret. The header shows a small filled triangle that points down and spins around when the section opens. We're matching the Figma design with a solid triangle rather than the thin outline arrow the icon set ships. Should every section header use that same filled caret, at that size, opening the same way? And should that caret always be supplied by the design, or should it live inside the component so it's automatic?
-
The caret side. The caret sits on the leading edge and mirrors to the other side in right-to-left languages. Should it always sit on that edge and mirror like that?
-
The optional action on the end. Some headers have an extra button on the trailing edge (like a small add button) that's separate from the toggle, so tapping it doesn't open or close the section. When there is one, should it always sit on that trailing edge and always stay separate from the toggle?
-
The header sizing. The header stretches to fill its container width. Should it always stretch to fill the space it's given?
-
The label text. The title text styling (its size and color). Should that always look the same across every section header?
Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!
Hi @bhaveshraja, I'm firming up the nav section header (the collapsible group title in the sidebar, like "Inbox") and want your call on the defaults.
For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent and nobody has to think about it), or whether it should be adjustable depending on where it's used?
The caret. The header shows a small filled triangle that points down and spins around when the section opens. We're matching the Figma design with a solid triangle rather than the thin outline arrow the icon set ships. Should every section header use that same filled caret, at that size, opening the same way? And should that caret always be supplied by the design, or should it live inside the component so it's automatic?
The caret side. The caret sits on the leading edge and mirrors to the other side in right-to-left languages. Should it always sit on that edge and mirror like that?
The optional action on the end. Some headers have an extra button on the trailing edge (like a small add button) that's separate from the toggle, so tapping it doesn't open or close the section. When there is one, should it always sit on that trailing edge and always stay separate from the toggle?
The header sizing. The header stretches to fill its container width. Should it always stretch to fill the space it's given?
The label text. The title text styling (its size and color). Should that always look the same across every section header?
Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!