@telus-uds/components-base 0.0.2-prerelease.4 → 0.0.2-prerelease.8

package/lib/utils/useResponsiveProp.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.resolveResponsiveProp = void 0;
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+const hasOwn = (objectProp, key) => Object.prototype.hasOwnProperty.call(objectProp, key);
+
+const hasResponsiveProperties = objectProp => _systemConstants.viewports.keys.some(key => hasOwn(objectProp, key));
+/**
+ * Resolves a prop which may be a responsive object with keys for viewports.
+ *
+ * Used internally in useResponsiveProp - see that for more details.
+ *
+ * @param {*} prop
+ * @param {"xs"|"sm"|"md"|"lg"|"xl"} viewport
+ * @param {*} [defaultValue]
+ * @returns {*}
+ */
+
+
+const resolveResponsiveProp = (prop, viewport, defaultValue) => {
+  if (prop === undefined) return defaultValue;
+  if (!prop || typeof prop !== 'object' || !hasResponsiveProperties(prop)) return prop;
+  const value = _systemConstants.viewports.keys.includes(viewport) ? // If there's a current viewport, return the closest match at or below it
+  _systemConstants.viewports.inherit(prop)[viewport] : // If no current viewport is available, default to smallest viewport
+  prop[_systemConstants.viewports.keys.find(key => hasOwn(prop, key))];
+  return value === undefined ? defaultValue : value;
+};
+/**
+ * Takes any value and, if that value is a responsive prop (an object with one or more
+ * keys matching system viewport names), returns the value corresponding to the largest
+ * viewport key smaller than the current screen's viewport.
+ *
+ * For example, if passed `{ sm: 4, lg: 8 }`, it will return 8 on `xl` and `lg` viewports,
+ * 4 on `md` and `sm` viewports, and `undefined` (or a provided `defaultValue`) on `xs` viewports.
+ *
+ * To generate propTypes for responsive props, see `responsiveProps` in `./utils/propTypes.js`.
+ *
+ * @param {*} prop - any value which may be an object with viewport keys
+ * @param {*} [defaultValue] - default value to provide if no matches found for the current viewport
+ * @returns {*}
+ */
+
+
+exports.resolveResponsiveProp = resolveResponsiveProp;
+
+const useResponsiveProp = (prop, defaultValue) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  return resolveResponsiveProp(prop, viewport, defaultValue);
+};
+
+var _default = useResponsiveProp;
+exports.default = _default;

package/lib/utils/{spacing/useSpacingScale.js → useSpacingScale.js}

@@ -1,14 +1,43 @@
-import { useViewport } from '../../ViewportProvider';
-import { useThemeTokens } from '../../ThemeProvider';
-import { resolveSpacingValue, resolveSpacingOptions } from './utils';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _useResponsiveProp = require("./useResponsiveProp");
+
 /**
  * @typedef {import('@telus-uds/system-constants/viewports').Viewport} Viewport
- * @typedef {import('../propTypes.js').SpacingValue} SpacingValue
- * @typedef {import('../propTypes.js').SpacingIndex} SpacingIndex
- * @typedef {import('../propTypes.js').SpacingObject} SpacingObject
- * @typedef {import('../propTypes.js').SpacingOptions} SpacingOptions
+ * @typedef {import('./propTypes.js').SpacingValue} SpacingValue
+ * @typedef {import('./propTypes.js').SpacingIndex} SpacingIndex
+ * @typedef {import('./propTypes.js').SpacingObject} SpacingObject
+ * @typedef {import('./propTypes.js').SpacingOptions} SpacingOptions
  */
+const resolveSpacingOptions = space => {
+  if (!(space !== null && space !== void 0 && space.options)) return {};
+  const {
+    size,
+    variant,
+    subtract = 0
+  } = space.options;
+  const overridden = typeof size === 'number'; // Might need an option that adapts the size value by current user's system font scale, so that
+  // meaningful spacing between items doesn't disappear on the highest a11y font scale settings.
+  // https://github.com/telus/universal-design-system/issues/583
 
+  return {
+    tokens: {
+      size
+    },
+    variant,
+    overridden,
+    subtract
+  };
+};
 /**
  * Pass a {@link SpacingValue}, which is one of:
  *
@@ -79,24 +108,28 @@ import { resolveSpacingValue, resolveSpacingOptions } from './utils';
  * @returns {number}
  */
 
