mirror of
https://github.com/supabase/supabase.git
synced 2026-06-01 18:34:37 +08:00
8939c97574
## What kind of change does this PR introduce? Chore / UI consistency fix. Resolves DEPR-418. ## What is the current behavior? Shortcut hints are still hand-built in several high-traffic Studio surfaces, which leads to inconsistent rendering and stale platform-specific markup. Buttons in particular can end up with awkward spacing and baseline alignment when shortcut labels are inserted directly into the button text. ## What is the new behavior? This PR standardises those shortcut hints around `KeyboardShortcut` and updates the surrounding layout primitives to support that approach more cleanly. It includes: - Design docs - using `KeyboardShortcut` in the table side-panel `ActionBar` - replacing hardcoded operation queue button shortcuts in `OperationQueueSidePanel` - standardising the command menu trigger shortcut chip and updating the `LayoutHeader` overrides to match the new DOM shape - replacing the AI editor empty-state `Cmd/Ctrl + K` hint with `KeyboardShortcut` - refining shared shortcut/button primitives so inline shortcuts align better when used as button accessories - keeping the SQL utility shortcut work on this branch consistent with the same shared component approach | Before | After | | --- | --- | | <img width="1454" height="902" alt="CleanShot 2026-03-27 at 15 55 32@2x" src="https://github.com/user-attachments/assets/3a8de192-3f4c-480b-9d26-9b28becd0ee3" /> | <img width="1488" height="906" alt="CleanShot 2026-03-27 at 15 29 31@2x-63A17C58-D023-4D3A-9355-6C40A6485328" src="https://github.com/user-attachments/assets/46ef7f7a-2b8b-4c10-8935-84ca5ad44562" /> | | <img width="738" height="328" alt="CleanShot 2026-03-27 at 15 57 07@2x" src="https://github.com/user-attachments/assets/ad459c41-867d-42f9-a8cb-c936af8326b7" /> | <img width="726" height="290" alt="CleanShot 2026-03-27 at 15 56 29@2x-ECE4E10F-9693-4ED8-B085-DC436A839F52" src="https://github.com/user-attachments/assets/95b4bfb4-ec34-4080-8b69-211b5045ca26" /> | ## Later todo - [ ] Replace the string-based SQL editor placeholder shortcut in `SQLEditor` once that placeholder API supports rich content - [ ] Refactor `CommandOption` to use `KeyboardShortcut` instead of bespoke platform detection and command-key markup - [ ] Standardise the remaining DataTable shortcut hints (`DataTableToolbar`, `DataTableResetButton`, `DataTableFilterCommand`, `DataTableFilterControlsDrawer`) around `KeyboardShortcut` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced a new KeyboardShortcut component for displaying keyboard shortcuts with two visual variants (pill and inline). * Standardized keyboard shortcut indicators across the application interface for consistent user experience. * **Bug Fixes** * Fixed capitalization inconsistencies in button labels and hotkey settings. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
71 lines
1.5 KiB
Plaintext
71 lines
1.5 KiB
Plaintext
---
|
|
title: Keyboard Shortcut
|
|
description: Displays a platform-aware keyboard shortcut label for buttons, menus, tooltips, and helper text.
|
|
component: true
|
|
---
|
|
|
|
<ComponentPreview name="keyboard-shortcut-demo" align="start" peekCode wide />
|
|
|
|
`KeyboardShortcut` renders a compact, platform-aware shortcut label from logical key names.
|
|
|
|
Use it for button accessories, menu shortcuts, tooltips, and helper copy. Avoid placing it directly inside button label text; render it in a right-side accessory slot such as `iconRight` instead.
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { KeyboardShortcut } from 'ui'
|
|
```
|
|
|
|
```tsx
|
|
<KeyboardShortcut keys={['Meta', 'S']} />
|
|
```
|
|
|
|
## Props
|
|
|
|
### `keys`
|
|
|
|
An ordered array of logical key names.
|
|
|
|
```tsx
|
|
<KeyboardShortcut keys={['Meta', 'Enter']} />
|
|
```
|
|
|
|
Supported special keys currently include:
|
|
|
|
- `Meta`
|
|
- `Alt`
|
|
- `Shift`
|
|
- `Enter`
|
|
- `Esc` / `Escape`
|
|
- `Tab`
|
|
|
|
Single-character keys are uppercased automatically.
|
|
|
|
## Variants
|
|
|
|
### Pill (default)
|
|
|
|
Use the default pill variant for menus, tooltips, and standalone shortcut chips.
|
|
|
|
```tsx
|
|
<KeyboardShortcut keys={['Shift', 'Meta', 'M']} />
|
|
```
|
|
|
|
### Inline
|
|
|
|
Use the inline variant when the shortcut needs to sit on the same line as surrounding text or inside a button accessory slot.
|
|
|
|
```tsx
|
|
<Button iconRight={<KeyboardShortcut keys={['Meta', 'Enter']} variant="inline" />}>Apply</Button>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Pill
|
|
|
|
<ComponentPreview name="keyboard-shortcut-pill" align="start" />
|
|
|
|
### Inline
|
|
|
|
<ComponentPreview name="keyboard-shortcut-inline" align="start" />
|