fix: review findings in css and js

packages/uikit-workshop/src/sass/scss/05-themes/_sidebar-theme.scss

@@ -22,6 +22,7 @@
       flex-direction: column; /* 3 */
       border-bottom: 0; /* 4 */
       justify-content: space-between;
+      --nav-item-height: 2.5rem;
     }
 
     /**

packages/uikit-workshop/src/scripts/components/pl-nav/nav-dropdown.scss

@@ -5,17 +5,17 @@
  * 1) On larger screens, display as dropdowns that
  *    hangs over the header
  */
- .pl-c-nav__dropdown {
+.pl-c-nav__dropdown {
   @media all and (min-width: $pl-bp-med) {
     position: absolute;
     top: 100%; /* 1 */
     left: 0;
-    min-width: 12rem;
+    min-width: 14rem;
     border-radius: $pl-border-radius-med;
     border-style: solid;
     border-width: 1px;
-    box-shadow: 0 2px 5px rgba(0,0,0,.1);
-    transition: all .2s ease;
+    box-shadow: 0 2px 5px rgba($pl-color-black, 0.1);
+    transition: all 0.2s ease;
     transform: translateY(-12px);
     z-index: 1;
     transition: all $pl-animate-quick ease-out;
@@ -26,11 +26,11 @@
   }
 
   .pl-c-body--theme-light & {
-    border-color: rgba($pl-color-black, .2);
+    border-color: rgba($pl-color-black, 0.2);
   }
 
   .pl-c-body--theme-dark & {
-    border-color: rgba($pl-color-white, .2);
+    border-color: rgba($pl-color-white, 0.2);
   }
 
   .pl-c-body--theme-sidebar & {

packages/uikit-workshop/src/scripts/components/pl-nav/nav-link.js

@@ -1,7 +1,7 @@
 import { h, Fragment } from 'preact';
 const classNames = require('classnames');
 
-export const NavLink = props => {
+export const NavLink = (props) => {
   const classes = classNames('pl-c-nav__link', {
     [`pl-c-nav__link--level-${props.level}`]: props.level !== undefined,
     'pl-c-nav__link--icon-only': props.iconOnly,

packages/uikit-workshop/src/scripts/components/pl-nav/nav-link.scss

@@ -3,7 +3,7 @@
 /**
  * Nav link
  */
- .pl-c-nav__link {
+.pl-c-nav__link {
   @include linkStyle;
   border: 0;
   text-align: left;
@@ -20,8 +20,9 @@
   padding: 0.6rem 0.6rem;
   flex-basis: calc(100% - 2.5rem);
   position: relative;
+  height: var(--nav-item-height, auto);
 
-  &:after {
+  &::after {
     content: '';
     pointer-events: none;
     opacity: 0;
@@ -35,11 +36,11 @@
     display: block;
   }
 
-  &:hover:after {
+  &:hover::after {
     opacity: 0.1;
   }
 
-  &:focus:after {
+  &:focus::after {
     opacity: 0.1;
   }
 
@@ -59,13 +60,13 @@
   }
 
   &--level-1 {
-    padding-left: $pl-space + ($pl-space / 2);
+    padding-left: $pl-space + ($pl-space * 0.5);
     font-size: 0.85rem;
   }
 
   &--level-2 {
-    font-size: 0.78rem;
-    padding-left: $pl-space * 2 + ($pl-space / 4);
+    font-size: 0.825rem;
+    padding-left: $pl-space * 2 + ($pl-space * 0.25);
   }
 
   // top level nav links (categories)
@@ -180,10 +181,8 @@
   }
 
   &:hover {
-    // background-color: transparent !important;
-
-    &:after,
-    &:focus:after {
+    &::after,
+    &:focus::after {
       opacity: 0.1;
     }
   }

packages/uikit-workshop/src/scripts/components/pl-nav/nav-list.js

@@ -2,28 +2,28 @@
 import { h, Fragment } from 'preact';
 import { NavLink } from './nav-link';
 
-export const NavList = props => {
+export const NavList = (props) => {
   const { children, category, elem } = props;
 
   const nonViewAllItems = elem.noViewAll
-    ? children.filter(item => item.patternName !== 'View All')
+    ? children.filter((item) => item.patternName !== 'View All')
     : children.filter(
-        item =>
+        (item) =>
           item.patternName !== 'View All' && !item.patternName.includes(' Docs')
       );
   const viewAllItems = elem.noViewAll
     ? []
-    : children.filter(item => item.patternName === 'View All');
+    : children.filter((item) => item.patternName === 'View All');
 
   return (
     <li className={`pl-c-nav__list-item`}>
       {viewAllItems.length > 0 ? (
-        viewAllItems.map(patternSubtypeItem => (
+        viewAllItems.map((patternSubtypeItem) => (
           <>
             <NavLink
               href={`patterns/${patternSubtypeItem.patternPath}`}
               level={1}
-              onClick={e =>
+              onClick={(e) =>
                 elem.handleClick(e, patternSubtypeItem.patternPartial)
               }
               state={patternSubtypeItem.patternState}
@@ -40,7 +40,7 @@ export const NavList = props => {
                 iconName={'arrow-down'}
                 aria-controls={category}
                 level={1}
-                onClick={e => elem.iconOnlyPanelToggle(e.target)}
+                onClick={(e) => elem.iconOnlyPanelToggle(e.target)}
               >
                 {category}
               </NavLink>
@@ -52,7 +52,7 @@ export const NavList = props => {
           level={2}
           iconName={'arrow-down'}
           aria-controls={category}
-          onClick={e => elem.panelToggle(e.target)}
+          onClick={(e) => elem.panelToggle(e.target)}
         >
           {category}
         </NavLink>
@@ -64,12 +64,12 @@ export const NavList = props => {
           id={category}
           className={`pl-c-nav__list pl-c-nav__accordion pl-js-nav-accordion`}
         >
-          {nonViewAllItems.map(patternSubtypeItem => (
+          {nonViewAllItems.map((patternSubtypeItem) => (
             <li class="pl-c-nav__list-item">
               <NavLink
                 href={`patterns/${patternSubtypeItem.patternPath}`}
                 level={2}
-                onClick={e =>
+                onClick={(e) =>
                   elem.handleClick(e, patternSubtypeItem.patternPartial)
                 }
                 data-patternpartial={patternSubtypeItem.patternPartial}

packages/uikit-workshop/src/scripts/components/pl-nav/nav-list.scss

@@ -6,7 +6,7 @@
  * 2) display as a horizontal list on larger screens
  * 3) On small screens, move the nav list after the typeahead form field
  */
- .pl-c-nav__list {
+.pl-c-nav__list {
   z-index: 1;
   margin: 0;
   padding: 0;

packages/uikit-workshop/src/scripts/components/pl-nav/nav.scss

@@ -76,7 +76,8 @@ pl-nav {
       transform: translateX(-100%);
       transition: all 0.3s ease;
       opacity: 0;
-      box-shadow: 0 3px 6px rgba(21,22,25,.16), 0 3px 6px rgba(21,22,25,.23);
+      box-shadow: 0 3px 6px rgba(21, 22, 25, 0.16),
+        0 3px 6px rgba(21, 22, 25, 0.23);
       visibility: visible;
 
       &.pl-is-active {

packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.scss

@@ -37,7 +37,7 @@ pl-drawer {
   overflow: hidden;
   max-width: 100vw;
 
-  @supports(padding: max(0px)) {
+  @supports (padding: max(0px)) {
     padding-left: calc(env(safe-area-inset-left) / 2);
     padding-right: calc(env(safe-area-inset-right) / 2);
   }
@@ -77,7 +77,9 @@ pl-drawer {
   display: flex;
   width: 100%;
   overflow: hidden; // needed for IE 11 so scrollbars show up
-  max-height: calc(100% - 32px - 1.5rem); // workaround to fix drawer content collapsing. @todo: remove once larger tabs refactor PR'd
+  max-height: calc(
+    100% - 32px - 1.5rem
+  ); // workaround to fix drawer content collapsing. @todo: remove once larger tabs refactor PR'd
 }
 
 .pl-c-drawer__toolbar {
@@ -92,7 +94,7 @@ pl-drawer {
   flex-grow: 1;
   overflow: hidden; // needed for IE 11 so scrollbars show up
 
-  @supports (padding: env(safe-area-inset-top)){
+  @supports (padding: env(safe-area-inset-top)) {
     padding-right: calc(env(safe-area-inset-right) - 0.9rem);
   }
 }
@@ -179,15 +181,15 @@ pl-drawer {
     pointer-events: none;
     display: block;
     background-color: currentColor;
-    transition: .3s cubic-bezier(.25,.8,.25,1);
+    transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   }
 
-  &:hover:after {
+  &:hover::after {
     opacity: 0.1;
   }
 
-  &:focus:after,
-  &:active:after {
+  &:focus::after,
+  &:active::after {
     opacity: 0.2;
   }
 }
@@ -197,7 +199,7 @@ pl-drawer {
   height: 100%;
   fill: currentColor;
   z-index: 100;
-  transform: scale(3,1) rotate(90deg);
+  transform: scale(3, 1) rotate(90deg);
 }
 
 /**
@@ -213,4 +215,3 @@ pl-drawer {
   flex-shrink: 0; // needed for IE 11
   align-self: center; // valign in IE 11
 }
-