botframework-webchat-fluent-theme 4.17.0-main.20240416.e3f5401 → 4.17.0-main.20240423.d9e4f4d

package/src/components/sendbox/index.module.css

@@ -0,0 +1,101 @@
+:global(.webchat-fluent) .sendbox {
+  color: var(--webchat-colorNeutralForeground1);
+  font-family: var(--webchat-fontFamilyBase);
+  padding: 0 10px 10px;
+  text-rendering: optimizeLegibility;
+
+  --webchat-sendbox-attachment-area-active: ;
+  --webchat-sendbox-border-radius: var(--webchat-borderRadiusLarge);
+}
+
+:global(.webchat-fluent) .sendbox__sendbox {
+  background-color: var(--webchat-colorNeutralBackground1);
+  border-radius: var(--webchat-sendbox-border-radius);
+  border: 1px solid var(--webchat-colorNeutralStroke1);
+  display: grid;
+  font-family: var(--webchat-fontFamilyBase);
+  font-size: 14px;
+  gap: 6px;
+  grid-template:
+    [telephone-keypad-start] 'text-area' [telephone-keypad-end]
+    var(--webchat-sendbox-attachment-area-active)
+    'controls' / [telephone-keypad] 1fr
+  ;
+  line-height: 20px;
+  padding: 8px;
+  position: relative;
+
+  &:has(.sendbox__attachment--in-grid) {
+    --webchat-sendbox-attachment-area-active: 'attachment'
+  }
+
+  &:focus-within {
+    border-color: var(--webchat-colorNeutralStroke1Selected);
+  }
+
+  &::after {
+    border-bottom-left-radius: var(--webchat-sendbox-border-radius);
+    border-bottom-right-radius: var(--webchat-sendbox-border-radius);
+    border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorCompoundBrandForeground1Hover);
+    bottom: -1px;
+    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);
+    content: "";
+    height: var(--webchat-sendbox-border-radius);
+    left: -1px;
+    position: absolute;
+    right: -1px;
+    transition: clip-path var(--webchat-durationUltraFast) var(--webchat-curveAccelerateMid);
+  }
+
+  &:focus-within::after {
+    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);
+    transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
+  }
+
+  > .sendbox__text-area--in-grid {
+    grid-area: text-area;
+  }
+
+  > .sendbox__attachment--in-grid {
+    grid-area: attachment;
+  }
+
+  > .sendbox__sendbox-controls--in-grid {
+    grid-area: controls;
+  }
+
+  > .sendbox__telephone-keypad--in-grid {
+    grid-area: telephone-keypad;
+  }
+}
+
+:global(.webchat-fluent) .sendbox__sendbox-text {
+  background-color: transparent;
+  border: none;
+  flex: auto;
+  font-family: var(--webchat-fontFamilyBase);
+  font-size: 14px;
+  line-height: 20px;
+  outline: none;
+  padding: 4px 4px 0;
+  resize: none;
+}
+
+:global(.webchat-fluent) .sendbox__sendbox-controls {
+  align-items: center;
+  display: flex;
+  padding-inline-start: 4px;
+}
+
+:global(.webchat-fluent) .sendbox__text-counter {
+  color: var(--webchat-colorNeutralForeground4);
+  cursor: default;
+  font-family: var(--webchat-fontFamilyNumeric);
+  font-size: 10px;
+  line-height: 14px;
+  margin-inline-end: 4px;
+}
+
+:global(.webchat-fluent) .sendbox__text-counter--error {
+  color: var(--webchat-colorStatusDangerForeground1);
+}

package/src/components/sendbox/index.tsx

@@ -3,7 +3,6 @@ import cx from 'classnames';
 import React, { memo, useCallback, useRef, useState, type FormEventHandler, type MouseEventHandler } from 'react';
 import { useRefFrom } from 'use-ref-from';
 import { SendIcon } from '../../icons/SendIcon';
