@telus-uds/components-base 1.25.0 → 2.0.0

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 01 Feb 2023 20:54:30 GMT and should not be manually modified.
+This log was last generated on Thu, 09 Feb 2023 23:34:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.0.0
+
+Thu, 09 Feb 2023 23:34:12 GMT
+
+### Major changes
+
+- chore: new modal overlay component for multiselectfilter (mauricio.batresmontejo@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.10.0
+
+### Patches
+
+- fixing icon gap to the right side (evander.owusu@telus.com)
+- Fixing carousel StepTracker variant for mobile (tiagohldb@gmail.com)
+- Tooltip implementation is separated into web and native for a fix on smaller screen size (akshay.pandey@telus.com)
+
 ## 1.25.0
 
-Wed, 01 Feb 2023 20:54:30 GMT
+Wed, 01 Feb 2023 20:56:49 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -58,6 +58,8 @@
         "shadow": "shadow",
         "fontSize": "fontSize",
         "color": "color",
+        "dividerColor": "color",
+        "subtitleColor": "color",
         "lineHeight": "lineHeight",
         "textAlign": "flexJustifyContent",
         "alignSelf": "flexAlign",
@@ -103,6 +105,7 @@
         "paddingRight": "size",
         "paddingTop": "size",
         "paddingBottom": "size",
+        "height": "size",
         "width": "size",
         "minWidth": "size",
         "outerBorderColor": "color",
@@ -5867,6 +5870,13 @@
             "required": true,
             "description": "The text displayed to the user in a ButtonDropdown."
           },
+          "subtitle": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "The text for the subtitle"
+          },
           "variant": {
             "type": {
               "name": "objectOf",
@@ -5909,6 +5919,8 @@
                 "shadow": "shadow",
                 "fontSize": "fontSize",
                 "color": "color",
+                "dividerColor": "color",
+                "subtitleColor": "color",
                 "lineHeight": "lineHeight",
                 "textAlign": "flexJustifyContent",
                 "alignSelf": "flexAlign",
@@ -10672,7 +10684,7 @@
           },
           "panelNavigation": {
             "defaultValue": {
-              "value": "thumbnails ? (\n  <CarouselThumbnailNavigation thumbnails={thumbnails} />\n) : (\n  <CarouselStepTracker />\n)",
+              "value": "thumbnails ? (\n  <CarouselThumbnailNavigation thumbnails={thumbnails} />\n) : (\n  <CarouselStepTracker variant={stepTrackerVariant} />\n)",
               "computed": false
             },
             "type": {
@@ -10824,6 +10836,27 @@
             "required": false,
             "description": ""
           },
+          "stepTrackerVariant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": "Prop related to StepTracker Variants"
+          },
           "children": {
             "type": {
               "name": "union",
@@ -11172,6 +11205,27 @@
             "required": false,
             "description": ""
           },
+          "stepTrackerVariant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": "Prop related to StepTracker Variants"
+          },
           "children": {
             "type": {
               "name": "union",

package/lib/Button/ButtonBase.js

@@ -232,7 +232,8 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
 
   const extraButtonState = {
     inactive,
-    selected
+    selected,
+    iconPosition
   };
 
   const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, extraButtonState);

package/lib/Carousel/Carousel.js

@@ -165,6 +165,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children,
     itemLabel = 'item',
     previousNextNavigationPosition = 'inside',
+    stepTrackerVariant,
     previousNextIconSize = 'default',
     minDistanceToCapture = 5,
     minDistanceForAction = 0.2,
@@ -179,7 +180,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     thumbnails = undefined,
     panelNavigation = thumbnails ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnailNavigation.default, {
       thumbnails: thumbnails
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselStepTracker.default, {}),
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselStepTracker.default, {
+      variant: stepTrackerVariant
+    }),
     tag = 'ul',
     accessibilityRole,
     accessibilityLabel,
@@ -562,6 +565,11 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('Carousel'),
   variant: _utils.variantProp.propType,
 
+  /**
+   * Prop related to StepTracker Variants
+   */
+  stepTrackerVariant: _utils.variantProp.propType,
+
   /**
    * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
    */

package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -13,11 +13,16 @@ var _StepTracker = _interopRequireDefault(require("../../StepTracker"));
 
 var _StackView = _interopRequireDefault(require("../../StackView"));
 
+var _utils = require("../../utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const CarouselStepTracker = () => {
+const CarouselStepTracker = _ref => {
+  let {
+    variant
+  } = _ref;
   const {
     activeIndex,
     totalItems,
@@ -47,10 +52,14 @@ const CarouselStepTracker = () => {
         stepLabel: getCopyWithPlaceholders('stepLabel'),
         stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
       },
-      tokens: stepTrackerTokens
+      tokens: stepTrackerTokens,
+      variant: variant
     })
   });
 };
 
