Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fluent: add telephone keypad information message #5140

Merged
merged 9 commits into from
Apr 19, 2024

Conversation

OEvgeny
Copy link
Collaborator

@OEvgeny OEvgeny commented Apr 19, 2024

Changelog Entry

  • (Experimental) Added botframework-webchat-fluent-theme package for applying Fluent UI theme to Web Chat, by @compulim and @OEvgeny, in PR #5120
    • Added an information message to the telephone keypad, in PR #5140
  • (Experimental) Added <LocalizeString /> component which can be used to localize strings, by @OEvgeny in PR #5140
    The component supports markdown formatting. Usage:
import { Components } from 'botframework-webchat-component';

const { LocalizedString } = Components;

/* Single string */
const MyString = () => (
  <LocalizeString linkClassName="my-awesome-link" stringId="WEBCHAT_STRING_ID" />
);

/* With pluralization */
const myPluralStringIds = {
  one: 'WEBCHAT_STRING_ID_FOR_ONE',
  two: 'WEBCHAT_STRING_ID_FOR_TWO',
  few: 'WEBCHAT_STRING_ID_FOR_FEW',
  many: 'WEBCHAT_STRING_ID_FOR_MANY',
  other: 'WEBCHAT_STRING_ID_FOR_OTHER'
};

const MyPluralString = () => (
  <LocalizeString pluralStringIds={myPluralStringIds} count={2} />
);

Description

This adds an info message regarding telephone keypad limited functionality, and everything needed to adjust the message.

The TELEPHONE_KEYPAD_INPUT_MESSAGE string doesn't contain the link by default, but can be adjusted by consumers to include the desired "Learn more" link.

Design

The LocalizedString component uses own instance of the markdown-it parser to avoid potential collisions with existing usage.

The better-links plugin was adopted for the component needs. It accepts linkOptions and even custom decoration functions without recreating the MarkdownIt instance.

Specific Changes

  • Added LocalizedString component
  • Reworked betterLinks plugin to be used LocalizedString component
  • Added the TELEPHONE_KEYPAD_INPUT_MESSAGE localization key
  • Fixed typo in TEXT_INPUT_LENGTH_EXCEEDED_ALT message
  • Added test case adjusting the TEXT_INPUT_LENGTH_EXCEEDED_ALT message with markdown string
  • I have added tests and executed them locally
  • I have updated CHANGELOG.md
  • I have updated documentation

Review Checklist

This section is for contributors to review your work.

  • Accessibility reviewed (tab order, content readability, alt text, color contrast)
  • Browser and platform compatibilities reviewed
  • CSS styles reviewed (minimal rules, no z-index)
  • Documents reviewed (docs, samples, live demo)
  • Internationalization reviewed (strings, unit formatting)
  • package.json and package-lock.json reviewed
  • Security reviewed (no data URIs, check for nonce leak)
  • Tests reviewed (coverage, legitimacy)

@OEvgeny OEvgeny marked this pull request as ready for review April 19, 2024 18:57
@OEvgeny OEvgeny requested a review from compulim April 19, 2024 20:38
compulim
compulim previously approved these changes Apr 19, 2024
@compulim compulim enabled auto-merge (squash) April 19, 2024 21:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants