@telus-uds/components-base 3.12.1 → 3.13.0

package/src/FlexGrid/FlexGrid.jsx

@@ -10,7 +10,8 @@ import {
   selectSystemProps,
   BaseView,
   StyleSheet,
-  createMediaQueryStyles
+  createMediaQueryStyles,
+  useResponsiveProp
 } from '../utils'
 import Row from './Row'
 import Col from './Col'
@@ -21,6 +22,37 @@ import { useViewport } from '../ViewportProvider'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
+const CONTENT_MAX_WIDTH = 'max'
+const CONTENT_FULL_WIDTH = 'full'
+
+/**
+ * Resolves the maximum width for content based on the provided value and responsive width.
+ *
+ * @param {number|string|null|undefined} contentMinWidthValue - The minimum width value for the content.
+ *        Can be a number (pixels), a string constant (e.g., CONTENT_FULL_WIDTH, CONTENT_MAX_WIDTH), or null/undefined.
+ * @param {number|string} responsiveWidth - The responsive width to use when contentMinWidthValue is CONTENT_MAX_WIDTH.
+ * @returns {number|string|null} The resolved maximum width value, which can be a number, a string (e.g., '100%'), or null.
+ */
+const resolveContentMaxWidth = (contentMinWidthValue, responsiveWidth) => {
+  if (!contentMinWidthValue) {
+    return null
+  }
+
+  if (contentMinWidthValue === CONTENT_FULL_WIDTH) {
+    return '100%'
+  }
+
+  if (Number.isFinite(contentMinWidthValue)) {
+    return contentMinWidthValue
+  }
+
+  if (contentMinWidthValue === CONTENT_MAX_WIDTH) {
+    return responsiveWidth
+  }
+
+  return contentMinWidthValue
+}
+
 /**
  * A mobile-first flexbox grid.
  */
@@ -40,6 +72,7 @@ const FlexGrid = React.forwardRef(
       accessibilityRole,
       children,
       dataSet,
+      contentMinWidth,
       ...rest
     },
     ref
@@ -47,30 +80,36 @@ const FlexGrid = React.forwardRef(
     const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse])
     const viewport = useViewport()
     const {
+      themeOptions,
       themeOptions: { enableMediaQueryStyleSheet }
     } = useTheme()
 
     let flexgridStyles
     let mediaIds
 
+    const contentMinWidthValue = useResponsiveProp(contentMinWidth)
+    const responsiveWidth = useResponsiveProp(themeOptions?.contentMaxWidth)
+    const maxWidth = resolveContentMaxWidth(contentMinWidthValue, responsiveWidth)
+
     const stylesByViewport = {
       xs: {
+        maxWidth: limitWidth ? viewports.map.get('sm') : maxWidth,
         flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
       },
       sm: {
-        maxWidth: limitWidth && viewports.map.get('sm'),
+        maxWidth: limitWidth ? viewports.map.get('sm') : maxWidth,
         flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
       },
       md: {
-        maxWidth: limitWidth && viewports.map.get('md'),
+        maxWidth: limitWidth ? viewports.map.get('md') : maxWidth,
         flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
       },
       lg: {
-        maxWidth: limitWidth && viewports.map.get('lg'),
+        maxWidth: limitWidth ? viewports.map.get('lg') : maxWidth,
         flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
       },
       xl: {
-        maxWidth: limitWidth && viewports.map.get('xl'),
+        maxWidth: limitWidth ? viewports.map.get('xl') : maxWidth,
         flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
       }
     }
@@ -162,7 +201,24 @@ FlexGrid.propTypes = {
   /**
    * The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
    */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  /**
+   * The minimum width of the content in the FlexGrid.
+   * This prop accepts responsive values for different viewports. If a number is provided,
+   * it will be the max content width for the desired viewport.
+   * - `xs`: 'max' | 'full' | <number>
+   * - `sm`: 'max' | 'full' | <number>
+   * - `md`: 'max' | 'full' | <number>
+   * - `lg`: 'max' | 'full' | <number>
+   * - `xl`: 'max' | 'full' | <number>
+   */
+  contentMinWidth: PropTypes.shape({
+    xl: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    lg: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    md: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    sm: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number]),
+    xs: PropTypes.oneOfType([PropTypes.oneOf(['max', 'full']), PropTypes.number])
+  })
 }
 
 FlexGrid.Row = Row

package/src/Icon/Icon.jsx

@@ -38,7 +38,9 @@ const Icon = React.forwardRef(
           width: themeTokens.size + themeTokens.width * 2, // sets the diameter of the circle which is the size of the icon plus twice the general padding established to obtain a perfect circle
           height: themeTokens.size + themeTokens.width * 2
         }