+CarouselStepTracker.propTypes = {
+  variant: _utils.variantProp.propType
+};
 var _default = CarouselStepTracker;
 exports.default = _default;

package/lib/MultiSelectFilter/ModalOverlay.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _portal = require("@gorhom/portal");
+
+var _utils = require("../utils");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+var _Card = _interopRequireDefault(require("../Card"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const staticStyles = _StyleSheet.default.create({
+  positioner: {
+    flex: 1,
+    // Grow to maxWidth when possible, shrink when not possible
+    position: 'absolute',
+    height: 330,
+    paddingTop: 5,
+    zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
+
+  },
+  closeButtonContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    zIndex: 1
+  }
+});
+
+const selectCloseButtonContainerStyles = _ref => {
+  let {
+    paddingRight,
+    paddingTop
+  } = _ref;
+  return {
+    paddingRight,
+    paddingTop
+  };
+};
+
+const selectPaddingContainerStyles = _ref2 => {
+  let {
+    paddingTop,
+    paddingLeft,
+    paddingRight
+  } = _ref2;
+  return {
+    paddingBottom: 35,
+    paddingTop,
+    paddingLeft,
+    paddingRight
+  };
+};
+
+const ModalOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    copy,
+    onClose
+  } = _ref3;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+    viewport,
+    maxWidth: false
+  });
+  const {
+    closeIcon: CloseIconComponent,
+    maxWidth
+  } = themeTokens;
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const closeLabel = getCopy('closeButton');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [{
+          minWidth: maxWidth
+        }, staticStyles.positioner],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
+          tokens: selectPaddingContainerStyles(themeTokens),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              onPress: onClose,
+              icon: CloseIconComponent,
+              accessibilityRole: "button",
+              accessibilityLabel: closeLabel,
+              tokens: (0, _utils.selectTokens)('IconButton', themeTokens, 'close')
+            })
+          }), children]
+        })
+      })
+    })
+  });
+});
+ModalOverlay.displayName = 'ModalOverlay';
+ModalOverlay.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Modal'),
+  copy: _utils.copyPropTypes,
+  onClose: _propTypes.default.func
+};
+var _default = ModalOverlay;
+exports.default = _default;

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -25,8 +25,6 @@ var _Divider = _interopRequireDefault(require("../Divider"));
 
 var _FlexGrid = _interopRequireDefault(require("../FlexGrid"));
 
-var _Modal = _interopRequireDefault(require("../Modal"));
-
 var _Spacer = _interopRequireDefault(require("../Spacer"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
@@ -35,6 +33,8 @@ var _Typography = _interopRequireDefault(require("../Typography"));
 
 var _Link = require("../Link");
 
+var _ModalOverlay = _interopRequireDefault(require("./ModalOverlay"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,9 +47,35 @@ const {
   Col,
   Row
 } = _FlexGrid.default;
-const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+
+const selectSubTitleTokens = _ref => {
+  let {
+    subtitleColor
+  } = _ref;
+  return {
+    color: subtitleColor
+  };
+};
+
+const selectDividerToknes = _ref2 => {
+  let {
+    dividerColor,
+    width,
+    decorative = true,
+    weight = 'thin'
+  } = _ref2;
+  return {
+    color: dividerColor,
+    width,
+    decorative,
+    weight
+  };
+};
+
+const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     label,
+    subtitle,
     id = label,
     variant,
     tokens,
@@ -63,7 +89,7 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     inactive = false,
     rowLimit = 12,
     ...rest
-  } = _ref;
+  } = _ref3;
   const {
     currentValues,
     setValues
@@ -74,6 +100,7 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onChange,
     readOnly
   });
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonDropdown', tokens, variant);
   const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, variant);
 
   const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getItemTokens(buttonState));
