Merge pull request #279 from puppetlabs/features/add-container-element-sidebar-item

Add `containerElement` prop to Sidebar.Item

Author: vine77

CHANGELOG.md

@@ -1,6 +1,7 @@
-# 5.22.0 (2020-08-12)
+# Next
 
 - [Copy] Add Copy component (by [@nkanderson](https://github.com/nkanderson) in [#270](https://github.com/puppetlabs/design-system/pull/270))
+- [Sidebar] Add `containerElement` prop to Sidebar.Item (by [@vine77](https://github.com/vine77) in [#279](https://github.com/puppetlabs/design-system/pull/279))
 
 # 5.21.1 (2020-06-30)
 

packages/design-system-website/styleguideComponents/ComponentsListRenderer.jsx

@@ -31,6 +31,7 @@ export function ComponentsListRenderer({ items: allItems, ...rest }) {
 
       return (
         <Sidebar.Item
+          containerElement="div"
           active={isItemSelected}
           href={href}
           key={href}

packages/design-system-website/styleguideComponents/TableOfContentsRenderer.scss

@@ -1,12 +1,7 @@
 @import '~@puppet/sass-variables/index';
 
-.rc-sidebar-navigation {
-  margin-top: 0;
-  padding-top: 0;
-}
-
 .pds-filter {
-  margin: 4 * $puppet-common-spacing-base;
+  margin-bottom: 4 * $puppet-common-spacing-base;
 
   .rc-input {
     background-color: $puppet-n950;

packages/react-components/source/react/library/sidebar/Sidebar.md

@@ -29,9 +29,13 @@ import Badge from '../badge';
       href="/"
     />
     <Sidebar.Navigation>
-      <Sidebar.Section>
-        <Sidebar.Item onClick={() => {}} title="Home" icon="home" active />
-      </Sidebar.Section>
+      <Sidebar.Item
+        onClick={() => {}}
+        title="Home"
+        icon="home"
+        active
+        containerElement="div"
+      />
       <Sidebar.Section label="reports">
         <Sidebar.Item onClick={() => {}} title="Code" icon="code" />
         <Sidebar.Item onClick={() => {}} title="Build" icon="build" count={5} />
@@ -82,9 +86,13 @@ Add the `minimized` boolean prop to Sidebar to render a narrow version with icon
       ariaLabel="Return to the home page"
     />
     <Sidebar.Navigation>
-      <Sidebar.Section>
-        <Sidebar.Item onClick={() => {}} title="Home" icon="home" active />
-      </Sidebar.Section>
+      <Sidebar.Item
+        onClick={() => {}}
+        title="Home"
+        icon="home"
+        active
+        containerElement="div"
+      />
       <Sidebar.Section label="reports">
         <Sidebar.Item onClick={() => {}} title="Code" icon="code" />
         <Sidebar.Item onClick={() => {}} title="Build" icon="build" />

packages/react-components/source/react/library/sidebar/SidebarItem.js

@@ -7,6 +7,7 @@ import TooltipHoverArea from '../tooltips/TooltipHoverArea';
 
 const propTypes = {
   as: PropTypes.elementType,
+  containerElement: PropTypes.elementType,
   title: PropTypes.string.isRequired,
   icon: PropTypes.string,
   className: PropTypes.string,
@@ -18,6 +19,7 @@ const propTypes = {
 
 const defaultProps = {
   as: 'a',
+  containerElement: 'li',
   icon: '',
   className: '',
   minimized: false,
@@ -36,6 +38,7 @@ const SidebarItem = props => {
     count,
     badge: badgeProp,
     as: Component,
+    containerElement: ContainerComponent,
     ...rest
   } = props;
 
@@ -96,7 +99,7 @@ const SidebarItem = props => {
     </Component>
   );
 
-  return <li className={classNames}>{link}</li>;
+  return <ContainerComponent className={classNames}>{link}</ContainerComponent>;
 };
 
 SidebarItem.propTypes = propTypes;

packages/react-components/source/scss/library/components/_sidebar.scss

@@ -22,7 +22,7 @@ $puppet-sidebar-item-color-active: $puppet-brand-primary !default;
 $puppet-sidebar-item-font-size: 16px !default;
 $puppet-sidebar-item-font-weight: $puppet-type-weight-normal !default;
 $puppet-sidebar-item-line-height: 40px !default;
-$puppet-sidebar-item-margin: 2px 16px !default;
+$puppet-sidebar-item-margin: 2px 0 !default;
 $puppet-sidebar-item-padding: 0 12px !default;
 $puppet-sidebar-item-title-padding: 4px 0 !default;
 
@@ -42,7 +42,7 @@ $puppet-sidebar-label-font-size: 11px !default;
 $puppet-sidebar-label-line-height: $puppet-common-spacing-base * 2 !default;
 $puppet-sidebar-label-margin: $puppet-common-spacing-base * 6 0
   $puppet-common-spacing-base * 2 !default;
-$puppet-sidebar-label-padding: 0 $puppet-common-spacing-base * 6 0 !default;
+$puppet-sidebar-label-padding: 0 $puppet-common-spacing-base * 2 0 !default;
 $puppet-sidebar-label-text-transform: uppercase !default;
 
 $puppet-sidebar-item-accordion-font-size: 14px !default;
@@ -97,7 +97,7 @@ $puppet-sidebar-footer-meta-icon: 32px;
   flex: 1;
   height: inherit;
   overflow: auto;
-  padding: 16px 0;
+  padding: 16px;
 }
 
 // Sidebar section & items