-      : {}
+      : {
+          padding: themeTokens.padding
+        }
 
     const getIconContentForMobile = () => {
       if (Object.keys(paddingStyles).length) {

package/src/InputLabel/InputLabel.jsx

@@ -161,7 +161,7 @@ InputLabel.propTypes = {
   /**
    * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
    */
-  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
+  tooltip: PropTypes.oneOfType([PropTypes.shape(tooltipPropTypes), PropTypes.string]),
   /**
    * Current number of characterts of an input text.
    */

package/src/InputSupports/InputSupports.jsx

@@ -121,7 +121,7 @@ InputSupports.propTypes = {
    * 1. `tooltip` as a string - The content of the tooltip.
    * 2. `tooltip` as an object - Tooltip component props to be passed.
    */
-  tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
+  tooltip: PropTypes.oneOfType([PropTypes.shape(tooltipPropTypes), PropTypes.string]),
   /**
    * Use to visually mark an input as valid or invalid.
    */

package/src/Notification/Notification.jsx

@@ -26,6 +26,8 @@ import useCopy from '../utils/useCopy'
 import dictionary from './dictionary'
 import { useViewport } from '../ViewportProvider'
 
+const CONTENT_MAX_WIDTH = 'max'
+
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
 const selectContainerStyles = (tokens) => ({ ...tokens })
@@ -65,8 +67,14 @@ const selectDismissButtonContainerStyles = ({ dismissButtonGap }) => ({
   placeContent: 'start'
 })
 
-const selectContentContainerStyle = (themeTokens, maxWidth, system, viewport) => ({
-  maxWidth: system && viewport === 'xl' ? maxWidth : '100%',
+const selectContentContainerStyle = (
+  themeTokens,
+  maxWidth,
+  system,
+  viewport,
+  useContentMaxWidth
+) => ({
+  maxWidth: system && (useContentMaxWidth || viewport === 'xl') ? maxWidth : '100%',
   width: '100%',
   paddingRight: themeTokens?.containerPaddingRight,
   paddingLeft: themeTokens?.containerPaddingLeft
@@ -79,7 +87,8 @@ const getMediaQueryStyles = (
   mediaIdsRef,
   dismissible,
   viewport,
-  system
+  system,
+  useContentMaxWidth
 ) => {
   const transformedSelectContainerStyles = Object.entries(themeTokens).reduce(
     (acc, [vp, viewportTokens]) => {
@@ -100,7 +109,7 @@ const getMediaQueryStyles = (
   const transformedSelectContentContainerStyles = Object.entries(themeTokens).reduce(
     (acc, [vp, viewportTokens]) => {
       acc[vp] = {
-        ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp),
+        ...selectContentContainerStyle(viewportTokens, maxWidth, system, vp, useContentMaxWidth),
         flexDirection: 'row',
         flexShrink: 1,
         justifyContent: 'space-between',
@@ -169,7 +178,15 @@ const getMediaQueryStyles = (
   }
 }
 
-const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
+const getDefaultStyles = (
+  themeTokens,
+  themeOptions,
+  maxWidth,
+  dismissible,
+  viewport,
+  system,
+  useContentMaxWidth
+) => ({
   containerStyles: {
     container: {
       flexDirection: 'column',
@@ -181,7 +198,7 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
       flexDirection: 'row',
       flexShrink: 1,
       justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport),
+      ...selectContentContainerStyle(themeTokens, maxWidth, system, viewport, useContentMaxWidth),
       ...(system && { alignSelf: 'center' })
     }
   },
@@ -251,7 +268,20 @@ const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, view
  * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  */
 const Notification = React.forwardRef(
-  ({ children, system, dismissible, copy = 'en', tokens, variant, onDismiss, ...rest }, ref) => {
+  (
+    {
+      children,
+      system,
+      dismissible,
+      copy = 'en',
+      tokens,
+      variant,
+      onDismiss,
+      contentMinWidth,
+      ...rest
+    },
+    ref
+  ) => {
     const [isDismissed, setIsDismissed] = React.useState(false)
     const viewport = useViewport()
     const getCopy = useCopy({ dictionary, copy })
@@ -266,6 +296,7 @@ const Notification = React.forwardRef(
       system: isSystemEnabled,
       viewport
     })
+    const useContentMaxWidth = useResponsiveProp(contentMinWidth) === CONTENT_MAX_WIDTH
     const maxWidth = useResponsiveProp(
       themeOptions?.contentMaxWidth,
       viewports.map.get(viewports.xl)
@@ -300,7 +331,8 @@ const Notification = React.forwardRef(
         mediaIdsRef,
         dismissible,
         viewport,
-        isSystemEnabled
+        isSystemEnabled,
+        useContentMaxWidth
       )
     } else {
       notificationComponentRef.current = getDefaultStyles(
@@ -309,7 +341,8 @@ const Notification = React.forwardRef(
         maxWidth,
         dismissible,
         viewport,
-        isSystemEnabled
+        isSystemEnabled,
+        useContentMaxWidth
       )
     }
 
@@ -434,6 +467,22 @@ Notification.propTypes = {
    * Callback function called when the dismiss button is clicked
    */
   onDismiss: PropTypes.func,
+  /**
+   * The minimum width of the content in the Notification when using the system variant.
+   * This prop accepts responsive values for different viewports.
+   * - `xs`: 'max' | 'full'
+   * - `sm`: 'max' | 'full'
+   * - `md`: 'max' | 'full'
+   * - `lg`: 'max' | 'full'
+   * - `xl`: 'max' | 'full'
+   */
+  contentMinWidth: PropTypes.shape({
+    xl: PropTypes.oneOf(['max', 'full']),
+    lg: PropTypes.oneOf(['max', 'full']),
+    md: PropTypes.oneOf(['max', 'full']),
+    sm: PropTypes.oneOf(['max', 'full']),
+    xs: PropTypes.oneOf(['max', 'full'])
+  }),
   tokens: getTokensPropType('Notification'),
   variant: variantProp.propType
 }

package/src/utils/props/inputSupportsProps.js

@@ -38,7 +38,7 @@ export default {
      * 1. `tooltip` as a string - The content of the tooltip.
      * 2. `tooltip` as an object - Tooltip component props to be passed.
      */
-    tooltip: PropTypes.oneOfType([tooltipPropTypes, PropTypes.string]),
+    tooltip: PropTypes.oneOfType([PropTypes.shape(tooltipPropTypes), PropTypes.string]),
     /**
      * Use to visually mark an input as valid or invalid.
      */