address feedback

add more element book cases close other dropdowns when another dropdown is opened add placeholder test vira-dropdown minor tweaks and fixes
electrovir · May 6, 2024 · 2fd2931 · 2fd2931
1 parent d0f2273
commit 2fd2931
Show file tree

Hide file tree

Showing 9 changed files with 456 additions and 83 deletions.
diff --git a/package.json b/package.json
@@ -17,8 +17,7 @@
         "format": "virmator format",
         "publish": "virmator publish \"npm run compile && npm run --workspace @electrovir/scripts update:deps && npm i && npm run test:all\"",
         "test": "mono-vir for-each npm test",
-        "test:all": "npm run compile && concurrently -c auto -m 90% --kill-others-on-fail --colors --names tests,spelling,format,docs,build \"npm run test:coverage\" \"npm run test:spelling\" \"npm run test:format\" \"npm run test:docs\" \"npm run build:pages\"",
-        "test:coverage": "npm run test coverage",
+        "test:all": "npm run compile && concurrently -c auto -m 90% --kill-others-on-fail --colors --names tests,spelling,format,docs,build \"npm run test\" \"npm run test:spelling\" \"npm run test:format\" \"npm run test:docs\" \"npm run build:pages\"",
         "test:deps": "virmator deps check",
         "test:docs": "mono-vir for-each-async npm run --if-present test:docs",
         "test:format": "virmator format check",

diff --git a/packages/element-book/package.json b/packages/element-book/package.json
@@ -36,7 +36,6 @@
         "docs": "virmator docs",
         "start": "cd ../element-book-example && npm start",
         "test": "virmator test-web",
-        "test:coverage": "npm run test coverage",
         "test:docs": "virmator docs check",
         "test:types": "npm run compile",
         "test:watch": "web-test-runner --color --watch --config configs/web-test-runner.config.mjs"

diff --git a/packages/element-vir/package.json b/packages/element-vir/package.json
@@ -33,7 +33,6 @@
         "docs": "virmator docs",
         "start": "cd ../element-vir-example && npm start",
         "test": "virmator test-web",
-        "test:coverage": "npm run test coverage",
         "test:docs": "virmator docs check",
         "test:types": "tsc --pretty --noEmit"
     },

diff --git a/packages/vira-book/src/element-book/entries/dropdown/vira-dropdown-item.element.book.ts b/packages/vira-book/src/element-book/entries/dropdown/vira-dropdown-item.element.book.ts
@@ -1,11 +1,11 @@
 import {BookPageControlTypeEnum, defineBookPage, definePageControl} from 'element-book';
