STT: Apply listening animation to icon only & update mic icon (#32478)

Co-authored-by: Ruslan Farkhutdinov <ruslan.farkhutdinov@devexpress.com>

Author: Ruslan Farkhutdinov

apps/react-storybook/stories/speech_to_text/SpeechToText.stories.tsx

@@ -18,7 +18,7 @@ type Story = StoryObj<typeof SpeechToText>;
 export const DefaultSpeechToText: Story = {
     args: {
         width: 'auto',
-        startIcon: 'micoutline',
+        startIcon: 'micfilled',
         stopIcon: 'stopfilled',
         startText: '',
         stopText: '',
@@ -34,11 +34,11 @@ export const DefaultSpeechToText: Story = {
             control: { type: 'radio' }
         },
         startIcon: {
-            options: ['micoutline', 'video', 'isnotblank', undefined],
+            options: ['micfilled', 'video', 'isnotblank', undefined],
             control: { type: 'select' }
         },
         stopIcon: {
-            options: ['stopfilled', 'square', 'indeterminatestate', undefined],
+            options: ['micfilled', 'stopfilled', 'square', 'indeterminatestate', undefined],
             control: { type: 'select' }
         },
         startText: {

packages/devextreme-scss/scss/widgets/base/speechToText/_index.scss

@@ -1,4 +1,4 @@
-.dx-speech-to-text-listening {
+.dx-speech-to-text-listening .dx-icon {
   animation: dx-speech-to-text-listening-animation 1.5s ease-in-out 0.5s infinite;
 }
 

packages/devextreme/js/__internal/ui/speech_to_text/speech_to_text.ts

@@ -18,7 +18,7 @@ import type { ButtonProps as ButtonProperties } from '@ts/ui/button/button';
 export const SPEECH_TO_TEXT_CLASS = 'dx-speech-to-text';
 export const SPEECH_TO_TEXT_LISTENING_CLASS = 'dx-speech-to-text-listening';
 
-const DEFAULT_INITIAL_ICON = 'micoutline';
+const DEFAULT_INITIAL_ICON = 'micfilled';
 const DEFAULT_LISTENING_ICON = 'stopfilled';
 
 enum SpeechToTextState {

packages/devextreme/js/ui/speech_to_text.d.ts

@@ -174,7 +174,7 @@ export interface Properties extends WidgetOptions<dxSpeechToText> {
 
   /**
    * @docid dxSpeechToTextOptions.startIcon
-   * @default 'micoutline'
+   * @default 'micfilled'
    * @public
    */
   startIcon?: string;

packages/devextreme/testing/tests/DevExpress.ui.widgets/speechToText.markup.tests.js

@@ -75,7 +75,7 @@ QUnit.module('Button Rendering', moduleConfig, () => {
     QUnit.test('should update button icon and text based on state', function(assert) {
         const getIcon = () => this.$element.find(`.${ICON_CLASS}`);
 
-        assert.ok(getIcon().hasClass(`${ICON_CLASS}-micoutline`), 'initial icon displayed');
+        assert.ok(getIcon().hasClass(`${ICON_CLASS}-micfilled`), 'initial icon displayed');
 
         this.$element.trigger('dxclick');
 

packages/devextreme/testing/tests/DevExpress.ui.widgets/speechToText.tests.js

@@ -17,6 +17,7 @@ const BUTTON_MODE_TEXT_CLASS = 'dx-button-mode-text';
 const BUTTON_MODE_OUTLINED_CLASS = 'dx-button-mode-outlined';
 const BUTTON_TYPE_DANGER_CLASS = 'dx-button-danger';
 const BUTTON_TYPE_PRIMARY_CLASS = 'dx-button-primary';
+const ICON_CLASS = 'dx-icon';
 
 const INKRIPPLE_CLASS = 'dx-inkripple';
 const INKRIPPLE_WAVE_CLASS = 'dx-inkripple-wave';
@@ -279,7 +280,7 @@ QUnit.module('State Management', moduleConfig, () => {
     });
 
     QUnit.test('INITIAL state should not have animation by default', function(assert) {
-        const animation = this.$element.css('animation');
+        const animation = this.$element.find(`.${ICON_CLASS}`).css('animation');
 
         assert.strictEqual(animation, 'none 0s ease 0s 1 normal none running');
     });
@@ -289,7 +290,7 @@ QUnit.module('State Management', moduleConfig, () => {
 
         $button.trigger('dxclick');
 
-        const animation = this.$element.css('animation');
+        const animation = this.$element.find(`.${ICON_CLASS}`).css('animation');
         const easeInOutAnimationEnabled = animation.includes('1.5s ease-in-out 0.5s infinite normal none running');
 
         assert.strictEqual(easeInOutAnimationEnabled, true);

packages/devextreme/testing/tests/DevExpress.ui/defaultOptions.tests.js

@@ -1482,7 +1482,7 @@ testComponentDefaults(SpeechToText,
             isListening: false,
         },
         hoverStateEnabled: true,
-        startIcon: 'micoutline',
+        startIcon: 'micfilled',
         stopIcon: 'stopfilled',
         startText: '',
         stopText: '',