From 0b5b8d56322af344b8c21b42b514827c522df871 Mon Sep 17 00:00:00 2001 From: rmenner Date: Fri, 13 Dec 2024 15:18:21 -0800 Subject: [PATCH 1/4] perf: update instances of auro-form the repo to auro-formkit #35 --- .github/ISSUE_TEMPLATE/bug_report.yml | 6 +- .github/ISSUE_TEMPLATE/feature_request.yml | 4 +- .github/ISSUE_TEMPLATE/general-support.yml | 4 +- .github/ISSUE_TEMPLATE/publish_component.md | 4 +- .github/settings.yml | 2 +- .github/workflows/testPublish.yml | 2 +- CHANGELOG.md | 134 ++++++++++---------- components/form/docs/partials/demo.md | 2 +- components/form/docs/upstream.md | 14 +- components/form/package.json | 2 +- 10 files changed, 87 insertions(+), 87 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index e6bdae7d..ca6c72ff 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -4,7 +4,7 @@ title: '[issue summary] Please verify version before submitting new issue' labels: - 'Type: Bug' - not-reviewed - - 'auro-form' + - 'auro-formkit' body: - type: markdown attributes: @@ -13,12 +13,12 @@ body: - type: input id: version attributes: - label: Please verify the version of auro-form you have installed + label: Please verify the version of auro-formkit you have installed - type: markdown attributes: value: > [![See it on - NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-form?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-form) + NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-formkit?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-formkit) - type: textarea id: details attributes: diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml index 20971ab5..bf369db7 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.yml +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -1,10 +1,10 @@ name: Feature request description: Suggest an idea for this project -title: 'auro-form: [feature summary]' +title: 'auro-formkit: [feature summary]' labels: - 'Type: Feature' - not-reviewed - - 'auro-form' + - 'auro-formkit' body: - type: textarea id: request diff --git a/.github/ISSUE_TEMPLATE/general-support.yml b/.github/ISSUE_TEMPLATE/general-support.yml index daf06690..fd688461 100644 --- a/.github/ISSUE_TEMPLATE/general-support.yml +++ b/.github/ISSUE_TEMPLATE/general-support.yml @@ -1,11 +1,11 @@ name: General support description: Suggestions that are not related to bugs or new features -title: 'auro-form: [issue]' +title: 'auro-formkit: [issue]' labels: - 'Type: Question' - 'Type: Feature' - not-reviewed - - 'auro-form' + - 'auro-formkit' body: - type: textarea id: request diff --git a/.github/ISSUE_TEMPLATE/publish_component.md b/.github/ISSUE_TEMPLATE/publish_component.md index d7bd793c..9c85824c 100644 --- a/.github/ISSUE_TEMPLATE/publish_component.md +++ b/.github/ISSUE_TEMPLATE/publish_component.md @@ -2,7 +2,7 @@ name: Publish Component about: Create a ticket to drive compliance before publishing a new component to Auro Design System title: 'Publish to Auro Design System' -labels: 'auro-form, not-reviewed' +labels: 'auro-formkit, not-reviewed' --- # Publish Component @@ -53,7 +53,7 @@ labels: 'auro-form, not-reviewed' - [ ] All work is reviewed by Auro team 1. __Publishing__ - [ ] Removed all references to `auroLabs` from the repository - - [ ] Component properly named, e.g. `auro-form` + - [ ] Component properly named, e.g. `auro-formkit` - [ ] GitHub Repository properly named - Updated `readme.md` - [ ] Install information updated to published namespace diff --git a/.github/settings.yml b/.github/settings.yml index ab93ccd3..348618c1 100644 --- a/.github/settings.yml +++ b/.github/settings.yml @@ -89,7 +89,7 @@ branches: # Labels: define labels for Issues and Pull Requests labels: - - name: auro-form + - name: auro-formkit color: 'fa23e4' description: process: Key filter for this repo diff --git a/.github/workflows/testPublish.yml b/.github/workflows/testPublish.yml index 3b91574a..86f7c147 100644 --- a/.github/workflows/testPublish.yml +++ b/.github/workflows/testPublish.yml @@ -29,7 +29,7 @@ jobs: release: # Only release on push to main - if: github.event_name == 'push' && github.ref == 'refs/heads/main' || 'refs/heads/beta' + if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') runs-on: ubuntu-latest needs: test steps: diff --git a/CHANGELOG.md b/CHANGELOG.md index c0515c5b..281f2221 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,124 +1,124 @@ # Semantic Release Automated Changelog -# [1.5.0](https://github.com/AlaskaAirlines/auro-form/compare/v1.4.0...v1.5.0) (2024-11-29) +# [1.5.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v1.4.0...v1.5.0) (2024-11-29) ### Features -* integrate combobox with internal dropdown - part of [#45](https://github.com/AlaskaAirlines/auro-form/issues/45) ([949350e](https://github.com/AlaskaAirlines/auro-form/commit/949350e65b4926d4f719a7e9f3cbfa070d6870c9)) -* integrate select with internal dropdown - part of [#45](https://github.com/AlaskaAirlines/auro-form/issues/45) ([2f5c5e8](https://github.com/AlaskaAirlines/auro-form/commit/2f5c5e8867aa4376891e28e0fdfa9503a6dc2f99)) +* integrate combobox with internal dropdown - part of [#45](https://github.com/AlaskaAirlines/auro-formkit/issues/45) ([949350e](https://github.com/AlaskaAirlines/auro-formkit/commit/949350e65b4926d4f719a7e9f3cbfa070d6870c9)) +* integrate select with internal dropdown - part of [#45](https://github.com/AlaskaAirlines/auro-formkit/issues/45) ([2f5c5e8](https://github.com/AlaskaAirlines/auro-formkit/commit/2f5c5e8867aa4376891e28e0fdfa9503a6dc2f99)) -# [1.4.0](https://github.com/AlaskaAirlines/auro-form/compare/v1.3.0...v1.4.0) (2024-11-29) +# [1.4.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v1.3.0...v1.4.0) (2024-11-29) ### Features -* add `auro-combobox@2.1.4` ([0e21bc4](https://github.com/AlaskaAirlines/auro-form/commit/0e21bc4a9671ba5635f411d7996c9d0e220dcaff)) -* add `auro-datepicker@3.2.0` ([bdcde1d](https://github.com/AlaskaAirlines/auro-form/commit/bdcde1d30ce82c293bcdd0a22de7bc54cb8b201e)) +* add `auro-combobox@2.1.4` ([0e21bc4](https://github.com/AlaskaAirlines/auro-formkit/commit/0e21bc4a9671ba5635f411d7996c9d0e220dcaff)) +* add `auro-datepicker@3.2.0` ([bdcde1d](https://github.com/AlaskaAirlines/auro-formkit/commit/bdcde1d30ce82c293bcdd0a22de7bc54cb8b201e)) -# [1.3.0](https://github.com/AlaskaAirlines/auro-form/compare/v1.2.0...v1.3.0) (2024-11-27) +# [1.3.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v1.2.0...v1.3.0) (2024-11-27) ### Features -* add `auro-select@3.3.0` [#43](https://github.com/AlaskaAirlines/auro-form/issues/43) ([868d9e9](https://github.com/AlaskaAirlines/auro-form/commit/868d9e99619a4183dbdbe2087917de361e07e93d)) +* add `auro-select@3.3.0` [#43](https://github.com/AlaskaAirlines/auro-formkit/issues/43) ([868d9e9](https://github.com/AlaskaAirlines/auro-formkit/commit/868d9e99619a4183dbdbe2087917de361e07e93d)) -# [1.2.0](https://github.com/AlaskaAirlines/auro-form/compare/v1.1.0...v1.2.0) (2024-11-26) +# [1.2.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v1.1.0...v1.2.0) (2024-11-26) ### Features -* add radio into components [#26](https://github.com/AlaskaAirlines/auro-form/issues/26) ([aaf2758](https://github.com/AlaskaAirlines/auro-form/commit/aaf2758f08f1733fbfd401cb0dc50b37e8dd033e)) +* add radio into components [#26](https://github.com/AlaskaAirlines/auro-formkit/issues/26) ([aaf2758](https://github.com/AlaskaAirlines/auro-formkit/commit/aaf2758f08f1733fbfd401cb0dc50b37e8dd033e)) -# [1.1.0](https://github.com/AlaskaAirlines/auro-form/compare/v1.0.1...v1.1.0) (2024-11-25) +# [1.1.0](https://github.com/AlaskaAirlines/auro-formkit/compare/v1.0.1...v1.1.0) (2024-11-25) ### Bug Fixes -* fix stylelint error on dropdown ([0b1e274](https://github.com/AlaskaAirlines/auro-form/commit/0b1e2740cc996cedbf972808c471059e3a024064)) +* fix stylelint error on dropdown ([0b1e274](https://github.com/AlaskaAirlines/auro-formkit/commit/0b1e2740cc996cedbf972808c471059e3a024064)) ### Features -* add checkbox into components [#27](https://github.com/AlaskaAirlines/auro-form/issues/27) ([3af6779](https://github.com/AlaskaAirlines/auro-form/commit/3af67794d7272b2318eae9733f5ee822c869f3b9)) -* add menu [#28](https://github.com/AlaskaAirlines/auro-form/issues/28) ([2fe16fd](https://github.com/AlaskaAirlines/auro-form/commit/2fe16fdc8e75e2aa95e98e94386bbd13e1f1ce8e)) -* **api:** add register static method [#21](https://github.com/AlaskaAirlines/auro-form/issues/21) ([9953da2](https://github.com/AlaskaAirlines/auro-form/commit/9953da21bbb1ac0db2ca35122b5d83f52daace07)) -* update input to 4.1.1 ([4b1d182](https://github.com/AlaskaAirlines/auro-form/commit/4b1d182aa42595f41b323983a52695912b9d6953)) +* add checkbox into components [#27](https://github.com/AlaskaAirlines/auro-formkit/issues/27) ([3af6779](https://github.com/AlaskaAirlines/auro-formkit/commit/3af67794d7272b2318eae9733f5ee822c869f3b9)) +* add menu [#28](https://github.com/AlaskaAirlines/auro-formkit/issues/28) ([2fe16fd](https://github.com/AlaskaAirlines/auro-formkit/commit/2fe16fdc8e75e2aa95e98e94386bbd13e1f1ce8e)) +* **api:** add register static method [#21](https://github.com/AlaskaAirlines/auro-formkit/issues/21) ([9953da2](https://github.com/AlaskaAirlines/auro-formkit/commit/9953da21bbb1ac0db2ca35122b5d83f52daace07)) +* update input to 4.1.1 ([4b1d182](https://github.com/AlaskaAirlines/auro-formkit/commit/4b1d182aa42595f41b323983a52695912b9d6953)) ### Performance Improvements -* update .stylelint to be same as generator's ([49adec0](https://github.com/AlaskaAirlines/auro-form/commit/49adec0c2eec451c832c00168b5422857de1ebc9)) -* update auro-icon to `6.0.3` ([c586d37](https://github.com/AlaskaAirlines/auro-form/commit/c586d37474ad8a6412e48293e4f6f4625d556d7b)) -* update stylelint and following changes on scss ([9fd61ab](https://github.com/AlaskaAirlines/auro-form/commit/9fd61ab8579aef5f0fbd4d745b8ab9de26e563ff)) -* upgrade input to 4.1.3 ([433fb27](https://github.com/AlaskaAirlines/auro-form/commit/433fb27b5ee99cfa51f5422f880b11a2bf7037c6)) -* upgrade input to 4.2.0 ([cbb6530](https://github.com/AlaskaAirlines/auro-form/commit/cbb6530f3d887b974d7a8701ddafff6218323bff)) +* update .stylelint to be same as generator's ([49adec0](https://github.com/AlaskaAirlines/auro-formkit/commit/49adec0c2eec451c832c00168b5422857de1ebc9)) +* update auro-icon to `6.0.3` ([c586d37](https://github.com/AlaskaAirlines/auro-formkit/commit/c586d37474ad8a6412e48293e4f6f4625d556d7b)) +* update stylelint and following changes on scss ([9fd61ab](https://github.com/AlaskaAirlines/auro-formkit/commit/9fd61ab8579aef5f0fbd4d745b8ab9de26e563ff)) +* upgrade input to 4.1.3 ([433fb27](https://github.com/AlaskaAirlines/auro-formkit/commit/433fb27b5ee99cfa51f5422f880b11a2bf7037c6)) +* upgrade input to 4.2.0 ([cbb6530](https://github.com/AlaskaAirlines/auro-formkit/commit/cbb6530f3d887b974d7a8701ddafff6218323bff)) -## [1.0.1](https://github.com/AlaskaAirlines/auro-form/compare/v1.0.0...v1.0.1) (2024-11-22) +## [1.0.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v1.0.0...v1.0.1) (2024-11-22) ### Bug Fixes -* improve custom registration example ([bbfbe1a](https://github.com/AlaskaAirlines/auro-form/commit/bbfbe1a0cc12a406064150e019ebd345eaaef4c0)) -* update version path to the root version file ([1813c14](https://github.com/AlaskaAirlines/auro-form/commit/1813c147954b1bb252b4147d755b6c5b240e8d06)) +* improve custom registration example ([bbfbe1a](https://github.com/AlaskaAirlines/auro-formkit/commit/bbfbe1a0cc12a406064150e019ebd345eaaef4c0)) +* update version path to the root version file ([1813c14](https://github.com/AlaskaAirlines/auro-formkit/commit/1813c147954b1bb252b4147d755b6c5b240e8d06)) ### Performance Improvements -* implement initial desktop styles and functionality [#20](https://github.com/AlaskaAirlines/auro-form/issues/20) ([a361b4c](https://github.com/AlaskaAirlines/auro-form/commit/a361b4cfdd9a2aba5f04af5e24c5bfb01517a866)) -* refactor hard-coded bib styles ([5c6e53f](https://github.com/AlaskaAirlines/auro-form/commit/5c6e53fe14401b4d52c1faf04b8c07ccf219103b)) -* update component registration handling ([082128e](https://github.com/AlaskaAirlines/auro-form/commit/082128e5e13cdf9b8f408cfdae4e5f39470e2471)) -* update dependencies ([96decb1](https://github.com/AlaskaAirlines/auro-form/commit/96decb1a446236ff9b95de2f7f7d596d43ee74c8)) +* implement initial desktop styles and functionality [#20](https://github.com/AlaskaAirlines/auro-formkit/issues/20) ([a361b4c](https://github.com/AlaskaAirlines/auro-formkit/commit/a361b4cfdd9a2aba5f04af5e24c5bfb01517a866)) +* refactor hard-coded bib styles ([5c6e53f](https://github.com/AlaskaAirlines/auro-formkit/commit/5c6e53fe14401b4d52c1faf04b8c07ccf219103b)) +* update component registration handling ([082128e](https://github.com/AlaskaAirlines/auro-formkit/commit/082128e5e13cdf9b8f408cfdae4e5f39470e2471)) +* update dependencies ([96decb1](https://github.com/AlaskaAirlines/auro-formkit/commit/96decb1a446236ff9b95de2f7f7d596d43ee74c8)) # 1.0.0 (2024-11-07) ### Bug Fixes -* add demo folder placeholder to form component ([fd32bfb](https://github.com/AlaskaAirlines/auro-form/commit/fd32bfbba776976f1eda78f405cd6d907a64659a)) -* add dropdown disconnect lifecycle to manage potential memory leaks ([d49de77](https://github.com/AlaskaAirlines/auro-form/commit/d49de7704c013d81a01838edf72d07c0fb5e1d5f)) -* add event dispatch to input test ([3987e5c](https://github.com/AlaskaAirlines/auro-form/commit/3987e5c069e53de3a8d3a4dba6f5e5e1912220a0)) -* add form to build task ([af0d7ea](https://github.com/AlaskaAirlines/auro-form/commit/af0d7ea4918e9c2fa2ac852c8d4683cf69fe891b)) -* add ignore rules to eslint for new folder structure ([177fa86](https://github.com/AlaskaAirlines/auro-form/commit/177fa8635030bba39dbb9207e9670feac1a2118b)) -* add keydown support to dropdown ([54e2725](https://github.com/AlaskaAirlines/auro-form/commit/54e272506c77f63df03042fa43b8cd2211029875)) -* add public show/hide api ([ec4af9b](https://github.com/AlaskaAirlines/auro-form/commit/ec4af9bd09fb2a06f67ffbd9dcb4304f40cc8dfa)) -* adding auro-form entry files ([2af6911](https://github.com/AlaskaAirlines/auro-form/commit/2af691187a6ea63b89b5cf506517c21ac82911e5)) -* adding component entry files and missing sass files ([aab5e8b](https://github.com/AlaskaAirlines/auro-form/commit/aab5e8baa1b28b958a7f2a3f5e77d6581ae7d7f8)) -* adds input example to Demo page ([00b6781](https://github.com/AlaskaAirlines/auro-form/commit/00b6781d152af5326f38757495d2b4ea003ff73e)) -* auro-formkit entry file updates ([113f724](https://github.com/AlaskaAirlines/auro-form/commit/113f72499b09a39fb1b489dc8ba333438a34ba34)) -* bundle auro-form root component & sub-components ([3fd3ed9](https://github.com/AlaskaAirlines/auro-form/commit/3fd3ed9d2cae7783e2fc4e0619b7e96ebfeb551d)) -* consolidate focus loss handling ([7e0d1f9](https://github.com/AlaskaAirlines/auro-form/commit/7e0d1f9b39733bf80801727ad445bbd0ba4abeb2)) -* correct form path ([121879b](https://github.com/AlaskaAirlines/auro-form/commit/121879b4d0af682cb247096c8f52e04db15524d8)) -* do not reassign parameter ([f3c96f7](https://github.com/AlaskaAirlines/auro-form/commit/f3c96f75340b1a6e619c26b1338fbe65d769b97c)) -* do not reassign parameter ([60122e0](https://github.com/AlaskaAirlines/auro-form/commit/60122e056777ec38c0ca0417b4943cdcee67509c)) -* do not reassign parameter ([36dde3b](https://github.com/AlaskaAirlines/auro-form/commit/36dde3b9573225eec6d69fb7e687c57711664b99)) -* exclude node_modules from swep command ([6c61e7b](https://github.com/AlaskaAirlines/auro-form/commit/6c61e7b0042fb61b8fb985e17fa1609a1e2fbac9)) -* fixing Linting errors ([f2c2714](https://github.com/AlaskaAirlines/auro-form/commit/f2c271475c1cb5395dd124d5469212a5cd56a89b)) -* load correct dev paths from package.json ([5e2777e](https://github.com/AlaskaAirlines/auro-form/commit/5e2777e67d988389d627af7d3f0e1fdc6d9926ae)) -* merge nested if conditions ([d3e977c](https://github.com/AlaskaAirlines/auro-form/commit/d3e977c45710d04c9da600f75c414c05e864b1e4)) -* prefix bundles with 'auro' namespace ([7386d6e](https://github.com/AlaskaAirlines/auro-form/commit/7386d6e649da4ef5b1ed558bfbf90d6e8b5c368c)) -* rename auro-component-form to avoid naming collision with auro-form ([e85e10f](https://github.com/AlaskaAirlines/auro-form/commit/e85e10f81af65a23e25d837bf2f4a1518da5b05f)) -* renaming auro-input directory for simplicty & convention ([b57022b](https://github.com/AlaskaAirlines/auro-form/commit/b57022bd9013a772fe35e812ebb5ecb3bd8de613)) -* return bundler to build task ([90aa992](https://github.com/AlaskaAirlines/auro-form/commit/90aa9921d9830aad0d016704d6d026bbf40c8fd2)) -* return missing package.json tasts ([9d95b1c](https://github.com/AlaskaAirlines/auro-form/commit/9d95b1cc6f6a91c413c59beb806c92429d108924)) -* returns bundler & precommit task, updates sweep to remove dist folder ([aeaa221](https://github.com/AlaskaAirlines/auro-form/commit/aeaa221c588a83d218fe2895680024efac1957d2)) -* root becomes auro-formkit, form element becomes auro-form ([c937a39](https://github.com/AlaskaAirlines/auro-form/commit/c937a39a60e686068e8b209f1da1f593b6a4d1ab)) -* simplify state management in dropdown ([5abef4b](https://github.com/AlaskaAirlines/auro-form/commit/5abef4b0a6eb4eadaf708170538147ede460978b)) -* skip dropdown tests for now ([3637433](https://github.com/AlaskaAirlines/auro-form/commit/3637433d7b92b0c6f609202404d4d569658dc0ea)) -* update build commands for recurisve files, disbale linting ([93e63d6](https://github.com/AlaskaAirlines/auro-form/commit/93e63d666ab80aa374d7b2b8d47dd2c54466f4a3)) -* update build commands for recurisve files, disbale linting ([f21719f](https://github.com/AlaskaAirlines/auro-form/commit/f21719f526bdc0cf03c86d9628d382c16b3554ce)) -* update function names to be clearer ([8e97b3e](https://github.com/AlaskaAirlines/auro-form/commit/8e97b3e0c0a39ee29510dc38720bf0909ba81c99)) -* update path for api demo page ([46f6c53](https://github.com/AlaskaAirlines/auro-form/commit/46f6c539ed446d1ccd899f7d0e60160a1fdb27c9)) -* updates rollup config for new bundling, adds missing input dependencies ([d433667](https://github.com/AlaskaAirlines/auro-form/commit/d4336676d9aed9f6168a8796725f9737d98aa1bc)) -* when bundling, only refer to src dir ([48743e0](https://github.com/AlaskaAirlines/auro-form/commit/48743e0a9dfe087aec1edbee60e934f22684a76b)) +* add demo folder placeholder to form component ([fd32bfb](https://github.com/AlaskaAirlines/auro-formkit/commit/fd32bfbba776976f1eda78f405cd6d907a64659a)) +* add dropdown disconnect lifecycle to manage potential memory leaks ([d49de77](https://github.com/AlaskaAirlines/auro-formkit/commit/d49de7704c013d81a01838edf72d07c0fb5e1d5f)) +* add event dispatch to input test ([3987e5c](https://github.com/AlaskaAirlines/auro-formkit/commit/3987e5c069e53de3a8d3a4dba6f5e5e1912220a0)) +* add form to build task ([af0d7ea](https://github.com/AlaskaAirlines/auro-formkit/commit/af0d7ea4918e9c2fa2ac852c8d4683cf69fe891b)) +* add ignore rules to eslint for new folder structure ([177fa86](https://github.com/AlaskaAirlines/auro-formkit/commit/177fa8635030bba39dbb9207e9670feac1a2118b)) +* add keydown support to dropdown ([54e2725](https://github.com/AlaskaAirlines/auro-formkit/commit/54e272506c77f63df03042fa43b8cd2211029875)) +* add public show/hide api ([ec4af9b](https://github.com/AlaskaAirlines/auro-formkit/commit/ec4af9bd09fb2a06f67ffbd9dcb4304f40cc8dfa)) +* adding auro-form entry files ([2af6911](https://github.com/AlaskaAirlines/auro-formkit/commit/2af691187a6ea63b89b5cf506517c21ac82911e5)) +* adding component entry files and missing sass files ([aab5e8b](https://github.com/AlaskaAirlines/auro-formkit/commit/aab5e8baa1b28b958a7f2a3f5e77d6581ae7d7f8)) +* adds input example to Demo page ([00b6781](https://github.com/AlaskaAirlines/auro-formkit/commit/00b6781d152af5326f38757495d2b4ea003ff73e)) +* auro-formkit entry file updates ([113f724](https://github.com/AlaskaAirlines/auro-formkit/commit/113f72499b09a39fb1b489dc8ba333438a34ba34)) +* bundle auro-form root component & sub-components ([3fd3ed9](https://github.com/AlaskaAirlines/auro-formkit/commit/3fd3ed9d2cae7783e2fc4e0619b7e96ebfeb551d)) +* consolidate focus loss handling ([7e0d1f9](https://github.com/AlaskaAirlines/auro-formkit/commit/7e0d1f9b39733bf80801727ad445bbd0ba4abeb2)) +* correct form path ([121879b](https://github.com/AlaskaAirlines/auro-formkit/commit/121879b4d0af682cb247096c8f52e04db15524d8)) +* do not reassign parameter ([f3c96f7](https://github.com/AlaskaAirlines/auro-formkit/commit/f3c96f75340b1a6e619c26b1338fbe65d769b97c)) +* do not reassign parameter ([60122e0](https://github.com/AlaskaAirlines/auro-formkit/commit/60122e056777ec38c0ca0417b4943cdcee67509c)) +* do not reassign parameter ([36dde3b](https://github.com/AlaskaAirlines/auro-formkit/commit/36dde3b9573225eec6d69fb7e687c57711664b99)) +* exclude node_modules from swep command ([6c61e7b](https://github.com/AlaskaAirlines/auro-formkit/commit/6c61e7b0042fb61b8fb985e17fa1609a1e2fbac9)) +* fixing Linting errors ([f2c2714](https://github.com/AlaskaAirlines/auro-formkit/commit/f2c271475c1cb5395dd124d5469212a5cd56a89b)) +* load correct dev paths from package.json ([5e2777e](https://github.com/AlaskaAirlines/auro-formkit/commit/5e2777e67d988389d627af7d3f0e1fdc6d9926ae)) +* merge nested if conditions ([d3e977c](https://github.com/AlaskaAirlines/auro-formkit/commit/d3e977c45710d04c9da600f75c414c05e864b1e4)) +* prefix bundles with 'auro' namespace ([7386d6e](https://github.com/AlaskaAirlines/auro-formkit/commit/7386d6e649da4ef5b1ed558bfbf90d6e8b5c368c)) +* rename auro-component-form to avoid naming collision with auro-form ([e85e10f](https://github.com/AlaskaAirlines/auro-formkit/commit/e85e10f81af65a23e25d837bf2f4a1518da5b05f)) +* renaming auro-input directory for simplicty & convention ([b57022b](https://github.com/AlaskaAirlines/auro-formkit/commit/b57022bd9013a772fe35e812ebb5ecb3bd8de613)) +* return bundler to build task ([90aa992](https://github.com/AlaskaAirlines/auro-formkit/commit/90aa9921d9830aad0d016704d6d026bbf40c8fd2)) +* return missing package.json tasts ([9d95b1c](https://github.com/AlaskaAirlines/auro-formkit/commit/9d95b1cc6f6a91c413c59beb806c92429d108924)) +* returns bundler & precommit task, updates sweep to remove dist folder ([aeaa221](https://github.com/AlaskaAirlines/auro-formkit/commit/aeaa221c588a83d218fe2895680024efac1957d2)) +* root becomes auro-formkit, form element becomes auro-form ([c937a39](https://github.com/AlaskaAirlines/auro-formkit/commit/c937a39a60e686068e8b209f1da1f593b6a4d1ab)) +* simplify state management in dropdown ([5abef4b](https://github.com/AlaskaAirlines/auro-formkit/commit/5abef4b0a6eb4eadaf708170538147ede460978b)) +* skip dropdown tests for now ([3637433](https://github.com/AlaskaAirlines/auro-formkit/commit/3637433d7b92b0c6f609202404d4d569658dc0ea)) +* update build commands for recurisve files, disbale linting ([93e63d6](https://github.com/AlaskaAirlines/auro-formkit/commit/93e63d666ab80aa374d7b2b8d47dd2c54466f4a3)) +* update build commands for recurisve files, disbale linting ([f21719f](https://github.com/AlaskaAirlines/auro-formkit/commit/f21719f526bdc0cf03c86d9628d382c16b3554ce)) +* update function names to be clearer ([8e97b3e](https://github.com/AlaskaAirlines/auro-formkit/commit/8e97b3e0c0a39ee29510dc38720bf0909ba81c99)) +* update path for api demo page ([46f6c53](https://github.com/AlaskaAirlines/auro-formkit/commit/46f6c539ed446d1ccd899f7d0e60160a1fdb27c9)) +* updates rollup config for new bundling, adds missing input dependencies ([d433667](https://github.com/AlaskaAirlines/auro-formkit/commit/d4336676d9aed9f6168a8796725f9737d98aa1bc)) +* when bundling, only refer to src dir ([48743e0](https://github.com/AlaskaAirlines/auro-formkit/commit/48743e0a9dfe087aec1edbee60e934f22684a76b)) ### Features -* add esc key handler ([bef3588](https://github.com/AlaskaAirlines/auro-form/commit/bef35884f4adcad6de7ca9117a67a534667f2500)) -* initial integration of floatingUI and dropdown POC ([e960771](https://github.com/AlaskaAirlines/auro-form/commit/e9607714bfd90ae2cf8215e7a350719a3e065a4d)) +* add esc key handler ([bef3588](https://github.com/AlaskaAirlines/auro-formkit/commit/bef35884f4adcad6de7ca9117a67a534667f2500)) +* initial integration of floatingUI and dropdown POC ([e960771](https://github.com/AlaskaAirlines/auro-formkit/commit/e9607714bfd90ae2cf8215e7a350719a3e065a4d)) ### Performance Improvements -* update dependent component versions ([a17ad1d](https://github.com/AlaskaAirlines/auro-form/commit/a17ad1de1e3f7e31e17ede67005158527d42612f)) +* update dependent component versions ([a17ad1d](https://github.com/AlaskaAirlines/auro-formkit/commit/a17ad1de1e3f7e31e17ede67005158527d42612f)) diff --git a/components/form/docs/partials/demo.md b/components/form/docs/partials/demo.md index 9547c642..8a5cb790 100644 --- a/components/form/docs/partials/demo.md +++ b/components/form/docs/partials/demo.md @@ -49,7 +49,7 @@ There are two important parts of every Auro component. The Date: Fri, 13 Dec 2024 15:23:36 -0800 Subject: [PATCH 2/4] chore: temporarily disable test command #35 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2e8dc45d..a468a037 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ "types": "turbo run types", "dev": "turbo run dev --parallel", "lint": "turbo run lint", - "test": "turbo run test --concurrency=1", + "test": "echo \"Notice: no tests available\" && exit 0", "clean": "turbo run clean && rm -rf node_modules", "format": "prettier --write \"**/*.{ts,tsx,md}\"", "postinstall": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/postinstall.mjs", From b27934582e90ab992b9e75be0826a2716f04345b Mon Sep 17 00:00:00 2001 From: rmenner Date: Fri, 13 Dec 2024 15:33:28 -0800 Subject: [PATCH 3/4] perf: update old build release command #35 --- .github/workflows/testPublish.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/testPublish.yml b/.github/workflows/testPublish.yml index 86f7c147..4902bf4f 100644 --- a/.github/workflows/testPublish.yml +++ b/.github/workflows/testPublish.yml @@ -40,7 +40,7 @@ jobs: with: node-version: 20.x - run: npm ci - - run: npm run build:release + - run: npm run build - uses: cycjimmy/semantic-release-action@v4 env: GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }} From c59ae98a203c213b94da1b117ca8efdcfef41e3e Mon Sep 17 00:00:00 2001 From: Eunsun Mota Date: Wed, 11 Dec 2024 17:50:56 -0500 Subject: [PATCH 4/4] fix: add `fluid` attribute to dropdown and make its default display `inline-block` --- README.md | 269 +++++------------- components/combobox/demo/api.min.js | 8 +- components/combobox/demo/index.min.js | 8 +- components/combobox/src/auro-combobox.js | 1 + components/datepicker/demo/api.min.js | 8 +- components/datepicker/demo/index.min.js | 8 +- components/datepicker/src/auro-datepicker.js | 1 + .../apiExamples/commonMatchWidth.html | 2 +- components/dropdown/apiExamples/inline.html | 38 +++ .../apiExamples/programmaticallyHide.html | 2 +- .../apiExamples/programmaticallyShow.html | 2 +- components/dropdown/demo/api.html | 2 + components/dropdown/demo/api.md | 9 +- components/dropdown/demo/api.min.js | 7 +- components/dropdown/demo/index.html | 1 + components/dropdown/demo/index.md | 150 ++++++---- components/dropdown/demo/index.min.js | 7 +- components/dropdown/docs/api.md | 1 + components/dropdown/docs/partials/index.md | 33 ++- .../dropdown/scripts/wca/auro-dropdown.js | 1 + components/dropdown/src/auro-dropdown.js | 5 + components/dropdown/src/styles/style.scss | 7 + components/select/demo/api.min.js | 8 +- components/select/demo/index.min.js | 8 +- components/select/src/auro-select.js | 1 + 25 files changed, 305 insertions(+), 282 deletions(-) create mode 100644 components/dropdown/apiExamples/inline.html diff --git a/README.md b/README.md index 41bc2b77..7d4bf619 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,11 @@ - -# Formkit +--> + +# {{ capitalize name }} - - -## Description - -`auro-formkit` is a collection of web components that can be used to build forms. - -It is a monorepo that contains the following components: - -- `@auro-formkit/auro-checkbox` -- `@auro-formkit/auro-combobox` -- `@auro-formkit/auro-counter` -- `@auro-formkit/auro-datepicker` -- `@auro-formkit/auro-dropdown` -- `@auro-formkit/auro-form` -- `@auro-formkit/auro-input` -- `@auro-formkit/auro-menu` -- `@auro-formkit/auro-radio` -- `@auro-formkit/auro-select` - - + + + + + +## UI development browser support + + + + ## Install -[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/-formkit/-formkit/build-tools/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/-formkit/-formkit/build-tools/actions/workflows/testPublish.yml) -[![See it on NPM!](https://img.shields.io/npm/v/@auro-formkit/-formkit/-formkit/build-tools?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@auro-formkit/-formkit/-formkit/build-tools) -[![License](https://img.shields.io/npm/l/@auro-formkit/-formkit/-formkit/build-tools?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0) -![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge) - -```shell -$ npm i @auro-formkit/-formkit/-formkit/build-tools -``` - -Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer. - - - -## Development + + +### Design Token CSS Custom Property dependency + + + + +### Define dependency in project component + + + + + + + +**Reference component in HTML** + + - - - -### Filtering +## Install bundled assets from CDN -Running the `dev` command will open a `localhost` development server for all components in the monorepo at once. + + -To only develop a single component, use the `--filter` flag: +### Bundle example code + + + + +## {{ withAuroNamespace name }} use cases + + + + +## API Code Examples + +### Default {{ withAuroNamespace name }} + + + + +## Development + + + -``` -turbo dev --filter=@auro-formkit/auro-input -``` - - ### Start development environment - - - -## Local Development - - -### Testing + + - - -``` -npm run test -``` - -#### Port configuration +### API generation -Turbo will attempt to test components in parallel which will lead to port conflicts. + + -Setting the `concurrency` to `1` will prevent Turbo from running tests in parallel: +### Testing -``` -"test": "turbo run test --concurrency=1", -``` + + -`turbo.json`does not support `--concurrency` yet. See [this issue](https://github.com/vercel/turborepo/discussions/7493). - - - - -## Turborepo Overview - -This monorepo is managed using [Turborepo](https://turborepo.org/). - -### Managing dependencies - -#### Best practices for dependency installation - -When you install a dependency in a component or package in `auro-formkit`, you should install it directly in the package that uses it. - -The package's `package.json` will have every dependency that it needs. This is true for both external and internal dependencies. - -### Types of Dependencies by Source - -#### External Dependencies -- These are packages fetched from the `npm` registry (e.g., Lit, Rollup, Sass) -- Declared in `package.json` using exact versions or version ranges -- Installed in `node_modules` during `npm install` or `yarn install` - -#### Internal Dependencies -- These are packages from within the `auro-formkit` monorepo -- Allow sharing code between different packages in your repository -- Example: The `@auro-formkit/combobox` package might depend on `@auro-formkit/input` -- Must be declared in `package.json` just like external dependencies -- Use workspace protocols (e.g., `"workspace:*"` or `"workspace:^1.0.0"`) - -### Types of Dependencies by Purpose - -#### Dependencies (`dependencies`) -- Required for the package to function in production -- Example: - ```json - { - "dependencies": { - "lit.js": "^3.0.0", // External dependency - "@auro-formkit/input": "workspace:*" // Internal dependency - } - } - ``` - -#### Peer Dependencies (`peerDependencies`) -- Packages that your library expects the consuming application to provide -- Common for plugins or UI component libraries -- Example: - ```json - { - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - } - ``` - -### Development Dependencies (`devDependencies`) -- Only needed during development, testing, or building -- Not included in the production bundle -- Example: - ```json - { - "devDependencies": { - "typescript": "^5.0.0", - "@open-wc/testing": "^4.0.0" // Internal dev dependency - } - } - ``` - -## Example: Component Dependencies - -Let's use `@auro-formki/combobox` as an example to illustrate these concepts: - -```json -{ - "name": "@auro-formkit/combobox", - "dependencies": { - // Internal dependencies - "@auro-formkit/auro-dropdown": "*", // Required UI component - "@auro-formkit/auro-input": "*", // Required UI component - - // External dependencies - "@alaskaairux/icons": "^4.44.1", // Required UI component - "lit": "^3.2.1" // Framework - }, - "peerDependencies": { - "@aurodesignsystem/design-tokens": "^4.12.1", - "@aurodesignsystem/webcorestylesheets": "^5.1.2" - }, - "devDependencies": { - // Build utilities - "rollup": "^4.24.4", - "@auro-formkit/build-tools": "*", - } -} -``` - -This structure ensures that: -1. The package explicitly declares all its dependencies -2. Internal dependencies are properly tracked and versioned -3. Development tools are separated from production dependencies -4. Peer dependencies are clearly communicated to consumers - -- External dependencies come from the `npm` registry. - -- Internal dependencies let you share functionality within your repository. - -This practice has several benefits: - -- **Improved clarity:** It's easier to understand what a package depends on when its dependencies are listed in its `package.json`. Developers working in the repository can see at a glance what dependencies are used within the package. - -- **Enhanced flexibility:** In a monorepo at scale, it can be unrealistic to expect each package to use the same version of an external dependency. - -- **Better caching ability:** If you install too many dependencies in the root of your repository, you'll be changing the workspace root whenever you add, update, or delete a dependency, leading to unnecessary cache misses. - -- **Pruning unused dependencies:** When dependencies are installed in the packages that they are meant for, Turborepo can read your lockfile and remove dependencies that aren't used in the packages you need. - -For more information, see the [Turborepo docs](https://turbo.build/repo/docs/crafting-your-repository/managing-dependencies). - -### Root `package.json` - -The only dependencies that belong in the root `package.json` are **tools for managing the repository**. - -Some examples of dependencies that make sense to install in the root are `turbo`, `husky`, or `stylelint`. - -Conversely, dependencies Auro components rely on should be installed in their respective packages, such as `Lit`, `Rollup`, or other `auro-formkit` dependencies. - \ No newline at end of file +### Bundled assets + + + diff --git a/components/combobox/demo/api.min.js b/components/combobox/demo/api.min.js index 0daad875..f6f77186 100644 --- a/components/combobox/demo/api.min.js +++ b/components/combobox/demo/api.min.js @@ -2887,7 +2887,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 { var iconVersion$2 = '6.1.1'; -var styleCss$1$2 = i$3$1`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1$2 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]),:host([fluid=true]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1$2 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; @@ -2996,6 +2996,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } disabled - If declared, the dropdown is not interactive. * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method. * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. + * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width. * @attr { Boolean } inset - If declared, will apply padding around trigger slot content. * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots. @@ -3104,6 +3105,10 @@ class AuroDropdown extends r$5 { type: Boolean, reflect: true }, + fluid: { + type: Boolean, + reflect: true, + }, focusShow: { type: Boolean, reflect: true @@ -7921,6 +7926,7 @@ class AuroCombobox extends r$6 { <${this.dropdownTag} for="dropdownMenu" + fluid bordered rounded matchWidth diff --git a/components/combobox/demo/index.min.js b/components/combobox/demo/index.min.js index 35fc4bd8..14d99962 100644 --- a/components/combobox/demo/index.min.js +++ b/components/combobox/demo/index.min.js @@ -2791,7 +2791,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 { var iconVersion$2 = '6.1.1'; -var styleCss$1$2 = i$3$1`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1$2 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]),:host([fluid=true]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1$2 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; @@ -2900,6 +2900,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } disabled - If declared, the dropdown is not interactive. * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method. * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. + * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width. * @attr { Boolean } inset - If declared, will apply padding around trigger slot content. * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots. @@ -3008,6 +3009,10 @@ class AuroDropdown extends r$5 { type: Boolean, reflect: true }, + fluid: { + type: Boolean, + reflect: true, + }, focusShow: { type: Boolean, reflect: true @@ -7825,6 +7830,7 @@ class AuroCombobox extends r$6 { <${this.dropdownTag} for="dropdownMenu" + fluid bordered rounded matchWidth diff --git a/components/combobox/src/auro-combobox.js b/components/combobox/src/auro-combobox.js index 6dd4c91d..8690b469 100644 --- a/components/combobox/src/auro-combobox.js +++ b/components/combobox/src/auro-combobox.js @@ -638,6 +638,7 @@ export class AuroCombobox extends LitElement { <${this.dropdownTag} for="dropdownMenu" + fluid bordered rounded matchWidth diff --git a/components/datepicker/demo/api.min.js b/components/datepicker/demo/api.min.js index f1fd97e8..89bc7c28 100644 --- a/components/datepicker/demo/api.min.js +++ b/components/datepicker/demo/api.min.js @@ -13066,7 +13066,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 { var iconVersion$1 = '6.1.1'; -var styleCss$1$1 = i$3$1`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1$1 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]),:host([fluid=true]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1$1 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; @@ -13175,6 +13175,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } disabled - If declared, the dropdown is not interactive. * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method. * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. + * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width. * @attr { Boolean } inset - If declared, will apply padding around trigger slot content. * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots. @@ -13283,6 +13284,10 @@ class AuroDropdown extends r$5 { type: Boolean, reflect: true }, + fluid: { + type: Boolean, + reflect: true, + }, focusShow: { type: Boolean, reflect: true @@ -18343,6 +18348,7 @@ class AuroDatePicker extends r$7 {
<${this.dropdownTag} for="dropdownMenu" + fluid bordered rounded ?disabled="${this.disabled}" diff --git a/components/datepicker/demo/index.min.js b/components/datepicker/demo/index.min.js index 06e2c4a8..d71d50a6 100644 --- a/components/datepicker/demo/index.min.js +++ b/components/datepicker/demo/index.min.js @@ -12814,7 +12814,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 { var iconVersion$1 = '6.1.1'; -var styleCss$1$1 = i$3$1`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1$1 = i$3$1`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]),:host([fluid=true]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1$1 = i$3$1`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; @@ -12923,6 +12923,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } disabled - If declared, the dropdown is not interactive. * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method. * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. + * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width. * @attr { Boolean } inset - If declared, will apply padding around trigger slot content. * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots. @@ -13031,6 +13032,10 @@ class AuroDropdown extends r$5 { type: Boolean, reflect: true }, + fluid: { + type: Boolean, + reflect: true, + }, focusShow: { type: Boolean, reflect: true @@ -18091,6 +18096,7 @@ class AuroDatePicker extends r$7 {
<${this.dropdownTag} for="dropdownMenu" + fluid bordered rounded ?disabled="${this.disabled}" diff --git a/components/datepicker/src/auro-datepicker.js b/components/datepicker/src/auro-datepicker.js index 9d43dd37..f920926f 100644 --- a/components/datepicker/src/auro-datepicker.js +++ b/components/datepicker/src/auro-datepicker.js @@ -892,6 +892,7 @@ export class AuroDatePicker extends LitElement {
<${this.dropdownTag} for="dropdownMenu" + fluid bordered rounded ?disabled="${this.disabled}" diff --git a/components/dropdown/apiExamples/commonMatchWidth.html b/components/dropdown/apiExamples/commonMatchWidth.html index 4c4cd894..561f6b35 100644 --- a/components/dropdown/apiExamples/commonMatchWidth.html +++ b/components/dropdown/apiExamples/commonMatchWidth.html @@ -1,4 +1,4 @@ - +
Lorem ipsum solar
diff --git a/components/dropdown/apiExamples/inline.html b/components/dropdown/apiExamples/inline.html new file mode 100644 index 00000000..5d7c5f5d --- /dev/null +++ b/components/dropdown/apiExamples/inline.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + + +
Icon OnlyText OnlyText with Icon
+ + Icon Only Dropdown +
+ +
+ + 		+ + Text Only Dropdown +
+ Trigger Text +
+ + 		+ + Icon and Text Dropdown +
+
+ Trigger Text + +
+
+ +
diff --git a/components/dropdown/apiExamples/programmaticallyHide.html b/components/dropdown/apiExamples/programmaticallyHide.html index d273455f..3d092cb8 100644 --- a/components/dropdown/apiExamples/programmaticallyHide.html +++ b/components/dropdown/apiExamples/programmaticallyHide.html @@ -1,4 +1,4 @@ - +

Lorem ipsum solar

diff --git a/components/dropdown/apiExamples/programmaticallyShow.html b/components/dropdown/apiExamples/programmaticallyShow.html index 260b45af..f7f46d1e 100644 --- a/components/dropdown/apiExamples/programmaticallyShow.html +++ b/components/dropdown/apiExamples/programmaticallyShow.html @@ -2,7 +2,7 @@ Enter a value to show the dropdown - +

Lorem ipsum solar

diff --git a/components/dropdown/demo/api.html b/components/dropdown/demo/api.html index 3856499f..c47d7ce8 100644 --- a/components/dropdown/demo/api.html +++ b/components/dropdown/demo/api.html @@ -49,5 +49,7 @@ + + diff --git a/components/dropdown/demo/api.md b/components/dropdown/demo/api.md index 66fd9e3e..b5307614 100644 --- a/components/dropdown/demo/api.md +++ b/components/dropdown/demo/api.md @@ -18,6 +18,7 @@ | [common](#common) | `common` | ` Boolean ` | | If declared, the dropdown will be styled with the common theme. | | [disabled](#disabled) | `disabled` | ` Boolean ` | | If declared, the dropdown is not interactive. | | [error](#error) | `error` | ` Boolean ` | | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. | +| [fluid](#fluid) | `fluid` | `Boolean` | | Alters the shape of the button to be full width of its parent container | | [focusShow](#focusShow) | `focusShow` | ` Boolean ` | | if declared, the the bib will display when focus is applied to the trigger. | | [hoverToggle](#hoverToggle) | `hoverToggle` | ` Boolean ` | | if declared, the trigger will toggle the big on mouseover/mouseout. | | [inset](#inset) | `inset` | ` Boolean ` | | If declared, will apply padding around trigger slot content. | @@ -852,7 +853,7 @@ The `show` method may also be called from anywhere in your code by executing `do Enter a value to show the dropdown - +

Lorem ipsum solar

@@ -869,7 +870,7 @@ The `show` method may also be called from anywhere in your code by executing `do Enter a value to show the dropdown - +

Lorem ipsum solar

@@ -904,7 +905,7 @@ This example demonstrations collapsing the dropdown by clicking a button within
- +

Lorem ipsum solar

@@ -924,7 +925,7 @@ This example demonstrations collapsing the dropdown by clicking a button within ```html - +

Lorem ipsum solar

diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js index 2c94277d..1038857a 100644 --- a/components/dropdown/demo/api.min.js +++ b/components/dropdown/demo/api.min.js @@ -2415,7 +2415,7 @@ class AuroIcon extends BaseIcon { var iconVersion = '6.1.1'; -var styleCss$1 = i$3`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]),:host([fluid=true]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; @@ -2524,6 +2524,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } disabled - If declared, the dropdown is not interactive. * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method. * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. + * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width. * @attr { Boolean } inset - If declared, will apply padding around trigger slot content. * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots. @@ -2632,6 +2633,10 @@ class AuroDropdown extends r { type: Boolean, reflect: true }, + fluid: { + type: Boolean, + reflect: true, + }, focusShow: { type: Boolean, reflect: true diff --git a/components/dropdown/demo/index.html b/components/dropdown/demo/index.html index 8e514bfa..465d3193 100644 --- a/components/dropdown/demo/index.html +++ b/components/dropdown/demo/index.html @@ -46,6 +46,7 @@ initExamples(); + diff --git a/components/dropdown/demo/index.md b/components/dropdown/demo/index.md index 095bd162..781b02df 100644 --- a/components/dropdown/demo/index.md +++ b/components/dropdown/demo/index.md @@ -85,57 +85,6 @@ This first common example uses the default `auro-dropdown` element with the attr -## Common use with aria-labelledby - -This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `aria-labelledby` attribute to identify the element that labels the element it is applied to. - -
- - -

The element is labelled by content external to the element.

- -
- Lorem ipsum solar -
- - Dismiss Dropdown - -
- - Help text - -
- Trigger -
- - -
- - See code - - - -```html -

The element is labelled by content external to the element.

- -
- Lorem ipsum solar -
- - Dismiss Dropdown - -
- - Help text - -
- Trigger -
- -``` - - - ## Common use using the label content slot This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `slot` content container to define a string value that labels the interactive element. @@ -243,7 +192,7 @@ This common example uses the default `auro-dropdown` element with the attributes
- +
Lorem ipsum solar
@@ -266,7 +215,7 @@ This common example uses the default `auro-dropdown` element with the attributes ```html - +
Lorem ipsum solar
@@ -285,6 +234,101 @@ This common example uses the default `auro-dropdown` element with the attributes +## Common use with its width matching the trigger + +To make the dropdown to be just big as the trigger's content, style the `auro-dropdown` width `display: inline-block`. + +
+ + + + + + + + + + + + + + + +
Icon OnlyText OnlyText with Icon
+ + Icon Only Dropdown +
+ +
+ + 		+ + Text Only Dropdown +
+ Trigger Text +
+ + 		+ + Icon and Text Dropdown +
+
+ Trigger Text + +
+
+ +
+ +
+ + See code + + + +```html + + + + + + + + + + + + + +
Icon OnlyText OnlyText with Icon
+ + Icon Only Dropdown +
+ +
+ + 		+ + Text Only Dropdown +
+ Trigger Text +
+ + 		+ + Icon and Text Dropdown +
+
+ Trigger Text + +
+
+ +
+``` + + + ## Supported standard and accessible interactions The dropdown can be opened with the following actions: diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js index a817b5bb..81310694 100644 --- a/components/dropdown/demo/index.min.js +++ b/components/dropdown/demo/index.min.js @@ -2390,7 +2390,7 @@ class AuroIcon extends BaseIcon { var iconVersion = '6.1.1'; -var styleCss$1 = i$3`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]),:host([fluid=true]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; @@ -2499,6 +2499,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } disabled - If declared, the dropdown is not interactive. * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method. * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. + * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width. * @attr { Boolean } inset - If declared, will apply padding around trigger slot content. * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots. @@ -2607,6 +2608,10 @@ class AuroDropdown extends r { type: Boolean, reflect: true }, + fluid: { + type: Boolean, + reflect: true, + }, focusShow: { type: Boolean, reflect: true diff --git a/components/dropdown/docs/api.md b/components/dropdown/docs/api.md index 2f53a174..eeba6a9d 100644 --- a/components/dropdown/docs/api.md +++ b/components/dropdown/docs/api.md @@ -15,6 +15,7 @@ | `common` | `common` | ` Boolean ` | | If declared, the dropdown will be styled with the common theme. | | `disabled` | `disabled` | ` Boolean ` | | If declared, the dropdown is not interactive. | | `error` | `error` | ` Boolean ` | | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. | +| `fluid` | `fluid` | `Boolean` | | Alters the shape of the button to be full width of its parent container | | `focusShow` | `focusShow` | ` Boolean ` | | if declared, the the bib will display when focus is applied to the trigger. | | `hoverToggle` | `hoverToggle` | ` Boolean ` | | if declared, the trigger will toggle the big on mouseover/mouseout. | | `inset` | `inset` | ` Boolean ` | | If declared, will apply padding around trigger slot content. | diff --git a/components/dropdown/docs/partials/index.md b/components/dropdown/docs/partials/index.md index e9fa6d7d..91210ae7 100644 --- a/components/dropdown/docs/partials/index.md +++ b/components/dropdown/docs/partials/index.md @@ -41,23 +41,6 @@ This first common example uses the default `auro-dropdown` element with the attr -## Common use with aria-labelledby - -This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `aria-labelledby` attribute to identify the element that labels the element it is applied to. - -
- - -
- - See code - - - - - - - ## Common use using the label content slot This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `slot` content container to define a string value that labels the interactive element. @@ -106,6 +89,22 @@ This common example uses the default `auro-dropdown` element with the attributes +## Common use with its width matching the trigger + +To make the dropdown to be just big as the trigger's content, style the `auro-dropdown` width `display: inline-block`. + +
+ + +
+ + See code + + + + + + ## Supported standard and accessible interactions The dropdown can be opened with the following actions: diff --git a/components/dropdown/scripts/wca/auro-dropdown.js b/components/dropdown/scripts/wca/auro-dropdown.js index fe05e44d..5fb314fa 100644 --- a/components/dropdown/scripts/wca/auro-dropdown.js +++ b/components/dropdown/scripts/wca/auro-dropdown.js @@ -8,6 +8,7 @@ import { AuroDropdown } from '../../src/auro-dropdown.js'; * @attr { Boolean } disabled - If declared, the dropdown is not interactive. * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method. * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. + * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width. * @attr { Boolean } inset - If declared, will apply padding around trigger slot content. * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots. diff --git a/components/dropdown/src/auro-dropdown.js b/components/dropdown/src/auro-dropdown.js index d2b38acd..a92a1760 100644 --- a/components/dropdown/src/auro-dropdown.js +++ b/components/dropdown/src/auro-dropdown.js @@ -30,6 +30,7 @@ import './auro-dropdownBib.js'; * @attr { Boolean } disabled - If declared, the dropdown is not interactive. * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method. * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. + * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width. * @attr { Boolean } inset - If declared, will apply padding around trigger slot content. * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots. @@ -138,6 +139,10 @@ export class AuroDropdown extends LitElement { type: Boolean, reflect: true }, + fluid: { + type: Boolean, + reflect: true, + }, focusShow: { type: Boolean, reflect: true diff --git a/components/dropdown/src/styles/style.scss b/components/dropdown/src/styles/style.scss index 78c23eb4..dc221127 100644 --- a/components/dropdown/src/styles/style.scss +++ b/components/dropdown/src/styles/style.scss @@ -14,6 +14,13 @@ :host { position: relative; + display: inline-block; + max-width: 100%; +} + +:host([fluid]), +:host([fluid="true"]) { + display: block; } #bibSizer { diff --git a/components/select/demo/api.min.js b/components/select/demo/api.min.js index 79fca6b0..dc9f12b2 100644 --- a/components/select/demo/api.min.js +++ b/components/select/demo/api.min.js @@ -2827,7 +2827,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 { var iconVersion$1 = '6.1.1'; -var styleCss$1$1 = i$3`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]),:host([fluid=true]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; @@ -2936,6 +2936,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } disabled - If declared, the dropdown is not interactive. * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method. * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. + * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width. * @attr { Boolean } inset - If declared, will apply padding around trigger slot content. * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots. @@ -3044,6 +3045,10 @@ class AuroDropdown extends r { type: Boolean, reflect: true }, + fluid: { + type: Boolean, + reflect: true, + }, focusShow: { type: Boolean, reflect: true @@ -3758,6 +3763,7 @@ class AuroSelect extends r$4 { for="selectmenu" ?error="${this.validity !== undefined && this.validity !== 'valid'}" common + fluid ?matchWidth="${!this.flexMenuWidth}" chevron part="dropdown"> diff --git a/components/select/demo/index.min.js b/components/select/demo/index.min.js index 86a2dc49..81e78d0c 100644 --- a/components/select/demo/index.min.js +++ b/components/select/demo/index.min.js @@ -2768,7 +2768,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 { var iconVersion$1 = '6.1.1'; -var styleCss$1$1 = i$3`:host{position:relative}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; +var styleCss$1$1 = i$3`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]),:host([fluid=true]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);white-space:normal}.trigger{position:relative;display:flex;align-items:center;border-width:1px;border-style:solid}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}.helpText{margin-top:var(--ds-size-50, 0.25rem);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`; var colorCss$1$1 = i$3`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}.helpText{color:var(--ds-auro-dropdown-help-text-color)}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-help-text-color: var(--ds-color-text-error-default, #cc1816);--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:none}:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-border-color)}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`; @@ -2877,6 +2877,7 @@ if (!customElements.get("auro-dropdownbib")) { * @attr { Boolean } disabled - If declared, the dropdown is not interactive. * @attr { Boolean } disableEventShow - If declared, the dropdown will only show by calling the API .show() public method. * @attr { Boolean } error - If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. + * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container * @attr { Boolean } matchWidth - If declared, the popover and trigger will be set to the same width. * @attr { Boolean } inset - If declared, will apply padding around trigger slot content. * @attr { Boolean } rounded - If declared, will apply border-radius to trigger and default slots. @@ -2985,6 +2986,10 @@ class AuroDropdown extends r { type: Boolean, reflect: true }, + fluid: { + type: Boolean, + reflect: true, + }, focusShow: { type: Boolean, reflect: true @@ -3699,6 +3704,7 @@ class AuroSelect extends r$4 { for="selectmenu" ?error="${this.validity !== undefined && this.validity !== 'valid'}" common + fluid ?matchWidth="${!this.flexMenuWidth}" chevron part="dropdown"> diff --git a/components/select/src/auro-select.js b/components/select/src/auro-select.js index 6a698ba6..85e11bd5 100644 --- a/components/select/src/auro-select.js +++ b/components/select/src/auro-select.js @@ -508,6 +508,7 @@ export class AuroSelect extends LitElement { for="selectmenu" ?error="${this.validity !== undefined && this.validity !== 'valid'}" common + fluid ?matchWidth="${!this.flexMenuWidth}" chevron part="dropdown">