@telus-uds/components-base 1.35.0 → 1.37.0

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 19 Apr 2023 18:43:18 GMT and should not be manually modified.
+This log was last generated on Mon, 24 Apr 2023 21:33:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.37.0
+
+Mon, 24 Apr 2023 21:33:59 GMT
+
+### Minor changes
+
+- conditionally render Icon based on it being defined (kyle.king2@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.22.0
+
+## 1.36.0
+
+Thu, 20 Apr 2023 19:13:33 GMT
+
+### Minor changes
+
+- added adjustments to IconText (kyle.king2@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.21.0
+
+### Patches
+
+- dependency version fix (srikanthkhari@gmail.com)
+
 ## 1.35.0
 
-Wed, 19 Apr 2023 18:43:18 GMT
+Wed, 19 Apr 2023 18:49:51 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -36,6 +36,11 @@
       "Image": {
         "borderRadius": "radius"
       },
+      "Spinner": {
+        "fullScreenOverLayBackground": "color",
+        "size": "size",
+        "thickness": "border"
+      },
       "Callout": {
         "background": "color",
         "gap": "size",
@@ -114,6 +119,16 @@
         "paddingTop": "size",
         "paddingBottom": "size"
       },
+      "BlockQuote": {
+        "color": "color",
+        "backgroundGradient": "gradient",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "paddingBottom": "size",
+        "marginBottom": "size",
+        "width": "size"
+      },
       "Box": {
         "backgroundColor": "color",
         "gradient": "gradient"
@@ -319,6 +334,8 @@
         "labelMarginLeft": "size"
       },
       "ChevronLink": {
+        "height": "size",
+        "textLineHeight": "lineHeight",
         "color": "color",
         "outerBorderColor": "color",
         "leftIcon": "icon",
@@ -489,6 +506,7 @@
         "space": "integer"
       },
       "IconButton": {
+        "icon": "icon",
         "backgroundColor": "color",
         "borderRadius": "radius",
         "borderColor": "color",
@@ -543,6 +561,38 @@
         "itemIconColor": "color",
         "listGutter": "size"
       },
+      "ListBox": {
+        "groupBorderRadius": "radius",
+        "groupBorderWidth": "border",
+        "groupFontSize": "size",
+        "groupFontName": "fontName",
+        "groupFontWeight": "fontWeight",
+        "groupColor": "color",
+        "groupBorderColor": "color",
+        "groupBackgroundColor": "color",
+        "groupPaddingTop": "size",
+        "groupPaddingBottom": "size",
+        "groupPaddingLeft": "size",
+        "groupPaddingRight": "size",
+        "groupIcon": "icon",
+        "itemDisplay": "show",
+        "itemFontName": "fontName",
+        "itemFontWeight": "fontWeight",
+        "itemFontSize": "size",
+        "itemPaddingTop": "size",
+        "itemPaddingBottom": "size",
+        "itemPaddingLeft": "size",
+        "itemPaddingRight": "size",
+        "itemColor": "color",
+        "itemBackgroundColor": "color",
+        "itemBorderBackgroundColor": "color",
+        "itemBorderLeftColor": "color",
+        "itemBorderLeftWidth": "border",
+        "itemBorderWidth": "border",
+        "itemTextDecoration": "textLine",
+        "itemOutline": "border",
+        "shadow": "shadow"
+      },
       "OrderedList": {
         "headerFontWeight": "fontWeight",
         "headerFontName": "fontName",
@@ -1707,6 +1757,56 @@
           "type": "state"
         }
       },
+      "ListBox": {
+        "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"
+          ]
+        },
+        "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"
+          ]
+        },
+        "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"
+        },
+        "expanded": {
+          "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "current": {
+          "description": "When the current item is selected",
+          "values": [
+            true
+          ],
+          "type": "state"
+        },
+        "isChild": {
+          "description": "when the item is child of another child",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "Modal": {
         "maxWidth": {
           "description": "Whether a modal should expand responsively to the maximum of 8 layout columns width",
@@ -5148,14 +5248,11 @@
       "docs": {
         "description": "A pressable themeless base component that handles pressable states and passes tokens\nbased on these to an outer border and a base Card component. Not intended to be used in\napps or sites directly: build themed components on top of this.",
         "props": {
-          "accessibilityRole": {
+          "variant": {
             "defaultValue": {
-              "value": "href ? 'link' : 'button'",
+              "value": "{}",
               "computed": false
             },
-            "required": false
-          },
-          "variant": {
             "type": {
               "name": "objectOf",
               "value": {
@@ -5176,10 +5273,18 @@
             "required": false,
             "description": ""
           },
+          "accessibilityRole": {
+            "defaultValue": {
+              "value": "href ? 'link' : 'button'",
+              "computed": false
+            },
+            "required": false
+          },
           "tokens": {
             "type": {
               "name": "custom",
               "raw": {
+                "icon": "icon",
                 "backgroundColor": "color",
                 "borderRadius": "radius",
                 "borderColor": "color",
@@ -12440,6 +12545,8 @@
             "type": {
               "name": "custom",
               "raw": {
+                "height": "size",
+                "textLineHeight": "lineHeight",
                 "color": "color",
                 "outerBorderColor": "color",
                 "leftIcon": "icon",
@@ -12521,6 +12628,39 @@
             "required": false,
             "description": "When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link."
           },
+          "iconProps": {
+            "defaultValue": {
+              "value": "{}",
+              "computed": false
+            },
+            "type": {
+              "name": "exact",
+              "value": {
+                "variant": {
+                  "name": "custom",
+                  "raw": "variantProp.propType",
+                  "required": false
+                },
+                "tokens": {
+                  "name": "custom",
+                  "raw": "getTokensPropType('Icon')",
+                  "required": false
+                },
+                "accessibilityLabel": {
+                  "name": "string",
+                  "description": "Descriptive label used in web SVG title tag for accessibility",
+                  "required": false
+                },
+                "scalesWithText": {
+                  "name": "bool",
+                  "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
+                  "required": false
+                }
+              }
+            },
+            "required": false,
+            "description": "Optional variant that may be passed down to the link's icon if there is one"
+          },
           "tokens": {
             "defaultValue": {
               "value": "{}",
@@ -12580,35 +12720,6 @@
             "required": false,
             "description": ""
           },
-          "iconProps": {
-            "type": {
-              "name": "exact",
-              "value": {
-                "variant": {
-                  "name": "custom",
-                  "raw": "variantProp.propType",
-                  "required": false
-                },
-                "tokens": {
-                  "name": "custom",
-                  "raw": "getTokensPropType('Icon')",
-                  "required": false
-                },
-                "accessibilityLabel": {
-                  "name": "string",
-                  "description": "Descriptive label used in web SVG title tag for accessibility",
-                  "required": false
-                },
-                "scalesWithText": {
-                  "name": "bool",
-                  "description": "controls whether the icon size should be proportionate to any accessibility-related font scaling.",
-                  "required": false
-                }
-              }
-            },
-            "required": false,
-            "description": "Optional variant that may be passed down to the link's icon if there is one"
-          },
           "icon": {
             "type": {
               "name": "elementType"

package/lib/Icon/IconText.js

@@ -54,15 +54,25 @@ const IconText = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   // See abandoned issue https://github.com/facebook/react-native/issues/6529
 
   const size = iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size;
-  const iconAdjusted = _Platform.default.OS === 'android' && iconContent && size ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const iconAdjustedAndriod = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: {
       transform: [{
         translateY: size * 0.2
       }]
     },
     children: iconContent
-  }) : iconContent;
-  return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [iconAdjusted, children] : [children, iconAdjusted], {
+  });
+  const iconAdjustedIOS = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: {
+      transform: [{
+        translateY: size * 0.01
+      }]
+    },
+    children: iconContent
+  });
+  const mobile = _Platform.default.OS === 'android' ? iconAdjustedAndriod : iconAdjustedIOS;
+  const adjustedContainer = _Platform.default.OS === 'web' ? iconContent : mobile;
+  return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
     space,
     direction: 'row'
   });

package/lib/IconButton/IconButton.js

@@ -86,7 +86,7 @@ const selectInnerStyle = _ref2 => {
 const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     tokens,
-    variant,
+    variant = {},
     icon: IconComponent,
     href,
     hrefAttrs,
@@ -134,7 +134,8 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
           icon: IconComponent,
           title: selectedProps.accessibilityLabel,
-          tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon')
+          tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon'),
+          variant: variant
         })
       });
     }
@@ -152,7 +153,7 @@ IconButton.propTypes = { ...selectedSystemPropTypes,
 
 const staticStyles = _StyleSheet.default.create({
   outer: {
-    alignSelf: 'flex-start'
+    alignSelf: 'baseline'
   }
 });
 

package/lib/Link/ChevronLink.js

@@ -45,9 +45,13 @@ const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       leftIcon,
       rightIcon,
       iconDisplace,
+      height,
+      textLineHeight,
       ...otherTokens
     } = getChevronTokens(linkState);
     return { ...(0, _utils.selectTokens)('Link', otherTokens),
+      height,
+      textLineHeight,
       icon: direction === 'right' ? rightIcon : leftIcon,
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
     };

package/lib/Link/LinkBase.js

@@ -62,10 +62,16 @@ const selectOuterBorderStyles = _ref => {
 
 const selectTextStyles = _ref2 => {
   let {
-    color
+    color,
+    textLineHeight,
+    blockFontSize
   } = _ref2;
   return {
     color,
+    ...(0, _ThemeProvider.applyTextStyles)({
+      lineHeight: textLineHeight,
+      blockFontSize
+    }),
     ..._Platform.default.select({
       web: {
         // TODO: https://github.com/telus/universal-design-system/issues/487
@@ -83,9 +89,9 @@ const selectBlockStyles = (_ref3, themeOptions) => {
     blockFontName
   } = _ref3;
   return (0, _ThemeProvider.applyTextStyles)({
+    lineHeight: blockLineHeight,
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
-    lineHeight: blockLineHeight,
     fontName: blockFontName,
     themeOptions
   });
@@ -153,7 +159,7 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     href,
     icon,
     iconPosition = icon ? 'left' : undefined,
-    iconProps,
+    iconProps = {},
     variant,
     tokens = {},
     children,
@@ -198,10 +204,15 @@ const LinkBase = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     ,
     ref: ref,
     style: linkState => {
-      const themeTokens = resolveLinkTokens(linkState);
+      const {
+        height,
+        ...themeTokens
+      } = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      return [height ? {
+        height
+      } : {}, outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -267,7 +278,7 @@ const staticStyles = _StyleSheet.default.create({
     justifyContent: 'flex-start'
   },
   baseline: {
-    alignSelf: 'baseline'
+    alignSelf: 'center'
   }
 });
 

package/lib-module/Icon/IconText.js

@@ -36,15 +36,28 @@ const IconText = /*#__PURE__*/forwardRef((_ref, ref) => {
 
 
   const size = iconProps === null || iconProps === void 0 ? void 0 : (_iconProps$tokens = iconProps.tokens) === null || _iconProps$tokens === void 0 ? void 0 : _iconProps$tokens.size;
-  const iconAdjusted = Platform.OS === 'android' && iconContent && size ? /*#__PURE__*/_jsx(View, {
+
+  const iconAdjustedAndriod = /*#__PURE__*/_jsx(View, {
     style: {
       transform: [{
         translateY: size * 0.2
       }]
     },
     children: iconContent
-  }) : iconContent;
-  return getStackedContent(iconPosition === 'left' ? [iconAdjusted, children] : [children, iconAdjusted], {
+  });
+
+  const iconAdjustedIOS = /*#__PURE__*/_jsx(View, {
+    style: {
+      transform: [{
+        translateY: size * 0.01
+      }]
+    },
+    children: iconContent
+  });
+
+  const mobile = Platform.OS === 'android' ? iconAdjustedAndriod : iconAdjustedIOS;
+  const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile;
+  return getStackedContent(iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer], {
     space,
     direction: 'row'
   });

package/lib-module/IconButton/IconButton.js

@@ -63,7 +63,7 @@ const selectInnerStyle = _ref2 => {
 const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     tokens,
-    variant,
+    variant = {},
     icon: IconComponent,
     href,
     hrefAttrs,
@@ -109,7 +109,8 @@ const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
         children: /*#__PURE__*/_jsx(Icon, {
           icon: IconComponent,
           title: selectedProps.accessibilityLabel,
-          tokens: selectTokens('Icon', themeTokens, 'icon')
+          tokens: selectTokens('Icon', themeTokens, 'icon'),
+          variant: variant
         })
       });
     }
@@ -126,7 +127,7 @@ IconButton.propTypes = { ...selectedSystemPropTypes,
 };
 const staticStyles = StyleSheet.create({
   outer: {
-    alignSelf: 'flex-start'
+    alignSelf: 'baseline'
   }
 });
 export default withLinkRouter(IconButton);

package/lib-module/Link/ChevronLink.js

@@ -27,9 +27,13 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
       leftIcon,
       rightIcon,
       iconDisplace,
+      height,
+      textLineHeight,
       ...otherTokens
     } = getChevronTokens(linkState);
     return { ...selectTokens('Link', otherTokens),
+      height,
+      textLineHeight,
       icon: direction === 'right' ? rightIcon : leftIcon,
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
     };

package/lib-module/Link/LinkBase.js

@@ -37,10 +37,16 @@ const selectOuterBorderStyles = _ref => {
 
 const selectTextStyles = _ref2 => {
   let {
-    color
+    color,
+    textLineHeight,
+    blockFontSize
   } = _ref2;
   return {
     color,
+    ...applyTextStyles({
+      lineHeight: textLineHeight,
+      blockFontSize
+    }),
     ...Platform.select({
       web: {
         // TODO: https://github.com/telus/universal-design-system/issues/487
@@ -58,9 +64,9 @@ const selectBlockStyles = (_ref3, themeOptions) => {
     blockFontName
   } = _ref3;
   return applyTextStyles({
+    lineHeight: blockLineHeight,
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
-    lineHeight: blockLineHeight,
     fontName: blockFontName,
     themeOptions
   });
@@ -128,7 +134,7 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     href,
     icon,
     iconPosition = icon ? 'left' : undefined,
-    iconProps,
+    iconProps = {},
     variant,
     tokens = {},
     children,
@@ -170,10 +176,15 @@ const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
     ,
     ref: ref,
     style: linkState => {
-      const themeTokens = resolveLinkTokens(linkState);
+      const {
+        height,
+        ...themeTokens
+      } = resolveLinkTokens(linkState);
       const outerBorderStyles = selectOuterBorderStyles(themeTokens);
       const decorationStyles = selectDecorationStyles(themeTokens);
-      return [outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
+      return [height ? {
+        height
+      } : {}, outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
     },
     children: linkState => {
       const themeTokens = resolveLinkTokens(linkState);
@@ -238,7 +249,7 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'flex-start'
   },
   baseline: {
-    alignSelf: 'baseline'
+    alignSelf: 'center'
   }
 });
 export default withLinkRouter(LinkBase);

package/package.json

@@ -11,13 +11,13 @@
     "@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.20.0",
+    "@telus-uds/system-theme-tokens": "^2.22.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
     "prop-types": "^15.7.2",
     "react-native-picker-select": "^8.0.4",
-    "semver": "^7.3.5"
+    "semver": "7.3.5"
   },
   "description": "Base components",
   "devDependencies": {
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.35.0"
+  "version": "1.37.0"
 }

package/src/Icon/IconText.jsx

@@ -23,15 +23,19 @@ const IconText = forwardRef(
     // Inline images on Android are always baseline-aligned which makes them look misaligned - offset it.
     // See abandoned issue https://github.com/facebook/react-native/issues/6529
     const size = iconProps?.tokens?.size
-    const iconAdjusted =
-      Platform.OS === 'android' && iconContent && size ? (
-        <View style={{ transform: [{ translateY: size * 0.2 }] }}>{iconContent}</View>
-      ) : (
-        iconContent
-      )
+    const iconAdjustedAndriod = (
+      <View style={{ transform: [{ translateY: size * 0.2 }] }}>{iconContent}</View>
+    )
+
+    const iconAdjustedIOS = (
+      <View style={{ transform: [{ translateY: size * 0.01 }] }}>{iconContent}</View>
+    )
+
+    const mobile = Platform.OS === 'android' ? iconAdjustedAndriod : iconAdjustedIOS
+    const adjustedContainer = Platform.OS === 'web' ? iconContent : mobile
 
     return getStackedContent(
-      iconPosition === 'left' ? [iconAdjusted, children] : [children, iconAdjusted],
+      iconPosition === 'left' ? [adjustedContainer, children] : [children, adjustedContainer],
       { space, direction: 'row' }
     )
   }

package/src/IconButton/IconButton.jsx

@@ -54,7 +54,7 @@ const IconButton = forwardRef(
   (
     {
       tokens,
-      variant,
+      variant = {},
       icon: IconComponent,
       href,
       hrefAttrs,
@@ -93,6 +93,7 @@ const IconButton = forwardRef(
                 icon={IconComponent}
                 title={selectedProps.accessibilityLabel}
                 tokens={selectTokens('Icon', themeTokens, 'icon')}
+                variant={variant}
               />
             </View>
           )
@@ -115,7 +116,7 @@ IconButton.propTypes = {
 
 const staticStyles = StyleSheet.create({
   outer: {
-    alignSelf: 'flex-start'
+    alignSelf: 'baseline'
   }
 })
 

package/src/Link/ChevronLink.jsx

@@ -15,9 +15,12 @@ const ChevronLink = forwardRef(
   ({ direction = 'right', children, tokens, variant, dataSet, ...linkProps }, ref) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {
-      const { leftIcon, rightIcon, iconDisplace, ...otherTokens } = getChevronTokens(linkState)
+      const { leftIcon, rightIcon, iconDisplace, height, textLineHeight, ...otherTokens } =
+        getChevronTokens(linkState)
       return {
         ...selectTokens('Link', otherTokens),
+        height,
+        textLineHeight,
         icon: direction === 'right' ? rightIcon : leftIcon,
         iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
       }

package/src/Link/LinkBase.jsx

@@ -42,24 +42,27 @@ const selectOuterBorderStyles = ({
       }
     : {}
 
-const selectTextStyles = ({ color }) => ({
-  color,
-  ...Platform.select({
-    web: {
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      transition: 'color 200ms'
-    }
-  })
-})
+const selectTextStyles = ({ color, textLineHeight, blockFontSize }) => {
+  return {
+    color,
+    ...applyTextStyles({ lineHeight: textLineHeight, blockFontSize }),
+    ...Platform.select({
+      web: {
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        transition: 'color 200ms'
+      }
+    })
+  }
+}
 
 const selectBlockStyles = (
   { blockFontWeight, blockFontSize, blockLineHeight, blockFontName },
   themeOptions
 ) =>
   applyTextStyles({
+    lineHeight: blockLineHeight,
     fontWeight: blockFontWeight,
     fontSize: blockFontSize,
-    lineHeight: blockLineHeight,
     fontName: blockFontName,
     themeOptions
   })
@@ -111,7 +114,7 @@ const LinkBase = forwardRef(
       href,
       icon,
       iconPosition = icon ? 'left' : undefined,
-      iconProps,
+      iconProps = {},
       variant,
       tokens = {},
       children,
@@ -147,11 +150,12 @@ const LinkBase = forwardRef(
         inlineFlex={hasIcon} // assuming links without icons should be inline (even if they are long)
         ref={ref}
         style={(linkState) => {
-          const themeTokens = resolveLinkTokens(linkState)
+          const { height, ...themeTokens } = resolveLinkTokens(linkState)
           const outerBorderStyles = selectOuterBorderStyles(themeTokens)
           const decorationStyles = selectDecorationStyles(themeTokens)
 
           return [
+            height ? { height } : {},
             outerBorderStyles,
             blockLeftStyle,
             decorationStyles,
@@ -222,7 +226,7 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'flex-start'
   },
   baseline: {
-    alignSelf: 'baseline'
+    alignSelf: 'center'
   }
 })