From 6584aa458bd7f94fcff9b0f3bff745bec3f21909 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 17 Jan 2024 10:31:32 +0000 Subject: [PATCH 01/10] Update shortcuts.ts --- code/lib/manager-api/src/modules/shortcuts.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/code/lib/manager-api/src/modules/shortcuts.ts b/code/lib/manager-api/src/modules/shortcuts.ts index d050028f8b8b..8865b20d4973 100644 --- a/code/lib/manager-api/src/modules/shortcuts.ts +++ b/code/lib/manager-api/src/modules/shortcuts.ts @@ -125,12 +125,12 @@ type API_AddonShortcutLabels = Record; type API_AddonShortcutDefaults = Record; export const defaultShortcuts: API_Shortcuts = Object.freeze({ - fullScreen: ['F'], - togglePanel: ['A'], - panelPosition: ['D'], - toggleNav: ['S'], - toolbar: ['T'], - search: ['/'], + fullScreen: [controlOrMetaKey(), 'F'], + togglePanel: [controlOrMetaKey(), 'A'], + panelPosition: [controlOrMetaKey(), 'D'], + toggleNav: [controlOrMetaKey(), 'S'], + toolbar: [controlOrMetaKey(), 'T'], + search: [controlOrMetaKey(), 'K'], focusNav: ['1'], focusIframe: ['2'], focusPanel: ['3'], From d561fac2ede93ff6396039718f9792128fa8cc94 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 17 Jan 2024 10:55:36 +0000 Subject: [PATCH 02/10] Modify some addons shortcuts --- code/addons/outline/src/OutlineSelector.tsx | 6 +++--- code/addons/viewport/src/shortcuts.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/code/addons/outline/src/OutlineSelector.tsx b/code/addons/outline/src/OutlineSelector.tsx index 012477bae60c..75185cb5ed07 100644 --- a/code/addons/outline/src/OutlineSelector.tsx +++ b/code/addons/outline/src/OutlineSelector.tsx @@ -1,5 +1,5 @@ import React, { memo, useCallback, useEffect } from 'react'; -import { useGlobals, useStorybookApi } from '@storybook/manager-api'; +import { controlOrMetaKey, useGlobals, useStorybookApi } from '@storybook/manager-api'; import { IconButton } from '@storybook/components'; import { OutlineIcon } from '@storybook/icons'; import { ADDON_ID, PARAM_KEY } from './constants'; @@ -20,8 +20,8 @@ export const OutlineSelector = memo(function OutlineSelector() { useEffect(() => { api.setAddonShortcut(ADDON_ID, { - label: 'Toggle Outline [O]', - defaultShortcut: ['O'], + label: 'Toggle Outline', + defaultShortcut: [controlOrMetaKey(), 'O'], actionName: 'outline', showInMenu: false, action: toggleOutline, diff --git a/code/addons/viewport/src/shortcuts.ts b/code/addons/viewport/src/shortcuts.ts index 47fd37cbb996..7a2041184c2c 100644 --- a/code/addons/viewport/src/shortcuts.ts +++ b/code/addons/viewport/src/shortcuts.ts @@ -1,4 +1,4 @@ -import type { API } from '@storybook/manager-api'; +import { controlOrMetaKey, type API } from '@storybook/manager-api'; import { ADDON_ID } from './constants'; import { globals as defaultGlobals } from './preview'; @@ -38,7 +38,7 @@ export const registerShortcuts = async ( await api.setAddonShortcut(ADDON_ID, { label: 'Next viewport', - defaultShortcut: ['V'], + defaultShortcut: [controlOrMetaKey(), 'V'], actionName: 'next', action: () => { updateGlobals({ From bf7f3970cbef77e05a3fa049e9a2eb79b65993ed Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 17 Jan 2024 11:08:37 +0000 Subject: [PATCH 03/10] Update manager.spec.ts --- code/e2e-tests/manager.spec.ts | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/code/e2e-tests/manager.spec.ts b/code/e2e-tests/manager.spec.ts index 367082e9391e..38388c941c2d 100644 --- a/code/e2e-tests/manager.spec.ts +++ b/code/e2e-tests/manager.spec.ts @@ -21,9 +21,9 @@ test.describe('Manager UI', () => { await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); // toggle with keyboard shortcut - await sbPage.page.locator('html').press('s'); + await sbPage.page.locator('html').press('Control+s'); await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); - await sbPage.page.locator('html').press('s'); + await sbPage.page.locator('html').press('Control+s'); await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); // toggle with menu item @@ -51,9 +51,9 @@ test.describe('Manager UI', () => { await expectToolbarVisibility(true); // toggle with keyboard shortcut - await sbPage.page.locator('html').press('t'); + await sbPage.page.locator('html').press('Control+t'); await expectToolbarVisibility(false); - await sbPage.page.locator('html').press('t'); + await sbPage.page.locator('html').press('Control+t'); await expectToolbarVisibility(true); // toggle with menu item @@ -75,9 +75,9 @@ test.describe('Manager UI', () => { await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible(); // toggle with keyboard shortcut - await sbPage.page.locator('html').press('a'); + await sbPage.page.locator('html').press('Control+a'); await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible(); - await sbPage.page.locator('html').press('a'); + await sbPage.page.locator('html').press('Control+a'); await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible(); }); @@ -90,9 +90,9 @@ test.describe('Manager UI', () => { await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible(); // toggle with keyboard shortcut - await sbPage.page.locator('html').press('a'); + await sbPage.page.locator('html').press('Control+a'); await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible(); - await sbPage.page.locator('html').press('a'); + await sbPage.page.locator('html').press('Control+a'); await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible(); // toggle with menu item @@ -114,16 +114,16 @@ test.describe('Manager UI', () => { await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible(); // toggle position with keyboard shortcut - await sbPage.page.locator('html').press('d'); + await sbPage.page.locator('html').press('Control+d'); await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible(); // TODO: how to assert panel position? // hide with keyboard shortcut - await sbPage.page.locator('html').press('a'); + await sbPage.page.locator('html').press('Control+a'); await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible(); // toggling position should also show the panel again - await sbPage.page.locator('html').press('d'); + await sbPage.page.locator('html').press('Control+d'); await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible(); }); }); @@ -138,11 +138,11 @@ test.describe('Manager UI', () => { await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); // toggle with keyboard shortcut - await sbPage.page.locator('html').press('f'); + await sbPage.page.locator('html').press('Control+f'); await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible(); await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); - await sbPage.page.locator('html').press('f'); + await sbPage.page.locator('html').press('Control+f'); await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible(); await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); From 84e7933f7595ccf15d99b674c795c721421269a4 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 17 Jan 2024 11:12:34 +0000 Subject: [PATCH 04/10] Update preview-web.spec.ts --- code/e2e-tests/preview-web.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/e2e-tests/preview-web.spec.ts b/code/e2e-tests/preview-web.spec.ts index 6d8bf5526415..8faee05bff1d 100644 --- a/code/e2e-tests/preview-web.spec.ts +++ b/code/e2e-tests/preview-web.spec.ts @@ -32,7 +32,7 @@ test.describe('preview-web', () => { // click outside, to remove focus from the input of the story, then press S to toggle sidebar await sbPage.previewRoot().click(); - await sbPage.previewRoot().press('s'); + await sbPage.previewRoot().press('Control+s'); await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); }); @@ -47,7 +47,7 @@ test.describe('preview-web', () => { await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); - await sbPage.previewRoot().getByRole('button').getByText('Submit').first().press('s'); + await sbPage.previewRoot().getByRole('button').getByText('Submit').first().press('Control+s'); await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); }); }); From de1d939f2c9277c1407d02ff8595b14521c93d5a Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 17 Jan 2024 11:24:32 +0000 Subject: [PATCH 05/10] Update shortcuts.test.js --- code/lib/manager-api/src/tests/shortcuts.test.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/code/lib/manager-api/src/tests/shortcuts.test.js b/code/lib/manager-api/src/tests/shortcuts.test.js index d5604a47f020..5d461a00df1d 100644 --- a/code/lib/manager-api/src/tests/shortcuts.test.js +++ b/code/lib/manager-api/src/tests/shortcuts.test.js @@ -54,7 +54,7 @@ describe('shortcuts api', () => { const { api, state } = initShortcuts({ store }); store.setState(state); - expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['F']); + expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['Control+F']); }); it('gets defaults including addon ones', async () => { @@ -67,7 +67,7 @@ describe('shortcuts api', () => { await api.setAddonShortcut(mockAddonSecondShortcut.addon, mockAddonSecondShortcut.shortcut); await api.setAddonShortcut(mockSecondAddonShortcut.addon, mockSecondAddonShortcut.shortcut); - expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['F']); + expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['Control+F']); expect(api.getDefaultShortcuts()).toHaveProperty( `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`, mockAddonShortcut.shortcut.defaultShortcut @@ -148,7 +148,7 @@ describe('shortcuts api', () => { const { api, state } = initShortcuts({ store }); store.setState(state); - expect(api.getShortcutKeys().fullScreen).toEqual(['F']); + expect(api.getShortcutKeys().fullScreen).toEqual(['Control+F']); }); it('sets addon shortcut with default value', async () => { @@ -161,7 +161,7 @@ describe('shortcuts api', () => { await api.setAddonShortcut(mockAddonSecondShortcut.addon, mockAddonSecondShortcut.shortcut); await api.setAddonShortcut(mockSecondAddonShortcut.addon, mockSecondAddonShortcut.shortcut); - expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['F']); + expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['Control+F']); expect(api.getDefaultShortcuts()).toHaveProperty( `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`, mockAddonShortcut.shortcut.defaultShortcut @@ -184,7 +184,7 @@ describe('shortcuts api', () => { store.setState(state); expect(api.getShortcutKeys().fullScreen).toEqual(['Z']); - expect(api.getShortcutKeys().togglePanel).toEqual(['A']); + expect(api.getShortcutKeys().togglePanel).toEqual(['Control+A']); }); it('sets defaults, ignoring anything persisted that is out of date', () => { @@ -235,7 +235,7 @@ describe('shortcuts api', () => { await api.restoreAllDefaultShortcuts(); expect(api.getShortcutKeys().fullScreen).toEqual(['F']); - expect(api.getShortcutKeys().togglePanel).toEqual(['A']); + expect(api.getShortcutKeys().togglePanel).toEqual(['Control+A']); expect(api.getShortcutKeys()[`${addon}-${shortcut.actionName}`]).toEqual( shortcut.defaultShortcut ); @@ -269,7 +269,7 @@ describe('shortcuts api', () => { `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}` ); - expect(api.getShortcutKeys().fullScreen).toEqual(['F']); + expect(api.getShortcutKeys().fullScreen).toEqual(['Control+F']); expect(api.getShortcutKeys().togglePanel).toEqual(['B']); expect( api.getShortcutKeys()[`${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`] From f75bbf1c44f99fcc9d7cb9fc7ef9a8993692e273 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 17 Jan 2024 11:55:23 +0000 Subject: [PATCH 06/10] Update shortcuts.test.js --- code/lib/manager-api/src/tests/shortcuts.test.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/code/lib/manager-api/src/tests/shortcuts.test.js b/code/lib/manager-api/src/tests/shortcuts.test.js index 5d461a00df1d..cbe511f45a5c 100644 --- a/code/lib/manager-api/src/tests/shortcuts.test.js +++ b/code/lib/manager-api/src/tests/shortcuts.test.js @@ -54,7 +54,7 @@ describe('shortcuts api', () => { const { api, state } = initShortcuts({ store }); store.setState(state); - expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['Control+F']); + expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['control', 'F']); }); it('gets defaults including addon ones', async () => { @@ -67,7 +67,7 @@ describe('shortcuts api', () => { await api.setAddonShortcut(mockAddonSecondShortcut.addon, mockAddonSecondShortcut.shortcut); await api.setAddonShortcut(mockSecondAddonShortcut.addon, mockSecondAddonShortcut.shortcut); - expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['Control+F']); + expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['control', 'F']); expect(api.getDefaultShortcuts()).toHaveProperty( `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`, mockAddonShortcut.shortcut.defaultShortcut @@ -148,7 +148,7 @@ describe('shortcuts api', () => { const { api, state } = initShortcuts({ store }); store.setState(state); - expect(api.getShortcutKeys().fullScreen).toEqual(['Control+F']); + expect(api.getShortcutKeys().fullScreen).toEqual(['control', 'F']); }); it('sets addon shortcut with default value', async () => { @@ -161,7 +161,7 @@ describe('shortcuts api', () => { await api.setAddonShortcut(mockAddonSecondShortcut.addon, mockAddonSecondShortcut.shortcut); await api.setAddonShortcut(mockSecondAddonShortcut.addon, mockSecondAddonShortcut.shortcut); - expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['Control+F']); + expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['control', 'F']); expect(api.getDefaultShortcuts()).toHaveProperty( `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`, mockAddonShortcut.shortcut.defaultShortcut @@ -184,7 +184,7 @@ describe('shortcuts api', () => { store.setState(state); expect(api.getShortcutKeys().fullScreen).toEqual(['Z']); - expect(api.getShortcutKeys().togglePanel).toEqual(['Control+A']); + expect(api.getShortcutKeys().togglePanel).toEqual(['control', 'A']); }); it('sets defaults, ignoring anything persisted that is out of date', () => { @@ -234,8 +234,8 @@ describe('shortcuts api', () => { await api.setShortcut(`${addon}-${shortcut.actionName}`, ['I']); await api.restoreAllDefaultShortcuts(); - expect(api.getShortcutKeys().fullScreen).toEqual(['F']); - expect(api.getShortcutKeys().togglePanel).toEqual(['Control+A']); + expect(api.getShortcutKeys().fullScreen).toEqual(['control', 'F']); + expect(api.getShortcutKeys().togglePanel).toEqual(['control', 'A']); expect(api.getShortcutKeys()[`${addon}-${shortcut.actionName}`]).toEqual( shortcut.defaultShortcut ); @@ -269,7 +269,7 @@ describe('shortcuts api', () => { `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}` ); - expect(api.getShortcutKeys().fullScreen).toEqual(['Control+F']); + expect(api.getShortcutKeys().fullScreen).toEqual(['control', 'F']); expect(api.getShortcutKeys().togglePanel).toEqual(['B']); expect( api.getShortcutKeys()[`${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`] From edc3da323ca7cdc979cc116350ecd42d5835a2b2 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 17 Jan 2024 14:32:48 +0000 Subject: [PATCH 07/10] Update to alt --- code/addons/outline/src/OutlineSelector.tsx | 4 +-- code/addons/viewport/src/shortcuts.ts | 4 +-- code/e2e-tests/manager.spec.ts | 26 +++++++++---------- code/e2e-tests/preview-web.spec.ts | 4 +-- code/lib/manager-api/src/modules/shortcuts.ts | 10 +++---- .../manager-api/src/tests/shortcuts.test.js | 16 ++++++------ 6 files changed, 32 insertions(+), 32 deletions(-) diff --git a/code/addons/outline/src/OutlineSelector.tsx b/code/addons/outline/src/OutlineSelector.tsx index 75185cb5ed07..10d5eec131f6 100644 --- a/code/addons/outline/src/OutlineSelector.tsx +++ b/code/addons/outline/src/OutlineSelector.tsx @@ -1,5 +1,5 @@ import React, { memo, useCallback, useEffect } from 'react'; -import { controlOrMetaKey, useGlobals, useStorybookApi } from '@storybook/manager-api'; +import { useGlobals, useStorybookApi } from '@storybook/manager-api'; import { IconButton } from '@storybook/components'; import { OutlineIcon } from '@storybook/icons'; import { ADDON_ID, PARAM_KEY } from './constants'; @@ -21,7 +21,7 @@ export const OutlineSelector = memo(function OutlineSelector() { useEffect(() => { api.setAddonShortcut(ADDON_ID, { label: 'Toggle Outline', - defaultShortcut: [controlOrMetaKey(), 'O'], + defaultShortcut: ['alt', 'O'], actionName: 'outline', showInMenu: false, action: toggleOutline, diff --git a/code/addons/viewport/src/shortcuts.ts b/code/addons/viewport/src/shortcuts.ts index 7a2041184c2c..becc7e14f86a 100644 --- a/code/addons/viewport/src/shortcuts.ts +++ b/code/addons/viewport/src/shortcuts.ts @@ -1,4 +1,4 @@ -import { controlOrMetaKey, type API } from '@storybook/manager-api'; +import { type API } from '@storybook/manager-api'; import { ADDON_ID } from './constants'; import { globals as defaultGlobals } from './preview'; @@ -38,7 +38,7 @@ export const registerShortcuts = async ( await api.setAddonShortcut(ADDON_ID, { label: 'Next viewport', - defaultShortcut: [controlOrMetaKey(), 'V'], + defaultShortcut: ['alt', 'V'], actionName: 'next', action: () => { updateGlobals({ diff --git a/code/e2e-tests/manager.spec.ts b/code/e2e-tests/manager.spec.ts index 38388c941c2d..5ef2a975b4ea 100644 --- a/code/e2e-tests/manager.spec.ts +++ b/code/e2e-tests/manager.spec.ts @@ -21,9 +21,9 @@ test.describe('Manager UI', () => { await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); // toggle with keyboard shortcut - await sbPage.page.locator('html').press('Control+s'); + await sbPage.page.locator('html').press('Alt+s'); await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); - await sbPage.page.locator('html').press('Control+s'); + await sbPage.page.locator('html').press('Alt+s'); await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); // toggle with menu item @@ -51,9 +51,9 @@ test.describe('Manager UI', () => { await expectToolbarVisibility(true); // toggle with keyboard shortcut - await sbPage.page.locator('html').press('Control+t'); + await sbPage.page.locator('html').press('Alt+t'); await expectToolbarVisibility(false); - await sbPage.page.locator('html').press('Control+t'); + await sbPage.page.locator('html').press('Alt+t'); await expectToolbarVisibility(true); // toggle with menu item @@ -75,9 +75,9 @@ test.describe('Manager UI', () => { await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible(); // toggle with keyboard shortcut - await sbPage.page.locator('html').press('Control+a'); + await sbPage.page.locator('html').press('Alt+a'); await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible(); - await sbPage.page.locator('html').press('Control+a'); + await sbPage.page.locator('html').press('Alt+a'); await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible(); }); @@ -90,9 +90,9 @@ test.describe('Manager UI', () => { await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible(); // toggle with keyboard shortcut - await sbPage.page.locator('html').press('Control+a'); + await sbPage.page.locator('html').press('Alt+a'); await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible(); - await sbPage.page.locator('html').press('Control+a'); + await sbPage.page.locator('html').press('Alt+a'); await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible(); // toggle with menu item @@ -114,16 +114,16 @@ test.describe('Manager UI', () => { await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible(); // toggle position with keyboard shortcut - await sbPage.page.locator('html').press('Control+d'); + await sbPage.page.locator('html').press('Alt+d'); await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible(); // TODO: how to assert panel position? // hide with keyboard shortcut - await sbPage.page.locator('html').press('Control+a'); + await sbPage.page.locator('html').press('Alt+a'); await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible(); // toggling position should also show the panel again - await sbPage.page.locator('html').press('Control+d'); + await sbPage.page.locator('html').press('Alt+d'); await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible(); }); }); @@ -138,11 +138,11 @@ test.describe('Manager UI', () => { await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); // toggle with keyboard shortcut - await sbPage.page.locator('html').press('Control+f'); + await sbPage.page.locator('html').press('Alt+f'); await expect(sbPage.page.locator('#storybook-panel-root')).not.toBeVisible(); await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); - await sbPage.page.locator('html').press('Control+f'); + await sbPage.page.locator('html').press('Alt+f'); await expect(sbPage.page.locator('#storybook-panel-root')).toBeVisible(); await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); diff --git a/code/e2e-tests/preview-web.spec.ts b/code/e2e-tests/preview-web.spec.ts index 8faee05bff1d..b4a96c4b6001 100644 --- a/code/e2e-tests/preview-web.spec.ts +++ b/code/e2e-tests/preview-web.spec.ts @@ -32,7 +32,7 @@ test.describe('preview-web', () => { // click outside, to remove focus from the input of the story, then press S to toggle sidebar await sbPage.previewRoot().click(); - await sbPage.previewRoot().press('Control+s'); + await sbPage.previewRoot().press('Alt+s'); await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); }); @@ -47,7 +47,7 @@ test.describe('preview-web', () => { await expect(sbPage.page.locator('.sidebar-container')).toBeVisible(); - await sbPage.previewRoot().getByRole('button').getByText('Submit').first().press('Control+s'); + await sbPage.previewRoot().getByRole('button').getByText('Submit').first().press('Alt+s'); await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); }); }); diff --git a/code/lib/manager-api/src/modules/shortcuts.ts b/code/lib/manager-api/src/modules/shortcuts.ts index 8865b20d4973..6220aa9a2cf0 100644 --- a/code/lib/manager-api/src/modules/shortcuts.ts +++ b/code/lib/manager-api/src/modules/shortcuts.ts @@ -125,11 +125,11 @@ type API_AddonShortcutLabels = Record; type API_AddonShortcutDefaults = Record; export const defaultShortcuts: API_Shortcuts = Object.freeze({ - fullScreen: [controlOrMetaKey(), 'F'], - togglePanel: [controlOrMetaKey(), 'A'], - panelPosition: [controlOrMetaKey(), 'D'], - toggleNav: [controlOrMetaKey(), 'S'], - toolbar: [controlOrMetaKey(), 'T'], + fullScreen: ['alt', 'F'], + togglePanel: ['alt', 'A'], + panelPosition: ['alt', 'D'], + toggleNav: ['alt', 'S'], + toolbar: ['alt', 'T'], search: [controlOrMetaKey(), 'K'], focusNav: ['1'], focusIframe: ['2'], diff --git a/code/lib/manager-api/src/tests/shortcuts.test.js b/code/lib/manager-api/src/tests/shortcuts.test.js index cbe511f45a5c..9aba57c756f7 100644 --- a/code/lib/manager-api/src/tests/shortcuts.test.js +++ b/code/lib/manager-api/src/tests/shortcuts.test.js @@ -54,7 +54,7 @@ describe('shortcuts api', () => { const { api, state } = initShortcuts({ store }); store.setState(state); - expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['control', 'F']); + expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['alt', 'F']); }); it('gets defaults including addon ones', async () => { @@ -67,7 +67,7 @@ describe('shortcuts api', () => { await api.setAddonShortcut(mockAddonSecondShortcut.addon, mockAddonSecondShortcut.shortcut); await api.setAddonShortcut(mockSecondAddonShortcut.addon, mockSecondAddonShortcut.shortcut); - expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['control', 'F']); + expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['alt', 'F']); expect(api.getDefaultShortcuts()).toHaveProperty( `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`, mockAddonShortcut.shortcut.defaultShortcut @@ -148,7 +148,7 @@ describe('shortcuts api', () => { const { api, state } = initShortcuts({ store }); store.setState(state); - expect(api.getShortcutKeys().fullScreen).toEqual(['control', 'F']); + expect(api.getShortcutKeys().fullScreen).toEqual(['alt', 'F']); }); it('sets addon shortcut with default value', async () => { @@ -161,7 +161,7 @@ describe('shortcuts api', () => { await api.setAddonShortcut(mockAddonSecondShortcut.addon, mockAddonSecondShortcut.shortcut); await api.setAddonShortcut(mockSecondAddonShortcut.addon, mockSecondAddonShortcut.shortcut); - expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['control', 'F']); + expect(api.getDefaultShortcuts()).toHaveProperty('fullScreen', ['alt', 'F']); expect(api.getDefaultShortcuts()).toHaveProperty( `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`, mockAddonShortcut.shortcut.defaultShortcut @@ -184,7 +184,7 @@ describe('shortcuts api', () => { store.setState(state); expect(api.getShortcutKeys().fullScreen).toEqual(['Z']); - expect(api.getShortcutKeys().togglePanel).toEqual(['control', 'A']); + expect(api.getShortcutKeys().togglePanel).toEqual(['alt', 'A']); }); it('sets defaults, ignoring anything persisted that is out of date', () => { @@ -234,8 +234,8 @@ describe('shortcuts api', () => { await api.setShortcut(`${addon}-${shortcut.actionName}`, ['I']); await api.restoreAllDefaultShortcuts(); - expect(api.getShortcutKeys().fullScreen).toEqual(['control', 'F']); - expect(api.getShortcutKeys().togglePanel).toEqual(['control', 'A']); + expect(api.getShortcutKeys().fullScreen).toEqual(['alt', 'F']); + expect(api.getShortcutKeys().togglePanel).toEqual(['alt', 'A']); expect(api.getShortcutKeys()[`${addon}-${shortcut.actionName}`]).toEqual( shortcut.defaultShortcut ); @@ -269,7 +269,7 @@ describe('shortcuts api', () => { `${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}` ); - expect(api.getShortcutKeys().fullScreen).toEqual(['control', 'F']); + expect(api.getShortcutKeys().fullScreen).toEqual(['alt', 'F']); expect(api.getShortcutKeys().togglePanel).toEqual(['B']); expect( api.getShortcutKeys()[`${mockAddonShortcut.addon}-${mockAddonShortcut.shortcut.actionName}`] From ccc3fc4b2ff7dbb468f97fd239f5134329fdd1cd Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 17 Jan 2024 14:35:41 +0000 Subject: [PATCH 08/10] Update MIGRATION.md --- MIGRATION.md | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 4689f4627bb5..0f7a87d2c890 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,7 @@

Migration

- [From version 7.x to 8.0.0](#from-version-7x-to-800) + - [Default keyboard shortcuts changed](#default-keyboard-shortcuts-changed) - [Manager addons are now rendered with React 18](#manager-addons-are-now-rendered-with-react-18) - [Removal of `storiesOf`-API](#removal-of-storiesof-api) - [Removed deprecated shim packages](#removed-deprecated-shim-packages) @@ -69,17 +70,17 @@ - [Addon author changes](#addon-author-changes) - [Removed `config` preset](#removed-config-preset-1) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) - - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) + - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) + - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) + - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) - - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -105,7 +106,7 @@ - [Deploying build artifacts](#deploying-build-artifacts) - [Dropped support for file URLs](#dropped-support-for-file-urls) - [Serving with nginx](#serving-with-nginx) - - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) + - [Ignore story files from node_modules](#ignore-story-files-from-node_modules) - [7.0 Core changes](#70-core-changes) - [7.0 feature flags removed](#70-feature-flags-removed) - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) @@ -118,7 +119,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -168,7 +169,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) + - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - [`Story` type deprecated](#story-type-deprecated) @@ -383,6 +384,10 @@ ## From version 7.x to 8.0.0 +### Default keyboard shortcuts changed + +The default keyboard shortcuts have changed to avoid any conflicts with the browser's default shortcuts or when you are directly typing in the Manager. If you want to get the new default shortcuts, you can reset your shortcuts in the keyboard shortcuts panel by pressing the `Restore default` button. + ### Manager addons are now rendered with React 18 The UI added to the manager via addons is now rendered with React 18. From 428d0308e554fcbe72ec0440c1d847d3273c4151 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 17 Jan 2024 14:47:03 +0000 Subject: [PATCH 09/10] Update Search.tsx --- .../manager/src/components/sidebar/Search.tsx | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 32415c056110..525337b8b2aa 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -122,8 +122,15 @@ const FocusKey = styled.code(({ theme }) => ({ color: theme.base === 'light' ? theme.color.dark : theme.textMutedColor, userSelect: 'none', pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + gap: 4, })); +const FocusKeyCmd = styled.span({ + fontSize: '14px', +}); + const ClearIcon = styled.div(({ theme }) => ({ position: 'absolute', top: 0, @@ -352,7 +359,17 @@ export const Search = React.memo<{ {/* @ts-expect-error (TODO) */} - {enableShortcuts && !isOpen && {searchShortcut}} + {enableShortcuts && !isOpen && ( + + {searchShortcut === '⌘ K' ? ( + <> + ⌘K + + ) : ( + searchShortcut + )} + + )} {isOpen && ( clearSelection()}> From 6c386be9e574c71df3bcb193b7a2db543a169fca Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 18 Jan 2024 09:57:36 +0000 Subject: [PATCH 10/10] Update shortcuts --- code/addons/viewport/src/shortcuts.ts | 4 ++-- code/lib/manager-api/src/modules/shortcuts.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/code/addons/viewport/src/shortcuts.ts b/code/addons/viewport/src/shortcuts.ts index becc7e14f86a..974abe477d6d 100644 --- a/code/addons/viewport/src/shortcuts.ts +++ b/code/addons/viewport/src/shortcuts.ts @@ -27,7 +27,7 @@ export const registerShortcuts = async ( ) => { await api.setAddonShortcut(ADDON_ID, { label: 'Previous viewport', - defaultShortcut: ['shift', 'V'], + defaultShortcut: ['alt', 'shift', 'V'], actionName: 'previous', action: () => { updateGlobals({ @@ -49,7 +49,7 @@ export const registerShortcuts = async ( await api.setAddonShortcut(ADDON_ID, { label: 'Reset viewport', - defaultShortcut: ['alt', 'V'], + defaultShortcut: ['alt', 'control', 'V'], actionName: 'reset', action: () => { updateGlobals(defaultGlobals); diff --git a/code/lib/manager-api/src/modules/shortcuts.ts b/code/lib/manager-api/src/modules/shortcuts.ts index 6220aa9a2cf0..892afa652ab7 100644 --- a/code/lib/manager-api/src/modules/shortcuts.ts +++ b/code/lib/manager-api/src/modules/shortcuts.ts @@ -139,7 +139,7 @@ export const defaultShortcuts: API_Shortcuts = Object.freeze({ prevStory: ['alt', 'ArrowLeft'], nextStory: ['alt', 'ArrowRight'], shortcutsPage: [controlOrMetaKey(), 'shift', ','], - aboutPage: [','], + aboutPage: [controlOrMetaKey(), ','], escape: ['escape'], // This one is not customizable collapseAll: [controlOrMetaKey(), 'shift', 'ArrowUp'], expandAll: [controlOrMetaKey(), 'shift', 'ArrowDown'],