@telus-uds/components-base 1.5.0 → 1.6.0

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
-@telus-uds/components-base:build: cache hit, replaying output 6a69e9bf21c07998
-@telus-uds/components-base:build: $ yarn build:code && yarn build:docs
-@telus-uds/components-base:build: $ yarn build:main && yarn build:module
-@telus-uds/components-base:build: $ babel src -d lib
-@telus-uds/components-base:build: Successfully compiled 215 files with Babel (4882ms).
-@telus-uds/components-base:build: $ babel src -d lib-module --env-name module
-@telus-uds/components-base:build: Successfully compiled 215 files with Babel (3426ms).
-@telus-uds/components-base:build: $ babel-node --plugins=react-docgen-alpha generate-component-docs.js
+@telus-uds/components-base:build: cache hit, replaying output d1359cc1069914c5
+@telus-uds/components-base:build: $ yarn build:code && yarn build:docs
+@telus-uds/components-base:build: $ yarn build:main && yarn build:module
+@telus-uds/components-base:build: $ babel src -d lib
+@telus-uds/components-base:build: Successfully compiled 217 files with Babel (8026ms).
+@telus-uds/components-base:build: $ babel src -d lib-module --env-name module
+@telus-uds/components-base:build: Successfully compiled 217 files with Babel (5098ms).
+@telus-uds/components-base:build: $ babel-node --plugins=@nearform/babel-plugin-react-docgen generate-component-docs.js

package/.turbo/turbo-lint.log

@@ -0,0 +1,13 @@
+@telus-uds/components-base:lint: cache hit, replaying output 946abc71241dcfa6
+@telus-uds/components-base:lint: $ yarn --cwd ../.. lint:path --color packages/components-base
+@telus-uds/components-base:lint: $ eslint --ignore-path .gitignore --ext .js,.jsx,.mjs,.cjs --color packages/components-base
+@telus-uds/components-base:lint: 
+@telus-uds/components-base:lint: /home/runner/work/universal-design-system/universal-design-system/packages/components-base/__tests__/FlexGrid/Col.test.jsx
+@telus-uds/components-base:lint:    51:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   106:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   155:63  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   200:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint:   248:71  warning  Expect must have a corresponding matcher call  jest/valid-expect
+@telus-uds/components-base:lint: 
+@telus-uds/components-base:lint: ✖ 5 problems (0 errors, 5 warnings)
+@telus-uds/components-base:lint: 

package/CHANGELOG.json

