Skip to content

Commit 26b1faa

Browse files
Gili-Greenbergerbennypowers
Gili-Greenberger
and
bennypowers
authored
feat(hint): create <pf-hint> element (#2953)
* feat: add pf-hint component * chore: add changeset for pf-hint component * feat(hint): add functional dropdown with proper layout * fix(hint): align dropdown under actions toggle * docs(hint): align README with project conventions * docs: update changeset * docs: fix kebab usage * docs: improve dropdown usage * docs: icon usage * docs: icon usage * test(hint): don't assert on shadow dom --------- Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]> Co-authored-by: Benny Powers <[email protected]>
1 parent 5069939 commit 26b1faa

File tree

11 files changed

+650
-2
lines changed

11 files changed

+650
-2
lines changed

‎.changeset/real-comics-leave.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"@patternfly/elements": minor
3+
---
4+
5+
✨ Added `<pf-hint>` component
6+
7+
A **hint** is in-app messaging that provides a one-step reminder, explanation, or call to action for a page or modal. Hints provide information about an interaction or prerequisite step that might not be immediately obvious to the user.
8+

‎elements/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"./pf-dropdown/pf-dropdown-item.js": "./pf-dropdown/pf-dropdown-item.js",
3232
"./pf-dropdown/pf-dropdown-menu.js": "./pf-dropdown/pf-dropdown-menu.js",
3333
"./pf-dropdown/pf-dropdown.js": "./pf-dropdown/pf-dropdown.js",
34+
"./pf-hint/pf-hint.js": "./pf-hint/pf-hint.js",
3435
"./pf-icon/pf-icon.js": "./pf-icon/pf-icon.js",
3536
"./pf-jazz-hands/pf-jazz-hands.js": "./pf-jazz-hands/pf-jazz-hands.js",
3637
"./pf-jump-links/pf-jump-links-item.js": "./pf-jump-links/pf-jump-links-item.js",
@@ -128,7 +129,8 @@
128129
"castastrophe (https://github.com/castastrophe)",
129130
"Wes Ruvalcaba",
130131
"Rohit Bharmal (https://github.com/Rohit2601)",
131-
"Ajinyka Shinde <[email protected]>"
132+
"Ajinyka Shinde <[email protected]>",
133+
"Gili Greenberger (https://github.com/Gili-Greenberger)"
132134
],
133135
"dependencies": {
134136
"@lit/context": "^1.1.5",

‎elements/pf-dropdown/pf-dropdown.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,14 @@ pf-dropdown-menu,
214214
--pf-c-dropdown__menu--Top,
215215
calc(100% + var(--pf-global--spacer--xs, 0.25rem))
216216
) !important;
217-
left: 0 !important;
217+
left: var(
218+
--pf-c-dropdown__menu--Left,
219+
0
220+
) !important;
221+
right: var(
222+
--pf-c-dropdown__menu--Right,
223+
auto
224+
) !important;
218225
z-index: var(
219226
--pf-c-dropdown__menu--ZIndex,
220227
var(--pf-global--ZIndex--sm, 200)

‎elements/pf-hint/README.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
# PatternFly Elements Hint
2+
3+
A **hint** is in-app messaging that provides a one-step reminder, explanation, or call to action for a page or modal. Hints provide information about an interaction or prerequisite step that might not be immediately obvious to the user.
4+
5+
Read more about Hint in the [PatternFly Elements Hint documentation](https://patternflyelements.org/components/hint)
6+
7+
## Installation
8+
9+
Load `<pf-hint>` via CDN:
10+
11+
```html
12+
<script src="https://jspm.dev/@patternfly/elements/pf-hint/pf-hint.js"></script>
13+
```
14+
15+
Or, if you are using [NPM](https://npm.im/), install it
16+
17+
```bash
18+
npm install @patternfly/elements
19+
```
20+
21+
Then once installed, import it to your application:
22+
23+
```js
24+
import '@patternfly/elements/pf-hint/pf-hint.js';
25+
```
26+
27+
## Usage
28+
29+
### Default with no title
30+
31+
Basic hint without a title, used for simple informational messages.
32+
33+
```html
34+
<pf-hint>
35+
Welcome to the new documentation experience.
36+
<a href="#">Learn more about the improved features</a>.
37+
</pf-hint>
38+
```
39+
40+
### Hint with title
41+
42+
Add a title to your hint to provide more context to the user.
43+
44+
```html
45+
<pf-hint>
46+
<span slot="title">Do more with Find it Fix it capabilities</span>
47+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
48+
</pf-hint>
49+
```
50+
51+
### Hint with footer
52+
53+
```html
54+
<pf-hint>
55+
<span slot="title">Do more with Find it Fix it capabilities</span>
56+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
57+
<pf-button slot="footer" variant="link" inline>
58+
<a href="#">Try it for 90 days</a>
59+
</pf-button>
60+
</pf-hint>
61+
```
62+
63+
### Hint with actions
64+
65+
```html
66+
<pf-hint>
67+
<pf-dropdown slot="actions">
68+
<pf-button slot="toggle" plain aria-label="Actions">
69+
<pf-icon icon="ellipsis-v"></pf-icon>
70+
</pf-button>
71+
<pf-dropdown-menu>
72+
<pf-dropdown-item>
73+
<a href="#">Link</a>
74+
</pf-dropdown-item>
75+
<pf-dropdown-item>
76+
<button type="button">Action</button>
77+
</pf-dropdown-item>
78+
</pf-dropdown-menu>
79+
</pf-dropdown>
80+
<span slot="title">Do more with Find it Fix it capabilities</span>
81+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
82+
</pf-hint>
83+
```
84+
85+
## Slots
86+
87+
- `(default)` – Body content of the hint.
88+
- `title` – Optional title that appears above the body copy.
89+
- `footer` – Optional footer content, typically links or buttons.
90+
- `actions` – Optional actions menu (for example, a kebab dropdown in the top-right corner).
91+
92+
## CSS Custom Properties
93+
94+
- `--pf-c-hint--BackgroundColor` – Background color (`var(--pf-global--palette--blue-50, #e7f1fa)`).
95+
- `--pf-c-hint--BorderColor` – Border color (`var(--pf-global--palette--blue-100, #bee1f4)`).
96+
- `--pf-c-hint--BorderWidth` – Border width (`1px`).
97+
- `--pf-c-hint--BorderRadius` – Border radius (`var(--pf-global--BorderRadius--sm, 3px)`).
98+
- `--pf-c-hint--PaddingTop/Right/Bottom/Left` – Padding around the container (`var(--pf-global--spacer--lg, 1.5rem)`).
99+
- `--pf-c-hint__title--FontSize` – Title font size (`1.125rem`).
100+
- `--pf-c-hint__title--FontWeight` – Title font weight (`var(--pf-global--FontWeight--semi-bold, 700)`).
101+
- `--pf-c-hint__body--FontSize` – Body font size (`1rem`).
102+
- `--pf-c-hint__body--Color` – Body text color (`var(--pf-global--Color--100, #151515)`).
103+
- `--pf-c-hint__footer--child--MarginRight` – Spacing between footer children (`1rem`).
104+
- `--pf-c-hint__actions--c-dropdown--MarginTop` – Offset for dropdown actions (`calc(0.375rem * -1)`).
105+
106+
## CSS Parts
107+
108+
- `container`
109+
- `title`
110+
- `body`
111+
- `footer`
112+
- `actions`

‎elements/pf-hint/demo/index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<h2>Default with no title</h2>
2+
<pf-hint>
3+
Welcome to the new documentation experience.
4+
<a href="#">Learn more about the improved features</a>.
5+
</pf-hint>
6+
7+
<pf-hint>
8+
<pf-dropdown slot="actions">
9+
<pf-button slot="toggle" plain icon="ellipsis-v" aria-label="Actions"></pf-button>
10+
<pf-dropdown-menu slot="menu">
11+
<pf-dropdown-item>Link</pf-dropdown-item>
12+
<pf-dropdown-item>Action</pf-dropdown-item>
13+
<pf-dropdown-item disabled>Disabled Link</pf-dropdown-item>
14+
<pf-dropdown-item disabled>Disabled Action</pf-dropdown-item>
15+
<hr>
16+
<pf-dropdown-item>Separated Link</pf-dropdown-item>
17+
<pf-dropdown-item>Separated Action</pf-dropdown-item>
18+
</pf-dropdown-menu>
19+
</pf-dropdown>
20+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
21+
<a slot="footer" href="#">Try it for 90 days</a>
22+
</pf-hint>
23+
24+
<script type="module">
25+
import '@patternfly/elements/pf-hint/pf-hint.js';
26+
import '@patternfly/elements/pf-dropdown/pf-dropdown.js';
27+
import '@patternfly/elements/pf-button/pf-button.js';
28+
</script>
29+
30+
<style>
31+
pf-hint {
32+
margin-block-end: 2rem;
33+
}
34+
35+
h2 {
36+
margin-block-start: 2rem;
37+
margin-block-end: 1rem;
38+
font-size: 1.5rem;
39+
font-weight: 600;
40+
}
41+
42+
h2:first-child {
43+
margin-block-start: 0;
44+
}
45+
46+
47+
</style>

‎elements/pf-hint/demo/with-title.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<h2>Hint with title</h2>
2+
3+
<pf-hint>
4+
<pf-dropdown slot="actions">
5+
<pf-button slot="toggle" plain icon="ellipsis-v" aria-label="Actions"></pf-button>
6+
<pf-dropdown-menu slot="menu">
7+
<pf-dropdown-item>Link</pf-dropdown-item>
8+
<pf-dropdown-item>Action</pf-dropdown-item>
9+
<pf-dropdown-item disabled>Disabled Link</pf-dropdown-item>
10+
<pf-dropdown-item disabled>Disabled Action</pf-dropdown-item>
11+
<hr>
12+
<pf-dropdown-item>Separated Link</pf-dropdown-item>
13+
<pf-dropdown-item>Separated Action</pf-dropdown-item>
14+
</pf-dropdown-menu>
15+
</pf-dropdown>
16+
<span slot="title">Do more with Find it Fix it capabilities</span>
17+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
18+
</pf-hint>
19+
20+
<pf-hint>
21+
<pf-dropdown slot="actions">
22+
<pf-button slot="toggle" plain icon="ellipsis-v" aria-label="Actions"></pf-button>
23+
<pf-dropdown-menu slot="menu">
24+
<pf-dropdown-item>Link</pf-dropdown-item>
25+
<pf-dropdown-item>Action</pf-dropdown-item>
26+
<pf-dropdown-item disabled>Disabled Link</pf-dropdown-item>
27+
<pf-dropdown-item disabled>Disabled Action</pf-dropdown-item>
28+
<hr>
29+
<pf-dropdown-item>Separated Link</pf-dropdown-item>
30+
<pf-dropdown-item>Separated Action</pf-dropdown-item>
31+
</pf-dropdown-menu>
32+
</pf-dropdown>
33+
<span slot="title">Do more with Find it Fix it capabilities</span>
34+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
35+
<a slot="footer" href="#">Try it for 90 days</a>
36+
</pf-hint>
37+
38+
<script type="module">
39+
import '@patternfly/elements/pf-hint/pf-hint.js';
40+
import '@patternfly/elements/pf-dropdown/pf-dropdown.js';
41+
import '@patternfly/elements/pf-button/pf-button.js';
42+
</script>
43+
44+
<style>
45+
pf-hint {
46+
margin-block-end: 2rem;
47+
}
48+
49+
h2 {
50+
margin-block-start: 2rem;
51+
margin-block-end: 1rem;
52+
font-size: 1.5rem;
53+
font-weight: 600;
54+
}
55+
56+
h2:first-child {
57+
margin-block-start: 0;
58+
}
59+
</style>

‎elements/pf-hint/docs/pf-hint.md‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
{% renderOverview %}
2+
<pf-hint>
3+
Welcome to the new documentation experience.
4+
<a href="#">Learn more about the improved features</a>.
5+
</pf-hint>
6+
{% endrenderOverview %}
7+
8+
{% band header="Usage" %}
9+
### Default with no title
10+
Basic hint without a title, used for simple informational messages.
11+
12+
{% htmlexample %}
13+
<pf-hint>
14+
Welcome to the new documentation experience.
15+
<a href="#">Learn more about the improved features</a>.
16+
</pf-hint>
17+
{% endhtmlexample %}
18+
19+
### Hint with title
20+
Add a title to your hint by using the `title` slot to provide more context.
21+
22+
{% htmlexample %}
23+
<pf-hint>
24+
<span slot="title">Do more with Find it Fix it capabilities</span>
25+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
26+
</pf-hint>
27+
{% endhtmlexample %}
28+
29+
### With a footer
30+
Add action links or buttons to the footer using the `footer` slot.
31+
32+
{% htmlexample %}
33+
<pf-hint>
34+
<span slot="title">Do more with Find it Fix it capabilities</span>
35+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
36+
<pf-button slot="footer" variant="link" inline>
37+
<a href="#">Try it for 90 days</a>
38+
</pf-button>
39+
</pf-hint>
40+
{% endhtmlexample %}
41+
42+
### With actions
43+
Add an actions menu (like a kebab dropdown) using the `actions` slot.
44+
45+
{% htmlexample %}
46+
<pf-hint>
47+
<pf-dropdown slot="actions">
48+
<pf-button slot="toggle" plain icon="ellipsis-v" aria-label="Actions"></pf-button>
49+
<pf-dropdown-menu slot="menu">
50+
<pf-dropdown-item>
51+
<a href="#">Link</a>
52+
</pf-dropdown-item>
53+
<pf-dropdown-item>
54+
<button type="button">Action</button>
55+
</pf-dropdown-item>
56+
</pf-dropdown-menu>
57+
</pf-dropdown>
58+
<span slot="title">Do more with Find it Fix it capabilities</span>
59+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
60+
</pf-hint>
61+
{% endhtmlexample %}
62+
63+
### Complete example
64+
A hint with all available slots.
65+
66+
{% htmlexample %}
67+
<pf-hint>
68+
<pf-dropdown slot="actions">
69+
<pf-button slot="toggle" plain icon="ellipsis-v" aria-label="Actions"></pf-button>
70+
<pf-dropdown-menu slot="menu">
71+
<pf-dropdown-item>
72+
<a href="#">Link</a>
73+
</pf-dropdown-item>
74+
<pf-dropdown-item>
75+
<button type="button">Action</button>
76+
</pf-dropdown-item>
77+
<pf-dropdown-item disabled>
78+
<a href="#">Disabled link</a>
79+
</pf-dropdown-item>
80+
</pf-dropdown-menu>
81+
</pf-dropdown>
82+
<span slot="title">Do more with Find it Fix it capabilities</span>
83+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
84+
<pf-button slot="footer" variant="link" inline>
85+
<a href="#">Try it for 90 days</a>
86+
</pf-button>
87+
</pf-hint>
88+
{% endhtmlexample %}
89+
90+
{% endband %}
91+
92+
{% renderSlots %}{% endrenderSlots %}
93+
94+
{% renderAttributes %}{% endrenderAttributes %}
95+
96+
{% renderProperties %}{% endrenderProperties %}
97+
98+
{% renderMethods %}{% endrenderMethods %}
99+
100+
{% renderEvents %}{% endrenderEvents %}
101+
102+
{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
103+
104+
{% renderCssParts %}{% endrenderCssParts %}

0 commit comments

Comments
 (0)