@telus-uds/components-base 1.47.0 → 1.48.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 02 Jun 2023 00:27:36 GMT and should not be manually modified.
+This log was last generated on Tue, 06 Jun 2023 20:37:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.48.0
+
+Tue, 06 Jun 2023 20:37:42 GMT
+
+### Minor changes
+
+- add new story for 'ButtonDropdown' (kyle.king2@telus.com)
+- change animation to skeleton component (mauricio.batresmontejo@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.30.0
+
+### Patches
+
+- Fix an issue where `Button` may not align as expected in a flex container (shahzaibkhalidmalik@outlook.com)
+
 ## 1.47.0
 
-Fri, 02 Jun 2023 00:27:36 GMT
+Fri, 02 Jun 2023 00:34:55 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -307,7 +307,6 @@
         "color": "color",
         "lineHeight": "lineHeight",
         "textAlign": "flexJustifyContent",
-        "alignSelf": "flexAlign",
         "fontName": "fontName",
         "fontWeight": "fontWeight",
         "backgroundColor": "color",
@@ -1683,6 +1682,8 @@
       },
       "Skeleton": {
         "color": "color",
+        "secondColor": "color",
+        "animationDuration": "integer",
         "size": "size",
         "radius": "radius",
         "baseWidth": "size",
@@ -9186,6 +9187,8 @@
               "name": "custom",
               "raw": {
                 "color": "color",
+                "secondColor": "color",
+                "animationDuration": "integer",
                 "size": "size",
                 "radius": "radius",
                 "baseWidth": "size",
@@ -10873,7 +10876,6 @@
                 "color": "color",
                 "lineHeight": "lineHeight",
                 "textAlign": "flexJustifyContent",
-                "alignSelf": "flexAlign",
                 "fontName": "fontName",
                 "fontWeight": "fontWeight",
                 "backgroundColor": "color",
@@ -11072,7 +11074,6 @@
                 "color": "color",
                 "lineHeight": "lineHeight",
                 "textAlign": "flexJustifyContent",
-                "alignSelf": "flexAlign",
                 "fontName": "fontName",
                 "fontWeight": "fontWeight",
                 "backgroundColor": "color",
@@ -11498,7 +11499,6 @@
                 "color": "color",
                 "lineHeight": "lineHeight",
                 "textAlign": "flexJustifyContent",
-                "alignSelf": "flexAlign",
                 "fontName": "fontName",
                 "fontWeight": "fontWeight",
                 "backgroundColor": "color",

package/lib/Button/ButtonBase.js

@@ -45,7 +45,6 @@ const getOuterBorderOffset = _ref => {
 
 const selectOuterContainerStyles = _ref2 => {
   let {
-    alignSelf,
     opacity,
     outerBorderColor,
     outerBorderWidth,
@@ -53,8 +52,11 @@ const selectOuterContainerStyles = _ref2 => {
     borderRadius,
     outerBackgroundColor
   } = _ref2;
-  return {
-    alignSelf,
+  return { ..._Platform.default.select({
+      native: {
+        alignSelf: 'flex-start'
+      }
+    }),
     backgroundColor: outerBackgroundColor,
     opacity,
     ...(0, _ThemeProvider.applyOuterBorder)({
@@ -221,6 +223,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
     web: {
       // if it would overflow the container, wraps instead
       maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      width: 'fit-content',
       outline: 'none',
       // removes the default browser :focus outline
       ...(0, _utils.getCursorStyle)(inactive, accessibilityRole)

package/lib/Skeleton/Skeleton.js

@@ -100,11 +100,18 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     }
   } : // Size by an index on the spacing scale (getting default index from theme if none provided)
   sizeIndex || themeTokens.size;
-  const skeletonHeight = (0, _utils.useSpacingScale)(spacingScaleValue);
-  const nativeAnimation = (0, _useSkeletonNativeAnimation.default)();
+  const skeletonHeight = (0, _utils.useSpacingScale)(spacingScaleValue); // Animation color and animation duration
+
+  const {
+    secondColor,
+    animationDuration
+  } = themeTokens;
+  const nativeAnimation = (0, _useSkeletonNativeAnimation.default)({
+    animationDuration
+  });
 
   const getAnimationBasedOnPlatform = () => {
-    const animation = _Platform.default.OS === 'web' ? _skeletonWebAnimation.default : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
+    const animation = _Platform.default.OS === 'web' ? (0, _skeletonWebAnimation.default)(secondColor, animationDuration) : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
     // @see https://github.com/necolas/react-native-web/issues/2387
 
     const styles = _StyleSheet.default.create({

package/lib/Skeleton/skeleton.constant.js

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.OPACITY_STOP = exports.DEFAULT_OPACITY = exports.ANIMATION_DURATION = void 0;
+exports.OPACITY_STOP = exports.DEFAULT_OPACITY = void 0;
 const DEFAULT_OPACITY = 1;
 exports.DEFAULT_OPACITY = DEFAULT_OPACITY;
 const OPACITY_STOP = 0.4;
-exports.OPACITY_STOP = OPACITY_STOP;
-const ANIMATION_DURATION = 1500;
-exports.ANIMATION_DURATION = ANIMATION_DURATION;
+exports.OPACITY_STOP = OPACITY_STOP;

package/lib/Skeleton/skeletonWebAnimation.js

@@ -5,23 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _skeleton = require("./skeleton.constant");
-
-var _default = {
-  animationDuration: `${_skeleton.ANIMATION_DURATION}ms`,
-  animationTimingFunction: 'ease-in-out',
-  animationDelay: '0.5s',
-  animationIterationCount: 'infinite',
-  animationKeyframes: {
-    '0%': {
-      opacity: _skeleton.DEFAULT_OPACITY
-    },
-    '50%': {
-      opacity: _skeleton.OPACITY_STOP
-    },
-    '100%': {
-      opacity: _skeleton.DEFAULT_OPACITY
+const skeletonWebAnimation = (secondColor, animationTime) => {
+  return {
+    animationDuration: `${animationTime}ms`,
+    animationTimingFunction: 'ease-in-out',
+    animationDelay: '0.5s',
+    animationIterationCount: 'infinite',
+    animationKeyframes: {
+      '50%': {
+        backgroundColor: secondColor
+      }
     }
-  }
+  };
 };
+
+var _default = skeletonWebAnimation;
 exports.default = _default;

package/lib/Skeleton/useSkeletonNativeAnimation.js

@@ -15,16 +15,21 @@ var _skeleton = require("./skeleton.constant");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const useSkeletonNativeAnimation = () => {
+const useSkeletonNativeAnimation = _ref => {
+  let {
+    animationDuration
+  } = _ref;
   const fadeAnimation = (0, _react.useRef)(new _Animated.default.Value(_skeleton.DEFAULT_OPACITY)).current;
+  /* eslint-disable react-hooks/exhaustive-deps */
+
   (0, _react.useEffect)(() => {
     const fade = _Animated.default.sequence([_Animated.default.timing(fadeAnimation, {
       toValue: _skeleton.OPACITY_STOP,
-      duration: _skeleton.ANIMATION_DURATION,
+      duration: animationDuration,
       useNativeDriver: _Platform.default.OS !== 'web'
     }), _Animated.default.timing(fadeAnimation, {
       toValue: _skeleton.DEFAULT_OPACITY,
-      duration: _skeleton.ANIMATION_DURATION,
+      duration: animationDuration,
       useNativeDriver: _Platform.default.OS !== 'web'
     })]);
 

package/lib-module/Button/ButtonBase.js

@@ -21,7 +21,6 @@ const getOuterBorderOffset = _ref => {
 
 const selectOuterContainerStyles = _ref2 => {
   let {
-    alignSelf,
     opacity,
     outerBorderColor,
     outerBorderWidth,
@@ -29,8 +28,11 @@ const selectOuterContainerStyles = _ref2 => {
     borderRadius,
     outerBackgroundColor
   } = _ref2;
-  return {
-    alignSelf,
+  return { ...Platform.select({
+      native: {
+        alignSelf: 'flex-start'
+      }
+    }),
     backgroundColor: outerBackgroundColor,
     opacity,
     ...applyOuterBorder({
@@ -197,6 +199,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
     web: {
       // if it would overflow the container, wraps instead
       maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      width: 'fit-content',
       outline: 'none',
       // removes the default browser :focus outline
       ...getCursorStyle(inactive, accessibilityRole)

package/lib-module/Skeleton/Skeleton.js

@@ -75,11 +75,18 @@ const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
     }
   } : // Size by an index on the spacing scale (getting default index from theme if none provided)
   sizeIndex || themeTokens.size;
-  const skeletonHeight = useSpacingScale(spacingScaleValue);
-  const nativeAnimation = useSkeletonNativeAnimation();
+  const skeletonHeight = useSpacingScale(spacingScaleValue); // Animation color and animation duration
+
+  const {
+    secondColor,
+    animationDuration
+  } = themeTokens;
+  const nativeAnimation = useSkeletonNativeAnimation({
+    animationDuration
+  });
 
   const getAnimationBasedOnPlatform = () => {
-    const animation = Platform.OS === 'web' ? skeletonWebAnimation : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
+    const animation = Platform.OS === 'web' ? skeletonWebAnimation(secondColor, animationDuration) : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
     // @see https://github.com/necolas/react-native-web/issues/2387
 
     const styles = StyleSheet.create({

package/lib-module/Skeleton/skeleton.constant.js

@@ -1,3 +1,2 @@
 export const DEFAULT_OPACITY = 1;
-export const OPACITY_STOP = 0.4;
-export const ANIMATION_DURATION = 1500;
+export const OPACITY_STOP = 0.4;

package/lib-module/Skeleton/skeletonWebAnimation.js

@@ -1,18 +1,15 @@
-import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
-export default {
-  animationDuration: `${ANIMATION_DURATION}ms`,
-  animationTimingFunction: 'ease-in-out',
-  animationDelay: '0.5s',
-  animationIterationCount: 'infinite',
-  animationKeyframes: {
-    '0%': {
-      opacity: DEFAULT_OPACITY
-    },
-    '50%': {
-      opacity: OPACITY_STOP
-    },
-    '100%': {
-      opacity: DEFAULT_OPACITY
+const skeletonWebAnimation = (secondColor, animationTime) => {
+  return {
+    animationDuration: `${animationTime}ms`,
+    animationTimingFunction: 'ease-in-out',
+    animationDelay: '0.5s',
+    animationIterationCount: 'infinite',
+    animationKeyframes: {
+      '50%': {
+        backgroundColor: secondColor
+      }
     }
-  }
-};
+  };
+};
+
+export default skeletonWebAnimation;

package/lib-module/Skeleton/useSkeletonNativeAnimation.js

@@ -1,18 +1,23 @@
 import { useEffect, useRef } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Platform from "react-native-web/dist/exports/Platform";
-import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
+import { DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
 
-const useSkeletonNativeAnimation = () => {
+const useSkeletonNativeAnimation = _ref => {
+  let {
+    animationDuration
+  } = _ref;
   const fadeAnimation = useRef(new Animated.Value(DEFAULT_OPACITY)).current;
+  /* eslint-disable react-hooks/exhaustive-deps */
+
   useEffect(() => {
     const fade = Animated.sequence([Animated.timing(fadeAnimation, {
       toValue: OPACITY_STOP,
-      duration: ANIMATION_DURATION,
+      duration: animationDuration,
       useNativeDriver: Platform.OS !== 'web'
     }), Animated.timing(fadeAnimation, {
       toValue: DEFAULT_OPACITY,
-      duration: ANIMATION_DURATION,
+      duration: animationDuration,
       useNativeDriver: Platform.OS !== 'web'
     })]);
     Animated.loop(fade).start();

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.1",
-    "@telus-uds/system-theme-tokens": "^2.29.0",
+    "@telus-uds/system-theme-tokens": "^2.30.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.47.0"
+  "version": "1.48.0"
 }

package/src/Button/ButtonBase.jsx

@@ -30,7 +30,6 @@ const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
   outerBorderGap + outerBorderWidth
 
 const selectOuterContainerStyles = ({
-  alignSelf,
   opacity,
   outerBorderColor,
   outerBorderWidth,
@@ -38,7 +37,11 @@ const selectOuterContainerStyles = ({
   borderRadius,
   outerBackgroundColor
 }) => ({
-  alignSelf,
+  ...Platform.select({
+    native: {
+      alignSelf: 'flex-start'
+    }
+  }),
   backgroundColor: outerBackgroundColor,
   opacity,
   ...applyOuterBorder({
@@ -162,6 +165,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
     web: {
       // if it would overflow the container, wraps instead
       maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      width: 'fit-content',
       outline: 'none', // removes the default browser :focus outline
       ...getCursorStyle(inactive, accessibilityRole)
     },

package/src/Skeleton/Skeleton.jsx

@@ -63,10 +63,17 @@ const Skeleton = forwardRef(
         : // Size by an index on the spacing scale (getting default index from theme if none provided)
           sizeIndex || themeTokens.size
     const skeletonHeight = useSpacingScale(spacingScaleValue)
-    const nativeAnimation = useSkeletonNativeAnimation()
+
+    // Animation color and animation duration
+    const { secondColor, animationDuration } = themeTokens
+
+    const nativeAnimation = useSkeletonNativeAnimation({ animationDuration })
 
     const getAnimationBasedOnPlatform = () => {
-      const animation = Platform.OS === 'web' ? skeletonWebAnimation : nativeAnimation
+      const animation =
+        Platform.OS === 'web'
+          ? skeletonWebAnimation(secondColor, animationDuration)
+          : nativeAnimation
       // We must pass the animation styles through `StyleSheet.create`
       // @see https://github.com/necolas/react-native-web/issues/2387
       const styles = StyleSheet.create({ animation })

package/src/Skeleton/skeleton.constant.js

@@ -1,3 +1,2 @@
 export const DEFAULT_OPACITY = 1
 export const OPACITY_STOP = 0.4
-export const ANIMATION_DURATION = 1500

package/src/Skeleton/skeletonWebAnimation.js

@@ -1,13 +1,13 @@
-import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant'
-
-export default {
-  animationDuration: `${ANIMATION_DURATION}ms`,
-  animationTimingFunction: 'ease-in-out',
-  animationDelay: '0.5s',
-  animationIterationCount: 'infinite',
-  animationKeyframes: {
-    '0%': { opacity: DEFAULT_OPACITY },
-    '50%': { opacity: OPACITY_STOP },
-    '100%': { opacity: DEFAULT_OPACITY }
+const skeletonWebAnimation = (secondColor, animationTime) => {
+  return {
+    animationDuration: `${animationTime}ms`,
+    animationTimingFunction: 'ease-in-out',
+    animationDelay: '0.5s',
+    animationIterationCount: 'infinite',
+    animationKeyframes: {
+      '50%': { backgroundColor: secondColor }
+    }
   }
 }
+
+export default skeletonWebAnimation

package/src/Skeleton/useSkeletonNativeAnimation.js

@@ -1,20 +1,21 @@
 import { useEffect, useRef } from 'react'
 import { Animated, Platform } from 'react-native'
-import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant'
+import { DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant'
 
-const useSkeletonNativeAnimation = () => {
+const useSkeletonNativeAnimation = ({ animationDuration }) => {
   const fadeAnimation = useRef(new Animated.Value(DEFAULT_OPACITY)).current
 
+  /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
     const fade = Animated.sequence([
       Animated.timing(fadeAnimation, {
         toValue: OPACITY_STOP,
-        duration: ANIMATION_DURATION,
+        duration: animationDuration,
         useNativeDriver: Platform.OS !== 'web'
       }),
       Animated.timing(fadeAnimation, {
         toValue: DEFAULT_OPACITY,
-        duration: ANIMATION_DURATION,
+        duration: animationDuration,
         useNativeDriver: Platform.OS !== 'web'
       })
     ])