-import { useStyles } from '../../styles';
 import testIds from '../../testIds';
 import DropZone from '../DropZone';
 import SuggestedActions from '../SuggestedActions';
@@ -16,70 +15,11 @@ import TextArea from './TextArea';
 import { Toolbar, ToolbarButton, ToolbarSeparator } from './Toolbar';
 import useSubmitError from './private/useSubmitError';
 import useUniqueId from './private/useUniqueId';
+import styles from './index.module.css';
+import { useStyles } from '../../styles';
 
 const { useStyleOptions, useMakeThumbnail, useLocalizer, useSendBoxAttachments, useSendMessage } = hooks;
 
-const styles = {
-  'webchat-fluent__sendbox': {
-    color: 'var(--webchat-colorNeutralForeground1)',
-    fontFamily: 'var(--webchat-fontFamilyBase)',
-    padding: '0 10px 10px',
-    textRendering: 'optimizeLegibility'
-  },
-
-  'webchat-fluent__sendbox__sendbox': {
-    backgroundColor: 'var(--webchat-colorNeutralBackground1)',
-    border: '1px solid var(--webchat-colorNeutralStroke1)',
-    borderRadius: 'var(--webchat-borderRadiusLarge)',
-    display: 'grid',
-    fontFamily: 'var(--webchat-fontFamilyBase)',
-    fontSize: '14px',
-    gap: '6px',
-    lineHeight: '20px',
-    padding: '8px',
-    position: 'relative',
-
-    '&:focus-within': {
-      borderColor: 'var(--webchat-colorNeutralStroke1Selected)',
-      // TODO clarify with design the color:
-      // - Teams is using colorCompoundBrandForeground1
-      // - Fluent is using colorCompoundBrandStroke
-      // - we are using colorCompoundBrandForeground1Hover
-      boxShadow: 'inset 0 -6px 0 -3px var(--webchat-colorCompoundBrandForeground1Hover)'
-    }
-  },
-
-  'webchat-fluent__sendbox__sendbox-text': {
-    backgroundColor: 'transparent',
-    border: 'none',
-    flex: 'auto',
-    fontFamily: 'var(--webchat-fontFamilyBase)',
-    fontSize: '14px',
-    lineHeight: '20px',
-    outline: 'none',
-    padding: '4px 4px 0',
-    resize: 'none'
-  },
-
-  'webchat-fluent__sendbox__sendbox-controls': {
-    alignItems: 'center',
-    display: 'flex',
-    paddingInlineStart: '4px'
-  },
-
-  'webchat-fluent__sendbox__text-counter': {
-    color: 'var(--webchat-colorNeutralForeground4)',
-    cursor: 'default',
-    fontFamily: 'var(--webchat-fontFamilyNumeric)',
-    fontSize: '10px',
-    lineHeight: '14px'
-  },
-
-  'webchat-fluent__sendbox__text-counter--error': {
-    color: 'var(--webchat-colorStatusDangerForeground1)'
-  }
-};
-
 function SendBox(
   props: Readonly<{
     className?: string | undefined;
@@ -95,7 +35,7 @@ function SendBox(
   const localize = useLocalizer();
   const sendMessage = useSendMessage();
   const makeThumbnail = useMakeThumbnail();
-  const errorMessageId = useUniqueId('webchat-fluent__sendbox__error-message-id');
+  const errorMessageId = useUniqueId('sendbox__error-message-id');
   const [errorRef, errorMessage] = useSubmitError({ message, attachments });
   const [telephoneKeypadShown] = useTelephoneKeypadShown();
 
@@ -176,17 +116,12 @@ function SendBox(
   };
 
   return (
-    <form {...aria} className={cx(classNames['webchat-fluent__sendbox'], props.className)} onSubmit={handleFormSubmit}>
+    <form {...aria} className={cx(classNames['sendbox'], props.className)} onSubmit={handleFormSubmit}>
       <SuggestedActions />
-      <div className={cx(classNames['webchat-fluent__sendbox__sendbox'])} onClickCapture={handleSendBoxClick}>
-        <TelephoneKeypadSurrogate
-          autoFocus={true}
-          isHorizontal={false}
-          onButtonClick={handleTelephoneKeypadButtonClick}
-        />
+      <div className={cx(classNames['sendbox__sendbox'])} onClickCapture={handleSendBoxClick}>
         <TextArea
           aria-label={isMessageLengthExceeded ? localize('TEXT_INPUT_LENGTH_EXCEEDED_ALT') : localize('TEXT_INPUT_ALT')}
-          className={classNames['webchat-fluent__sendbox__sendbox-text']}
+          className={cx(classNames['sendbox__sendbox-text'], classNames['sendbox__text-area--in-grid'])}
           data-testid={testIds.sendBoxTextBox}
           hidden={telephoneKeypadShown}
           onInput={handleMessageChange}
@@ -194,12 +129,18 @@ function SendBox(
           ref={inputRef}
           value={message}
         />
-        <Attachments attachments={attachments} />
-        <div className={cx(classNames['webchat-fluent__sendbox__sendbox-controls'])}>
-          {maxMessageLength && (
+        <TelephoneKeypadSurrogate
+          autoFocus={true}
+          className={classNames['sendbox__telephone-keypad--in-grid']}
+          isHorizontal={false}
+          onButtonClick={handleTelephoneKeypadButtonClick}
+        />
+        <Attachments attachments={attachments} className={classNames['sendbox__attachment--in-grid']} />
+        <div className={cx(classNames['sendbox__sendbox-controls'], classNames['sendbox__sendbox-controls--in-grid'])}>
+          {!telephoneKeypadShown && maxMessageLength && (
             <div
-              className={cx(classNames['webchat-fluent__sendbox__text-counter'], {
-                [classNames['webchat-fluent__sendbox__text-counter--error']]: isMessageLengthExceeded
+              className={cx(classNames['sendbox__text-counter'], {
+                [classNames['sendbox__text-counter--error']]: isMessageLengthExceeded
               })}
             >
               {`${message.length}/${maxMessageLength}`}
@@ -212,7 +153,7 @@ function SendBox(
             <ToolbarButton
               aria-label={localize('TEXT_INPUT_SEND_BUTTON_ALT')}
               data-testid={testIds.sendBoxSendButton}
-              disabled={isMessageLengthExceeded}
+              disabled={isMessageLengthExceeded || telephoneKeypadShown}
               type="submit"
             >
               <SendIcon />

package/src/components/suggestedActions/SuggestedAction.module.css

@@ -0,0 +1,35 @@
+:global(.webchat-fluent) .suggested-action {
+  align-items: center;
+  background: transparent;
+  border-radius: 8px;
+  border: 1px solid var(--webchat-colorBrandStroke2);
+  color: currentColor;
+  cursor: pointer;
+  display: flex;
+  font-size: 12px;
+  gap: 4px;
+  padding: 4px 8px 4px;
+  text-align: start;
+  transition: all .15s ease-out;
+
+  @media (hover: hover) {
+    &:not([aria-disabled="true"]):hover {
+      background-color: var(--webchat-colorBrandBackground2Hover);
+      color: var(--webchat-colorBrandForeground2Hover)
+    }
+  }
+  &:not([aria-disabled="true"]):active {
+    background-color: var(--webchat-colorBrandBackground2Pressed);
+    color: var(--webchat-colorBrandForeground2Pressed)
+  }
+  &[aria-disabled="true"] {
+    color: var(--webchat-colorNeutralForegroundDisabled);
+    cursor: not-allowed
+  }
+}
+
+:global(.webchat-fluent) .suggested-action__image {
+  font-size: 12px;
+  height: 1em;
+  width: 1em;
+}

package/src/components/suggestedActions/SuggestedAction.tsx

@@ -2,6 +2,7 @@ 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 styles from './SuggestedAction.module.css';
 import { useStyles } from '../../styles';
 import AccessibleButton from './AccessibleButton';
 
@@ -29,43 +30,6 @@ type SuggestedActionProps = Readonly<{
   value?: any;
 }>;
 
-const styles = {
-  'webchat-fluent__suggested-action': {
-    alignItems: 'center',
-    background: 'transparent',
-    border: '1px solid var(--webchat-colorBrandStroke2)',
-    borderRadius: '8px',
-    cursor: 'pointer',
-    display: 'flex',
-    fontSize: '12px',
-    gap: '4px',
-    padding: '4px 8px 4px',
-    textAlign: 'start',
-    transition: 'all .15s ease-out',
-
-    '@media (hover: hover)': {
-      '&:not([aria-disabled="true"]):hover': {
-        backgroundColor: 'var(--webchat-colorBrandBackground2Hover)',
-        color: 'var(--webchat-colorBrandForeground2Hover)'
-      }
-    },
-
-    '&:not([aria-disabled="true"]):active': {
-      backgroundColor: 'var(--webchat-colorBrandBackground2Pressed)',
-      color: 'var(--webchat-colorBrandForeground2Pressed)'
-    },
-
-    '&[aria-disabled="true"]': {
-      color: 'var(--webchat-colorNeutralForegroundDisabled)',
-      cursor: 'not-allowed'
-    }
-  },
-
-  'webchat-fluent__suggested-action__image': {
-    height: '12px'
-  }
-};
-
 function SuggestedAction({
   buttonText,
   className,
@@ -108,17 +72,13 @@ function SuggestedAction({
 
   return (
     <AccessibleButton
-      className={cx(
-        classNames['webchat-fluent__suggested-action'],
-        suggestedActionStyleSet + '',
-        (className || '') + ''
-      )}
+      className={cx(classNames['suggested-action'], suggestedActionStyleSet + '', (className || '') + '')}
       disabled={disabled}
       onClick={handleClick}
       ref={focusRef}
       type="button"
     >
-      {image && <img alt={imageAlt} className={classNames['webchat-fluent__suggested-action__image']} src={image} />}
+      {image && <img alt={imageAlt} className={classNames['suggested-action__image']} src={image} />}
       <span>{buttonText}</span>
     </AccessibleButton>
   );

package/src/components/suggestedActions/index.module.css

@@ -0,0 +1,23 @@
+
+:global(.webchat-fluent) .suggested-actions {
+  align-items: flex-end;
+  align-self: flex-end;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &:not(:empty) {
+    padding-block-end: 8px;
+    padding-inline-start: 4px
+  }
+
+  &.suggested-actions--flow {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+
+  &.suggested-actions--stacked {
+    flex-direction: column
+  }
+}

package/src/components/suggestedActions/index.tsx

@@ -1,36 +1,13 @@
 import { hooks } from 'botframework-webchat-component';
 import cx from 'classnames';
 import React, { memo, type ReactNode } from 'react';
-import { useStyles } from '../../styles';
 import SuggestedAction from './SuggestedAction';
 import computeSuggestedActionText from './private/computeSuggestedActionText';
+import styles from './index.module.css';
+import { useStyles } from '../../styles';
 
 const { useLocalizer, useStyleOptions, useStyleSet, useSuggestedActions } = hooks;
 
-const styles = {
-  'webchat-fluent__suggested-actions': {
-    alignItems: 'flex-end',
-    alignSelf: 'flex-end',
-    display: 'flex',
-    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 SuggestedActionStackedOrFlowContainer(
   props: Readonly<{
     'aria-label'?: string | undefined;
@@ -48,11 +25,11 @@ function SuggestedActionStackedOrFlowContainer(
       aria-live="polite"
       aria-orientation="vertical"
       className={cx(
-        classNames['webchat-fluent__suggested-actions'],
+        classNames['suggested-actions'],
         suggestedActionsStyleSet + '',
         {
-          'webchat-fluent__suggested-actions--flow': suggestedActionLayout === 'flow',
-          'webchat-fluent__suggested-actions--stacked': suggestedActionLayout !== 'flow'
+          [classNames['suggested-actions--flow']]: suggestedActionLayout === 'flow',
+          [classNames['suggested-actions--stacked']]: suggestedActionLayout !== 'flow'
         },
         props.className
       )}
@@ -111,7 +88,7 @@ function SuggestedActions() {
   return (
     <SuggestedActionStackedOrFlowContainer
       aria-label={localize('SUGGESTED_ACTIONS_LABEL_ALT')}
-      className={classNames['webchat-fluent__suggested-actions']}
+      className={classNames['suggested-actions']}
     >
       {children}
     </SuggestedActionStackedOrFlowContainer>

package/src/components/telephoneKeypad/private/Button.module.css

@@ -0,0 +1,62 @@
+
+:global(.webchat-fluent) .telephone-keypad__button {
+  -webkit-user-select: none;
+  align-items: center;
+  appearance: none;
+  /* backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white, */
+  background-color: White;
+  border-radius: 100%;
+
+  /* Whitelabel styles */
+  /* border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`, */
+  /* color: inherit; */
+
+  border: solid 1px var(--webchat-colorNeutralStroke1);
+  color: var(--webchat-colorGray200);
+  font-weight: var(--webchat-fontWeightSemibold);
+
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 60px;
+  opacity: 0.7;
+  padding: 0;
+  position: relative;
+  touch-action: none;
+  user-select: none;
+  width: 60px;
+
+  &:hover {
+    /* backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30 */
+    background-color: var(--webchat-colorGray30)
+  }
+}
+
+:global(.webchat-fluent) .telephone-keypad__button__ruby {
+  /* color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160, */
+  color: var(--webchat-colorGray190);
+  font-size: 10px;
+}
+
+:global(.webchat-fluent) .telephone-keypad__button__text {
+  font-size: 24px;
+  margin-top: 8px;
+}
+
+:global(.webchat-fluent) .telephone-keypad--horizontal {
+  & .telephone-keypad__button {
+    height: 32px;
+    justify-content: center;
+    margin: 8px 4px;
+    width: 32px;
+  };
+
+  .telephone-keypad__button__ruby {
+    display: none;
+  }
+
+  & .telephone-keypad__button__text {
+    font-size: 20px;
+    margin-top: 0;
+  }
+}

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

@@ -2,72 +2,10 @@ import React, { forwardRef, memo, useCallback, type Ref } from 'react';
 
 import { useRefFrom } from 'use-ref-from';
 
-import { useStyles } from '../../../styles';
 import { type DTMF } from '../types';
 
-const styles = {
-  'webchat__telephone-keypad__button': {
-    '-webkit-user-select': 'none',
-    alignItems: 'center',
-    appearance: 'none',
-    // backgroundColor: isDarkTheme() || isHighContrastTheme() ? black : white,
-    backgroundColor: 'White',
-    borderRadius: '100%',
-
-    // Whitelabel styles
-    // border: `solid 1px ${isHighContrastTheme() ? white : isDarkTheme() ? gray160 : gray40}`,
-    // color: 'inherit',
-
-    border: 'solid 1px var(--webchat-colorNeutralStroke1)',
-    color: 'var(--webchat-colorGray200)',
-    fontWeight: 'var(--webchat-fontWeightSemibold)',
-
-    cursor: 'pointer',
-    display: 'flex',
-    flexDirection: 'column',
-    height: 60,
-    opacity: 0.7,
-    padding: 0,
-    position: 'relative',
-    touchAction: 'none',
-    userSelect: 'none',
-    width: 60,
-
-    '&:hover': {
-      // backgroundColor: isHighContrastTheme() ? gray210 : isDarkTheme() ? gray150 : gray30
-      backgroundColor: 'var(--webchat-colorGray30)'
-    }
-  },
-
-  'webchat__telephone-keypad__button__ruby': {
-    // color: isHighContrastTheme() ? white : isDarkTheme() ? gray40 : gray160,
-    color: 'var(--webchat-colorGray190)',
-    fontSize: 10
-  },
-
-  'webchat__telephone-keypad__button__text': {
-    fontSize: 24,
-    marginTop: 8
-  },
-
-  'webchat__telephone-keypad--horizontal': {
-    '& .webchat__telephone-keypad__button': {
-      height: 32,
-      width: 32,
-      margin: '8px 4px',
-      justifyContent: 'center'
-    },
-
-    'webchat__telephone-keypad__button__ruby': {
-      display: 'none'
-    },
-
-    '& .webchat__telephone-keypad__button__text': {
-      fontSize: 20,
-      marginTop: 0
-    }
-  }
-};
+import styles from './Button.module.css';
+import { useStyles } from '../../../styles';
 
 type Props = Readonly<{
   button: DTMF;
@@ -87,16 +25,16 @@ const Button = memo(
 
     return (
       <button
-        className={classNames['webchat__telephone-keypad__button']}
+        className={classNames['telephone-keypad__button']}
         data-testid={dataTestId}
         onClick={handleClick}
         ref={ref}
         type="button"
       >
-        <span className={classNames['webchat__telephone-keypad__button__text']}>
+        <span className={classNames['telephone-keypad__button__text']}>
           {button === 'star' ? '\u2217' : button === 'pound' ? '#' : button}
         </span>
-        {!!ruby && <ruby className={classNames['webchat__telephone-keypad__button__ruby']}>{ruby}</ruby>}
+        {!!ruby && <ruby className={classNames['telephone-keypad__button__ruby']}>{ruby}</ruby>}
       </button>
     );
   })

package/src/components/telephoneKeypad/private/TelephoneKeypad.module.css

@@ -0,0 +1,59 @@
+
+:global(.webchat-fluent) .telephone-keypad {
+  /* Commented out whitelabel styles for now. */
+  /* background: getHighContrastDarkThemeColor(highContrastColor: black, darkThemeColor: gray190, string, defaultColor: gray10), */
+  /* borderRadius: '8px 8px 0px 0px; */
+  /* boxShadow: '-3px 0px 7px 0px rgba(0, 0, 0, 0.13), -0.6px 0px 1.8px 0px rgba(0, 0, 0, 0.10)', */
+
+  align-items: center;
+  background: var(--webchat-colorNeutralBackground1);
+  /* border: isHighContrastTheme() ? `1px solid ${white}` : none; */
+  border: none;
+  border-radius: var(--webchat-borderRadiusXLarge);
+  /* boxShadow: var(--shadow16); */
+  display: flex;
+  flex-direction: column;
+  font-family: var(--webchat-fontFamilyBase);
+  justify-content: center;
+  /* margin: var(--spacingHorizontalMNudge)' */
+}
+
+:global(.webchat-fluent) .telephone-keypad__box {
+  box-sizing: border-box;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  justify-items: center;
+  padding: 16px;
+  width: 100%;
+}
+
+:global(.webchat-fluent) .telephone-keypad__info-message {
+  align-items: center;
+  color: var(--webchat-colorNeutralForeground4);
+  display: flex;
+  font-size: 12px;
+  gap: 6px;
+  margin-block-end: 6px;
+}
+
+:global(.webchat-fluent) .telephone-keypad__info-message-link {
+  color: var(--webchat-colorBrandForegroundLink);
+  text-decoration-color: transparent;
+
+  &:target {
+    color: var(--webchat-colorBrandForegroundLinkSelected);
+  }
+  &:hover {
+    color: var(--webchat-colorBrandForegroundLinkHover);
+    text-decoration: underline 1px currentColor;
+  }
+  &:active {
+    color: var(--webchat-colorBrandForegroundLinkPressed);
+  }
+  &:focus-visible {
+    outline: none;
+    text-decoration: underline 1px double var(--webchat-colorStrokeFocus2);
+  }
+}