Polish uiState for gaps (#5284)

* Fix gap when disabled

* Update entry for starter prompts

* Add test for non-English

* Remove unneeded test

CHANGELOG.md

@@ -43,7 +43,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Introduced centralized announcements approach via the new `usePushToLiveRegion` hook, in PR [#5251](https://github.com/microsoft/BotFramework-WebChat/pull/5251), by [@OEvgeny](https://github.com/OEvgeny)
 -  Added keyboard shortcut for the "New Messages" button, in PR [#5251](https://github.com/microsoft/BotFramework-WebChat/pull/5251), by [@OEvgeny](https://github.com/OEvgeny)
 -  Added decorators for loading and completion states to the Fluent theme, in PR [#5269](https://github.com/microsoft/BotFramework-WebChat/pull/5269), by [@OEvgeny](https://github.com/OEvgeny)
--  Added blueprint of starter prompts in the Fluent theme, in PR [#5270](https://github.com/microsoft/BotFramework-WebChat/pull/5270), [#5276](https://github.com/microsoft/BotFramework-WebChat/pull/5276) and [#5279](https://github.com/microsoft/BotFramework-WebChat/pull/5279), by [@OEvgeny](https://github.com/OEvgeny) and [@compulim](https://github.com/compulim)
+-  Added blueprint of starter prompts in the Fluent theme, in PR [#5270](https://github.com/microsoft/BotFramework-WebChat/pull/5270), [#5276](https://github.com/microsoft/BotFramework-WebChat/pull/5276), [#5279](https://github.com/microsoft/BotFramework-WebChat/pull/5279), and [#5284](https://github.com/microsoft/BotFramework-WebChat/pull/5284), by [@OEvgeny](https://github.com/OEvgeny) and [@compulim](https://github.com/compulim)
 -  Added support for liner message activities in the Fluent theme, in PR [#5272](https://github.com/microsoft/BotFramework-WebChat/pull/5272), by [@OEvgeny](https://github.com/OEvgeny)
 -  Added new `uiState` props and `useUIState` hook, in PR [#5276](https://github.com/microsoft/BotFramework-WebChat/pull/5276), by [@compulim](https://github.com/compulim)
 

__tests__/html/fluentTheme/uiState.blueprint.nonEnglish.js

@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Fluent theme applied in non-English language', () => {
+  test('blueprint state should match normal state', () => runHTML('fluentTheme/uiState.blueprint.nonEnglish'));
+});

packages/fluent-theme/src/components/preChatActivity/StarterPromptsCardAction.module.css

@@ -22,10 +22,13 @@
     grid-template-columns: 20px 1fr;
   }
 
+  &:empty {
+    row-gap: 14px;
+  }
+
   &[aria-disabled='true'],
   &:empty {
     cursor: default;
-    row-gap: 14px;
   }
 
   &[aria-disabled='true']:not(:empty) {

packages/fluent-theme/src/components/sendBox/SendBox.tsx

@@ -182,7 +182,12 @@ function SendBox(props: Props) {
   };
 
   return (
-    <form {...aria} className={cx(classNames['sendbox'], props.className)} onSubmit={handleFormSubmit}>
+    <form
+      {...aria}
+      className={cx(classNames['sendbox'], props.className)}
+      data-testid={testIds.sendBoxContainer}
+      onSubmit={handleFormSubmit}
+    >
       <SuggestedActions />
       <div
         className={cx(classNames['sendbox__sendbox'])}

packages/fluent-theme/src/testIds.ts

@@ -1,5 +1,6 @@
 const testIds = {
   preChatMessageActivityStarterPromptsCardAction: 'pre-chat message activity starter prompts card action',
+  sendBoxContainer: 'send box container',
   sendBoxDropZone: 'send box drop zone',
   sendBoxSendButton: 'send box send button',
   sendBoxSuggestedAction: 'send box suggested action',