@@ -101,7 +128,7 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   const handleChange = event => {
     if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
-    setIsOpen(true);
+    setIsOpen(!isOpen);
   };
 
   const onApply = e => {
@@ -110,12 +137,20 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
-      isOpen: isOpen,
-      onClose: () => setIsOpen(false),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
+      ref: ref,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
       variant: {
         width: colSize > 1 ? 'size576' : 's'
       },
+      onClose: () => setIsOpen(false),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: {
@@ -123,10 +158,20 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           },
           children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
         })
+      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+          space: 5
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: {
+              size: 'h5'
+            },
+            tokens: selectSubTitleTokens(themeTokens),
+            children: subtitle
+          })
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
         space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
-        space: 1
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
         scroll: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
@@ -143,12 +188,9 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           }, i))
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
-        variant: {
-          width: 'full',
-          color: 'E3E6E8',
-          decorative: true,
-          weight: 'thin'
-        },
+        variant: selectDividerToknes({ ...themeTokens,
+          width: 'full'
+        }),
         space: 4
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
@@ -172,16 +214,7 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           })]
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
-      ref: ref,
-      ...pressHandlers,
-      value: isOpen,
-      selected: isSelected,
-      label: label,
-      onChange: handleChange,
-      tokens: getButtonTokens,
-      inactive: inactive
-    }, id)]
+    })]
   });
 });
 MultiSelectFilter.displayName = 'MultiSelectFilter';
@@ -191,6 +224,11 @@ MultiSelectFilter.propTypes = {
    */
   label: _propTypes.default.string.isRequired,
 
+  /**
+   * The text for the subtitle
+   */
+  subtitle: _propTypes.default.string,
+
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.

package/lib-module/Button/ButtonBase.js

@@ -206,7 +206,8 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref9, ref) => {
   } = clickProps.toPressProps(rawRest);
   const extraButtonState = {
     inactive,
-    selected
+    selected,
+    iconPosition
   };
 
   const resolveButtonTokens = pressableState => resolvePressableTokens(tokens, pressableState, extraButtonState);

package/lib-module/Carousel/Carousel.js

@@ -135,6 +135,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children,
     itemLabel = 'item',
     previousNextNavigationPosition = 'inside',
+    stepTrackerVariant,
     previousNextIconSize = 'default',
     minDistanceToCapture = 5,
     minDistanceForAction = 0.2,
@@ -149,7 +150,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     thumbnails = undefined,
     panelNavigation = thumbnails ? /*#__PURE__*/_jsx(CarouselThumbnailNavigation, {
       thumbnails: thumbnails
-    }) : /*#__PURE__*/_jsx(CarouselStepTracker, {}),
+    }) : /*#__PURE__*/_jsx(CarouselStepTracker, {
+      variant: stepTrackerVariant
+    }),
     tag = 'ul',
     accessibilityRole,
     accessibilityLabel,
@@ -504,6 +507,11 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
   tokens: getTokensPropType('Carousel'),
   variant: variantProp.propType,
 
+  /**
+   * Prop related to StepTracker Variants
+   */
+  stepTrackerVariant: variantProp.propType,
+
   /**
    * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
    */

package/lib-module/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -2,9 +2,13 @@ import React from 'react';
 import { useCarousel } from '../CarouselContext';
 import StepTracker from '../../StepTracker';
 import StackView from '../../StackView';
+import { variantProp } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const CarouselStepTracker = () => {
+const CarouselStepTracker = _ref => {
+  let {
+    variant
+  } = _ref;
   const {
     activeIndex,
     totalItems,
@@ -34,9 +38,13 @@ const CarouselStepTracker = () => {
         stepLabel: getCopyWithPlaceholders('stepLabel'),
         stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
       },
-      tokens: stepTrackerTokens
+      tokens: stepTrackerTokens,
+      variant: variant
     })
   });
 };
 
+CarouselStepTracker.propTypes = {
+  variant: variantProp.propType
+};
 export default CarouselStepTracker;

package/lib-module/MultiSelectFilter/ModalOverlay.js

