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,37 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+
+import {
+ applicationBackgroundColor,
+ borderWidth,
+ popupBorderColor,
+ elevation2BoxShadow,
+ bodyFont,
+ bodyFontColor,
+ smallPadding,
+ menuMinWidth
+} from '../theme-provider/design-tokens';
+
+export const styles = css`
+ ${display('inline-flex')}
+
+ :host {
+ background: ${applicationBackgroundColor};
+ border: ${borderWidth} solid ${popupBorderColor};
+ flex-direction: column;
+ margin: 0;
+ min-width: ${menuMinWidth};
+ box-shadow: ${elevation2BoxShadow};
+ color: ${bodyFontColor};
+ font: ${bodyFont};
+ }
+
+ :host(:focus) {
+ outline: 0px;
+ }
+
+ slot {
+ padding: ${smallPadding};
+ display: block;
+ }
+`;

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

@@ -0,0 +1,50 @@
+import { ViewTemplate, html } from '@microsoft/fast-element';
+import type { Meta, StoryFn } from '@storybook/html';
+import {
+ createMatrix,
+ sharedMatrixParameters
+} from '../../utilities/tests/matrix';
+import {
+ createMatrixThemeStory,
+ createStory
+} from '../../utilities/tests/storybook';
+import { listboxTag } from '..';
+import { listOptionTag } from '../../list-option';
+import { hiddenWrapper } from '../../utilities/tests/hidden';
+
+const metadata: Meta = {
+ title: 'Tests/Listbox',
+ parameters: {
+ ...sharedMatrixParameters()
+ }
+};
+
+export default metadata;
+
+const playFunction = (): void => {
+ const editorNodeList = document.querySelectorAll('nimble-listbox');
+ editorNodeList.forEach(element => element.selectFirstOption());
+};
+
+const component = (): ViewTemplate => html`
+ <${listboxTag}>
+ <${listOptionTag} value="1">Option 1</${listOptionTag}>
+ <${listOptionTag} value="2">Option 2</${listOptionTag}>
+ <${listOptionTag} value="3" disabled>Option 3</${listOptionTag}>
+ <${listOptionTag} value="4">Option 4</${listOptionTag}>
+ <${listOptionTag} value="5" hidden>Option 5</${listOptionTag}>
+ </${listboxTag}>
+`;
+
+export const listboxThemeMatrix: StoryFn = createMatrixThemeStory(
+ createMatrix(component)
+);
+listboxThemeMatrix.play = playFunction;
+
+export const hiddenListbox: StoryFn = createStory(
+ hiddenWrapper(
+ html`<${listboxTag} hidden>
+ <${listOptionTag} value="1">Option 1</${listOptionTag}>
+ </${listboxTag}>`
+ )
+);

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/menu/styles.ts

@@ -12,7 +12,8 @@ import {
  groupHeaderFontColor,
  smallPadding,
  mediumPadding,
- elevation2BoxShadow
+ elevation2BoxShadow,
+ menuMinWidth
 } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { hexToRgbaCssColor } from '../utilities/style/colors';
@@ -25,7 +26,7 @@ export const styles = css`
  background: ${applicationBackgroundColor};
  border: ${borderWidth} solid ${popupBorderColor};
  margin: 0;
- min-width: 176px;
+ min-width: ${menuMinWidth};
  width: max-content;
  box-shadow: ${elevation2BoxShadow};
  }

packages/nimble-components/src/theme-provider/design-token-comments.ts

@@ -70,6 +70,7 @@ export const comments: { readonly [key in TokenName]: string | null } = {
  dialogLargeWidth: 'Standard width for large dialogs.',
  dialogLargeHeight: 'Standard height for large dialogs.',
  dialogLargeMaxHeight: 'Standard maximum height for large dialogs.',
+ menuMinWidth: 'Standard menu min width for menu popup.',
  bannerGapSize: 'Space between stacked banners',
  spinnerSmallHeight: 'Small height (16px) for a spinner component',
  spinnerMediumHeight: 'Medium height (32px) for a spinner component',

packages/nimble-components/src/theme-provider/design-token-names.ts

@@ -53,6 +53,7 @@ export const tokenNames: { readonly [key in TokenName]: string } = {
  dialogLargeWidth: 'dialog-large-width',
  dialogLargeHeight: 'dialog-large-height',
  dialogLargeMaxHeight: 'dialog-large-max-height',
+ menuMinWidth: 'menu-min-width',
  bannerGapSize: 'banner-gap-size',
  spinnerSmallHeight: 'spinner-small-height',
  spinnerMediumHeight: 'spinner-medium-height',
@@ -256,6 +257,7 @@ const tokenSuffixes = [
  'FontFamily',
  'BoxShadow',
  'MaxHeight',
+ 'MinWidth',
  'Font',
  'Size',
  'Width',

packages/nimble-components/src/theme-provider/design-tokens.ts

@@ -324,6 +324,9 @@ export const dialogLargeHeight = DesignToken.create<string>(
 export const dialogLargeMaxHeight = DesignToken.create<string>(
  styleNameFromTokenName(tokenNames.dialogLargeMaxHeight)
 ).withDefault('680px');
+export const menuMinWidth = DesignToken.create<string>(
+ styleNameFromTokenName(tokenNames.menuMinWidth)
+).withDefault('176px');
 export const bannerGapSize = DesignToken.create<string>(
  styleNameFromTokenName(tokenNames.bannerGapSize)
 ).withDefault('1px');

packages/nimble-components/src/theme-provider/tests/tokens.stories.ts

@@ -110,6 +110,7 @@ const tokenTemplates: {
  FontFamily: stringValueTemplate,
  BoxShadow: stringValueTemplate,
  MaxHeight: stringValueTemplate,
+ MinWidth: stringValueTemplate,
  Font: fontTemplate,
  Size: stringValueTemplate,
  Width: stringValueTemplate,