Skip to content

Commit f411ab5

Browse files
eyevanaeyevana
authored
Merge ad26eb2 into c0cf6fa 
2 parents c0cf6fa + ad26eb2 commit f411ab5

File tree

10 files changed

+666
-1
lines changed

10 files changed

+666
-1
lines changed

‎elements/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,8 @@
5454
"./pf-tile/pf-tile.js": "./pf-tile/pf-tile.js",
5555
"./pf-timestamp/pf-timestamp.js": "./pf-timestamp/pf-timestamp.js",
5656
"./pf-tooltip/BaseTooltip.js": "./pf-tooltip/BaseTooltip.js",
57-
"./pf-tooltip/pf-tooltip.js": "./pf-tooltip/pf-tooltip.js"
57+
"./pf-tooltip/pf-tooltip.js": "./pf-tooltip/pf-tooltip.js",
58+
"./pf-pagination/pf-pagination.js": "./pf-pagination/pf-pagination.js"
5859
},
5960
"publishConfig": {
6061
"access": "public",

‎elements/pf-pagination/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Pagination
2+
Add a description of the component here.
3+
4+
## Usage
5+
Describe how best to use this web component along with best practices.
6+
7+
```html
8+
<pf-pagination>
9+
10+
</pf-pagination>
11+
```

‎elements/pf-pagination/demo/demo.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
body {
2+
background-color: #f0f0f0;
3+
}
4+
5+
section {
6+
padding: 6rem 1rem;
7+
}

‎elements/pf-pagination/demo/pf-pagination.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<link rel="stylesheet" href="demo.css" />
2+
<script type="module" src="pf-pagination.js"></script>
3+
4+
<section>
5+
<h2>Bottom</h2>
6+
<pf-pagination count="100"></pf-pagination>
7+
</section>

‎elements/pf-pagination/demo/pf-pagination.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import '@patternfly/elements/pf-pagination/pf-pagination.js';

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{% renderOverview %}
2+
<pf-pagination></pf-pagination>
3+
{% endrenderOverview %}
4+
5+
{% band header="Usage" %}{% endband %}
6+
7+
{% renderSlots %}{% endrenderSlots %}
8+
9+
{% renderAttributes %}{% endrenderAttributes %}
10+
11+
{% renderMethods %}{% endrenderMethods %}
12+
13+
{% renderEvents %}{% endrenderEvents %}
14+
15+
{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
16+
17+
{% renderCssParts %}{% endrenderCssParts %}

‎elements/pf-pagination/pf-pagination.css‎

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
:host {
2+
display: block;
3+
/* todo: this is set programmatically */
4+
--pf-c-pagination__nav-page-select--c-form-control--width-chars: 2;
5+
}
6+
7+
#container {
8+
display: flex;
9+
flex-wrap: wrap;
10+
align-items: center;
11+
justify-content: flex-end;
12+
}
13+
14+
#container > *:not(:last-child) {
15+
margin-right: var(--pf-c-pagination--child--MarginRight);
16+
}
17+
18+
@media (min-width: 768px) {
19+
#container {
20+
--pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingTop, var(--pf-global--spacer--form-element, .375rem));
21+
--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingRight, var(--pf-global--spacer--sm, .5rem));
22+
--pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingBottom, var(--pf-global--spacer--form-element, .375rem));
23+
--pf-c-pagination--m-bottom__nav-control--c-button--PaddingLeft: var(--pf-c-pagination--m-bottom__nav-control--c-button--md--PaddingLeft, var(--pf-global--spacer--sm, .5rem));
24+
--pf-c-pagination--m-bottom--child--MarginRight: var(--pf-c-pagination--m-bottom--child--md--MarginRight, var(--pf-global--spacer--lg, 1.5rem));
25+
--pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
26+
--pf-c-pagination--m-bottom--BoxShadow: none;
27+
--pf-c-pagination--c-options-menu--Display: inline-flex;
28+
--pf-c-pagination--c-options-menu--Visibility: visible;
29+
--pf-c-pagination__nav--Display: inline-flex;
30+
--pf-c-pagination__nav--Visibility: visible;
31+
--pf-c-pagination__total-items--Display: none;
32+
--pf-c-pagination__total-items--Visibility: hidden;
33+
}
34+
}
35+
36+
@media (min-width: 1200px) {
37+
#container {
38+
--pf-c-pagination--m-bottom--md--PaddingRight: var(--pf-c-pagination--m-bottom--xl--PaddingRight, var(--pf-global--spacer--lg, 1.5rem));
39+
--pf-c-pagination--m-bottom--md--PaddingLeft: var(--pf-c-pagination--m-bottom--xl--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));
40+
/* todo: find correct fallback */
41+
--pf-c-pagination__scroll-button--Width: var(--pf-c-pagination__scroll-button--xl--Width);
42+
--pf-c-pagination--m-page-insets--inset: var(--pf-c-pagination--m-page-insets--xl--inset, var(--pf-global--spacer--lg, 1.5rem));
43+
}
44+
}
45+
46+
/* PER PAGE SELECT */
47+
#container #options-menu {
48+
position: absolute;
49+
display: block;
50+
visibility: visible;
51+
}
52+
53+
@media (min-width: 768px) {
54+
#container.bottom #options-menu {
55+
position: relative;
56+
}
57+
}
58+
59+
/* PER PAGE SELECT: TOGGLE */
60+
#container #options-menu #menu-toggle {
61+
position: relative;
62+
--pf-c-button--FontSize: var(--pf-c-pagination--c-options-menu__toggle--FontSize, var(--pf-global--FontSize--sm, .875rem));
63+
--pf-c-button--LineHeight: var(--pf-c-options-menu__toggle--LineHeight, var(--pf-global--LineHeight--md, 1.5));
64+
--pf-c-button--PaddingTop: var(--pf-c-options-menu__toggle--PaddingTop, var(--pf-global--spacer--form-element, 0.375rem));
65+
--pf-c-button--PaddingRight: var(--pf-c-options-menu__toggle--PaddingRight, var(--pf-global--spacer--sm, .5rem));
66+
--pf-c-button--PaddingBottom: var(--pf-c-options-menu__toggle--PaddingBottom, var(--pf-global--spacer--form-element, 0.375rem));
67+
--pf-c-button--PaddingLeft: var(--pf-c-options-menu__toggle--PaddingLeft, var(--pf-global--spacer--sm, .5rem));
68+
--pf-c-button--BorderRadius: 0;
69+
--pf-c-button--m-plain--Color : var(--pf-c-options-menu__toggle--Color, var(--pf-global--Color--100, #151515));
70+
--pf-c-button--m-plain--BackgroundColor: var(--pf-c-options-menu__toggle--BackgroundColor, transparent);
71+
--pf-c-button__icon--m-start--MarginLeft: var(--pf-c-options-menu__toggle-icon--MarginLeft, var(--pf-global--spacer--sm, .5rem));
72+
}
73+
74+
#container #options-menu #menu-toggle:hover,
75+
#container #options-menu #menu-toggle:active,
76+
#container #options-menu #menu-toggle:focus {
77+
--pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color, var(--pf-global--Color--100, #151515));
78+
--pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color, var(--pf-global--Color--100, #151515));
79+
}
80+
81+
#container #options-menu #menu-toggle::part(icon) {
82+
--_icon-color: var(--pf-c-options-menu__toggle-icon--Color, var(--pf-c-options-menu--m-plain__toggle-icon--Color, var(--pf-global--Color--200, #6a6e73)));
83+
margin-right: var(--pf-c-options-menu__toggle-icon--MarginRight, var(--pf-global--spacer--sm, .5rem));
84+
color: var(--_icon-color, inherit);
85+
/* todo: icon style + size not 100% aligned with pf */
86+
--pf-icon--size: 12px;
87+
width: 12px;
88+
left: 0;
89+
}
90+
91+
/* PER PAGE SELECT: MENU */
92+
#container #options-menu:not(.expanded) #menu-list {
93+
display: none;
94+
}
95+
96+
#container #options-menu #menu-list {
97+
position: absolute;
98+
list-style: none;
99+
margin: 0;
100+
top: var(--pf-c-options-menu--m-top__menu--Top, 0);
101+
transform: translateY(var(--pf-c-options-menu--m-top__menu--TranslateY, calc(-100% - var(--pf-global--spacer--xs, 0.25rem))));
102+
z-index: var(--pf-c-options-menu__menu--ZIndex, var(--pf-global--ZIndex--sm, 200));
103+
min-width: 100%;
104+
padding-top: var(--pf-c-options-menu__menu--PaddingTop, var(--pf-global--spacer--sm, .5rem));
105+
padding-right: 0;
106+
padding-bottom: var(--pf-c-options-menu__menu--PaddingBottom, var(--pf-global--spacer--sm, .5rem));
107+
padding-left: 0;
108+
background-color: var(--pf-c-options-menu__menu--BackgroundColor, var(--pf-global--BackgroundColor--light-100, #fff));
109+
background-clip: padding-box;
110+
box-shadow: var(--pf-c-options-menu__menu--BoxShadow, var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));
111+
}
112+
113+
#container #options-menu #menu-list .menu-item {
114+
white-space: nowrap;
115+
--pf-c-button--PaddingTop: var(--pf-c-options-menu__menu-item--PaddingTop, var(--pf-global--spacer--sm, .5rem));
116+
--pf-c-button--PaddingRight: var(--pf-c-options-menu__menu-item--PaddingRight, var(--pf-global--spacer--md, 1rem));
117+
--pf-c-button--PaddingBottom: var(--pf-c-options-menu__menu-item--PaddingBottom, var(--pf-global--spacer--sm, .5rem));
118+
--pf-c-button--PaddingLeft: var(--pf-c-options-menu__menu-item--PaddingLeft, var(--pf-global--spacer--md, 1rem));
119+
--pf-c-button--FontSize: var(--pf-c-options-menu__menu-item--FontSize, var(--pf-global--FontSize--md, 1rem));
120+
--pf-c-button--m-tertiary--Color: var(--pf-c-options-menu__menu-item--Color, var(--pf-global--Color--100, #151515));
121+
--pf-c-button--m-tertiary--BackgroundColor: var(--pf-c-options-menu__menu-item--BackgroundColor, transparent);
122+
--pf-c-button--BorderRadius: 0;
123+
--pf-c-button--m-tertiary--after--BorderColor: transparent;
124+
}
125+
126+
#container #options-menu #menu-list .menu-item.selected {
127+
--pf-c-button__icon--m-start--MarginLeft: calc(var(--pf-c-options-menu__menu-item-icon--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem)) / 2);
128+
align-self: center;
129+
width: auto;
130+
margin-left: auto;
131+
}
132+
133+
#container #options-menu #menu-list .menu-item.selected::part(icon) {
134+
/* todo: icon size doesn't seem to match */
135+
--pf-icon--size: var(--pf-c-options-menu__menu-item-icon--FontSize, var(--pf-global--icon--FontSize--sm, 0.625rem));
136+
width: var(--pf-c-options-menu__menu-item-icon--FontSize, var(--pf-global--icon--FontSize--sm, 0.625rem));
137+
color: var(--pf-c-options-menu__menu-item-icon--Color, var(--pf-global--active-color--100, #06c));
138+
}
139+
140+
#container #options-menu #menu-list .menu-item:hover {
141+
--pf-c-button--m-tertiary--hover--after--BorderColor: transparent;
142+
--pf-c-button--m-tertiary--hover--Color: var(--pf-c-options-menu__menu-item--Color, var(--pf-global--Color--100, #151515));
143+
--pf-c-button--m-tertiary--hover--BackgroundColor: var(--pf-c-options-menu__menu-item--hover--BackgroundColor, var(--pf-global--BackgroundColor--light-300, #f0f0f0));
144+
}
145+
146+
#container #options-menu #menu-list .menu-item:active {
147+
--pf-c-button--m-tertiary--active--after--BorderColor: transparent;
148+
--pf-c-button--m-tertiary--active--Color: var(--pf-c-options-menu__menu-item--Color, var(--pf-global--Color--100, #151515));
149+
--pf-c-button--m-tertiary--active--BackgroundColor: var(--pf-c-options-menu__menu-item--hover--BackgroundColor, var(--pf-global--BackgroundColor--light-300, #f0f0f0));
150+
}
151+
152+
#container #options-menu #menu-list .menu-item:focus {
153+
--pf-c-button--m-tertiary--focus--after--BorderColor: transparent;
154+
--pf-c-button--m-tertiary--focus--Color: var(--pf-c-options-menu__menu-item--Color, var(--pf-global--Color--100, #151515));
155+
--pf-c-button--m-tertiary--focus--BackgroundColor: var(--pf-c-options-menu__menu-item--hover--BackgroundColor, var(--pf-global--BackgroundColor--light-300, #f0f0f0));
156+
}
157+
158+
#container #nav #page-select > * {
159+
font-size: var(--pf-c-pagination__nav-page-select--FontSize, var(--pf-global--FontSize--sm, .875rem));
160+
white-space: nowrap;
161+
}
162+
163+
#container #nav #page-select > *:not(:last-child) {
164+
margin-right: var(--pf-c-pagination__nav-page-select--child--MarginRight, var(--pf-global--spacer--xs, .25rem));
165+
}
166+
167+
#container #nav #page-select #page-select-input {
168+
/* todo: long complicated calc */
169+
width: var(--pf-c-pagination__nav-page-select--c-form-control--Width, 24px);
170+
appearance: textfield;
171+
/* pf-form-control ? */
172+
font-family: inherit;
173+
color: var(--pf-c-form-control--Color, var(--pf-global--Color--100, #151515));
174+
--_padding-top: var(--pf-c-form-control--PaddingTop, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px)));
175+
--_padding-right: var(--pf-c-form-control--PaddingRight, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem)));
176+
--_padding-bottom: var(--pf-c-form-control--PaddingTop, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px)));
177+
--_padding-left: var(--pf-c-form-control--PaddingRight, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem)));
178+
padding: var(--_padding-top) var(--_padding-right) var(--_padding-bottom) var(--_padding-left);
179+
line-height: var(--pf-c-form-control--LineHeight, 1.5);
180+
background-color: var(--pf-c-form-control--BackgroundColor, var(--pf-global--BackgroundColor--100, var(--pf-global--BackgroundColor--light-100, #fff)));
181+
background-repeat: no-repeat;
182+
border: var(--pf-c-form-control--BorderWidth, var(--pf-global--BorderWidth--sm, 1px)) solid;
183+
--_border-top-color: var(--pf-c-form-control--BorderTopColor, var(--pf-global--BorderColor--300, #f0f0f0));
184+
--_border-right-color: var(--pf-c-form-control--BorderRightColor, var(--pf-global--BorderColor--300, #f0f0f0));
185+
--_border-bottom-color: var(--pf-c-form-control--BorderBottomColor, var(--pf-global--BorderColor--200, #8a8d90));
186+
--_border-left-color: var(--pf-c-form-control--BorderLeftColor, var(--pf-global--BorderColor--300, #f0f0f0));
187+
border-color: var(--_border-top-color) var(--_border-right-color) var(--_border-bottom-color) var(--_border-left-color);
188+
border-radius: var(--pf-c-form-control--BorderRadius, 0);
189+
}
190+
191+
#container #nav #page-select #page-select-input::-webkit-inner-spin-button,
192+
#container #nav #page-select #page-select-input::-webkit-outer-spin-button {
193+
appearance: none;
194+
margin: 0;
195+
}
196+
197+
#container #nav #page-select #page-select-input:focus {
198+
--pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--focus--BorderBottomColor, var(--pf-global--primary-color--100, var(--pf-global--primary-color--dark-100, #06c)));
199+
--_border-bottom-width: var(--pf-c-form-control--focus--BorderBottomWidth, var(--pf-global--BorderWidth--md, 2px));
200+
padding-bottom: var(--pf-c-form-control--focus--PaddingBottom, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--_border-bottom-width)));
201+
border-bottom-width: var(--_border-bottom-width);
202+
}
203+
204+
#container #nav #page-select #page-select-input:hover {
205+
--pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor, var(--pf-global--primary-color--100, var(--pf-global--primary-color--dark-100, #06c)));
206+
}
207+
208+
/* This should be on the input component */
209+
#container #nav #page-select input:not(textarea) {
210+
height: var(--pf-c-form-control--Height);
211+
text-overflow: ellipsis;
212+
}
213+
214+
#container #nav .nav-control pf-button {
215+
--pf-c-button--PaddingRight: var(--pf-c-pagination__nav-control--c-button--PaddingRight);
216+
--pf-c-button--PaddingLeft: var(--pf-c-pagination__nav-control--c-button--PaddingLeft);
217+
--pf-c-button--FontSize: var(--pf-c-pagination__nav-control--c-button--FontSize, var(--pf-global--FontSize--md, 1rem));
218+
}
219+
220+
/* Bottom variant */
221+
#container.bottom {
222+
--pf-c-pagination--child--MarginRight: var(--pf-c-pagination--m-bottom--child--MarginRight, 0);
223+
--pf-c-pagination__nav-control--c-button--PaddingRight: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight, var(--pf-global--spacer--md, 1rem));
224+
--pf-c-pagination__nav-control--c-button--PaddingLeft: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingRight, var(--pf-global--spacer--md, 1rem));
225+
position: sticky;
226+
bottom: var(--pf-c-pagination--m-bottom--Bottom, 0);
227+
justify-content: center;
228+
background-color: var(--pf-c-pagination--m-bottom--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));
229+
box-shadow: var(--pf-c-pagination--m-bottom--BoxShadow, var(--pf-global--BoxShadow--sm-top, 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)));
230+
}
231+
232+
#container.bottom #nav {
233+
display: flex;
234+
flex-basis: 100%;
235+
justify-content: space-between;
236+
visibility: visible;
237+
}
238+
239+
#container.bottom #nav #page-select {
240+
display: flex;
241+
align-items: center;
242+
padding-right: var(--pf-c-pagination__nav-page-select--PaddingRight, var(--pf-global--spacer--md, 1rem));
243+
padding-left: var(--pf-c-pagination__nav-page-select--PaddingLeft, var(--pf-global--spacer--md, 1rem));
244+
}
245+
246+
#container.bottom #nav .nav-control:first-child,
247+
#container.bottom #nav #page-select,
248+
#container.bottom #nav .nav-control:last-child {
249+
display: none;
250+
visibility: hidden;
251+
}
252+
253+
#container.bottom #nav .nav-control pf-button {
254+
--pf-c-button--PaddingTop: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingTop);
255+
--pf-c-button--PaddingBottom: var(--pf-c-pagination--m-bottom__nav-control--c-button--PaddingBottom);
256+
/* Can't set on pf-button */
257+
outline-offset: var(--pf-c-pagination--m-bottom__nav-control--c-button--OutlineOffset, 0);
258+
}
259+
260+
@media (min-width: 768px) {
261+
#container.bottom {
262+
--pf-c-pagination--m-bottom--BorderTopWidth: 0;
263+
--pf-c-pagination--m-bottom--MarginTop: 0;
264+
--pf-c-pagination--m-bottom--Bottom: auto;
265+
position: relative;
266+
justify-content: flex-end;
267+
padding: var(--pf-c-pagination--m-bottom--md--PaddingTop, var(--pf-global--spacer--md, 1rem)) var(--pf-c-pagination--m-bottom--md--PaddingRight, var(--pf-global--spacer--md, 1rem)) var(--pf-c-pagination--m-bottom--md--PaddingBottom, var(--pf-global--spacer--md, 1rem)) var(--pf-c-pagination--m-bottom--md--PaddingLeft, var(--pf-global--spacer--md, 1rem));
268+
}
269+
270+
#container.bottom #nav {
271+
display: inline-flex;
272+
flex-basis: auto;
273+
}
274+
275+
/* Not using modifier class, verify that this works correctly */
276+
#container.bottom #nav .nav-control:first-child,
277+
#container.bottom #nav #page-select,
278+
#container.bottom #nav .nav-control:last-child {
279+
display: block;
280+
visibility: visible;
281+
}
282+
}

0 commit comments

Comments
 (0)