@commercetools-frontend/ui-kit 15.7.0 → 15.8.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/dist/commercetools-frontend-ui-kit.cjs.dev.js +1 -1
  2. package/dist/commercetools-frontend-ui-kit.cjs.prod.js +1 -1
  3. package/dist/commercetools-frontend-ui-kit.esm.js +1 -1
  4. package/materials/custom-properties.css +20 -0
  5. package/materials/custom-properties.json +14 -0
  6. package/materials/internals/definition.yaml +73 -5
  7. package/package.json +34 -34
package/dist/commercetools-frontend-ui-kit.cjs.dev.js CHANGED
@@ -80,7 +80,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
80
80
  var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
81
81
 
82
82
  // NOTE: This string will be replaced on build time with the package version.
83
- var version = "15.7.0";
83
+ var version = "15.8.0";
84
84
 
85
85
  exports.i18n = i18n__namespace;
86
86
  Object.defineProperty(exports, 'AccessibleHidden', {
package/dist/commercetools-frontend-ui-kit.cjs.prod.js CHANGED
@@ -80,7 +80,7 @@ var text__default = /*#__PURE__*/_interopDefault(text);
80
80
  var viewSwitcher__default = /*#__PURE__*/_interopDefault(viewSwitcher);
81
81
 
82
82
  // NOTE: This string will be replaced on build time with the package version.
83
- var version = "15.7.0";
83
+ var version = "15.8.0";
84
84
 
85
85
  exports.i18n = i18n__namespace;
86
86
  Object.defineProperty(exports, 'AccessibleHidden', {
package/dist/commercetools-frontend-ui-kit.esm.js CHANGED
@@ -33,6 +33,6 @@ export { useDataTableSortingState, usePaginationState, useRowSelection, useSorti
33
33
  export { customProperties, designTokens } from '@commercetools-uikit/design-system';
34
34
 
35
35
  // NOTE: This string will be replaced on build time with the package version.
36
- var version = "15.7.0";
36
+ var version = "15.8.0";
37
37
 
38
38
  export { version };
package/materials/custom-properties.css CHANGED
@@ -157,11 +157,18 @@
157
157
  89.0196078431%,
158
158
  95%
159
159
  );
160
+ --background-color-for-collapsible-panel-header-icon-when-disabled: hsl(
161
+ 195,
162
+ 35.2941176471%,
163
+ 98%
164
+ );
160
165
  --background-color-for-select-input-option-when-hovered: hsl(0, 0%, 90%);
161
166
  --border-for-button-as-secondary: none;
162
167
  --border-for-button-as-secondary-when-hovered: none;
163
168
  --border-for-button-as-secondary-when-active: none;
164
169
  --border-for-card-when-raised: none;
170
+ --border-for-collapsible-panel-header-icon-when-disabled: 1px solid
171
+ var(--color-neutral);
165
172
  --border-color-for-input: hsl(0, 0%, 60%);
166
173
  --border-color-for-input-when-focused: #00b39e;
167
174
  --border-color-for-input-when-disabled: #ccc;
@@ -178,6 +185,8 @@
178
185
  --border-color-for-button-as-icon-when-disabled: #ccc;
179
186
  --border-color-for-table-header: #ccc;
180
187
  --border-color-for-table-header-as-bottom: #213c45;
188
+ --border-color-for-table-manager-droppable-list: hsl(0, 0%, 60%);
189
+ --border-color-for-collapsible-panel-header: hsl(0, 0%, 60%);
181
190
  --border-radius-for-button-as-big: 6px;
182
191
  --border-radius-for-button-as-small: 4px;
183
192
  --border-radius-for-button-as-icon-as-big: 6px;
@@ -186,6 +195,7 @@
186
195
  --border-radius-for-input: 6px;
187
196
  --border-radius-for-tag: 2px;
188
197
  --border-radius-for-card: 6px;
198
+ --border-radius-for-table-manager-droppable-list: 6px;
189
199
  --border-width-for-input: 1px;
190
200
  --border-width-for-input-when-warning: 1px;
191
201
  --border-width-for-input-when-error: 1px;
@@ -245,6 +255,16 @@
245
255
  --padding-for-table-header-as-condensed: 8px;
246
256
  --padding-for-table-cell: 16px;
247
257
  --padding-for-table-cell-as-condensed: 8px;
258
+ --padding-for-table-manager-droppable-list: 8px;
259
+ --padding-for-table-manager-settings-panel: 16px;
260
+ --padding-for-table-manager-draggable-tag: 4px;
261
+ --padding-for-collapsible-panel-header: var(--spacing-20) var(--spacing-30);
262
+ --padding-for-collapsible-panel-header-as-condensed: 8px;
263
+ --padding-for-collapsible-panel-section-wrapper: 16px;
264
+ --padding-for-collapsible-panel-section-wrapper-as-condensed: 8px;
265
+ --padding-for-collapsible-panel-section-description: 0 0 var(--spacing-50);
266
+ --padding-for-collapsible-panel-section-description-as-condensed: 0 0
267
+ var(--spacing-30);
248
268
  --padding-for-input: 8px;
249
269
  --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
250
270
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
package/materials/custom-properties.json CHANGED
@@ -133,11 +133,13 @@
133
133
  "--background-color-for-table-header": "#213c45",
134
134
  "--background-color-for-tag": "hsl(0, 0%, 95%)",
135
135
  "--background-color-for-tag-warning": "hsl(25.110132158590307, 89.0196078431%, 95%)",
136
+ "--background-color-for-collapsible-panel-header-icon-when-disabled": "hsl(195, 35.2941176471%, 98%)",
136
137
  "--background-color-for-select-input-option-when-hovered": "hsl(0, 0%, 90%)",
137
138
  "--border-for-button-as-secondary": "none",
138
139
  "--border-for-button-as-secondary-when-hovered": "none",
139
140
  "--border-for-button-as-secondary-when-active": "none",
140
141
  "--border-for-card-when-raised": "none",
142
+ "--border-for-collapsible-panel-header-icon-when-disabled": "1px solid var(--color-neutral)",
141
143
  "--border-color-for-input": "hsl(0, 0%, 60%)",
142
144
  "--border-color-for-input-when-focused": "#00b39e",
143
145
  "--border-color-for-input-when-disabled": "#ccc",
@@ -154,6 +156,8 @@
154
156
  "--border-color-for-button-as-icon-when-disabled": "#ccc",
155
157
  "--border-color-for-table-header": "#ccc",
156
158
  "--border-color-for-table-header-as-bottom": "#213c45",
159
+ "--border-color-for-table-manager-droppable-list": "hsl(0, 0%, 60%)",
160
+ "--border-color-for-collapsible-panel-header": "hsl(0, 0%, 60%)",
157
161
  "--border-radius-for-button-as-big": "6px",
158
162
  "--border-radius-for-button-as-small": "4px",
159
163
  "--border-radius-for-button-as-icon-as-big": "6px",
@@ -162,6 +166,7 @@
162
166
  "--border-radius-for-input": "6px",
163
167
  "--border-radius-for-tag": "2px",
164
168
  "--border-radius-for-card": "6px",
169
+ "--border-radius-for-table-manager-droppable-list": "6px",
165
170
  "--border-width-for-input": "1px",
166
171
  "--border-width-for-input-when-warning": "1px",
167
172
  "--border-width-for-input-when-error": "1px",
@@ -221,6 +226,15 @@
221
226
  "--padding-for-table-header-as-condensed": "8px",
222
227
  "--padding-for-table-cell": "16px",
223
228
  "--padding-for-table-cell-as-condensed": "8px",
229
+ "--padding-for-table-manager-droppable-list": "8px",
230
+ "--padding-for-table-manager-settings-panel": "16px",
231
+ "--padding-for-table-manager-draggable-tag": "4px",
232
+ "--padding-for-collapsible-panel-header": "var(--spacing-20) var(--spacing-30)",
233
+ "--padding-for-collapsible-panel-header-as-condensed": "8px",
234
+ "--padding-for-collapsible-panel-section-wrapper": "16px",
235
+ "--padding-for-collapsible-panel-section-wrapper-as-condensed": "8px",
236
+ "--padding-for-collapsible-panel-section-description": "0 0 var(--spacing-50)",
237
+ "--padding-for-collapsible-panel-section-description-as-condensed": "0 0 var(--spacing-30)",
224
238
  "--padding-for-input": "8px",
225
239
  "--shadow-for-button": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)",
226
240
  "--shadow-for-button-when-focused": "0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)",
package/materials/internals/definition.yaml CHANGED
@@ -299,6 +299,20 @@ componentGroups:
299
299
  description: 'Table header elements'
300
300
  table-cell:
301
301
  description: 'Table cell elements'
302
+ table-manager-droppable-list:
303
+ description: 'Table manager droppable list elements'
304
+ table-manager-settings-panel:
305
+ description: 'Table manager settings panel elements'
306
+ table-manager-draggable-tag:
307
+ description: 'Table manager settings draggable tag elements'
308
+ collapsible-panel-header:
309
+ description: 'collapsible panel header elements'
310
+ collapsible-panel-section-wrapper:
311
+ description: 'collapsible panel section wrapper elements'
312
+ collapsible-panel-section-description:
313
+ description: 'collapsible panel section description elements'
314
+ collapsible-panel-header-icon:
315
+ description: 'collapsible panel header icon elements'
302
316
  select-input:
303
317
  description: 'Select input elements'
304
318
  select-input-option:
@@ -357,6 +371,8 @@ decisionGroupsByTheme:
357
371
  background-color-for-tag-warning:
358
372
  description: ''
359
373
  choice: color-warning-95
374
+ background-color-for-collapsible-panel-header-icon-when-disabled:
375
+ choice: color-accent-98
360
376
  background-color-for-select-input-option-when-hovered:
361
377
  description: ''
362
378
  choice: color-neutral-90
@@ -373,6 +389,8 @@ decisionGroupsByTheme:
373
389
  choice: 'none'
374
390
  border-for-card-when-raised:
375
391
  choice: 'none'
392
+ border-for-collapsible-panel-header-icon-when-disabled:
393
+ choice: '1px solid var(--color-neutral)'
376
394
 
377
395
  borderColors:
378
396
  label: Border Colors
@@ -420,6 +438,10 @@ decisionGroupsByTheme:
420
438
  choice: color-neutral
421
439
  border-color-for-table-header-as-bottom:
422
440
  choice: color-accent
441
+ border-color-for-table-manager-droppable-list:
442
+ choice: color-neutral-60
443
+ border-color-for-collapsible-panel-header:
444
+ choice: color-neutral-60
423
445
 
424
446
  borderRadiuses:
425
447
  label: Border Radius
@@ -443,8 +465,8 @@ decisionGroupsByTheme:
443
465
  choice: border-radius-2
444
466
  border-radius-for-card:
445
467
  choice: border-radius-6
446
- # We don't have font families in choices yet, so we can't have decisions for
447
- # them
468
+ border-radius-for-table-manager-droppable-list:
469
+ choice: border-radius-6
448
470
 
449
471
  borderWidths:
450
472
  label: Border width
@@ -643,8 +665,26 @@ decisionGroupsByTheme:
643
665
  choice: spacing-30
644
666
  padding-for-table-cell-as-condensed:
645
667
  choice: spacing-20
668
+ padding-for-table-manager-droppable-list:
669
+ choice: spacing-20
670
+ padding-for-table-manager-settings-panel:
671
+ choice: spacing-30
672
+ padding-for-table-manager-draggable-tag:
673
+ choice: spacing-10
674
+ padding-for-collapsible-panel-header:
675
+ choice: 'var(--spacing-20) var(--spacing-30)'
676
+ padding-for-collapsible-panel-header-as-condensed:
677
+ choice: spacing-20
678
+ padding-for-collapsible-panel-section-wrapper:
679
+ choice: spacing-30
680
+ padding-for-collapsible-panel-section-wrapper-as-condensed:
681
+ choice: spacing-20
682
+ padding-for-collapsible-panel-section-description:
683
+ choice: '0 0 var(--spacing-50)'
684
+ padding-for-collapsible-panel-section-description-as-condensed:
685
+ choice: '0 0 var(--spacing-30)'
646
686
  padding-for-input:
647
- choice: 'spacing-20'
687
+ choice: spacing-20
648
688
 
649
689
  shadows:
650
690
  label: Shadows
@@ -706,6 +746,8 @@ decisionGroupsByTheme:
706
746
  choice: color-neutral-95
707
747
  background-color-for-table-header:
708
748
  choice: color-surface
749
+ background-color-for-collapsible-panel-header-icon-when-disabled:
750
+ choice: color-surface
709
751
  background-color-for-input-when-hovered:
710
752
  choice: color-neutral-95
711
753
  background-color-for-input-when-disabled:
@@ -723,6 +765,8 @@ decisionGroupsByTheme:
723
765
  choice: '1px solid var(--color-neutral)'
724
766
  border-for-card-when-raised:
725
767
  choice: '1px solid var(--color-neutral-90)'
768
+ border-for-collapsible-panel-header-icon-when-disabled:
769
+ choice: 'none'
726
770
 
727
771
  borderColors:
728
772
  label: Border Colors
@@ -752,6 +796,10 @@ decisionGroupsByTheme:
752
796
  choice: color-surface
753
797
  border-color-for-table-header-as-bottom:
754
798
  choice: color-neutral-90
799
+ border-color-for-table-manager-droppable-list:
800
+ choice: color-neutral
801
+ border-color-for-collapsible-panel-header:
802
+ choice: color-neutral-90
755
803
 
756
804
  borderRadiuses:
757
805
  label: Border radiuses
@@ -769,6 +817,8 @@ decisionGroupsByTheme:
769
817
  choice: border-radius-2
770
818
  border-radius-for-card:
771
819
  choice: border-radius-4
820
+ border-radius-for-table-manager-droppable-list:
821
+ choice: border-radius-4
772
822
  border-radius-for-input:
773
823
  choice: border-radius-4
774
824
 
@@ -923,8 +973,26 @@ decisionGroupsByTheme:
923
973
  choice: 'var(--spacing-30) var(--spacing-40)'
924
974
  padding-for-table-cell-as-condensed:
925
975
  choice: 'var(--spacing-20) var(--spacing-40)'
976
+ padding-for-table-manager-droppable-list:
977
+ choice: spacing-30
978
+ padding-for-table-manager-settings-panel:
979
+ choice: 'var(--spacing-40) var(--spacing-50)'
980
+ padding-for-table-manager-draggable-tag:
981
+ choice: 'var(--spacing-10) 0'
982
+ padding-for-collapsible-panel-header:
983
+ choice: 'var(--spacing-30) 0'
984
+ padding-for-collapsible-panel-header-as-condensed:
985
+ choice: 'var(--spacing-20) 0'
986
+ padding-for-collapsible-panel-section-wrapper:
987
+ choice: 'var(--spacing-50) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))'
988
+ padding-for-collapsible-panel-section-wrapper-as-condensed:
989
+ choice: 'var(--spacing-40) 0 var(--spacing-70) calc(var(--spacing-30) + var(--spacing-10))'
990
+ padding-for-collapsible-panel-section-description:
991
+ choice: '0 0 var(--spacing-40)'
992
+ padding-for-collapsible-panel-section-description-as-condensed:
993
+ choice: '0 0 var(--spacing-40)'
926
994
  padding-for-input:
927
- choice: 'spacing-30'
995
+ choice: spacing-30
928
996
 
929
997
  shadows:
930
998
  label: Shadows
@@ -941,7 +1009,7 @@ decisionGroupsByTheme:
941
1009
  shadow-for-button-when-disabled:
942
1010
  choice: shadow-0
943
1011
  shadow-for-card-when-raised:
944
- choice: shadow-0
1012
+ choice: '0 1px 5px 0 rgba(0, 0, 0, 0.05)'
945
1013
  shadow-for-input:
946
1014
  choice: shadow-0
947
1015
  shadow-for-input-when-focused:
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-frontend/ui-kit",
3
3
  "description": "A preset of all the UI-Kit components.",
4
- "version": "15.7.0",
4
+ "version": "15.8.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -24,39 +24,39 @@
24
24
  "dependencies": {
25
25
  "@babel/runtime": "^7.19.0",
26
26
  "@babel/runtime-corejs3": "^7.19.1",
27
- "@commercetools-uikit/accessible-hidden": "15.7.0",
28
- "@commercetools-uikit/avatar": "15.7.0",
29
- "@commercetools-uikit/buttons": "15.7.0",
30
- "@commercetools-uikit/card": "15.7.0",
31
- "@commercetools-uikit/collapsible": "15.7.0",
32
- "@commercetools-uikit/collapsible-motion": "15.7.0",
33
- "@commercetools-uikit/collapsible-panel": "15.7.0",
34
- "@commercetools-uikit/constraints": "15.7.0",
35
- "@commercetools-uikit/data-table": "15.7.0",
36
- "@commercetools-uikit/data-table-manager": "15.7.0",
37
- "@commercetools-uikit/design-system": "15.7.0",
38
- "@commercetools-uikit/field-errors": "15.7.0",
39
- "@commercetools-uikit/field-label": "15.7.0",
40
- "@commercetools-uikit/fields": "15.7.0",
41
- "@commercetools-uikit/grid": "15.7.0",
42
- "@commercetools-uikit/hooks": "15.7.0",
43
- "@commercetools-uikit/i18n": "15.7.0",
44
- "@commercetools-uikit/icons": "15.7.0",
45
- "@commercetools-uikit/inputs": "15.7.0",
46
- "@commercetools-uikit/label": "15.7.0",
47
- "@commercetools-uikit/link": "15.7.0",
48
- "@commercetools-uikit/loading-spinner": "15.7.0",
49
- "@commercetools-uikit/messages": "15.7.0",
50
- "@commercetools-uikit/notifications": "15.7.0",
51
- "@commercetools-uikit/pagination": "15.7.0",
52
- "@commercetools-uikit/primary-action-dropdown": "15.7.0",
53
- "@commercetools-uikit/spacings": "15.7.0",
54
- "@commercetools-uikit/stamp": "15.7.0",
55
- "@commercetools-uikit/tag": "15.7.0",
56
- "@commercetools-uikit/text": "15.7.0",
57
- "@commercetools-uikit/tooltip": "15.7.0",
58
- "@commercetools-uikit/utils": "15.7.0",
59
- "@commercetools-uikit/view-switcher": "15.7.0"
27
+ "@commercetools-uikit/accessible-hidden": "15.8.0",
28
+ "@commercetools-uikit/avatar": "15.8.0",
29
+ "@commercetools-uikit/buttons": "15.8.0",
30
+ "@commercetools-uikit/card": "15.8.0",
31
+ "@commercetools-uikit/collapsible": "15.8.0",
32
+ "@commercetools-uikit/collapsible-motion": "15.8.0",
33
+ "@commercetools-uikit/collapsible-panel": "15.8.0",
34
+ "@commercetools-uikit/constraints": "15.8.0",
35
+ "@commercetools-uikit/data-table": "15.8.0",
36
+ "@commercetools-uikit/data-table-manager": "15.8.0",
37
+ "@commercetools-uikit/design-system": "15.8.0",
38
+ "@commercetools-uikit/field-errors": "15.8.0",
39
+ "@commercetools-uikit/field-label": "15.8.0",
40
+ "@commercetools-uikit/fields": "15.8.0",
41
+ "@commercetools-uikit/grid": "15.8.0",
42
+ "@commercetools-uikit/hooks": "15.8.0",
43
+ "@commercetools-uikit/i18n": "15.8.0",
44
+ "@commercetools-uikit/icons": "15.8.0",
45
+ "@commercetools-uikit/inputs": "15.8.0",
46
+ "@commercetools-uikit/label": "15.8.0",
47
+ "@commercetools-uikit/link": "15.8.0",
48
+ "@commercetools-uikit/loading-spinner": "15.8.0",
49
+ "@commercetools-uikit/messages": "15.8.0",
50
+ "@commercetools-uikit/notifications": "15.8.0",
51
+ "@commercetools-uikit/pagination": "15.8.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "15.8.0",
53
+ "@commercetools-uikit/spacings": "15.8.0",
54
+ "@commercetools-uikit/stamp": "15.8.0",
55
+ "@commercetools-uikit/tag": "15.8.0",
56
+ "@commercetools-uikit/text": "15.8.0",
57
+ "@commercetools-uikit/tooltip": "15.8.0",
58
+ "@commercetools-uikit/utils": "15.8.0",
59
+ "@commercetools-uikit/view-switcher": "15.8.0"
60
60
  },
61
61
  "devDependencies": {
62
62
  "moment": "2.29.4",