From bd67a28bb40f03255a55ca358931a2078b397060 Mon Sep 17 00:00:00 2001 From: Microsoft FAST Builds Date: Sun, 21 Nov 2021 07:10:36 +0000 Subject: [PATCH 1/5] applying package updates --- ...ents-90c5b08c-5716-4699-b157-5c772a4495fc.json | 7 ------- examples/design-system-tutorial/CHANGELOG.json | 15 +++++++++++++++ examples/design-system-tutorial/CHANGELOG.md | 10 +++++++++- examples/design-system-tutorial/package.json | 2 +- .../tooling/fast-figma-plugin-msft/CHANGELOG.json | 15 +++++++++++++++ .../tooling/fast-figma-plugin-msft/CHANGELOG.md | 10 +++++++++- .../tooling/fast-figma-plugin-msft/package.json | 2 +- .../web-components/fast-components/CHANGELOG.json | 15 +++++++++++++++ .../web-components/fast-components/CHANGELOG.md | 10 +++++++++- .../web-components/fast-components/package.json | 2 +- sites/fast-color-explorer/CHANGELOG.json | 15 +++++++++++++++ sites/fast-color-explorer/CHANGELOG.md | 10 +++++++++- sites/fast-color-explorer/package.json | 2 +- sites/fast-component-explorer/CHANGELOG.json | 15 +++++++++++++++ sites/fast-component-explorer/CHANGELOG.md | 10 +++++++++- sites/fast-website/CHANGELOG.json | 15 +++++++++++++++ sites/fast-website/CHANGELOG.md | 10 +++++++++- sites/fast-website/package.json | 2 +- sites/site-utilities/CHANGELOG.json | 15 +++++++++++++++ sites/site-utilities/CHANGELOG.md | 10 +++++++++- sites/site-utilities/package.json | 2 +- 21 files changed, 174 insertions(+), 20 deletions(-) delete mode 100644 change/@microsoft-fast-components-90c5b08c-5716-4699-b157-5c772a4495fc.json diff --git a/change/@microsoft-fast-components-90c5b08c-5716-4699-b157-5c772a4495fc.json b/change/@microsoft-fast-components-90c5b08c-5716-4699-b157-5c772a4495fc.json deleted file mode 100644 index 8150d70729e..00000000000 --- a/change/@microsoft-fast-components-90c5b08c-5716-4699-b157-5c772a4495fc.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "fix: proper css targeting for flipper", - "packageName": "@microsoft/fast-components", - "email": "jes@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/examples/design-system-tutorial/CHANGELOG.json b/examples/design-system-tutorial/CHANGELOG.json index 865e488baf9..e3f6cccfbac 100644 --- a/examples/design-system-tutorial/CHANGELOG.json +++ b/examples/design-system-tutorial/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "fast-design-system-demo", "entries": [ + { + "date": "Sun, 21 Nov 2021 07:10:36 GMT", + "tag": "fast-design-system-demo_v1.0.0", + "version": "1.0.0", + "comments": { + "patch": [ + { + "comment": "Bump @microsoft/fast-components to v2.16.4", + "author": "jes@microsoft.com", + "commit": "15b8789f5aff1852bfcd037cf5661c13ee8affea", + "package": "fast-design-system-demo" + } + ] + } + }, { "date": "Sun, 14 Nov 2021 07:11:13 GMT", "tag": "fast-design-system-demo_v1.0.0", diff --git a/examples/design-system-tutorial/CHANGELOG.md b/examples/design-system-tutorial/CHANGELOG.md index d0833cc77be..c472004a1f4 100644 --- a/examples/design-system-tutorial/CHANGELOG.md +++ b/examples/design-system-tutorial/CHANGELOG.md @@ -1,11 +1,19 @@ # Change Log - fast-design-system-demo -This log was last generated on Sun, 14 Nov 2021 07:11:13 GMT and should not be manually modified. +This log was last generated on Sun, 21 Nov 2021 07:10:36 GMT and should not be manually modified. ## 1.0.0 +Sun, 21 Nov 2021 07:10:36 GMT + +### Patches + +- Bump @microsoft/fast-components to v2.16.4 (jes@microsoft.com) + +## 1.0.0 + Sun, 14 Nov 2021 07:11:13 GMT ### Patches diff --git a/examples/design-system-tutorial/package.json b/examples/design-system-tutorial/package.json index 1bbd3e7c500..61081c6ba87 100644 --- a/examples/design-system-tutorial/package.json +++ b/examples/design-system-tutorial/package.json @@ -14,7 +14,7 @@ "@microsoft/fast-colors": "^5.1.4", "@microsoft/fast-element": "^1.6.2", "@microsoft/fast-foundation": "^2.26.2", - "@microsoft/fast-components": "^2.16.3", + "@microsoft/fast-components": "^2.16.4", "tslib": "^1.11.1" }, "devDependencies": { diff --git a/packages/tooling/fast-figma-plugin-msft/CHANGELOG.json b/packages/tooling/fast-figma-plugin-msft/CHANGELOG.json index d524292cfac..bad8f56f079 100644 --- a/packages/tooling/fast-figma-plugin-msft/CHANGELOG.json +++ b/packages/tooling/fast-figma-plugin-msft/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@microsoft/fast-figma-plugin-msft", "entries": [ + { + "date": "Sun, 21 Nov 2021 07:10:36 GMT", + "tag": "@microsoft/fast-figma-plugin-msft_v0.8.16", + "version": "0.8.16", + "comments": { + "patch": [ + { + "comment": "Bump @microsoft/fast-components to v2.16.4", + "author": "jes@microsoft.com", + "commit": "15b8789f5aff1852bfcd037cf5661c13ee8affea", + "package": "@microsoft/fast-figma-plugin-msft" + } + ] + } + }, { "date": "Sun, 14 Nov 2021 07:11:13 GMT", "tag": "@microsoft/fast-figma-plugin-msft_v0.8.16", diff --git a/packages/tooling/fast-figma-plugin-msft/CHANGELOG.md b/packages/tooling/fast-figma-plugin-msft/CHANGELOG.md index 666e3200f7f..bce3abc23f1 100644 --- a/packages/tooling/fast-figma-plugin-msft/CHANGELOG.md +++ b/packages/tooling/fast-figma-plugin-msft/CHANGELOG.md @@ -1,11 +1,19 @@ # Change Log - @microsoft/fast-figma-plugin-msft -This log was last generated on Sun, 14 Nov 2021 07:11:13 GMT and should not be manually modified. +This log was last generated on Sun, 21 Nov 2021 07:10:36 GMT and should not be manually modified. ## 0.8.16 +Sun, 21 Nov 2021 07:10:36 GMT + +### Patches + +- Bump @microsoft/fast-components to v2.16.4 (jes@microsoft.com) + +## 0.8.16 + Sun, 14 Nov 2021 07:11:13 GMT ### Patches diff --git a/packages/tooling/fast-figma-plugin-msft/package.json b/packages/tooling/fast-figma-plugin-msft/package.json index 2956c459b5b..3818e32a576 100644 --- a/packages/tooling/fast-figma-plugin-msft/package.json +++ b/packages/tooling/fast-figma-plugin-msft/package.json @@ -29,7 +29,7 @@ "@babel/core": "^7.12.13", "@babel/preset-env": "^7.12.13", "@microsoft/fast-colors": "^5.1.4", - "@microsoft/fast-components": "^2.16.3", + "@microsoft/fast-components": "^2.16.4", "@microsoft/fast-components-react-msft": "^4.32.0", "@microsoft/fast-components-styles-msft": "^4.29.0", "@microsoft/fast-element": "^1.6.2", diff --git a/packages/web-components/fast-components/CHANGELOG.json b/packages/web-components/fast-components/CHANGELOG.json index 2806614007a..984a4027b63 100644 --- a/packages/web-components/fast-components/CHANGELOG.json +++ b/packages/web-components/fast-components/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@microsoft/fast-components", "entries": [ + { + "date": "Sun, 21 Nov 2021 07:10:36 GMT", + "tag": "@microsoft/fast-components_v2.16.4", + "version": "2.16.4", + "comments": { + "patch": [ + { + "comment": "fix: proper css targeting for flipper", + "author": "jes@microsoft.com", + "commit": "15b8789f5aff1852bfcd037cf5661c13ee8affea", + "package": "@microsoft/fast-components" + } + ] + } + }, { "date": "Sun, 14 Nov 2021 07:11:13 GMT", "tag": "@microsoft/fast-components_v2.16.3", diff --git a/packages/web-components/fast-components/CHANGELOG.md b/packages/web-components/fast-components/CHANGELOG.md index 38284920dce..67789292a69 100644 --- a/packages/web-components/fast-components/CHANGELOG.md +++ b/packages/web-components/fast-components/CHANGELOG.md @@ -1,9 +1,17 @@ # Change Log - @microsoft/fast-components -This log was last generated on Sun, 14 Nov 2021 07:11:13 GMT and should not be manually modified. +This log was last generated on Sun, 21 Nov 2021 07:10:36 GMT and should not be manually modified. +## 2.16.4 + +Sun, 21 Nov 2021 07:10:36 GMT + +### Patches + +- fix: proper css targeting for flipper (jes@microsoft.com) + ## 2.16.3 Sun, 14 Nov 2021 07:11:13 GMT diff --git a/packages/web-components/fast-components/package.json b/packages/web-components/fast-components/package.json index ca453d9f03b..3201d63dcdc 100644 --- a/packages/web-components/fast-components/package.json +++ b/packages/web-components/fast-components/package.json @@ -2,7 +2,7 @@ "name": "@microsoft/fast-components", "description": "A library of Web Components", "sideEffects": false, - "version": "2.16.3", + "version": "2.16.4", "author": { "name": "Microsoft", "url": "https://discord.gg/FcSNfg4" diff --git a/sites/fast-color-explorer/CHANGELOG.json b/sites/fast-color-explorer/CHANGELOG.json index 7b46981ec61..35f430ac858 100644 --- a/sites/fast-color-explorer/CHANGELOG.json +++ b/sites/fast-color-explorer/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@microsoft/fast-color-explorer", "entries": [ + { + "date": "Sun, 21 Nov 2021 07:10:36 GMT", + "tag": "@microsoft/fast-color-explorer_v1.6.19", + "version": "1.6.19", + "comments": { + "patch": [ + { + "comment": "Bump @microsoft/fast-components to v2.16.4", + "author": "jes@microsoft.com", + "commit": "15b8789f5aff1852bfcd037cf5661c13ee8affea", + "package": "@microsoft/fast-color-explorer" + } + ] + } + }, { "date": "Sun, 14 Nov 2021 07:11:13 GMT", "tag": "@microsoft/fast-color-explorer_v1.6.19", diff --git a/sites/fast-color-explorer/CHANGELOG.md b/sites/fast-color-explorer/CHANGELOG.md index 941a90b3034..dc1e709181b 100644 --- a/sites/fast-color-explorer/CHANGELOG.md +++ b/sites/fast-color-explorer/CHANGELOG.md @@ -1,11 +1,19 @@ # Change Log - @microsoft/fast-color-explorer -This log was last generated on Sun, 14 Nov 2021 07:11:13 GMT and should not be manually modified. +This log was last generated on Sun, 21 Nov 2021 07:10:36 GMT and should not be manually modified. ## 1.6.19 +Sun, 21 Nov 2021 07:10:36 GMT + +### Patches + +- Bump @microsoft/fast-components to v2.16.4 (jes@microsoft.com) + +## 1.6.19 + Sun, 14 Nov 2021 07:11:13 GMT ### Patches diff --git a/sites/fast-color-explorer/package.json b/sites/fast-color-explorer/package.json index 41492d2d7bb..ea47e4b8e43 100644 --- a/sites/fast-color-explorer/package.json +++ b/sites/fast-color-explorer/package.json @@ -71,7 +71,7 @@ }, "dependencies": { "@microsoft/fast-colors": "^5.1.4", - "@microsoft/fast-components": "^2.16.3", + "@microsoft/fast-components": "^2.16.4", "@microsoft/fast-components-react-base": "^4.27.0", "@microsoft/fast-components-react-msft": "^4.32.0", "@microsoft/fast-components-styles-msft": "^4.29.0", diff --git a/sites/fast-component-explorer/CHANGELOG.json b/sites/fast-component-explorer/CHANGELOG.json index 2108b138f8c..bc60295f7cd 100644 --- a/sites/fast-component-explorer/CHANGELOG.json +++ b/sites/fast-component-explorer/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@microsoft/fast-component-explorer", "entries": [ + { + "date": "Sun, 21 Nov 2021 07:10:36 GMT", + "tag": "@microsoft/fast-component-explorer_v0.17.2", + "version": "0.17.2", + "comments": { + "patch": [ + { + "comment": "Bump @microsoft/site-utilities to v0.9.0", + "author": "jes@microsoft.com", + "commit": "15b8789f5aff1852bfcd037cf5661c13ee8affea", + "package": "@microsoft/fast-component-explorer" + } + ] + } + }, { "date": "Sun, 14 Nov 2021 07:11:13 GMT", "tag": "@microsoft/fast-component-explorer_v0.17.2", diff --git a/sites/fast-component-explorer/CHANGELOG.md b/sites/fast-component-explorer/CHANGELOG.md index 1ba67c2e7d6..25595c5582a 100644 --- a/sites/fast-component-explorer/CHANGELOG.md +++ b/sites/fast-component-explorer/CHANGELOG.md @@ -1,11 +1,19 @@ # Change Log - @microsoft/fast-component-explorer -This log was last generated on Sun, 14 Nov 2021 07:11:13 GMT and should not be manually modified. +This log was last generated on Sun, 21 Nov 2021 07:10:36 GMT and should not be manually modified. ## 0.17.2 +Sun, 21 Nov 2021 07:10:36 GMT + +### Patches + +- Bump @microsoft/site-utilities to v0.9.0 (jes@microsoft.com) + +## 0.17.2 + Sun, 14 Nov 2021 07:11:13 GMT ### Patches diff --git a/sites/fast-website/CHANGELOG.json b/sites/fast-website/CHANGELOG.json index 6a98ece16fa..2c1acd444b6 100644 --- a/sites/fast-website/CHANGELOG.json +++ b/sites/fast-website/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@microsoft/fast-website", "entries": [ + { + "date": "Sun, 21 Nov 2021 07:10:36 GMT", + "tag": "@microsoft/fast-website_v1.3.16", + "version": "1.3.16", + "comments": { + "patch": [ + { + "comment": "Bump @microsoft/site-utilities to v0.9.0", + "author": "jes@microsoft.com", + "commit": "15b8789f5aff1852bfcd037cf5661c13ee8affea", + "package": "@microsoft/fast-website" + } + ] + } + }, { "date": "Sun, 14 Nov 2021 07:11:13 GMT", "tag": "@microsoft/fast-website_v1.3.16", diff --git a/sites/fast-website/CHANGELOG.md b/sites/fast-website/CHANGELOG.md index f8f43455cf0..39658cf38cc 100644 --- a/sites/fast-website/CHANGELOG.md +++ b/sites/fast-website/CHANGELOG.md @@ -1,11 +1,19 @@ # Change Log - @microsoft/fast-website -This log was last generated on Sun, 14 Nov 2021 07:11:13 GMT and should not be manually modified. +This log was last generated on Sun, 21 Nov 2021 07:10:36 GMT and should not be manually modified. ## 1.3.16 +Sun, 21 Nov 2021 07:10:36 GMT + +### Patches + +- Bump @microsoft/site-utilities to v0.9.0 (jes@microsoft.com) + +## 1.3.16 + Sun, 14 Nov 2021 07:11:13 GMT ### Patches diff --git a/sites/fast-website/package.json b/sites/fast-website/package.json index fa54af51961..dabffa3da2b 100644 --- a/sites/fast-website/package.json +++ b/sites/fast-website/package.json @@ -10,7 +10,7 @@ "@babel/core": "^7.12.13", "@babel/preset-env": "^7.12.13", "@fluentui/svg-icons": "^1.1.139", - "@microsoft/fast-components": "^2.16.3", + "@microsoft/fast-components": "^2.16.4", "@microsoft/fast-element": "^1.6.2", "@microsoft/fast-foundation": "^2.26.2", "@microsoft/fast-web-utilities": "^5.0.2", diff --git a/sites/site-utilities/CHANGELOG.json b/sites/site-utilities/CHANGELOG.json index ab425aaf186..375a32ffe04 100644 --- a/sites/site-utilities/CHANGELOG.json +++ b/sites/site-utilities/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@microsoft/site-utilities", "entries": [ + { + "date": "Sun, 21 Nov 2021 07:10:36 GMT", + "tag": "@microsoft/site-utilities_v0.9.0", + "version": "0.9.0", + "comments": { + "patch": [ + { + "comment": "Bump @microsoft/fast-components to v2.16.4", + "author": "jes@microsoft.com", + "commit": "15b8789f5aff1852bfcd037cf5661c13ee8affea", + "package": "@microsoft/site-utilities" + } + ] + } + }, { "date": "Sun, 14 Nov 2021 07:11:13 GMT", "tag": "@microsoft/site-utilities_v0.9.0", diff --git a/sites/site-utilities/CHANGELOG.md b/sites/site-utilities/CHANGELOG.md index 1377ca2bbb5..530290d1849 100644 --- a/sites/site-utilities/CHANGELOG.md +++ b/sites/site-utilities/CHANGELOG.md @@ -1,11 +1,19 @@ # Change Log - @microsoft/site-utilities -This log was last generated on Sun, 14 Nov 2021 07:11:13 GMT and should not be manually modified. +This log was last generated on Sun, 21 Nov 2021 07:10:36 GMT and should not be manually modified. ## 0.9.0 +Sun, 21 Nov 2021 07:10:36 GMT + +### Patches + +- Bump @microsoft/fast-components to v2.16.4 (jes@microsoft.com) + +## 0.9.0 + Sun, 14 Nov 2021 07:11:13 GMT ### Patches diff --git a/sites/site-utilities/package.json b/sites/site-utilities/package.json index 2332988d569..c1ee503f8a9 100644 --- a/sites/site-utilities/package.json +++ b/sites/site-utilities/package.json @@ -59,7 +59,7 @@ }, "dependencies": { "@fluentui/web-components": "^1.2.3", - "@microsoft/fast-components": "^2.16.3", + "@microsoft/fast-components": "^2.16.4", "@microsoft/fast-foundation": "^2.26.2", "@microsoft/fast-tooling": "^0.29.0", "@microsoft/fast-tooling-react": "^2.11.4", From 208eb38c6bd4099ddd340e250da677766951cd17 Mon Sep 17 00:00:00 2001 From: Jeff Smith <37851214+eljefe223@users.noreply.github.com> Date: Mon, 22 Nov 2021 15:00:33 -0800 Subject: [PATCH 2/5] fix: disabled flipper button clicks (#5399) * fix: disabled flipper button clicks --- ...st-components-ce85fe24-cfca-4d69-a8e5-5a4ba3305d77.json | 7 +++++++ .../fast-components/src/flipper/flipper.styles.ts | 1 + 2 files changed, 8 insertions(+) create mode 100644 change/@microsoft-fast-components-ce85fe24-cfca-4d69-a8e5-5a4ba3305d77.json diff --git a/change/@microsoft-fast-components-ce85fe24-cfca-4d69-a8e5-5a4ba3305d77.json b/change/@microsoft-fast-components-ce85fe24-cfca-4d69-a8e5-5a4ba3305d77.json new file mode 100644 index 00000000000..840f030b8c6 --- /dev/null +++ b/change/@microsoft-fast-components-ce85fe24-cfca-4d69-a8e5-5a4ba3305d77.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: disabled flipper button clicks", + "packageName": "@microsoft/fast-components", + "email": "jes@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/fast-components/src/flipper/flipper.styles.ts b/packages/web-components/fast-components/src/flipper/flipper.styles.ts index bcde8bf0a99..47960e803c7 100644 --- a/packages/web-components/fast-components/src/flipper/flipper.styles.ts +++ b/packages/web-components/fast-components/src/flipper/flipper.styles.ts @@ -77,6 +77,7 @@ export const flipperStyles: ( cursor: ${disabledCursor}; fill: currentcolor; color: ${neutralForegroundRest}; + pointer-events: none; } :host([disabled])::before, From caa956557ea1d8b7722665d228898df629d46cc2 Mon Sep 17 00:00:00 2001 From: John Kreitlow <863023+radium-v@users.noreply.github.com> Date: Mon, 22 Nov 2021 17:29:10 -0800 Subject: [PATCH 3/5] add size attribute to listbox element (#5392) * replace key values with consts in listbox * sort listbox class properties for better readability * make listbox abstract * add deprecated typeaheadExpired property fallback * update api-report.md * update tsdoc blocks for listbox * add size tests and fixtures for listbox * fix option styles for size attribute * update spec * Change files * move internal listbox stylesheet to components * update size description in listbox schema and definition --- ...-c28c7e15-c56e-4df4-9f09-52ec7fd78598.json | 7 + ...-79341a10-befe-431e-9b01-739b7c6a9839.json | 7 + .../fast-components/__test__/harness.js | 7 +- .../fast-components/docs/api-report.md | 51 +- .../fast-components/src/custom-elements.ts | 1 + .../listbox-option/listbox-option.styles.ts | 26 +- .../src/listbox/fixtures/base.html | 103 ++-- .../fast-components/src/listbox/index.ts | 58 +- .../src/listbox/listbox.pw.spec.ts | 101 ++++ .../src/listbox/listbox.stories.ts | 2 - .../src/listbox/listbox.styles.ts | 24 +- .../listbox/listbox.vscode.definition.json | 7 + .../src/select/select.pw.spec.ts | 2 +- .../fast-foundation/docs/api-report.md | 51 +- .../fast-foundation/src/listbox/index.ts | 1 + .../src/listbox/listbox.element.ts | 51 ++ .../src/listbox/listbox.spec.md | 1 + .../src/listbox/listbox.spec.ts | 80 ++- .../src/listbox/listbox.template.ts | 16 +- .../fast-foundation/src/listbox/listbox.ts | 530 ++++++++++-------- .../fast-foundation/src/select/select.ts | 2 +- .../components/fast-listbox.schema.json | 6 + 22 files changed, 763 insertions(+), 371 deletions(-) create mode 100644 change/@microsoft-fast-components-c28c7e15-c56e-4df4-9f09-52ec7fd78598.json create mode 100644 change/@microsoft-fast-foundation-79341a10-befe-431e-9b01-739b7c6a9839.json create mode 100644 packages/web-components/fast-components/src/listbox/listbox.pw.spec.ts create mode 100644 packages/web-components/fast-foundation/src/listbox/listbox.element.ts diff --git a/change/@microsoft-fast-components-c28c7e15-c56e-4df4-9f09-52ec7fd78598.json b/change/@microsoft-fast-components-c28c7e15-c56e-4df4-9f09-52ec7fd78598.json new file mode 100644 index 00000000000..273aba56e36 --- /dev/null +++ b/change/@microsoft-fast-components-c28c7e15-c56e-4df4-9f09-52ec7fd78598.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "add `size` attribute to listbox element", + "packageName": "@microsoft/fast-components", + "email": "john.kreitlow@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@microsoft-fast-foundation-79341a10-befe-431e-9b01-739b7c6a9839.json b/change/@microsoft-fast-foundation-79341a10-befe-431e-9b01-739b7c6a9839.json new file mode 100644 index 00000000000..b7f5fd0a25e --- /dev/null +++ b/change/@microsoft-fast-foundation-79341a10-befe-431e-9b01-739b7c6a9839.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "add `size` attribute to listbox element", + "packageName": "@microsoft/fast-foundation", + "email": "john.kreitlow@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/fast-components/__test__/harness.js b/packages/web-components/fast-components/__test__/harness.js index 4ad4e0c2904..982f43d0515 100644 --- a/packages/web-components/fast-components/__test__/harness.js +++ b/packages/web-components/fast-components/__test__/harness.js @@ -13,7 +13,12 @@ export const mochaHooks = { }, async beforeEach() { - this.page = await this.browser.newPage(); + this.page = await this.browser.newPage({ + viewport: { + width: 1920, + height: 1080, + }, + }); const fixtureUrl = FixtureURL || `http://localhost:${expressPort}/${fixture}`; await this.page.goto(fixtureUrl); }, diff --git a/packages/web-components/fast-components/docs/api-report.md b/packages/web-components/fast-components/docs/api-report.md index 070b578bff5..8d49b7567de 100644 --- a/packages/web-components/fast-components/docs/api-report.md +++ b/packages/web-components/fast-components/docs/api-report.md @@ -43,9 +43,10 @@ import { Flipper } from '@microsoft/fast-foundation'; import { FlipperOptions } from '@microsoft/fast-foundation'; import { FoundationElement } from '@microsoft/fast-foundation'; import { FoundationElementDefinition } from '@microsoft/fast-foundation'; +import { FoundationElementTemplate } from '@microsoft/fast-foundation'; import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundation'; import { HorizontalScrollOptions } from '@microsoft/fast-foundation'; -import { Listbox } from '@microsoft/fast-foundation'; +import { ListboxElement } from '@microsoft/fast-foundation'; import { ListboxOption } from '@microsoft/fast-foundation'; import { ListboxOptionOptions } from '@microsoft/fast-foundation'; import { Menu } from '@microsoft/fast-foundation'; @@ -190,7 +191,15 @@ export const allComponents: { fastDivider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; fastFlipper: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; fastHorizontalScroll: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; - fastListbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; + fastListbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; + }> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition) => import("@microsoft/fast-element").ElementStyles; + }, typeof Listbox>; fastOption: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; fastMenu: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; fastMenuItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; @@ -561,7 +570,15 @@ export const fastFlipper: (overrideDefinition?: import("@microsoft/fast-foundati export const fastHorizontalScroll: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry>; // @public -export const fastListbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; +export const fastListbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{ + baseName: string; + template: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition) => ElementStyles; +}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{ + baseName: string; + template: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition) => import("@microsoft/fast-element").ViewTemplate; + styles: (context: import("@microsoft/fast-foundation").ElementDefinitionContext, definition: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition) => ElementStyles; +}, typeof Listbox>; // @public export const fastMenu: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry; @@ -741,12 +758,16 @@ export interface InteractiveSwatchSet { // @public export function isDark(color: Swatch): boolean; -export { Listbox } +// @public +export class Listbox extends ListboxElement { + // @internal + protected sizeChanged(prev: number | unknown, next: number): void; + } export { ListboxOption } // @public -export const listboxStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles; +export const listboxStyles: FoundationElementTemplate; export { Menu } @@ -979,7 +1000,7 @@ export type NumberFieldAppearance = "filled" | "outline"; export const numberFieldStyles: (context: ElementDefinitionContext, definition: NumberFieldOptions) => ElementStyles; // @public -export const optionStyles: (context: ElementDefinitionContext, definition: ListboxOptionOptions) => ElementStyles; +export const optionStyles: FoundationElementTemplate; // @public export interface Palette { @@ -1260,15 +1281,15 @@ export const verticalSliderLabelStyles: ElementStyles; // // dist/dts/color/palette.d.ts:48:5 - (ae-forgotten-export) The symbol "create" needs to be exported by the entry point index.d.ts // dist/dts/color/palette.d.ts:49:5 - (ae-forgotten-export) The symbol "from" needs to be exported by the entry point index.d.ts -// dist/dts/custom-elements.d.ts:74:5 - (ae-incompatible-release-tags) The symbol "fastButton" is marked as @public, but its signature references "Button" which is marked as @internal -// dist/dts/custom-elements.d.ts:86:5 - (ae-incompatible-release-tags) The symbol "fastCard" is marked as @public, but its signature references "Card" which is marked as @internal -// dist/dts/custom-elements.d.ts:92:5 - (ae-incompatible-release-tags) The symbol "fastDesignSystemProvider" is marked as @public, but its signature references "DesignSystemProvider" which is marked as @internal -// dist/dts/custom-elements.d.ts:94:5 - (ae-incompatible-release-tags) The symbol "fastDisclosure" is marked as @public, but its signature references "Disclosure" which is marked as @internal -// dist/dts/custom-elements.d.ts:112:5 - (ae-incompatible-release-tags) The symbol "fastSearch" is marked as @public, but its signature references "Search" which is marked as @internal -// dist/dts/custom-elements.d.ts:116:5 - (ae-incompatible-release-tags) The symbol "fastSliderLabel" is marked as @public, but its signature references "SliderLabel" which is marked as @internal -// dist/dts/custom-elements.d.ts:121:5 - (ae-incompatible-release-tags) The symbol "fastTextArea" is marked as @public, but its signature references "TextArea" which is marked as @internal -// dist/dts/custom-elements.d.ts:122:5 - (ae-incompatible-release-tags) The symbol "fastTextField" is marked as @public, but its signature references "TextField" which is marked as @internal -// dist/dts/custom-elements.d.ts:124:5 - (ae-incompatible-release-tags) The symbol "fastToolbar" is marked as @public, but its signature references "Toolbar" which is marked as @internal +// dist/dts/custom-elements.d.ts:75:5 - (ae-incompatible-release-tags) The symbol "fastButton" is marked as @public, but its signature references "Button" which is marked as @internal +// dist/dts/custom-elements.d.ts:87:5 - (ae-incompatible-release-tags) The symbol "fastCard" is marked as @public, but its signature references "Card" which is marked as @internal +// dist/dts/custom-elements.d.ts:93:5 - (ae-incompatible-release-tags) The symbol "fastDesignSystemProvider" is marked as @public, but its signature references "DesignSystemProvider" which is marked as @internal +// dist/dts/custom-elements.d.ts:95:5 - (ae-incompatible-release-tags) The symbol "fastDisclosure" is marked as @public, but its signature references "Disclosure" which is marked as @internal +// dist/dts/custom-elements.d.ts:121:5 - (ae-incompatible-release-tags) The symbol "fastSearch" is marked as @public, but its signature references "Search" which is marked as @internal +// dist/dts/custom-elements.d.ts:125:5 - (ae-incompatible-release-tags) The symbol "fastSliderLabel" is marked as @public, but its signature references "SliderLabel" which is marked as @internal +// dist/dts/custom-elements.d.ts:130:5 - (ae-incompatible-release-tags) The symbol "fastTextArea" is marked as @public, but its signature references "TextArea" which is marked as @internal +// dist/dts/custom-elements.d.ts:131:5 - (ae-incompatible-release-tags) The symbol "fastTextField" is marked as @public, but its signature references "TextField" which is marked as @internal +// dist/dts/custom-elements.d.ts:133:5 - (ae-incompatible-release-tags) The symbol "fastToolbar" is marked as @public, but its signature references "Toolbar" which is marked as @internal // (No @packageDocumentation comment for this package) diff --git a/packages/web-components/fast-components/src/custom-elements.ts b/packages/web-components/fast-components/src/custom-elements.ts index f27f77179e4..98258752014 100644 --- a/packages/web-components/fast-components/src/custom-elements.ts +++ b/packages/web-components/fast-components/src/custom-elements.ts @@ -60,6 +60,7 @@ import type { Card } from "./card/index"; import type { DesignSystemProvider } from "./design-system-provider/index"; import type { Disclosure } from "./disclosure/index"; import type { HorizontalScroll } from "./horizontal-scroll/index"; +import type { Listbox } from "./listbox/index"; import type { Search } from "./search/index"; import type { SliderLabel } from "./slider-label/index"; import type { TextArea } from "./text-area/index"; diff --git a/packages/web-components/fast-components/src/listbox-option/listbox-option.styles.ts b/packages/web-components/fast-components/src/listbox-option/listbox-option.styles.ts index e49f98f5a2b..29f321673cb 100644 --- a/packages/web-components/fast-components/src/listbox-option/listbox-option.styles.ts +++ b/packages/web-components/fast-components/src/listbox-option/listbox-option.styles.ts @@ -1,10 +1,13 @@ -import { css, ElementStyles } from "@microsoft/fast-element"; +import { css } from "@microsoft/fast-element"; +import type { ElementStyles } from "@microsoft/fast-element"; import { disabledCursor, display, - ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, +} from "@microsoft/fast-foundation"; +import type { + FoundationElementTemplate, ListboxOptionOptions, } from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; @@ -35,13 +38,10 @@ import { heightNumber } from "../styles/size"; * Styles for Option * @public */ -export const optionStyles: ( - context: ElementDefinitionContext, - definition: ListboxOptionOptions -) => ElementStyles = ( - context: ElementDefinitionContext, - definition: ListboxOptionOptions -) => +export const optionStyles: FoundationElementTemplate< + ElementStyles, + ListboxOptionOptions +> = (context, definition) => css` ${display("inline-flex")} :host { align-items: center; @@ -51,6 +51,7 @@ export const optionStyles: ( box-sizing: border-box; color: ${neutralForegroundRest}; cursor: pointer; + flex: 0 0 auto; fill: currentcolor; font-size: ${typeRampBaseFontSize}; height: calc(${heightNumber} * 1px); @@ -85,11 +86,7 @@ export const optionStyles: ( color: ${foregroundOnAccentActive}; } - :host(:not([aria-selected="true"]):hover) { - background: ${neutralFillHover}; - color: ${neutralForegroundRest}; - } - + :host(:not([aria-selected="true"]):hover), :host(:not([aria-selected="true"]):active) { background: ${neutralFillHover}; color: ${neutralForegroundRest}; @@ -130,7 +127,6 @@ export const optionStyles: ( ::slotted([slot="start"]) { margin-inline-end: 1ch; } - `.withBehaviors( forcedColorsStylesheetBehavior( css` diff --git a/packages/web-components/fast-components/src/listbox/fixtures/base.html b/packages/web-components/fast-components/src/listbox/fixtures/base.html index 944ebeda49b..0a45d892c8c 100644 --- a/packages/web-components/fast-components/src/listbox/fixtures/base.html +++ b/packages/web-components/fast-components/src/listbox/fixtures/base.html @@ -17,6 +17,43 @@

Default

Jodie Whittaker +

Listboxes with size attribute

+ + option 1 + option 2 + option 3 + option 4 + option 5 + + + option 1 + option 2 + option 3 + option 4 + option 5 + + + option 1 + option 2 + option 3 + option 4 + option 5 + + + option 1 + option 2 + option 3 + option 4 + option 5 + + + option 1 + option 2 + option 3 + option 4 + option 5 + +

Listbox with a default selected item

John @@ -25,6 +62,13 @@

Listbox with a default selected item

Ringo + + John + Paul + George + Ringo + +

Listbox with disabled items

Extra Small @@ -33,7 +77,6 @@

Listbox with disabled items

Large Extra Large - Extra Small Small @@ -41,7 +84,6 @@

Listbox with disabled items

Large Extra Large - Extra Small Small @@ -49,7 +91,6 @@

Listbox with disabled items

Large Extra Large - Extra Small Small @@ -57,7 +98,6 @@

Listbox with disabled items

Large Extra Large - Extra Small Small @@ -65,7 +105,6 @@

Listbox with disabled items

Large Extra Large - Extra Small Small @@ -76,57 +115,3 @@

Listbox with disabled items

Empty Listbox

- -

Listbox with long list

- - Alabama - Alaska - Arizona - Arkansas - California - Colorado - Connecticut - Delaware - Florida - Georgia - Hawaii - Idaho - Illinois - Indiana - Iowa - Kansas - Kentucky - Louisiana - Maine - Maryland - Massachussets - Michigain - Minnesota - Mississippi - Missouri - Montana - Nebraska - Nevada - New Hampshire - New Jersey - New Mexico - New York - North Carolina - North Dakota - Ohio - Oklahoma - Oregon - Pennsylvania - Rhode Island - South Carolina - South Dakota - Texas - Tennessee - Utah - Vermont - Virginia - Washington - Wisconsin - West Virginia - Wyoming - diff --git a/packages/web-components/fast-components/src/listbox/index.ts b/packages/web-components/fast-components/src/listbox/index.ts index 2e1818cf06b..86b59e909a0 100644 --- a/packages/web-components/fast-components/src/listbox/index.ts +++ b/packages/web-components/fast-components/src/listbox/index.ts @@ -1,15 +1,59 @@ -import { Listbox, listboxTemplate as template } from "@microsoft/fast-foundation"; +import { css, ElementStyles } from "@microsoft/fast-element"; +import { + ListboxElement as FoundationListboxElement, + listboxTemplate as template, +} from "@microsoft/fast-foundation"; import { listboxStyles as styles } from "./listbox.styles"; /** - * A function that returns a {@link @microsoft/fast-foundation#Listbox} registration for configuring the component with a DesignSystem. - * Implements {@link @microsoft/fast-foundation#listboxTemplate} - * + * Base class for Listbox. * * @public + */ +export class Listbox extends FoundationListboxElement { + /** + * The internal stylesheet which holds the `--size` custom property. + * + * @internal + */ + private sizeStylesheet: ElementStyles | void; + + /** + * Updates the component dimensions when the size property is changed. + * + * @param prev - the previous size value + * @param next - the current size value + * + * @internal + */ + protected sizeChanged(prev: number | unknown, next: number): void { + super.sizeChanged(prev, next); + + if (this.sizeStylesheet) { + this.sizeStylesheet = this.$fastController.removeStyles(this.sizeStylesheet); + } + + if (this.size > 0) { + this.sizeStylesheet = css` + :host { + --size: ${"" + this.size}; + } + `; + + this.$fastController.addStyles(this.sizeStylesheet); + } + } +} + +/** + * A function that returns a {@link @microsoft/fast-foundation#ListboxElement} registration for configuring the component with a DesignSystem. + * Implements {@link @microsoft/fast-foundation#listboxTemplate} + * * @remarks * Generates HTML Element: `` * + * @public + * */ export const fastListbox = Listbox.compose({ baseName: "listbox", @@ -17,10 +61,4 @@ export const fastListbox = Listbox.compose({ styles, }); -/** - * Base class for Listbox - * @public - */ -export { Listbox }; - export { styles as listboxStyles }; diff --git a/packages/web-components/fast-components/src/listbox/listbox.pw.spec.ts b/packages/web-components/fast-components/src/listbox/listbox.pw.spec.ts new file mode 100644 index 00000000000..3bfaddbb0e2 --- /dev/null +++ b/packages/web-components/fast-components/src/listbox/listbox.pw.spec.ts @@ -0,0 +1,101 @@ +import type { + ListboxElement as FASTListboxType, + ListboxOption as FASTOption, +} from "@microsoft/fast-foundation"; +import { expect } from "chai"; +import type { ElementHandle } from "playwright"; + +type FASTListbox = HTMLElement & FASTListboxType; + +describe("FASTListbox", function () { + beforeEach(async function () { + if (!this.page && !this.browser) { + this.skip(); + } + + this.documentHandle = await this.page.evaluateHandle(() => document); + + this.setupHandle = await this.page.evaluateHandle( + (document) => { + const element = document.createElement("fast-listbox") as FASTListbox; + + for (let i = 1; i <= 3; i++) { + const option = document.createElement("fast-option") as FASTOption; + option.value = `${i}`; + option.textContent = `option ${i}`; + element.appendChild(option); + } + + document.body.appendChild(element) + }, + this.documentHandle + ); + }); + + afterEach(async function () { + if (this.setupHandle) { + await this.setupHandle.dispose(); + } + }); + + // FASTListbox should render on the page + it("should render on the page", async function () { + const element = await this.page.waitForSelector("fast-listbox"); + + expect(element).to.exist; + }); + + describe("should change the `selectedIndex` when focused and receives keyboard interaction", function () { + it("via arrow down key", async function () { + const element = (await this.page.waitForSelector( + "fast-listbox" + )) as ElementHandle; + + expect(await element.evaluate(node => node.selectedIndex)).to.equal(0); + + await element.press("ArrowDown"); + + expect(await element.evaluate(node => node.selectedIndex)).to.equal(1); + }); + + it("via arrow up key", async function () { + const element = (await this.page.waitForSelector( + "fast-listbox" + )) as ElementHandle; + + await element.evaluate(node => (node.selectedIndex = 1)); + + expect(await element.evaluate(node => node.selectedIndex)).to.equal(1); + + await element.press("ArrowUp"); + + expect(await element.evaluate(node => node.selectedIndex)).to.equal(0); + }); + + it("via home key", async function () { + const element = (await this.page.waitForSelector( + "fast-listbox" + )) as ElementHandle; + + await element.evaluate(node => (node.selectedIndex = 2)); + + expect(await element.evaluate(node => node.selectedIndex)).to.equal(2); + + await element.press("Home"); + + expect(await element.evaluate(node => node.selectedIndex)).to.equal(0); + }); + + it("via end key", async function () { + const element = (await this.page.waitForSelector( + "fast-listbox" + )) as ElementHandle; + + expect(await element.evaluate(node => node.selectedIndex)).to.equal(0); + + await element.press("End"); + + expect(await element.evaluate(node => node.selectedIndex)).to.equal(2); + }); + }); +}); diff --git a/packages/web-components/fast-components/src/listbox/listbox.stories.ts b/packages/web-components/fast-components/src/listbox/listbox.stories.ts index 3ca2aac02a0..ec068e44e5b 100644 --- a/packages/web-components/fast-components/src/listbox/listbox.stories.ts +++ b/packages/web-components/fast-components/src/listbox/listbox.stories.ts @@ -1,6 +1,4 @@ import Base from "./fixtures/base.html"; -import "../listbox-option"; -import "./index"; export default { title: "Listbox", diff --git a/packages/web-components/fast-components/src/listbox/listbox.styles.ts b/packages/web-components/fast-components/src/listbox/listbox.styles.ts index d4afa7c8dfe..5ece58518b9 100644 --- a/packages/web-components/fast-components/src/listbox/listbox.styles.ts +++ b/packages/web-components/fast-components/src/listbox/listbox.styles.ts @@ -1,11 +1,11 @@ -import { css, ElementStyles } from "@microsoft/fast-element"; +import { css } from "@microsoft/fast-element"; +import type { ElementStyles } from "@microsoft/fast-element"; import { display, - ElementDefinitionContext, focusVisible, forcedColorsStylesheetBehavior, - FoundationElementDefinition, } from "@microsoft/fast-foundation"; +import type { FoundationElementTemplate } from "@microsoft/fast-foundation"; import { SystemColors } from "@microsoft/fast-web-utilities"; import { controlCornerRadius, @@ -16,17 +16,15 @@ import { neutralStrokeRest, strokeWidth, } from "../design-tokens"; +import { heightNumber } from "../styles/size"; /** * Styles for Listbox * @public */ -export const listboxStyles: ( - context: ElementDefinitionContext, - definition: FoundationElementDefinition -) => ElementStyles = ( - context: ElementDefinitionContext, - definition: FoundationElementDefinition +export const listboxStyles: FoundationElementTemplate = ( + context, + definition ) => css` ${display("inline-flex")} :host { @@ -43,6 +41,14 @@ export const listboxStyles: ( box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px) ${focusStrokeOuter} inset; } + + :host([size]) { + max-height: calc( + (var(--size) * ${heightNumber} + ((${designUnit} + ${strokeWidth}) * 2)) * + 1px + ); + overflow-y: auto; + } `.withBehaviors( forcedColorsStylesheetBehavior( css` diff --git a/packages/web-components/fast-components/src/listbox/listbox.vscode.definition.json b/packages/web-components/fast-components/src/listbox/listbox.vscode.definition.json index e7f299defa7..5822fb115d3 100644 --- a/packages/web-components/fast-components/src/listbox/listbox.vscode.definition.json +++ b/packages/web-components/fast-components/src/listbox/listbox.vscode.definition.json @@ -26,6 +26,13 @@ "type": "boolean", "default": false, "required": false + }, + { + "name": "size", + "title": "Size", + "description": "The maximum number of visible options", + "type": "string", + "required": false } ], "slots": [ diff --git a/packages/web-components/fast-components/src/select/select.pw.spec.ts b/packages/web-components/fast-components/src/select/select.pw.spec.ts index 8e946e05315..77baa63477c 100644 --- a/packages/web-components/fast-components/src/select/select.pw.spec.ts +++ b/packages/web-components/fast-components/src/select/select.pw.spec.ts @@ -306,7 +306,7 @@ describe("FASTSelect", function () { expect( await selectedOption.evaluate(node => node.scrollTop) - ).to.be.closeTo(811, 16); + ).to.be.closeTo(451, 16); await element.evaluate(node => (node.selectedIndex = 0)); diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md index 26ee24a2372..99781c6ced0 100644 --- a/packages/web-components/fast-foundation/docs/api-report.md +++ b/packages/web-components/fast-foundation/docs/api-report.md @@ -1322,20 +1322,19 @@ export const lightModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaS // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Listbox" because one of its declarations is marked as @internal // // @public -export class Listbox extends FoundationElement { +export abstract class Listbox extends FoundationElement { // @internal clickHandler(e: MouseEvent): boolean | void; disabled: boolean; - // @internal (undocumented) + // @internal get firstSelectedOption(): ListboxOption; - // @internal (undocumented) + // @internal protected focusAndScrollOptionIntoView(): void; - // @internal (undocumented) + // @internal focusinHandler(e: FocusEvent): void; - handleTypeAhead: (key: string) => void; + handleTypeAhead(key: string): void; // @internal keydownHandler(e: KeyboardEvent): boolean | void; - // (undocumented) get length(): number; // @internal mousedownHandler(e: MouseEvent): boolean | void; @@ -1345,11 +1344,11 @@ export class Listbox extends FoundationElement { protected _options: ListboxOption[]; role: string; selectedIndex: number; - // (undocumented) + // @internal selectedIndexChanged(prev: number, next: number): void; selectedOptions: ListboxOption[]; - // (undocumented) - protected selectedOptionsChanged(prev: any, next: any): void; + // @internal + protected selectedOptionsChanged(prev: ListboxOption[] | undefined, next: ListboxOption[]): void; selectFirstOption(): void; // @internal selectLastOption(): void; @@ -1357,23 +1356,28 @@ export class Listbox extends FoundationElement { selectNextOption(): void; // @internal selectPreviousOption(): void; - // @internal (undocumented) + // @internal protected setDefaultSelectedOption(): void; protected setSelectedOptions(): void; + // @internal + protected shouldSkipFocus: boolean; static slottedOptionFilter: (n: HTMLElement) => boolean; - // @internal (undocumented) - slottedOptions: HTMLElement[]; - // (undocumented) - slottedOptionsChanged(prev: any, next: any): void; + // @internal + slottedOptions: Element[]; + // @internal + slottedOptionsChanged(prev: Element[] | unknown, next: Element[]): void; // @internal protected static readonly TYPE_AHEAD_TIMEOUT_MS = 1000; - // @internal (undocumented) + // @internal protected typeaheadBuffer: string; - // (undocumented) + // @internal typeaheadBufferChanged(prev: string, next: string): void; + // @internal @deprecated + protected get typeAheadExpired(): boolean; + protected set typeAheadExpired(value: boolean); + // @internal + protected typeaheadExpired: boolean; // @internal - protected typeAheadExpired: boolean; - // @internal (undocumented) protected typeaheadTimeout: number; } @@ -1381,6 +1385,15 @@ export class Listbox extends FoundationElement { export interface Listbox extends DelegatesARIAListbox { } +// @public +export class ListboxElement extends Listbox { + // @internal @override + mousedownHandler(e: MouseEvent): boolean | void; + size: number; + // @internal + protected sizeChanged(prev: number | unknown, next: number): void; +} + // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag // Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "ListboxOption" because one of its declarations is marked as @internal // @@ -1433,7 +1446,7 @@ export enum ListboxRole { } // @public -export const listboxTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate; +export const listboxTemplate: FoundationElementTemplate>; // @public export abstract class MatchMediaBehavior implements Behavior { diff --git a/packages/web-components/fast-foundation/src/listbox/index.ts b/packages/web-components/fast-foundation/src/listbox/index.ts index 63206f92e3c..38b82625bc1 100644 --- a/packages/web-components/fast-foundation/src/listbox/index.ts +++ b/packages/web-components/fast-foundation/src/listbox/index.ts @@ -1,3 +1,4 @@ export * from "./listbox"; +export * from "./listbox.element"; export * from "./listbox.options"; export * from "./listbox.template"; diff --git a/packages/web-components/fast-foundation/src/listbox/listbox.element.ts b/packages/web-components/fast-foundation/src/listbox/listbox.element.ts new file mode 100644 index 00000000000..a926f0c4668 --- /dev/null +++ b/packages/web-components/fast-foundation/src/listbox/listbox.element.ts @@ -0,0 +1,51 @@ +import { attr, DOM, nullableNumberConverter } from "@microsoft/fast-element"; +import { Listbox } from "./listbox"; + +/** + * A Listbox Custom HTML Element. + * Implements the {@link https://w3c.github.io/aria/#listbox | ARIA listbox }. + * + * @public + */ +export class ListboxElement extends Listbox { + /** + * The maximum number of options to display. + * + * @remarks + * HTML Attribute: `size`. + * + * @public + */ + @attr({ converter: nullableNumberConverter }) + public size: number; + + /** + * Prevents `focusin` events from firing before `click` events when the + * element is unfocused. + * + * @override + * @internal + */ + public mousedownHandler(e: MouseEvent): boolean | void { + if (e.offsetX >= 0 && e.offsetX <= this.scrollWidth) { + return super.mousedownHandler(e); + } + } + + /** + * Ensures the size is a positive integer when the property is updated. + * + * @param prev - the previous size value + * @param next - the current size value + * + * @internal + */ + protected sizeChanged(prev: number | unknown, next: number): void { + const size = Math.max(0, parseInt(next.toFixed(), 10)); + if (size !== next) { + DOM.queueUpdate(() => { + this.size = size; + }); + } + } +} diff --git a/packages/web-components/fast-foundation/src/listbox/listbox.spec.md b/packages/web-components/fast-foundation/src/listbox/listbox.spec.md index 7ba56289d0a..ebcba65e5ed 100644 --- a/packages/web-components/fast-foundation/src/listbox/listbox.spec.md +++ b/packages/web-components/fast-foundation/src/listbox/listbox.spec.md @@ -33,6 +33,7 @@ This component is used as a building block for other components in this library - `role` - The role of the element, defaults to "listbox". - `selectedOptions` - A collection of the selected options in the `listbox`. - `selectedIndex` - The index of the first selected option, or `-1` if nothing is selected. Setting the `selectedIndex` property will update the `selected` state of the option at the new index. Out of range values will reset the `selectedIndex` to `-1`. +- `size` - The maximum number of options that should be visible in the `listbox` scroll area. *Slots*: diff --git a/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts b/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts index 823e6bc0eb9..0c79022df27 100644 --- a/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts +++ b/packages/web-components/fast-foundation/src/listbox/listbox.spec.ts @@ -1,11 +1,11 @@ import { DOM } from "@microsoft/fast-element"; -import { assert, expect } from "chai"; -import { fixture } from "../test-utilities/fixture"; +import { expect } from "chai"; import { ListboxOption } from "../listbox-option/listbox-option"; import { listboxOptionTemplate as itemTemplate } from "../listbox-option/listbox-option.template"; -import { Listbox, listboxTemplate as template } from "./index"; +import { fixture } from "../test-utilities/fixture"; +import { ListboxElement, listboxTemplate as template } from "./index"; -const FASTListbox = Listbox.compose({ +const FASTListbox = ListboxElement.compose({ baseName: "listbox", template }) @@ -65,7 +65,7 @@ describe("Listbox", () => { await DOM.nextUpdate(); - assert.isNull(element.getAttribute("tabindex")); + expect(element.getAttribute("tabindex")).to.be.null; await disconnect(); }); @@ -99,4 +99,74 @@ describe("Listbox", () => { await disconnect(); }); + + it("should set the `size` property to match the `size` attribute", async () => { + const { element, connect, disconnect } = await setup(); + + await connect(); + + element.setAttribute("size", "4"); + + expect(element.size).to.equal(4); + + await disconnect(); + }); + + it("should set the `size` attribute to match the `size` property", async () => { + const { element, connect, disconnect } = await setup(); + + await connect(); + + element.size = 4; + + await DOM.nextUpdate(); + + expect(element.getAttribute("size")).to.equal("4"); + + await disconnect(); + }); + + describe("should set the `size` property to 0 when a negative value is set", () => { + it("via the `size` property", async () => { + const { element, connect, disconnect } = await setup(); + + await connect(); + + element.size = 1; + + await DOM.nextUpdate(); + + expect(element.size).to.equal(1); + expect(element.getAttribute("size")).to.equal("1"); + + element.size = -1; + + await DOM.nextUpdate(); + + expect(element.size).to.equal(0); + expect(element.getAttribute("size")).to.equal("0"); + + await disconnect(); + }); + + it("via the `size` attribute", async () => { + const { element, connect, disconnect } = await setup(); + + await connect(); + + element.setAttribute("size", "1"); + + expect(element.size).to.equal(1); + expect(element.getAttribute("size")).to.equal("1"); + + element.setAttribute("size", "-1"); + + await DOM.nextUpdate(); + + expect(element.size).to.equal(0); + expect(element.getAttribute("size")).to.equal("0"); + + await disconnect(); + }); + }); }); diff --git a/packages/web-components/fast-foundation/src/listbox/listbox.template.ts b/packages/web-components/fast-foundation/src/listbox/listbox.template.ts index 1651848e8af..fcc082faa41 100644 --- a/packages/web-components/fast-foundation/src/listbox/listbox.template.ts +++ b/packages/web-components/fast-foundation/src/listbox/listbox.template.ts @@ -1,19 +1,15 @@ import { html, slotted } from "@microsoft/fast-element"; import type { ViewTemplate } from "@microsoft/fast-element"; -import type { FoundationElementDefinition } from "../foundation-element"; -import type { ElementDefinitionContext } from "../design-system"; -import { Listbox } from "./listbox"; +import type { FoundationElementTemplate } from "../foundation-element"; +import { ListboxElement } from "./listbox.element"; /** * The template for the {@link @microsoft/fast-foundation#(Listbox:class)} component. * @public */ -export const listboxTemplate: ( - context: ElementDefinitionContext, - definition: FoundationElementDefinition -) => ViewTemplate = ( - context: ElementDefinitionContext, - definition: FoundationElementDefinition +export const listboxTemplate: FoundationElementTemplate> = ( + context, + definition ) => html`