Skip to content

Commit 9704c60

Browse files
bennypowersheyMPzeroedin
committed
feat(dropdown)!: migrate pfe-dropdown to lit
**Features** - switched to options in docs. Added public expanded property. Updated tests - add CSS shadow parts **Fixes** - compose UI events - rename `pfeEvent` to `deprecatedCustomEvent` - remove extra focus() method - use focus-within in item - moved public focus method to private. (#1851) - add {{version}} to element classes - add guard for item clicks - prev next keyboard actions for items - fixed keyboard navigation. added tests to cover a11y tests - added better tests, weeded out race conditions **Tests** - e2e tests - fix types in e2e tests - e2e tests with page object model - build demo with optional shadowroot - pick nits in dropdown tests **Docs** - rearrange docs urls - inline docs - add changeset - use pfe-styles Co-Authored-By: Michael Potter <[email protected]> Co-Authored-By: Steven Spriggs <[email protected]>
1 parent 7076443 commit 9704c60

39 files changed

+1329
-1784
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/README.md‎

Lines changed: 78 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,142 +1,97 @@
1-
# PatternFly Element | Dropdown Element
2-
1+
# PatternFly Elements Dropdown
2+
33
This element will provide a dropdown menu of links and/or actions. It's comprised of one sub-component, `pfe-dropdown-item` , which denotes an item in the dropdown menu.
44

5-
## Usage
5+
Read more about Dropdown in the [PatternFly Elements Dropdown documentation](https://patternflyelements.org/components/dropdown)
66

7-
``` html
8-
<pfe-dropdown label="Dropdown">
9-
<pfe-dropdown-item item-type="link">
10-
<a href="https://bit.ly/3b9wvWg">Link 1</a>
11-
</pfe-dropdown-item>
12-
<pfe-dropdown-item item-type="link">
13-
<a href="https://bit.ly/3b9wvWg">Link 2</a>
14-
</pfe-dropdown-item>
15-
<pfe-dropdown-item item-type="link" disabled>
16-
<a href="https://bit.ly/3b9wvWg">Link 2</a>
17-
</pfe-dropdown-item>
18-
<pfe-dropdown-item item-type="separator"></pfe-dropdown-item>
19-
<pfe-dropdown-item item-type="action">
20-
<button>Action 1</button>
21-
</pfe-dropdown-item>
22-
</pfe-dropdown>
23-
```
7+
## Installation
248

25-
You can also provide a list of dropdown items dynamically:
9+
Load `<pfe-dropdown>` via CDN:
2610

27-
``` js
28-
let dropdown = document.querySelector("pfe-dropdown");
11+
```html
12+
<script src="https://unpkg.com/@patternfly/pfe-dropdown?module"></script>
2913
```
3014

31-
When pfe-dropdown is defined, via the `whenDefined` method. Pass an array of pfe-dropdown-item objects to `pfeDropdownOptions`.
15+
Or, if you are using [NPM](https://npm.im), install it
3216

33-
``` js
34-
customElements.whenDefined("pfe-dropdown").then(function() {
35-
dropdown.pfeDropdownOptions = [
36-
{
37-
href: "https://bit.ly/3b9wvWg",
38-
text: "Link 1",
39-
type: "link",
40-
disabled: false
41-
},
42-
{
43-
href: "https://bit.ly/3b9wvWg",
44-
text: "Link 2",
45-
type: "link",
46-
disabled: false
47-
},
48-
{
49-
href: "https://bit.ly/3b9wvWg",
50-
text: "Link 3",
51-
type: "link",
52-
disabled: true
53-
},
54-
{
55-
type: "separator"
56-
},
57-
{
58-
text: "Action 1",
59-
type: "action",
60-
disabled: false
61-
},
62-
{
63-
text: "Action 2",
64-
type: "action",
65-
disabled: true
66-
}
67-
];
68-
});
17+
```bash
18+
npm install @patternfly/pfe-dropdown
6919
```
7020

71-
Or you can add individual dropdown items with the `addDropdownOptions` method. Pass an array of pfe-dropdown-item objects to `addDropdownOptions` .
21+
Then once installed, import it to your application:
7222

73-
``` js
74-
customElements.whenDefined("pfe-dropdown").then(function() {
75-
dropdown.addDropdownOptions(
76-
[{
77-
href: "https://bit.ly/3b9wvWg",
78-
text: "Link 4",
79-
type: "link",
80-
disabled: false
81-
}]
82-
);
83-
});
23+
```js
24+
import '@patternfly/pfe-dropdown';
8425
```
8526

86-
## Slots
87-
88-
### Default slot
89-
90-
The default slot should contain at least one link or action `pfe-dropdown-item` .
91-
92-
## Attributes
93-
94-
### pfe-dropdown
95-
96-
* `label` : This is an optional attribute string that you can provide to describe your dropdown, which appears in the dropdown toggle.
97-
* `disabled` : This is an optional attribute that you can provide to disable your dropdown. Visually the dropdown will look disabled and mouse or keyboard events will have no impact on it.
98-
99-
### pfe-dropdown-item
100-
101-
* `item-type` : This is an optional attribute string that you should provide to indicate the type of dropdown item. This drives the appropriate assignment of accessibility attributes for each type of item.
102-
103-
- `link` : an HTML link
104-
- `action` : a button that triggers some sort of action
105-
- `separator` : a visual separator for items in the list
106-
107-
## API
108-
109-
### open
110-
Manually opens the dropdown menu.
111-
`document.querySelector("pfe-dropdown").open()` ;
112-
113-
### close
114-
115-
Manually closes the dropdown menu.
116-
`document.querySelector("pfe-dropdown").close()` ;
117-
118-
## Events
119-
120-
* `pfe-dropdown:change` : When an item is selected, this event is fired. It includes the inner text of the item that was selected.
121-
122-
## Test
123-
124-
npm run test
125-
126-
## Build
127-
128-
npm run build
27+
## Usage
12928

130-
## Demo
29+
``` html
30+
<pfe-dropdown label="Dropdown">
31+
<pfe-dropdown-item item-type="link">
32+
<a href="https://bit.ly/3b9wvWg">Link 1</a>
33+
</pfe-dropdown-item>
34+
<pfe-dropdown-item item-type="link">
35+
<a href="https://bit.ly/3b9wvWg">Link 2</a>
36+
</pfe-dropdown-item>
37+
<pfe-dropdown-item item-type="link" disabled>
38+
<a href="https://bit.ly/3b9wvWg">Link 2</a>
39+
</pfe-dropdown-item>
40+
<pfe-dropdown-item item-type="separator"></pfe-dropdown-item>
41+
<pfe-dropdown-item item-type="action">
42+
<button>Action 1</button>
43+
</pfe-dropdown-item>
44+
</pfe-dropdown>
45+
```
13146

132-
From the PFElements root directory, run:
47+
You can also provide a list of dropdown items dynamically:
13348

134-
npm start
49+
``` js
50+
const dropdown = document.querySelector("pfe-dropdown");
51+
dropdown.options = [
52+
{
53+
href: "https://bit.ly/3b9wvWg",
54+
text: "Link 1",
55+
type: "link",
56+
disabled: false
57+
},
58+
{
59+
href: "https://bit.ly/3b9wvWg",
60+
text: "Link 2",
61+
type: "link",
62+
disabled: false
63+
},
64+
{
65+
href: "https://bit.ly/3b9wvWg",
66+
text: "Link 3",
67+
type: "link",
68+
disabled: true
69+
},
70+
{
71+
type: "separator"
72+
},
73+
{
74+
text: "Action 1",
75+
type: "action",
76+
disabled: false
77+
},
78+
{
79+
text: "Action 2",
80+
type: "action",
81+
disabled: true
82+
}
83+
];
84+
```
13585

136-
## Code style
86+
Or you can add individual dropdown items with the `addDropdownOptions` method. Pass an array of pfe-dropdown-item objects to `addDropdownOptions` .
13787

138-
Dropdown (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
88+
``` js
89+
await dropdown.updateComplete;
90+
dropdown.addDropdownOptions([{
91+
href: "https://bit.ly/3b9wvWg",
92+
text: "Link 4",
93+
type: "link",
94+
disabled: false
95+
}]);
96+
```
13997

140-
[prettier]: https://github.com/prettier/prettier/
141-
[prettier-ed]: https://prettier.io/docs/en/editors.html
142-
[web-component-tester]: https://github.com/Polymer/web-component-tester

‎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+
});

0 commit comments

Comments
 (0)