@carbon/ibm-products 2.0.0-rc.1 → 2.0.0-rc.2

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 (35) hide show
  1. package/css/index-full-carbon.css +106 -10
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +4 -0
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +19 -0
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +74 -1
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +2 -2
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Datagrid/useDefaultStringRenderer.js +4 -1
  18. package/es/components/Datagrid/utils/makeData.js +1 -1
  19. package/es/components/WebTerminal/WebTerminal.js +1 -1
  20. package/es/components/WebTerminal/WebTerminalContentWrapper.js +1 -1
  21. package/es/components/WebTerminal/hooks/index.js +6 -0
  22. package/es/components/WebTerminal/index.js +6 -0
  23. package/es/components/WebTerminal/preview-components/Navigation.js +6 -0
  24. package/es/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  25. package/es/components/WebTerminal/preview-components/index.js +7 -0
  26. package/lib/components/Datagrid/useDefaultStringRenderer.js +5 -1
  27. package/lib/components/Datagrid/utils/makeData.js +1 -1
  28. package/lib/components/WebTerminal/hooks/index.js +6 -0
  29. package/lib/components/WebTerminal/preview-components/Navigation.js +6 -0
  30. package/lib/components/WebTerminal/preview-components/documentationLinks.js +6 -0
  31. package/package.json +4 -4
  32. package/scss/components/Datagrid/styles/_datagrid.scss +8 -0
  33. package/scss/components/WebTerminal/_carbon-imports.scss +6 -0
  34. package/scss/components/WebTerminal/_index.scss +7 -0
  35. package/scss/components/WebTerminal/_storybook-styles.scss +7 -0
