@carbon/ibm-products 1.40.0 → 1.41.1

package/scss/components/Datagrid/_storybook-styles.scss

@@ -101,3 +101,10 @@ $block-class: #{$pkg-prefix}--datagrid;
 .#{$block-class}__mobile-toolbar-modal .#{$carbon-prefix}--dropdown__wrapper {
   margin-bottom: $spacing-07;
 }
+
+.storybook-#{$block-class}__validation-code-snippet {
+  margin-right: $spacing-03;
+  // prevent code-snippet from inheriting font-size
+  // stylelint-disable-next-line carbon/type-token-use
+  font-size: 0;
+}

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -536,6 +536,28 @@
   height: $spacing-09;
 }
 
+.#{$block-class}__customize-columns-checkbox-wrapper.#{$carbon-prefix}--form-item {
+  flex: 0 0 auto;
+  margin-right: $spacing-03;
+}
+
+.#{$block-class}__virtual-scrollbar::-webkit-scrollbar {
+  width: 10px;
+  height: 7px;
+}
+
+.#{$block-class}__virtual-scrollbar::-webkit-scrollbar-track {
+  background: $layer;
+}
+
+.#{$block-class}__virtual-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+}
+
+.#{$block-class}__virtualScrollContainer {
+  width: 100%;
+}
+
 .#{$carbon-prefix}--body--with-modal-open .#{$block-class}__grid-container {
   overflow: hidden;
   height: 100vh;

package/scss/components/Datagrid/styles/_draggableElement.scss

@@ -1,10 +1,10 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
 @import './variables';
 
 .#{$block-class}__draggable-handleStyle {
@@ -18,7 +18,7 @@
   pointer-events: none;
 }
 
-svg.#{$block-class}__draggable-handleStyle.disable {
+.#{$block-class}__draggable-handleStyle.disabled svg {
   fill: $disabled-02;
 }
 
@@ -54,6 +54,7 @@ svg.#{$block-class}__draggable-handleStyle.disable {
 .#{$block-class}__draggable-handleHolder-droppable {
   display: flex;
   width: 100%;
+  align-items: center;
 }
 
 .#{$block-class}__draggable-handleHolder-grabbed {

package/scss/components/Datagrid/styles/_index.scss

@@ -1,10 +1,10 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2020, 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
 @import './datagrid';
 @import './useNestedRows';
 @import './useNestedTable';
@@ -13,7 +13,7 @@
 @import './useColumnCenterAlign';
 @import './useStickyColumn';
 @import './useActionsColumn';
-@import './addons/CustomizeColumnsModal';
+@import './addons/CustomizeColumnsTearsheet';
 @import './addons/RowSizeDropdown';
 @import './addons/FilterFlyout';
 @import './useSelectAllToggle';

package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss

@@ -0,0 +1,60 @@
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@import '../variables';
+
+.#{$block-class}__customize-columns-tearsheet {
+  .#{$pkg-prefix}--tearsheet__content {
+    display: flex;
+    flex-flow: column;
+  }
+}
+
+.#{$block-class}__customize-columns-tearsheet--actions {
+  .#{$carbon-prefix}--search-input {
+    border-bottom: 1px solid $ui-03;
+  }
+}
+
+.#{$block-class}__customize-columns-checkbox-wrapper {
+  display: flex;
+  justify-content: center;
+  padding-left: $spacing-03;
+  margin-bottom: 0;
+}
+
+.#{$block-class}__customize-columns-column-list {
+  position: relative; // needed for the react-dnd, otherwise the drag preview will not work correctly
+  overflow: auto;
+}
+
+.#{$block-class}__customize-columns-select-all {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  display: flex;
+  height: $spacing-09;
+  padding-left: $spacing-08;
+  border-bottom: 1px solid $layer-active;
+  background-color: $layer;
+
+  .#{$carbon-prefix}--checkbox-label-text {
+    @include carbon--font-weight($weight: semibold);
+  }
+}
+
+.#{$block-class}__customize-columns-select-all:hover {
+  background-color: $layer-hover;
+}
+
+.#{$block-class}__customize-columns-select-all--selected {
+  background-color: $layer-selected;
+}
+
+.#{$block-class}__customize-columns-select-all--selected:hover {
+  background-color: $hover-selected-ui;
+}

package/scss/components/FilterSummary/_filter-summary.scss

@@ -13,5 +13,6 @@ $block-class: #{$pkg-prefix}--filter-summary;
   width: 100%;
   align-items: center;
   padding: $spacing-03;
+  border-top: 1px solid $ui-03;
   background: $ui-01;
 }

package/scss/components/Tearsheet/_tearsheet.scss

