@carbon/ibm-products 2.7.0 → 2.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) hide show
  1. package/css/index-full-carbon.css +80 -2
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +2 -2
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +3 -2
  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 +80 -2
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +2 -2
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +80 -2
  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/AddSelect/AddSelectRow.js +2 -1
  18. package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +6 -7
  19. package/es/components/ButtonMenu/ButtonMenu.js +4 -0
  20. package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +21 -28
  21. package/es/components/ComboButton/ComboButton.js +5 -0
  22. package/es/components/DataSpreadsheet/DataSpreadsheet.js +1 -1
  23. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +117 -10
  24. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +8 -14
  25. package/es/components/Datagrid/Datagrid/addons/stateReducer.js +111 -0
  26. package/es/components/Datagrid/Datagrid.docs-page.js +6 -0
  27. package/es/components/Datagrid/useDatagrid.js +5 -2
  28. package/es/components/Datagrid/utils/DatagridActions.js +9 -10
  29. package/es/components/NotificationsPanel/NotificationsPanel.js +3 -5
  30. package/es/components/PageHeader/PageHeaderUtils.js +10 -3
  31. package/es/components/TooltipTrigger/TooltipTrigger.js +62 -0
  32. package/es/components/TooltipTrigger/index.js +8 -0
  33. package/es/components/TooltipTrigger/useExample.js +49 -0
  34. package/es/components/UserProfileImage/UserProfileImage.js +7 -6
  35. package/es/global/js/hooks/useResizeObserver.js +7 -5
  36. package/es/global/js/utils/test-helper.js +97 -43
  37. package/es/settings.js +8 -2
  38. package/lib/components/AddSelect/AddSelectRow.js +2 -1
  39. package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -6
  40. package/lib/components/ButtonMenu/ButtonMenu.js +5 -1
  41. package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +20 -27
  42. package/lib/components/ComboButton/ComboButton.js +5 -0
  43. package/lib/components/DataSpreadsheet/DataSpreadsheet.js +1 -1
  44. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +120 -10
  45. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +7 -13
  46. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +122 -0
  47. package/lib/components/Datagrid/Datagrid.docs-page.js +6 -0
  48. package/lib/components/Datagrid/useDatagrid.js +5 -2
  49. package/lib/components/Datagrid/utils/DatagridActions.js +8 -9
  50. package/lib/components/NotificationsPanel/NotificationsPanel.js +3 -5
  51. package/lib/components/PageHeader/PageHeaderUtils.js +10 -3
  52. package/lib/components/TooltipTrigger/TooltipTrigger.js +67 -0
  53. package/lib/components/TooltipTrigger/index.js +12 -0
  54. package/lib/components/TooltipTrigger/useExample.js +58 -0
  55. package/lib/components/UserProfileImage/UserProfileImage.js +6 -5
  56. package/lib/global/js/hooks/useResizeObserver.js +7 -5
  57. package/lib/global/js/utils/test-helper.js +99 -44
  58. package/lib/settings.js +8 -2
  59. package/package.json +8 -8
  60. package/scss/components/APIKeyModal/_storybook-styles.scss +1 -1
  61. package/scss/components/AboutModal/_storybook-styles.scss +1 -1
  62. package/scss/components/ActionSet/_storybook-styles.scss +1 -1
  63. package/scss/components/CreateFullPage/_storybook-styles.scss +1 -1
  64. package/scss/components/CreateModal/_storybook-styles.scss +1 -1
  65. package/scss/components/CreateSidePanel/_storybook-styles.scss +1 -1
  66. package/scss/components/CreateTearsheet/_storybook-styles.scss +1 -1
  67. package/scss/components/CreateTearsheetNarrow/_storybook-styles.scss +1 -1
  68. package/scss/components/Datagrid/_storybook-styles.scss +1 -1
  69. package/scss/components/Datagrid/styles/_datagrid.scss +65 -0
  70. package/scss/components/EditSidePanel/_storybook-styles.scss +1 -1
  71. package/scss/components/EditTearsheet/_storybook-styles.scss +1 -1
  72. package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +1 -1
  73. package/scss/components/EditUpdateCards/_storybook-styles.scss +1 -1
  74. package/scss/components/ExpressiveCard/_storybook-styles.scss +1 -1
  75. package/scss/components/NotificationsPanel/_storybook-styles.scss +1 -1
  76. package/scss/components/OptionsTile/_storybook-styles.scss +1 -1
  77. package/scss/components/PageHeader/_page-header.scss +8 -4
  78. package/scss/components/Tearsheet/_storybook-styles.scss +1 -1
  79. package/scss/components/TooltipTrigger/_index-with-carbon.scss +8 -0
  80. package/scss/components/TooltipTrigger/_index.scss +8 -0
  81. package/scss/components/TooltipTrigger/_storybook-styles.scss +6 -0
  82. package/scss/components/TooltipTrigger/_tooltip-trigger.scss +29 -0
  83. package/scss/components/WebTerminal/_storybook-styles.scss +1 -1
  84. package/scss/components/_index-with-carbon.scss +1 -0
  85. package/scss/components/_index.scss +1 -0
