@telus-uds/components-base 3.26.0 → 3.28.0

package/src/SideNav/ItemsGroup.jsx

@@ -6,6 +6,12 @@ import ExpandCollapse from '../ExpandCollapse'
 import { getTokensPropType, variantProp, componentPropType, selectTokens } from '../utils'
 import { useThemeTokensCallback } from '../ThemeProvider'
 
+const selectPanelTokens = ({ borderWidth, borderColor, backgroundColor }) => ({
+  contentPanelBackgroundColor: backgroundColor,
+  borderBottomWidth: borderWidth,
+  borderColor
+})
+
 /**
  Expandable content areas for use within `SideNav`.
 
@@ -37,27 +43,30 @@ const ItemsGroup = React.forwardRef(
     const getItemAppearance = (appearance) => ({ ...getAppearance(appearance), type: 'parent' })
 
     const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant)
-    const getPanelTokens = (appearance) => {
-      const { panelBorderColor, ...itemsGroupTokens } = getGroupTokens(getAppearance(appearance))
-      const groupTokens = {
-        ...itemsGroupTokens,
-        borderWidth: 0,
-        marginBottom: 0
-      }
-      return selectTokens('ExpandCollapsePanel', groupTokens)
-    }
-
     const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant)
-    const getControlTokens = (appearance) =>
-      selectTokens('ExpandCollapseControl', {
-        ...getItemTokens(getItemAppearance(appearance)), // main style from SideNavItem
-        ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc
+
+    const getPanelTokens = (appearance) =>
+      selectTokens('ExpandCollapsePanel', {
+        ...staticTokens.panel,
+        ...getGroupTokens(getAppearance(appearance)),
+        ...selectPanelTokens(getItemTokens(getItemAppearance(appearance)))
       })
 
+    const getControlTokens = (appearance) => ({
+      ...selectTokens('ExpandCollapseControl', {
+        ...getItemTokens(getItemAppearance(appearance)), // main style from SideNavItem
+        ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc,
+      }),
+      ...staticTokens.control
+    })
+
     const controlContent = (controlState) => {
       const currentItemTokens = getItemTokens(getItemAppearance(controlState))
-
-      return <ItemContent tokens={currentItemTokens}>{label}</ItemContent>
+      return (
+        <ItemContent tokens={{ ...currentItemTokens, ...staticTokens.content }}>
+          {label}
+        </ItemContent>
+      )
     }
 
     return (
@@ -70,12 +79,23 @@ const ItemsGroup = React.forwardRef(
         controlTokens={getControlTokens}
         control={controlContent}
         accessibilityState={{ active: isActive }} // ExpandCollapse.Panel handles expanded state
+        disableMobileScrollBuffer
       >
         {children}
       </ExpandCollapse.Panel>
     )
   }
 )
+
+const staticTokens = {
+  panel: {
+    borderWidth: 0,
+    marginBottom: 0
+  },
+  control: { borderWidth: 0, textLine: null },
+  content: { accentWidth: 0 }
+}
+
 ItemsGroup.displayName = 'ItemsGroup'
 
 ItemsGroup.propTypes = {

package/src/SideNav/SideNav.jsx

@@ -14,14 +14,23 @@ import {
   viewProps
 } from '../utils'
 
-function selectBorderStyles(tokens) {
+const selectContainerTokens = ({ borderWidth, borderStyle, borderColor }) => {
   return {
-    borderBottomWidth: tokens.borderWidth,
-    borderBottomStyle: tokens.borderStyle,
-    borderBottomColor: tokens.borderColor
+    borderTopWidth: borderWidth,
+    borderStyle,
+    borderColor
   }
 }
 
+const selectItemTokens = (tokens = {}, isLastItem = false) => ({
+  ...tokens,
+  ...(isLastItem
+    ? {
+        borderWidth: 0
+      }
+    : {})
+})
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 /**
@@ -46,11 +55,11 @@ const SideNav = React.forwardRef(
       <ExpandCollapse
         ref={ref}
         maxOpen={accordion ? 1 : null}
-        style={selectBorderStyles(themeTokens)}
+        tokens={selectContainerTokens(themeTokens)}
         {...selectProps(rest)}
       >
         {({ openIds, onToggle }) => {
-          const renderItem = (item, index, groupId) => {
+          const renderItem = (item, index, groupId, isLastItem = false) => {
             const { itemId = `item-${index}`, onPress } = item.props
             const handlePress = (...args) => {
               onItemPress(...args)
@@ -64,7 +73,7 @@ const SideNav = React.forwardRef(
                 itemId={itemId}
                 groupId={groupId}
                 variant={groupId ? { ...variant, type: 'child' } : variant}
-                tokens={itemTokens}
+                tokens={selectItemTokens(itemTokens, isLastItem)}
                 isActive={isItemActive(itemId, groupId)}
                 onPress={handlePress}
               />
@@ -93,7 +102,12 @@ const SideNav = React.forwardRef(
                   onToggle={handleToggle}
                 >
                   {React.Children.map(child.props.children, (item, itemIndex) =>
-                    renderItem(item, itemIndex, groupId)
+                    renderItem(
+                      item,
+                      itemIndex,
+                      groupId,
+                      itemIndex === child.props.children.length - 1
+                    )
                   )}
                 </ItemsGroup>
               )