@telus-uds/components-base 1.33.0 → 1.34.1

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 04 Apr 2023 19:53:51 GMT and should not be manually modified.
+This log was last generated on Tue, 18 Apr 2023 11:46:09 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.34.1
+
+Tue, 18 Apr 2023 11:46:09 GMT
+
+### Patches
+
+- multi-select-filter not showing modal fix (srikanthkhari@gmail.com)
+
+## 1.34.0
+
+Thu, 13 Apr 2023 05:59:09 GMT
+
+### Minor changes
+
+- feature: standardize Radio for Allium, Public Mobile, Koodo (samuraix221@hotmail.com)
+- select standardization (samuraix221@hotmail.com)
+- Bump @telus-uds/system-theme-tokens to v2.18.0
+
+### Patches
+
+- Fix where `Modal` clips long content (shahzaibkhalidmalik@outlook.com)
+
 ## 1.33.0
 
-Tue, 04 Apr 2023 19:53:51 GMT
+Tue, 04 Apr 2023 20:00:31 GMT
 
 ### Minor changes
 
@@ -745,7 +767,7 @@ Wed, 30 Mar 2022 09:49:18 GMT
 
 ### Bug Fixes
 
-- same rnw dep specification for base as components-allium-web ([#642](https://github.com/telus/universal-design-system/issues/642)) ([d40a9a2](https://github.com/telus/universal-design-system/commit/d40a9a2eade0a6ab276f13d02758fff0a88c2ecd))
+- same rnw dep specification for base as ds-allium ([#642](https://github.com/telus/universal-design-system/issues/642)) ([d40a9a2](https://github.com/telus/universal-design-system/commit/d40a9a2eade0a6ab276f13d02758fff0a88c2ecd))
 
 ### [0.0.2-prerelease.3](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.2...@telus-uds/components-base/v0.0.2-prerelease.3) (2021-10-12)
 

package/component-docs.json

@@ -1,6 +1,60 @@
 {
   "schema": {
     "components": {
+      "Callout": {
+        "background": "color",
+        "gap": "size",
+        "borderRadius": "size",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "paddingBottom": "size",
+        "color": "color"
+      },
+      "FootnoteLink": {
+        "lineHeight": "lineHeight",
+        "paddingLeft": "size",
+        "paddingRight": "size"
+      },
+      "Footnote": {
+        "footnoteBackground": "color",
+        "footnoteBorderTopSizeMd": "border",
+        "footnoteBorderColorMd": "color",
+        "headerMargin": "size",
+        "footnoteBodyBackground": "color",
+        "footnoteBodyPaddingLeft": "size",
+        "footnoteBodyPaddingRight": "size",
+        "footnoteBodyPaddingTop": "size",
+        "footnoteBodyPaddingBottom": "size",
+        "listPaddingLeft": "size",
+        "listItemMarkerFontSize": "size",
+        "listItemMarkerLineHeight": "lineHeight",
+        "listItemColor": "color",
+        "listItemFontSize": "size",
+        "listItemLineHeight": "lineHeight",
+        "listItemPaddingLeft": "size",
+        "closeButtonBorderSize": "border",
+        "closeButtonBorderColor": "color",
+        "closeButtonHeight": "size",
+        "closeButtonMarginTop": "size",
+        "closeButtonMarginLeft": "size",
+        "closeButtonMarginRight": "size",
+        "closeButtonMarginBottom": "size",
+        "closeButtonWidth": "size",
+        "closeButtonIconSize": "size"
+      },
+      "PriceLockup": {
+        "footnoteMarginTop": "size",
+        "footnoteGap": "size",
+        "bottomTextMarginTop": "size",
+        "priceMarginBottom": "size",
+        "bottomLinksMarginLeft": "size",
+        "topTextMarginBottom": "size",
+        "strikeThroughHeight": "size",
+        "strikeThroughBackground": "color",
+        "fontColor": "color",
+        "dividerColor": "color"
+      },
       "ActivityIndicator": {
         "size": "size",
         "thickness": "border",
@@ -142,6 +196,21 @@
         "minWidth": "size",
         "shadow": "shadow"
       },
+      "PreviewCard": {
+        "flex": "integer",
+        "outerBorderColor": "color",
+        "outerBorderGap": "size",
+        "outerBorderWidth": "size",
+        "backgroundColor": "color",
+        "separatorColor": "color",
+        "borderColor": "color",
+        "borderRadius": "radius",
+        "borderWidth": "border",
+        "paddingBottom": "size",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size"
+      },
       "Carousel": {
         "backgroundColor": "color",
         "nextIcon": "icon",
@@ -223,11 +292,69 @@
         "width": "size",
         "color": "color"
       },
+      "DatePicker": {
+        "hiddenInputFieldContainerHeight": "size",
+        "hiddenInputFieldContainerWidth": "size",
+        "previousIcon": "icon",
+        "nextIcon": "icon",
+        "singleDatePickerBorderColor": "color",
+        "singleDatePickerRadius": "radius",
+        "singleDatePickerPaddingTopBottom": "size",
+        "singleDatePickerLeftRight": "size",
+        "dateInputBorderColor": "color",
+        "dateInputBorderRadius": "radius",
+        "invalidInputMixin": "color",
+        "validInputMixin": "color",
+        "dateInputHoverBorderColor": "color",
+        "dateInputFocusBorderColor": "color",
+        "dateInputInsideBorderColor": "color",
+        "dateInputInsideColor": "color",
+        "dateInputStrokeColor": "color",
+        "calendarMonthCaptionColor": "color",
+        "calendarMonthCaptionFontSize": "fontSize",
+        "calendarMonthCaptionLineHeight": "lineHeight",
+        "calendarMonthCaptionPaddingBottom": "size",
+        "dayPickerNavigationButtonBorderColor": "color",
+        "dayPickerNavigationButtonBackgroundColor": "color",
+        "dayPickerNavigationButtonMaxHeight": "size",
+        "dayPickerNavigationButtonMaxWidth": "size",
+        "dayPickerNavigationButtonPadding": "size",
+        "dayPickerNavigationButtonChildLeft": "size",
+        "dayPickerNavigationButtonChildRight": "size",
+        "dayPickerNavigationButtonChildSvgFill": "color",
+        "dayPickerNavigationButtonDefaultHoverBorderColor": "color",
+        "dayPickerNavigationSVGHorizontalFill": "color",
+        "dayPickerWeekHeaderColor": "color",
+        "dayPickerWeekHeaderLineHeight": "lineHeight",
+        "dayPickerWeekHeaderSmall": "fontSize",
+        "calendarDayDefaultBorder": "border",
+        "calendarDayDefaultBorderColor": "color",
+        "calendarDayDefaultFontSize": "fontSize",
+        "calendarDayDefaultColor": "color",
+        "calendarDayDefaultBeforeHeight": "size",
+        "calendarDayDefaultBeforeWidth": "size",
+        "calendarDaySelectedHoverBorderColor": "color",
+        "calendarDaySelectedHoverColor": "color",
+        "calendarDaySelectedHoverBeforeBackground": "color",
+        "calendarDayDefaultCalendarDaySelectedHoverColor": "color",
+        "calendarDayDefaultCalendarDaySelectedHoverBackground": "color",
+        "calendarDayBlockedCalendarHoverBackground": "color",
+        "calendarDayBlockedCalendarHoverColor": "color",
+        "calendarMonthCaptionFontName": "fontName",
+        "dayPickerWeekHeaderFontName": "fontName",
+        "calendarDayDefaultFontName": "fontName",
+        "calendarMonthCaptionFontWeight": "fontWeight",
+        "dayPickerWeekHeaderFontWeight": "fontWeight",
+        "calendarDayDefaultFontWeight": "fontWeight"
+      },
       "ExpandCollapse": {
         "borderColor": "color",
         "borderWidth": "border",
         "borderStyle": "borderStyle"
       },
+      "ExpandCollapseMini": {
+        "borderWidth": "border"
+      },
       "ExpandCollapseControl": {
         "icon": "icon",
         "iconColor": "color",
@@ -245,6 +372,10 @@
         "borderColor": "color",
         "backgroundColor": "color"
       },
+      "ExpandCollapseMiniControl": {
+        "size": "size",
+        "icon": "icon"
+      },
       "ExpandCollapsePanel": {
         "expandDuration": "duration",
         "collapseDuration": "duration",
@@ -1005,6 +1136,12 @@
         "flexGrow": "integer",
         "flexShrink": "integer"
       },
+      "Breadcrumbs": {
+        "icon": "icon",
+        "iconColor": "color",
+        "iconPadding": "size",
+        "listItemPadding": "size"
+      },
       "Timeline": {
         "dotColor": "color",
         "dotWidth": "size",
@@ -1128,6 +1265,35 @@
           "type": "state"
         }
       },
+      "PreviewCard": {
+        "pressed": {
+          "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "focus": {
+          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "values": [
+            true
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        }
+      },
       "ButtonDropdown": {
         "focus": {
           "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",

package/lib/Modal/Modal.js

@@ -241,8 +241,9 @@ const staticStyles = _StyleSheet.default.create({
 
   },
   modal: {
-    maxHeight: '100%' // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)
-
+    maxHeight: '100%',
+    // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)
+    overflow: 'auto'
   },
   closeButtonContainer: {
     position: 'absolute',

package/lib/MultiSelectFilter/ModalOverlay.js

@@ -41,7 +41,6 @@ const staticStyles = _StyleSheet.default.create({
     // 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
 
   },
@@ -50,6 +49,11 @@ const staticStyles = _StyleSheet.default.create({
     top: 0,
     right: 0,
     zIndex: 1
+  },
+  hidden: {
+    // Use opacity not visibility to hide the dropdown during positioning
+    // so on web, children may be focused from the first render
+    opacity: 0
   }
 });
 
@@ -81,8 +85,11 @@ const selectPaddingContainerStyles = _ref2 => {
 const ModalOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     children,
-    tokens,
+    isReady = false,
+    overlaidPosition,
+    onLayout,
     variant,
+    tokens,
     copy,
     onClose
   } = _ref3;
@@ -100,26 +107,25 @@ const ModalOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     copy
   });
   const closeLabel = getCopy('closeButton');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       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]
-        })
+      onLayout: onLayout,
+      style: [overlaidPosition, {
+        minWidth: maxWidth
+      }, staticStyles.positioner, !isReady && staticStyles.hidden],
+      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]
       })
     })
   });
