Popups: Fix done button in color picker and saved text styles (#13225)

GoogleForCreators · May 9, 2023 · 1c7e969 · 1c7e969
1 parent cec28c0
commit 1c7e969
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 27 deletions.
diff --git a/packages/story-editor/src/components/canvas/karma/canvasKeys.karma.js b/packages/story-editor/src/components/canvas/karma/canvasKeys.karma.js
@@ -126,7 +126,7 @@ describe('Canvas Keyboard Shortcuts', () => {
     );
 
     // Synthetic delay to make the dropdown behave correctly
-    await fixture.events.sleep(200);
+    await fixture.events.sleep(400);
     // click to close
     await fixture.events.click(effectChooser, { clickCount: 1 });
     const duration = fixture.screen.getByLabelText('Duration');

diff --git a/packages/story-editor/src/components/colorPicker/header.js b/packages/story-editor/src/components/colorPicker/header.js
@@ -84,18 +84,25 @@ function Header({
     <Wrapper>
       {children}
       <Actions>
-        {hasPresets && (
-          <StyledButton
-            {...buttonProps}
-            aria-label={
-              isEditMode
-                ? __('Exit edit mode', 'web-stories')
-                : __('Edit colors', 'web-stories')
-            }
-          >
-            {isEditMode ? __('Done', 'web-stories') : <Icons.Pencil />}
-          </StyledButton>
-        )}
+        {hasPresets ? (
+          isEditMode ? (
+            <StyledButton
+              {...buttonProps}
+              variant={ButtonVariant.Rectangle}
+              aria-label={__('Exit edit mode', 'web-stories')}
+            >
+              {__('Done', 'web-stories')}
+            </StyledButton>
+          ) : (
+            <StyledButton
+              {...buttonProps}
+              variant={ButtonVariant.Square}
+              aria-label={__('Edit colors', 'web-stories')}
+            >
+              <Icons.Pencil />
+            </StyledButton>
+          )
+        ) : null}
         <StyledButton
           aria-label={__('Close', 'web-stories')}
           onClick={handleClose}

diff --git a/packages/story-editor/src/components/floatingMenu/karma/video.karma.js b/packages/story-editor/src/components/floatingMenu/karma/video.karma.js
@@ -24,7 +24,7 @@ import { waitFor } from '@testing-library/react';
  */
 import { Fixture } from '../../../karma';
 import { useStory } from '../../../app/story';
-import { focusFloatingMenu, tabToCanvasFocusContainer } from './utils';
+import { focusFloatingMenu } from './utils';
 
 describe('Video Design Menu: Keyboard Navigation', () => {
   let fixture;
@@ -67,8 +67,6 @@ describe('Video Design Menu: Keyboard Navigation', () => {
 
     // Escape out of the canvas elements focus trap
     await fixture.events.keyboard.press('esc');
-
-    await tabToCanvasFocusContainer(focusContainer, fixture);
     await fixture.events.keyboard.press('Enter');
     await fixture.events.keyboard.press('Tab');
 
@@ -122,6 +120,7 @@ describe('Video Design Menu: Keyboard Navigation', () => {
     await fixture.events.keyboard.press('tab');
     // Tab from color picker into swatches
     await fixture.events.keyboard.press('tab');
+    await fixture.events.keyboard.press('tab');
     // Navigate down one row and to the right once
     await fixture.events.keyboard.press('ArrowDown');
     await fixture.events.keyboard.press('ArrowRight');

diff --git a/packages/story-editor/src/components/styleManager/header.js b/packages/story-editor/src/components/styleManager/header.js
@@ -71,7 +71,6 @@ function Header({
   const buttonProps = {
     type: ButtonType.Tertiary,
     size: ButtonSize.Small,
-    variant: ButtonVariant.Square,
     onClick: (evt) => {
       evt.stopPropagation();
       setIsEditMode(!isEditMode);
@@ -83,16 +82,23 @@ function Header({
     <Wrapper>
       {children}
       <Actions>
-        <StyledButton
-          {...buttonProps}
-          aria-label={
-            isEditMode
-              ? __('Exit edit mode', 'web-stories')
-              : __('Edit styles', 'web-stories')
-          }
-        >
-          {isEditMode ? __('Done', 'web-stories') : <Icons.Pencil />}
-        </StyledButton>
+        {isEditMode ? (
+          <StyledButton
+            {...buttonProps}
+            variant={ButtonVariant.Rectangle}
+            aria-label={__('Exit edit mode', 'web-stories')}
+          >
+            {__('Done', 'web-stories')}
+          </StyledButton>
+        ) : (
+          <StyledButton
+            {...buttonProps}
+            variant={ButtonVariant.Square}
+            aria-label={__('Edit style', 'web-stories')}
+          >
+            <Icons.Pencil />
+          </StyledButton>
+        )}
         <StyledButton
           aria-label={__('Close', 'web-stories')}
           onClick={handleClose}