@bpmn-io/properties-panel 0.13.0 → 0.14.0

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 (7) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/assets/properties-panel.css +35 -7
  3. package/dist/index.esm.js +126 -493
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +126 -491
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -6,6 +6,21 @@ All notable changes to [`@bpmn-io/properties-panel`](https://github.com/bpmn-io/
6
6
 
7
7
  ___Note:__ Yet to be released changes appear here._
8
8
 
9
+ ## 0.14.0
10
+
11
+ * `FEAT`: enable multiple and empty state ([#69](https://github.com/bpmn-io/properties-panel/issues/69))
12
+ * `FEAT`: make group headers sticky ([#151](https://github.com/bpmn-io/properties-panel/pull/151))
13
+ * `FIX`: fix outline on header buttons ([#148](https://github.com/bpmn-io/properties-panel/pull/148))
14
+
15
+ ## 0.13.2
16
+
17
+ * `FIX`: remove unnecessary scroll padding ([#145](https://github.com/bpmn-io/properties-panel/pull/145))
18
+
19
+ ## 0.13.1
20
+
21
+ * `FIX`: add accessible title for documentation ref ([#144](https://github.com/bpmn-io/properties-panel/pull/144))
22
+ * `FIX`: make event bus prop optional ([#143](https://github.com/bpmn-io/properties-panel/pull/143))
23
+
9
24
  ## 0.13.0
10
25
 
11
26
  * `FEAT`: allow showing entries and errors through events ([#137](https://github.com/bpmn-io/properties-panel/pull/137))
package/assets/properties-panel.css CHANGED
@@ -36,7 +36,8 @@
36
36
  --description-code-border-color: var(--color-grey-225-10-85);
37
37
  --description-list-item-color: var(--color-grey-225-10-35);
38
38
 
39
- --placeholder-color: var(--color-grey-225-10-75);
39
+ --placeholder-color: var(--color-grey-225-10-35);
40
+ --placeholder-background-color: var(--color-grey-225-10-95);
40
41
 
41
42
  --header-background-color: var(--color-grey-225-10-95);
42
43
  --header-icon-fill-color: var(--color-grey-225-10-15);
@@ -45,6 +46,9 @@
45
46
  --group-background-color: var(--color-white);
46
47
  --group-bottom-border-color: var(--color-grey-225-10-75);
47
48
 
49
+ --sticky-group-background-color: var(--color-grey-225-10-95);
50
+ --sticky-group-bottom-border-color: var(--color-grey-225-10-75);
51
+
48
52
  --add-entry-fill-color: var(--color-grey-225-10-35);
49
53
  --add-entry-hover-fill-color: var(--color-white);
50
54
  --add-entry-hover-background-color: var(--color-blue-205-100-50);
@@ -128,11 +132,27 @@
128
132
  flex: 1;
129
133
  }
130
134
 
135
+ /**
136
+ * Placeholder (empty, multi select, ...)
137
+ */
131
138
  .bio-properties-panel-placeholder {
132
- padding: 10px;
139
+ position: absolute;
140
+ display: flex;
141
+ flex-direction: column;
142
+ justify-content: center;
143
+ align-items: center;
144
+ top: 0;
145
+ right: 0;
146
+ bottom: 0;
147
+ left: 0;
148
+ background-color: var(--placeholder-background-color);
149
+ }
150
+
151
+ .bio-properties-panel-placeholder-text {
133
152
  color: var(--placeholder-color);
134
153
  font-size: var(--text-size-base);
135
154
  text-align: center;
155
+ margin: 12px 48px;
136
156
  }
137
157
 
138
158
  /**
@@ -144,7 +164,6 @@
144
164
  align-items: center;
145
165
  font-size: var(--text-size-base);
146
166
  padding: 16px 10px;
147
- margin-bottom: 2px;
148
167
  background-color: var(--header-background-color);
149
168
  border-bottom: 1px solid var(--header-bottom-border-color);
150
169
  width: 100%;
@@ -197,7 +216,6 @@
197
216
  overflow-y: auto;
198
217
  overflow-x: hidden;
199
218
  flex: 1;
200
- padding-bottom: 70px;
201
219
  }
202
220
 
203
221
  /**
@@ -206,10 +224,10 @@
206
224
  .bio-properties-panel-group {
207
225
  background-color: var(--group-background-color);
208
226
  border-bottom: 1px solid var(--group-bottom-border-color);
227
+ position: relative;
209
228
  }
210
229
 
211
230
  .bio-properties-panel-group-header {
212
- position: relative;
213
231
  display: flex;
214
232
  flex-direction: row;
215
233
  align-items: center;
@@ -217,6 +235,12 @@
217
235
  height: 32px;
218
236
  user-select: none;
219
237
  justify-content: space-between;
238
+ margin-bottom: -1px; /* avoid double borders */
239
+ position: relative; /* browsers not supporting sticky */
240
+ position: -webkit-sticky; /* for safari */
241
+ position: sticky;
242
+ top: 0;
243
+ z-index: 1;
220
244
  }
221
245
 
222
246
  .bio-properties-panel-group-header .bio-properties-panel-group-header-title {
@@ -230,6 +254,11 @@
230
254
  font-weight: 500;
231
255
  }
232
256
 
257
+ .bio-properties-panel-group-header.sticky {
258
+ background-color: var(--sticky-group-background-color);
259
+ border-bottom: 1px solid var(--sticky-group-bottom-border-color);
260
+ }
261
+
233
262
  .bio-properties-panel-group-header-buttons {
234
263
  display: flex;
235
264
  }
@@ -259,7 +288,6 @@
259
288
 
260
289
  .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry {
261
290
  margin-right: 69px;
262
- padding-left: 6px;
263
291
  }
264
292
 
265
293
  .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry:hover {
@@ -269,7 +297,7 @@
269
297
  .bio-properties-panel-group-header.empty .bio-properties-panel-add-entry-label {
270
298
  display: none;
271
299
  color: var(--add-entry-label-color);
272
- padding: 4px 6px 3px 2px;
300
+ padding: 0 6px 0 2px;
273
301
  }
274
302
 
275
303
  .bio-properties-panel-group-header-button.bio-properties-panel-add-entry:hover {