@telus-uds/components-base 3.17.1 → 3.19.0

package/lib/esm/Modal/ModalContent.js

@@ -28,7 +28,8 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     cancelButtonText,
     cancelButtonType: CancelButton = TextButton,
     children,
-    onCancel
+    onCancel,
+    footer
   } = _ref;
   const viewport = useViewport();
   const {
@@ -142,7 +143,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       children: /*#__PURE__*/_jsx(Typography, {
         children: bodyText
       })
-    }), children, (hasConfirmButton || hasCancelButton) && /*#__PURE__*/_jsxs(View, {
+    }), children, (hasConfirmButton || hasCancelButton) && !footer && /*#__PURE__*/_jsxs(View, {
       style: [selectFooterContainerStyles({
         ...themeTokens,
         hasBorder: isContentOverflowing
@@ -164,7 +165,7 @@ const ModalContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           children: cancelButtonText
         })
       }) : null]
-    })]
+    }), footer]
   });
 });
 ModalContent.displayName = 'ModalContent';
@@ -193,6 +194,7 @@ ModalContent.propTypes = {
   cancelButtonType: PropTypes.elementType,
   // TODO: figure out a way of passing an icon to the TextButton
   children: PropTypes.node,
-  onCancel: PropTypes.func
+  onCancel: PropTypes.func,
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
 };
 export default ModalContent;

package/lib/esm/MultiSelectFilter/MultiSelectFilter.js

@@ -482,9 +482,9 @@ MultiSelectFilter.propTypes = {
    */
   label: PropTypes.string.isRequired,
   /**
-   * The text for the subtitle
+   * The text for the subtitle. Can also be JSX.
    */
-  subtitle: PropTypes.string,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.

package/lib/esm/StepTracker/Step.js

@@ -150,6 +150,13 @@ const getStepTestID = (isCompleted, isCurrent) => {
   }
   return testID;
 };
