FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat: implement PageHeader component with icon, header, description, … · patternfly-java/patternfly-java@0936c7f · GitHub

/ patternfly-java Public

Commit 0936c7f

Browse files
hpehl
committed
feat: implement PageHeader component with icon, header, description, and label support
1 parent 765f2fc commit 0936c7f

2 files changed

Lines changed: 80 additions & 75 deletions

File tree

‎components/src/main/java/org/patternfly/componentgroup/pageheader/PageHeader.java‎

Lines changed: 75 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -15,70 +15,41 @@
1515
*/
1616
package org.patternfly.componentgroup.pageheader;
1717

18+
import org.jboss.elemento.ElementContainerDelegate;
1819
import org.patternfly.component.BaseComponent;
1920
import org.patternfly.component.ComponentIcon;
2021
import org.patternfly.component.ComponentType;
21-
import org.patternfly.component.breadcrumb.Breadcrumb;
22+
import org.patternfly.component.content.Content;
23+
import org.patternfly.component.divider.Divider;
24+
import org.patternfly.component.icon.Icon;
2225
import org.patternfly.component.label.Label;
23-
26+
import org.patternfly.layout.flex.FlexItem;
27+
import org.patternfly.layout.split.Split;
28+
import org.patternfly.layout.split.SplitItem;
2429
import elemental2.dom.Element;
2530
import elemental2.dom.HTMLElement;
2631

27-
import static org.jboss.elemento.Elements.div;
32+
import static org.jboss.elemento.Elements.failSafeRemoveFromParent;
33+
import static org.jboss.elemento.Elements.insertFirst;
34+
import static org.patternfly.component.content.Content.content;
35+
import static org.patternfly.component.content.ContentType.h1;
36+
import static org.patternfly.component.content.ContentType.p;
37+
import static org.patternfly.component.divider.Divider.divider;
38+
import static org.patternfly.component.divider.DividerType.hr;
39+
import static org.patternfly.component.icon.IconSize._2xl;
40+
import static org.patternfly.layout.flex.AlignSelf.center;
41+
import static org.patternfly.layout.flex.Flex.flex;
42+
import static org.patternfly.layout.flex.FlexItem.flexItem;
43+
import static org.patternfly.layout.flex.FlexShorthand._1;
44+
import static org.patternfly.layout.split.Split.split;
45+
import static org.patternfly.layout.split.SplitItem.splitItem;
46+
import static org.patternfly.style.Classes.util;
47+
import static org.patternfly.style.Orientation.vertical;
2848

