Skip to content

Commit f051212

Browse files
Gili-GreenbergerGili-Greenberger
committed
feat: add pf-hint component
1 parent 916823a commit f051212

File tree

9 files changed

+667
-0
lines changed

9 files changed

+667
-0
lines changed

‎elements/package.json‎

Lines changed: 1 addition & 0 deletions
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",

‎elements/pf-hint/README.md‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
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="trigger" 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+
| Slot | Description |
88+
| --------- | -------------------------------------------------------------------------- |
89+
| (default) | Body content of the hint |
90+
| `title` | Optional title for the hint |
91+
| `footer` | Optional footer content, typically containing action links or buttons |
92+
| `actions` | Optional actions menu (e.g., kebab dropdown menu in the top-right corner) |
93+
94+
## CSS Custom Properties
95+
96+
| Property | Description | Default |
97+
| --------------------------------- | ------------------------------------ | ---------------------------------------------- |
98+
| `--pf-c-hint--BackgroundColor` | Background color of the hint | `var(--pf-global--BackgroundColor--light-300)` |
99+
| `--pf-c-hint--BorderRadius` | Border radius of the hint container | `var(--pf-global--BorderRadius--sm)` |
100+
| `--pf-c-hint--Padding` | Padding around the hint content | `var(--pf-global--spacer--md)` |
101+
| `--pf-c-hint__title--FontSize` | Font size of the title | `var(--pf-global--FontSize--md)` |
102+
| `--pf-c-hint__title--FontWeight` | Font weight of the title | `var(--pf-global--FontWeight--semi-bold)` |
103+
| `--pf-c-hint__body--FontSize` | Font size of the body text | `var(--pf-global--FontSize--sm)` |
104+
| `--pf-c-hint__body--Color` | Color of the body text | `var(--pf-global--Color--100)` |
105+
106+
## CSS Parts
107+
108+
| Part | Description |
109+
| ----------- | ------------------------ |
110+
| `container` | The hint container |
111+
| `title` | The title element |
112+
| `body` | The body element |
113+
| `footer` | The footer element |
114+
| `actions` | The actions element |

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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+
<button slot="actions" class="pf-c-dropdown__toggle pf-m-plain" aria-label="Actions">
9+
<svg fill="currentColor" height="1em" width="1em" viewBox="0 0 192 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;">
10+
<path d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"></path>
11+
</svg>
12+
</button>
13+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
14+
<a slot="footer" href="#">Try it for 90 days</a>
15+
</pf-hint>
16+
17+
<script type="module">
18+
import '@patternfly/elements/pf-hint/pf-hint.js';
19+
</script>
20+
21+
<style>
22+
pf-hint {
23+
margin-block-end: 2rem;
24+
}
25+
26+
h2 {
27+
margin-block-start: 2rem;
28+
margin-block-end: 1rem;
29+
font-size: 1.5rem;
30+
font-weight: 600;
31+
}
32+
33+
h2:first-child {
34+
margin-block-start: 0;
35+
}
36+
37+
.pf-c-dropdown__toggle {
38+
background: transparent;
39+
border: none;
40+
padding: 0.25rem 0.5rem;
41+
cursor: pointer;
42+
color: var(--pf-global--Color--100, #151515);
43+
}
44+
45+
.pf-c-dropdown__toggle:hover {
46+
background-color: var(--pf-global--BackgroundColor--200, #f0f0f0);
47+
}
48+
49+
.pf-m-plain {
50+
border: none;
51+
}
52+
</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+
<button slot="actions" class="pf-c-dropdown__toggle pf-m-plain" aria-label="Actions">
5+
<svg fill="currentColor" height="1em" width="1em" viewBox="0 0 192 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;">
6+
<path d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"></path>
7+
</svg>
8+
</button>
9+
<span slot="title">Do more with Find it Fix it capabilities</span>
10+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
11+
</pf-hint>
12+
13+
<pf-hint>
14+
<button slot="actions" class="pf-c-dropdown__toggle pf-m-plain" aria-label="Actions">
15+
<svg fill="currentColor" height="1em" width="1em" viewBox="0 0 192 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;">
16+
<path d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"></path>
17+
</svg>
18+
</button>
19+
<span slot="title">Do more with Find it Fix it capabilities</span>
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+
</script>
27+
28+
<style>
29+
pf-hint {
30+
margin-block-end: 2rem;
31+
}
32+
33+
h2 {
34+
margin-block-start: 2rem;
35+
margin-block-end: 1rem;
36+
font-size: 1.5rem;
37+
font-weight: 600;
38+
}
39+
40+
h2:first-child {
41+
margin-block-start: 0;
42+
}
43+
44+
.pf-c-dropdown__toggle {
45+
background: transparent;
46+
border: none;
47+
padding: 0.25rem 0.5rem;
48+
cursor: pointer;
49+
color: var(--pf-global--Color--100, #151515);
50+
}
51+
52+
.pf-c-dropdown__toggle:hover {
53+
background-color: var(--pf-global--BackgroundColor--200, #f0f0f0);
54+
}
55+
56+
.pf-m-plain {
57+
border: none;
58+
}
59+
</style>

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

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
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="trigger" plain aria-label="Actions">
49+
<pf-icon icon="ellipsis-v"></pf-icon>
50+
</pf-button>
51+
<pf-dropdown-menu>
52+
<pf-dropdown-item>
53+
<a href="#">Link</a>
54+
</pf-dropdown-item>
55+
<pf-dropdown-item>
56+
<button type="button">Action</button>
57+
</pf-dropdown-item>
58+
</pf-dropdown-menu>
59+
</pf-dropdown>
60+
<span slot="title">Do more with Find it Fix it capabilities</span>
61+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
62+
</pf-hint>
63+
{% endhtmlexample %}
64+
65+
### Complete example
66+
A hint with all available slots.
67+
68+
{% htmlexample %}
69+
<pf-hint>
70+
<pf-dropdown slot="actions">
71+
<pf-button slot="trigger" plain aria-label="Actions">
72+
<pf-icon icon="ellipsis-v"></pf-icon>
73+
</pf-button>
74+
<pf-dropdown-menu>
75+
<pf-dropdown-item>
76+
<a href="#">Link</a>
77+
</pf-dropdown-item>
78+
<pf-dropdown-item>
79+
<button type="button">Action</button>
80+
</pf-dropdown-item>
81+
<pf-dropdown-item disabled>
82+
<a href="#">Disabled link</a>
83+
</pf-dropdown-item>
84+
</pf-dropdown-menu>
85+
</pf-dropdown>
86+
<span slot="title">Do more with Find it Fix it capabilities</span>
87+
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
88+
<pf-button slot="footer" variant="link" inline>
89+
<a href="#">Try it for 90 days</a>
90+
</pf-button>
91+
</pf-hint>
92+
{% endhtmlexample %}
93+
94+
{% endband %}
95+
96+
{% renderSlots %}{% endrenderSlots %}
97+
98+
{% renderAttributes %}{% endrenderAttributes %}
99+
100+
{% renderProperties %}{% endrenderProperties %}
101+
102+
{% renderMethods %}{% endrenderMethods %}
103+
104+
{% renderEvents %}{% endrenderEvents %}
105+
106+
{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
107+
108+
{% renderCssParts %}{% endrenderCssParts %}

0 commit comments

Comments
 (0)