[BurgerButton] Improvements and fixes
- Dominant language
- TypeScript
- Stars
- 247
- Forks
- 78
- Avg merge
- 14h 27m
- Merged PRs (30d)
- 15
Description
1. The component doesn't apply the user's `cx`. It seems, because it ignores it in [applyBurgerButtonMods](https://github.com/epam/UUI/blob/4a81478e95370ba96825f44c582ab333617ea3e9/uui/components/navigation/MainMenu/Burger/BurgerButton.tsx#L20-L30). Would be great if it does, because adding it via `rawProps.className` resets all the component's styles, so we need to wrap it in a `div` and adjust styles via CSS as `div > :global(.uui-button-box) {}`
2. The component accepts `indentLevel`, and even uses it in the `applyBurgerButtonMods`, but the [(S)CSS doesn't change the padding](https://github.com/epam/UUI/blob/4a81478e95370ba96825f44c582ab333617ea3e9/uui/components/navigation/MainMenu/Burger/BurgerButton.module.scss). Looks like a bug
3. The padding [is removed](https://github.com/epam/UUI/blob/4a81478e95370ba96825f44c582ab333617ea3e9/uui/components/navigation/MainMenu/Burger/BurgerButton.module.scss#L60-L62) when [`isDropdown` is `true`](https://github.com/epam/UUI/blob/4a81478e95370ba96825f44c582ab333617ea3e9/uui/components/navigation/MainMenu/Burger/BurgerButton.tsx#L27), which moves the item to the left side of the panel/screen, breaking the alignment with other items (not dropdowns). Looks like a bug
4. Add an example in the documentation with nested structure. Currently, we use a local `useState` to handle open/close state of expandable items, but maybe you come up with a better solution (or a new component for such dropdowns)
Contributor guide
Assessment
This issue has not been assessed yet.