@@ -4909,6 +4909,10 @@ button.c4p--add-select__global-filter-toggle--open {
4909
4909
  --cds-helper-text-01-font-size: 0.75rem;
4910
4910
  --cds-helper-text-01-line-height: 1.33333;
4911
4911
  --cds-helper-text-01-letter-spacing: 0.32px;
4912
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
4913
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
4914
+ --cds-helper-text-02-line-height: 1.28572;
4915
+ --cds-helper-text-02-letter-spacing: 0.16px;
4912
4916
  --cds-body-short-01-font-size: 0.875rem;
4913
4917
  --cds-body-short-01-font-weight: 400;
4914
4918
  --cds-body-short-01-line-height: 1.28572;
@@ -8685,6 +8689,10 @@ button.c4p--add-select__global-filter-toggle--open {
8685
8689
  --cds-helper-text-01-font-size: 0.75rem;
8686
8690
  --cds-helper-text-01-line-height: 1.33333;
8687
8691
  --cds-helper-text-01-letter-spacing: 0.32px;
8692
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
8693
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
8694
+ --cds-helper-text-02-line-height: 1.28572;
8695
+ --cds-helper-text-02-letter-spacing: 0.16px;
8688
8696
  --cds-body-short-01-font-size: 0.875rem;
8689
8697
  --cds-body-short-01-font-weight: 400;
8690
8698
  --cds-body-short-01-line-height: 1.28572;
@@ -9057,6 +9065,10 @@ button.c4p--add-select__global-filter-toggle--open {
9057
9065
  --cds-helper-text-01-font-size: 0.75rem;
9058
9066
  --cds-helper-text-01-line-height: 1.33333;
9059
9067
  --cds-helper-text-01-letter-spacing: 0.32px;
9068
+ --cds-helper-text-02-font-size: carbon--type-scale(2);
9069
+ --cds-helper-text-02-font-weight: carbon--font-weight("regular");
9070
+ --cds-helper-text-02-line-height: 1.28572;
9071
+ --cds-helper-text-02-letter-spacing: 0.16px;
9060
9072
  --cds-body-short-01-font-size: 0.875rem;
9061
9073
  --cds-body-short-01-font-weight: 400;
9062
9074
  --cds-body-short-01-line-height: 1.28572;
@@ -10417,6 +10429,12 @@ button.c4p--add-select__global-filter-toggle--open {
10417
10429
  text-overflow: ellipsis;
10418
10430
  white-space: nowrap;
10419
10431
  }
10432
+ .c4p--datagrid__grid-container .c4p--datagrid__defaultStringRenderer.c4p--datagrid__defaultStringRenderer--multiline {
10433
+ display: -webkit-box;
10434
+ -webkit-box-orient: vertical;
10435
+ -webkit-line-clamp: 2;
10436
+ white-space: initial;
10437
+ }
10420
10438
  .c4p--datagrid__grid-container .c4p--datagrid__expanded-row {
10421
10439
  display: flex;
10422
10440
  overflow: hidden;
@@ -12768,6 +12786,7 @@ svg.c4p--datagrid__draggable-handleStyle.disable {
12768
12786
  appearance: none;
12769
12787
  background: none;
12770
12788
  cursor: pointer;
12789
+ text-align: start;
12771
12790
  width: 100%;
12772
12791
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
12773
12792
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
@@ -15296,6 +15315,7 @@ em {
15296
15315
  appearance: none;
15297
15316
  background: none;
15298
15317
  cursor: pointer;
15318
+ text-align: start;
15299
15319
  width: 100%;
15300
15320
  position: relative;
15301
15321
  display: flex;
@@ -16399,12 +16419,61 @@ li.cds--accordion__item--disabled:last-of-type {
16399
16419
  margin-bottom: 0;
16400
16420
  }
16401
16421
 
16402
- .cds--label .cds--tooltip__trigger {
16422
+ .cds--label + .cds--tooltip {
16423
+ position: relative;
16424
+ top: 0.2rem;
16425
+ left: 0.5rem;
16426
+ }
16427
+
16428
+ .cds--label + .cds--tooltip .cds--tooltip__trigger {
16429
+ box-sizing: border-box;
16430
+ padding: 0;
16431
+ border: 0;
16432
+ margin: 0;
16433
+ font-family: inherit;
16434
+ font-size: 100%;
16435
+ vertical-align: baseline;
16436
+ display: inline-block;
16437
+ padding: 0;
16438
+ border: 0;
16439
+ appearance: none;
16440
+ background: none;
16441
+ cursor: pointer;
16442
+ text-align: start;
16443
+ width: 100%;
16444
+ display: flex;
16445
+ align-items: center;
16446
+ justify-content: center;
16403
16447
  font-size: var(--cds-label-01-font-size, 0.75rem);
16404
16448
  font-weight: var(--cds-label-01-font-weight, 400);
16405
16449
  line-height: var(--cds-label-01-line-height, 1.33333);
16406
16450
  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
16407
16451
  }
16452
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *,
16453
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *::before,
16454
+ .cds--label + .cds--tooltip .cds--tooltip__trigger *::after {
16455
+ box-sizing: inherit;
16456
+ }
16457
+ .cds--label + .cds--tooltip .cds--tooltip__trigger::-moz-focus-inner {
16458
+ border: 0;
16459
+ }
16460
+
16461
+ .cds--label + .cds--tooltip .cds--tooltip__trigger:focus {
16462
+ outline: 1px solid var(--cds-focus, #0f62fe);
16463
+ }
16464
+
16465
+ .cds--label + .cds--tooltip .cds--tooltip__trigger svg {
16466
+ fill: var(--cds-icon-secondary, #525252);
16467
+ }
16468
+
16469
+ .cds--label + .cds--tooltip .cds--tooltip__trigger svg :hover {
16470
+ fill: var(--cds-icon-primary, #161616);
16471
+ }
16472
+
16473
+ .cds--label + .cds--toggletip {
16474
+ top: 0.2rem;
16475
+ left: 0.5rem;
16476
+ }
16408
16477
 
16409
16478
  .cds--label.cds--skeleton {
16410
16479
  position: relative;
@@ -16668,8 +16737,7 @@ fieldset[disabled] .cds--form__helper-text {
16668
16737
 
16669
16738
  .cds--checkbox:checked + .cds--checkbox-label::before,
16670
16739
  .cds--checkbox:indeterminate + .cds--checkbox-label::before,
16671
- .cds--checkbox-label[data-contained-checkbox-state=true]::before,
16672
- .cds--checkbox-label[data-contained-checkbox-state=mixed]::before {
16740
+ .cds--checkbox-label[data-contained-checkbox-state=true]::before {
16673
16741
  border: none;
16674
16742
  border-width: 1px;
16675
16743
  background-color: var(--cds-icon-primary, #161616);
@@ -16680,8 +16748,7 @@ fieldset[disabled] .cds--form__helper-text {
16680
16748
  transform: scale(1) rotate(-45deg) /*rtl:scale(1.2) rotate3d(.5, 1, 0, 158deg)*/;
16681
16749
  }
16682
16750
 
16683
- .cds--checkbox:indeterminate + .cds--checkbox-label::after,
16684
- .cds--checkbox-label[data-contained-checkbox-state=mixed]::after {
16751
+ .cds--checkbox:indeterminate + .cds--checkbox-label::after {
16685
16752
  top: 0.6875rem;
16686
16753
  width: 0.5rem;
16687
16754
  border-bottom: 2px solid var(--cds-icon-inverse, #ffffff);
@@ -16693,8 +16760,7 @@ fieldset[disabled] .cds--form__helper-text {
16693
16760
  .cds--checkbox-label__focus::before,
16694
16761
  .cds--checkbox:checked:focus + .cds--checkbox-label::before,
16695
16762
  .cds--checkbox-label[data-contained-checkbox-state=true].cds--checkbox-label__focus::before,
16696
- .cds--checkbox:indeterminate:focus + .cds--checkbox-label::before,
16697
- .cds--checkbox-label[data-contained-checkbox-state=mixed].cds--checkbox-label__focus::before {
16763
+ .cds--checkbox:indeterminate:focus + .cds--checkbox-label::before {
16698
16764
  outline: 2px solid var(--cds-focus, #0f62fe);
16699
16765
  outline-offset: 1px;
16700
16766
  }
@@ -16712,8 +16778,7 @@ fieldset[disabled] .cds--form__helper-text {
16712
16778
 
16713
16779
  .cds--checkbox:checked:disabled + .cds--checkbox-label::before,
16714
16780
  .cds--checkbox:indeterminate:disabled + .cds--checkbox-label::before,
16715
- .cds--checkbox-label[data-contained-checkbox-state=true][data-contained-checkbox-disabled=true]::before,
16716
- .cds--checkbox-label[data-contained-checkbox-state=mixed][data-contained-checkbox-disabled=true]::before {
16781
+ .cds--checkbox-label[data-contained-checkbox-state=true][data-contained-checkbox-disabled=true]::before {
16717
16782
  background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
16718
16783
  }
16719
16784
 
@@ -17856,6 +17921,7 @@ fieldset[disabled] .cds--form__helper-text {
17856
17921
  appearance: none;
17857
17922
  background: none;
17858
17923
  cursor: pointer;
17924
+ text-align: start;
17859
17925
  width: 100%;
17860
17926
  position: relative;
17861
17927
  display: inline-flex;
@@ -17947,6 +18013,7 @@ fieldset[disabled] .cds--form__helper-text {
17947
18013
  appearance: none;
17948
18014
  background: none;
17949
18015
  cursor: pointer;
18016
+ text-align: start;
17950
18017
  position: absolute;
17951
18018
  right: 1rem;
17952
18019
  display: flex;
@@ -17991,6 +18058,7 @@ fieldset[disabled] .cds--form__helper-text {
17991
18058
  appearance: none;
17992
18059
  background: none;
17993
18060
  cursor: pointer;
18061
+ text-align: start;
17994
18062
  position: absolute;
17995
18063
  top: 50%;
17996
18064
  /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */
@@ -18646,6 +18714,16 @@ fieldset[disabled] .cds--form__helper-text {
18646
18714
  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
18647
18715
  color: var(--cds-text-secondary, #525252);
18648
18716
  }
18717
+ @media (min-width: 42rem) {
18718
+ .cds--data-table-header__description {
18719
+ max-width: 50ch;
18720
+ }
18721
+ }
18722
+ @media (min-width: 66rem) {
18723
+ .cds--data-table-header__description {
18724
+ max-width: 80ch;
18725
+ }
18726
+ }
18649
18727
 
18650
18728
  .cds--data-table {
18651
18729
  width: 100%;
@@ -19445,6 +19523,7 @@ tr.cds--data-table--selected:last-of-type td {
19445
19523
  appearance: none;
19446
19524
  background: none;
19447
19525
  cursor: pointer;
19526
+ text-align: start;
19448
19527
  width: 100%;
19449
19528
  display: flex;
19450
19529
  width: 3rem;
@@ -19476,6 +19555,7 @@ tr.cds--data-table--selected:last-of-type td {
19476
19555
  appearance: none;
19477
19556
  background: none;
19478
19557
  cursor: pointer;
19558
+ text-align: start;
19479
19559
  width: 100%;
19480
19560
  display: flex;
19481
19561
  width: 3rem;
@@ -19973,6 +20053,7 @@ tr.cds--parent-row.cds--expandable-row.cds--expandable-row--hover td:first-of-ty
19973
20053
  appearance: none;
19974
20054
  background: none;
19975
20055
  cursor: pointer;
20056
+ text-align: start;
19976
20057
  display: inline-flex;
19977
20058
  width: 100%;
19978
20059
  height: calc(100% + 1px);
@@ -20277,6 +20358,7 @@ tr.cds--parent-row.cds--data-table--selected.cds--expandable-row--hover + tr[dat
20277
20358
  appearance: none;
20278
20359
  background: none;
20279
20360
  cursor: pointer;
20361
+ text-align: start;
20280
20362
  display: flex;
20281
20363
  width: 100%;
20282
20364
  min-height: 100%;
@@ -22900,7 +22982,7 @@ button.cds--dropdown-text:focus {
22900
22982
  padding-left: 0;
22901
22983
  }
22902
22984
 
22903
- .cds--multi-select--filterable.cds--list-box--disabled:hover .cds--text-input {
22985
+ .cds--multi-select--filterable.cds--list-box--disabled:hover:not(.cds--multi-select--filterable) .cds--text-input {
22904
22986
  background-color: var(--cds-field);
22905
22987
  }
22906
22988
 
@@ -24143,6 +24225,7 @@ button.cds--dropdown-text:focus {
24143
24225
  appearance: none;
24144
24226
  background: none;
24145
24227
  cursor: pointer;
24228
+ text-align: start;
24146
24229
  width: 100%;
24147
24230
  position: relative;
24148
24231
  display: inline-flex;
@@ -24484,6 +24567,7 @@ button.cds--dropdown-text:focus {
24484
24567
  appearance: none;
24485
24568
  background: none;
24486
24569
  cursor: pointer;
24570
+ text-align: start;
24487
24571
  width: 100%;
24488
24572
  outline: 2px solid transparent;
24489
24573
  outline-offset: -2px;
@@ -25611,6 +25695,7 @@ span.cds--pagination__text.cds--pagination__items-count {
25611
25695
  appearance: none;
25612
25696
  background: none;
25613
25697
  cursor: pointer;
25698
+ text-align: start;
25614
25699
  position: relative;
25615
25700
  display: block;
25616
25701
  min-width: 3rem;
@@ -26178,6 +26263,7 @@ span.cds--pagination__text.cds--pagination__items-count {
26178
26263
  appearance: none;
26179
26264
  background: none;
26180
26265
  cursor: pointer;
26266
+ text-align: start;
26181
26267
  width: 100%;
26182
26268
  border-bottom: 1px dotted var(--cds-border-strong);
26183
26269
  border-radius: 0;
@@ -26397,6 +26483,7 @@ span.cds--pagination__text.cds--pagination__items-count {
26397
26483
  appearance: none;
26398
26484
  background: none;
26399
26485
  cursor: pointer;
26486
+ text-align: start;
26400
26487
  width: 100%;
26401
26488
  display: flex;
26402
26489
  text-align: left;
@@ -26868,6 +26955,7 @@ span.cds--pagination__text.cds--pagination__items-count {
26868
26955
  appearance: none;
26869
26956
  background: none;
26870
26957
  cursor: pointer;
26958
+ text-align: start;
26871
26959
  outline: 2px solid transparent;
26872
26960
  outline-offset: -2px;
26873
26961
  position: absolute;
@@ -27805,6 +27893,7 @@ span.cds--pagination__text.cds--pagination__items-count {
27805
27893
  appearance: none;
27806
27894
  background: none;
27807
27895
  cursor: pointer;
27896
+ text-align: start;
27808
27897
  width: 100%;
27809
27898
  display: flex;
27810
27899
  width: 2.5rem;
@@ -27955,6 +28044,7 @@ span.cds--pagination__text.cds--pagination__items-count {
27955
28044
  appearance: none;
27956
28045
  background: none;
27957
28046
  cursor: pointer;
28047
+ text-align: start;
27958
28048
  outline: 2px solid transparent;
27959
28049
  outline-offset: -2px;
27960
28050
  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
@@ -28473,6 +28563,7 @@ span.cds--pagination__text.cds--pagination__items-count {
28473
28563
  appearance: none;
28474
28564
  background: none;
28475
28565
  cursor: pointer;
28566
+ text-align: start;
28476
28567
  width: 100%;
28477
28568
  position: absolute;
28478
28569
  right: 0;
@@ -28735,6 +28826,7 @@ span.cds--pagination__text.cds--pagination__items-count {
28735
28826
  appearance: none;
28736
28827
  background: none;
28737
28828
  cursor: pointer;
28829
+ text-align: start;
28738
28830
  width: 100%;
28739
28831
  display: flex;
28740
28832
  align-items: center;
@@ -29129,6 +29221,7 @@ span.cds--pagination__text.cds--pagination__items-count {
29129
29221
  appearance: none;
29130
29222
  background: none;
29131
29223
  cursor: pointer;
29224
+ text-align: start;
29132
29225
  width: 100%;
29133
29226
  display: inline-flex;
29134
29227
  width: 3rem;
@@ -29625,6 +29718,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
29625
29718
  appearance: none;
29626
29719
  background: none;
29627
29720
  cursor: pointer;
29721
+ text-align: start;
29628
29722
  width: 100%;
29629
29723
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
29630
29724
  font-weight: var(--cds-heading-compact-01-font-weight, 600);
@@ -30036,6 +30130,7 @@ a.cds--side-nav__link--current::before {
30036
30130
  appearance: none;
30037
30131
  background: none;
30038
30132
  cursor: pointer;
30133
+ text-align: start;
30039
30134
  width: 100%;
30040
30135
  display: inline-flex;
30041
30136
  width: 3rem;
@@ -30532,6 +30627,7 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
30532
30627
  appearance: none;
30533
30628
  background: none;
30534
30629
  cursor: pointer;
30630
+ text-align: start;
30535
30631
  width: 100%;
30536
30632
  font-size: var(--cds-heading-compact-01-font-size, 0.875rem);
30537
30633
  font-weight: var(--cds-heading-compact-01-font-weight, 600);