botframework-webchat-fluent-theme 4.17.0-main.20240411.ff34969 → 4.17.0-main.20240416.e3f5401

package/src/components/suggestedActions/SuggestedAction.tsx

@@ -2,10 +2,10 @@ import { hooks } from 'botframework-webchat-component';
 import { type DirectLineCardAction } from 'botframework-webchat-core';
 import cx from 'classnames';
 import React, { MouseEventHandler, memo, useCallback, useRef } from 'react';
-import AccessibleButton from './AccessibleButton';
 import { useStyles } from '../../styles';
+import AccessibleButton from './AccessibleButton';
 
-const { useScrollToEnd, useStyleSet, usePerformCardAction, useFocus, useSuggestedActions, useDisabled } = hooks;
+const { useDisabled, useFocus, usePerformCardAction, useScrollToEnd, useStyleSet, useSuggestedActions } = hooks;
 
 type SuggestedActionProps = Readonly<{
   buttonText: string | undefined;
@@ -31,17 +31,16 @@ type SuggestedActionProps = Readonly<{
 
 const styles = {
   'webchat-fluent__suggested-action': {
+    alignItems: 'center',
     background: 'transparent',
     border: '1px solid var(--webchat-colorBrandStroke2)',
     borderRadius: '8px',
     cursor: 'pointer',
-    fontSize: '12px',
-    lineHeight: '14px',
-    padding: '6px 8px 4px',
-    textAlign: 'start',
     display: 'flex',
+    fontSize: '12px',
     gap: '4px',
-    alignItems: 'center',
+    padding: '4px 8px 4px',
+    textAlign: 'start',
     transition: 'all .15s ease-out',
 
     '@media (hover: hover)': {
@@ -50,21 +49,20 @@ const styles = {
         color: 'var(--webchat-colorBrandForeground2Hover)'
       }
     },
+
     '&:not([aria-disabled="true"]):active': {
       backgroundColor: 'var(--webchat-colorBrandBackground2Pressed)',
       color: 'var(--webchat-colorBrandForeground2Pressed)'
     },
+
     '&[aria-disabled="true"]': {
-      color: ' var(--webchat-colorNeutralForegroundDisabled)',
+      color: 'var(--webchat-colorNeutralForegroundDisabled)',
       cursor: 'not-allowed'
     }
   },
 
   'webchat-fluent__suggested-action__image': {
-    width: '1em',
-    height: '1em',
-    fontSize: '20px',
-    translate: '0 -1px'
+    height: '12px'
   }
 };
 

package/src/components/suggestedActions/index.tsx

@@ -2,33 +2,43 @@ import { hooks } from 'botframework-webchat-component';
 import cx from 'classnames';
 import React, { memo, type ReactNode } from 'react';
 import { useStyles } from '../../styles';
-import computeSuggestedActionText from './private/computeSuggestedActionText';
 import SuggestedAction from './SuggestedAction';
+import computeSuggestedActionText from './private/computeSuggestedActionText';
 
-const { useLocalizer, useStyleSet, useSuggestedActions } = hooks;
+const { useLocalizer, useStyleOptions, useStyleSet, useSuggestedActions } = hooks;
 
 const styles = {
   'webchat-fluent__suggested-actions': {
     alignItems: 'flex-end',
     alignSelf: 'flex-end',
     display: 'flex',
-    flexDirection: 'column',
     gap: '8px',
 
     '&:not(:empty)': {
       paddingBlockEnd: '8px',
       paddingInlineStart: '4px'
+    },
+
+    '&.webchat-fluent__suggested-actions--flow': {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'flex-end'
+    },
+
+    '&.webchat-fluent__suggested-actions--stacked': {
+      flexDirection: 'column'
     }
   }
 };
 
-function SuggestedActionStackedContainer(
+function SuggestedActionStackedOrFlowContainer(
   props: Readonly<{
     'aria-label'?: string | undefined;
     children?: ReactNode | undefined;
     className?: string | undefined;
   }>
 ) {
+  const [{ suggestedActionLayout }] = useStyleOptions();
   const [{ suggestedActions: suggestedActionsStyleSet }] = useStyleSet();
   const classNames = useStyles(styles);
 
@@ -37,7 +47,15 @@ function SuggestedActionStackedContainer(
       aria-label={props['aria-label']}
       aria-live="polite"
       aria-orientation="vertical"
-      className={cx(classNames['webchat-fluent__suggested-actions'], suggestedActionsStyleSet + '', props.className)}
+      className={cx(
+        classNames['webchat-fluent__suggested-actions'],
+        suggestedActionsStyleSet + '',
+        {
+          'webchat-fluent__suggested-actions--flow': suggestedActionLayout === 'flow',
+          'webchat-fluent__suggested-actions--stacked': suggestedActionLayout !== 'flow'
+        },
+        props.className
+      )}
       role="toolbar"
     >
       {!!props.children && !!React.Children.count(props.children) && props.children}
@@ -91,12 +109,12 @@ function SuggestedActions() {
     );
   });
   return (
-    <SuggestedActionStackedContainer
+    <SuggestedActionStackedOrFlowContainer
       aria-label={localize('SUGGESTED_ACTIONS_LABEL_ALT')}
       className={classNames['webchat-fluent__suggested-actions']}
     >
       {children}
-    </SuggestedActionStackedContainer>
+    </SuggestedActionStackedOrFlowContainer>
   );
 }
 

package/src/components/telephoneKeypad/private/Button.tsx

@@ -19,7 +19,7 @@ const styles = {
     // color: 'inherit',
 
     border: 'solid 1px var(--webchat-colorNeutralStroke1)',
-    color: 'var(--webchat-colorNeutralForeground1)',
+    color: 'var(--webchat-colorGray200)',
     fontWeight: 'var(--webchat-fontWeightSemibold)',
 
     cursor: 'pointer',
@@ -41,7 +41,7 @@ const styles = {
 
   'webchat__telephone-keypad__button__ruby': {
     // color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160,
-    color: 'var(--webchat-colorGray160)',
+    color: 'var(--webchat-colorGray190)',
     fontSize: 10
   },