@patternfly-java/finder 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +29 -0
  2. package/finder.css +366 -0
  3. package/package.json +36 -0
package/README.md ADDED
@@ -0,0 +1,29 @@
1
+ # PatternFly Java Finder
2
+
3
+ CSS styles for the [PatternFly Java](https://patternfly-java.github.io/) finder extension. The finder is a macOS Finder-style column browser for hierarchical navigation.
4
+
5
+ This package provides the CSS only. It is meant to be used together with the `org.patternfly:patternfly-java-finder` Maven artifact, which contains the Java component implementation.
6
+
7
+ ## Installation
8
+
9
+ Install the package using npm:
10
+
11
+ ```
12
+ npm install @patternfly-java/finder
13
+ ```
14
+
15
+ ## Usage
16
+
17
+ Import the CSS in your stylesheet or JavaScript entry point:
18
+
19
+ ```css
20
+ @import "@patternfly-java/finder";
21
+ ```
22
+
23
+ ## Requirements
24
+
25
+ This package requires [PatternFly 6](https://www.patternfly.org/) CSS (`@patternfly/patternfly`) to be present, as it references PatternFly design tokens for colors, spacing, borders, and typography.
26
+
27
+ ## License
28
+
29
+ Apache-2.0
package/finder.css ADDED
@@ -0,0 +1,366 @@
1
+ /**
2
+ * Copyright 2023 Red Hat
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * https://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+ /* PatternFly Java Finder Extension */
17
+ /* A macOS Finder-style column browser for hierarchical navigation */
18
+
19
+ /* ===================================================================
20
+ Custom properties
21
+ =================================================================== */
22
+
23
+ .pf-v6-c-finder {
24
+ --pf-v6-c-finder--BackgroundColor: var(--pf-t--global--background--color--primary--default);
25
+ --pf-v6-c-finder--BorderColor: var(--pf-t--global--border--color--default);
26
+ --pf-v6-c-finder--BorderWidth: var(--pf-t--global--border--width--100);
27
+ --pf-v6-c-finder--BorderRadius: var(--pf-t--global--border--radius--100);
28
+ --pf-v6-c-finder--FontSize: var(--pf-t--global--font--size--200);
29
+ --pf-v6-c-finder--Color: var(--pf-t--global--text--color--regular);
30
+ --pf-v6-c-finder-MaxColumns: 4;
31
+
32
+ /* Column */
33
+ --pf-v6-c-finder__column--Width: 18rem;
34
+ --pf-v6-c-finder__column--BorderRightColor: var(--pf-t--global--border--color--default);
35
+ --pf-v6-c-finder__column--BorderRightWidth: var(--pf-t--global--border--width--100);
36
+
37
+ /* Column header */
38
+ --pf-v6-c-finder__column-header--PaddingBlockStart: var(--pf-t--global--spacer--200);
39
+ --pf-v6-c-finder__column-header--PaddingBlockEnd: var(--pf-t--global--spacer--200);
40
+ --pf-v6-c-finder__column-header--PaddingInlineStart: var(--pf-t--global--spacer--300);
41
+ --pf-v6-c-finder__column-header--PaddingInlineEnd: var(--pf-t--global--spacer--200);
42
+ --pf-v6-c-finder__column-header--BorderBottomColor: var(--pf-t--global--border--color--default);
43
+ --pf-v6-c-finder__column-header--BorderBottomWidth: var(--pf-t--global--border--width--100);
44
+ --pf-v6-c-finder__column-title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
45
+ --pf-v6-c-finder__column-title-text--FontSize: var(--pf-t--global--font--size--md);
46
+
47
+ /* Column search */
48
+ --pf-v6-c-finder__column-search--PaddingBlock: var(--pf-t--global--spacer--200);
49
+ --pf-v6-c-finder__column-search--PaddingInline: var(--pf-t--global--spacer--200);
50
+
51
+ /* Column item */
52
+ --pf-v6-c-finder__item--PaddingBlockStart: var(--pf-t--global--spacer--200);
53
+ --pf-v6-c-finder__item--PaddingBlockEnd: var(--pf-t--global--spacer--200);
54
+ --pf-v6-c-finder__item--PaddingInlineStart: var(--pf-t--global--spacer--300);
55
+ --pf-v6-c-finder__item--PaddingInlineEnd: var(--pf-t--global--spacer--300);
56
+ --pf-v6-c-finder__item--BackgroundColor: transparent;
57
+ --pf-v6-c-finder__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
58
+ --pf-v6-c-finder__item--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
59
+ --pf-v6-c-finder__item--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
60
+ --pf-v6-c-finder__item--m-selected--inactive--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
61
+ --pf-v6-c-finder__item--m-selected--inactive--Color: var(--pf-t--global--text--color--regular);
62
+ --pf-v6-c-finder__item--Gap: var(--pf-t--global--spacer--300);
63
+ --pf-v6-c-finder__item-row--MinHeight: 3.125rem;
64
+
65
+ /* Column item focus */
66
+ --pf-v6-c-finder__item--focus--OutlineColor: var(--pf-t--global--color--brand--default);
67
+ --pf-v6-c-finder__item--focus--OutlineWidth: var(--pf-t--global--border--width--200);
68
+ --pf-v6-c-finder__item--focus--OutlineOffset: calc(-1 * var(--pf-t--global--border--width--200));
69
+
70
+ /* Column item icon */
71
+ --pf-v6-c-finder__item-icon--Width: var(--pf-t--global--icon--size--200);
72
+
73
+ /* Column item text */
74
+ --pf-v6-c-finder__item-text--FontSize: var(--pf-t--global--font--size--200);
75
+
76
+ /* Column item description */
77
+ --pf-v6-c-finder__item-description--FontSize: var(--pf-t--global--font--size--xs);
78
+ --pf-v6-c-finder__item-description--Color: var(--pf-t--global--text--color--subtle);
79
+
80
+ /* Column item actions */
81
+ --pf-v6-c-finder__item-actions--MarginInlineStart: auto;
82
+
83
+ /* Column item pin icon */
84
+ --pf-v6-c-finder__item-pin--Color: var(--pf-t--global--text--color--subtle);
85
+ --pf-v6-c-finder__item-pin--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
86
+
87
+ /* Column item folder icon */
88
+ --pf-v6-c-finder__item-folder-icon--Width: var(--pf-t--global--icon--size--200);
89
+ --pf-v6-c-finder__item-folder-icon--Color: var(--pf-t--global--text--color--subtle);
90
+ --pf-v6-c-finder__item-folder-icon--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
91
+
92
+ /* Preview */
93
+ --pf-v6-c-finder__preview--MinWidth: 24rem;
94
+ --pf-v6-c-finder__preview--BackgroundColor: var(--pf-t--global--background--color--primary--default);
95
+ }
96
+
97
+ /* ===================================================================
98
+ Root container
99
+ =================================================================== */
100
+
101
+ .pf-v6-c-finder {
102
+ display: flex;
103
+ background-color: var(--pf-v6-c-finder--BackgroundColor);
104
+ border: var(--pf-v6-c-finder--BorderWidth) solid var(--pf-v6-c-finder--BorderColor);
105
+ border-radius: var(--pf-v6-c-finder--BorderRadius);
106
+ font-size: var(--pf-v6-c-finder--FontSize);
107
+ color: var(--pf-v6-c-finder--Color);
108
+ }
109
+
110
+ /* ===================================================================
111
+ Columns container (scrollable)
112
+ =================================================================== */
113
+
114
+ .pf-v6-c-finder__columns {
115
+ display: flex;
116
+ overflow-x: auto;
117
+ max-width: calc(var(--pf-v6-c-finder-MaxColumns) * var(--pf-v6-c-finder__column--Width) + var(--pf-v6-c-finder-MaxColumns) * var(--pf-v6-c-finder__column--BorderRightWidth));
118
+ }
119
+
120
+ /* ===================================================================
121
+ Column
122
+ =================================================================== */
123
+
124
+ .pf-v6-c-finder__column {
125
+ display: flex;
126
+ flex-direction: column;
127
+ flex-shrink: 0;
128
+ width: var(--pf-v6-c-finder__column--Width);
129
+ border-right: var(--pf-v6-c-finder__column--BorderRightWidth) solid var(--pf-v6-c-finder__column--BorderRightColor);
130
+ }
131
+
132
+ /* ===================================================================
133
+ Column header
134
+ =================================================================== */
135
+
136
+ .pf-v6-c-finder__column-header {
137
+ display: flex;
138
+ align-items: center;
139
+ gap: var(--pf-t--global--spacer--200);
140
+ padding-block-start: var(--pf-v6-c-finder__column-header--PaddingBlockStart);
141
+ padding-block-end: var(--pf-v6-c-finder__column-header--PaddingBlockEnd);
142
+ padding-inline-start: var(--pf-v6-c-finder__column-header--PaddingInlineStart);
143
+ padding-inline-end: var(--pf-v6-c-finder__column-header--PaddingInlineEnd);
144
+ border-bottom: var(--pf-v6-c-finder__column-header--BorderBottomWidth) solid var(--pf-v6-c-finder__column-header--BorderBottomColor);
145
+ }
146
+
147
+ .pf-v6-c-finder__column-title-text {
148
+ font-weight: var(--pf-v6-c-finder__column-title-text--FontWeight);
149
+ font-size: var(--pf-v6-c-finder__column-title-text--FontSize);
150
+ white-space: nowrap;
151
+ overflow: hidden;
152
+ text-overflow: ellipsis;
153
+ }
154
+
155
+ .pf-v6-c-finder__column.pf-m-active .pf-v6-c-finder__column-title-text {
156
+ text-decoration: underline;
157
+ }
158
+
159
+ .pf-v6-c-finder__column-actions {
160
+ display: flex;
161
+ align-items: center;
162
+ gap: var(--pf-t--global--spacer--100);
163
+ margin-inline-start: auto;
164
+ flex-shrink: 0;
165
+ }
166
+
167
+ /* ===================================================================
168
+ Column search
169
+ =================================================================== */
170
+
171
+ .pf-v6-c-finder__column-search {
172
+ padding-block: var(--pf-v6-c-finder__column-search--PaddingBlock);
173
+ padding-inline: var(--pf-v6-c-finder__column-search--PaddingInline);
174
+ }
175
+
176
+ /* ===================================================================
177
+ Column items (list)
178
+ =================================================================== */
179
+
180
+ .pf-v6-c-finder__column-items {
181
+ flex: 1;
182
+ overflow-y: auto;
183
+ list-style: none;
184
+ margin: 0;
185
+ padding: 0;
186
+ }
187
+
188
+ /* ===================================================================
189
+ Finder item
190
+ =================================================================== */
191
+
192
+ .pf-v6-c-finder__item {
193
+ cursor: pointer;
194
+ background-color: var(--pf-v6-c-finder__item--BackgroundColor);
195
+ color: var(--pf-v6-c-finder--Color);
196
+ }
197
+
198
+ .pf-v6-c-finder__item:hover {
199
+ background-color: var(--pf-v6-c-finder__item--hover--BackgroundColor);
200
+ }
201
+
202
+ .pf-v6-c-finder__item:focus-visible {
203
+ outline: var(--pf-v6-c-finder__item--focus--OutlineWidth) solid var(--pf-v6-c-finder__item--focus--OutlineColor);
204
+ outline-offset: var(--pf-v6-c-finder__item--focus--OutlineOffset);
205
+ }
206
+
207
+ /* ===================================================================
208
+ Item row
209
+ =================================================================== */
210
+
211
+ .pf-v6-c-finder__item-row {
212
+ display: flex;
213
+ align-items: center;
214
+ min-height: var(--pf-v6-c-finder__item-row--MinHeight);
215
+ gap: var(--pf-v6-c-finder__item--Gap);
216
+ padding-block-start: var(--pf-v6-c-finder__item--PaddingBlockStart);
217
+ padding-block-end: var(--pf-v6-c-finder__item--PaddingBlockEnd);
218
+ padding-inline-start: var(--pf-v6-c-finder__item--PaddingInlineStart);
219
+ padding-inline-end: var(--pf-v6-c-finder__item--PaddingInlineEnd);
220
+ }
221
+
222
+ /* ===================================================================
223
+ Item sub-elements
224
+ =================================================================== */
225
+
226
+ .pf-v6-c-finder__item-icon {
227
+ display: inline-flex;
228
+ align-items: center;
229
+ justify-content: center;
230
+ flex-shrink: 0;
231
+ width: var(--pf-v6-c-finder__item-icon--Width);
232
+ }
233
+
234
+ .pf-v6-c-finder__item-content {
235
+ display: flex;
236
+ flex-direction: column;
237
+ min-width: 0;
238
+ }
239
+
240
+ .pf-v6-c-finder__item-text {
241
+ font-size: var(--pf-v6-c-finder__item-text--FontSize);
242
+ white-space: nowrap;
243
+ overflow: hidden;
244
+ text-overflow: ellipsis;
245
+ }
246
+
247
+ .pf-v6-c-finder__item-description {
248
+ font-size: var(--pf-v6-c-finder__item-description--FontSize);
249
+ color: var(--pf-v6-c-finder__item-description--Color);
250
+ white-space: nowrap;
251
+ overflow: hidden;
252
+ text-overflow: ellipsis;
253
+ }
254
+
255
+ .pf-v6-c-finder__column.pf-m-active .pf-v6-c-finder__item.pf-m-selected .pf-v6-c-finder__item-description {
256
+ color: var(--pf-v6-c-finder__item--m-selected--Color);
257
+ }
258
+
259
+ .pf-v6-c-finder__item-actions {
260
+ display: inline-flex;
261
+ align-items: center;
262
+ gap: var(--pf-t--global--spacer--100);
263
+ margin-inline-start: var(--pf-v6-c-finder__item-actions--MarginInlineStart);
264
+ flex-shrink: 0;
265
+ opacity: 0;
266
+ }
267
+
268
+ .pf-v6-c-finder__item:hover .pf-v6-c-finder__item-actions,
269
+ .pf-v6-c-finder__item.pf-m-selected .pf-v6-c-finder__item-actions {
270
+ opacity: 1;
271
+ }
272
+
273
+ .pf-v6-c-finder__item-pin {
274
+ display: inline-flex;
275
+ align-items: center;
276
+ justify-content: center;
277
+ flex-shrink: 0;
278
+ color: var(--pf-v6-c-finder__item-pin--Color);
279
+ opacity: 0;
280
+ cursor: pointer;
281
+ background: none;
282
+ border: none;
283
+ padding: 0;
284
+ font-size: inherit;
285
+ margin-inline-start: auto;
286
+ }
287
+
288
+ .pf-v6-c-finder__item-actions + .pf-v6-c-finder__item-pin {
289
+ margin-inline-start: 0;
290
+ }
291
+
292
+ .pf-v6-c-finder__item:hover .pf-v6-c-finder__item-pin,
293
+ .pf-v6-c-finder__item.pf-m-pinned .pf-v6-c-finder__item-pin {
294
+ opacity: 1;
295
+ }
296
+
297
+ .pf-v6-c-finder__column.pf-m-active .pf-v6-c-finder__item.pf-m-selected .pf-v6-c-finder__item-pin {
298
+ color: var(--pf-v6-c-finder__item-pin--m-selected--Color);
299
+ }
300
+
301
+ /* Pin icon swap: show thumbtack by default, times when pinned */
302
+ .pf-v6-c-finder__item-pin .pf-v6-c-finder__item-pin-icon--pinned {
303
+ display: none;
304
+ }
305
+
306
+ .pf-v6-c-finder__item.pf-m-pinned .pf-v6-c-finder__item-pin .pf-v6-c-finder__item-pin-icon--default {
307
+ display: none;
308
+ }
309
+
310
+ .pf-v6-c-finder__item.pf-m-pinned .pf-v6-c-finder__item-pin .pf-v6-c-finder__item-pin-icon--pinned {
311
+ display: inline;
312
+ }
313
+
314
+ .pf-v6-c-finder__item-folder-icon {
315
+ display: none;
316
+ align-items: center;
317
+ justify-content: center;
318
+ flex-shrink: 0;
319
+ width: var(--pf-v6-c-finder__item-folder-icon--Width);
320
+ color: var(--pf-v6-c-finder__item-folder-icon--Color);
321
+ }
322
+
323
+ .pf-v6-c-finder__item.pf-m-folder .pf-v6-c-finder__item-folder-icon {
324
+ display: inline-flex;
325
+ }
326
+
327
+ /* ===================================================================
328
+ Item modifiers
329
+ =================================================================== */
330
+
331
+ /* Selected item in inactive columns */
332
+ .pf-v6-c-finder__item.pf-m-selected {
333
+ background-color: var(--pf-v6-c-finder__item--m-selected--inactive--BackgroundColor);
334
+ color: var(--pf-v6-c-finder__item--m-selected--inactive--Color);
335
+ }
336
+
337
+ .pf-v6-c-finder__item.pf-m-selected:hover {
338
+ background-color: var(--pf-v6-c-finder__item--m-selected--inactive--BackgroundColor);
339
+ }
340
+
341
+ /* Selected item in active column */
342
+ .pf-v6-c-finder__column.pf-m-active .pf-v6-c-finder__item.pf-m-selected {
343
+ background-color: var(--pf-v6-c-finder__item--m-selected--BackgroundColor);
344
+ color: var(--pf-v6-c-finder__item--m-selected--Color);
345
+ }
346
+
347
+ .pf-v6-c-finder__column.pf-m-active .pf-v6-c-finder__item.pf-m-selected:hover {
348
+ background-color: var(--pf-v6-c-finder__item--m-selected--BackgroundColor);
349
+ }
350
+
351
+ .pf-v6-c-finder__column.pf-m-active .pf-v6-c-finder__item.pf-m-selected .pf-v6-c-finder__item-folder-icon {
352
+ color: var(--pf-v6-c-finder__item-folder-icon--m-selected--Color);
353
+ }
354
+
355
+ /* ===================================================================
356
+ Preview pane
357
+ =================================================================== */
358
+
359
+ .pf-v6-c-finder__preview {
360
+ display: flex;
361
+ flex-direction: column;
362
+ min-width: var(--pf-v6-c-finder__preview--MinWidth);
363
+ background-color: var(--pf-v6-c-finder__preview--BackgroundColor);
364
+ flex: 1;
365
+ overflow-y: auto;
366
+ }
package/package.json ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "name": "@patternfly-java/finder",
3
+ "private": false,
4
+ "version": "0.6.1",
5
+ "description": "CSS for the PatternFly Java finder extension.",
6
+ "homepage": "https://patternfly-java.github.io/",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "git+https://github.com/patternfly-java/patternfly-java.git"
10
+ },
11
+ "bugs": {
12
+ "url": "https://github.com/patternfly-java/patternfly-java/issues"
13
+ },
14
+ "license": "Apache-2.0",
15
+ "keywords": [
16
+ "css",
17
+ "java",
18
+ "gwt",
19
+ "j2cl",
20
+ "patternfly",
21
+ "elemento",
22
+ "finder"
23
+ ],
24
+ "author": "Harald Pehl <harald.pehl@gmail.com>",
25
+ "style": "finder.css",
26
+ "main": "finder.css",
27
+ "exports": {
28
+ ".": "./finder.css"
29
+ },
30
+ "files": [
31
+ "finder.css"
32
+ ],
33
+ "peerDependencies": {
34
+ "@patternfly/patternfly": "^6.4.0"
35
+ }
36
+ }