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: use grid for sendbox layout #5136

Merged
merged 10 commits into from Apr 17, 2024
Merged

Fluent: use grid for sendbox layout #5136

merged 10 commits into from Apr 17, 2024

Conversation

OEvgeny
Copy link
Collaborator

@OEvgeny OEvgeny commented Apr 17, 2024

Changelog Entry

  • (Experimental) Added botframework-webchat-fluent-theme package for applying Fluent UI theme to Web Chat, by @compulim and @OEvgeny
    • Disabled send button and hid message length when telephone keypad is shown, in PR #5136

Description

The PR enables advanced layout for the experimental Fluent send box experience, also fixing some small issues found along the way.

Design

We now use named areas to manipulate the positioning for telephone-keypad, text-area, attachment and controls. These areas can then be remapped using CSS to achieve different layouting options.

To avoid double gaps we conditionally add the attachment area only when the corresponding to the area class is present.

Specific Changes

  • Disable Send button when telephone keypad is shown
  • Hide message length when telephone keypad is shown
  • Rework sendbox grid implementation
  • Add tests
  • 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)

- Remove drop-zone from the grid
- Add example layouts into tests
- Fix double spacing for attachments
@OEvgeny OEvgeny changed the title Feature/fluent grid Use grid template for sendbox layout Apr 17, 2024
@OEvgeny OEvgeny changed the title Use grid template for sendbox layout Use grid for sendbox layout Apr 17, 2024
@OEvgeny OEvgeny marked this pull request as ready for review April 17, 2024 01:16
@OEvgeny OEvgeny changed the title Use grid for sendbox layout Fluent: use grid for sendbox layout Apr 17, 2024
@compulim compulim enabled auto-merge (squash) April 17, 2024 18:49
@compulim compulim merged commit 16f5142 into main Apr 17, 2024
25 checks passed
@compulim compulim deleted the feature/fluent-grid branch April 17, 2024 18:57
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.

None yet

2 participants