@@ -127,6 +133,13 @@ const ModalOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
 ModalOverlay.displayName = 'ModalOverlay';
 ModalOverlay.propTypes = {
   children: _propTypes.default.node.isRequired,
+  isReady: _propTypes.default.bool,
+  overlaidPosition: _propTypes.default.shape({
+    top: _propTypes.default.number,
+    left: _propTypes.default.number,
+    width: _propTypes.default.number
+  }),
+  onLayout: _propTypes.default.func,
   variant: _utils.variantProp.propType,
   tokens: (0, _utils.getTokensPropType)('Modal'),
   copy: _utils.copyPropTypes,

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -72,7 +72,7 @@ const selectDividerToknes = _ref2 => {
   };
 };
 
-const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const MultiSelectFilter = _ref3 => {
   let {
     label,
     subtitle,
@@ -136,9 +136,41 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     setIsOpen(false);
   };
 
+  const {
+    align,
+    offsets
+  } = (0, _utils.useResponsiveProp)({
+    xs: {
+      align: {
+        top: 'top',
+        left: 'left',
+        bottom: 'bottom',
+        right: 'right'
+      }
+    },
+    sm: {
+      align: {
+        top: 'bottom',
+        left: 'left'
+      },
+      offsets: {
+        vertical: 4
+      }
+    }
+  });
+  const {
+    overlaidPosition,
+    onTargetLayout,
+    isReady,
+    sourceRef
+  } = (0, _utils.useOverlaidPosition)({
+    isShown: isOpen,
+    offsets,
+    align
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
-      ref: ref,
+      ref: sourceRef,
       ...pressHandlers,
       value: isOpen,
       selected: isSelected,
@@ -147,10 +179,15 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       tokens: getButtonTokens,
       inactive: inactive
     }, id), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
+      overlaidPosition: overlaidPosition,
       variant: {
         width: colSize > 1 ? 'size576' : 's'
       },
       onClose: () => setIsOpen(false),
+      tokens: tokens,
+      copy: copy,
+      isReady: isReady,
+      onLayout: onTargetLayout,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: {
@@ -216,7 +253,8 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       })]
     })]
   });