@@ -0,0 +1,112 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { Portal } from '@gorhom/portal';
+import { copyPropTypes, getTokensPropType, selectTokens, useCopy, variantProp } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens } from '../ThemeProvider';
+import dictionary from './dictionary';
+import Card from '../Card';
+import IconButton from '../IconButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const staticStyles = StyleSheet.create({
+  positioner: {
+    flex: 1,
+    // Grow to maxWidth when possible, shrink when not possible
+    position: 'absolute',
+    height: 330,
+    paddingTop: 5,
+    zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
+
+  },
+  closeButtonContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    zIndex: 1
+  }
+});
+
+const selectCloseButtonContainerStyles = _ref => {
+  let {
+    paddingRight,
+    paddingTop
+  } = _ref;
+  return {
+    paddingRight,
+    paddingTop
+  };
+};
+
+const selectPaddingContainerStyles = _ref2 => {
+  let {
+    paddingTop,
+    paddingLeft,
+    paddingRight
+  } = _ref2;
+  return {
+    paddingBottom: 35,
+    paddingTop,
+    paddingLeft,
+    paddingRight
+  };
+};
+
+const ModalOverlay = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    copy,
+    onClose
+  } = _ref3;
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Modal', tokens, variant, {
+    viewport,
+    maxWidth: false
+  });
+  const {
+    closeIcon: CloseIconComponent,
+    maxWidth
+  } = themeTokens;
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const closeLabel = getCopy('closeButton');
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Portal, {
+      ref: ref,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [{
+          minWidth: maxWidth
+        }, staticStyles.positioner],
+        children: /*#__PURE__*/_jsxs(Card, {
+          tokens: selectPaddingContainerStyles(themeTokens),
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onPress: onClose,
+              icon: CloseIconComponent,
+              accessibilityRole: "button",
+              accessibilityLabel: closeLabel,
+              tokens: selectTokens('IconButton', themeTokens, 'close')
+            })
+          }), children]
+        })
+      })
+    })
+  });
+});
+ModalOverlay.displayName = 'ModalOverlay';
+ModalOverlay.propTypes = {
+  children: PropTypes.node.isRequired,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Modal'),
+  copy: copyPropTypes,
+  onClose: PropTypes.func
+};
+export default ModalOverlay;

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useThemeTokensCallback } from '../ThemeProvider';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
 import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useCopy, useMultipleInputValues, variantProp } from '../utils';
 import dictionary from './dictionary';
 import Box from '../Box';
@@ -8,21 +8,47 @@ import { Button, ButtonDropdown } from '../Button';
 import { CheckboxGroup } from '../Checkbox';
 import Divider from '../Divider';
 import FlexGrid from '../FlexGrid';
-import Modal from '../Modal';
 import Spacer from '../Spacer';
 import StackView from '../StackView';
 import Typography from '../Typography';
 import { TextButton } from '../Link';
+import ModalOverlay from './ModalOverlay';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
   Col,
   Row
 } = FlexGrid;
-const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
+
+const selectSubTitleTokens = _ref => {
+  let {
+    subtitleColor
+  } = _ref;
+  return {
+    color: subtitleColor
+  };
+};
+
+const selectDividerToknes = _ref2 => {
+  let {
+    dividerColor,
+    width,
+    decorative = true,
+    weight = 'thin'
+  } = _ref2;
+  return {
+    color: dividerColor,
+    width,
+    decorative,
+    weight
+  };
+};
+
+const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     label,
+    subtitle,
     id = label,
     variant,
     tokens,
@@ -36,7 +62,7 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
     inactive = false,
     rowLimit = 12,
     ...rest
-  } = _ref;
+  } = _ref3;
   const {
     currentValues,
     setValues
@@ -47,6 +73,7 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
     onChange,
     readOnly
   });
+  const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant);
   const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant);
 
   const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