@@ -202,6 +202,8 @@
       @include carbon--breakpoint-up('md') {
         max-width: 60%;
       }
+
+      word-break: break-all;
     }
 
     &.#{$block-class}--wide .#{$block-class}__header-description {

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js

@@ -1,56 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onSaveColumnPrefs", "isModalOpen", "setIsModalOpen", "labels"];
-// @flow
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
- */
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import CustomizeColumnsModal from './CustomizeColumnsModal';
-var ModalWrapper = function ModalWrapper(_ref) {
-  var instance = _ref.instance;
-  var _instance$customizeCo = instance.customizeColumnsProps,
-    _onSaveColumnPrefs = _instance$customizeCo.onSaveColumnPrefs,
-    isModalOpen = _instance$customizeCo.isModalOpen,
-    setIsModalOpen = _instance$customizeCo.setIsModalOpen,
-    labels = _instance$customizeCo.labels,
-    rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
-  if (isModalOpen) {
-    return /*#__PURE__*/React.createElement(CustomizeColumnsModal, _extends({}, rest, labels, {
-      isOpen: isModalOpen,
-      setIsModalOpen: setIsModalOpen,
-      columnDefinitions: instance.allColumns,
-      originalColumnDefinitions: instance.columns,
-      onSaveColumnPrefs: function onSaveColumnPrefs(updatedColDefs) {
-        var hiddenIds = updatedColDefs.filter(function (colDef) {
-          return !colDef.isVisible;
-        }).map(function (colDef) {
-          return colDef.id;
-        });
-        instance.setHiddenColumns(hiddenIds);
-        if (typeof instance.setColumnOrder === 'function') {
-          instance.setColumnOrder(updatedColDefs.map(function (colDef) {
-            return colDef.id;
-          }));
-        } else {
-          // eslint-disable-next-line no-console
-          console.warn("Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'");
-        }
-        if (typeof _onSaveColumnPrefs === 'function') {
-          _onSaveColumnPrefs(updatedColDefs);
-        }
-      }
-    }));
-  }
-  return null;
-};
-ModalWrapper.propTypes = {
-  instance: PropTypes.object.isRequired
-};
-export default ModalWrapper;

package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss

@@ -1,86 +0,0 @@
-/*
-* Licensed Materials - Property of IBM
-* 5724-Q36
-* (c) Copyright IBM Corp. 2021
-* US Government Users Restricted Rights - Use, duplication or disclosure
-* restricted by GSA ADP Schedule Contract with IBM Corp.
-*/
-
-@import '../variables';
-
-.#{$block-class}__customize-columns-modal {
-  .#{$carbon-prefix}--modal-content {
-    position: inherit;
-    display: flex;
-    flex-flow: column;
-    padding: 0;
-    margin: 0;
-  }
-}
-
-.#{$block-class}__customize-columns-checkbox-wrapper {
-  margin-bottom: 0;
-}
-.#{$block-class}__customize-columns-checkbox-wrapper {
-  display: flex;
-  justify-content: center;
-}
-
-.#{$block-class}__customize-columns-modal--actions {
-  display: flex;
-  height: $spacing-09;
-  flex-flow: row;
-  background-color: $field-02;
-}
-
-.#{$block-class}__customize-columns-modal--actions input[role='searchbox'] {
-  height: $spacing-09;
-  padding-left: $spacing-08;
-  border-bottom: none;
-}
-
-.#{$block-class}__customize-columns-modal--actions > button {
-  margin-left: $spacing-05;
-}
-
-.#{$block-class}__customize-columns-instructions {
-  padding-left: $spacing-05;
-  margin-bottom: $spacing-06;
-
-  @include carbon--type-style('body-long-01');
-
-  color: $text-01;
-}
-
-.#{$block-class}__customize-columns-column-list {
-  position: relative; // needed for the react-dnd, otherwise the drag preview will not work correctly
-  overflow: auto;
-}
-
-.#{$block-class}__customize-columns-select-all {
-  display: flex;
-  height: $spacing-09;
-  padding-left: $spacing-08;
-  border-bottom: 1px solid $layer-active;
-  background-color: $layer;
-}
-.#{$block-class}__customize-columns-select-all:hover {
-  background-color: $layer-hover;
-}
-.#{$block-class}__customize-columns-select-all-selected {
-  display: flex;
-  height: $spacing-09;
-  padding-left: $spacing-08;
-  border-bottom: 1px solid $layer-active;
-  background-color: $layer-selected;
-}
-
-.#{$block-class}__customize-columns-select-all-selected:hover {
-  background-color: $hover-selected-ui;
-}
-
-.#{$block-class}
-  .#{$block-class}__customize-columns-modal
-  .#{$carbon-prefix}--modal-content {
-  margin-bottom: 0;
-}