@telus-uds/components-base 1.32.0 → 1.34.0

package/CHANGELOG.md

@@ -1,12 +1,35 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 04 Apr 2023 14:45:59 GMT and should not be manually modified.
+This log was last generated on Thu, 13 Apr 2023 05:51:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.34.0
+
+Thu, 13 Apr 2023 05:51:59 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 20:00:31 GMT
+
+### Minor changes
+
+- fix: render with bold: true for list items with titles (kyle.king2@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.17.0
+
 ## 1.32.0
 
-Tue, 04 Apr 2023 14:45:59 GMT
+Tue, 04 Apr 2023 14:52:45 GMT
 
 ### Minor changes
 
@@ -736,7 +759,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",
@@ -368,6 +499,22 @@
         "itemIconColor": "color",
         "listGutter": "size"
       },
+      "OrderedList": {
+        "headerFontWeight": "fontWeight",
+        "headerFontName": "fontName",
+        "itemMarginTop": "size",
+        "itemPaddingTop": "size",
+        "itemBulletWidth": "size",
+        "itemBulletHeight": "size",
+        "itemBulletContainerWidth": "size",
+        "interItemMargin": "size",
+        "listGutter": "size",
+        "itemFontName": "fontName",
+        "itemFontWeight": "fontWeight",
+        "itemFontSize": "fontSize",
+        "itemLineHeight": "lineHeight",
+        "itemColor": "color"
+      },
       "Modal": {
         "backdropColor": "color",
         "backdropOpacity": "opacity",
@@ -989,6 +1136,12 @@
         "flexGrow": "integer",
         "flexShrink": "integer"
       },
+      "Breadcrumbs": {
+        "icon": "icon",
+        "iconColor": "color",
+        "iconPadding": "size",
+        "listItemPadding": "size"
+      },
       "Timeline": {
         "dotColor": "color",
         "dotWidth": "size",
@@ -1112,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/List/ListItem.js

@@ -41,7 +41,8 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...listItemProps,
     children: [Boolean(title) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
       variant: {
-        size: 'h4'
+        size: 'h4',
+        bold: true
       },
       children: title
     }), children]

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/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-module/List/ListItem.js

@@ -24,7 +24,8 @@ const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
     ...listItemProps,
     children: [Boolean(title) && /*#__PURE__*/_jsx(Typography, {
       variant: {
-        size: 'h4'
+        size: 'h4',
+        bold: true
       },
       children: title
     }), children]

package/lib-module/Modal/Modal.js

@@ -213,8 +213,9 @@ const staticStyles = StyleSheet.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-module/Radio/Radio.js

@@ -43,10 +43,12 @@ const selectDescriptionStyles = _ref2 => {
     descriptionLineHeight,
     descriptionMarginLeft,
     inputSize,
+    fontColor,
     labelMarginLeft = 0
   } = _ref2;
   return {
     marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
+    color: fontColor,
     ...applyTextStyles({
       fontSize: descriptionFontSize,
       lineHeight: descriptionLineHeight
@@ -205,7 +207,9 @@ const Radio = /*#__PURE__*/forwardRef((_ref4, ref) => {
             })
           })]
         }), Boolean(description) && /*#__PURE__*/_jsx(Text, {
-          style: selectDescriptionStyles(getTokens()),
+          style: selectDescriptionStyles({ ...getTokens(),
+            fontColor: labelStyles.color
+          }),
           children: description
         })]
       });

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.16.0",
+    "@telus-uds/system-theme-tokens": "^2.18.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.32.0"
+  "version": "1.34.0"
 }

package/src/List/ListItem.jsx

@@ -12,7 +12,7 @@ const ListItem = forwardRef(({ tokens, variant, children, title, ...listItemProp
   const themeTokens = useThemeTokens('List', tokens, variant)
   return (
     <ListItemBase tokens={themeTokens} ref={ref} {...listItemProps}>
-      {Boolean(title) && <Typography variant={{ size: 'h4' }}>{title}</Typography>}
+      {Boolean(title) && <Typography variant={{ size: 'h4', bold: true }}>{title}</Typography>}
       {children}
     </ListItemBase>
   )

package/src/Modal/Modal.jsx

@@ -199,7 +199,8 @@ const staticStyles = StyleSheet.create({
     width: '100%' // ensure that the modal actually expands to the set maxWidth
   },
   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/src/Radio/Radio.jsx

@@ -48,10 +48,15 @@ const selectDescriptionStyles = ({
   descriptionLineHeight,
   descriptionMarginLeft,
   inputSize,
+  fontColor,
   labelMarginLeft = 0
 }) => ({
   marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
-  ...applyTextStyles({ fontSize: descriptionFontSize, lineHeight: descriptionLineHeight })
+  color: fontColor,
+  ...applyTextStyles({
+    fontSize: descriptionFontSize,
+    lineHeight: descriptionLineHeight
+  })
 })
 const selectLabelStyles = ({
   labelColor,
@@ -195,7 +200,14 @@ const Radio = forwardRef(
                 )}
               </View>
               {Boolean(description) && (
-                <Text style={selectDescriptionStyles(getTokens())}>{description}</Text>
+                <Text
+                  style={selectDescriptionStyles({
+                    ...getTokens(),
+                    fontColor: labelStyles.color
+                  })}
+                >
+                  {description}
+                </Text>
               )}
             </StackView>
           )