@@ -74,7 +101,7 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
 
   const handleChange = event => {
     if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
-    setIsOpen(true);
+    setIsOpen(!isOpen);
   };
 
   const onApply = e => {
@@ -83,12 +110,20 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
 
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Modal, {
-      isOpen: isOpen,
-      onClose: () => setIsOpen(false),
+    children: [/*#__PURE__*/_jsx(ButtonDropdown, {
+      ref: ref,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id), isOpen && /*#__PURE__*/_jsxs(ModalOverlay, {
       variant: {
         width: colSize > 1 ? 'size576' : 's'
       },
+      onClose: () => setIsOpen(false),
       children: [/*#__PURE__*/_jsx(Row, {
         children: /*#__PURE__*/_jsx(Typography, {
           variant: {
@@ -96,10 +131,20 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
           },
           children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
         })
+      }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Spacer, {
+          space: 5
+        }), /*#__PURE__*/_jsx(Row, {
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: {
+              size: 'h5'
+            },
+            tokens: selectSubTitleTokens(themeTokens),
+            children: subtitle
+          })
+        })]
       }), /*#__PURE__*/_jsx(Spacer, {
         space: 4
-      }), /*#__PURE__*/_jsx(Spacer, {
-        space: 1
       }), /*#__PURE__*/_jsx(Box, {
         scroll: true,
         children: /*#__PURE__*/_jsx(Row, {
@@ -116,12 +161,9 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
           }, i))
         })
       }), /*#__PURE__*/_jsx(Divider, {
-        variant: {
-          width: 'full',
-          color: 'E3E6E8',
-          decorative: true,
-          weight: 'thin'
-        },
+        variant: selectDividerToknes({ ...themeTokens,
+          width: 'full'
+        }),
         space: 4
       }), /*#__PURE__*/_jsx(Row, {
         children: /*#__PURE__*/_jsxs(StackView, {
@@ -145,16 +187,7 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
           })]
         })
       })]
-    }), /*#__PURE__*/_jsx(ButtonDropdown, {
-      ref: ref,
-      ...pressHandlers,
-      value: isOpen,
-      selected: isSelected,
-      label: label,
-      onChange: handleChange,
-      tokens: getButtonTokens,
-      inactive: inactive
-    }, id)]
+    })]
   });
 });
 MultiSelectFilter.displayName = 'MultiSelectFilter';
@@ -164,6 +197,11 @@ MultiSelectFilter.propTypes = {
    */
   label: PropTypes.string.isRequired,
 
+  /**
+   * The text for the subtitle
+   */
+  subtitle: PropTypes.string,
+
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.0",
-    "@telus-uds/system-theme-tokens": "^2.9.0",
+    "@telus-uds/system-theme-tokens": "^2.10.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.25.0"
+  "version": "2.0.0"
 }

package/src/Button/ButtonBase.jsx