@@ -8532,7 +8532,8 @@ button.c4p--add-select__global-filter-toggle--open {
8532
8532
  white-space: nowrap;
8533
8533
  }
8534
8534
  .c4p--page-header .c4p--page-header__title-row {
8535
- margin-top: 0.125rem; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
8535
+ --title-row-margin-top: 0.125rem; /* spacing needed in case of editable title, otherwise top of focus indicator hidden */
8536
+ margin-top: var(--title-row-margin-top);
8536
8537
  margin-bottom: 0;
8537
8538
  transform: translateY(0.125rem);
8538
8539
  }
@@ -8570,7 +8571,7 @@ button.c4p--add-select__global-filter-toggle--open {
8570
8571
  position: sticky;
8571
8572
  }
8572
8573
  .c4p--page-header .c4p--page-header__breadcrumb-row--has-breadcrumbs + .c4p--page-header__title-row--sticky {
8573
- top: var(--c4p--page-header--breadcrumb-top);
8574
+ top: calc(var(--c4p--page-header--breadcrumb-top) - var(--title-row-margin-top));
8574
8575
  }
8575
8576
  .c4p--page-header .c4p--page-header__title-column {
8576
8577
  min-height: 40px;
@@ -9532,6 +9533,22 @@ button.c4p--add-select__global-filter-toggle--open {
9532
9533
  content: "";
9533
9534
  }
9534
9535
 
9536
+ .c4p--tooltip-trigger {
9537
+ display: flex;
9538
+ width: 100%;
9539
+ height: 100%;
9540
+ box-sizing: border-box;
9541
+ align-items: center;
9542
+ justify-content: center;
9543
+ padding: 0;
9544
+ border: 0;
9545
+ margin: 0;
9546
+ appearance: none;
9547
+ background: none;
9548
+ cursor: pointer;
9549
+ outline: none;
9550
+ }
9551
+
9535
9552
  @keyframes web-terminal-entrance {
9536
9553
  from {
9537
9554
  opacity: 0;
@@ -11749,6 +11766,67 @@ button.c4p--add-select__global-filter-toggle--open {
11749
11766
  margin-top: 0;
11750
11767
  }
11751
11768
 
11769
+ .c4p--datagrid .c4p--datagrid__col-resizer-range {
11770
+ position: absolute;
11771
+ z-index: 2;
11772
+ top: 0;
11773
+ right: calc(0.5rem * -1);
11774
+ width: 1rem;
11775
+ height: 100%;
11776
+ margin: 0;
11777
+ -webkit-appearance: none;
11778
+ appearance: none;
11779
+ background: transparent;
11780
+ }
11781
+
11782
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus {
11783
+ outline: 0;
11784
+ }
11785
+
11786
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus::before {
11787
+ position: absolute;
11788
+ top: 50%;
11789
+ left: 50%;
11790
+ width: 2px;
11791
+ height: 100%;
11792
+ background-color: var(--cds-focus, #0f62fe);
11793
+ content: "";
11794
+ transform: translate(-50%, -50%);
11795
+ }
11796
+
11797
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus + .c4p--datagrid__col-resize-indicator {
11798
+ position: absolute;
11799
+ z-index: 2;
11800
+ right: calc(0.5rem * -1);
11801
+ width: 0.5rem;
11802
+ height: 0.5rem;
11803
+ border-radius: 100%;
11804
+ margin: 0;
11805
+ background-color: var(--cds-focus, #0f62fe);
11806
+ transform: translate(-50%, 0);
11807
+ }
11808
+
11809
+ .c4p--datagrid .c4p--datagrid__col-resizer-range:focus::after {
11810
+ position: absolute;
11811
+ /* stylelint-disable-next-line carbon/layout-token-use */
11812
+ top: var(--c4p--datagrid--row-height);
11813
+ right: 0.5rem;
11814
+ width: 1px;
11815
+ height: calc(var(--c4p--datagrid--grid-height) - var(--c4p--datagrid--row-height));
11816
+ background-color: var(--cds-layer-active-01, #c6c6c6);
11817
+ content: "";
11818
+ }
11819
+
11820
+ .c4p--datagrid .c4p--datagrid__col-resizer-range::-webkit-slider-thumb {
11821
+ width: 16px;
11822
+ height: 16px;
11823
+ border: none;
11824
+ border-radius: 50%;
11825
+ -webkit-appearance: none;
11826
+ appearance: none;
11827
+ background: transparent;
11828
+ }
11829
+
11752
11830
  /*
11753
11831
  * Licensed Materials - Property of IBM
11754
11832
  * 5724-Q36