@@ -2,7 +2,104 @@
   "name": "@telus-uds/components-base",
   "entries": [
     {
-      "date": "Thu, 07 Apr 2022 20:33:50 GMT",
+      "date": "Thu, 28 Apr 2022 15:40:15 GMT",
+      "tag": "@telus-uds/components-base_v1.6.0",
+      "version": "1.6.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "shahzaibkhalidmalik@outlook.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Add `pattern` prop for `TextInput` (web)"
+          },
+          {
+            "author": "ruslan.bredikhin@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "feat: add unique ids validation to the group components"
+          },
+          {
+            "author": "eugene@michasiw.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "use IconButton for modal close"
+          },
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Add flex prop to FlexGrid.Col"
+          },
+          {
+            "author": "ruslan.bredikhin@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "feat: add handler props whitelisting to the input components"
+          },
+          {
+            "author": "beachball",
+            "package": "@telus-uds/components-base",
+            "comment": "Bump @telus-uds/system-theme-tokens to v1.5.0",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5"
+          }
+        ],
+        "patch": [
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "V-align Checkbox/Radio with label first line"
+          },
+          {
+            "author": "shahzaibkhalidmalik@outlook.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Fix ExpandCollapse unable to response to window resize"
+          },
+          {
+            "author": "ruslan.bredikhin@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "fix: move link underline to the inline pressable becoming the anchor tag on web"
+          },
+          {
+            "author": "shahzaibkhalidmalik@outlook.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Fix scenario where `reverse` props might not work when elements wrap"
+          },
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "Fix input label text wrap"
+          },
+          {
+            "author": "alan.slater@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "fix Select validation icons"
+          }
+        ],
+        "none": [
+          {
+            "author": "simon.lawrence@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "update babel plugin used for docs generation to maintained fork"
+          },
+          {
+            "author": "cody.zuschlag@nearform.com",
+            "package": "@telus-uds/components-base",
+            "commit": "3db648cd2964f06f91e5d34140cb9f44ede740d5",
+            "comment": "improve linting"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 07 Apr 2022 20:33:56 GMT",
       "tag": "@telus-uds/components-base_v1.5.0",
       "version": "1.5.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 07 Apr 2022 20:33:50 GMT and should not be manually modified.
+This log was last generated on Thu, 28 Apr 2022 15:40:15 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.6.0
+
+Thu, 28 Apr 2022 15:40:15 GMT
+
+### Minor changes
+
+- Add `pattern` prop for `TextInput` (web) (shahzaibkhalidmalik@outlook.com)
+- feat: add unique ids validation to the group components (ruslan.bredikhin@nearform.com)
+- use IconButton for modal close (eugene@michasiw.com)
+- Add flex prop to FlexGrid.Col (alan.slater@nearform.com)
+- feat: add handler props whitelisting to the input components (ruslan.bredikhin@nearform.com)
+- Bump @telus-uds/system-theme-tokens to v1.5.0
+
+### Patches
+
+- V-align Checkbox/Radio with label first line (alan.slater@nearform.com)
+- Fix ExpandCollapse unable to response to window resize (shahzaibkhalidmalik@outlook.com)
+- fix: move link underline to the inline pressable becoming the anchor tag on web (ruslan.bredikhin@nearform.com)
+- Fix scenario where `reverse` props might not work when elements wrap (shahzaibkhalidmalik@outlook.com)
+- Fix input label text wrap (alan.slater@nearform.com)
+- fix Select validation icons (alan.slater@nearform.com)
+
 ## 1.5.0
 
-Thu, 07 Apr 2022 20:33:50 GMT
+Thu, 07 Apr 2022 20:33:56 GMT
 
 ### Minor changes
 

package/__tests__/FlexGrid/Row.test.jsx

@@ -151,48 +151,123 @@ describe('FlexGrid Row', () => {
 
   it('applies correct row order for each reverse prop at viewport "xs"', () => {
     const { getByText } = renderEachReverseProp('xs')
-    expect(getByText('xs--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xs--smReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('xs--mdReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('xs--lgReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('xs--xlReverse').parent).toHaveStyle({ flexDirection: 'row' })
+    expect(getByText('xs--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xs--smReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('xs--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('xs--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('xs--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
   })
 
   it('applies correct row order for each reverse prop at viewport "sm"', () => {
     const { getByText } = renderEachReverseProp('sm')
-    expect(getByText('sm--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('sm--smReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('sm--mdReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('sm--lgReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('sm--xlReverse').parent).toHaveStyle({ flexDirection: 'row' })
+    expect(getByText('sm--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('sm--smReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('sm--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('sm--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('sm--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
   })
 
   it('applies correct row order for each reverse prop at viewport "md"', () => {
     const { getByText } = renderEachReverseProp('md')
-    expect(getByText('md--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('md--smReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('md--mdReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('md--lgReverse').parent).toHaveStyle({ flexDirection: 'row' })
-    expect(getByText('md--xlReverse').parent).toHaveStyle({ flexDirection: 'row' })
+    expect(getByText('md--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('md--smReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('md--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('md--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
+    expect(getByText('md--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
   })
 
   it('applies correct row order for each reverse prop at viewport "lg"', () => {
     const { getByText } = renderEachReverseProp('lg')
 
-    expect(getByText('lg--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('lg--smReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('lg--mdReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('lg--lgReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('lg--xlReverse').parent).toHaveStyle({ flexDirection: 'row' })
+    expect(getByText('lg--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('lg--smReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('lg--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('lg--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('lg--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    })
   })
 
   it('applies correct row order for each reverse prop at viewport "xl"', () => {
     const { getByText } = renderEachReverseProp('xl')
 
-    expect(getByText('xl--xsReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xl--smReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xl--mdReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xl--lgReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
-    expect(getByText('xl--xlReverse').parent).toHaveStyle({ flexDirection: 'row-reverse' })
+    expect(getByText('xl--xsReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xl--smReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xl--mdReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xl--lgReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
+    expect(getByText('xl--xlReverse').parent).toHaveStyle({
+      flexDirection: 'row-reverse',
+      flexWrap: 'wrap-reverse'
+    })
   })
 })

package/__tests__/utils/containUniqueFields.test.js

@@ -0,0 +1,25 @@
+import { containUniqueFields } from '../../src'
+
+const unique = [
+  { a: 1, b: 'B' },
+  { a: 2, b: 'A' }
+]
+
+const notUnique = [
+  { a: 1, b: 'B' },
+  { a: 1, b: 'A' }
+]
+
+describe('containUniqueFields util', () => {
+  it('returns true if no specified fields have duplicates', () => {
+    expect(containUniqueFields(unique, ['a', 'b'])).toBe(true)
+  })
+
+  it('returns false if specified fields have duplicates', () => {
+    expect(containUniqueFields(notUnique, ['a'])).toBe(false)
+  })
+
+  it('returns false if fields have duplicates, but not the specified ones', () => {
+    expect(containUniqueFields(notUnique, ['b'])).toBe(true)
+  })
+})

package/component-docs.json

@@ -283,7 +283,8 @@
         "paddingBottom": "size",
         "closeIcon": "icon",
         "closeIconColor": "color",
-        "closeIconSize": "size"
+        "closeIconSize": "size",
+        "closePadding": "size"
       },
       "Notification": {
         "backgroundColor": "color",
@@ -3893,6 +3894,13 @@
               },
               "required": false,
               "description": "Align content horizontally within the column.\n\nAccepts a `PropType.string` following the [responsive prop](#/Layout?id=responsive) structure."
+            },
+            "flex": {
+              "type": {
+                "name": "bool"
+              },
+              "required": false,
+              "description": "(web only) Stretches the column to fill vertical space using `display: flex`.\nIn native apps, FlexGrid.Col behaves as if this is always true (as do all `View`s)."
             }
           },
           "attributes": {
@@ -4757,7 +4765,8 @@
                 "paddingBottom": "size",
                 "closeIcon": "icon",
                 "closeIconColor": "color",
-                "closeIconSize": "size"
+                "closeIconSize": "size",
+                "closePadding": "size"
               }
             },
             "required": false,
@@ -4783,6 +4792,13 @@
             },
             "required": false,
             "description": ""
+          },
+          "closeButton": {
+            "type": {
+              "name": "node"
+            },
+            "required": false,
+            "description": "Pass a react node to override the default close button or pass `null` to hide the close button."
           }
         },
         "attributes": {

package/lib/Button/ButtonBase.js

@@ -31,7 +31,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 [selectProps, selectedSystemPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.linkProps, _utils2.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils2.selectSystemProps)([_utils2.a11yProps, _utils2.focusHandlerProps, _utils2.linkProps, _utils2.viewProps]);
 
 const getOuterBorderOffset = ({
   outerBorderGap = 0,

package/lib/Button/ButtonGroup.js

@@ -21,9 +21,7 @@ var _ViewportProvider = require("../ViewportProvider");
 
 var _ThemeProvider = require("../ThemeProvider");
 
-var _props = require("../utils/props");
-
-var _input = require("../utils/input");
+var _utils = require("../utils");
 
 var _pressability = require("../utils/pressability");
 
@@ -35,7 +33,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.pressProps, _props.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
 const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   variant,
   tokens,
@@ -57,7 +56,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonGroup', tokens, variant, {
     viewport
   });
-  const stackTokens = (0, _props.selectTokens)('StackView', themeTokens);
+  const stackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
   const {
     direction,
     space
@@ -66,7 +65,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   const {
     currentValues,
     toggleOneValue
-  } = (0, _input.useMultipleInputValues)({
+  } = (0, _utils.useMultipleInputValues)({
     initialValues,
     values,
     maxValues,
@@ -78,6 +77,12 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
     ...rest
   });
   const itemA11yRole = systemProps.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox';
+  const uniqueFields = ['id', 'label'];
+
+  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+    throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
+  }
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, { ...systemProps,
     space: space,
     direction: direction,
@@ -87,7 +92,8 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
       label,
       id = label,
       accessibilityLabel,
-      ref: itemRef
+      ref: itemRef,
+      ...itemRest
     }, index) => {
       const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
 
@@ -98,7 +104,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
       }]);
 
       const handlePress = event => {
-        if (pressHandlers.onPress) pressHandlers.onPress();
+        if (pressHandlers.onPress) pressHandlers.onPress(event);
         toggleOneValue(id, event);
       };
 
@@ -108,7 +114,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
         },
         accessibilityRole: itemA11yRole,
         accessibilityLabel,
-        ..._props.a11yProps.getPositionInSet(items.length, index)
+        ..._utils.a11yProps.getPositionInSet(items.length, index)
       }; // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
       // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
 
@@ -120,6 +126,7 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
         selected: isSelected,
         inactive: inactive,
         ...itemA11y,
+        ...selectItemProps(itemRest),
         children: label
       }, id);
     })
@@ -127,8 +134,8 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)(({
 });
 ButtonGroup.displayName = 'ButtonGroup';
 ButtonGroup.propTypes = { ...selectedSystemPropTypes,
-  tokens: (0, _props.getTokensPropType)('ButtonGroup'),
-  variant: _props.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('ButtonGroup'),
+  variant: _utils.variantProp.propType,
 
   /**
    * The maximum number of items a user may select at once. Defaults to 1 and behaves
@@ -139,7 +146,8 @@ ButtonGroup.propTypes = { ...selectedSystemPropTypes,
   /**
    * The options a user may select
    */
-  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({ ...selectedItemPropTypes,
+
     /**
      * The text displayed to the user in the button, describing this option,
      * passed to the button as its child.

package/lib/Card/PressableCardBase.js

@@ -29,7 +29,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 const tokenKeys = [...(0, _utils.getTokenNames)('Card'), // Outer border tokens. TODO: centralise common token sets like these as part of
 // https://github.com/telus/universal-design-system/issues/782
 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];

package/lib/Checkbox/Checkbox.js

@@ -41,7 +41,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
 
 const selectInputStyles = ({
   iconBackgroundColor,
@@ -232,24 +232,31 @@ const Checkbox = /*#__PURE__*/(0, _react.forwardRef)(({
             pressed
           });
           const iconTokens = selectIconTokens(stateTokens);
+          const labelStyles = selectLabelStyles(stateTokens);
+          const alignWithLabel = label ? [staticStyles.alignWithLabel, {
+            height: labelStyles.lineHeight
+          }] : null;
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
             style: staticStyles.container,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-              style: _StyleSheet.default.flatten([staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)]),
-              testID: "Checkbox-Input",
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxInput.default, {
-                checked: isChecked,
-                defaultChecked: defaultChecked,
-                disabled: inactive,
-                id: inputId,
-                isControlled: isControlled,
-                name: name,
-                value: value
-              }), isChecked && IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens,
-                testID: "Checkbox-Icon"
-              })]
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+              style: alignWithLabel,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+                style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
+                testID: "Checkbox-Input",
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxInput.default, {
+                  checked: isChecked,
+                  defaultChecked: defaultChecked,
+                  disabled: inactive,
+                  id: inputId,
+                  isControlled: isControlled,
+                  name: name,
+                  value: value
+                }), isChecked && IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens,
+                  testID: "Checkbox-Icon"
+                })]
+              })
             }), Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-              style: selectLabelStyles(stateTokens),
+              style: labelStyles,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
                 forId: inputId,
                 children: label
@@ -347,5 +354,9 @@ const staticStyles = _StyleSheet.default.create({
   defaultInputStyles: {
     alignItems: 'center',
     justifyContent: 'center'
+  },
+  alignWithLabel: {
+    alignSelf: 'flex-start',
+    justifyContent: 'center'
   }
 });