Move picker to drafts (#83)

Author: fcollonval

packages/components/docs/Introduction.mdx

@@ -28,7 +28,6 @@ Here is the list of components part of the Jupyter UI toolkit:
 | `listbox`         | [Listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)                                   | [Stories](?path=/story/components-listbox--documentation)         |
 | `menu`            | [Menu](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)                                      | [Stories](?path=/story/components-menu--documentation)            |
 | `number-field`    | [Number input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number) | [Stories](?path=/story/components-number-field--documentation)    |
-| `picker`      | Variant of select for large list | [Stories](?path=/story/components-picker--documentation)          |
 | `progress`        | [Meter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/meter/) as line                       | [Stories](?path=/story/components-progress--documentation)        |
 | `progress-ring`   | [Meter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/meter/) as ring                       | [Stories](?path=/story/components-progress-ring--documentation)   |
 | `radio-group`     | [Radio pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)                               | [Stories](?path=/story/components-radio-group--documentation)     |
@@ -43,3 +42,10 @@ Here is the list of components part of the Jupyter UI toolkit:
 | `toolbar`         | [Toolbar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/)                           | [Stories](?path=/story/components-toolbar--documentation)         |
 | `tooltip`         | [Tooltip pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)                           | [Stories](?path=/story/components-tooltip--documentation)         |
 | `tree-view`       | [Tree view pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)                        | [Stories](?path=/story/components-tree-view--documentation)       |
+
+Draft components are prefixed with `jp-draft-`. Their API is unstable and may change between minor versions. Once stability
+is reached, they will be prefixed with simply `jp-`.
+
+| Name              | Reference                                                                                      | Documentation                                                     |
+| ----------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
+| `picker`      | Variant of select for large list | [Stories](?path=/story/components-picker--documentation)          |

packages/components/src/custom-elements.ts

@@ -29,7 +29,6 @@ import type { Menu } from './menu/index.js';
 import type { MenuItem } from './menu-item/index.js';
 import type { NumberField } from './number-field/index.js';
 import type { Option } from './option/index.js';
-import type { Picker } from './picker/index.js';
 import type { Progress } from './progress/index.js';
 import type { ProgressRing } from './progress-ring/index.js';
 import type { Radio } from './radio/index.js';
@@ -50,6 +49,8 @@ import type { Tooltip } from './tooltip/index.js';
 import type { TreeItem } from './tree-item/index.js';
 import type { TreeView } from './tree-view/index.js';
 
+import type { Picker } from './drafts/picker/index.js';
+
 /**
  * Export all custom element definitions
  */
@@ -85,13 +86,6 @@ import { jpMenu } from './menu/index.js';
 import { jpMenuItem } from './menu-item/index.js';
 import { jpNumberField } from './number-field/index.js';
 import { jpOption } from './option/index.js';
-import {
-  jpPicker,
-  jpPickerList,
-  jpPickerListItem,
-  jpPickerMenu,
-  jpPickerMenuOption
-} from './picker/index.js';
 import { jpProgress } from './progress/index.js';
 import { jpProgressRing } from './progress-ring/index.js';
 import { jpRadio } from './radio/index.js';
@@ -112,6 +106,14 @@ import { jpTooltip } from './tooltip/index.js';
 import { jpTreeItem } from './tree-item/index.js';
 import { jpTreeView } from './tree-view/index.js';
 
+import {
+  jpPicker,
+  jpPickerList,
+  jpPickerListItem,
+  jpPickerMenu,
+  jpPickerMenuOption
+} from './drafts/picker/index.js';
+
 // When adding new components, make sure to add the component to the `allComponents` object
 // in addition to exporting the component by name. Ideally we would be able to just add
 // `export * as allComponents from "./custom-elements" from  src/index.ts but API extractor

packages/components/src/drafts/picker/Documentation.mdx

@@ -0,0 +1,15 @@
+import { Meta, Primary, Controls } from '@storybook/blocks';
+import * as PickerStories from './picker.stories';
+
+<Meta of={PickerStories} />
+
+# Picker
+
+> This component is experimental. The API may changed between
+> minor versions.
+
+<Primary />
+
+## Props
+
+<Controls />

packages/components/src/picker/index.ts renamed to packages/components/src/drafts/picker/index.ts

@@ -15,7 +15,7 @@ import {
   pickerMenuTemplate,
   pickerTemplate
 } from '@microsoft/fast-foundation';
-import { fillColor, neutralLayerFloating } from '../design-tokens.js';
+import { fillColor, neutralLayerFloating } from '../../design-tokens.js';
 import { pickerStyles } from './picker.styles.js';
 import { pickerMenuStyles } from './picker-menu.styles.js';
 import { pickerMenuOptionStyles } from './picker-menu-option.styles.js';
@@ -29,10 +29,10 @@ import { pickerListItemStyles } from './picker-list-item.styles.js';
  *
  * @alpha
  * @remarks
- * * Generates HTML Element: `<jp-picker>`
+ * * Generates HTML Element: `<jp-draft-picker>`
  */
 export const jpPicker = Picker.compose({
-  baseName: 'picker',
+  baseName: 'draft-picker',
   template: pickerTemplate,
   styles: pickerStyles,
   shadowOptions: {}
@@ -64,10 +64,10 @@ export class PickerMenu extends FoundationPickerMenu {
  *
  * @alpha
  * @remarks
- * HTML Element: \<jp-picker-menu\>
+ * HTML Element: \<jp-draft-picker-menu\>
  */
 export const jpPickerMenu = PickerMenu.compose<FoundationElementDefinition>({
-  baseName: 'picker-menu',
+  baseName: 'draft-picker-menu',
   baseClass: FoundationPickerMenu,
   template: pickerMenuTemplate,
   styles: pickerMenuStyles
@@ -79,10 +79,10 @@ export const jpPickerMenu = PickerMenu.compose<FoundationElementDefinition>({
  *
  * @alpha
  * @remarks
- * HTML Element: \<jp-picker-menu-option\>
+ * HTML Element: \<jp-draft-picker-menu-option\>
  */
 export const jpPickerMenuOption = PickerMenuOption.compose({
-  baseName: 'picker-menu-option',
+  baseName: 'draft-picker-menu-option',
   template: pickerMenuOptionTemplate,
   styles: pickerMenuOptionStyles
 });
@@ -93,11 +93,11 @@ export const jpPickerMenuOption = PickerMenuOption.compose({
  *
  * @alpha
  * @remarks
- * HTML Element: \<jp-picker-list\>
+ * HTML Element: \<jp-draft-picker-list\>
  *
  */
 export const jpPickerList = PickerList.compose({
-  baseName: 'picker-list',
+  baseName: 'draft-picker-list',
   template: pickerListTemplate,
   styles: pickerListStyles
 });
@@ -107,10 +107,10 @@ export const jpPickerList = PickerList.compose({
  *
  * @alpha
  * @remarks
- * HTML Element: \<jp-picker-list-item\>
+ * HTML Element: \<jp-draft-picker-list-item\>
  */
 export const jpPickerListItem = PickerListItem.compose({
-  baseName: 'picker-list-item',
+  baseName: 'draft-picker-list-item',
   template: pickerListItemTemplate,
   styles: pickerListItemStyles
 });

packages/components/src/picker/picker-list-item.styles.ts renamed to packages/components/src/drafts/picker/picker-list-item.styles.ts

@@ -24,8 +24,8 @@ import {
   neutralForegroundRest,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '../design-tokens.js';
-import { heightNumber } from '../styles/index.js';
+} from '../../design-tokens.js';
+import { heightNumber } from '../../styles/index.js';
 
 /**
  * Styles for Picker list item

packages/components/src/picker/picker-list.styles.ts renamed to packages/components/src/drafts/picker/picker-list.styles.ts

@@ -21,8 +21,8 @@ import {
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '../design-tokens.js';
-import { heightNumber } from '../styles/index.js';
+} from '../../design-tokens.js';
+import { heightNumber } from '../../styles/index.js';
 
 /**
  * Styles for Picker list

packages/components/src/picker/picker-menu-option.styles.ts renamed to packages/components/src/drafts/picker/picker-menu-option.styles.ts

@@ -28,8 +28,8 @@ import {
   neutralForegroundRest,
   typeRampBaseFontSize,
   typeRampBaseLineHeight
-} from '../design-tokens.js';
-import { heightNumber } from '../styles/index.js';
+} from '../../design-tokens.js';
+import { heightNumber } from '../../styles/index.js';
 
 /**
  * Styles for Picker menu option

packages/components/src/picker/picker-menu.styles.ts renamed to packages/components/src/drafts/picker/picker-menu.styles.ts

@@ -13,8 +13,8 @@ import {
   designUnit,
   fillColor,
   strokeWidth
-} from '../design-tokens.js';
-import { elevation } from '../styles/index.js';
+} from '../../design-tokens.js';
+import { elevation } from '../../styles/index.js';
 
 /**
  * Styles for Picker menu

packages/components/src/picker/picker.stories.ts renamed to packages/components/src/drafts/picker/picker.stories.ts

@@ -27,7 +27,7 @@ const Template: StoryFn = (args): string => {
   const max = args.maxSelected ? `max-selected="${args.maxSelected}"` : '';
 
   return `
-<jp-picker
+<jp-draft-picker
   default-selection="${args.defaultSelection}"
   selection="${args.selection}"
   options="${args.options}"
@@ -37,7 +37,7 @@ const Template: StoryFn = (args): string => {
   label="${args.label}"
   placeholder="${args.placeholder}"
   ${max}
-></jp-picker>
+></jp-draft-picker>
   `;
 };
 

packages/components/src/picker/picker.styles.ts renamed to packages/components/src/drafts/picker/picker.styles.ts

@@ -9,8 +9,8 @@ import {
   designUnit,
   fillColor,
   typeRampBaseFontSize
-} from '../design-tokens.js';
-import { heightNumber } from '../styles/index.js';
+} from '../../design-tokens.js';
+import { heightNumber } from '../../styles/index.js';
 
 /**
  * Styles for Picker

packages/components/src/picker/picker.test.ts renamed to packages/components/src/drafts/picker/picker.test.ts

@@ -6,7 +6,7 @@ import { test, expect } from '@playwright/test';
 test('Default', async ({ page }) => {
   await page.goto('/iframe.html?id=components-picker--default');
 
-  expect(await page.locator('jp-picker').screenshot()).toMatchSnapshot(
+  expect(await page.locator('jp-draft-picker').screenshot()).toMatchSnapshot(
     'picker-default.png'
   );
 });

packages/components/src/picker/picker.test.ts-snapshots/picker-default-chromium-linux.png renamed to packages/components/src/drafts/picker/picker.test.ts-snapshots/picker-default-chromium-linux.png

@@ -40,7 +40,6 @@ export * from './menu/index.js';
 export * from './menu-item/index.js';
 export * from './number-field/index.js';
 export * from './option/index.js';
-export * from './picker/index.js';
 export * from './progress/index.js';
 export * from './progress-ring/index.js';
 export * from './radio/index.js';
@@ -59,3 +58,6 @@ export * from './toolbar/index.js';
 export * from './tooltip/index.js';
 export * from './tree-view/index.js';
 export * from './tree-item/index.js';
+
+// Draft components
+export * from './drafts/picker/index.js';

packages/components/src/picker/picker.test.ts-snapshots/picker-default-firefox-linux.png renamed to packages/components/src/drafts/picker/picker.test.ts-snapshots/picker-default-firefox-linux.png

@@ -24,7 +24,6 @@ export * from './menu';
 export * from './menu-item';
 export * from './number-field';
 export * from './option';
-export * from './picker';
 export * from './progress';
 export * from './progress-ring';
 export * from './radio';
@@ -44,3 +43,5 @@ export * from './toolbar';
 export * from './tooltip';
 export * from './tree-item';
 export * from './tree-view';
+
+export * from './drafts/picker';