+
 const useSpacingScale = spaceValue => {
+  var _spaceValue$space;
+
   // In future, may need to consider window height as well as width, particularly for native apps,
   // e.g. to ensure designs don't look lost on large, tall, not-so-wide portrait screens.
-  const viewport = useViewport();
+  const viewport = (0, _ViewportProvider.useViewport)();
   const {
     tokens,
     variant,
     overridden,
     subtract = 0
   } = resolveSpacingOptions(spaceValue);
-  const space = overridden ? null : resolveSpacingValue(spaceValue, viewport);
+  const space = !overridden && ((_spaceValue$space = spaceValue === null || spaceValue === void 0 ? void 0 : spaceValue.space) !== null && _spaceValue$space !== void 0 ? _spaceValue$space : (0, _useResponsiveProp.resolveResponsiveProp)(spaceValue, viewport, 0));
   const {
     size
-  } = useThemeTokens('spacingScale', tokens, variant, {
-    space,
+  } = (0, _ThemeProvider.useThemeTokens)('spacingScale', tokens, variant, {
+    space: typeof space === 'number' ? space : 0,
     viewport
   });
   return Math.max(size - subtract, 0);
 };
 
-export default useSpacingScale;
+var _default = useSpacingScale;
+exports.default = _default;

package/lib/utils/useUniqueId.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+let id = 0;
+
+function useUniqueId(prefix = '') {
+  const [uniqueId] = (0, _react.useState)(() => {
+    id += 1;
+    return "".concat(prefix, "-").concat(id);
+  });
+  return uniqueId;
+}
+
+var _default = useUniqueId;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/components-base",
-  "version": "0.0.2-prerelease.4",
+  "version": "0.0.2-prerelease.8",
   "description": "Base components",
   "keywords": [
     "base"
@@ -9,8 +9,7 @@
   "homepage": "https://github.com/telus/universal-design-system#readme",
   "license": "ISC",
   "main": "lib/index.js",
-  "module": "lib/index.js",
-  "react-native": "lib/index.js",
+  "react-native": "src/index.js",
   "directories": {
     "lib": "lib",
     "test": "__tests__"
@@ -35,9 +34,10 @@
     "skip": true
   },
   "peerDependencies": {
-    "react": "*",
+    "react": "^17.0.2",
+    "react-dom": "*",
     "react-native": "*",
-    "react-native-web": "~0.14.13"
+    "react-native-web": "^0.17.0"
   },
   "devDependencies": {
     "@testing-library/jest-native": "^4.0.1",
@@ -46,9 +46,12 @@
     "react-test-renderer": "^16.3.2"
   },
   "dependencies": {
-    "@telus-uds/system-constants": "^0.0.2-prerelease.1",
-    "@telus-uds/tools-theme": "^0.0.2-prerelease.2",
+    "airbnb-prop-types": "^2.16.0",
+    "@telus-uds/system-constants": "^0.0.2-prerelease.2",
+    "@telus-uds/system-themes": "^0.0.2-prerelease.1",
+    "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "react-native-picker-select": "^8.0.4"
   }
 }

package/release-context.json

@@ -1,7 +1,7 @@
 {
-  "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.3",
-  "changelog": "### [0.0.2-prerelease.4](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.3...@telus-uds/components-base/v0.0.2-prerelease.4) (2021-10-13)\n\n\n### Bug Fixes\n\n* 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))\n",
-  "releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.4",
-  "newVersion": "0.0.2-prerelease.4",
+  "previousReleaseTag": "@telus-uds/components-base/v0.0.2-prerelease.7",
+  "changelog": "### [0.0.2-prerelease.8](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v0.0.2-prerelease.7...@telus-uds/components-base/v0.0.2-prerelease.8) (2021-12-15)\n\n\n### Features\n\n* **base:** add `ProgressBar` component ([#890](https://github.com/telus/universal-design-system/issues/890)) ([b98315c](https://github.com/telus/universal-design-system/commit/b98315cc7dabb2c7130c62c9c3bbf6fdfb7419a0))\n* **base:** add `Tabs` component ([#908](https://github.com/telus/universal-design-system/issues/908)) ([073bbd2](https://github.com/telus/universal-design-system/commit/073bbd2a0b4282112aa434f8e97e505fa8b4b92f))\n* **base:** add base `StepTracker` component ([#800](https://github.com/telus/universal-design-system/issues/800)) ([aa7d472](https://github.com/telus/universal-design-system/commit/aa7d47297c1d9ba13daef60b5184ead07b95cd52))\n* **base:** add Group fieldsets for RadioCard, Radio, Checkbox ([#875](https://github.com/telus/universal-design-system/issues/875)) ([4b99987](https://github.com/telus/universal-design-system/commit/4b999872714144b643f676d3d473369d605b3eea))\n* **base:** add Notification ([#848](https://github.com/telus/universal-design-system/issues/848)) ([ee6a83e](https://github.com/telus/universal-design-system/commit/ee6a83e05dc991acef3b9449f78c17d43d63b248))\n* **base:** add RadioCard and PressableCardBase ([#865](https://github.com/telus/universal-design-system/issues/865)) ([55c6fa2](https://github.com/telus/universal-design-system/commit/55c6fa293f2fa09499aed763910d3791eefbc4a1))\n* **base:** add the Modal component ([#878](https://github.com/telus/universal-design-system/issues/878)) ([431d4cd](https://github.com/telus/universal-design-system/commit/431d4cd2c1a7f4ce30b453d437b9f5d7b69fd251))\n* **base:** add the Search component ([#798](https://github.com/telus/universal-design-system/issues/798)) ([7b974df](https://github.com/telus/universal-design-system/commit/7b974df12d2bf0cb94b6360091bac8ac57dd7245))\n* **base:** handle `Tabs` hashes, with `useHash` ([#910](https://github.com/telus/universal-design-system/issues/910)) ([8ad6507](https://github.com/telus/universal-design-system/commit/8ad65072c249e8439e7d1c7e55fee535a5f30b4e))\n* **ds-allium:** `PriceLockup` implmementation ([#858](https://github.com/telus/universal-design-system/issues/858)) ([8669b9e](https://github.com/telus/universal-design-system/commit/8669b9e3f80261bd18962dfba5d774c90a5f4ebb))\n* **ds-allium:** add `StoryCard` component ([#880](https://github.com/telus/universal-design-system/issues/880)) ([6f0616d](https://github.com/telus/universal-design-system/commit/6f0616dc761cbdcf470bc2505d773eb362bf800e))\n* **ds-allium:** add Modal content types ([#896](https://github.com/telus/universal-design-system/issues/896)) ([f070447](https://github.com/telus/universal-design-system/commit/f070447fc796139046a96892aab34b74bc1974a4))\n* **ds-allium:** add SubNavigation ([#931](https://github.com/telus/universal-design-system/issues/931)) ([834ee7b](https://github.com/telus/universal-design-system/commit/834ee7bbe811ea8477ac4870466ae573d73e3a8f))\n* use built icons ([#809](https://github.com/telus/universal-design-system/issues/809)) ([120802e](https://github.com/telus/universal-design-system/commit/120802e11bcb4352b9d2e171525f6dc5b687c023))\n\n\n### Bug Fixes\n\n* **base:** add outer border to Radio, extract RadioButton ([#847](https://github.com/telus/universal-design-system/issues/847)) ([b563335](https://github.com/telus/universal-design-system/commit/b563335087fbfffe6739ad185fe4fc7886ef4e4d))\n* **base:** fix Tags icon, update Allium Tags/ButtonGroup ([#888](https://github.com/telus/universal-design-system/issues/888)) ([6d6ff35](https://github.com/telus/universal-design-system/commit/6d6ff35caba4c9c6c99eacf015be56e8862ad170))\n* **components-base:** Remove named import of json file ([#930](https://github.com/telus/universal-design-system/issues/930)) ([9db1cbe](https://github.com/telus/universal-design-system/commit/9db1cbe501d3c049f1f6476720a3ee9bd8b4d736))\n* fix storybook error from proptypes ([#857](https://github.com/telus/universal-design-system/issues/857)) ([175537a](https://github.com/telus/universal-design-system/commit/175537a6ac4b48699f66b1a59eb35910cbf9930b))\n* update test theme icons + cleanup ds-allium icon usage ([#860](https://github.com/telus/universal-design-system/issues/860)) ([c2c0a84](https://github.com/telus/universal-design-system/commit/c2c0a84914eed9dafaf47acca30e1f5119f19e57))\n",
+  "releaseTag": "@telus-uds/components-base/v0.0.2-prerelease.8",
+  "newVersion": "0.0.2-prerelease.8",
   "packageName": "@telus-uds/components-base"
 }

package/src/Box/Box.jsx

@@ -2,7 +2,14 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View, ScrollView } from 'react-native'
 import { useThemeTokens } from '../ThemeProvider'
