Test: Proposed API for `QuickPickItem` separators

[TylerLeonhardt]

Refs: #74967

• anyOS @kimadeline
• anyOS @weinand

Complexity: 4

Create Issue

---

In this milestone, we've introduced the highly anticipated QuickPick Separators into the API.

API definition:

vscode/src/vscode-dts/vscode.proposed.quickPickSeparators.d.ts

Lines 8 to 18 in d1640b7

	// https://github.com/microsoft/vscode/issues/74967
	export enum QuickPickItemKind {
	Default = 1,
	Separator = 2,
	}
	export interface QuickPickItem {
	kind?: QuickPickItemKind
	}
	}

When you set the kind to Separator on a QuickPickItem, that QPI will be treated like a separator. Here's an example:

	const result = await window.showQuickPick([
		{
			label: 'APIs',
			kind: QuickPickItemKind.Separator
		},
		{
			label: 'showQuickPick',
		},
		{
			label: 'showInputBox',
		},
		{
			label: 'createQuickPick',
		},
		{
			label: 'createInputBox',
		},
		{
			label: 'Types',
			kind: QuickPickItemKind.Separator
		},
		{
			label: 'QuickPickItemKind',
		},
		{
			label: 'QuickInputButton',
		},
		{
			label: 'QuickQuick',
		},
		{
			label: 'InputBox',
		},
	]);

	window.showInformationMessage(`You selected: ${result?.label ?? 'nothing'}`);

or the long form:

	const qp = window.createQuickPick();
	qp.items = sameItemsAsAbove;

	qp.onDidAccept(() => {
		qp.dispose();
		window.showInformationMessage(`You selected: ${qp.selectedItems[0]?.label ?? 'nothing'}`);
	});

	qp.show();

gets you:

Things to test

• Play around with setting the kind property
• Keep in mind that the only property that matters when setting kind to Separator is label all others will be ignored (test this)
• Ensure you can set label to empty string to add a blank separator
• in the long form, ensure you are also able to add buttons to the QPI and they are rendered properly (they'll be ignored if you add them to the separator QPIs) NOTE: You will need the latest vscode.d.ts to test buttons as they are being finalized so run npx vscode-dts main

Useful stuff

• Create an extension guide
• Extensions samples repo
• Add a finalized API: npx vscode-dts main
• Add a proposed API:
  • First add the proposed API to the package.json (see below)
  • Then run npx vscode-dts dev to get the typings

	"enabledApiProposals": [
		"quickPickSeparators"
	],

Note the name of the proposed API is gathered from the file name in the vscode-dts folder

[weinand]

Works great!