2949
/** A composite component that combines a page title, breadcrumb, and actions into a standard page header layout. */
3050
public class PageHeader extends BaseComponent<HTMLElement, PageHeader> implements
31-
ComponentIcon<HTMLElement, PageHeader> {
32-
33-
//language=HTML
34-
private static final String HTML_JUST_FOR_REFERENCE = """
35-
<section class="pf-v6-c-page__main-section">
36-
<div class="pf-v6-l-flex">
37-
<div class="pf-m-align-self-center iconMinWidth-0-2-1">
38-
<img src="/images/f4fb6361.svg" alt="page-header-icon">
39-
</div>
40-
<hr class="pf-v6-c-divider pf-m-vertical">
41-
<div class="pf-m-flex-1">
42-
<div class="pf-v6-l-split pf-m-gutter">
43-
<div class="pf-v6-l-split__item">
44-
<h1 class="pf-v6-c-content--h1 pf-v6-u-mb-sm">My Title</h1>
45-
</div>
46-
<div class="pf-v6-l-split__item">
47-
<span class="pf-v6-c-label pf-m-filled pf-v5-u-align-content-center">
48-
<span class="pf-v6-c-label__content">
49-
<span class="pf-v6-c-label__text">Org. Administrator</span>
50-
</span>
51-
</span>
52-
</div>
53-
<div class="pf-v6-l-split__item pf-m-fill"></div>
54-
<div class="pf-v6-l-split__item">
55-
<div class="pf-v6-c-action-list">
56-
<div class="pf-v6-c-action-list__item">
57-
<button class="pf-v6-c-menu-toggle pf-m-plain" type="button"
58-
aria-label="Action list single group kebab" aria-expanded="false">
59-
<span class="pf-v6-c-menu-toggle__icon">
60-
<svg class="pf-v6-svg" viewBox="0 0 192 512">
61-
<path d="M96..."></path>
62-
</svg>
63-
</span>
64-
</button>
65-
</div>
66-
</div>
67-
</div>
68-
</div>
69-
<p class="pf-v6-c-content--p">This is a subtitle for your page header</p>
70-
<a label="Go to this link" aria-disabled="false" class="pf-v6-c-button pf-m-link pf-m-inline">
71-
<span class="pf-v6-c-button__text">Go to this link</span>
72-
<span class="pf-v6-c-button__icon pf-m-end">
73-
<svg class="pf-v6-svg pf-v6-u-ml-sm" viewBox="0 0 512 512" width="1em" height="1em">
74-
<path d="M432..."></path>
75-
</svg>
76-
</span>
77-
</a>
78-
</div>
79-
</div>
80-
</section>
81-
""";
51+
ComponentIcon<HTMLElement, PageHeader>,
52+
ElementContainerDelegate<HTMLElement, PageHeader> {
8253

8354
// ------------------------------------------------------ factory
8455

@@ -88,45 +59,82 @@ public static PageHeader pageHeader() {
8859

8960
// ------------------------------------------------------ instance
9061

62+
private final FlexItem body;
63+
private final Split split;
64+
private final Content header;
65+
private FlexItem iconContainer;
66+
private Divider divider;
67+
private SplitItem labelsContainer;
68+
9169
PageHeader() {
92-
super(ComponentType.PageHeader, div().element());
70+
super(ComponentType.PageHeader, flex().element());
71+
this.body = flexItem().flex(_1)
72+
.add(split = split().gutter()
73+
.addItem(splitItem().add(header = content(h1).css(util("mb-sm")))));
74+
element().appendChild(body.element());
75+
}
76+
77+
@Override
78+
public Element containerDelegate() {
79+
return body.element();
9380
}
9481

9582
// ------------------------------------------------------ add
9683

97-
public PageHeader addBreadcrumb(Breadcrumb breadcrumb) {
98-
return add(breadcrumb);
84+
public PageHeader addHeader(String header) {
85+
this.header.text(header);
86+
return this;
9987
}
10088

101-
public PageHeader add(Breadcrumb breadcrumb) {
89+
public PageHeader addHeader(HTMLElement header) {
90+
this.header.add(header);
10291
return this;
10392
}
10493

94+
public PageHeader addDescription(String description) {
95+
return addDescription(content(p).text(description).element());
96+
}
97+
98+
public PageHeader addDescription(HTMLElement description) {
99+
return add(description);
100+
}
101+
105102
public PageHeader addLabel(Label label) {
106-
return add(label);
103+
return addLabel(label.element());
107104
}
108105

109106
public PageHeader add(Label label) {
107+
return addLabel(label.element());
108+
}
109+
110+
public PageHeader addLabel(HTMLElement label) {
111+
if (labelsContainer == null) {
112+
labelsContainer = splitItem();
113+
split.addItem(labelsContainer);
114+
}
115+
labelsContainer.add(label);
110116
return this;
111117
}
112118

113119
// ------------------------------------------------------ builder
114120

115121
@Override
116122
public PageHeader icon(Element icon) {
123+
removeIcon();
124+
divider = divider(hr).orientation(vertical);
125+
iconContainer = flexItem().alignSelf(center)
126+
.add(Icon.icon(icon).size(_2xl));
127+
insertFirst(element(), divider);
128+
insertFirst(element(), iconContainer);
117129
return this;
118130
}
119131

120132
@Override
121133
public PageHeader removeIcon() {
122-
return this;
123-
}
124-
125-
public PageHeader title(String title) {
126-
return this;
127-
}
128-
129-
public PageHeader subTitle(String subTitle) {
134+
failSafeRemoveFromParent(iconContainer);
135+
failSafeRemoveFromParent(divider);
136+
iconContainer = null;
137+
divider = null;
130138
return this;
131139
}
132140

‎components/src/main/java/org/patternfly/componentgroup/pageheader/package-info.java‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,14 @@
2020
* page-level header section. It supports an optional icon, title, subtitle, breadcrumb navigation, and label badge.
2121
*
2222
* <h2>Usage</h2>
23-
*
23+
* <p>
2424
* {@snippet :
2525
* PageHeader header = pageHeader()
26-
* .icon(img("icon.svg"))
27-
* .title("My Page")
28-
* .subTitle("A brief description")
29-
* .addBreadcrumb(breadcrumb()
30-
* .addItem(breadcrumbItem("Home", "#"))
31-
* .addItem(breadcrumbItem("Current")))
26+
* .icon(database())
27+
* .addHeader("My Page")
28+
* .addDescription("A brief description")
3229
* .addLabel(label("Administrator"));
33-
* }
30+
*}
3431
*
3532
* @see org.patternfly.componentgroup.pageheader.PageHeader
3633
*/

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL