Skip to content

Commit b7bf97a

Browse files
bennypowersbennypowers
committed
feat(dropdown)!: migrate pfe-dropdown to lit
fix(dropdown): compose UI events test(dropdown): e2e tests test(dropdown): fix types in e2e tests style(dropdown): lint test(dropdown): e2e tests with page object model test(dropdown): build demo with optional shadowroot docs(dropdown): rearrange docs urls docs(dropdown): inline docs docs(dropdown): refactor docs page docs(dropdown): add changeset docs(dropdown): update inline docs chore: updated docs for download items feat: switched to options in docs. Added public expanded property. Updated tests fix: prev next keyboard actions for items fixed keyboard navigation. added tests to cover a11y tests added better tests, weeded out race conditions chore: fix types fix: add guard for item clicks chore: update types style(dropdown): whitespace changes fix(dropdown): remove extra focus() method fix(dropdown): use focus-within in item fix(dropdown): moved public focus method to private. (#1851) test(dropdown): pick nits in dropdown tests Co-Authored-By: Michael Potter <[email protected]> fix(dropdown): add {{version}} to element classes docs(dropdown): use pfe-styles Co-Authored-By: Steven Spriggs <[email protected]> feat(dropdown): add CSS shadow parts
1 parent e7e3670 commit b7bf97a

38 files changed

+1251
-1661
lines changed

‎.changeset/dropdown.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
"@patternfly/pfe-dropdown": major
3+
---
4+
5+
## 🔥 Migrate to Lit
6+
7+
This release migrates `<pfe-dropdown>` to LitElement.
8+
9+
### NEW: CSS Shadow Parts!
10+
- Adds `container`, `button`, and `menu` CSS parts to `<pfe-dropdown>`
11+
- Adds `container` CSS part to `<pfe-dropdown-item>`
12+
13+
### Breaking Changes
14+
- Initial render is now [asynchronous](https://lit.dev/docs/components/lifecycle/#reactive-update-cycle).
15+
If your code assumes that shadow DOM is ready once the element is constructed, update it to `await element.updateComplete`
16+
- Deprecates `pfeDropdownOptions` DOM property. Use `options`
17+
- Deprecates `pfe-dropdown:change` event. Use `change`
18+
- Makes `isOpen` private
19+
20+
See [docs](https://patternflyelements.org/components/dropdown/) for more info

‎elements/pfe-dropdown/.babelrc‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎elements/pfe-dropdown/.editorconfig‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎elements/pfe-dropdown/.npmignore‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎elements/pfe-dropdown/_shared-assets.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@use "@patternfly/pfe-sass" as *;
2+
3+
@include configure(
4+
$name: 'dropdown',
5+
$variables: (
6+
spacing--vertical: calc(#{pfe-var(container-padding)} * .5),
7+
spacing--horizontal: calc(#{pfe-var(container-padding)} * .5),
8+
),
9+
);

‎elements/pfe-dropdown/custom-elements-manifest.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { pfeCustomElementsManifestConfig } from '@patternfly/pfe-tools/custom-elements-manifest.js';
2+
3+
export default pfeCustomElementsManifestConfig({
4+
globs: ['pfe-*.ts'],
5+
});

‎elements/pfe-dropdown/demo/index.html‎

Lines changed: 0 additions & 188 deletions
This file was deleted.

‎elements/pfe-dropdown/demo/pfe-dropdown.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<link rel="stylesheet" href="/core/pfe-styles/red-hat-font.min.css">
2+
<link rel="stylesheet" href="/core/pfe-styles/pfe-base.css">
3+
<link rel="stylesheet" href="/core/pfe-styles/pfe-context.css">
4+
<link rel="stylesheet" href="/core/pfe-styles/pfe-layouts.css">
5+
<link rel="stylesheet" href="/core/pfe-styles/pfe.css">
6+
7+
<style>
8+
:host {
9+
position: relative;
10+
}
11+
12+
#expandable-dropdown-band {
13+
--pfe-band__body--layout: repeat(auto-fill, minmax(300px, 1fr));
14+
}
15+
</style>
16+
17+
<pfe-band id="expandable-dropdown-band" color="lightest" size="small" use-grid>
18+
<pfe-card color="lightest" style="overflow: unset;">
19+
<h2>Expandable dropdown</h2>
20+
21+
<pfe-dropdown label="Dropdown" id="dropdown">
22+
<pfe-dropdown-item item-type="link">
23+
<a href="https://bit.ly/3b9wvWg">Link 1</a>
24+
</pfe-dropdown-item>
25+
<pfe-dropdown-item item-type="link">
26+
<a href="https://bit.ly/3b9wvWg">Link 2</a>
27+
</pfe-dropdown-item>
28+
<pfe-dropdown-item item-type="link" disabled>
29+
<a href="https://bit.ly/3b9wvWg">Link 3</a>
30+
</pfe-dropdown-item>
31+
<pfe-dropdown-item item-type="separator"></pfe-dropdown-item>
32+
<pfe-dropdown-item item-type="action">
33+
<button>Action 1</button>
34+
</pfe-dropdown-item>
35+
<pfe-dropdown-item item-type="action" disabled>
36+
<button>Action 2</button>
37+
</pfe-dropdown-item>
38+
<pfe-dropdown-item item-type="link">
39+
<a href="https://bit.ly/3b9wvWg">Link 4</a>
40+
</pfe-dropdown-item>
41+
</pfe-dropdown>
42+
<p id="example-dropdown-1">Selected Action: <span id="example-action-1"></span></p>
43+
</pfe-card>
44+
45+
<pfe-card color="lightest" style="overflow: unset;">
46+
<h2>Dropdown with custom dropdown options</h2>
47+
<pfe-dropdown label="Dropdown" id="dropdown-with-custom-options">
48+
</pfe-dropdown>
49+
<p id="example-dropdown-2">Selected Action: <span id="example-action-2"></span></p>
50+
</pfe-card>
51+
52+
<pfe-card color="lightest" style="overflow: unset;">
53+
<h2>Disabled dropdown</h2>
54+
55+
<pfe-dropdown label="Disabled" disabled>
56+
<pfe-dropdown-item item-type="link">
57+
<a href="https://bit.ly/3b9wvWg">Link 1</a>
58+
</pfe-dropdown-item>
59+
<pfe-dropdown-item item-type="link">
60+
<a href="https://bit.ly/3b9wvWg">Link 2</a>
61+
</pfe-dropdown-item>
62+
<pfe-dropdown-item item-type="link" disabled>
63+
<a href="https://bit.ly/3b9wvWg">Link 2</a>
64+
</pfe-dropdown-item>
65+
<pfe-dropdown-item item-type="separator"></pfe-dropdown-item>
66+
<pfe-dropdown-item item-type="action">
67+
<button>Action 1</button>
68+
</pfe-dropdown-item>
69+
</pfe-dropdown>
70+
</pfe-card>
71+
72+
<pfe-card color="lightest" style="overflow: unset;">
73+
<h2>Expandable dropdown with all disabled options</h2>
74+
75+
<pfe-dropdown label="Dropdown">
76+
<pfe-dropdown-item item-type="link" disabled>
77+
<a href="https://bit.ly/3b9wvWg">Link 1</a>
78+
</pfe-dropdown-item>
79+
<pfe-dropdown-item item-type="link" disabled>
80+
<a href="https://bit.ly/3b9wvWg">Link 2</a>
81+
</pfe-dropdown-item>
82+
<pfe-dropdown-item item-type="link" disabled>
83+
<a href="https://bit.ly/3b9wvWg">Link 3</a>
84+
</pfe-dropdown-item>
85+
</pfe-dropdown>
86+
</pfe-card>
87+
</pfe-band>

0 commit comments

Comments
 (0)