@commercetools-frontend/ui-kit 15.11.2 → 15.12.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.
@@ -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.11.2";
83
+ var version = "15.12.0";
84
84
 
85
85
  exports.i18n = i18n__namespace;
86
86
  Object.defineProperty(exports, 'AccessibleHidden', {
@@ -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.11.2";
83
+ var version = "15.12.0";
84
84
 
85
85
  exports.i18n = i18n__namespace;
86
86
  Object.defineProperty(exports, 'AccessibleHidden', {
@@ -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.11.2";
36
+ var version = "15.12.0";
37
37
 
38
38
  export { version };
@@ -139,6 +139,7 @@
139
139
  --break-point-biggerdesktop: 1280px;
140
140
  --break-point-giantdesktop: 1680px;
141
141
  --break-point-jumbodesktop: 1920px;
142
+ --align-items-for-select-input-tag: unset;
142
143
  --background-color-for-button-when-active: #fff;
143
144
  --background-color-for-button-when-hovered: #fff;
144
145
  --background-color-for-button-as-primary-when-active: #00b39e;
@@ -216,6 +217,7 @@
216
217
  --border-for-collapsible-panel-header-icon-when-disabled: 1px solid
217
218
  var(--color-neutral);
218
219
  --border-for-view-switcher: none;
220
+ --border-for-select-input-tag: none;
219
221
  --border-color-for-input: hsl(0, 0%, 60%);
220
222
  --border-color-for-input-when-focused: #00b39e;
221
223
  --border-color-for-input-when-disabled: #ccc;
@@ -307,12 +309,14 @@
307
309
  --font-color-for-content-notification-icon-when-success: #fff;
308
310
  --font-color-for-content-notification-icon-when-info: #fff;
309
311
  --font-color-for-search-input-icon: #1a1a1a;
310
- --font-color-for-search-input-icon-when-hovered: #1a1a1a;
312
+ --font-color-for-search-input-icon-when-hovered: #00b39e;
311
313
  --font-color-for-select-input-icon: #1a1a1a;
312
314
  --font-color-for-select-input-when-error: #1a1a1a;
313
315
  --font-color-for-select-input-when-warning: #1a1a1a;
314
316
  --font-color-for-select-input-icon-when-error: #1a1a1a;
315
317
  --font-color-for-select-input-icon-when-warning: #1a1a1a;
318
+ --font-color-for-money-input-currency-dropdown-indicator: #1a1a1a;
319
+ --font-color-for-search-input-icon-when-readonly: hsl(0, 0%, 60%);
316
320
  --height-for-button-as-big: 32px;
317
321
  --height-for-button-as-small: 24px;
318
322
  --height-for-button-as-icon-as-big: 32px;
@@ -321,7 +325,9 @@
321
325
  --height-for-input: 32px;
322
326
  --height-for-view-switcher: 32px;
323
327
  --height-for-view-switcher-when-condensed: 24px;
328
+ --height-for-select-input-tag: 26px;
324
329
  --width-for-avatar-as-medium: 48px;
330
+ --min-width-for-money-input-currency-dropdown: 72px;
325
331
  --placeholder-font-color-for-input: hsl(0, 0%, 60%);
326
332
  --font-size-for-button: 1rem;
327
333
  --font-size-for-input: 1rem;
@@ -342,6 +348,7 @@
342
348
  --font-size-for-avatar-as-big: 3rem;
343
349
  --font-size-for-localized-multiline-text-input-label: 0.9231rem;
344
350
  --font-size-for-content-notification: 1rem;
351
+ --font-size-for-select-input-tag: 0.9231rem;
345
352
  --icon-color-for-datetime-input-icon: #1a1a1a;
346
353
  --icon-color-for-datetime-input-icon-when-hovered: #f16d0e;
347
354
  --line-height-for-text-as-h1: inherit;
@@ -366,6 +373,9 @@
366
373
  --margin-for-group-heading-select-input-options: 4px;
367
374
  --margin-for-select-input-icon: 4px;
368
375
  --margin-left-for-select-input-icon: inherit;
376
+ --margin-right-for-money-input-precision-badge: 4px;
377
+ --margin-right-for-search-input-icon: 8px;
378
+ --margin-right-for-clear-input-icon: 4px;
369
379
  --padding-for-stamp: var(--spacing-10) var(--spacing-20);
370
380
  --padding-for-stamp-as-condensed: 1px var(--spacing-10);
371
381
  --padding-for-tag: 5px var(--spacing-20);
@@ -400,6 +410,7 @@
400
410
  --padding-bottom-for-select-input-options: 4px;
401
411
  --padding-for-group-heading-select-input-options: 8px;
402
412
  --padding-for-select-input-menu: inherit;
413
+ --padding-for-money-input-currency-dropdown: 0 var(--spacing-20);
403
414
  --shadow-for-button: 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12),
404
415
  0 1px 1px 0 rgba(0, 0, 0, 0.24);
405
416
  --shadow-for-button-when-focused: 0 1px 9.5px 0 rgba(0, 0, 0, 0.12),
@@ -127,6 +127,7 @@
127
127
  "--break-point-biggerdesktop": "1280px",
128
128
  "--break-point-giantdesktop": "1680px",
129
129
  "--break-point-jumbodesktop": "1920px",
130
+ "--align-items-for-select-input-tag": "unset",
130
131
  "--background-color-for-button-when-active": "#fff",
131
132
  "--background-color-for-button-when-hovered": "#fff",
132
133
  "--background-color-for-button-as-primary-when-active": "#00b39e",
@@ -175,6 +176,7 @@
175
176
  "--border-for-card-when-raised": "none",
176
177
  "--border-for-collapsible-panel-header-icon-when-disabled": "1px solid var(--color-neutral)",
177
178
  "--border-for-view-switcher": "none",
179
+ "--border-for-select-input-tag": "none",
178
180
  "--border-color-for-input": "hsl(0, 0%, 60%)",
179
181
  "--border-color-for-input-when-focused": "#00b39e",
180
182
  "--border-color-for-input-when-disabled": "#ccc",
@@ -261,12 +263,14 @@
261
263
  "--font-color-for-content-notification-icon-when-success": "#fff",
262
264
  "--font-color-for-content-notification-icon-when-info": "#fff",
263
265
  "--font-color-for-search-input-icon": "#1a1a1a",
264
- "--font-color-for-search-input-icon-when-hovered": "#1a1a1a",
266
+ "--font-color-for-search-input-icon-when-hovered": "#00b39e",
265
267
  "--font-color-for-select-input-icon": "#1a1a1a",
266
268
  "--font-color-for-select-input-when-error": "#1a1a1a",
267
269
  "--font-color-for-select-input-when-warning": "#1a1a1a",
268
270
  "--font-color-for-select-input-icon-when-error": "#1a1a1a",
269
271
  "--font-color-for-select-input-icon-when-warning": "#1a1a1a",
272
+ "--font-color-for-money-input-currency-dropdown-indicator": "#1a1a1a",
273
+ "--font-color-for-search-input-icon-when-readonly": "hsl(0, 0%, 60%)",
270
274
  "--height-for-button-as-big": "32px",
271
275
  "--height-for-button-as-small": "24px",
272
276
  "--height-for-button-as-icon-as-big": "32px",
@@ -275,7 +279,9 @@
275
279
  "--height-for-input": "32px",
276
280
  "--height-for-view-switcher": "32px",
277
281
  "--height-for-view-switcher-when-condensed": "24px",
282
+ "--height-for-select-input-tag": "26px",
278
283
  "--width-for-avatar-as-medium": "48px",
284
+ "--min-width-for-money-input-currency-dropdown": "72px",
279
285
  "--placeholder-font-color-for-input": "hsl(0, 0%, 60%)",
280
286
  "--font-size-for-button": "1rem",
281
287
  "--font-size-for-input": "1rem",
@@ -296,6 +302,7 @@
296
302
  "--font-size-for-avatar-as-big": "3rem",
297
303
  "--font-size-for-localized-multiline-text-input-label": "0.9231rem",
298
304
  "--font-size-for-content-notification": "1rem",
305
+ "--font-size-for-select-input-tag": "0.9231rem",
299
306
  "--icon-color-for-datetime-input-icon": "#1a1a1a",
300
307
  "--icon-color-for-datetime-input-icon-when-hovered": "#f16d0e",
301
308
  "--line-height-for-text-as-h1": "inherit",
@@ -320,6 +327,9 @@
320
327
  "--margin-for-group-heading-select-input-options": "4px",
321
328
  "--margin-for-select-input-icon": "4px",
322
329
  "--margin-left-for-select-input-icon": "inherit",
330
+ "--margin-right-for-money-input-precision-badge": "4px",
331
+ "--margin-right-for-search-input-icon": "8px",
332
+ "--margin-right-for-clear-input-icon": "4px",
323
333
  "--padding-for-stamp": "var(--spacing-10) var(--spacing-20)",
324
334
  "--padding-for-stamp-as-condensed": "1px var(--spacing-10)",
325
335
  "--padding-for-tag": "5px var(--spacing-20)",
@@ -352,6 +362,7 @@
352
362
  "--padding-bottom-for-select-input-options": "4px",
353
363
  "--padding-for-group-heading-select-input-options": "8px",
354
364
  "--padding-for-select-input-menu": "inherit",
365
+ "--padding-for-money-input-currency-dropdown": "0 var(--spacing-20)",
355
366
  "--shadow-for-button": "0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)",
356
367
  "--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)",
357
368
  "--shadow-for-button-when-hovered": "0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)",
@@ -371,6 +371,8 @@ componentGroups:
371
371
  description: 'Content notification icon elements'
372
372
  select-input-icon:
373
373
  description: 'Select input icon elements'
374
+ select-input-tag:
375
+ description: 'Select input inner tag elements'
374
376
  clear-input-icon:
375
377
  description: 'clear input icon elements'
376
378
  search-input-icon:
@@ -381,9 +383,22 @@ componentGroups:
381
383
  description: 'select input options element'
382
384
  group-heading-select-input-options:
383
385
  description: 'group heading select input options element'
386
+ money-input-currency-dropdown:
387
+ description: 'Money input currency dropdown elements'
388
+ money-input-currency-dropdown-indicator:
389
+ description: 'Money Input Dropdown indicator elements'
390
+ money-input-precision-badge:
391
+ description: 'Money input precision badge elements'
384
392
 
385
393
  decisionGroupsByTheme:
386
394
  default:
395
+ alignItems:
396
+ label: Flex align items
397
+ prefix: align-items
398
+ decisions:
399
+ align-items-for-select-input-tag:
400
+ choice: 'unset'
401
+
387
402
  backgroundColors:
388
403
  label: Background Colors
389
404
  prefix: background-color
@@ -502,6 +517,8 @@ decisionGroupsByTheme:
502
517
  choice: '1px solid var(--color-neutral)'
503
518
  border-for-view-switcher:
504
519
  choice: 'none'
520
+ border-for-select-input-tag:
521
+ choice: 'none'
505
522
 
506
523
  borderColors:
507
524
  label: Border Colors
@@ -721,7 +738,7 @@ decisionGroupsByTheme:
721
738
  font-color-for-search-input-icon:
722
739
  choice: color-solid
723
740
  font-color-for-search-input-icon-when-hovered:
724
- choice: color-solid
741
+ choice: color-primary
725
742
  font-color-for-select-input-icon:
726
743
  choice: color-solid
727
744
  font-color-for-select-input-when-error:
@@ -732,6 +749,10 @@ decisionGroupsByTheme:
732
749
  choice: color-solid
733
750
  font-color-for-select-input-icon-when-warning:
734
751
  choice: color-solid
752
+ font-color-for-money-input-currency-dropdown-indicator:
753
+ choice: color-solid
754
+ font-color-for-search-input-icon-when-readonly:
755
+ choice: color-neutral-60
735
756
 
736
757
  heights:
737
758
  label: Height
@@ -753,6 +774,8 @@ decisionGroupsByTheme:
753
774
  choice: '32px'
754
775
  height-for-view-switcher-when-condensed:
755
776
  choice: '24px'
777
+ height-for-select-input-tag:
778
+ choice: '26px'
756
779
 
757
780
  widths:
758
781
  label: Width
@@ -761,6 +784,13 @@ decisionGroupsByTheme:
761
784
  width-for-avatar-as-medium:
762
785
  choice: '48px'
763
786
 
787
+ minWidths:
788
+ label: Min width
789
+ prefix: min-width
790
+ decisions:
791
+ min-width-for-money-input-currency-dropdown:
792
+ choice: '72px'
793
+
764
794
  placeholderFontColors:
765
795
  label: Placeholder font colors
766
796
  prefix: placeholder-font-color
@@ -822,6 +852,8 @@ decisionGroupsByTheme:
822
852
  choice: font-size-15
823
853
  font-size-for-content-notification:
824
854
  choice: font-size-30
855
+ font-size-for-select-input-tag:
856
+ choice: font-size-15
825
857
 
826
858
  iconColors:
827
859
  label: Icon colors
@@ -904,6 +936,12 @@ decisionGroupsByTheme:
904
936
  choice: spacing-10
905
937
  margin-left-for-select-input-icon:
906
938
  choice: 'inherit'
939
+ margin-right-for-money-input-precision-badge:
940
+ choice: spacing-10
941
+ margin-right-for-search-input-icon:
942
+ choice: spacing-20
943
+ margin-right-for-clear-input-icon:
944
+ choice: spacing-10
907
945
 
908
946
  paddings:
909
947
  label: Paddings
@@ -973,6 +1011,8 @@ decisionGroupsByTheme:
973
1011
  choice: spacing-20
974
1012
  padding-for-select-input-menu:
975
1013
  choice: 'inherit'
1014
+ padding-for-money-input-currency-dropdown:
1015
+ choice: '0 var(--spacing-20)'
976
1016
 
977
1017
  shadows:
978
1018
  label: Shadows
@@ -1008,6 +1048,13 @@ decisionGroupsByTheme:
1008
1048
  choice: shadow-7
1009
1049
 
1010
1050
  test:
1051
+ alignItems:
1052
+ label: Flex align items
1053
+ prefix: align-items
1054
+ decisions:
1055
+ align-items-for-select-input-tag:
1056
+ choice: 'center'
1057
+
1011
1058
  backgroundColors:
1012
1059
  label: Background Colors
1013
1060
  prefix: background-color
@@ -1104,6 +1151,8 @@ decisionGroupsByTheme:
1104
1151
  choice: 'none'
1105
1152
  border-for-view-switcher:
1106
1153
  choice: '1px solid var(--color-neutral)'
1154
+ border-for-select-input-tag:
1155
+ choice: '1px solid var(--color-neutral-85)'
1107
1156
 
1108
1157
  borderColors:
1109
1158
  label: Border Colors
@@ -1259,8 +1308,6 @@ decisionGroupsByTheme:
1259
1308
  choice: color-neutral-40
1260
1309
  font-color-for-search-input-icon:
1261
1310
  choice: color-neutral-60
1262
- font-color-for-search-input-icon-when-hovered:
1263
- choice: color-primary
1264
1311
  font-color-for-select-input-icon:
1265
1312
  choice: color-neutral-60
1266
1313
  font-color-for-select-input-when-error:
@@ -1271,6 +1318,8 @@ decisionGroupsByTheme:
1271
1318
  choice: color-error
1272
1319
  font-color-for-select-input-icon-when-warning:
1273
1320
  choice: color-warning
1321
+ font-color-for-money-input-currency-dropdown-indicator:
1322
+ choice: color-neutral-40
1274
1323
 
1275
1324
  fontSizes:
1276
1325
  label: Font Sizes
@@ -1323,6 +1372,8 @@ decisionGroupsByTheme:
1323
1372
  choice: font-size-80
1324
1373
  font-size-for-localized-multiline-text-input-label:
1325
1374
  choice: font-size-30
1375
+ font-size-for-select-input-tag:
1376
+ choice: font-size-30
1326
1377
 
1327
1378
  lineHeights:
1328
1379
  label: Line Heights
@@ -1400,6 +1451,8 @@ decisionGroupsByTheme:
1400
1451
  choice: '40px'
1401
1452
  height-for-view-switcher-when-condensed:
1402
1453
  choice: '32px'
1454
+ height-for-select-input-tag:
1455
+ choice: '32px'
1403
1456
 
1404
1457
  iconColors:
1405
1458
  label: Icon colors
@@ -1417,6 +1470,13 @@ decisionGroupsByTheme:
1417
1470
  width-for-avatar-as-medium:
1418
1471
  choice: '40px'
1419
1472
 
1473
+ minWidths:
1474
+ label: Min width
1475
+ prefix: min-width
1476
+ decisions:
1477
+ min-width-for-money-input-currency-dropdown:
1478
+ choice: '80px'
1479
+
1420
1480
  margins:
1421
1481
  label: Margins
1422
1482
  prefix: margin
@@ -1433,6 +1493,12 @@ decisionGroupsByTheme:
1433
1493
  choice: spacing-20
1434
1494
  margin-left-for-select-input-icon:
1435
1495
  choice: spacing-20
1496
+ margin-right-for-money-input-precision-badge:
1497
+ choice: '12px'
1498
+ margin-right-for-search-input-icon:
1499
+ choice: '12px'
1500
+ margin-right-for-clear-input-icon:
1501
+ choice: spacing-20
1436
1502
 
1437
1503
  paddings:
1438
1504
  label: Paddings
@@ -1502,6 +1568,8 @@ decisionGroupsByTheme:
1502
1568
  choice: spacing-30
1503
1569
  padding-for-select-input-menu:
1504
1570
  choice: 'var(--spacing-10) 0'
1571
+ padding-for-money-input-currency-dropdown:
1572
+ choice: '0 12px'
1505
1573
 
1506
1574
  shadows:
1507
1575
  label: Shadows
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.11.2",
4
+ "version": "15.12.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -22,41 +22,41 @@
22
22
  "copy-assets": "rm -rf i18n materials && mkdir -p i18n/data && cp -R ../../design-system/materials materials && cp -R ../../packages/i18n/data i18n/"
23
23
  },
24
24
  "dependencies": {
25
- "@babel/runtime": "^7.19.0",
26
- "@babel/runtime-corejs3": "^7.19.1",
27
- "@commercetools-uikit/accessible-hidden": "15.11.2",
28
- "@commercetools-uikit/avatar": "15.11.2",
29
- "@commercetools-uikit/buttons": "15.11.2",
30
- "@commercetools-uikit/card": "15.11.2",
31
- "@commercetools-uikit/collapsible": "15.11.2",
32
- "@commercetools-uikit/collapsible-motion": "15.11.2",
33
- "@commercetools-uikit/collapsible-panel": "15.11.2",
34
- "@commercetools-uikit/constraints": "15.11.2",
35
- "@commercetools-uikit/data-table": "15.11.2",
36
- "@commercetools-uikit/data-table-manager": "15.11.2",
37
- "@commercetools-uikit/design-system": "15.11.2",
38
- "@commercetools-uikit/field-errors": "15.11.2",
39
- "@commercetools-uikit/field-label": "15.11.2",
40
- "@commercetools-uikit/fields": "15.11.2",
41
- "@commercetools-uikit/grid": "15.11.2",
42
- "@commercetools-uikit/hooks": "15.11.2",
43
- "@commercetools-uikit/i18n": "15.11.2",
44
- "@commercetools-uikit/icons": "15.11.2",
45
- "@commercetools-uikit/inputs": "15.11.2",
46
- "@commercetools-uikit/label": "15.11.2",
47
- "@commercetools-uikit/link": "15.11.2",
48
- "@commercetools-uikit/loading-spinner": "15.11.2",
49
- "@commercetools-uikit/messages": "15.11.2",
50
- "@commercetools-uikit/notifications": "15.11.2",
51
- "@commercetools-uikit/pagination": "15.11.2",
52
- "@commercetools-uikit/primary-action-dropdown": "15.11.2",
53
- "@commercetools-uikit/spacings": "15.11.2",
54
- "@commercetools-uikit/stamp": "15.11.2",
55
- "@commercetools-uikit/tag": "15.11.2",
56
- "@commercetools-uikit/text": "15.11.2",
57
- "@commercetools-uikit/tooltip": "15.11.2",
58
- "@commercetools-uikit/utils": "15.11.2",
59
- "@commercetools-uikit/view-switcher": "15.11.2"
25
+ "@babel/runtime": "^7.20.13",
26
+ "@babel/runtime-corejs3": "^7.20.13",
27
+ "@commercetools-uikit/accessible-hidden": "15.12.0",
28
+ "@commercetools-uikit/avatar": "15.12.0",
29
+ "@commercetools-uikit/buttons": "15.12.0",
30
+ "@commercetools-uikit/card": "15.12.0",
31
+ "@commercetools-uikit/collapsible": "15.12.0",
32
+ "@commercetools-uikit/collapsible-motion": "15.12.0",
33
+ "@commercetools-uikit/collapsible-panel": "15.12.0",
34
+ "@commercetools-uikit/constraints": "15.12.0",
35
+ "@commercetools-uikit/data-table": "15.12.0",
36
+ "@commercetools-uikit/data-table-manager": "15.12.0",
37
+ "@commercetools-uikit/design-system": "15.12.0",
38
+ "@commercetools-uikit/field-errors": "15.12.0",
39
+ "@commercetools-uikit/field-label": "15.12.0",
40
+ "@commercetools-uikit/fields": "15.12.0",
41
+ "@commercetools-uikit/grid": "15.12.0",
42
+ "@commercetools-uikit/hooks": "15.12.0",
43
+ "@commercetools-uikit/i18n": "15.12.0",
44
+ "@commercetools-uikit/icons": "15.12.0",
45
+ "@commercetools-uikit/inputs": "15.12.0",
46
+ "@commercetools-uikit/label": "15.12.0",
47
+ "@commercetools-uikit/link": "15.12.0",
48
+ "@commercetools-uikit/loading-spinner": "15.12.0",
49
+ "@commercetools-uikit/messages": "15.12.0",
50
+ "@commercetools-uikit/notifications": "15.12.0",
51
+ "@commercetools-uikit/pagination": "15.12.0",
52
+ "@commercetools-uikit/primary-action-dropdown": "15.12.0",
53
+ "@commercetools-uikit/spacings": "15.12.0",
54
+ "@commercetools-uikit/stamp": "15.12.0",
55
+ "@commercetools-uikit/tag": "15.12.0",
56
+ "@commercetools-uikit/text": "15.12.0",
57
+ "@commercetools-uikit/tooltip": "15.12.0",
58
+ "@commercetools-uikit/utils": "15.12.0",
59
+ "@commercetools-uikit/view-switcher": "15.12.0"
60
60
  },
61
61
  "devDependencies": {
62
62
  "moment": "2.29.4",