+const selectBarContainerStyles = (themeTokens, isCompleted, isCurrent) => ({
+  backgroundColor: isCompleted ? themeTokens.barCompletedBackgroundColor : themeTokens.barBackgroundColor,
+  height: themeTokens.barHeight,
+  ...(isCurrent && {
+    backgroundColor: themeTokens.barCurrentBackgroundColor
+  })
+});
 
 /**
  * A single step of a StepTracker.
@@ -162,6 +169,7 @@ const Step = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     stepCount = 0,
     stepIndex = 0,
     tokens,
+    isBarVariant,
     ...rest
   } = _ref8;
   const {
@@ -190,7 +198,10 @@ const Step = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
     accessibilityCurrent: status === stepIndex,
     ref: ref,
     ...selectProps(rest),
-    children: [/*#__PURE__*/_jsxs(StackView, {
+    children: [isBarVariant && /*#__PURE__*/_jsx(View, {
+      style: selectBarContainerStyles(themeTokens, isCompleted, isCurrent),
+      testID: getStepTestID(isCompleted, isCurrent)
+    }), !isBarVariant && /*#__PURE__*/_jsxs(StackView, {
       direction: "row",
       space: 0,
       tokens: {

package/lib/esm/StepTracker/StepTracker.js

@@ -12,6 +12,7 @@ import useCopy from '../utils/useCopy';
 import Step from './Step';
 import defaultDictionary from './dictionary';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const STYLE_BAR_VARIANT = 'bar';
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectContainerStyles = _ref => {
   let {
@@ -52,6 +53,14 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
     themeOptions
   });
 };
+const selectStepsContainerStyles = _ref4 => {
+  let {
+    barGap
+  } = _ref4;
+  return {
+    gap: barGap
+  };
+};
 
 /**
  * StepTracker component shows the current position in a sequence of steps.
@@ -85,7 +94,7 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
  * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
  *
  */
-const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+const StepTracker = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     current = 0,
     copy = 'en',
@@ -94,7 +103,8 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref4;
+  } = _ref5;
+  const isBarVariant = variant?.style === STYLE_BAR_VARIANT;
   const viewport = useViewport();
   const {
     showStepTrackerLabel,
@@ -140,7 +150,7 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     children: /*#__PURE__*/_jsxs(StackView, {
       space: 0,
       children: [/*#__PURE__*/_jsx(View, {
-        style: staticStyles.stepsContainer,
+        style: [staticStyles.stepsContainer, selectStepsContainerStyles(themeTokens)],
         accessibilityRole: stepsContainerAccessibilityRole,
         children: steps.map((label, index) => {
           return /*#__PURE__*/_jsx(Step, {
@@ -151,7 +161,8 @@ const StepTracker = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
             stepCount: steps.length,
             tokens: themeTokens,
             accessibilityRole: stepAccessibilityRole,
-            accessibilityCurrent: current === index && Platform.OS === 'web' && 'step'
+            accessibilityCurrent: current === index && Platform.OS === 'web' && 'step',
+            isBarVariant: isBarVariant
           }, label);
         })
       }), showStepTrackerLabel && /*#__PURE__*/_jsx(View, {

package/lib/esm/TabBar/TabBar.js

@@ -84,7 +84,8 @@ const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
         iconActive: item.iconActive,
         onPress: () => handlePress(item.id),
         id: `tab-item-${index}`,
-        accessibilityRole: "tablist"
+        accessibilityRole: "tablist",
+        tokens: item.tokens
       }, item.id))
     })
   });
@@ -98,7 +99,8 @@ TabBar.propTypes = {
     icon: PropTypes.node,
     iconActive: PropTypes.node,
     label: PropTypes.string.isRequired,
-    href: PropTypes.string
+    href: PropTypes.string,
+    tokens: getTokensPropType('TabBarItem')
   })).isRequired,
   /** Id of the initially selected item. */
   initiallySelectedItem: PropTypes.number,

package/lib/esm/TabBar/index.js

@@ -1,2 +1,4 @@
 import TabBar from './TabBar';
+import TabBarItem from './TabBarItem';
+TabBar.Item = TabBarItem;
 export default TabBar;

package/lib/esm/Tooltip/Backdrop.js

@@ -14,7 +14,7 @@ function createPortalNode(nodeId) {
   left: ${window.scrollX}px; 
   right: 0; 
   bottom: 0; 
-  z-index: 9999; 
+  z-index: 100000; 
   pointer-events: none;
   `;
   document.body.appendChild(node);

package/lib/esm/utils/index.js

@@ -24,4 +24,5 @@ export { transformGradient } from './transformGradient';
 export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByte';
 export { default as formatImageSource } from './formatImageSource';
 export { default as getSpacingScale } from './getSpacingScale';
-export { default as useVariants } from './useVariants';
+export { default as useVariants } from './useVariants';
+export { default as isTouchDevice } from './isTouchDevice';

package/lib/esm/utils/isTouchDevice.js

@@ -0,0 +1,27 @@
+import Platform from "react-native-web/dist/exports/Platform";
+/**
+ * Determines if the current device supports touch interactions
+ *
+ * @returns {boolean} True if the device supports touch, false otherwise
+ */
+const isTouchDevice = () => {
+  if (Platform.OS !== 'web') {
+    return true;
+  }
+  if (typeof window !== 'undefined') {
+    if ('ontouchstart' in window) {
+      return true;
+    }
+    if (window.navigator && window.navigator.maxTouchPoints > 0) {
+      return true;
+    }
+    if (window.navigator && window.navigator.msMaxTouchPoints > 0) {
+      return true;
+    }
+    if (window.matchMedia && window.matchMedia('(pointer: coarse)').matches) {
+      return true;
+    }
+  }
+  return false;
+};
+export default isTouchDevice;

package/lib/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.14.0",
+    "@telus-uds/system-theme-tokens": "^4.15.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.17.1",
+  "version": "3.19.0",
   "types": "types/index.d.ts"
 }

package/package.json

@@ -12,7 +12,7 @@
     "@gorhom/portal": "^1.0.14",
     "@react-native-picker/picker": "^2.9.0",
     "@telus-uds/system-constants": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.14.0",
+    "@telus-uds/system-theme-tokens": "^4.15.0",
     "airbnb-prop-types": "^2.16.0",
     "css-mediaquery": "^0.1.2",
     "expo-document-picker": "^13.0.1",
@@ -84,6 +84,6 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "3.17.1",
+  "version": "3.19.0",
   "types": "types/index.d.ts"
 }

package/src/Box/Box.jsx

@@ -21,9 +21,10 @@ import {
   variantProp,
   viewProps,
   StyleSheet as RNMQStyleSheet,
-  getSpacingScale
+  getSpacingScale,
+  formatImageSource
 } from '../utils'
-import backgroundImageStylesMap from './backgroundImageStylesMap'
+import backgroundImageStylesMap, { backgroundPositions } from './backgroundImageStylesMap'
 import { useViewport } from '../ViewportProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
@@ -87,38 +88,60 @@ const setBackgroundImage = ({
   backgroundImageResizeMode,
   backgroundImagePosition,
   backgroundImageAlign,
-  backgroundImageWidth,
-  backgroundImageHeight,
-  content
+  content,
+  testID
 }) => {
-  if (backgroundImageResizeMode === 'contain') {
-    const containedViewStyle = {
-      ...staticStyles.containedView,
-      width: backgroundImageWidth,
-      height: backgroundImageHeight,
-      ...backgroundImageStylesMap[`${backgroundImagePosition}-${backgroundImageAlign}`]
+  const backgroundImageTestID = testID ? `${testID}-background-image` : undefined
+
+  if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
+    const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`
+
+    if (Platform.OS === 'web') {
+      const backgroundPosition = backgroundPositions[positionKey] || 'center center'
+
+      const backgroundImageStyle = {
+        backgroundImage: `url(${src})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition
+      }
+
+      return (
+        <View
+          style={[staticStyles.imageBackground, backgroundImageStyle]}
+          aria-label={alt}
+          testID={backgroundImageTestID}
+        >
+          {content}
+        </View>
+      )
     }
+    const positionStyles = backgroundImageStylesMap[positionKey] || {}
 
     return (
-      <View style={staticStyles.containedContainer}>
-        <View style={containedViewStyle}>
-          <Image
-            source={{ uri: src }}
-            alt={alt}
-            style={staticStyles.containedImage}
-            accessibilityIgnoresInvertColors
-          />
-        </View>
-        {content}
+      <View style={staticStyles.containContainer}>
+        <Image
+          source={src}
+          resizeMode={backgroundImageResizeMode}
+          style={[staticStyles.containImage, positionStyles]}
+          accessible={true}
+          accessibilityLabel={alt}
+          accessibilityIgnoresInvertColors={true}
+          testID={backgroundImageTestID}
+        />
+        <View style={staticStyles.contentOverlay}>{content}</View>
       </View>
     )
   }
+
   return (
     <ImageBackground
-      source={{ uri: src }}
-      alt={alt}
-      style={staticStyles.backgroundImageContainer}
+      source={src}
       resizeMode={backgroundImageResizeMode}
+      style={staticStyles.imageBackground}
+      accessible={true}
+      accessibilityLabel={alt}
+      testID={backgroundImageTestID}
     >
       {content}
     </ImageBackground>
@@ -279,33 +302,47 @@ const Box = React.forwardRef(
 
     const { src = '', alt = '', resizeMode = '', position = '', align = '' } = backgroundImage || {}
     const backgroundImageResizeMode = useResponsiveProp(resizeMode, 'cover')
-    const backgroundImagePosition = useResponsiveProp(position, 'none')
-    const backgroundImageAlign = useResponsiveProp(align, 'stretch')
-    const [backgroundImageWidth, setBackgroundImageWidth] = React.useState(0)
-    const [backgroundImageHeight, setBackgroundImageHeight] = React.useState(0)
-    if (backgroundImage)
+    const backgroundImagePosition = useResponsiveProp(position)
+    const backgroundImageAlign = useResponsiveProp(align)
+    const imageSourceViewport = formatImageSource(useResponsiveProp(src))
+
+    if (backgroundImage && src) {
+      const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...containerStyle } = boxStyles
+
+      const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight
+      const paddedContent = hasPadding ? (
+        <View style={{ paddingTop, paddingBottom, paddingLeft, paddingRight }}>{children}</View>
+      ) : (
+        children
+      )
+
       content = setBackgroundImage({
-        src,
+        src: imageSourceViewport,
         alt,
         backgroundImageResizeMode,
         backgroundImagePosition,
         backgroundImageAlign,
-        backgroundImageWidth,
-        backgroundImageHeight,
-        content
+        content: paddedContent,
+        testID
       })
 
-    React.useEffect(() => {
-      if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
-        Image.getSize(src, (width, height) => {
-          // Only update the state if the size has changed
-          if (width !== backgroundImageWidth || height !== backgroundImageHeight) {
-            setBackgroundImageWidth(width)
-            setBackgroundImageHeight(height)
-          }
-        })
+      const dataSetValue = boxMediaIds ? { media: boxMediaIds, ...dataSet } : dataSet
+
+      if (scroll) {
+        const scrollProps = typeof scroll === 'object' ? scroll : {}
+        scrollProps.contentContainerStyle = [containerStyle, scrollProps.contentContainerStyle]
+        return (
+          <ScrollView {...scrollProps} {...props} testID={testID} dataSet={dataSetValue} ref={ref}>
+            {content}
+          </ScrollView>
+        )
       }
-    }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src])
+      return (
+        <View {...props} style={containerStyle} testID={testID} dataSet={dataSetValue} ref={ref}>
+          {content}
+        </View>
+      )
+    }
 
     const dataSetValue = boxMediaIds ? { media: boxMediaIds, ...dataSet } : dataSet
 
@@ -416,10 +453,12 @@ Box.propTypes = {
   */
   customGradient: PropTypes.func,
   /**
-   * Use this prop to add a background image to the box.
+   * Apply background image to the box.
    */
   backgroundImage: PropTypes.shape({
-    src: PropTypes.string.isRequired,
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).isRequired,
     alt: PropTypes.string,
     resizeMode: responsiveProps.getTypeOptionallyByViewport(
       PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])
@@ -436,18 +475,21 @@ Box.propTypes = {
 export default Box
 
 const staticStyles = StyleSheet.create({
-  backgroundImageContainer: {
-    flex: 1
-  },
-  containedContainer: {
-    flex: 1,
-    overflow: 'hidden'
+  imageBackground: { width: '100%', height: '100%' },
+  contentOverlay: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    zIndex: 1
   },
-  containedView: {
-    zIndex: -1,
-    position: 'absolute'
+  containContainer: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative'
   },
-  containedImage: {
+  containImage: {
+    position: 'absolute',
     width: '100%',
     height: '100%'
   }

package/src/Box/backgroundImageStylesMap.js

@@ -1,21 +1,54 @@
-export default {
-  'top-start': { top: 0 },
-  'top-center': { left: 0, right: 0, marginHorizontal: 'auto' },
+import { Platform } from 'react-native'
+
+const webStyles = {
+  'top-start': { top: 0, left: 0 },
+  'top-center': { top: 0, left: '50%', transform: [{ translateX: '-50%' }] },
   'top-end': { top: 0, right: 0 },
   'right-start': { top: 0, right: 0 },
-  'left-start': { top: 0 },
-  'left-center': { top: 0, bottom: 0, marginVertical: 'auto' },
-  'none-start': { top: 0, bottom: 0, marginVertical: 'auto' },
-  'none-center': { top: 0, bottom: 0, left: 0, right: 0, margin: 'auto' },
-  'right-center': { top: 0, bottom: 0, right: 0, marginVertical: 'auto' },
-  'none-end': { top: 0, bottom: 0, right: 0, marginVertical: 'auto' },
+  'left-start': { top: 0, left: 0 },
+  'left-center': { top: '50%', left: 0, transform: [{ translateY: '-50%' }] },
+  'right-center': { top: '50%', right: 0, transform: [{ translateY: '-50%' }] },
   'bottom-start': { bottom: 0, left: 0 },
   'left-end': { bottom: 0, left: 0 },
-  'bottom-center': { left: 0, right: 0, bottom: 0, marginHorizontal: 'auto' },
-  'bottom-end': { right: 0, bottom: 0 },
-  'right-end': { right: 0, bottom: 0 },
-  'top-stretch': { left: 0, right: 0, width: '100%' },
-  'left-stretch': { top: 0, bottom: 0, height: '100%' },
+  'bottom-center': { bottom: 0, left: '50%', transform: [{ translateX: '-50%' }] },
+  'bottom-end': { bottom: 0, right: 0 },
+  'right-end': { bottom: 0, right: 0 },
+  'top-stretch': { top: 0, left: 0, right: 0, width: '100%' },
+  'left-stretch': { top: 0, bottom: 0, left: 0, height: '100%' },
   'right-stretch': { top: 0, bottom: 0, right: 0, height: '100%' },
-  'bottom-stretch': { left: 0, right: 0, bottom: 0, width: '100%' }
+  'bottom-stretch': { bottom: 0, left: 0, right: 0, width: '100%' }
 }
+
+const webBackgroundPositions = {
+  'top-start': 'left top',
+  'top-center': 'center top',
+  'top-end': 'right top',
+  'bottom-start': 'left bottom',
+  'bottom-center': 'center bottom',
+  'bottom-end': 'right bottom',
+  'left-center': 'left center',
+  'right-center': 'right center'
+}
+
+const nativeStyles = {
+  'top-start': { top: 0, left: 0, width: 150, height: 200 },
+  'top-center': { top: 0, left: '50%', marginLeft: -75, width: 150, height: 200 },
+  'top-end': { top: 0, right: 0, width: 150, height: 200 },
+  'right-start': { top: 0, right: 0, width: 150, height: 200 },
+  'left-start': { top: 0, left: 0, width: 150, height: 200 },
+  'left-center': { left: 0, top: '50%', marginTop: -100, width: 150, height: 200 },
+  'right-center': { right: 0, top: '50%', marginTop: -100, width: 150, height: 200 },
+  'bottom-start': { bottom: 0, left: 0, width: 150, height: 200 },
+  'left-end': { bottom: 0, left: 0, width: 150, height: 200 },
+  'bottom-center': { bottom: 0, left: '50%', marginLeft: -75, width: 150, height: 200 },
+  'bottom-end': { bottom: 0, right: 0, width: 150, height: 200 },
+  'right-end': { bottom: 0, right: 0, width: 150, height: 200 },
+  'top-stretch': { top: 0, left: 0, right: 0, width: '100%' },
+  'left-stretch': { top: 0, bottom: 0, left: 0, height: '100%' },
+  'right-stretch': { top: 0, bottom: 0, right: 0, height: '100%' },
+  'bottom-stretch': { bottom: 0, left: 0, right: 0, width: '100%' }
+}
+
+export const backgroundPositions = Platform.OS === 'web' ? webBackgroundPositions : {}
+
+export default Platform.OS === 'web' ? webStyles : nativeStyles

package/src/Carousel/Carousel.jsx

@@ -12,7 +12,8 @@ import {
   a11yProps,
   viewProps,
   useCopy,
-  unpackFragment
+  unpackFragment,
+  isTouchDevice
 } from '../utils'
 import { useA11yInfo } from '../A11yInfoProvider'
 import { CarouselProvider } from './CarouselContext'
@@ -799,7 +800,7 @@ const Carousel = React.forwardRef(
         return false
       }
       if (Platform.OS === 'web') {
-        return !!(viewport === 'xs' || viewport === 'sm')
+        return !!(viewport === 'xs' || viewport === 'sm' || (viewport === 'md' && isTouchDevice()))
       }
       return true
     }, [viewport, totalItems])

package/src/Modal/Modal.jsx

@@ -118,6 +118,7 @@ const Modal = React.forwardRef(
       confirmButtonVariant,
       cancelButtonText,
       cancelButtonType,
+      footer,
       ...rest
     },
     ref
@@ -240,6 +241,7 @@ const Modal = React.forwardRef(
                 confirmButtonVariant={confirmButtonVariant}
                 cancelButtonText={cancelButtonText}
                 cancelButtonType={cancelButtonType}
+                footer={footer}
               >
                 {Platform.OS !== 'web' ? (
                   <ScrollView style={selectScrollViewStyles}>{children}</ScrollView>
@@ -343,7 +345,11 @@ Modal.propTypes = {
   /**
    * Receive a function for the onCancel event in the cancel button.
    */
-  onCancel: PropTypes.func
+  onCancel: PropTypes.func,
+  /**
+   * Receive a react node or an array of nodes to render at the bottom of the modal, above the action buttons.
+   */
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
 }
 
 export default Modal

package/src/Modal/ModalContent.jsx

@@ -25,7 +25,8 @@ const ModalContent = React.forwardRef(
       cancelButtonText,
       cancelButtonType: CancelButton = TextButton,
       children,
-      onCancel
+      onCancel,
+      footer
     },
     ref
   ) => {
@@ -131,7 +132,7 @@ const ModalContent = React.forwardRef(
           </Box>
         )}
         {children}
-        {(hasConfirmButton || hasCancelButton) && (
+        {(hasConfirmButton || hasCancelButton) && !footer && (
           <View
             style={[
               selectFooterContainerStyles({
@@ -158,6 +159,7 @@ const ModalContent = React.forwardRef(
             ) : null}
           </View>
         )}
+        {footer}
       </View>
     )
   }
@@ -190,7 +192,8 @@ ModalContent.propTypes = {
   cancelButtonText: PropTypes.string,
   cancelButtonType: PropTypes.elementType, // TODO: figure out a way of passing an icon to the TextButton
   children: PropTypes.node,
-  onCancel: PropTypes.func
+  onCancel: PropTypes.func,
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
 }
 
 export default ModalContent

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -479,9 +479,9 @@ MultiSelectFilter.propTypes = {
    */
   label: PropTypes.string.isRequired,
   /**
-   * The text for the subtitle
+   * The text for the subtitle. Can also be JSX.
    */
-  subtitle: PropTypes.string,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.