@@ -174,7 +174,7 @@ const ButtonBase = forwardRef(
     ref
   ) => {
     const { onPress, ...rest } = clickProps.toPressProps(rawRest)
-    const extraButtonState = { inactive, selected }
+    const extraButtonState = { inactive, selected, iconPosition }
     const resolveButtonTokens = (pressableState) =>
       resolvePressableTokens(tokens, pressableState, extraButtonState)
 

package/src/Carousel/Carousel.jsx

@@ -145,6 +145,7 @@ const Carousel = React.forwardRef(
       children,
       itemLabel = 'item',
       previousNextNavigationPosition = 'inside',
+      stepTrackerVariant,
       previousNextIconSize = 'default',
       minDistanceToCapture = 5,
       minDistanceForAction = 0.2,
@@ -160,7 +161,7 @@ const Carousel = React.forwardRef(
       panelNavigation = thumbnails ? (
         <CarouselThumbnailNavigation thumbnails={thumbnails} />
       ) : (
-        <CarouselStepTracker />
+        <CarouselStepTracker variant={stepTrackerVariant} />
       ),
       tag = 'ul',
       accessibilityRole,
@@ -563,6 +564,10 @@ Carousel.propTypes = {
   ...selectedSystemPropTypes,
   tokens: getTokensPropType('Carousel'),
   variant: variantProp.propType,
+  /**
+   * Prop related to StepTracker Variants
+   */
+  stepTrackerVariant: variantProp.propType,
   /**
    * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
    */

package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -2,8 +2,9 @@ import React from 'react'
 import { useCarousel } from '../CarouselContext'
 import StepTracker from '../../StepTracker'
 import StackView from '../../StackView'
+import { variantProp } from '../../utils'
 
-const CarouselStepTracker = () => {
+const CarouselStepTracker = ({ variant }) => {
   const { activeIndex, totalItems, getCopyWithPlaceholders, themeTokens } = useCarousel()
   const stackViewTokens = {
     justifyContent: 'center'
@@ -28,9 +29,14 @@ const CarouselStepTracker = () => {
           stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
         }}
         tokens={stepTrackerTokens}
+        variant={variant}
       />
     </StackView>
   )
 }
 
+CarouselStepTracker.propTypes = {
+  variant: variantProp.propType
+}
+
 export default CarouselStepTracker

package/src/MultiSelectFilter/ModalOverlay.jsx

@@ -0,0 +1,86 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native-web'
+import { Portal } from '@gorhom/portal'
+import { copyPropTypes, getTokensPropType, selectTokens, useCopy, variantProp } from '../utils'
+import { useViewport } from '../ViewportProvider'
+import { useThemeTokens } from '../ThemeProvider'
+import dictionary from './dictionary'
+
+import Card from '../Card'
+import IconButton from '../IconButton'
+
+const staticStyles = StyleSheet.create({
+  positioner: {
+    flex: 1, // Grow to maxWidth when possible, shrink when not possible
+    position: 'absolute',
+    height: 330,
+    paddingTop: 5,
+    zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
+  },
+  closeButtonContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    zIndex: 1
+  }
+})
+
+const selectCloseButtonContainerStyles = ({ paddingRight, paddingTop }) => ({
+  paddingRight,
+  paddingTop
+})
+
+const selectPaddingContainerStyles = ({ paddingTop, paddingLeft, paddingRight }) => ({
+  paddingBottom: 35,
+  paddingTop,
+  paddingLeft,
+  paddingRight
+})
+
+const ModalOverlay = forwardRef(({ children, tokens, variant, copy, onClose }, ref) => {
+  const viewport = useViewport()
+  const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth: false })
+
+  const { closeIcon: CloseIconComponent, maxWidth } = themeTokens
+
+  const getCopy = useCopy({ dictionary, copy })
+  const closeLabel = getCopy('closeButton')
+
+  return (
+    <>
+      <Portal ref={ref}>
+        <View style={[{ minWidth: maxWidth }, staticStyles.positioner]}>
+          <Card tokens={selectPaddingContainerStyles(themeTokens)}>
+            <View
+              style={[
+                staticStyles.closeButtonContainer,
+                selectCloseButtonContainerStyles(themeTokens)
+              ]}
+            >
+              <IconButton
+                onPress={onClose}
+                icon={CloseIconComponent}
+                accessibilityRole="button"
+                accessibilityLabel={closeLabel}
+                tokens={selectTokens('IconButton', themeTokens, 'close')}
+              />
+            </View>
+            {children}
+          </Card>
+        </View>
+      </Portal>
+    </>
+  )
+})
+ModalOverlay.displayName = 'ModalOverlay'
+
+ModalOverlay.propTypes = {
+  children: PropTypes.node.isRequired,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Modal'),
+  copy: copyPropTypes,
+  onClose: PropTypes.func
+}
+
+export default ModalOverlay

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useState } from 'react'
 import PropTypes from 'prop-types'
 
-import { useThemeTokensCallback } from '../ThemeProvider'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
   containUniqueFields,
   getTokensPropType,
@@ -18,18 +18,30 @@ import { Button, ButtonDropdown } from '../Button'
 import { CheckboxGroup } from '../Checkbox'
 import Divider from '../Divider'
 import FlexGrid from '../FlexGrid'
-import Modal from '../Modal'
 import Spacer from '../Spacer'
 import StackView from '../StackView'
 import Typography from '../Typography'
 import { TextButton } from '../Link'
+import ModalOverlay from './ModalOverlay'
 
 const { Col, Row } = FlexGrid
 
+const selectSubTitleTokens = ({ subtitleColor }) => ({
+  color: subtitleColor
+})
+
+const selectDividerToknes = ({ dividerColor, width, decorative = true, weight = 'thin' }) => ({
+  color: dividerColor,
+  width,
+  decorative,
+  weight
+})
+
 const MultiSelectFilter = forwardRef(
   (
     {
       label,
+      subtitle,
       id = label,
       variant,
       tokens,
@@ -54,6 +66,7 @@ const MultiSelectFilter = forwardRef(
       readOnly
     })
 
+    const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant)
     const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant)
     const getButtonTokens = (buttonState) => selectTokens('Button', getItemTokens(buttonState))
     const getCopy = useCopy({ dictionary, copy })