-});
+};
+
 MultiSelectFilter.displayName = 'MultiSelectFilter';
 MultiSelectFilter.propTypes = {
   /**

package/lib/Radio/Radio.js

@@ -67,10 +67,12 @@ const selectDescriptionStyles = _ref2 => {
     descriptionLineHeight,
     descriptionMarginLeft,
     inputSize,
+    fontColor,
     labelMarginLeft = 0
   } = _ref2;
   return {
     marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
+    color: fontColor,
     ...(0, _ThemeProvider.applyTextStyles)({
       fontSize: descriptionFontSize,
       lineHeight: descriptionLineHeight
@@ -229,7 +231,9 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
             })
           })]
         }), Boolean(description) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-          style: selectDescriptionStyles(getTokens()),
+          style: selectDescriptionStyles({ ...getTokens(),
+            fontColor: labelStyles.color
+          }),
           children: description
         })]
       });

package/lib/utils/index.js

@@ -9,6 +9,7 @@ var _exportNames = {
   useHash: true,
   useSpacingScale: true,
   useResponsiveProp: true,
+  useOverlaidPosition: true,
   useSafeLayoutEffect: true,
   useScrollBlocking: true,
   useUniqueId: true,
@@ -46,6 +47,12 @@ Object.defineProperty(exports, "useHash", {
     return _useHash.default;
   }
 });
+Object.defineProperty(exports, "useOverlaidPosition", {
+  enumerable: true,
+  get: function () {
+    return _useOverlaidPosition.default;
+  }
+});
 Object.defineProperty(exports, "useResponsiveProp", {
   enumerable: true,
   get: function () {
@@ -189,6 +196,8 @@ Object.keys(_useResponsiveProp).forEach(function (key) {
   });
 });
 
+var _useOverlaidPosition = _interopRequireDefault(require("./useOverlaidPosition"));
+
 var _useSafeLayoutEffect = _interopRequireDefault(require("./useSafeLayoutEffect"));
 
 var _useScrollBlocking = _interopRequireDefault(require("./useScrollBlocking"));