Size Change: +216 B (0%)

Total Size: 1.06 MB

_{compressed-size-action}

The chevron icons need to be better aligned with the cross icon (I've added green guidelines in the screenshots to showcase this better)
The text used for the menu items is smaller and darker compared to what we currently have in production

I'm not sure if it's necessary to align with what we have in trunk, I think the best solution here would be to design it in the most "common" way. Meaning, I shouldn't have to customize the look and feel and spacing in the sidebar itself, but rather use the built-in styles that come from the components. So if there are customization to be made, we should make sure that they are generic enough to be applied to the root components themselves. (still in the same mindset that as a consumer I should compose components and not customize them)

The chevron icons need to be better aligned with the cross icon (I've added green guidelines in the screenshots to showcase this better)
The text used for the menu items is smaller and darker compared to what we currently have in production

I'm not sure if it's necessary to align with what we have in trunk, I think the best solution here would be to design it in the most "common" way. Meaning, I shouldn't have to customize the look and feel and spacing in the sidebar itself, but rather use the built-in styles that come from the components. So if there are customization to be made, we should make sure that they are generic enough to be applied to the root components themselves. (still in the same mindset that as a consumer I should compose components and not customize them)

That makes sense — we should then make sure that the default styles provided by the components match our needs, or if they need any tweaking.

Also, it would probably be a good idea to wrap the text inside a Truncate component to make sure that the text stays on one line also for more verbose languages (as done in this Storybook example)

I think the best solution here would be to design it in the most "common" way. Meaning, I shouldn't have to customize the look and feel and spacing in the sidebar itself, but rather use the built-in styles that come from the components. So if there are customization to be made, we should make sure that they are generic enough to be applied to the root components themselves.

What do you mean here? If I understand correctly you're saying that if I want to style things a bit differently, I should be able to pass something like isTertiary for buttons?

What do you mean here? If I understand correctly you're saying that if I want to style things a bit differently, I should be able to pass something like isTertiary for buttons?

Yes, that's exactly what I mean. Ideally we shouldn't have to customize things other than with using the regular props offered by the UI components. This has several advantages:

• Make sure our base UI components compose well enough.
• Simplify maintenance as the intent is that future changes for components won't affect consumers much as they solely rely on props and since components compose well, the designs won't break. (at least that's the theory :P)