Skip to content

Commit

Permalink
address feedback
Browse files Browse the repository at this point in the history
add more element book cases
close other dropdowns when another dropdown is opened
add placeholder
test vira-dropdown
minor tweaks and fixes
  • Loading branch information
electrovir committed May 6, 2024
1 parent d0f2273 commit 2fd2931
Show file tree
Hide file tree
Showing 9 changed files with 456 additions and 83 deletions.
3 changes: 1 addition & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 0 additions & 1 deletion packages/element-book/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
1 change: 0 additions & 1 deletion packages/element-vir/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}> = [
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
@@ -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>> = [
Expand Down Expand Up @@ -68,7 +68,7 @@ const examples: ReadonlyArray<{
{
title: 'with custom template',
inputs: {
selected: [8],
selected: [],
options: [
...exampleDropdownOptions,
{
Expand All @@ -88,7 +88,7 @@ const examples: ReadonlyArray<{
{
title: 'with disabled item',
inputs: {
selected: [8],
selected: [],
options: [
...exampleDropdownOptions,
{
Expand All @@ -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({
Expand Down Expand Up @@ -159,6 +187,10 @@ export const viraDropdownPage = defineBookPage({
],
initValue: '',
}),
Placeholder: definePageControl({
controlType: BookPageControlTypeEnum.Text,
initValue: 'Select something',
}),
},
elementExamplesCallback({defineExample}) {
examples.forEach((example) => {
Expand All @@ -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
? [
Expand All @@ -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,
Expand Down
1 change: 1 addition & 0 deletions packages/vira/configs/web-test-runner.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const baseConfig = getWebTestRunnerConfigWithCoveragePercent({
const webTestRunnerConfig = {
...baseConfig,
port: 8103,
concurrency: 1,
};

export default webTestRunnerConfig;
Expand Down

0 comments on commit 2fd2931

Please sign in to comment.