@telus-uds/components-base 1.8.2 → 1.8.3

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 14 Jun 2022 15:26:07 GMT and should not be manually modified.
+This log was last generated on Wed, 15 Jun 2022 19:23:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.8.3
+
+Wed, 15 Jun 2022 19:23:06 GMT
+
+### Patches
+
+- fix List.Item crash on Android (alan.slater@nearform.com)
+- fix modal close button zIndex (eugene@michasiw.com)
+- Bump @telus-uds/browserslist-config to v1.0.3
+
 ## 1.8.2
 
-Tue, 14 Jun 2022 15:26:07 GMT
+Tue, 14 Jun 2022 15:27:31 GMT
 
 ### Patches
 

package/component-docs.json

@@ -4314,6 +4314,13 @@
       "docs": {
         "description": "An unordered List component has a child a ListItem that\nallows icon, dividers and customized typography",
         "props": {
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "Platform.select({ web: 'list', default: undefined })",
+              "computed": true
+            },
+            "required": false
+          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -4385,6 +4392,13 @@
         "docs": {
           "description": "ListItem is responsible for rendering icon or a bullet as side item",
           "props": {
+            "accessibilityRole": {
+              "defaultValue": {
+                "value": "Platform.select({ web: 'listitem', default: undefined })",
+                "computed": true
+              },
+              "required": false
+            },
             "tokens": {
               "type": {
                 "name": "custom",
@@ -4471,6 +4485,13 @@
       "docs": {
         "description": "An unordered List component has a child a ListItem that\nallows icon, dividers and customized typography",
         "props": {
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "Platform.select({ web: 'list', default: undefined })",
+              "computed": true
+            },
+            "required": false
+          },
           "tokens": {
             "type": {
               "name": "custom",
@@ -4542,6 +4563,13 @@
         "docs": {
           "description": "ListItem is responsible for rendering icon or a bullet as side item",
           "props": {
+            "accessibilityRole": {
+              "defaultValue": {
+                "value": "Platform.select({ web: 'listitem', default: undefined })",
+                "computed": true
+              },
+              "required": false
+            },
             "tokens": {
               "type": {
                 "name": "custom",
@@ -4628,6 +4656,13 @@
       "docs": {
         "description": "ListItem is responsible for rendering icon or a bullet as side item",
         "props": {
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "Platform.select({ web: 'listitem', default: undefined })",
+              "computed": true
+            },
+            "required": false
+          },
           "tokens": {
             "type": {
               "name": "custom",

package/lib/List/List.js

@@ -37,14 +37,13 @@ const List = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     showDivider,
     tokens,
     variant,
+    accessibilityRole = _Platform.default.select({
+      web: 'list',
+      default: undefined
+    }),
     ...rest
   } = _ref;
 
-  const accessibilityRole = _Platform.default.select({
-    web: 'list',
-    default: 'none'
-  });
-
   const items = _react.Children.map(children, (child, index) => {
     if (child.type.name === _ListItem.default.name) {
       return /*#__PURE__*/(0, _react.cloneElement)(child, {

package/lib/List/ListItem.js

@@ -139,6 +139,10 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
     showDivider,
     children,
     isLastItem,
+    accessibilityRole = _Platform.default.select({
+      web: 'listitem',
+      default: undefined
+    }),
     ...rest
   } = _ref9;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
@@ -151,11 +155,6 @@ const ListItem = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
   const iconTokens = selectItemIconTokens(themeTokens);
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
 
-  const accessibilityRole = _Platform.default.select({
-    web: 'listitem',
-    default: 'item'
-  });
-
   const renderItem = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: staticStyles.wrap,
     children: (0, _utils.wrapStringsInText)(children, {

package/lib/Modal/Modal.js

@@ -243,6 +243,7 @@ const staticStyles = _StyleSheet.default.create({
   closeButtonContainer: {
     position: 'absolute',
     top: 0,
-    right: 0
+    right: 0,
+    zIndex: 1
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "Base components",
   "keywords": [
     "base"
@@ -31,6 +31,7 @@
     "build:code": "npm run build:main && npm run build:module",
     "build:docs": "babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js",
     "storybook": "start-storybook",
+    "build-storybook": "build-storybook",
     "dev": "npm run build:code --watch"
   },
   "bugs": {
@@ -55,7 +56,7 @@
     "@storybook/react": "^6.5.6",
     "@storybook/builder-webpack5": "^6.5.6",
     "@storybook/manager-webpack5": "^6.5.6",
-    "@telus-uds/browserslist-config": "^1.0.2",
+    "@telus-uds/browserslist-config": "^1.0.3",
     "@testing-library/jest-native": "^4.0.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/react-native": "^7.2.0",

package/src/List/List.jsx

@@ -17,26 +17,37 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-const List = forwardRef(({ children, showDivider, tokens, variant, ...rest }, ref) => {
-  const accessibilityRole = Platform.select({ web: 'list', default: 'none' })
-  const items = Children.map(children, (child, index) => {
-    if (child.type.name === ListItem.name) {
-      return cloneElement(child, {
-        showDivider,
-        isLastItem: index + 1 === Children.count(children),
-        tokens,
-        variant
-      })
-    }
-    return child
-  })
+const List = forwardRef(
+  (
+    {
+      children,
+      showDivider,
+      tokens,
+      variant,
+      accessibilityRole = Platform.select({ web: 'list', default: undefined }),
+      ...rest
+    },
+    ref
+  ) => {
+    const items = Children.map(children, (child, index) => {
+      if (child.type.name === ListItem.name) {
+        return cloneElement(child, {
+          showDivider,
+          isLastItem: index + 1 === Children.count(children),
+          tokens,
+          variant
+        })
+      }
+      return child
+    })
 
-  return (
-    <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
-      {items}
-    </View>
-  )
-})
+    return (
+      <View ref={ref} accessibilityRole={accessibilityRole} {...selectProps(rest)}>
+        {items}
+      </View>
+    )
+  }
+)
 List.displayName = 'List'
 
 List.propTypes = {

package/src/List/ListItem.jsx

@@ -65,7 +65,18 @@ const selectDividerStyles = ({ dividerColor, dividerSize, interItemMarginWithDiv
  */
 const ListItem = forwardRef(
   (
-    { tokens, variant, icon, iconColor, iconSize, showDivider, children, isLastItem, ...rest },
+    {
+      tokens,
+      variant,
+      icon,
+      iconColor,
+      iconSize,
+      showDivider,
+      children,
+      isLastItem,
+      accessibilityRole = Platform.select({ web: 'listitem', default: undefined }),
+      ...rest
+    },
     ref
   ) => {
     const themeTokens = useThemeTokens('List', tokens, variant)
@@ -78,7 +89,6 @@ const ListItem = forwardRef(
     const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens)
     const iconTokens = selectItemIconTokens(themeTokens)
     const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens)
-    const accessibilityRole = Platform.select({ web: 'listitem', default: 'item' })
 
     const renderItem = () => (
       <View style={staticStyles.wrap}>{wrapStringsInText(children, { style: itemStyles })}</View>

package/src/Modal/Modal.jsx

@@ -202,6 +202,7 @@ const staticStyles = StyleSheet.create({
   closeButtonContainer: {
     position: 'absolute',
     top: 0,
-    right: 0
+    right: 0,
+    zIndex: 1
   }
 })