-import { a11yProps, spacingProps, variantProp, getTokensPropType, useSpacingScale } from '../utils'
+import {
+  a11yProps,
+  spacingProps,
+  variantProp,
+  getTokensPropType,
+  useSpacingScale,
+  viewProps
+} from '../utils'
 /**
  * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
@@ -99,9 +106,10 @@ const Box = ({
   variant,
   tokens,
   scroll,
+  testID,
   ...rest
 }) => {
-  const a11y = a11yProps.select(rest)
+  const props = { ...a11yProps.select(rest), ...viewProps.select(rest) }
 
   const themeTokens = useThemeTokens('Box', tokens, variant)
   const styles = {
@@ -116,13 +124,13 @@ const Box = ({
     const scrollProps = typeof scroll === 'object' ? scroll : {}
     scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle]
     return (
-      <ScrollView {...scrollProps} {...a11y}>
+      <ScrollView {...scrollProps} {...props} testID={testID}>
         {children}
       </ScrollView>
     )
   }
   return (
-    <View {...a11y} style={styles}>
+    <View {...props} style={styles} testID={testID}>
       {children}
     </View>
   )
@@ -142,6 +150,7 @@ Box.propTypes = {
   ]),
   variant: variantProp.propType,
   tokens: getTokensPropType('Box'),
+  testID: PropTypes.string,
   children: PropTypes.node.isRequired
 }
 

package/src/Button/Button.jsx

@@ -1,15 +1,19 @@
 import React from 'react'
+
 import ButtonBase from './ButtonBase'
-import buttonPropTypes from './propTypes'
+import buttonPropTypes, { textAndA11yText } from './propTypes'
+import { useThemeTokensCallback } from '../ThemeProvider'
 import { a11yProps } from '../utils/propTypes'
 
-const Button = ({ accessibilityRole = 'button', ...props }) => (
-  <ButtonBase {...props} accessibilityRole={accessibilityRole} />
-)
+const Button = ({ accessibilityRole = 'button', tokens, variant, ...props }) => {
+  const getTokens = useThemeTokensCallback('Button', tokens, variant)
+  return <ButtonBase {...props} tokens={getTokens} accessibilityRole={accessibilityRole} />
+}
 
 Button.propTypes = {
   ...a11yProps.types,
-  ...buttonPropTypes
+  ...buttonPropTypes,
+  children: textAndA11yText
 }
 
 export default Button

package/src/Button/ButtonBase.jsx

@@ -1,67 +1,53 @@
 import React from 'react'
-import { Pressable, Text, View, StyleSheet, Platform } from 'react-native'
+import { Pressable, View, StyleSheet, Platform } from 'react-native'
 
-import { useThemeTokensCallback } from '../ThemeProvider'
-import { applyTextStyles, applyShadowToken } from '../ThemeProvider/utils'
+import { applyTextStyles, applyShadowToken, applyOuterBorder } from '../ThemeProvider/utils'
 import buttonPropTypes from './propTypes'
-import { a11yProps, hrefAttrsProp, linkProps } from '../utils/propTypes'
-
-const getCursorStyle = (inactive, accessibilityRole) => {
-  if (inactive) return 'not-allowed'
-  // These roles should result in cursor: pointer but don't in current RNW releases
-  if (['checkbox', 'radio', 'switch'].includes(accessibilityRole)) return 'pointer'
-  // For everything else, let React Native Web figure it out internally
-  return undefined
-}
+import {
+  a11yProps,
+  getCursorStyle,
+  linkProps,
+  resolvePressableState,
+  resolvePressableTokens,
+  wrapStringsInText
+} from '../utils'
 
 const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
   outerBorderGap + outerBorderWidth
 
 const selectOuterContainerStyles = ({
+  alignSelf,
   opacity,
   outerBorderColor,
   outerBorderWidth,
-  outerBorderGap = 0,
-  outerBorderRadius = 0,
+  outerBorderGap,
+  borderRadius,
   outerBackgroundColor
 }) => ({
-  padding: outerBorderGap,
-  borderWidth: outerBorderWidth,
-  borderColor: outerBorderColor,
-  borderRadius: outerBorderRadius + outerBorderGap,
+  alignSelf,
   backgroundColor: outerBackgroundColor,
-  opacity
+  opacity,
+  ...applyOuterBorder({
+    outerBorderGap,
+    outerBorderWidth,
+    outerBorderColor,
+    borderRadius
+  })
 })
 
-const selectOuterWidthStyles = ({
-  outerBorderGap,
-  outerBorderWidth,
-  width,
-  // TODO: make margin the responsibility of a parent
-  // https://github.com/telus/universal-design-system/issues/525
-  marginTop = 0,
-  marginBottom = 0,
-  marginLeft = 0,
-  marginRight = 0
-}) => {
+const selectOuterWidthStyles = ({ outerBorderGap, outerBorderWidth, width }) => {
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
   const outerBorderOffset = getOuterBorderOffset({ outerBorderGap, outerBorderWidth })
-  const widthStyles = {
-    marginTop: marginTop - outerBorderOffset,
-    marginBottom: marginBottom - outerBorderOffset,
-    marginLeft: marginLeft - outerBorderOffset,
-    marginRight: marginRight - outerBorderOffset
-  }
+  const widthStyles = {}
 
   if (!width) {
     return {
       ...widthStyles,
       // Wrap content, stopping a flex parent's default align-items: stretch stretching focus ring beyond content
       ...Platform.select({
-        web: { width: 'fit-content' },
-        // No fit-content or inline-block in RN. TODO: we might need to provide a prop to allow flex-end or center
-        native: { alignSelf: 'flex-start' }
+        // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
+        web: { display: 'inline-flex' }
       })
     }
   }
@@ -95,7 +81,8 @@ const selectInnerContainerStyles = ({
   paddingTop,
   paddingBottom,
   shadow,
-  borderWidth
+  borderWidth,
+  minWidth
 }) => {
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
@@ -110,6 +97,7 @@ const selectInnerContainerStyles = ({
     paddingTop: offsetBorder(paddingTop),
     paddingBottom: offsetBorder(paddingBottom),
     backgroundColor,
+    minWidth,
     ...applyShadowToken(shadow)
   }
 }
@@ -130,76 +118,63 @@ const selectTextStyles = ({ fontSize, color, lineHeight, fontName, fontWeight, t
     textAlign
   })
 
-const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) =>
-  Platform.OS === 'web'
-    ? {
-        // if it would overflow the container, wraps instead
-        maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
-        cursor: getCursorStyle(inactive, accessibilityRole),
-        outline: 'none' // removes the default browser :focus outline
-      }
-    : {}
+const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
+  return Platform.select({
+    web: {
+      // if it would overflow the container, wraps instead
+      maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      outline: 'none', // removes the default browser :focus outline
+      ...getCursorStyle(inactive, accessibilityRole)
+    },
+    default: {}
+  })
+}
 
 const ButtonBase = ({
   href,
   hrefAttrs,
   children,
-  variant,
   onPress,
-  tokens,
+  tokens = {},
   disabled = false, // alias for inactive
   inactive = disabled,
   selected = false,
   ...rest
 }) => {
-  const getTokens = useThemeTokensCallback('Button', tokens, variant)
-  const getButtonState = ({ pressed, focused, hovered }) => ({
-    pressed,
-    focus: focused,
-    hover: hovered,
-    inactive,
-    selected
-  })
-  const getTokensByPressableState = (pressableState) => getTokens(getButtonState(pressableState))
+  const extraButtonState = { inactive, selected }
+  const resolveButtonTokens = (pressableState) =>
+    resolvePressableTokens(tokens, pressableState, extraButtonState)
 
   const a11y = a11yProps.select(rest)
 
   const getPressableStyle = (pressableState) => {
-    const themeTokens = getTokensByPressableState(pressableState)
+    const themeTokens = resolveButtonTokens(pressableState)
     return [
-      staticStyles.wrapper,
+      staticStyles.row,
       selectWebOnlyStyles(inactive, themeTokens, a11y),
       selectOuterContainerStyles(themeTokens),
       selectOuterWidthStyles(themeTokens)
     ]
   }
 
-  const handlePress = linkProps.handleHref({ href, onPress })
-
   return (
     <Pressable
-      onPress={handlePress}
+      href={href}
+      onPress={linkProps.handleHref({ href, onPress })}
       style={getPressableStyle}
       disabled={inactive}
-      href={href}
-      {...hrefAttrsProp.spread(hrefAttrs)}
+      hrefAttrs={hrefAttrs}
       {...a11y}
     >
       {(pressableState) => {
-        const themeTokens = getTokensByPressableState(pressableState)
+        const themeTokens = resolveButtonTokens(pressableState)
         const containerStyles = selectInnerContainerStyles(themeTokens)
         const borderStyles = selectBorderStyles(themeTokens)
-        const textStyles = {
-          ...selectTextStyles(themeTokens),
-          ...Platform.select({
-            // TODO: https://github.com/telus/universal-design-system/issues/487
-            web: { transition: 'color 200ms' }
-          })
-        }
+        const textStyles = [selectTextStyles(themeTokens), staticStyles.text]
 
         // If the container has a width set, fill it instead of sizing from content.
         // If in future we support text alignments other than center, add here.
-        const stretchStyles = !!themeTokens.width && staticStyles.center
+        const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align
 
         return (
           <View
@@ -207,6 +182,7 @@ const ButtonBase = ({
               containerStyles,
               borderStyles,
               stretchStyles,
+              staticStyles.row,
               Platform.select({
                 web: {
                   maxWidth: '100%', // ensure overflowing content wraps
@@ -216,13 +192,14 @@ const ButtonBase = ({
               })
             ]}
           >
-            {typeof children === 'function' ? (
-              children({
-                ...getButtonState(pressableState),
-                textStyles
-              })
-            ) : (
-              <Text style={textStyles}>{children}</Text>
+            {wrapStringsInText(
+              typeof children === 'function'
+                ? children({
+                    ...resolvePressableState(pressableState, extraButtonState),
+                    textStyles
+                  })
+                : children,
+              { style: textStyles }
             )}
           </View>
         )
@@ -238,10 +215,21 @@ ButtonBase.propTypes = {
 }
 
 const staticStyles = StyleSheet.create({
-  wrapper: {
-    flexDirection: 'row' // ensures alignSelf is horizontal
+  row: {
+    // Apply all button alignment horizontally; no vertical stacking within a button
+    flexDirection: 'row'
+  },
+  text: {
+    flexGrow: 1, // On native but not web, flexShrink here wraps text prematurely
+    ...Platform.select({
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      web: { transition: 'color 200ms' }
+    })
+  },
+  align: {
+    alignItems: 'center'
   },
-  center: {
+  stretch: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center'