Skip to content

Commit e86ed22

Browse files
Gili-GreenbergerGili-Greenberger
committed
feat(hint): add functional dropdown with proper layout
1 parent 3eff968 commit e86ed22

File tree

3 files changed

+51
-53
lines changed

3 files changed

+51
-53
lines changed

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

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,26 @@ <h2>Default with no title</h2>
55
</pf-hint>
66

77
<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>
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>
1320
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
1421
<a slot="footer" href="#">Try it for 90 days</a>
1522
</pf-hint>
1623

1724
<script type="module">
1825
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';
1928
</script>
2029

2130
<style>
@@ -34,19 +43,5 @@ <h2>Default with no title</h2>
3443
margin-block-start: 0;
3544
}
3645

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-
}
4846

49-
.pf-m-plain {
50-
border: none;
51-
}
5247
</style>

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

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,44 @@
11
<h2>Hint with title</h2>
22

33
<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>
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>
916
<span slot="title">Do more with Find it Fix it capabilities</span>
1017
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
1118
</pf-hint>
1219

1320
<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>
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>
1933
<span slot="title">Do more with Find it Fix it capabilities</span>
2034
Upgrade to Red Hat Smart Management to remediate all your systems across regions and geographies.
2135
<a slot="footer" href="#">Try it for 90 days</a>
2236
</pf-hint>
2337

2438
<script type="module">
2539
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';
2642
</script>
2743

2844
<style>
@@ -40,20 +56,4 @@ <h2>Hint with title</h2>
4056
h2:first-child {
4157
margin-block-start: 0;
4258
}
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-
}
5959
</style>

‎elements/pf-hint/pf-hint.css‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
--pf-c-hint--BackgroundColor: var(--pf-global--palette--blue-50, #e7f1fa);
1111
--pf-c-hint--BorderColor: var(--pf-global--palette--blue-100, #bee1f4);
1212
--pf-c-hint--BorderWidth: 1px;
13-
--pf-c-hint--BorderRadius: 0;
13+
--pf-c-hint--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
1414
--pf-c-hint--BoxShadow: var(--pf-global--BoxShadow--sm, 0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06));
1515

1616
/* Title */
@@ -38,6 +38,7 @@
3838
#container {
3939
position: relative;
4040
display: grid;
41+
grid-template-columns: 1fr auto;
4142
gap: var(--pf-c-hint--GridRowGap);
4243
padding:
4344
var(--pf-c-hint--PaddingTop)
@@ -48,22 +49,24 @@
4849
border: var(--pf-c-hint--BorderWidth) solid var(--pf-c-hint--BorderColor);
4950
border-radius: var(--pf-c-hint--BorderRadius);
5051
box-shadow: var(--pf-c-hint--BoxShadow);
52+
overflow: visible;
5153
}
5254

53-
#container.has-actions {
54-
padding-right: calc(var(--pf-c-hint--Padding) + var(--pf-global--spacer--xl, 2rem));
55+
#container > * {
56+
grid-column: 1;
5557
}
5658

5759
#actions {
58-
position: absolute;
59-
top: var(--pf-c-hint__actions--Top);
60-
right: var(--pf-c-hint__actions--Right);
61-
margin-left: var(--pf-c-hint__actions--MarginLeft);
60+
grid-column: 2;
61+
grid-row: 1 / -1;
62+
align-self: start;
63+
position: relative;
64+
z-index: 1000;
6265
}
6366

64-
#actions ::slotted(.pf-c-dropdown),
6567
#actions ::slotted(pf-dropdown) {
6668
margin-top: var(--pf-c-hint__actions--c-dropdown--MarginTop);
69+
--pf-c-dropdown__menu--MinWidth: auto;
6770
}
6871

6972
#title {

0 commit comments

Comments
 (0)