Skip to content

Commit 528550c

Browse files
bennypowersheyMPzeroedin
committed
feat(progress-steps)!: migrate pfe-progress-steps to lit
**Features** - add CSS parts - add {{version}} to element classes **Fixes** - remove erroneous count property (#1822) - remove `has_` attrs **Docs** - added pfe-progress-steps-item slots to docs (#1825) - fix demo - inline docs - refactor docs page - add changeset - update inline docs - use pfe-styles - update slot definitions for docs (#1823) **Tests** - e2e tests with page object model Co-authored-by: Michael Potter <[email protected]> Co-Authored-By: Steven Spriggs <[email protected]>
1 parent 6c0d86c commit 528550c

27 files changed

+1089
-1371
lines changed

‎.changeset/progress-steps.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
"@patternfly/pfe-progress-steps": major
3+
---
4+
5+
## 🔥 Migrate to Lit
6+
7+
This release migrates `<pfe-progress-steps>` to LitElement.
8+
9+
### NEW: CSS Shadow Parts!
10+
- Adds the `progress-bar` CSS part to `<pfe-progress-steps>`
11+
- Adds the `circle`, `content`, `title`, and `description` CSS parts to `<pfe-progress-steps-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+
17+
18+
See [docs](https://patternflyelements.org/components/progress-steps/) for more info

‎elements/pfe-progress-steps/README.md‎

Lines changed: 33 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,45 @@
1-
# PatternFly Element | Progress stepper element
1+
# PatternFly Elements Progress Steps
2+
23
A component that gives the user a visual representation of the current state of their progress through an application (typically a multistep form).
34

4-
## Usage
5-
Describe how best to use this web component along with best practices.
6-
7-
```html
8-
<pfe-progress-steps>
9-
<pfe-progress-steps-item state="active" current>
10-
<div slot="title">Current</div>
11-
<a slot="link" href="#">View current step</a>
12-
</pfe-progress-steps-item>
13-
<pfe-progress-steps-item>
14-
<div slot="title">Next</div>
15-
<a slot="link" href="#">View next step</a>
16-
</pfe-progress-steps-item>
17-
<pfe-progress-steps-item>
18-
<div slot="title">Last</div>
19-
<a slot="link" href="#">View last step</a>
20-
</pfe-progress-steps-item>
21-
</pfe-progress-steps>
22-
```
23-
24-
## Slots
25-
26-
### pfe-progress-steps-item
27-
28-
- `title`: The item's short descriptive title.
29-
- `description`: A short description of what the item represents.
30-
31-
## Attributes
32-
33-
### pfe-progress-steps
34-
35-
- `vertical`: Describe each available attribute and what function is serves.
36-
37-
### pfe-progress-steps-item
38-
39-
- `current`: Indicates if this item is the current active item.
40-
- `state`: Describes the state of the current item; allows "inactive", "done", or "error".
5+
Read more about Progress Steps in the [PatternFly Elements Progress Steps documentation](https://patternflyelements.org/components/progress-steps)
416

42-
## Variable hooks
7+
## Installation
438

44-
Available hooks for styling:
9+
Load `<pfe-progress-steps>` via CDN:
4510

46-
| Variable name | Default value | Region |
47-
| --- | --- | --- |
48-
| `--pfe-progress-steps__item--Width` | var(--pfe-theme--ui--element--size--lg, 75px) | item |
49-
| `--pfe-progress-steps__circle--Size` | var(--pfe-theme--ui--element--size--md, 32px) | circle |
50-
| `--pfe-progress-steps__progress-bar--Color` | var(--pfe-theme--color--ui--border--lighter, #d2d2d2) | progress |
51-
| `--pfe-progress-steps__progress-bar--Fill` | var(--pfe-theme--color--ui-accent, #06c) | progress |
52-
| `--pfe-progress-steps__progress-bar--Width` | var(--pfe-theme--ui--border-width--md, 2px) | progress |
53-
| --- | --- | --- |
54-
| `--pfe-progress-steps-item--Width` | auto | |
55-
| `--pfe-progress-steps-item--MinHeight--vertical` | var(--pfe-progress-steps__item--Width, var(--pfe-theme--ui--element--size--lg, 75px)) | |
56-
| `--pfe-progress-steps-item__circle--Size` | var(--pfe-theme--ui--element--size--md, 32px) | circle |
57-
| `--pfe-progress-steps-item__circle--Color` | var(--pfe-theme--color--feedback--info, #06c) | circle |
58-
| `--pfe-progress-steps-item__circle--Color--hover` | var(--pfe-theme--color--feedback--info, #06c) | circle |
59-
| `--pfe-progress-steps-item__circle--Color--focus` | var(--pfe-theme--color--feedback--info, #06c) | circle |
60-
| `--pfe-progress-steps-item__circle--Background` | radial-gradient(circle, white 60%, rgba(255, 255, 255, 0) 61%) | circle |
61-
| `--pfe-progress-steps-item__circle--Width` | var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px)) | circle |
62-
| `--pfe-progress-steps-item__circle--Height` | var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px)) | circle |
63-
| `--pfe-progress-steps-item__circle-wrapper--Width` | var(--pfe-progress-steps-item__circle--Width, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) | circle |
64-
| `--pfe-progress-steps-item__circle-wrapper--Height` | var(--pfe-progress-steps-item__circle--Height, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) | circle |
65-
| `--pfe-progress-steps-item__title--Color` | var(--pfe-theme--color--text, #151515) | title |
66-
| `--pfe-progress-steps-item__title--Color--active` | var(--pfe-theme--color--feedback--info, #06c) | title |
67-
| `--pfe-progress-steps-item__title--Color--error` | var(--pfe-theme--color--feedback--critical--lighter, #c9190b) | title |
68-
| `--pfe-progress-steps-item__title--MarginTop--vertical` | calc( var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px)) / 6) | title |
69-
| `--pfe-progress-steps-item__description--Color` | var(--pfe-theme--color--text--muted, #6a6e73) | description |
70-
| `--pfe-progress-steps-item__description--Color--error` | var(--pfe-theme--color--feedback--critical--lighter, #c9190b) | description |
71-
| `--pfe-progress-steps-item--spacer` | var(--pfe-theme--content-spacer--body--sm, 0.5rem) | |
72-
| `--pfe-progress-steps-item__circle-inner--Width` | calc( var(--pfe-progress-steps-item__circle--Width, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) / 2.2) | circle |
73-
| `--pfe-progress-steps-item__circle-inner--Height` | calc( var(--pfe-progress-steps-item__circle--Height, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) / 2.2) | circle |
74-
| `--pfe-progress-steps-item__circle-outer--Width` | var(--pfe-progress-steps-item__circle--Width, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) | circle |
75-
| `--pfe-progress-steps-item__circle-outer--Height` | var(--pfe-progress-steps-item__circle--Height, var(--pfe-progress-steps-item__circle--Size, var(--pfe-theme--ui--element--size--md, 32px))) | circle |
76-
77-
## Dev
78-
79-
`npm start`
80-
81-
## Test
82-
83-
`npm run test`
84-
85-
## Build
11+
```html
12+
<script src="https://unpkg.com/@patternfly/pfe-progress-steps?module"></script>
13+
```
8614

87-
`npm run build`
15+
Or, if you are using [NPM](https://npm.im), install it
8816

89-
## Demo
17+
```bash
18+
npm install @patternfly/pfe-progress-steps
19+
```
9020

91-
From the PFElements root directory, run:
21+
Then once installed, import it to your application:
9222

93-
`npm run demo`
23+
```js
24+
import '@patternfly/pfe-progress-steps';
25+
```
9426

95-
## Code style
27+
## Usage
9628

97-
Progress stepper (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.
29+
```html
30+
<pfe-progress-steps>
31+
<pfe-progress-steps-item state="active" current>
32+
<div slot="title">Current</div>
33+
<a slot="link" href="#">View current step</a>
34+
</pfe-progress-steps-item>
35+
<pfe-progress-steps-item>
36+
<div slot="title">Next</div>
37+
<a slot="link" href="#">View next step</a>
38+
</pfe-progress-steps-item>
39+
<pfe-progress-steps-item>
40+
<div slot="title">Last</div>
41+
<a slot="link" href="#">View last step</a>
42+
</pfe-progress-steps-item>
43+
</pfe-progress-steps>
44+
```
9845

99-
[prettier]: https://github.com/prettier/prettier/
100-
[prettier-ed]: https://prettier.io/docs/en/editors.html
101-
[web-component-tester]: https://github.com/Polymer/web-component-tester

elements/pfe-progress-steps/src/_shared-assets.scss renamed to elements/pfe-progress-steps/_shared-assets.scss

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
// Please see the pfe-sass README for guidance on using these tools
2-
@import "../../pfe-sass/pfe-sass";
1+
@use "@patternfly/patternfly/sass-utilities/all" as *;
2+
@use "@patternfly/pfe-sass" as *;
33

44
// Example local variable, using BEM format
55
// --pfe-progress-steps__region--Property: value;
66

7-
$LOCAL-VARIABLES: (
7+
@include configure(
8+
$variables: (
89
item: (
910
size: 75px,
1011
// Note: this is the fallback value; these are overwritten by the JS
@@ -15,5 +16,6 @@ $LOCAL-VARIABLES: (
1516
circle: (
1617
size: pfe-var(ui--element--size), // 20px
1718
size--active: pfe-var(ui--element--size--md) // 32px
18-
)
19-
);
19+
),
20+
),
21+
);

‎elements/pfe-progress-steps/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-progress-steps/demo/demo.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
:host {
2+
padding: 5em;
3+
}
4+
5+
pfe-progress-steps+pfe-progress-steps {
6+
margin-top: 2em;
7+
}
8+
9+
*:is(h1, h2) {
10+
margin-top: 2em;
11+
}
12+
13+
/* Center */
14+
.pfe-l-grid.pfe-m-gutters > * {
15+
margin-left: auto;
16+
margin-right: auto;
17+
}
18+
19+
/* Styles for redhat.com */
20+
.rhdotcom {
21+
--pfe-progress-steps-item__circle--color--active: #EE0000;
22+
--pfe-progress-steps-item__title--Color--active: #151515;
23+
--pfe-progress-steps__progress-bar--color--active: #6A6E73;
24+
}

0 commit comments

Comments
 (0)