feat(core): rewrite page-mode-switch with RadioGroup, bind hotkey with cmdk (#7758)

close AF-1170

- bump `@toeverything/theme`
- refactor page-mode-switch
  - use global `<RadioGroup />`
  - reuse for doc history
  - remove `styled` usage
  - bind hotkey via cmdk
- Update `<RadioGroup />` color scheme with latest design system
- Update right sidebar header tab style
- Update tooltip with shortcut for app nav button
This commit is contained in:
CatsJuice
2024-08-12 03:56:56 +00:00
parent 4ac9bd7790
commit 75e02bb088
18 changed files with 210 additions and 302 deletions

View File

@@ -1,54 +1,42 @@
import { expect, type Page } from '@playwright/test';
export function locateModeSwitchButton(
page: Page,
mode: 'page' | 'edgeless',
active?: boolean
) {
// switch is implemented as RadioGroup button,
// so we can use aria-checked to determine the active state
const checkedSelector = active ? '[aria-checked="true"]' : '';
return page.locator(
`[data-testid="switch-${mode}-mode-button"]${checkedSelector}`
);
}
export async function clickEdgelessModeButton(page: Page) {
await page.getByTestId('switch-edgeless-mode-button').click({
delay: 50,
});
await expect(
page.locator(
'[data-testid="switch-edgeless-mode-button"][data-active="true"]'
)
).toBeVisible();
await locateModeSwitchButton(page, 'edgeless').click({ delay: 50 });
await ensureInEdgelessMode(page);
}
export async function clickPageModeButton(page: Page) {
await page.getByTestId('switch-page-mode-button').click({
delay: 50,
});
await expect(
page.locator('[data-testid="switch-page-mode-button"][data-active="true"]')
).toBeVisible();
await locateModeSwitchButton(page, 'page').click({ delay: 50 });
await ensureInPageMode(page);
}
export async function ensureInPageMode(page: Page) {
await expect(
page.locator('[data-testid="switch-page-mode-button"][data-active="true"]')
).toBeVisible();
await expect(locateModeSwitchButton(page, 'page', true)).toBeVisible();
}
export async function ensureInEdgelessMode(page: Page) {
await expect(
page.locator(
'[data-testid="switch-edgeless-mode-button"][data-active="true"]'
)
).toBeVisible();
await expect(locateModeSwitchButton(page, 'edgeless', true)).toBeVisible();
}
export async function getPageMode(page: Page): Promise<'page' | 'edgeless'> {
if (
await page
.locator('[data-testid="switch-page-mode-button"][data-active="true"]')
.isVisible()
) {
if (await locateModeSwitchButton(page, 'page', true).isVisible()) {
return 'page';
}
if (
await page
.locator(
'[data-testid="switch-edgeless-mode-button"][data-active="true"]'
)
.isVisible()
) {
if (await locateModeSwitchButton(page, 'edgeless', true).isVisible()) {
return 'edgeless';
}
throw new Error('Unknown mode');