@@ -74,7 +87,7 @@ const MultiSelectFilter = forwardRef(
 
     const handleChange = (event) => {
       if (pressHandlers.onPress) pressHandlers?.onPress(event)
-      setIsOpen(true)
+      setIsOpen(!isOpen)
     }
 
     const onApply = (e) => {
@@ -84,52 +97,6 @@ const MultiSelectFilter = forwardRef(
 
     return (
       <>
-        <Modal
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          variant={{ width: colSize > 1 ? 'size576' : 's' }}
-        >
-          <Row>
-            <Typography variant={{ size: 'h4' }}>
-              {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
-            </Typography>
-          </Row>
-          <Spacer space={4} />
-          <Spacer space={1} />
-          <Box scroll={true}>
-            <Row distribute="between">
-              {[...Array(colSize).keys()].map((i) => (
-                <Col xs={12 / colSize} key={i}>
-                  <CheckboxGroup
-                    items={items.slice(i * rowLimit, (i + 1) * rowLimit)}
-                    checkedIds={checkedIds}
-                    onChange={(e) => setCheckedIds(e, i)}
-                  />
-                  <Spacer size={4} />
-                </Col>
-              ))}
-            </Row>
-          </Box>
-          <Divider
-            variant={{ width: 'full', color: 'E3E6E8', decorative: true, weight: 'thin' }}
-            space={4}
-          />
-          <Row>
-            <StackView direction="row" space={3} tokens={{ alignItems: 'center' }}>
-              <Button
-                onPress={() => onApply(checkedIds)}
-                variant={{ size: 'small', priority: 'high' }}
-              >
-                {getCopy('applyButtonLabel')}
-              </Button>
-              <Box>
-                <TextButton onPress={() => setCheckedIds([])}>
-                  {getCopy('clearButtonLabel')}
-                </TextButton>
-              </Box>
-            </StackView>
-          </Row>
-        </Modal>
         <ButtonDropdown
           ref={ref}
           key={id}
@@ -141,6 +108,59 @@ const MultiSelectFilter = forwardRef(
           tokens={getButtonTokens}
           inactive={inactive}
         />
+        {isOpen && (
+          <ModalOverlay
+            variant={{ width: colSize > 1 ? 'size576' : 's' }}
+            onClose={() => setIsOpen(false)}
+          >
+            <Row>
+              <Typography variant={{ size: 'h4' }}>
+                {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
+              </Typography>
+            </Row>
+            {subtitle && (
+              <>
+                <Spacer space={5} />
+                <Row>
+                  <Typography variant={{ size: 'h5' }} tokens={selectSubTitleTokens(themeTokens)}>
+                    {subtitle}
+                  </Typography>
+                </Row>
+              </>
+            )}
+            <Spacer space={4} />
+            <Box scroll={true}>
+              <Row distribute="between">
+                {[...Array(colSize).keys()].map((i) => (
+                  <Col xs={12 / colSize} key={i}>
+                    <CheckboxGroup
+                      items={items.slice(i * rowLimit, (i + 1) * rowLimit)}
+                      checkedIds={checkedIds}
+                      onChange={(e) => setCheckedIds(e, i)}
+                    />
+                    <Spacer size={4} />
+                  </Col>
+                ))}
+              </Row>
+            </Box>
+            <Divider variant={selectDividerToknes({ ...themeTokens, width: 'full' })} space={4} />
+            <Row>
+              <StackView direction="row" space={3} tokens={{ alignItems: 'center' }}>
+                <Button
+                  onPress={() => onApply(checkedIds)}
+                  variant={{ size: 'small', priority: 'high' }}
+                >
+                  {getCopy('applyButtonLabel')}
+                </Button>
+                <Box>
+                  <TextButton onPress={() => setCheckedIds([])}>
+                    {getCopy('clearButtonLabel')}
+                  </TextButton>
+                </Box>
+              </StackView>
+            </Row>
+          </ModalOverlay>
+        )}
       </>
     )
   }
@@ -152,6 +172,10 @@ MultiSelectFilter.propTypes = {
    * The text displayed to the user in a ButtonDropdown.
    */
   label: PropTypes.string.isRequired,
+  /**
+   * The text for the subtitle
+   */
+  subtitle: PropTypes.string,
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.