Rich text editor | Nimble listbox component bring up for mention popup

change/@ni-nimble-components-46cd01a3-0093-40b0-94b4-d5773a0a0582.json

@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "Nimble list box component bring up",
+ "packageName": "@ni/nimble-components",
+ "email": "[email protected]",
+ "dependentChangeType": "patch"
+}

packages/nimble-components/src/listbox/index.ts

@@ -0,0 +1,26 @@
+import {
+ DesignSystem,
+ ListboxElement as FoundationListbox,
+ listboxTemplate as template
+} from '@microsoft/fast-foundation';
+import { styles } from './styles';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'nimble-listbox': Listbox;
+ }
+}
+
+/**
+ * A nimble-styled HTML list box
+ */
+export class Listbox extends FoundationListbox {}
+
+const nimbleListbox = Listbox.compose({
+ baseName: 'listbox',
+ template,
+ styles
+});
+
+DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListbox());
+export const listboxTag = DesignSystem.tagFor(Listbox);

packages/nimble-components/src/listbox/styles.ts

@@ -0,0 +1,35 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+
+import {
+ applicationBackgroundColor,
+ borderWidth,
+ popupBorderColor,
+ elevation2BoxShadow,
+ bodyFont,
+ bodyFontColor
+} from '../theme-provider/design-tokens';
+
+export const styles = css`
+ ${display('grid')}
+
+ :host {
+ background: ${applicationBackgroundColor};
+ border: ${borderWidth} solid ${popupBorderColor};
+ margin: 0;
+ min-width: 176px;
+ width: max-content;
+ box-shadow: ${elevation2BoxShadow};
+ color: ${bodyFontColor};
+ font: ${bodyFont};
+ }
+
+ :host(:focus) {
+ outline: 0px;
+ }
+
+ slot {
+ padding: 4px;
+ display: block;
+ }
+`;

packages/nimble-components/src/listbox/tests/listbox.spec.ts

@@ -0,0 +1,13 @@
+import { Listbox, listboxTag } from '..';
+
+describe('Listbox', () => {
+ it('should export its tag', () => {
+ expect(listboxTag).toBe('nimble-listbox');
+ });
+
+ it('can construct an element instance', () => {
+ expect(document.createElement('nimble-listbox')).toBeInstanceOf(
+ Listbox
+ );
+ });
+});

packages/nimble-components/src/listbox/tests/listbox.stories.ts

@@ -0,0 +1,33 @@
+import { html } from '@microsoft/fast-element';
+import type { Meta, StoryObj } from '@storybook/html';
+import { createUserSelectedThemeStory } from '../../utilities/tests/storybook';
+import { listboxTag } from '..';
+import { listOptionTag } from '../../list-option';
+
+const listboxDescription = 'Per [W3C](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) - A listbox widget presents a list of options and allows a user to select one or more of them. A listbox that allows a single option to be chosen is a single-select listbox; one that allows multiple options to be selected is a multi-select listbox.';
+
+const metadata: Meta = {
+ title: 'Tests/Listbox',
+ tags: ['autodocs'],
+ parameters: {
+ docs: {
+ description: {
+ component: listboxDescription
+ }
+ }
+ },
+ // prettier-ignore
+ render: createUserSelectedThemeStory(html`
+ <${listboxTag}>
+ <${listOptionTag} value="1">Option 1</${listOptionTag}>
+ <${listOptionTag} value="2">Option 2</${listOptionTag}>
+ <${listOptionTag} value="3">Option 3</${listOptionTag}>
+ <${listOptionTag} value="4">Option 4</${listOptionTag}>
+ <${listOptionTag} value="5">Option 5</${listOptionTag}>
+ </${listboxTag}>
+ `)
+};
+
+export default metadata;
+
+export const listbox: StoryObj = {};