diff --git a/.changeset/clever-balloons-tell.md b/.changeset/clever-balloons-tell.md deleted file mode 100644 index 31ea8a30b9..0000000000 --- a/.changeset/clever-balloons-tell.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/view-components": patch ---- - -[Bug] Don't fill in the spinner circle svg path diff --git a/.changeset/cool-items-stare.md b/.changeset/cool-items-stare.md deleted file mode 100644 index 173945a00a..0000000000 --- a/.changeset/cool-items-stare.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@primer/view-components': minor ---- - -Add rubocop linter for `IconButton` component - - diff --git a/.changeset/sour-parrots-fetch.md b/.changeset/sour-parrots-fetch.md deleted file mode 100644 index 339815fcfc..0000000000 --- a/.changeset/sour-parrots-fetch.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -'@primer/view-components': minor ---- - -Moving the render for the ActionBar::Item from the slot initializer to the call method. - - diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index ea2d8888de..e6dcaca6a9 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -32,8 +32,8 @@ "vunguyentuan.vscode-postcss", "DavidAnson.vscode-markdownlint" ], - "forwardPorts": [4000, 5400], - "appPort": [4000, 5400], + "forwardPorts": [4000], + "appPort": [4000], "portsAttributes": { "4000": { "label": "demo" diff --git a/.devcontainer/welcome-message.txt b/.devcontainer/welcome-message.txt index 9aacfbfd40..a21830bf92 100644 --- a/.devcontainer/welcome-message.txt +++ b/.devcontainer/welcome-message.txt @@ -4,6 +4,6 @@ ๐Ÿ‘ข Your environment is all set up and bootstrapped. ๐Ÿš€ To begin, start the server with the VS code task (โ‡งโŒ˜B) or run - script/dev, which will start the Rails server at http://localhost:4000 and documentation at http://localhost:5400. + script/dev, which will start the Rails server at http://localhost:4000. โ” Having other problems? Open an issue in the repo for support! diff --git a/.github/release_template.md b/.github/release_template.md index e767c6d0df..b59c818b5d 100644 --- a/.github/release_template.md +++ b/.github/release_template.md @@ -7,8 +7,8 @@ Please ensure these items are checked before merging. - [ ] All CI checks pass - [ ] Lookbook opens in a browser - [ ] Successful integration test with GitHub.com as a primary consumer of Primer View Components - - [ ] Install the npm release candidate in `npm-workspaces/primer/` - - [ ] Use `bin/vendor-gem` to update `primer_view_components` gem + - [ ] Install the npm release candidate: `npm i -w ./npm-workspaces/primer/ @primer/view-components@next` + - [ ] Update `primer_view_components` gem: `script/vendor-gem https://github.com/primer/view_components.git -r changeset-release/main` - [ ] Verify no new build errors appear - [ ] Verify no new linting errors appear - [ ] Manually test critical paths diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 6149c52ad0..58c8f9e53a 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -12,7 +12,7 @@ jobs: - uses: actions/checkout@v3 - name: Get specific changed files id: changed-files - uses: tj-actions/changed-files@v37.6.0 + uses: tj-actions/changed-files@v38.2.0 with: files: | **/*.md @@ -38,7 +38,7 @@ jobs: - uses: actions/checkout@v3 - name: Get specific changed files id: changed-files - uses: tj-actions/changed-files@v37.6.0 + uses: tj-actions/changed-files@v38.2.0 with: files: | app/**/*.rb @@ -61,7 +61,7 @@ jobs: - uses: actions/checkout@v3 - name: Get changed files id: changed-files - uses: tj-actions/changed-files@v37.6.0 + uses: tj-actions/changed-files@v38.2.0 with: files: | app/components/**/*.erb @@ -81,7 +81,7 @@ jobs: - uses: actions/checkout@v3 - name: Get changed files id: changed-files - uses: tj-actions/changed-files@v37.6.0 + uses: tj-actions/changed-files@v38.2.0 with: files: | app/components/**/*.ts @@ -102,7 +102,7 @@ jobs: - uses: actions/checkout@v3 - name: Get changed files id: changed-files - uses: tj-actions/changed-files@v37.6.0 + uses: tj-actions/changed-files@v38.2.0 with: files: | app/components/**/*.pcss diff --git a/CHANGELOG.md b/CHANGELOG.md index eb7496ca49..9ff6dd0c24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,33 @@ # CHANGELOG +## 0.9.0 + +### Minor Changes + +- [#2205](https://github.com/primer/view_components/pull/2205) [`88ac3095`](https://github.com/primer/view_components/commit/88ac309577b5b735af5067ee6ab2c8c30f48aefc) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Add rubocop linter for `IconButton` component + + + +- [#2223](https://github.com/primer/view_components/pull/2223) [`00b7d5d7`](https://github.com/primer/view_components/commit/00b7d5d78e2f52dc6bc6c54689e50da976289203) Thanks [@jonrohan](https://github.com/jonrohan)! - Moving the render for the ActionBar::Item from the slot initializer to the call method. + + + +### Patch Changes + +- [#2227](https://github.com/primer/view_components/pull/2227) [`bb336bb6`](https://github.com/primer/view_components/commit/bb336bb6f034e20778b4834edae3540c365b9d9f) Thanks [@jonrohan](https://github.com/jonrohan)! - [Bug] Don't fill in the spinner circle svg path + +- [#2237](https://github.com/primer/view_components/pull/2237) [`70a8336f`](https://github.com/primer/view_components/commit/70a8336fda45b144f81c1ece54b17a26037126e4) Thanks [@jonrohan](https://github.com/jonrohan)! - Fixing ActionBar more menu items including buttons with no type + + + +- [#2204](https://github.com/primer/view_components/pull/2204) [`ed1644a2`](https://github.com/primer/view_components/commit/ed1644a2fa5b701611a13513cb903774f3f74152) Thanks [@keithamus](https://github.com/keithamus)! - Fix errors in older browsers with :popover-open + + + +- [#2236](https://github.com/primer/view_components/pull/2236) [`d663e450`](https://github.com/primer/view_components/commit/d663e4508341f5b9ef1788b8a2231782ce3ed44d) Thanks [@keithamus](https://github.com/keithamus)! - Centre anchored-position elements when their anchor is not present + + + ## 0.8.0 ### Minor Changes diff --git a/Gemfile.lock b/Gemfile.lock index a55e4c5429..6816de10cb 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - primer_view_components (0.8.0) + primer_view_components (0.9.0) actionview (>= 5.0.0) activesupport (>= 5.0.0) octicons (>= 18.0.0) @@ -120,7 +120,7 @@ GEM racc (~> 1.4) nokogiri (1.14.0-x86_64-linux) racc (~> 1.4) - octicons (19.6.0) + octicons (19.7.0) parallel (1.22.1) parser (3.2.0.0) ast (~> 2.4.1) diff --git a/app/components/primer/alpha/action_bar.rb b/app/components/primer/alpha/action_bar.rb index 4842fb7353..79c3b65432 100644 --- a/app/components/primer/alpha/action_bar.rb +++ b/app/components/primer/alpha/action_bar.rb @@ -66,8 +66,6 @@ def with_menu_item(id:, **system_arguments, &block) system_arguments = { **system_arguments, hidden: true, - tag: :button, - type: "button", "data-for": id, "data-action": "click:action-bar#menuItemClick" } diff --git a/app/components/primer/alpha/overlay.pcss b/app/components/primer/alpha/overlay.pcss index ead0273b5f..6bf7a9a826 100644 --- a/app/components/primer/alpha/overlay.pcss +++ b/app/components/primer/alpha/overlay.pcss @@ -15,6 +15,10 @@ anchored-position[popover]:not(.\:popover-open) { display: none; } +anchored-position.not-anchored::backdrop { + background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted)); +} + /* This reverts the declaration above for native popover, where `:popover-open` is supported */ @supports selector(:popover-open) { anchored-position[popover]:not(.\:popover-open) { diff --git a/app/components/primer/alpha/tool_tip.ts b/app/components/primer/alpha/tool_tip.ts index b9f86b928d..4bd5b9f779 100644 --- a/app/components/primer/alpha/tool_tip.ts +++ b/app/components/primer/alpha/tool_tip.ts @@ -2,6 +2,25 @@ import type {AnchorAlignment, AnchorSide} from '@primer/behaviors' import '@oddbird/popover-polyfill' import {getAnchoredPosition} from '@primer/behaviors' +const isPopoverOpen = (() => { + let selector: string + function setSelector(el: Element) { + try { + selector = ':popover-open' + return el.matches(selector) + } catch { + try { + selector = ':open' + return el.matches(':open') + } catch { + selector = '.\\:popover-open' + return el.matches('.\\:popover-open') + } + } + } + return (el: Element) => (selector ? el.matches(selector) : setSelector(el)) +})() + const TOOLTIP_ARROW_EDGE_OFFSET = 6 const TOOLTIP_SR_ONLY_CLASS = 'sr-only' const TOOLTIP_OFFSET = 10 @@ -22,7 +41,7 @@ const DIRECTION_CLASSES = [ function closeOpenTooltips(except?: Element) { for (const tooltip of openTooltips) { if (tooltip === except) continue - if (tooltip.matches(':popover-open')) { + if (isPopoverOpen(tooltip)) { tooltip.hidePopover() } else { openTooltips.delete(tooltip) @@ -206,16 +225,16 @@ class ToolTipElement extends HTMLElement { /* @deprecated */ set hiddenFromView(value: true | false) { - if (value && this.matches(':popover-open')) { + if (value && isPopoverOpen(this)) { this.hidePopover() - } else if (!value && this.matches(':not(:popover-open)')) { + } else if (!value && !isPopoverOpen(this)) { this.showPopover() } } /* @deprecated */ get hiddenFromView() { - return !this.matches(':popover-open') + return !isPopoverOpen(this) } connectedCallback() { @@ -262,7 +281,7 @@ class ToolTipElement extends HTMLElement { async handleEvent(event: Event) { if (!this.control) return - const showing = this.matches(':popover-open') + const showing = isPopoverOpen(this) // Ensures that tooltip stays open when hovering between tooltip and element // WCAG Success Criterion 1.4.13 Hoverable @@ -277,9 +296,9 @@ class ToolTipElement extends HTMLElement { const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover await Promise.resolve() - if (!showing && shouldShow && this.matches(':not(:popover-open)')) { + if (!showing && shouldShow && !isPopoverOpen(this)) { this.showPopover() - } else if (showing && shouldHide && this.matches(':popover-open')) { + } else if (showing && shouldHide && isPopoverOpen(this)) { this.hidePopover() } @@ -377,7 +396,7 @@ class ToolTipElement extends HTMLElement { #updatePosition() { if (!this.control) return - if (!this.#allowUpdatePosition || !this.matches(':popover-open')) return + if (!this.#allowUpdatePosition || !isPopoverOpen(this)) return const position = getAnchoredPosition(this, this.control, { side: this.#side, diff --git a/app/components/primer/anchored_position.ts b/app/components/primer/anchored_position.ts index 0b37015270..304610b548 100644 --- a/app/components/primer/anchored_position.ts +++ b/app/components/primer/anchored_position.ts @@ -133,10 +133,19 @@ export default class AnchoredPositionElement extends HTMLElement implements Posi this.#animationFrame = requestAnimationFrame(() => { const anchor = this.anchorElement - if (!anchor) return - const {left, top} = getAnchoredPosition(this, anchor, this) - this.style.top = `${top}px` - this.style.left = `${left}px` + this.classList.toggle('not-anchored', !anchor) + if (anchor) { + const {left, top} = getAnchoredPosition(this, anchor, this) + this.style.top = `${top}px` + this.style.left = `${left}px` + this.style.bottom = 'auto' + this.style.right = 'auto' + } else { + this.style.top = '0' + this.style.left = '0' + this.style.bottom = '0' + this.style.right = '0' + } }) } } diff --git a/demo/Gemfile.lock b/demo/Gemfile.lock index 67da2e8591..a51801ded1 100644 --- a/demo/Gemfile.lock +++ b/demo/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: .. specs: - primer_view_components (0.8.0) + primer_view_components (0.9.0) actionview (>= 5.0.0) activesupport (>= 5.0.0) octicons (>= 18.0.0) @@ -271,7 +271,7 @@ GEM racc (~> 1.4) nokogiri (1.15.4-x86_64-linux) racc (~> 1.4) - octicons (19.5.0) + octicons (19.7.0) oj (3.16.0) os (1.1.4) pry (0.14.1) diff --git a/demo/package-lock.json b/demo/package-lock.json index 7c7eddd4d7..e9dc6d2952 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -8,33 +8,28 @@ "name": "demo", "version": "0.1.0", "dependencies": { - "@primer/css": "^21.0.7", + "@primer/css": "^21.0.8", "@primer/primitives": "7.12.0", - "@rails/actioncable": "^7.0.6", - "@rails/ujs": "^7.0.6", + "@rails/actioncable": "^7.0.7", + "@rails/ujs": "^7.0.7", "turbolinks": "^5.2.0", "webpack-dev-server": "^4.15.1" } }, "node_modules/@github/auto-check-element": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/@github/auto-check-element/-/auto-check-element-5.2.0.tgz", - "integrity": "sha512-YODZZUSeoZVJQ04p73MAohrEK37SJlVRDUTaFiPYse9K3z3bNEm+ekq5qYCIyDKGgX7hUhr3WZF35qHxr/zu0Q==", + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/@github/auto-check-element/-/auto-check-element-5.4.1.tgz", + "integrity": "sha512-AJeHV1ifpby5Hp2wJIzcsdIB5YAq869F7ilNv2GygTVpHOSCfYSS29/hJ5GGTLgfKpPRgTmJcMi5OetKR8eH1g==", "dependencies": { - "@github/mini-throttle": "^1.0.7" + "@github/mini-throttle": "^2.1.0" } }, - "node_modules/@github/auto-check-element/node_modules/@github/mini-throttle": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/@github/mini-throttle/-/mini-throttle-1.0.7.tgz", - "integrity": "sha512-1fzCDXpxI4J59pNmO0r0Y1g+R8Sa2B5ersce8AuFu5STMu7b++9osdedK0zWduYowBIgsPQZihJBN19WrAF64g==" - }, "node_modules/@github/auto-complete-element": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/@github/auto-complete-element/-/auto-complete-element-3.4.0.tgz", - "integrity": "sha512-iJ5D/0rwhPnoGPqFNWhY5NlJlxZKt/lMnIRuL6TRfJqu4ieDApWQdcVfJ0yPRDKAzJqmb0MgMkOtH84ZBLu9og==", + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/@github/auto-complete-element/-/auto-complete-element-3.5.1.tgz", + "integrity": "sha512-7/g6Nz6Zz4/k0m/L0n+OEO29WZcXgXwLJn7Ql02UbIMR2ClFEZIwIvvzb+3fEECOyLpFrZC/JH7Svz9RYPc+wA==", "dependencies": { - "@github/combobox-nav": "^2.0.2" + "@github/combobox-nav": "^2.1.7" } }, "node_modules/@github/catalyst": { @@ -43,9 +38,9 @@ "integrity": "sha512-u8A+DameixqpeyHzvnJWTGj+wfiskQOYHzSiJscCWVfMkIT3rxnbHMtGh3lMthaRY21nbUOK71WcsCnCrXhBJQ==" }, "node_modules/@github/clipboard-copy-element": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@github/clipboard-copy-element/-/clipboard-copy-element-1.1.2.tgz", - "integrity": "sha512-L6CMrcA5we0udafvoSuRCE/Ci/3xrLWKYRGup2IlhxF771bQYsQ2EB1of182pI8ZWM4oxgwzu37+igMeoZjN/A==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@github/clipboard-copy-element/-/clipboard-copy-element-1.2.1.tgz", + "integrity": "sha512-PLccyUCnzmOQ6zrRsH66rr67iumJyP5r7ij17ezprFQAK/oA8CXhlC8LTG+xpW3cYAvnp2zCgRNTfXS8wk09Lg==" }, "node_modules/@github/combobox-nav": { "version": "2.1.7", @@ -62,20 +57,25 @@ "resolved": "https://registry.npmjs.org/@github/image-crop-element/-/image-crop-element-5.0.0.tgz", "integrity": "sha512-Vgm2OwWAs1ESoib/t5sjxsAYo6YTOxxAjWDRxswX7qrqoyCejTZ3hshdo4Ep5e+Mz/GVTZC3rdMtg06dk/eT4g==" }, + "node_modules/@github/include-fragment-element": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@github/include-fragment-element/-/include-fragment-element-6.3.0.tgz", + "integrity": "sha512-BJTt8ZE/arsbC9lQtTH8c1hZS0ZigiN+kzH54ffQ6MhHLT83h0OpSdS9NEVocPl2uuO6w3qxnEKTDzUGMQ5rdQ==" + }, "node_modules/@github/mini-throttle": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@github/mini-throttle/-/mini-throttle-2.1.0.tgz", - "integrity": "sha512-iEeR2OdVCPkdIPUszL8gJnKNu4MR8ANh7y0u/LPyaatYezgaWxUZEzhFntloqQq+HE6MZkFy+cl+xzCNuljOdw==" + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@github/mini-throttle/-/mini-throttle-2.1.1.tgz", + "integrity": "sha512-KtOPaB+FiKJ6jcKm9UKyaM5fPURHGf+xcp+b4Mzoi81hOc6M1sIGpMZMAVbNzfa2lW5+RPGKq888Px0j76OZ/A==" }, "node_modules/@github/relative-time-element": { - "version": "4.2.4", - "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.2.4.tgz", - "integrity": "sha512-18qgH9FYUHYN9K3z4s35auDHww1dKTU6TacI8JkA5OuvHVa1lTMuSTZ4hIoJngD5+mizcoRMOs6p/yZYMIjsyg==" + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.3.0.tgz", + "integrity": "sha512-+tFjX9//HRS1HnBa5cNgfEtE52arwiutYg1TOF+Trk40SPxst9Q8Rtc3BKD6aKsvfbtub68vfhipgchGjj9o7g==" }, "node_modules/@github/tab-container-element": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.2.0.tgz", - "integrity": "sha512-to5ZJuywKK3KX53X1ifOcWjvUTQcBGdQ6Qkhm8L97xQ3ovICag1048M3YMpc+QSdr8xWeCBMnLeMnENqotB0Og==" + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.3.0.tgz", + "integrity": "sha512-vHlN/GXgaJFJhh4oUYRh1pc4RAqduKlQOrEjVgSxR4JhLXsQcZ/hKWfCsRZAuZbSPzUGEYvggdieamS4FRSe4g==" }, "node_modules/@jridgewell/gen-mapping": { "version": "0.3.2", @@ -141,25 +141,25 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, "node_modules/@oddbird/popover-polyfill": { - "version": "0.0.10", - "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.0.10.tgz", - "integrity": "sha512-jkfX/35EsxDe9ruTx3He59FyE+y5WDF5S4YJ7TABj0c8egHV2FLeADavknvr12CnSu0QTybv9ufKfPJDsYZYNw==" + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.2.2.tgz", + "integrity": "sha512-ko7x+PDZA9bHwA6hSfxjL1IhBP91JukfZq/NAe85u9rT0akFn9RKvSXymX/mS7S2mfNjE+Zw9JdLUPGvPabQAA==" }, "node_modules/@primer/behaviors": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.3.3.tgz", - "integrity": "sha512-iHMRuu8YWDJIdqCi1krx0cyFNeqszNKTOb0dXFu2wQ5BeIqxqPJLD7rjZ2Vjf/+YaPSbWuIQE1H6TaGMMsDfdA==" + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.3.5.tgz", + "integrity": "sha512-HWwz+6MrfK5NTWcg9GdKFpMBW/yrAV937oXiw2eDtsd88P3SRwoCt6ZO6QmKp9RP3nDU9cbqmuGZ0xBh0eIFeg==" }, "node_modules/@primer/css": { - "version": "21.0.7", - "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.7.tgz", - "integrity": "sha512-Iq0VkpLVZqHZTo2JOIv+RPVu3bWj/BU/MIZrNZ4GRTJTY0YFQ/YCmUYKY1swgiCiPF/RKew5xIkf1cWaqtkQEA==", + "version": "21.0.8", + "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.8.tgz", + "integrity": "sha512-nyJnLwNvqZKN9t2ho0ccTKV5Z9QOQayZT+lycWCwkPmNOyMfGlod8mLFHLYd80Ea7H5784QeOl2+3gh710Yt/g==", "dependencies": { - "@primer/primitives": "^7.11.12", - "@primer/view-components": "^0.1.0" + "@primer/primitives": "^7.12.0", + "@primer/view-components": "^0.5.1" }, "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + "node": ">=16.0.0" } }, "node_modules/@primer/primitives": { @@ -168,9 +168,9 @@ "integrity": "sha512-QKNxfWm7Ik1Ulswyp3KeUL2xnQj8i0E7DdB6lOrh29o7LgyuutwcOHi4CGapBIOR1fYURu+yROSTHQ2C2aDK7A==" }, "node_modules/@primer/view-components": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.1.4.tgz", - "integrity": "sha512-Z5rqs84o7Qox0pEMe5LJW5C/Pgn/YMV7cRjaWJxwvPrlMGtBIk1ds7IcgymcEH2DY/6Jvsm4WQIEwA2AIiHVlg==", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.5.1.tgz", + "integrity": "sha512-TI51R4rVobwK6sWRhu7HRHC6yxud2I9P1sYN6o/fHhIq7QU31mJyv1PtD8nfhmOqN/SsRC6q3pnCbh5Qt1wD/g==", "dependencies": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.3.4", @@ -178,22 +178,22 @@ "@github/clipboard-copy-element": "^1.1.2", "@github/details-menu-element": "^1.0.12", "@github/image-crop-element": "^5.0.0", - "@github/mini-throttle": "^2.1.0", + "@github/include-fragment-element": "^6.1.1", "@github/relative-time-element": "^4.0.0", "@github/tab-container-element": "^3.1.2", - "@oddbird/popover-polyfill": "^0.0.10", - "@primer/behaviors": "^1.2.0" + "@oddbird/popover-polyfill": "^0.2.1", + "@primer/behaviors": "^1.3.4" } }, "node_modules/@rails/actioncable": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@rails/actioncable/-/actioncable-7.0.6.tgz", - "integrity": "sha512-ybBsUrIsu5geM8BtqnpM7ZA9D8uzSz+e1B4JR57NaCmasHKWap6AX5DT7NHIbp21opVet1qqoVSdsoLDqXeB2A==" + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@rails/actioncable/-/actioncable-7.0.7.tgz", + "integrity": "sha512-NqHf4XDkeVaNk/r+TBo2aAMkjPyRPEfZkSqCTijfWukW1zTZ2XLDfvFzbpRCuWZ6gxItgoa/FkILZm27HRh2yg==" }, "node_modules/@rails/ujs": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@rails/ujs/-/ujs-7.0.6.tgz", - "integrity": "sha512-s5v3AC6AywOIFMz0RIMW83Xc8FPIvKMkP3ZHFlM4ISNkhdUwP9HdhVtxxo6z3dIhe9vI0Our2A8kN/QpUV02Qg==" + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@rails/ujs/-/ujs-7.0.7.tgz", + "integrity": "sha512-J2v5Ca7HgejO7diGKiDylaVDQKmbQ5FJih6Oo3hXuBKEuXlcaccJu64lj8MNVLaPVyZx0g4gaOQZQz95QEb/hg==" }, "node_modules/@types/body-parser": { "version": "1.19.2", @@ -3066,26 +3066,19 @@ }, "dependencies": { "@github/auto-check-element": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/@github/auto-check-element/-/auto-check-element-5.2.0.tgz", - "integrity": "sha512-YODZZUSeoZVJQ04p73MAohrEK37SJlVRDUTaFiPYse9K3z3bNEm+ekq5qYCIyDKGgX7hUhr3WZF35qHxr/zu0Q==", + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/@github/auto-check-element/-/auto-check-element-5.4.1.tgz", + "integrity": "sha512-AJeHV1ifpby5Hp2wJIzcsdIB5YAq869F7ilNv2GygTVpHOSCfYSS29/hJ5GGTLgfKpPRgTmJcMi5OetKR8eH1g==", "requires": { - "@github/mini-throttle": "^1.0.7" - }, - "dependencies": { - "@github/mini-throttle": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/@github/mini-throttle/-/mini-throttle-1.0.7.tgz", - "integrity": "sha512-1fzCDXpxI4J59pNmO0r0Y1g+R8Sa2B5ersce8AuFu5STMu7b++9osdedK0zWduYowBIgsPQZihJBN19WrAF64g==" - } + "@github/mini-throttle": "^2.1.0" } }, "@github/auto-complete-element": { - "version": "3.4.0", - "resolved": "https://registry.npmjs.org/@github/auto-complete-element/-/auto-complete-element-3.4.0.tgz", - "integrity": "sha512-iJ5D/0rwhPnoGPqFNWhY5NlJlxZKt/lMnIRuL6TRfJqu4ieDApWQdcVfJ0yPRDKAzJqmb0MgMkOtH84ZBLu9og==", + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/@github/auto-complete-element/-/auto-complete-element-3.5.1.tgz", + "integrity": "sha512-7/g6Nz6Zz4/k0m/L0n+OEO29WZcXgXwLJn7Ql02UbIMR2ClFEZIwIvvzb+3fEECOyLpFrZC/JH7Svz9RYPc+wA==", "requires": { - "@github/combobox-nav": "^2.0.2" + "@github/combobox-nav": "^2.1.7" } }, "@github/catalyst": { @@ -3094,9 +3087,9 @@ "integrity": "sha512-u8A+DameixqpeyHzvnJWTGj+wfiskQOYHzSiJscCWVfMkIT3rxnbHMtGh3lMthaRY21nbUOK71WcsCnCrXhBJQ==" }, "@github/clipboard-copy-element": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@github/clipboard-copy-element/-/clipboard-copy-element-1.1.2.tgz", - "integrity": "sha512-L6CMrcA5we0udafvoSuRCE/Ci/3xrLWKYRGup2IlhxF771bQYsQ2EB1of182pI8ZWM4oxgwzu37+igMeoZjN/A==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@github/clipboard-copy-element/-/clipboard-copy-element-1.2.1.tgz", + "integrity": "sha512-PLccyUCnzmOQ6zrRsH66rr67iumJyP5r7ij17ezprFQAK/oA8CXhlC8LTG+xpW3cYAvnp2zCgRNTfXS8wk09Lg==" }, "@github/combobox-nav": { "version": "2.1.7", @@ -3113,20 +3106,25 @@ "resolved": "https://registry.npmjs.org/@github/image-crop-element/-/image-crop-element-5.0.0.tgz", "integrity": "sha512-Vgm2OwWAs1ESoib/t5sjxsAYo6YTOxxAjWDRxswX7qrqoyCejTZ3hshdo4Ep5e+Mz/GVTZC3rdMtg06dk/eT4g==" }, + "@github/include-fragment-element": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@github/include-fragment-element/-/include-fragment-element-6.3.0.tgz", + "integrity": "sha512-BJTt8ZE/arsbC9lQtTH8c1hZS0ZigiN+kzH54ffQ6MhHLT83h0OpSdS9NEVocPl2uuO6w3qxnEKTDzUGMQ5rdQ==" + }, "@github/mini-throttle": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@github/mini-throttle/-/mini-throttle-2.1.0.tgz", - "integrity": "sha512-iEeR2OdVCPkdIPUszL8gJnKNu4MR8ANh7y0u/LPyaatYezgaWxUZEzhFntloqQq+HE6MZkFy+cl+xzCNuljOdw==" + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@github/mini-throttle/-/mini-throttle-2.1.1.tgz", + "integrity": "sha512-KtOPaB+FiKJ6jcKm9UKyaM5fPURHGf+xcp+b4Mzoi81hOc6M1sIGpMZMAVbNzfa2lW5+RPGKq888Px0j76OZ/A==" }, "@github/relative-time-element": { - "version": "4.2.4", - "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.2.4.tgz", - "integrity": "sha512-18qgH9FYUHYN9K3z4s35auDHww1dKTU6TacI8JkA5OuvHVa1lTMuSTZ4hIoJngD5+mizcoRMOs6p/yZYMIjsyg==" + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@github/relative-time-element/-/relative-time-element-4.3.0.tgz", + "integrity": "sha512-+tFjX9//HRS1HnBa5cNgfEtE52arwiutYg1TOF+Trk40SPxst9Q8Rtc3BKD6aKsvfbtub68vfhipgchGjj9o7g==" }, "@github/tab-container-element": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.2.0.tgz", - "integrity": "sha512-to5ZJuywKK3KX53X1ifOcWjvUTQcBGdQ6Qkhm8L97xQ3ovICag1048M3YMpc+QSdr8xWeCBMnLeMnENqotB0Og==" + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@github/tab-container-element/-/tab-container-element-3.3.0.tgz", + "integrity": "sha512-vHlN/GXgaJFJhh4oUYRh1pc4RAqduKlQOrEjVgSxR4JhLXsQcZ/hKWfCsRZAuZbSPzUGEYvggdieamS4FRSe4g==" }, "@jridgewell/gen-mapping": { "version": "0.3.2", @@ -3183,22 +3181,22 @@ "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, "@oddbird/popover-polyfill": { - "version": "0.0.10", - "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.0.10.tgz", - "integrity": "sha512-jkfX/35EsxDe9ruTx3He59FyE+y5WDF5S4YJ7TABj0c8egHV2FLeADavknvr12CnSu0QTybv9ufKfPJDsYZYNw==" + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@oddbird/popover-polyfill/-/popover-polyfill-0.2.2.tgz", + "integrity": "sha512-ko7x+PDZA9bHwA6hSfxjL1IhBP91JukfZq/NAe85u9rT0akFn9RKvSXymX/mS7S2mfNjE+Zw9JdLUPGvPabQAA==" }, "@primer/behaviors": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.3.3.tgz", - "integrity": "sha512-iHMRuu8YWDJIdqCi1krx0cyFNeqszNKTOb0dXFu2wQ5BeIqxqPJLD7rjZ2Vjf/+YaPSbWuIQE1H6TaGMMsDfdA==" + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/@primer/behaviors/-/behaviors-1.3.5.tgz", + "integrity": "sha512-HWwz+6MrfK5NTWcg9GdKFpMBW/yrAV937oXiw2eDtsd88P3SRwoCt6ZO6QmKp9RP3nDU9cbqmuGZ0xBh0eIFeg==" }, "@primer/css": { - "version": "21.0.7", - "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.7.tgz", - "integrity": "sha512-Iq0VkpLVZqHZTo2JOIv+RPVu3bWj/BU/MIZrNZ4GRTJTY0YFQ/YCmUYKY1swgiCiPF/RKew5xIkf1cWaqtkQEA==", + "version": "21.0.8", + "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.8.tgz", + "integrity": "sha512-nyJnLwNvqZKN9t2ho0ccTKV5Z9QOQayZT+lycWCwkPmNOyMfGlod8mLFHLYd80Ea7H5784QeOl2+3gh710Yt/g==", "requires": { - "@primer/primitives": "^7.11.12", - "@primer/view-components": "^0.1.0" + "@primer/primitives": "^7.12.0", + "@primer/view-components": "^0.5.1" } }, "@primer/primitives": { @@ -3207,9 +3205,9 @@ "integrity": "sha512-QKNxfWm7Ik1Ulswyp3KeUL2xnQj8i0E7DdB6lOrh29o7LgyuutwcOHi4CGapBIOR1fYURu+yROSTHQ2C2aDK7A==" }, "@primer/view-components": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.1.4.tgz", - "integrity": "sha512-Z5rqs84o7Qox0pEMe5LJW5C/Pgn/YMV7cRjaWJxwvPrlMGtBIk1ds7IcgymcEH2DY/6Jvsm4WQIEwA2AIiHVlg==", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.5.1.tgz", + "integrity": "sha512-TI51R4rVobwK6sWRhu7HRHC6yxud2I9P1sYN6o/fHhIq7QU31mJyv1PtD8nfhmOqN/SsRC6q3pnCbh5Qt1wD/g==", "requires": { "@github/auto-check-element": "^5.2.0", "@github/auto-complete-element": "^3.3.4", @@ -3217,22 +3215,22 @@ "@github/clipboard-copy-element": "^1.1.2", "@github/details-menu-element": "^1.0.12", "@github/image-crop-element": "^5.0.0", - "@github/mini-throttle": "^2.1.0", + "@github/include-fragment-element": "^6.1.1", "@github/relative-time-element": "^4.0.0", "@github/tab-container-element": "^3.1.2", - "@oddbird/popover-polyfill": "^0.0.10", - "@primer/behaviors": "^1.2.0" + "@oddbird/popover-polyfill": "^0.2.1", + "@primer/behaviors": "^1.3.4" } }, "@rails/actioncable": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@rails/actioncable/-/actioncable-7.0.6.tgz", - "integrity": "sha512-ybBsUrIsu5geM8BtqnpM7ZA9D8uzSz+e1B4JR57NaCmasHKWap6AX5DT7NHIbp21opVet1qqoVSdsoLDqXeB2A==" + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@rails/actioncable/-/actioncable-7.0.7.tgz", + "integrity": "sha512-NqHf4XDkeVaNk/r+TBo2aAMkjPyRPEfZkSqCTijfWukW1zTZ2XLDfvFzbpRCuWZ6gxItgoa/FkILZm27HRh2yg==" }, "@rails/ujs": { - "version": "7.0.6", - "resolved": "https://registry.npmjs.org/@rails/ujs/-/ujs-7.0.6.tgz", - "integrity": "sha512-s5v3AC6AywOIFMz0RIMW83Xc8FPIvKMkP3ZHFlM4ISNkhdUwP9HdhVtxxo6z3dIhe9vI0Our2A8kN/QpUV02Qg==" + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@rails/ujs/-/ujs-7.0.7.tgz", + "integrity": "sha512-J2v5Ca7HgejO7diGKiDylaVDQKmbQ5FJih6Oo3hXuBKEuXlcaccJu64lj8MNVLaPVyZx0g4gaOQZQz95QEb/hg==" }, "@types/body-parser": { "version": "1.19.2", diff --git a/demo/package.json b/demo/package.json index 0ebbf9cc1d..cf5969ce1b 100644 --- a/demo/package.json +++ b/demo/package.json @@ -3,10 +3,10 @@ "private": true, "version": "0.1.0", "dependencies": { - "@primer/css": "^21.0.7", + "@primer/css": "^21.0.8", "@primer/primitives": "7.12.0", - "@rails/actioncable": "^7.0.6", - "@rails/ujs": "^7.0.6", + "@rails/actioncable": "^7.0.7", + "@rails/ujs": "^7.0.7", "turbolinks": "^5.2.0", "webpack-dev-server": "^4.15.1" } diff --git a/docs/contributors/setup.md b/docs/contributors/setup.md index ae0d836083..7a1b43bd40 100644 --- a/docs/contributors/setup.md +++ b/docs/contributors/setup.md @@ -7,7 +7,7 @@ The easiest way to get started contributing to Primer ViewComponents is with [Co 1. Clone `git@github.com:primer/view_components.git` 2. Install [Overmind](https://github.com/DarthSim/overmind) 3. Run `script/setup` to install dependencies -4. Run `script/dev`, this will run the documentation site on [localhost:5400](localhost:5400) and Lookbook on [localhost:4000](localhost:5000) +4. Run `script/dev`, this will run the Lookbook on [localhost:4000](localhost:4000) ### Lookbook diff --git a/lib/primer/view_components/version.rb b/lib/primer/view_components/version.rb index bf1a808bd3..97ccaaced2 100644 --- a/lib/primer/view_components/version.rb +++ b/lib/primer/view_components/version.rb @@ -5,7 +5,7 @@ module Primer module ViewComponents module VERSION MAJOR = 0 - MINOR = 8 + MINOR = 9 PATCH = 0 STRING = [MAJOR, MINOR, PATCH].join(".") diff --git a/package-lock.json b/package-lock.json index 988839604f..a8d3aa356d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@primer/view-components", - "version": "0.8.0", + "version": "0.9.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@primer/view-components", - "version": "0.8.0", + "version": "0.9.0", "license": "MIT", "dependencies": { "@github/auto-check-element": "^5.2.0", diff --git a/package.json b/package.json index 64ceb0cfb0..44b2e714df 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@primer/view-components", - "version": "0.8.0", + "version": "0.9.0", "description": "ViewComponents for the Primer Design System", "main": "app/assets/javascripts/primer_view_components.js", "module": "app/components/primer/primer.js", diff --git a/previews/primer/alpha/overlay_preview.rb b/previews/primer/alpha/overlay_preview.rb index 22db3ed19f..8d70a1d430 100644 --- a/previews/primer/alpha/overlay_preview.rb +++ b/previews/primer/alpha/overlay_preview.rb @@ -164,6 +164,11 @@ def middle_of_page_with_relative_container(title: "Test Overlay", subtitle: nil, }) end + # @label In an ActionMenu + def in_an_action_menu() + render_with_template(locals: {}) + end + # @label Dialog with header and footer # def dialog_with_header_footer diff --git a/previews/primer/alpha/overlay_preview/in_an_action_menu.html.erb b/previews/primer/alpha/overlay_preview/in_an_action_menu.html.erb new file mode 100644 index 0000000000..8b9c614fd6 --- /dev/null +++ b/previews/primer/alpha/overlay_preview/in_an_action_menu.html.erb @@ -0,0 +1,13 @@ +<%= render(Primer::Alpha::ActionMenu.new()) do |menu| %> + <% menu.with_show_button { "Menu" } %> + <% menu.with_item(label: "Open Overlay", content_arguments: { id: "overlay-show-my-overlay", popovertarget: "my-overlay" }) %> +<% end %> +<%= render(Primer::Alpha::Overlay.new( + id: "my-overlay", + title: "An overlay", + role: :dialog, + popover: "manual", +)) do |d| %> + <% d.with_header(title: "An overlay") %> + <% d.with_body { "This is an overlay" } %> +<% end %> diff --git a/static/info_arch.json b/static/info_arch.json index 8d42cdb92a..63f9010bfb 100644 --- a/static/info_arch.json +++ b/static/info_arch.json @@ -5910,6 +5910,19 @@ ] } }, + { + "preview_path": "primer/alpha/overlay/in_an_action_menu", + "name": "in_an_action_menu", + "snapshot": "false", + "skip_rules": { + "wont_fix": [ + "region" + ], + "will_fix": [ + "color-contrast" + ] + } + }, { "preview_path": "primer/alpha/overlay/dialog_with_header_footer", "name": "dialog_with_header_footer", diff --git a/static/previews.json b/static/previews.json index 979e4c6f4a..c7b453b0e8 100644 --- a/static/previews.json +++ b/static/previews.json @@ -4417,6 +4417,19 @@ ] } }, + { + "preview_path": "primer/alpha/overlay/in_an_action_menu", + "name": "in_an_action_menu", + "snapshot": "false", + "skip_rules": { + "wont_fix": [ + "region" + ], + "will_fix": [ + "color-contrast" + ] + } + }, { "preview_path": "primer/alpha/overlay/dialog_with_header_footer", "name": "dialog_with_header_footer", diff --git a/test/components/alpha/action_bar_test.rb b/test/components/alpha/action_bar_test.rb new file mode 100644 index 0000000000..cb409b315e --- /dev/null +++ b/test/components/alpha/action_bar_test.rb @@ -0,0 +1,19 @@ +# frozen_string_literal: true + +require "components/test_helper" + +module Primer + module Alpha + class ActionBarTest < Minitest::Test + include Primer::ComponentTestHelpers + + def test_renders_action_menu_items_with_type_button + render_preview(:default) + + assert_selector("action-menu[data-target=\"action-bar.moreMenu\"]", visible: :hidden) do + assert_selector("button[type=\"button\"]") + end + end + end + end +end