@telus-uds/components-base 3.27.0 → 3.28.1

package/src/Progress/ProgressBar.jsx

@@ -6,22 +6,23 @@ import ProgressBarBackground from './ProgressBarBackground'
 import { applyShadowToken, useThemeTokens } from '../ThemeProvider'
 import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils'
 import { MAX_PERCENT_VALUE, MIN_PERCENT_VALUE } from './constants'
+import ProgressContext from './ProgressContext'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
-const selectBarStyles = (
-  { backgroundColor, borderRadius, outlineWidth, outlineColor, shadow },
-  calculatedPercentage,
-  barPosition
-) => ({
-  backgroundColor,
-  borderRadius,
-  outlineWidth,
-  outlineColor,
-  ...applyShadowToken(shadow),
-  width: `${calculatedPercentage}%`,
-  left: `${barPosition}%`
-})
+const selectBarStyles = ({ themeTokens, calculatedPercentage, barPosition, layers }) => {
+  const { backgroundColor, borderRadius, outlineWidth, outlineColor, shadow } = themeTokens
+  return {
+    backgroundColor,
+    borderRadius,
+    outlineWidth,
+    outlineColor,
+    ...applyShadowToken(shadow),
+    width: `${calculatedPercentage}%`,
+    left: `${barPosition}%`,
+    ...(layers ? { position: 'absolute' } : {})
+  }
+}
 
 /**
  * The `ProgressBar` is a visual representation of linear progression.
@@ -70,6 +71,7 @@ const ProgressBar = React.forwardRef(
     },
     ref
   ) => {
+    const { layers } = React.useContext(ProgressContext)
     const { items, current } = offset
     let calculatedPercentage = percentage
     let barPosition = MIN_PERCENT_VALUE
@@ -104,7 +106,10 @@ const ProgressBar = React.forwardRef(
     return percentage > MIN_PERCENT_VALUE || items ? (
       <View
         ref={ref}
-        style={[staticStyles.bar, selectBarStyles(themeTokens, calculatedPercentage, barPosition)]}
+        style={[
+          staticStyles.bar,
+          selectBarStyles({ themeTokens, calculatedPercentage, barPosition, layers })
+        ]}
         {...selectedProps}
       >
         {children ?? <ProgressBarBackground variant={variant} />}

package/src/Progress/ProgressContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const ProgressContext = createContext({ layers: false })
+
+export default ProgressContext

package/src/SideNav/Item.jsx

@@ -29,9 +29,9 @@ function selectItemStyles({
 }) {
   return {
     backgroundColor,
-    borderTopColor: borderColor,
-    borderTopWidth: borderWidth,
-    borderTopStyle: borderStyle,
+    borderBottomColor: borderColor,
+    borderBottomWidth: borderWidth,
+    borderBottomStyle: borderStyle,
     paddingLeft,
     paddingRight,
     paddingTop,

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>
               )