diff --git a/.circleci/config.yml b/.circleci/config.yml index cd4f66d3eb0..b40c30dddf0 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -10,7 +10,7 @@ executors: parameters: current_golden_images_hash: type: string - default: 272df076898ee35337c14698a17497e9ecc1644b + default: d5cfb5a524e64e6feeaa6af58dc8423dc80c0b29 wireit_cache_name: type: string default: wireit diff --git a/.vscode/settings.json b/.vscode/settings.json index 7fe963abab7..7fea7d4d062 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -11,5 +11,6 @@ "tools/**/*.dev.js": { "when": "$(basename).js" }, "tools/**/*.d.ts": { "when": "$(basename).ts" }, "**/*.test-vrt.ts": true - } + }, + "typescript.tsdk": "node_modules/typescript/lib" } diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b6d5212588..453988219cf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,35 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.34.0](https://github.com/adobe/spectrum-web-components/compare/v0.33.2...v0.34.0) (2023-07-11) + +### Bug Fixes + +- **action-button,action-menu,picker,split-button:** expand and update application of aria-\* attributes ([52c0156](https://github.com/adobe/spectrum-web-components/commit/52c015636d42f2baf1524446a0db9d5e5cfeb689)) +- **action-group:** ensure Action Button clicks are attributed to the right element ([#3292](https://github.com/adobe/spectrum-web-components/issues/3292)) ([ddccab7](https://github.com/adobe/spectrum-web-components/commit/ddccab766498a6da6ca29d9bbe9cebd7924e81e0)) +- added role for href button ([5a4ad98](https://github.com/adobe/spectrum-web-components/commit/5a4ad98afa69669a8a4fb2a88d82a837c0c40c55)) +- **color-area,color-slider:** color-area labeling, RTL support, vertical slider orientation([#3315](https://github.com/adobe/spectrum-web-components/issues/3315)) ([ca2acda](https://github.com/adobe/spectrum-web-components/commit/ca2acdafe004cb962c00ebb7f79c5b6061dc6843)), closes [#3313](https://github.com/adobe/spectrum-web-components/issues/3313) +- **color-loupe:** hide svg from screen readers ([#3318](https://github.com/adobe/spectrum-web-components/issues/3318)) ([01e75b7](https://github.com/adobe/spectrum-web-components/commit/01e75b7f0dbf1096976c290ad360534847781fee)) +- **color-slider,color-wheel:** fix focused state [#3278](https://github.com/adobe/spectrum-web-components/issues/3278) ([96b83f7](https://github.com/adobe/spectrum-web-components/commit/96b83f7eb6ead1de2b30f1483478a2e5d6195349)) +- **color-slider:** announce new value on change after keydown ([#3304](https://github.com/adobe/spectrum-web-components/issues/3304)) ([d70d0ae](https://github.com/adobe/spectrum-web-components/commit/d70d0aefdc03524192c3b8a0d6cb901cf49d37a9)), closes [#3303](https://github.com/adobe/spectrum-web-components/issues/3303) +- **number-field,search,textfield:** add t-shirt sizes ([fda8f96](https://github.com/adobe/spectrum-web-components/commit/fda8f96b71b1447a8281f73d885c1c33ae74cfec)) +- **picker:** correct label application for screen readers ([8ce0cb0](https://github.com/adobe/spectrum-web-components/commit/8ce0cb0b76fcb76af34fdd3228ae268509f80ee0)) +- **radio:** fix radio documentation usage of sp-field-label[for] and sp-radio-group[id] ([60f54fb](https://github.com/adobe/spectrum-web-components/commit/60f54fb2c5f656cc775d52637e1ef95bde5949f5)) +- **sidenav:** express hierarchy using list and listitem ([f9019d7](https://github.com/adobe/spectrum-web-components/commit/f9019d7f5a37c81b61395d5329b251317497a685)), closes [#3348](https://github.com/adobe/spectrum-web-components/issues/3348) [#3348](https://github.com/adobe/spectrum-web-components/issues/3348) +- **slider:** [#3340](https://github.com/adobe/spectrum-web-components/issues/3340) fix visual regression ([88e0bda](https://github.com/adobe/spectrum-web-components/commit/88e0bda41df9f1ebb21debf97db05b0fd144deb7)) +- **slider:** slider input aria-valuetext omits formatOptions for unit [#3340](https://github.com/adobe/spectrum-web-components/issues/3340) ([d5ff7e6](https://github.com/adobe/spectrum-web-components/commit/d5ff7e6e0196580f25941caa1a304557cb0f5088)) +- **swatch:** mixed-value state must be conveyed to screen readers using ARIA ([#3330](https://github.com/adobe/spectrum-web-components/issues/3330)) ([7711264](https://github.com/adobe/spectrum-web-components/commit/7711264850f54794fc2fcc343a81c5ff1f64c907)) +- **table:** include all dependencies, @lit-labs/observers was missing ([98d0370](https://github.com/adobe/spectrum-web-components/commit/98d03701b05101bae4a9e1f4d554bf0648979884)) +- text fixes ([0121fd6](https://github.com/adobe/spectrum-web-components/commit/0121fd6e25755881f5f00c8b7cd989fc47e201d8)) +- **textfield:** add rows attribute ([#3356](https://github.com/adobe/spectrum-web-components/issues/3356)) ([1ee1c37](https://github.com/adobe/spectrum-web-components/commit/1ee1c37f219c82fd74ca1b89941d4f59ccfd2785)) +- **vrt-compare:** updating the readme about vrt tests ([#3380](https://github.com/adobe/spectrum-web-components/issues/3380)) ([8eb28c8](https://github.com/adobe/spectrum-web-components/commit/8eb28c866c960b2cf27930cc1eab8f96e2c057d9)) + +### Features + +- **accordion:** core token migration ([#3300](https://github.com/adobe/spectrum-web-components/issues/3300)) ([9650b71](https://github.com/adobe/spectrum-web-components/commit/9650b71dd7cf7b93c351ac7b369aaf424c82f47d)) +- **card:** use core tokens ([9cccd26](https://github.com/adobe/spectrum-web-components/commit/9cccd26f00f688cbe1477dc7a9ce01542b179737)) +- **tabs,top-nav:** use Core Tokens ([c6ba355](https://github.com/adobe/spectrum-web-components/commit/c6ba355c2160d1a8bda1618b8a9c28213194c7c5)) + ## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14) **Note:** Version bump only for package @adobe/spectrum-web-components diff --git a/README.md b/README.md index 300da8b2f00..38e31e84869 100644 --- a/README.md +++ b/README.md @@ -125,9 +125,18 @@ To create a local baseline for comparing your changes to later in the developmen yarn test:visual:clean # start with a clean slate # yarn test:visual:clean:baseline # removes only baseline images # yarn test:visual:clean:current # removes only images updated in the most recent test pass -yarn test:visual vrt-light-medium-ltr # vrt-${color}-${scale}-${direction} to access all theme options -# ... -yarn test:visual vrt-light-medium-ltr # repeat the same as above for a clean comparison + +# To enable comparison, it is generally recommended to generate baselines on the main branch. +yarn test:visual vrt-${component name} --update-visual-baseline +eg: yarn test:visual vrt-accordion --update-visual-baseline + +# Running the tests on the local branch +yarn test:visual vrt-${component name} +eg: yarn test:visual vrt-accordion + +# Running the tests of light medium ltr +yarn test:visual vrt-${component name}-single +eg: yarn test:visual vrt-accordion-single ``` #### Screenshot coverage diff --git a/lerna.json b/lerna.json index cee69f37435..a5a1156e326 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "packages": ["packages/*", "projects/*", "tools/*"], - "version": "0.33.2", + "version": "0.34.0", "granularPathspec": false, "npmClient": "yarn", "useWorkspaces": true, diff --git a/linters/stylelint-header/yarn.lock b/linters/stylelint-header/yarn.lock index 88e0fcadb67..594af82157e 100644 --- a/linters/stylelint-header/yarn.lock +++ b/linters/stylelint-header/yarn.lock @@ -2542,6 +2542,11 @@ punycode@^2.1.0, punycode@^2.1.1: resolved "https://artifactory.corp.adobe.com/artifactory/api/npm/npm-unified-experience-components-release/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec" integrity sha1-tYsBCsQMIsVldhbI0sLALHv0eew= +querystringify@^2.1.1: + version "2.2.0" + resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6" + integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ== + queue-microtask@^1.2.2: version "1.2.3" resolved "https://artifactory.corp.adobe.com/artifactory/api/npm/npm-unified-experience-components-release/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243" @@ -2594,6 +2599,11 @@ require-from-string@^2.0.2: resolved "https://artifactory.corp.adobe.com/artifactory/api/npm/npm-unified-experience-components-release/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909" integrity sha1-iaf92TgmEmcxjq/hT5wy5ZjDaQk= +requires-port@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" + integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ== + resolve-cwd@^3.0.0: version "3.0.0" resolved "https://artifactory.corp.adobe.com/artifactory/api/npm/npm-unified-experience-components-release/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d" @@ -2662,19 +2672,19 @@ saxes@^5.0.1: xmlchars "^2.2.0" "semver@2 || 3 || 4 || 5": - version "5.7.1" - resolved "https://artifactory.corp.adobe.com/artifactory/api/npm/npm-unified-experience-components-release/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" - integrity sha1-qVT5Ma66UI0we78Gnv8MAclhFvc= + version "5.7.2" + resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8" + integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g== semver@^6.0.0, semver@^6.3.0: - version "6.3.0" - resolved "https://artifactory.corp.adobe.com/artifactory/api/npm/npm-unified-experience-components-release/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" - integrity sha1-7gpkyK9ejO6mdoexM3YeG+y9HT0= + version "6.3.1" + resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4" + integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA== semver@^7.3.2, semver@^7.3.4: - version "7.3.7" - resolved "https://artifactory.corp.adobe.com/artifactory/api/npm/npm-unified-experience-components-release/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f" - integrity sha1-EsW2Sa/b+QSXB3luIqQCiBTOUj8= + version "7.5.4" + resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e" + integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA== dependencies: lru-cache "^6.0.0" @@ -2983,13 +2993,14 @@ to-regex-range@^5.0.1: is-number "^7.0.0" tough-cookie@^4.0.0: - version "4.0.0" - resolved "https://artifactory.corp.adobe.com/artifactory/api/npm/npm-unified-experience-components-release/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4" - integrity sha1-2CIjTuyogvmR8PkIgkrSYi3b7OQ= + version "4.1.3" + resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf" + integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw== dependencies: psl "^1.1.33" punycode "^2.1.1" - universalify "^0.1.2" + universalify "^0.2.0" + url-parse "^1.5.3" tr46@^2.1.0: version "2.1.0" @@ -3042,10 +3053,10 @@ typedarray-to-buffer@^3.1.5: dependencies: is-typedarray "^1.0.0" -universalify@^0.1.2: - version "0.1.2" - resolved "https://artifactory.corp.adobe.com/artifactory/api/npm/npm-unified-experience-components-release/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66" - integrity sha1-tkb2m+OULavOzJ1mOcgNwQXvqmY= +universalify@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0" + integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg== uri-js@^4.2.2: version "4.4.1" @@ -3054,6 +3065,14 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +url-parse@^1.5.3: + version "1.5.10" + resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1" + integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ== + dependencies: + querystringify "^2.1.1" + requires-port "^1.0.0" + util-deprecate@^1.0.2: version "1.0.2" resolved "https://artifactory.corp.adobe.com/artifactory/api/npm/npm-unified-experience-components-release/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" diff --git a/package.json b/package.json index 5291a7073c0..7855f56370a 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "@netlify/build": "^29.1.0", "@open-wc/dev-server-hmr": "^0.1.3", "@open-wc/testing": "^3.1.7", - "@rollup/plugin-commonjs": "^24.0.1", + "@rollup/plugin-commonjs": "^25.0.2", "@rollup/plugin-json": "^6.0.0", "@rollup/plugin-node-resolve": "^15.0.1", "@sindresorhus/slugify": "^2.1.1", @@ -130,13 +130,13 @@ "alex": "^10.0.0", "cem-plugin-module-file-extensions": "^0.0.5", "chalk": "^5.0.1", - "chromedriver": "^112.0.1", + "chromedriver": "^114.0.2", "common-tags": "^1.8.2", "cssnano": "^5.0.15", "custom-elements-manifest": "^2.0.0", "debounce": "^1.2.1", "deepmerge": "^4.2.2", - "esbuild": "^0.17.3", + "esbuild": "^0.17.19", "eslint": "^8.23.0", "eslint-config-prettier": "^8.5.0", "eslint-formatter-pretty": "^5.0.0", @@ -149,6 +149,7 @@ "fs-extra": "^10.0.0", "geckodriver": "4.0.3", "gh-pages": "^4.0.0", + "glob": "^10.3.0", "gunzip-maybe": "^1.4.2", "husky": "^8.0.1", "latest-version": "^7.0.0", @@ -164,7 +165,7 @@ "patch-package": "^6.4.7", "playwright": "1.30.0", "postcss": "^8.4.14", - "postcss-custom-properties": "^12.1.11", + "postcss-custom-properties": "^13.2.0", "postcss-focus-visible": "^7.1.0", "postcss-import": "^15.1.0", "postcss-mixins": "^9.0.4", diff --git a/packages/accordion/CHANGELOG.md b/packages/accordion/CHANGELOG.md index b861568650e..46b78f0f139 100644 --- a/packages/accordion/CHANGELOG.md +++ b/packages/accordion/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.34.0](https://github.com/adobe/spectrum-web-components/compare/v0.33.2...v0.34.0) (2023-07-11) + +### Features + +- **accordion:** core token migration ([#3300](https://github.com/adobe/spectrum-web-components/issues/3300)) ([9650b71](https://github.com/adobe/spectrum-web-components/commit/9650b71dd7cf7b93c351ac7b369aaf424c82f47d)) + ## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14) **Note:** Version bump only for package @spectrum-web-components/accordion diff --git a/packages/accordion/README.md b/packages/accordion/README.md index b8098c83c59..9beb9c4d17b 100644 --- a/packages/accordion/README.md +++ b/packages/accordion/README.md @@ -74,3 +74,274 @@ import { Accordion, AccordionItem } from '@spectrum-web-components/accordion'; ``` + +## Sizes + + +Small + + +```html + + +
Item 1
+
+ +
Item 2
+
+ +
Item 3
+
+ +
Item 4
+
+
+``` + +
+Medium + + +```html + + +
Item 1
+
+ +
Item 2
+
+ +
Item 3
+
+ +
Item 4
+
+
+``` + +
+Large + + +```html + + +
Item 1
+
+ +
Item 2
+
+ +
Item 3
+
+ +
Item 4
+
+
+``` + +
+Extra Large + + +```html + + +
Item 1
+
+ +
Item 2
+
+ +
Item 3
+
+ +
Item 4
+
+
+``` + +
+
+ +## Density + +The `density` property, when applied, accepts the values of `compact` or `spacious`. + +### Compact + + +Small + + +```html + + +
Item 1
+
+ +
Item 2
+
+ +
Item 3
+
+ +
Item 4
+
+
+``` + +
+Medium + + +```html + + +
Item 1
+
+ +
Item 2
+
+ +
Item 3
+
+ +
Item 4
+
+
+``` + +
+Large + + +```html + + +
Item 1
+
+ +
Item 2
+
+ +
Item 3
+
+ +
Item 4
+
+
+``` + +
+Extra Large + + +```html + + +
Item 1
+
+ +
Item 2
+
+ +
Item 3
+
+ +
Item 4
+
+
+``` + +
+
+ +### Spacious + + +Small + + +```html + + +
Item 1
+
+ +
Item 2
+
+ +
Item 3
+
+ +
Item 4
+
+
+``` + +
+Medium + + +```html + + +
Item 1
+
+ +
Item 2
+
+ +
Item 3
+
+ +
Item 4
+
+
+``` + +
+Large + + +```html + + +
Item 1
+
+ +
Item 2
+
+ +
Item 3
+
+ +
Item 4
+
+
+``` + +
+Extra Large + + +```html + + +
Item 1
+
+ +
Item 2
+
+ +
Item 3
+
+ +
Item 4
+
+
+``` + +
+
diff --git a/packages/accordion/package.json b/packages/accordion/package.json index 67e143ffae4..7435cde90e1 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-web-components/accordion", - "version": "0.33.2", + "version": "0.34.0", "publishConfig": { "access": "public" }, @@ -66,14 +66,14 @@ "lit-html" ], "dependencies": { - "@spectrum-web-components/base": "^0.33.2", - "@spectrum-web-components/icon": "^0.33.2", - "@spectrum-web-components/icons-ui": "^0.33.2", - "@spectrum-web-components/reactive-controllers": "^0.33.2", - "@spectrum-web-components/shared": "^0.33.2" + "@spectrum-web-components/base": "^0.34.0", + "@spectrum-web-components/icon": "^0.34.0", + "@spectrum-web-components/icons-ui": "^0.34.0", + "@spectrum-web-components/reactive-controllers": "^0.34.0", + "@spectrum-web-components/shared": "^0.34.0" }, "devDependencies": { - "@spectrum-css/accordion": "^3.0.44" + "@spectrum-css/accordion": "^4.0.3" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/accordion/src/Accordion.ts b/packages/accordion/src/Accordion.ts index 2e7e5e9b872..fe8b1bd1962 100644 --- a/packages/accordion/src/Accordion.ts +++ b/packages/accordion/src/Accordion.ts @@ -13,6 +13,8 @@ governing permissions and limitations under the License. import { CSSResultArray, html, + PropertyValues, + SizedMixin, SpectrumElement, TemplateResult, } from '@spectrum-web-components/base'; @@ -30,7 +32,9 @@ import styles from './accordion.css.js'; * @element sp-accordion * @slot - The sp-accordion-item children to display. */ -export class Accordion extends SpectrumElement { +export class Accordion extends SizedMixin(SpectrumElement, { + noDefaultSize: true, +}) { public static override get styles(): CSSResultArray { return [styles]; } @@ -41,6 +45,12 @@ export class Accordion extends SpectrumElement { @property({ type: Boolean, reflect: true, attribute: 'allow-multiple' }) public allowMultiple = false; + /** + * Sets the spacing between the content to borders of an accordion item + */ + @property({ type: String, reflect: true }) + public density?: 'compact' | 'spacious'; + @queryAssignedNodes() private defaultNodes!: NodeListOf; @@ -85,6 +95,21 @@ export class Accordion extends SpectrumElement { private handleSlotchange(): void { this.focusGroupController.clearElementCache(); + this.items.forEach((item) => { + item.size = this.size; + }); + } + + protected override updated(changed: PropertyValues): void { + super.updated(changed); + if ( + changed.has('size') && + (!!changed.get('size') || this.size !== 'm') + ) { + this.items.forEach((item) => { + item.size = this.size; + }); + } } protected override render(): TemplateResult { diff --git a/packages/accordion/src/AccordionItem.ts b/packages/accordion/src/AccordionItem.ts index 56c6246e694..4c68ce196dc 100644 --- a/packages/accordion/src/AccordionItem.ts +++ b/packages/accordion/src/AccordionItem.ts @@ -14,21 +14,60 @@ import { CSSResultArray, html, PropertyValues, + SizedMixin, TemplateResult, } from '@spectrum-web-components/base'; import { property } from '@spectrum-web-components/base/src/decorators.js'; import { Focusable } from '@spectrum-web-components/shared/src/focusable.js'; +import { when } from '@spectrum-web-components/base/src/directives.js'; import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js'; import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js'; import styles from './accordion-item.css.js'; +const chevronIcon: Record TemplateResult> = { + s: () => html` + + + + `, + m: () => html` + + + + `, + l: () => html` + + + + `, + xl: () => html` + + + + `, +}; + /** * @element sp-accordion-item * @slot - The content of the item that is hidden when the item is not open * @fires sp-accordion-item-toggle - Announce that an accordion item has been toggled while allowing the event to be cancelled. */ -export class AccordionItem extends Focusable { +export class AccordionItem extends SizedMixin(Focusable, { + noDefaultSize: true, +}) { public static override get styles(): CSSResultArray { return [styles, chevronIconStyles]; } @@ -68,9 +107,14 @@ export class AccordionItem extends Focusable { } } + protected renderChevronIcon = (): TemplateResult => { + return chevronIcon[this.size || 'm'](); + }; + protected override render(): TemplateResult { return html`

+ ${when(this.size, this.renderChevronIcon)} -

diff --git a/packages/accordion/src/accordion-item.css b/packages/accordion/src/accordion-item.css index 06f81ff0146..5a875e88444 100644 --- a/packages/accordion/src/accordion-item.css +++ b/packages/accordion/src/accordion-item.css @@ -13,7 +13,7 @@ governing permissions and limitations under the License. @import './spectrum-accordion-item.css'; :host { - --spectrum-accordion-item-header-height: 46px; + display: block; } #heading { @@ -22,24 +22,9 @@ governing permissions and limitations under the License. position: relative; } -#header { - /* .spectrum-Accordion-itemHeader */ - min-height: calc( - 100% - - var( - --spectrum-accordion-item-border-size, - var(--spectrum-alias-border-size-thin) - ) - ); -} - -:host([open]) > #header:after { - /* .spectrum-Accordion-item.is-open>.spectrum-Accordion-itemHeader:after */ - height: calc( - 100% - - var( - --spectrum-accordion-item-border-size, - var(--spectrum-alias-border-size-thin) - ) +:host([disabled]) #heading .indicator { + color: var( + --mod-accordion-item-header-disabled-color, + var(--spectrum-accordion-item-header-disabled-color) ); } diff --git a/packages/accordion/src/spectrum-accordion-item.css b/packages/accordion/src/spectrum-accordion-item.css index a376507f94c..aaee82b541e 100644 --- a/packages/accordion/src/spectrum-accordion-item.css +++ b/packages/accordion/src/spectrum-accordion-item.css @@ -11,280 +11,301 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ -:host([dir='ltr']) .indicator { - left: var( - --spectrum-accordion-item-padding-x, - var(--spectrum-global-dimension-size-225) - ); -} -:host([dir='rtl']) .indicator { - right: var( - --spectrum-accordion-item-padding-x, - var(--spectrum-global-dimension-size-225) +:host { + border-block-end: 1px solid #0000; + border-color: var( + --mod-accordion-divider-color, + var(--spectrum-accordion-divider-color) ); - transform: matrix(-1, 0, 0, 1, 0, 0); -} -.indicator { - display: block; - position: absolute; - top: calc( - 50% - - var( - --spectrum-accordion-icon-height, - var(--spectrum-global-dimension-size-125) - ) / 2 + border-width: var( + --mod-accordion-divider-thickness, + var(--spectrum-divider-thickness-small) ); - transition: transform ease var(--spectrum-accordion-animation-duration); -} -:host { - border-bottom: var( - --spectrum-accordion-item-border-size, - var(--spectrum-alias-border-size-thin) - ) - solid transparent; - display: list-item; margin: 0; + min-block-size: var( + --mod-accordion-item-height, + var(--spectrum-accordion-item-height) + ); + min-inline-size: var( + --mod-accordion-item-width, + var(--spectrum-accordion-item-width) + ); position: relative; z-index: inherit; } -:host(:first-of-type) { - border-top: var( - --spectrum-accordion-item-border-size, - var(--spectrum-alias-border-size-thin) - ) - solid transparent; +:host(:first-child) { + border-block-start: 1px solid #0000; + border-color: var( + --mod-accordion-divider-color, + var(--spectrum-accordion-divider-color) + ); + border-width: var( + --mod-accordion-divider-thickness, + var(--spectrum-divider-thickness-small) + ); } #heading { box-sizing: border-box; margin: 0; position: relative; } -:host([dir='ltr']) #header { - padding-left: calc( - var( - --spectrum-accordion-item-padding-x, - var(--spectrum-global-dimension-size-225) - ) + - var( - --spectrum-accordion-icon-height, - var(--spectrum-global-dimension-size-125) - ) + - var( - --spectrum-accordion-icon-gap, - var(--spectrum-global-dimension-size-100) - ) + - var( - --spectrum-accordion-item-border-left-size, - var(--spectrum-alias-border-size-thick) - ) +.iconContainer { + align-items: center; + block-size: var( + --mod-accordion-disclosure-indicator-height, + var(--spectrum-accordion-disclosure-indicator-height) ); -} -:host([dir='rtl']) #header { - padding-right: calc( - var( - --spectrum-accordion-item-padding-x, - var(--spectrum-global-dimension-size-225) - ) + - var( - --spectrum-accordion-icon-height, - var(--spectrum-global-dimension-size-125) - ) + - var( - --spectrum-accordion-icon-gap, - var(--spectrum-global-dimension-size-100) - ) + - var( - --spectrum-accordion-item-border-left-size, - var(--spectrum-alias-border-size-thick) - ) + color: var( + --mod-accordion-item-header-color-default, + var(--spectrum-accordion-item-header-color-default) ); -} -:host([dir='ltr']) #header { - padding-right: var( - --spectrum-accordion-item-padding-x, - var(--spectrum-global-dimension-size-225) + display: flex; + inline-size: var( + --mod-accordion-disclosure-indicator-height, + var(--spectrum-accordion-disclosure-indicator-height) ); -} -:host([dir='rtl']) #header { - padding-left: var( - --spectrum-accordion-item-padding-x, - var(--spectrum-global-dimension-size-225) + inset-block-start: max( + 0px, + calc( + ( + var( + --mod-accordion-min-block-size, + var(--spectrum-accordion-min-block-size) + ) - + var( + --mod-accordion-disclosure-indicator-height, + var( + --spectrum-accordion-disclosure-indicator-height + ) + ) + ) / 2 + ) + ); + justify-content: center; + padding-inline-start: var( + --mod-accordion-edge-to-disclosure-indicator-space, + var(--spectrum-accordion-edge-to-disclosure-indicator-space) ); + position: absolute; } -:host([dir='ltr']) #header { - text-align: left; +:host([dir='rtl']) .iconContainer { + transform: scaleX(-1); } -:host([dir='rtl']) #header { - text-align: right; +#content { + color: var( + --mod-accordion-item-content-color, + var(--spectrum-accordion-item-content-color) + ); + display: none; + font-family: var( + --mod-accordion-item-content-font, + var(--spectrum-accordion-item-content-font) + ); + font-size: var( + --mod-accordion-item-content-font-size, + var(--spectrum-accordion-item-content-font-size) + ); + font-style: var( + --mod-accordion-item-content-font-style, + var(--spectrum-accordion-item-content-font-style) + ); + font-weight: var( + --mod-accordion-item-content-font-weight, + var(--spectrum-accordion-item-content-font-weight) + ); + line-height: var( + --mod-accordion-item-content-line-height, + var(--spectrum-accordion-item-content-line-height) + ); + padding-block: var( + --mod-accordion-item-content-area-top-to-content, + var(--spectrum-accordion-item-content-area-top-to-content) + ) + var( + --mod-accordion-item-content-area-bottom-to-content, + var(--spectrum-accordion-item-content-area-bottom-to-content) + ); + padding-inline: var( + --mod-accordion-component-edge-to-text, + var(--spectrum-accordion-component-edge-to-text) + ) + var( + --mod-accordion-component-edge-to-text, + var(--spectrum-accordion-component-edge-to-text) + ); } #header { align-items: center; appearance: none; - background-color: inherit; + background-color: var( + --mod-accordion-background-color-default, + var(--spectrum-accordion-background-color-default) + ); border: 0; box-sizing: border-box; + color: var( + --mod-accordion-item-header-color-default, + var(--spectrum-accordion-item-header-color-default) + ); cursor: pointer; display: flex; - font-family: inherit; + font-family: var( + --mod-accordion-item-header-font, + var(--spectrum-accordion-item-header-font) + ); font-size: var( - --spectrum-accordion-item-title-text-size, - var(--spectrum-global-dimension-font-size-50) + --mod-accordion-item-header-font-size, + var(--spectrum-accordion-item-header-font-size) ); - font-weight: 500; - justify-content: flex-start; - letter-spacing: calc( - var( - --spectrum-accordion-item-title-tracking, - var(--spectrum-global-font-letter-spacing-medium) - ) / 100 + font-style: var( + --mod-accordion-item-header-font-style, + var(--spectrum-accordion-item-header-font-style) ); + font-weight: var( + --mod-accordion-item-header-font-weight, + var(--spectrum-accordion-item-header-font-weight) + ); + inline-size: 100%; + justify-content: flex-start; line-height: var( - --spectrum-accordion-text-line-height, - var(--spectrum-alias-component-text-line-height) + --mod-accordion-item-header-line-height, + var(--spectrum-accordion-item-header-line-height) ); - margin: 0; - min-height: calc( - 100% - + min-block-size: var( + --mod-accordion-min-block-size, + var(--spectrum-accordion-min-block-size) + ); + padding-block: var( + --mod-accordion-item-header-top-to-text-space, + var(--spectrum-accordion-item-header-top-to-text-space) + ) + var( + --mod-accordion-item-header-bottom-to-text-space, + var(--spectrum-accordion-item-header-bottom-to-text-space) + ); + padding-inline-end: var( + --mod-accordion-edge-to-text-space, + var(--spectrum-accordion-edge-to-text-space) + ); + padding-inline-start: calc( + var( + --mod-accordion-disclosure-indicator-to-text-space, + var(--spectrum-accordion-disclosure-indicator-to-text-space) + ) + var( - --spectrum-accordion-item-border-size, - var(--spectrum-alias-border-size-thin) + --mod-accordion-disclosure-indicator-height, + var(--spectrum-accordion-disclosure-indicator-height) ) ); - padding-bottom: var(--spectrum-accordion-item-title-padding-y); - padding-top: var(--spectrum-accordion-item-title-padding-y); position: relative; + text-align: start; text-overflow: ellipsis; - text-transform: uppercase; - width: 100%; } #header:focus { outline: none; } -:host([dir='ltr']) #header:focus:after { - left: 0; -} -:host([dir='rtl']) #header:focus:after { - right: 0; -} #header:focus:after { - bottom: calc( - var( - --spectrum-accordion-item-border-size, - var(--spectrum-alias-border-size-thin) - ) * -1 - ); content: ''; + inset-inline-start: 0; position: absolute; - top: calc( - var( - --spectrum-accordion-item-border-size, - var(--spectrum-alias-border-size-thin) - ) * -1 - ); - width: var( - --spectrum-accordion-item-border-left-size, - var(--spectrum-alias-border-size-thick) - ); } -#content { - display: none; - padding-bottom: var( - --spectrum-accordion-item-content-padding, - var(--spectrum-global-dimension-size-200) - ); - padding-left: var( - --spectrum-accordion-item-content-padding, - var(--spectrum-global-dimension-size-200) +#header:hover { + background-color: var( + --mod-accordion-background-color-hover, + var(--spectrum-accordion-background-color-hover) ); - padding-right: var( - --spectrum-accordion-item-content-padding, - var(--spectrum-global-dimension-size-200) + color: var( + --mod-accordion-item-header-color-hover, + var(--spectrum-accordion-item-header-color-hover) ); - padding-top: 0; -} -:host([dir='ltr'][open]) > #heading > .indicator { - transform: rotate(90deg); -} -:host([dir='rtl'][open]) > #heading > .indicator { - transform: matrix(-1, 0, 0, 1, 0, 0) rotate(90deg); -} -:host([dir='ltr'][open]) > .indicator { - transform: rotate(90deg); } -:host([dir='rtl'][open]) > .indicator { - transform: matrix(-1, 0, 0, 1, 0, 0) rotate(90deg); -} -:host([open]) > #header:after { - height: calc( - 100% - - var( - --spectrum-accordion-item-border-size, - var(--spectrum-alias-border-size-thin) - ) +#header:hover + .iconContainer { + color: var( + --mod-accordion-item-header-color-hover, + var(--spectrum-accordion-item-header-color-hover) ); } -:host([open]) > #content { - display: block; -} -:host([disabled]) #header { - cursor: default; -} -:host { - border-color: var( - --spectrum-accordion-border-color, - var(--spectrum-global-color-gray-300) +#header.focus-visible { + background-color: var( + --mod-accordion-background-color-key-focus, + var(--spectrum-accordion-background-color-key-focus) ); -} -.indicator { - color: var( - --spectrum-accordion-icon-color, - var(--spectrum-global-color-gray-600) + border-radius: var( + --mod-accordion-corner-radius, + var(--spectrum-accordion-corner-radius) ); -} -#header { color: var( - --spectrum-accordion-text-color, - var(--spectrum-global-color-gray-700) + --mod-accordion-item-header-color-key-focus, + var(--spectrum-accordion-item-header-color-key-focus) + ); + outline: var( + --mod-accordion-focus-indicator-thickness, + var(--spectrum-accordion-focus-indicator-thickness) + ) + solid + var( + --mod-accordion-focus-indicator-color, + var(--spectrum-accordion-focus-indicator-color) + ); + outline-offset: calc( + var( + --mod-accordion-focus-indicator-gap, + var(--spectrum-accordion-focus-indicator-gap) + ) * -1 ); } -#header:hover { +#header:focus-visible { background-color: var( - --spectrum-accordion-item-background-color-hover, - var(--spectrum-global-color-gray-200) + --mod-accordion-background-color-key-focus, + var(--spectrum-accordion-background-color-key-focus) ); - color: var( - --spectrum-accordion-text-color-hover, - var(--spectrum-global-color-gray-900) + border-radius: var( + --mod-accordion-corner-radius, + var(--spectrum-accordion-corner-radius) ); -} -#header:hover + .indicator { color: var( - --spectrum-accordion-icon-color-hover, - var(--spectrum-alias-icon-color-hover) + --mod-accordion-item-header-color-key-focus, + var(--spectrum-accordion-item-header-color-key-focus) ); -} -#header.focus-visible:after { - background-color: var( - --spectrum-accordion-item-border-left-color-key-focus, - var(--spectrum-alias-border-color-key-focus) + outline: var( + --mod-accordion-focus-indicator-thickness, + var(--spectrum-accordion-focus-indicator-thickness) + ) + solid + var( + --mod-accordion-focus-indicator-color, + var(--spectrum-accordion-focus-indicator-color) + ); + outline-offset: calc( + var( + --mod-accordion-focus-indicator-gap, + var(--spectrum-accordion-focus-indicator-gap) + ) * -1 ); } -#header:focus-visible:after { +#header:active { background-color: var( - --spectrum-accordion-item-border-left-color-key-focus, - var(--spectrum-alias-border-color-key-focus) + --mod-accordion-background-color-down, + var(--spectrum-accordion-background-color-down) + ); + color: var( + --mod-accordion-item-header-color-down, + var(--spectrum-accordion-item-header-color-down) ); } :host([open]) #header:hover { - background-color: #0000; + background-color: var( + --mod-accordion-background-color-hover, + var(--spectrum-accordion-background-color-hover) + ); } :host([disabled]) #header, :host([disabled]) #header.focus-visible, :host([disabled]) #header:hover { background-color: #0000; color: var( - --spectrum-accordion-text-color-disabled, - var(--spectrum-global-color-gray-500) + --mod-accordion-item-header-disabled-color, + var(--spectrum-accordion-item-header-disabled-color) ); } :host([disabled]) #header, @@ -292,21 +313,45 @@ governing permissions and limitations under the License. :host([disabled]) #header:hover { background-color: #0000; color: var( - --spectrum-accordion-text-color-disabled, - var(--spectrum-global-color-gray-500) + --mod-accordion-item-header-disabled-color, + var(--spectrum-accordion-item-header-disabled-color) ); } -:host([disabled]) #header + .indicator { +:host([disabled]) #header + .iconContainer { color: var( - --spectrum-accordion-icon-color-disabled, - var(--spectrum-alias-icon-color-disabled) + --mod-accordion-item-header-disabled-color, + var(--spectrum-accordion-item-header-disabled-color) + ); +} +:host([disabled]) #content { + color: var( + --mod-accordion-item-content-disabled-color, + var(--spectrum-accordion-item-content-disabled-color) ); } @media (forced-colors: active) { - #header.focus-visible { - outline: 3px solid CanvasText; - } - #header:focus-visible { - outline: 3px solid CanvasText; + #header:after { + content: ''; + forced-color-adjust: none; + inset-inline-start: 0; + position: absolute; } } +:host([dir='ltr'][open]) > #heading > .iconContainer > .indicator { + transform: rotate(90deg); +} +:host([dir='rtl'][open]) > #heading > .iconContainer > .indicator { + transform: matrix(-1, 0, 0, 1, 0, 0) rotate(90deg); +} +:host([dir='ltr'][open]) > .iconContainer > .indicator { + transform: rotate(90deg); +} +:host([dir='rtl'][open]) > .iconContainer > .indicator { + transform: matrix(-1, 0, 0, 1, 0, 0) rotate(90deg); +} +:host([open]) > #content { + display: block; +} +:host([disabled]) #header { + cursor: default; +} diff --git a/packages/accordion/src/spectrum-accordion.css b/packages/accordion/src/spectrum-accordion.css index 7ca76d244eb..8bf797de209 100644 --- a/packages/accordion/src/spectrum-accordion.css +++ b/packages/accordion/src/spectrum-accordion.css @@ -12,12 +12,262 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { - --spectrum-accordion-item-title-padding-y: var( - --spectrum-global-dimension-size-150 + --spectrum-accordion-item-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); + --spectrum-accordion-disclosure-indicator-height: var( + --spectrum-component-height-100 ); - --spectrum-accordion-animation-duration: var( - --spectrum-global-animation-duration-100, - 0.13s + --spectrum-accordion-disclosure-indicator-to-text-space: var( + --spectrum-accordion-disclosure-indicator-to-text + ); + --spectrum-accordion-edge-to-disclosure-indicator-space: var( + --spectrum-accordion-edge-to-disclosure-indicator + ); + --spectrum-accordion-edge-to-text-space: var( + --spectrum-accordion-edge-to-text + ); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-medium + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-medium + ); + --spectrum-accordion-focus-indicator-gap: var( + --spectrum-focus-indicator-gap + ); + --spectrum-accordion-focus-indicator-thickness: var( + --spectrum-focus-indicator-thickness + ); + --spectrum-accordion-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-accordion-item-content-area-top-to-content: var( + --spectrum-accordion-content-area-top-to-content + ); + --spectrum-accordion-item-content-area-bottom-to-content: var( + --spectrum-accordion-content-area-bottom-to-content + ); + --spectrum-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-75 + ); + --spectrum-accordion-item-header-font: var( + --spectrum-sans-font-family-stack + ); + --spectrum-accordion-item-header-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-accordion-item-header-font-style: var( + --spectrum-default-font-style + ); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); + --spectrum-accordion-item-header-line-height: 1.25; + --spectrum-accordion-item-content-font: var( + --spectrum-sans-font-family-stack + ); + --spectrum-accordion-item-content-font-weight: var( + --spectrum-body-sans-serif-font-weight + ); + --spectrum-accordion-item-content-font-style: var( + --spectrum-body-sans-serif-font-style + ); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-s); + --spectrum-accordion-item-content-line-height: var( + --spectrum-line-height-100 + ); + --spectrum-accordion-background-color-default: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-default) + ); + --spectrum-accordion-background-color-hover: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-hover) + ); + --spectrum-accordion-background-color-down: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-down) + ); + --spectrum-accordion-background-color-key-focus: rgba( + var(--spectrum-gray-900-rgb), + var(--spectrum-background-opacity-key-focus) + ); + --spectrum-accordion-item-header-color-default: var( + --spectrum-neutral-content-color-default + ); + --spectrum-accordion-item-header-color-hover: var( + --spectrum-neutral-content-color-hover + ); + --spectrum-accordion-item-header-color-down: var( + --spectrum-neutral-content-color-down + ); + --spectrum-accordion-item-header-color-key-focus: var( + --spectrum-neutral-content-color-key-focus + ); + --spectrum-accordion-item-header-disabled-color: var( + --spectrum-disabled-content-color + ); + --spectrum-accordion-item-content-disabled-color: var( + --spectrum-disabled-content-color + ); + --spectrum-accordion-item-content-color: var(--spectrum-body-color); + --spectrum-accordion-focus-indicator-color: var( + --spectrum-focus-indicator-color + ); + --spectrum-accordion-divider-color: var(--spectrum-gray-300); + --spectrum-accordion-min-block-size: max( + var(--mod-accordion-item-height, var(--spectrum-accordion-item-height)), + calc( + var( + --mod-accordion-item-header-top-to-text-space, + var(--spectrum-accordion-item-header-top-to-text-space) + ) + + var( + --mod-accordion-item-header-bottom-to-text-space, + var(--spectrum-accordion-item-header-bottom-to-text-space) + ) + + var( + --mod-accordion-item-header-font-size, + var(--spectrum-accordion-item-header-font-size) + ) * + var( + --mod-accordion-item-header-line-height, + var(--spectrum-accordion-item-header-line-height) + ) + ) + ); +} +:host:lang(ja), +:host:lang(ko), +:host:lang(zh) { + --spectrum-accordion-item-header-line-height: var( + --spectrum-cjk-line-height-100 + ); +} +:host:lang(ja), +:host:lang(ko), +:host:lang(zh) { + --spectrum-accordion-item-content-line-height: var( + --spectrum-cjk-line-height-100 + ); +} +:host([density='compact']) { + --spectrum-accordion-item-height: var(--spectrum-component-height-100); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-medium + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-medium + ); +} +:host([density='compact'][size='s']) { + --spectrum-accordion-item-height: var(--spectrum-component-height-75); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-small + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-small + ); +} +:host([density='compact'][size='l']) { + --spectrum-accordion-item-height: var(--spectrum-component-height-200); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-large + ); +} +:host([density='compact'][size='xl']) { + --spectrum-accordion-item-height: var(--spectrum-component-height-300); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-compact-extra-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-compact-extra-large + ); +} +:host([density='spacious']) { + --spectrum-accordion-item-header-line-height: 1.278; + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-medium + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-medium + ); +} +:host([density='spacious'][size='s']) { + --spectrum-accordion-item-header-line-height: 1.25; + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-small-top-to-text-spacious + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-small + ); +} +:host([density='spacious'][size='l']) { + --spectrum-accordion-item-header-line-height: 1.273; + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-large + ); +} +:host([density='spacious'][size='xl']) { + --spectrum-accordion-item-header-line-height: 1.25; + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-spacious-extra-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-spacious-extra-large + ); +} +:host([size='s']) { + --spectrum-accordion-item-height: var(--spectrum-component-height-100); + --spectrum-accordion-disclosure-indicator-height: var( + --spectrum-component-height-75 + ); + --spectrum-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-50 + ); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-200); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-xs); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-small + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-small + ); +} +:host([size='l']) { + --spectrum-accordion-item-height: var(--spectrum-component-height-300); + --spectrum-accordion-disclosure-indicator-height: var( + --spectrum-component-height-200 + ); + --spectrum-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-100 + ); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-500); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-m); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-large + ); +} +:host([size='xl']) { + --spectrum-accordion-item-height: var(--spectrum-component-height-400); + --spectrum-accordion-disclosure-indicator-height: var( + --spectrum-component-height-300 + ); + --spectrum-accordion-component-edge-to-text: var( + --spectrum-component-edge-to-text-200 + ); + --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-700); + --spectrum-accordion-item-content-font-size: var(--spectrum-body-size-l); + --spectrum-accordion-item-header-top-to-text-space: var( + --spectrum-accordion-top-to-text-regular-extra-large + ); + --spectrum-accordion-item-header-bottom-to-text-space: var( + --spectrum-accordion-bottom-to-text-regular-extra-large ); } :host { diff --git a/packages/accordion/src/spectrum-config.js b/packages/accordion/src/spectrum-config.js index 8208ed99f54..fbf71615a7e 100644 --- a/packages/accordion/src/spectrum-config.js +++ b/packages/accordion/src/spectrum-config.js @@ -31,6 +31,7 @@ const config = { excludeByComponents: [ builder.class('spectrum-Accordion-item'), builder.class('spectrum-Accordion-itemIndicator'), + builder.class('spectrum-Accordion-itemIconContainer'), builder.class('spectrum-Accordion-itemHeading'), builder.class('spectrum-Accordion-itemHeader'), builder.class('spectrum-Accordion-itemContent'), @@ -39,6 +40,21 @@ const config = { converter.classToHost(), converter.classToAttribute('is-open', 'open'), converter.classToAttribute('is-disabled', 'disabled'), + ...converter.enumerateAttributes( + [ + ['spectrum-Accordion--compact', 'compact'], + ['spectrum-Accordion--spacious', 'spacious'], + ], + 'density' + ), + ...converter.enumerateAttributes( + [ + ['spectrum-Accordion--sizeS', 's'], + ['spectrum-Accordion--sizeL', 'l'], + ['spectrum-Accordion--sizeXL', 'xl'], + ], + 'size' + ), ], }, { @@ -46,10 +62,12 @@ const config = { outPackage: 'accordion', fileName: 'accordion-item', excludeByComponents: [ - { - type: 'class', - name: 'spectrum-Accordion', - }, + builder.class('spectrum-Accordion'), + builder.class('spectrum-Accordion--compact'), + builder.class('spectrum-Accordion--spacious'), + builder.class('spectrum-Accordion--sizeS'), + builder.class('spectrum-Accordion--sizeL'), + builder.class('spectrum-Accordion--sizeXL'), ], components: [ converterItem.classToHost(), @@ -64,6 +82,10 @@ const config = { 'spectrum-Accordion-itemContent', 'content' ), + converter.classToClass( + 'spectrum-Accordion-itemIconContainer', + 'iconContainer' + ), converter.classToClass( 'spectrum-Accordion-itemIndicator', 'indicator' @@ -73,6 +95,11 @@ const config = { replace: builder.pseudoClass('first-of-type'), hoist: true, }, + { + find: builder.pseudoClass('first-child'), + replace: builder.pseudoClass('first-child'), + hoist: true, + }, { find: [ builder.class('spectrum-Accordion-itemHeader'), @@ -101,20 +128,6 @@ const config = { }, ], }, - { - find: [ - builder.class('spectrum-Accordion-itemHeader'), - builder.class('focus-ring'), - ], - replace: [ - { - replace: builder.id('header'), - }, - { - replace: builder.pseudoClass('focus-visible'), - }, - ], - }, ], }, ], diff --git a/packages/accordion/stories/accordion-densities-compact.stories.ts b/packages/accordion/stories/accordion-densities-compact.stories.ts new file mode 100644 index 00000000000..d8a0aa0ea8a --- /dev/null +++ b/packages/accordion/stories/accordion-densities-compact.stories.ts @@ -0,0 +1,28 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { TemplateResult } from '@spectrum-web-components/base'; +import { AccordionMarkup } from './'; + +export default { + title: 'Accordion/Densities/Compact', + component: 'sp-accordion', +}; + +export const s = (): TemplateResult => + AccordionMarkup({ density: 'compact', size: 's' }); +export const m = (): TemplateResult => + AccordionMarkup({ density: 'compact', size: 'm' }); +export const l = (): TemplateResult => + AccordionMarkup({ density: 'compact', size: 'l' }); +export const xl = (): TemplateResult => + AccordionMarkup({ density: 'compact', size: 'xl' }); diff --git a/packages/accordion/stories/accordion-densities-spacious.stories.ts b/packages/accordion/stories/accordion-densities-spacious.stories.ts new file mode 100644 index 00000000000..45435a86c2e --- /dev/null +++ b/packages/accordion/stories/accordion-densities-spacious.stories.ts @@ -0,0 +1,28 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { TemplateResult } from '@spectrum-web-components/base'; +import { AccordionMarkup } from './'; + +export default { + title: 'Accordion/Densities/Spacious', + component: 'sp-accordion', +}; + +export const s = (): TemplateResult => + AccordionMarkup({ density: 'spacious', size: 's' }); +export const m = (): TemplateResult => + AccordionMarkup({ density: 'spacious', size: 'm' }); +export const l = (): TemplateResult => + AccordionMarkup({ density: 'spacious', size: 'l' }); +export const xl = (): TemplateResult => + AccordionMarkup({ density: 'spacious', size: 'xl' }); diff --git a/packages/accordion/stories/accordion-sizes.stories.ts b/packages/accordion/stories/accordion-sizes.stories.ts new file mode 100644 index 00000000000..16289d8c86f --- /dev/null +++ b/packages/accordion/stories/accordion-sizes.stories.ts @@ -0,0 +1,24 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { TemplateResult } from '@spectrum-web-components/base'; +import { AccordionMarkup } from './'; + +export default { + title: 'Accordion/Sizes', + component: 'sp-accordion', +}; + +export const s = (): TemplateResult => AccordionMarkup({ size: 's' }); +export const m = (): TemplateResult => AccordionMarkup({ size: 'm' }); +export const l = (): TemplateResult => AccordionMarkup({ size: 'l' }); +export const xl = (): TemplateResult => AccordionMarkup({ size: 'xl' }); diff --git a/packages/accordion/stories/accordion.stories.ts b/packages/accordion/stories/accordion.stories.ts index ea86384fd79..e9e65fce099 100644 --- a/packages/accordion/stories/accordion.stories.ts +++ b/packages/accordion/stories/accordion.stories.ts @@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import { html, TemplateResult } from '@spectrum-web-components/base'; +import { TemplateResult } from '@spectrum-web-components/base'; +import { AccordionMarkup } from './'; import '@spectrum-web-components/accordion/sp-accordion.js'; import '@spectrum-web-components/accordion/sp-accordion-item.js'; @@ -21,6 +22,8 @@ export default { component: 'sp-accordion', args: { open: false, + size: 'm', + density: undefined, }, argTypes: { open: { @@ -35,6 +38,30 @@ export default { type: 'boolean', }, }, + density: { + name: 'density', + type: { name: 'string', required: false }, + description: 'The density at which to display accordion items.', + table: { + defaultValue: { summary: undefined }, + }, + control: { + options: ['compact', 'spacious', undefined], + type: 'select', + }, + }, + size: { + name: 'size', + type: { name: 'string', required: false }, + description: 'The size at which to display accordion items.', + table: { + defaultValue: { summary: 'm' }, + }, + control: { + options: ['s', 'm', 'l', 'xl'], + type: 'select', + }, + }, }, }; @@ -42,46 +69,15 @@ type Properties = { allowMultiple?: boolean; disabled?: boolean; open?: boolean; + density?: 'compact' | 'spacious' | undefined; + size?: 's' | 'm' | 'l' | 'xl'; }; -const Template = ( - { allowMultiple, disabled, open }: Properties = { - allowMultiple: false, - disabled: false, - open: false, - } -): TemplateResult => { - return html` - - -
Item 1
-
- - Item 2 - - -

- This is content that has a - - link back to Spectrum Web Components - - so that it is easy to test that "Space" and "Enter" - interactions on focusable content does NOT toggle the - Accordion Item. -

-
-
- `; -}; -export const Default = (args?: Properties): TemplateResult => Template(args); +export const Default = (args?: Properties): TemplateResult => + AccordionMarkup(args); -export const Open = (args?: Properties): TemplateResult => Template(args); +export const Open = (args?: Properties): TemplateResult => + AccordionMarkup(args); Open.args = { open: true, allowMultiple: false, @@ -89,12 +85,13 @@ Open.args = { }; export const AllowMultiple = (args?: Properties): TemplateResult => - Template(args); + AccordionMarkup(args); AllowMultiple.args = { allowMultiple: true, }; -export const Disabled = (args?: Properties): TemplateResult => Template(args); +export const Disabled = (args?: Properties): TemplateResult => + AccordionMarkup(args); Disabled.args = { disabled: true, }; diff --git a/packages/accordion/stories/index.ts b/packages/accordion/stories/index.ts new file mode 100644 index 00000000000..1a8b0091bb6 --- /dev/null +++ b/packages/accordion/stories/index.ts @@ -0,0 +1,54 @@ +/* +Copyright 2023 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import { html, TemplateResult } from '@spectrum-web-components/base'; + +import '@spectrum-web-components/accordion/sp-accordion.js'; +import '@spectrum-web-components/accordion/sp-accordion-item.js'; +import '@spectrum-web-components/link/sp-link.js'; + +export const AccordionMarkup = ({ + allowMultiple = false, + disabled = false, + open = false, + size = 'm', + density = undefined as unknown, +} = {}): TemplateResult => { + return html` + + +
Item 1
+
+ + Item 2 + + +

+ This is content that has a + + link back to Spectrum Web Components + + so that it is easy to test that "Space" and "Enter" + interactions on focusable content does NOT toggle the + Accordion Item. +

+
+
+ `; +}; diff --git a/packages/action-bar/CHANGELOG.md b/packages/action-bar/CHANGELOG.md index 93bf7bc4f29..3de22339ffc 100644 --- a/packages/action-bar/CHANGELOG.md +++ b/packages/action-bar/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.34.0](https://github.com/adobe/spectrum-web-components/compare/v0.33.2...v0.34.0) (2023-07-11) + +**Note:** Version bump only for package @spectrum-web-components/action-bar + ## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14) **Note:** Version bump only for package @spectrum-web-components/action-bar diff --git a/packages/action-bar/package.json b/packages/action-bar/package.json index 419202957b5..1123ac0295e 100644 --- a/packages/action-bar/package.json +++ b/packages/action-bar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-web-components/action-bar", - "version": "0.33.2", + "version": "0.34.0", "publishConfig": { "access": "public" }, @@ -57,8 +57,8 @@ "lit-html" ], "dependencies": { - "@spectrum-web-components/base": "^0.33.2", - "@spectrum-web-components/popover": "^0.33.2" + "@spectrum-web-components/base": "^0.34.0", + "@spectrum-web-components/popover": "^0.34.0" }, "devDependencies": { "@spectrum-css/actionbar": "^4.0.1" diff --git a/packages/action-button/CHANGELOG.md b/packages/action-button/CHANGELOG.md index 169131c0c56..decadbb4b19 100644 --- a/packages/action-button/CHANGELOG.md +++ b/packages/action-button/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.34.0](https://github.com/adobe/spectrum-web-components/compare/v0.33.2...v0.34.0) (2023-07-11) + +### Bug Fixes + +- **action-button,action-menu,picker,split-button:** expand and update application of aria-\* attributes ([52c0156](https://github.com/adobe/spectrum-web-components/commit/52c015636d42f2baf1524446a0db9d5e5cfeb689)) +- **action-group:** ensure Action Button clicks are attributed to the right element ([#3292](https://github.com/adobe/spectrum-web-components/issues/3292)) ([ddccab7](https://github.com/adobe/spectrum-web-components/commit/ddccab766498a6da6ca29d9bbe9cebd7924e81e0)) + ## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14) **Note:** Version bump only for package @spectrum-web-components/action-button diff --git a/packages/action-button/package.json b/packages/action-button/package.json index 0afb0b455b3..0effbea1485 100644 --- a/packages/action-button/package.json +++ b/packages/action-button/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-web-components/action-button", - "version": "0.33.2", + "version": "0.34.0", "publishConfig": { "access": "public" }, @@ -57,14 +57,14 @@ "lit-html" ], "dependencies": { - "@spectrum-web-components/base": "^0.33.2", - "@spectrum-web-components/button": "^0.33.2", - "@spectrum-web-components/icon": "^0.33.2", - "@spectrum-web-components/icons-ui": "^0.33.2", - "@spectrum-web-components/shared": "^0.33.2" + "@spectrum-web-components/base": "^0.34.0", + "@spectrum-web-components/button": "^0.34.0", + "@spectrum-web-components/icon": "^0.34.0", + "@spectrum-web-components/icons-ui": "^0.34.0", + "@spectrum-web-components/shared": "^0.34.0" }, "devDependencies": { - "@spectrum-css/actionbutton": "^3.0.43" + "@spectrum-css/actionbutton": "^3.0.45" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-button/src/ActionButton.ts b/packages/action-button/src/ActionButton.ts index 44d5605242c..777a7fddd82 100644 --- a/packages/action-button/src/ActionButton.ts +++ b/packages/action-button/src/ActionButton.ts @@ -210,7 +210,13 @@ export class ActionButton extends SizedMixin(ButtonBase, { protected override updated(changes: PropertyValues): void { super.updated(changes); const isButton = this.role === 'button'; - const canBePressed = isButton && (this.selected || this.toggles); + const canBePressed = + isButton && + (this.selected || this.toggles) && + !( + this.hasAttribute('aria-haspopup') && + this.hasAttribute('aria-expanded') + ); if (changes.has('selected') || changes.has('role')) { // When role !== 'button' then the Action Button is within // an Action Group that manages selects which means the @@ -224,6 +230,16 @@ export class ActionButton extends SizedMixin(ButtonBase, { } else { // When !this.toggles the lack of "aria-pressed" is inconsequential. this.removeAttribute('aria-pressed'); + if ( + isButton && + this.toggles && + this.hasAttribute('aria-expanded') + ) { + this.setAttribute( + 'aria-expanded', + this.selected ? 'true' : 'false' + ); + } } } } diff --git a/packages/action-button/src/action-button.css b/packages/action-button/src/action-button.css index 61f4786137c..fca4c796b57 100644 --- a/packages/action-button/src/action-button.css +++ b/packages/action-button/src/action-button.css @@ -19,6 +19,7 @@ governing permissions and limitations under the License. #label { flex-grow: var(--spectrum-actionbutton-label-flex-grow); text-align: var(--spectrum-actionbutton-label-text-align); + pointer-events: none !important; } :host([size='xs']) { diff --git a/packages/action-button/test/action-button.test.ts b/packages/action-button/test/action-button.test.ts index 707cb5a36de..4d8ee8ec465 100644 --- a/packages/action-button/test/action-button.test.ts +++ b/packages/action-button/test/action-button.test.ts @@ -235,4 +235,48 @@ describe('ActionButton', () => { expect(el.selected).to.be.true; expect(button.getAttribute('aria-pressed')).to.equal('true'); }); + it('toggles [aria-haspopup][aria-expanded]', async () => { + const el = await fixture( + html` + + ` + ); + + await elementUpdated(el); + const button = el.focusElement; + + expect(el.toggles).to.be.true; + expect(el.selected).to.be.false; + expect(button).not.to.have.attribute('aria-pressed'); + expect(button).to.have.attribute('aria-haspopup', 'true'); + expect(button).to.have.attribute('aria-expanded', 'false'); + + el.focus(); + await sendKeys({ + press: 'Space', + }); + await elementUpdated(el); + + expect(el.toggles).to.be.true; + expect(el.selected).to.be.true; + expect(button).not.to.have.attribute('aria-pressed'); + expect(button).to.have.attribute('aria-haspopup', 'true'); + expect(button).to.have.attribute('aria-expanded', 'true'); + + el.addEventListener('change', (event: Event) => event.preventDefault()); + el.click(); + await elementUpdated(el); + + expect(el.toggles).to.be.true; + expect(el.selected).to.be.true; + expect(button).not.to.have.attribute('aria-pressed'); + expect(button).to.have.attribute('aria-haspopup', 'true'); + expect(button).to.have.attribute('aria-expanded', 'true'); + }); }); diff --git a/packages/action-group/CHANGELOG.md b/packages/action-group/CHANGELOG.md index c5127d9220b..0aedc8052d5 100644 --- a/packages/action-group/CHANGELOG.md +++ b/packages/action-group/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.34.0](https://github.com/adobe/spectrum-web-components/compare/v0.33.2...v0.34.0) (2023-07-11) + +### Bug Fixes + +- **action-group:** ensure Action Button clicks are attributed to the right element ([#3292](https://github.com/adobe/spectrum-web-components/issues/3292)) ([ddccab7](https://github.com/adobe/spectrum-web-components/commit/ddccab766498a6da6ca29d9bbe9cebd7924e81e0)) + ## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14) **Note:** Version bump only for package @spectrum-web-components/action-group diff --git a/packages/action-group/package.json b/packages/action-group/package.json index a1612b3eb76..440ba23ebfa 100644 --- a/packages/action-group/package.json +++ b/packages/action-group/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-web-components/action-group", - "version": "0.33.2", + "version": "0.34.0", "publishConfig": { "access": "public" }, @@ -58,13 +58,13 @@ ], "dependencies": { "@lit-labs/observers": "^2.0.0", - "@spectrum-web-components/action-button": "^0.33.2", - "@spectrum-web-components/base": "^0.33.2", - "@spectrum-web-components/icons-workflow": "^0.33.2", - "@spectrum-web-components/reactive-controllers": "^0.33.2" + "@spectrum-web-components/action-button": "^0.34.0", + "@spectrum-web-components/base": "^0.34.0", + "@spectrum-web-components/icons-workflow": "^0.34.0", + "@spectrum-web-components/reactive-controllers": "^0.34.0" }, "devDependencies": { - "@spectrum-css/actiongroup": "^3.0.44" + "@spectrum-css/actiongroup": "^3.0.55" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-group/src/spectrum-action-group.css b/packages/action-group/src/spectrum-action-group.css index 57f027ce6f4..9e1ae322678 100644 --- a/packages/action-group/src/spectrum-action-group.css +++ b/packages/action-group/src/spectrum-action-group.css @@ -22,22 +22,8 @@ governing permissions and limitations under the License. ); --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75); } -:host([size='m']) { - --spectrum-actiongroup-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); -} -:host([size='l']) { - --spectrum-actiongroup-horizontal-spacing-regular: var( - --spectrum-spacing-100 - ); - --spectrum-actiongroup-vertical-spacing-regular: var( - --spectrum-spacing-100 - ); -} +:host([size='l']), +:host([size='m']), :host([size='xl']) { --spectrum-actiongroup-horizontal-spacing-regular: var( --spectrum-spacing-100 @@ -86,7 +72,7 @@ governing permissions and limitations under the License. z-index: 0; } :host([compact]:not([quiet])) ::slotted(:first-child) { - --spectrum-actionbutton-focus-ring-border-radius: var( + --mod-actionbutton-focus-indicator-border-radius: var( --mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius) ) @@ -109,7 +95,7 @@ governing permissions and limitations under the License. ); } :host([compact]:not([quiet])) ::slotted(:not(:first-child)) { - --spectrum-actionbutton-focus-ring-border-radius: 0px; + --mod-actionbutton-focus-indicator-border-radius: 0px; margin-inline-end: var( --mod-actiongroup-horizontal-spacing-compact, var(--spectrum-actiongroup-horizontal-spacing-compact) @@ -120,7 +106,7 @@ governing permissions and limitations under the License. ); } :host([compact]:not([quiet])) ::slotted(:last-child) { - --spectrum-actionbutton-focus-ring-border-radius: 0px + --mod-actionbutton-focus-indicator-border-radius: 0px var( --mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius) @@ -172,7 +158,7 @@ governing permissions and limitations under the License. ); } :host([compact]:not([quiet])[vertical]) ::slotted(:first-child) { - --spectrum-actionbutton-focus-ring-border-radius: var( + --mod-actionbutton-focus-indicator-border-radius: var( --mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius) ) @@ -221,7 +207,7 @@ governing permissions and limitations under the License. ); } :host([compact]:not([quiet])[vertical]) ::slotted(:last-child) { - --spectrum-actionbutton-focus-ring-border-radius: 0px 0px + --mod-actionbutton-focus-indicator-border-radius: 0px 0px var( --mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius) diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts index 7330a5cec40..65203b1dd00 100644 --- a/packages/action-group/test/action-group.test.ts +++ b/packages/action-group/test/action-group.test.ts @@ -684,6 +684,49 @@ describe('ActionGroup', () => { expect(secondButton.selected, 'second button selected').to.be.true; }); + it('Clicking button event should bubble up from inner label to outer button element', async () => { + const el = await fixture( + html` + + + First + + + Second + + + ` + ); + + await elementUpdated(el); + expect(el.selected.length).to.equal(2); + + const firstButtonEl = el.querySelector('.first') as ActionButton; + const firstSpanEl = firstButtonEl.shadowRoot.querySelector( + '#label' + ) as HTMLSpanElement; + const secondButtonEl = el.querySelector('.second') as ActionButton; + + expect(firstButtonEl.selected, 'first button selected').to.be.true; + expect(secondButtonEl.selected, 'second button selected').to.be.true; + + firstSpanEl.click(); // clicking inner span bubbles up and fires outer button click + await elementUpdated(el); + + expect(firstButtonEl.selected, 'first button selected').to.be.false; + expect(secondButtonEl.selected, 'second button selected').to.be.true; + + firstButtonEl.click(); // clicking outer action-button element fires own click event + await elementUpdated(el); + + expect(firstButtonEl.selected, 'first button selected').to.be.true; + expect(secondButtonEl.selected, 'second button selected').to.be.true; + }); + it('only selects user-passed buttons if present in action-group while [selects="multiple"]', async () => { const el = await multipleSelectedActionGroup(['second', 'fourth']); diff --git a/packages/action-menu/CHANGELOG.md b/packages/action-menu/CHANGELOG.md index 4fcc75f1158..32dead4b51f 100644 --- a/packages/action-menu/CHANGELOG.md +++ b/packages/action-menu/CHANGELOG.md @@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.34.0](https://github.com/adobe/spectrum-web-components/compare/v0.33.2...v0.34.0) (2023-07-11) + +### Bug Fixes + +- **action-button,action-menu,picker,split-button:** expand and update application of aria-\* attributes ([52c0156](https://github.com/adobe/spectrum-web-components/commit/52c015636d42f2baf1524446a0db9d5e5cfeb689)) + ## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14) **Note:** Version bump only for package @spectrum-web-components/action-menu diff --git a/packages/action-menu/package.json b/packages/action-menu/package.json index 1612cc3d7d4..16bf3821e44 100644 --- a/packages/action-menu/package.json +++ b/packages/action-menu/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-web-components/action-menu", - "version": "0.33.2", + "version": "0.34.0", "publishConfig": { "access": "public" }, @@ -61,15 +61,15 @@ "lit-html" ], "dependencies": { - "@spectrum-web-components/action-button": "^0.33.2", - "@spectrum-web-components/base": "^0.33.2", - "@spectrum-web-components/icon": "^0.33.2", - "@spectrum-web-components/icons-workflow": "^0.33.2", - "@spectrum-web-components/picker": "^0.33.2", - "@spectrum-web-components/shared": "^0.33.2" + "@spectrum-web-components/action-button": "^0.34.0", + "@spectrum-web-components/base": "^0.34.0", + "@spectrum-web-components/icon": "^0.34.0", + "@spectrum-web-components/icons-workflow": "^0.34.0", + "@spectrum-web-components/picker": "^0.34.0", + "@spectrum-web-components/shared": "^0.34.0" }, "devDependencies": { - "@spectrum-css/actionmenu": "^4.0.31" + "@spectrum-css/actionmenu": "^4.0.43" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts index f799f930136..b5aa70749b6 100644 --- a/packages/action-menu/src/ActionMenu.ts +++ b/packages/action-menu/src/ActionMenu.ts @@ -65,7 +65,7 @@ export class ActionMenu extends ObserveSlotText(PickerBase, 'label') { ?quiet=${this.quiet} ?selected=${this.open} aria-haspopup="true" - aria-controls="popover" + aria-controls=${ifDefined(this.open ? 'menu' : undefined)} aria-expanded=${this.open ? 'true' : 'false'} aria-label=${ifDefined(this.label || undefined)} id="button" diff --git a/packages/action-menu/test/index.ts b/packages/action-menu/test/index.ts index ad71064c790..561cfb9464d 100644 --- a/packages/action-menu/test/index.ts +++ b/packages/action-menu/test/index.ts @@ -275,6 +275,9 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { button.click(); await elementUpdated(el); expect(el.open).to.be.true; + expect(button).to.have.attribute('aria-haspopup', 'true'); + expect(button).to.have.attribute('aria-expanded', 'true'); + expect(button).to.have.attribute('aria-controls', 'menu'); }); it('opens unmeasured with deprecated syntax', async () => { const el = await deprecatedActionMenuFixture(); @@ -290,6 +293,12 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { const el = await actionMenuFixture(); await elementUpdated(el); + + const button = el.button as HTMLButtonElement; + expect(button).to.have.attribute('aria-haspopup', 'true'); + expect(button).to.have.attribute('aria-expanded', 'false'); + expect(button).not.to.have.attribute('aria-controls'); + let items = el.querySelectorAll('sp-menu-item'); const count = items.length; expect(items.length).to.equal(count); @@ -299,6 +308,8 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { await opened; expect(el.open).to.be.true; + expect(button).to.have.attribute('aria-expanded', 'true'); + expect(button).to.have.attribute('aria-controls', 'menu'); items = el.querySelectorAll('sp-menu-item'); expect(items.length).to.equal(0); @@ -307,6 +318,8 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { await closed; expect(el.open).to.be.false; + expect(button).to.have.attribute('aria-expanded', 'false'); + expect(button).not.to.have.attribute('aria-controls'); items = el.querySelectorAll('sp-menu-item'); expect(items.length).to.equal(count); @@ -315,6 +328,8 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { await opened; expect(el.open).to.be.true; + expect(button).to.have.attribute('aria-expanded', 'true'); + expect(button).to.have.attribute('aria-controls', 'menu'); items = el.querySelectorAll('sp-menu-item'); expect(items.length).to.equal(0); @@ -323,6 +338,8 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { await closed; expect(el.open).to.be.false; + expect(button).to.have.attribute('aria-expanded', 'false'); + expect(button).not.to.have.attribute('aria-controls'); items = el.querySelectorAll('sp-menu-item'); expect(items.length).to.equal(count); }); diff --git a/packages/asset/CHANGELOG.md b/packages/asset/CHANGELOG.md index 24fbce1f02e..90c46836139 100644 --- a/packages/asset/CHANGELOG.md +++ b/packages/asset/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.34.0](https://github.com/adobe/spectrum-web-components/compare/v0.33.2...v0.34.0) (2023-07-11) + +**Note:** Version bump only for package @spectrum-web-components/asset + ## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14) **Note:** Version bump only for package @spectrum-web-components/asset diff --git a/packages/asset/package.json b/packages/asset/package.json index fb3320106ee..20c172a0565 100644 --- a/packages/asset/package.json +++ b/packages/asset/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-web-components/asset", - "version": "0.33.2", + "version": "0.34.0", "publishConfig": { "access": "public" }, @@ -57,10 +57,10 @@ "lit-html" ], "dependencies": { - "@spectrum-web-components/base": "^0.33.2" + "@spectrum-web-components/base": "^0.34.0" }, "devDependencies": { - "@spectrum-css/asset": "^3.0.40" + "@spectrum-css/asset": "^3.0.46" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/avatar/CHANGELOG.md b/packages/avatar/CHANGELOG.md index 420d5b85387..68c58151f19 100644 --- a/packages/avatar/CHANGELOG.md +++ b/packages/avatar/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.34.0](https://github.com/adobe/spectrum-web-components/compare/v0.33.2...v0.34.0) (2023-07-11) + +**Note:** Version bump only for package @spectrum-web-components/avatar + ## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14) **Note:** Version bump only for package @spectrum-web-components/avatar diff --git a/packages/avatar/package.json b/packages/avatar/package.json index dedde6f19c7..9c1e0f69fbd 100644 --- a/packages/avatar/package.json +++ b/packages/avatar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-web-components/avatar", - "version": "0.33.2", + "version": "0.34.0", "publishConfig": { "access": "public" }, @@ -57,11 +57,11 @@ "lit-html" ], "dependencies": { - "@spectrum-web-components/base": "^0.33.2", - "@spectrum-web-components/shared": "^0.33.2" + "@spectrum-web-components/base": "^0.34.0", + "@spectrum-web-components/shared": "^0.34.0" }, "devDependencies": { - "@spectrum-css/avatar": "^6.0.29" + "@spectrum-css/avatar": "^6.0.38" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/badge/CHANGELOG.md b/packages/badge/CHANGELOG.md index 2d2ce50f486..1cd474a63f8 100644 --- a/packages/badge/CHANGELOG.md +++ b/packages/badge/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.34.0](https://github.com/adobe/spectrum-web-components/compare/v0.33.2...v0.34.0) (2023-07-11) + +**Note:** Version bump only for package @spectrum-web-components/badge + ## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14) **Note:** Version bump only for package @spectrum-web-components/badge diff --git a/packages/badge/package.json b/packages/badge/package.json index 2d18fcc539f..24b715a33f3 100644 --- a/packages/badge/package.json +++ b/packages/badge/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-web-components/badge", - "version": "0.33.2", + "version": "0.34.0", "publishConfig": { "access": "public" }, @@ -57,11 +57,11 @@ "lit-html" ], "dependencies": { - "@spectrum-web-components/base": "^0.33.2", - "@spectrum-web-components/shared": "^0.33.2" + "@spectrum-web-components/base": "^0.34.0", + "@spectrum-web-components/shared": "^0.34.0" }, "devDependencies": { - "@spectrum-css/badge": "^3.0.31" + "@spectrum-css/badge": "^3.0.40" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/banner/CHANGELOG.md b/packages/banner/CHANGELOG.md index 5008f8a06d0..b711f612dd4 100644 --- a/packages/banner/CHANGELOG.md +++ b/packages/banner/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.34.0](https://github.com/adobe/spectrum-web-components/compare/v0.33.2...v0.34.0) (2023-07-11) + +**Note:** Version bump only for package @spectrum-web-components/banner + ## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14) **Note:** Version bump only for package @spectrum-web-components/banner diff --git a/packages/banner/package.json b/packages/banner/package.json index 0b0ea2e45f3..d9abf51d500 100644 --- a/packages/banner/package.json +++ b/packages/banner/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-web-components/banner", - "version": "0.33.2", + "version": "0.34.0", "publishConfig": { "access": "public" }, @@ -57,7 +57,7 @@ "lit-html" ], "dependencies": { - "@spectrum-web-components/base": "^0.33.2" + "@spectrum-web-components/base": "^0.34.0" }, "devDependencies": { "@spectrum-css/banner": "3.0.0-beta.2" diff --git a/packages/button-group/CHANGELOG.md b/packages/button-group/CHANGELOG.md index b7dd8b22ae9..88acc8707a5 100644 --- a/packages/button-group/CHANGELOG.md +++ b/packages/button-group/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.34.0](https://github.com/adobe/spectrum-web-components/compare/v0.33.2...v0.34.0) (2023-07-11) + +**Note:** Version bump only for package @spectrum-web-components/button-group + ## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14) **Note:** Version bump only for package @spectrum-web-components/button-group diff --git a/packages/button-group/package.json b/packages/button-group/package.json index 61be5a6c930..b5c285f7088 100644 --- a/packages/button-group/package.json +++ b/packages/button-group/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-web-components/button-group", - "version": "0.33.2", + "version": "0.34.0", "publishConfig": { "access": "public" }, @@ -57,11 +57,11 @@ "lit-html" ], "dependencies": { - "@spectrum-web-components/base": "^0.33.2", - "@spectrum-web-components/button": "^0.33.2" + "@spectrum-web-components/base": "^0.34.0", + "@spectrum-web-components/button": "^0.34.0" }, "devDependencies": { - "@spectrum-css/buttongroup": "^6.0.46" + "@spectrum-css/buttongroup": "^6.0.55" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/button/CHANGELOG.md b/packages/button/CHANGELOG.md index 3780a6bb440..c64da3754b8 100644 --- a/packages/button/CHANGELOG.md +++ b/packages/button/CHANGELOG.md @@ -3,6 +3,13 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.34.0](https://github.com/adobe/spectrum-web-components/compare/v0.33.2...v0.34.0) (2023-07-11) + +### Bug Fixes + +- added role for href button ([5a4ad98](https://github.com/adobe/spectrum-web-components/commit/5a4ad98afa69669a8a4fb2a88d82a837c0c40c55)) +- text fixes ([0121fd6](https://github.com/adobe/spectrum-web-components/commit/0121fd6e25755881f5f00c8b7cd989fc47e201d8)) + ## [0.33.2](https://github.com/adobe/spectrum-web-components/compare/v0.33.1...v0.33.2) (2023-06-14) **Note:** Version bump only for package @spectrum-web-components/button diff --git a/packages/button/README.md b/packages/button/README.md index 6a143bfb221..526a80bee65 100644 --- a/packages/button/README.md +++ b/packages/button/README.md @@ -306,6 +306,17 @@ Events handlers for clicks and other user actions can be registered on a Click me ``` +In addition to handling events like a native `