react-desktop
react-desktop copied to clipboard
Padding prop not having an impact on the W10 NavPaneItem
When working with NavPane and NavPaneItems, I noticed that the icons were offset from the hamburger button by quite a bit. In DevTools, it appears that the parent for the NavPaneItem had padding of 16px on the left and the right.
In the documentation, I noticed that the padding prop, I was unable to use this to reduce the padding issue above.
My current hack to get things to line up involves tagging your render function for the windows 10 NavPaneItem with a className and adding the following css.
/* Hack to fix weird nav-icon alignment */
/* Tacked on className on /keypunch-electron/node_modules/react-desktop/src/navPane/windows/pane/item/item.js*/
span.navItem {
padding-left: 5px !important;
}
This results in my icons lining up
I have yet to determine the cause, but just posting what i have seen thus far before i sign off for the day
The span style is defined here:
\NavPane\windows\Pane\style\windows10.js
The padding is defined in NavItem props and passed to Title using the StyleRoot.
This is where the span is, but as we can see the props are not being passed.
We could just pass the padding as another props to Title and see if that resolves the issue. That could tell us if its a style inheritance issue.
(https://github.com/FormidableLabs/radium/tree/master/docs/api#styleroot-component).