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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 9 commits into from May 9, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6ac0e10
Use rectangle variant for done button in tesxt styles
ayushnirwal Apr 20, 2023
fca3c58
Use rectangle variant for done button in color picker
ayushnirwal Apr 20, 2023
1686ecd
fix araia labels
ayushnirwal Apr 20, 2023
350fab5
fix aria label
ayushnirwal Apr 25, 2023
f659832
fix aria label
ayushnirwal Apr 25, 2023
df40a6e
Merge branch 'main' into fix/11016-done-button
ayushnirwal Apr 28, 2023
3c97541
fix integeration tests
ayushnirwal May 2, 2023
f4c1d3f
remove fit
ayushnirwal May 2, 2023
31249ab
remove unused import
ayushnirwal May 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/story-editor/src/components/canvas/karma/canvasKeys.karma.js
View file
Open in desktop
Expand Up @@ -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');
Expand Down
31 changes: 19 additions & 12 deletions packages/story-editor/src/components/colorPicker/header.js
View file
Open in desktop
Expand Up @@ -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}
Expand Down
5 changes: 2 additions & 3 deletions packages/story-editor/src/components/floatingMenu/karma/video.karma.js
View file
Open in desktop
Expand Up @@ -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;
Expand Down Expand Up @@ -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');

Expand Down Expand Up @@ -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');
Expand Down
28 changes: 17 additions & 11 deletions packages/story-editor/src/components/styleManager/header.js
View file
Open in desktop
Expand Up @@ -71,7 +71,6 @@ function Header({
const buttonProps = {
type: ButtonType.Tertiary,
size: ButtonSize.Small,
variant: ButtonVariant.Square,
onClick: (evt) => {
evt.stopPropagation();
setIsEditMode(!isEditMode);
Expand All @@ -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}
Expand Down