mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-22 09:45:41 +00:00
4e1ce7bb11
This is a refactor of the components used in the sidebar. TL;DR: sidebar items now use the composition approach outlined here https://reactjs.org/docs/composition-vs-inheritance.html Before we had a container `Sidebar` component, which in turn had `SidebarItem` components inside. The issue was that depending on what item is inside, the information and UX displayed is different. Before this patch, we had an optional commponent, `DeviceSidebarItemAction` –which was featuring a "Connect" button, and was only rendered in the runtime sidebar items. However, we now need to display even more info, so continue to pass optional components to `SidebarItem` was tricky. What this patch does is to preserve `SidebarItem` and treat is a generic container of more specific content. This is passed via the `children` prop, which React automatically maps to the DOM content that we pass to that component (this is the same concept as slots in Web Components / Vue). `SidebarItem` now only contains the logic to select items in the sidebar and render them in `<li>` elements. Two new components, `SidebarFixedItem` (for our "static" pages) and `SidebarDeviceItem` are now the ones instancing `SidebarItem` with their specific contents. Differential Revision: https://phabricator.services.mozilla.com/D7704 --HG-- extra : moz-landing-system : lando |
||
|---|---|---|
| .. | ||
| client | ||
| docs | ||
| platform | ||
| server | ||
| shared | ||
| startup | ||
| .eslintrc.js | ||
| .eslintrc.mochitests.js | ||
| .eslintrc.xpcshell.js | ||
| CODE_OF_CONDUCT.md | ||
| moz.build | ||
| templates.mozbuild | ||