-import {CSSResult, HTMLTemplateResult, html} from 'element-vir';
+import {CSSResult, HTMLTemplateResult, css, html} from 'element-vir';
 import {ViraDropdownItem} from 'vira';
 import {dropdownPage} from './vira-dropdown.book';
 
 const examples: ReadonlyArray<{
     title: string;
-    inputs?: typeof ViraDropdownItem.inputsType;
+    inputs: typeof ViraDropdownItem.inputsType;
     customStyle?: CSSResult;
     customTemplate?: HTMLTemplateResult;
 }> = [
@@ -33,6 +33,30 @@ const examples: ReadonlyArray<{
             <b>This is custom</b>
         `,
     },
+    {
+        title: 'constrained width',
+        customStyle: css`
+            :host {
+                max-width: 100px;
+            }
+        `,
+        inputs: {
+            label: 'has more text than is possible to fit',
+            selected: true,
+        },
+    },
+    {
+        title: 'stretched width',
+        customStyle: css`
+            ${ViraDropdownItem} {
+                width: 400px;
+            }
+        `,
+        inputs: {
+            label: 'wide',
+            selected: true,
+        },
+    },
 ];
 
 export const ViraDropdownItemPage = defineBookPage({
@@ -60,12 +84,13 @@ export const ViraDropdownItemPage = defineBookPage({
                 stateInitStatic: {
                     selected: example.inputs?.selected || [],
                 },
+                styles: example.customStyle,
                 renderCallback({controls}) {
                     const finalInputs: typeof ViraDropdownItem.inputsType = {
-                        label: controls.Label || example.inputs?.label || '',
+                        label: controls.Label || example.inputs.label,
                         selected: controls.Selected
                             ? controls.Selected === 'all'
-                            : !!example.inputs?.selected,
+                            : example.inputs.selected,
                     };
 
                     if (example.customTemplate) {

diff --git a/packages/vira-book/src/element-book/entries/dropdown/vira-dropdown.element.book.ts b/packages/vira-book/src/element-book/entries/dropdown/vira-dropdown.element.book.ts
@@ -1,7 +1,7 @@
 import {isTruthy} from '@augment-vir/common';
 import {BookPageControlTypeEnum, defineBookPage, definePageControl} from 'element-book';
-import {CSSResult, html, listen} from 'element-vir';
-import {ViraDropdown, ViraDropdownOption, allIconsByName} from 'vira';
+import {CSSResult, css, html, listen} from 'element-vir';
+import {Element24Icon, ViraDropdown, ViraDropdownOption, allIconsByName} from 'vira';
 import {dropdownPage} from './vira-dropdown.book';
 
 const exampleDropdownOptions: ReadonlyArray<Readonly<ViraDropdownOption>> = [
@@ -68,7 +68,7 @@ const examples: ReadonlyArray<{
     {
         title: 'with custom template',
         inputs: {
-            selected: [8],
+            selected: [],
             options: [
                 ...exampleDropdownOptions,
                 {
@@ -88,7 +88,7 @@ const examples: ReadonlyArray<{
     {
         title: 'with disabled item',
         inputs: {
-            selected: [8],
+            selected: [],
             options: [
                 ...exampleDropdownOptions,
                 {
@@ -99,13 +99,41 @@ const examples: ReadonlyArray<{
             ],
         },
     },
-    // {
-    //     title: 'forced open',
-    //     inputs: {
-    //         z_debug_forceOpenState: true,
-    //         selected: [1],
-    //     },
-    // },
+    {
+        title: 'constrained width',
+        customStyle: css`
+            :host {
+                max-width: 150px;
+            }
+        `,
+    },
+    {
+        title: 'stretched width',
+        customStyle: css`
+            ${ViraDropdown} {
+                width: 400px;
+            }
+        `,
+    },
+    {
+        title: 'without a placeholder',
+        inputs: {
+            placeholder: undefined,
+        },
+    },
+    {
+        title: 'with a prefix',
+        inputs: {
+            selectionPrefix: 'Pre:',
+            selected: [1],
+        },
+    },
+    {
+        title: 'with an icon',
+        inputs: {
+            icon: Element24Icon,
+        },
+    },
 ];
 
 export const viraDropdownPage = defineBookPage({
@@ -159,6 +187,10 @@ export const viraDropdownPage = defineBookPage({
             ],
             initValue: '',
         }),
+        Placeholder: definePageControl({
+            controlType: BookPageControlTypeEnum.Text,
+            initValue: 'Select something',
+        }),
     },
     elementExamplesCallback({defineExample}) {
         examples.forEach((example) => {
@@ -167,8 +199,13 @@ export const viraDropdownPage = defineBookPage({
                 stateInitStatic: {
                     selected: example.inputs?.selected || [],
                 },
+                styles: example.customStyle,
                 renderCallback({state, updateState, controls}) {
                     const finalInputs: typeof ViraDropdown.inputsType = {
+                        placeholder:
+                            example.inputs && 'placeholder' in example.inputs
+                                ? example.inputs.placeholder
+                                : controls.Placeholder,
                         options: example.inputs?.options || exampleDropdownOptions,
                         selected: controls.Selected
                             ? [
@@ -177,7 +214,7 @@ export const viraDropdownPage = defineBookPage({
                                   )?.id,
                               ].filter(isTruthy)
                             : state.selected,
-                        buttonPrefix: controls.Prefix || example.inputs?.buttonPrefix,
+                        selectionPrefix: controls.Prefix || example.inputs?.selectionPrefix,
                         isDisabled: controls.Disabled
                             ? controls.Disabled === 'all'
                             : example.inputs?.isDisabled,

diff --git a/packages/vira/configs/web-test-runner.config.mjs b/packages/vira/configs/web-test-runner.config.mjs
@@ -12,6 +12,7 @@ const baseConfig = getWebTestRunnerConfigWithCoveragePercent({
 const webTestRunnerConfig = {
     ...baseConfig,
     port: 8103,
+    concurrency: 1,
 };
 
 export default webTestRunnerConfig;