@carbon/ibm-products 2.0.0-rc.11 → 2.0.0-rc.12

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

@@ -0,0 +1,65 @@
+//
+// 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.
+//
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/type/scss/font-family';
+@use '@carbon/layout' as *;
+
+@use '../../../../global/styles/project-settings' as c4p-settings;
+@use '../variables';
+
+.#{variables.$block-class}__customize-columns-tearsheet {
+  .#{c4p-settings.$pkg-prefix}--tearsheet__content {
+    display: flex;
+    flex-flow: column;
+  }
+}
+
+.#{variables.$block-class}__customize-columns-tearsheet--actions
+  input[role='searchbox'] {
+  height: $spacing-09;
+  padding-left: $spacing-09;
+  border-bottom: 1px solid $background-active;
+}
+
+.#{variables.$block-class}__customize-columns-checkbox-wrapper {
+  display: flex;
+  justify-content: center;
+  padding-left: $spacing-03;
+  margin-bottom: 0;
+}
+
+.#{variables.$block-class}__customize-columns-column-list {
+  position: relative; // needed for the react-dnd, otherwise the drag preview will not work correctly
+  overflow: auto;
+}
+
+.#{variables.$block-class}__customize-columns-select-all,
+.#{variables.$block-class}__customize-columns-select-all--selected {
+  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;
+
+  .#{c4p-settings.$carbon-prefix}--checkbox-label-text {
+    @include font-family.font-weight('semibold');
+  }
+}
+
+.#{variables.$block-class}__customize-columns-select-all:hover {
+  background-color: $layer-hover;
+}
+
+.#{variables.$block-class}__customize-columns-select-all--selected {
+  background-color: $layer-selected;
+}

package/scss/components/Tearsheet/_tearsheet.scss

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

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

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