@carbon/ibm-products 2.0.0-rc.17 → 2.0.0-rc.19

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

@@ -15,6 +15,7 @@
 @use './addons/CustomizeColumnsTearsheet';
 @use './addons/RowSizeDropdown';
 @use './addons/FilterFlyout';
+@use './addons/FilterPanel';
 @use './useSelectAllToggle';
 @use './useExpandedRow';
 @use './draggableElement';

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

@@ -0,0 +1,129 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2022
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+
+@use '../variables' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../../../global/styles/project-settings' as c4p-settings;
+
+.#{$block-class}-filter-panel__container {
+  position: relative;
+  width: rem(320px);
+  height: clamp(var(--filter-panel-min-height), 100%, 100vh);
+  border-top: 1px $layer-accent-01 solid;
+  background-color: $layer-01;
+}
+
+.#{$block-class}-filter-panel--open {
+  border-right: 1px $layer-accent-01 solid;
+}
+
+.#{$block-class}-filter-panel__container::before {
+  position: absolute;
+  top: -1px; // stylelint-disable-line
+  left: 0;
+  display: block;
+  width: rem(47px); // size of filter panel button
+  height: 1px;
+  background-color: $layer-01;
+  content: '';
+}
+
+.#{$block-class}-filter-panel__inner-container {
+  position: relative;
+  z-index: 0;
+  overflow: auto;
+  padding: 0 $spacing-05;
+  overscroll-behavior: contain;
+}
+
+// Adds extra space to the last category so the scroll shows everything visible when you reach the bottom
+.#{$block-class}-filter-panel__inner-container
+  .#{$block-class}-filter-panel__category:last-of-type {
+  padding-bottom: $spacing-11;
+}
+
+.#{$block-class}-filter-panel {
+  position: sticky;
+  top: 0;
+}
+
+.#{$block-class}-filter-panel__heading {
+  display: flex;
+  justify-content: space-between;
+  padding-left: $spacing-05;
+  border-bottom: 1px solid transparent;
+}
+
+.#{$block-class}-filter-panel__heading--with-divider {
+  border-bottom: 1px solid $layer-accent-01;
+}
+
+.#{$block-class}-filter-panel__title {
+  padding: $spacing-05 0;
+  @include type-style('heading-compact-02');
+}
+
+.#{$block-class}-filter-panel__search {
+  padding: 0 $spacing-05 $spacing-06;
+}
+
+.#{$block-class}-filter-panel__category-title {
+  @include type-style('heading-compact-01');
+
+  margin-bottom: $spacing-05;
+  color: $text-secondary;
+}
+
+.#{$block-class}-filter-panel__category {
+  padding-bottom: $spacing-06;
+}
+
+// This selects all filter elements inside of categories and give them 16px margin bottom
+.#{$block-class}-filter-panel__category
+  > *:not(.c4p--datagrid-filter-panel__category-title, .bx--accordion) {
+  margin-bottom: $spacing-05;
+}
+
+.#{$block-class}-filter-panel__action-set {
+  position: sticky;
+  z-index: 1; // To layer action set on top of content behind when sticky
+  bottom: 0;
+  height: rem(64px);
+  margin-top: auto;
+}
+
+// Overrides
+.#{$block-class}-filter-panel__container
+  .#{c4p-settings.$carbon-prefix}--accordion__title {
+  margin: 0;
+}
+
+.#{$block-class}-filter-panel__container
+  .#{c4p-settings.$carbon-prefix}--accordion__arrow {
+  margin: $spacing-01 0 0;
+}
+
+.#{$block-class}-filter-panel__container
+  .#{c4p-settings.$carbon-prefix}--accordion__content {
+  padding-right: 0;
+  padding-left: 0;
+}
+
+// Makes sure every child (filter) inside the accordion content has space in between
+.#{$block-class}-filter-panel__container
+  .#{c4p-settings.$carbon-prefix}--accordion__content
+  > *:not(:last-child) {
+  margin-bottom: $spacing-05;
+}
+
+.#{c4p-settings.$carbon-prefix}--btn.c4p--datagrid-filter-panel-open-button {
+  border-right: 1px solid $layer-accent-01;
+  border-bottom: none;
+}

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

@@ -13,13 +13,13 @@
 
 .#{variables.$block-class}__row-size-dropdown {
   padding: $spacing-05;
-  background-color: $background;
+  background-color: $layer-02;
 
   box-shadow: 1px 4px 8px -3px $overlay, -1px 6px 8px -5px $overlay;
 }
 
-.#{variables.$block-class}__row-size-button--open {
-  background-color: $background;
+.#{c4p-settings.$carbon-prefix}--btn--ghost.#{variables.$block-class}__row-size-button--open {
+  background-color: $layer-02;
 
   box-shadow: 1px 4px 8px -3px $overlay, -1px 6px 8px -5px $overlay;
 }

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

@@ -13,6 +13,7 @@ $block-class: #{$pkg-prefix}--filter-summary;
 .#{$block-class} {
   display: flex;
   width: 100%;
+  height: rem(48px);
   align-items: center;
   padding: $spacing-03;
   border-top: 1px solid $border-subtle-01;

package/scss/components/MultiAddSelect/_multi-add-select.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../AddSelect/add-select';
+@use '../AddSelect/add-select' as *;

package/scss/components/SingleAddSelect/_single-add-select.scss

@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '../AddSelect/add-select';
+@use '../AddSelect/add-select' as *;

package/scss/components/_index-released-only-with-carbon.scss

@@ -23,12 +23,14 @@
 @use './HTTPErrors/index-with-carbon' as *;
 @use './InlineEditV1/index-with-carbon' as *;
 @use './ImportModal/index-with-carbon' as *;
+@use './MultiAddSelect/index-with-carbon' as *;
 @use './NotificationsPanel/index-with-carbon' as *;
 @use './PageHeader/index-with-carbon' as *;
 @use './ProductiveCard/index-with-carbon' as *;
 @use './RemoveModal/index-with-carbon' as *;
 @use './Saving/index-with-carbon' as *;
 @use './SidePanel/index-with-carbon' as *;
+@use './SingleAddSelect/index-with-carbon' as *;
 @use './StatusIcon/index-with-carbon' as *;
 @use './TagSet/index-with-carbon' as *;
 @use './Tearsheet/index-with-carbon' as *;

package/scss/components/_index-released-only.scss

@@ -23,12 +23,14 @@
 @use './HTTPErrors';
 @use './InlineEditV1';
 @use './ImportModal';
+@use './MultiAddSelect';
 @use './NotificationsPanel';
 @use './PageHeader';
 @use './ProductiveCard';
 @use './RemoveModal';
 @use './Saving';
 @use './SidePanel';
+@use './SingleAddSelect';
 @use './StatusIcon';
 @use './TagSet';
 @use './Tearsheet';

package/es/components/Datagrid/Datagrid.stories/LeftPanelStory.js

@@ -1,6 +0,0 @@
-var notes = "\n# Access left side panel in data grid\nAllow users to access left panel in datagrid.\n\n## Documentation:\n\n- (required) Implement `options.leftPanel` which has the following props\n  - `options.leftPanel.isOpen` value is toggled by the Button onClick from DatagridActions\n  - render `options.leftPanel.panelContent` inside the panel container of data grid when isOpen is true\n\ncode snippet:\n\n```js\nconst columns = React.useMemo(() => defaultHeader, []);\n  const [data] = useState(makeData(10));\n  const [isPanelOpen, setIsPanelOpen] = useState(false);\n  const DatagridActions = (datagridState) => (\n    <TableToolbarContent>\n      <Button onClick={() => { setIsPanelOpen(!isPanelOpen); }}>Click to toggle left panel</Button>\n      <TableToolbarSearch ... />\n      <Button ... />\n      <datagridState.CustomizeColumnsButton />\n    </TableToolbarContent>\n  )\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      leftPanel: {\n        isOpen: isPanelOpen,\n        panelContent: <div>Panel content will go here along with any button interactions</div>,\n      },\n      initialState: {\n        hiddenColumns: ['age'],\n        columnOrder: [],\n      },\n      customizeColumnsProps: {\n        onSaveColumnPrefs: (newColDefs) => {\n          console.log(newColDefs);\n        },\n      },\n      DatagridActions,\n    },\n  );\n\nreturn (\n  <Wrapper>\n    <IntlProvider locale=\"en\">\n      <Datagrid {...datagridState} />\n    </IntlProvider>\n  </Wrapper>\n);\n```\n";
-export var story = {
-  parameters: {
-    notes: notes
-  }
-};

package/lib/components/Datagrid/Datagrid.stories/LeftPanelStory.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.story = void 0;
-var notes = "\n# Access left side panel in data grid\nAllow users to access left panel in datagrid.\n\n## Documentation:\n\n- (required) Implement `options.leftPanel` which has the following props\n  - `options.leftPanel.isOpen` value is toggled by the Button onClick from DatagridActions\n  - render `options.leftPanel.panelContent` inside the panel container of data grid when isOpen is true\n\ncode snippet:\n\n```js\nconst columns = React.useMemo(() => defaultHeader, []);\n  const [data] = useState(makeData(10));\n  const [isPanelOpen, setIsPanelOpen] = useState(false);\n  const DatagridActions = (datagridState) => (\n    <TableToolbarContent>\n      <Button onClick={() => { setIsPanelOpen(!isPanelOpen); }}>Click to toggle left panel</Button>\n      <TableToolbarSearch ... />\n      <Button ... />\n      <datagridState.CustomizeColumnsButton />\n    </TableToolbarContent>\n  )\n  const datagridState = useDatagrid(\n    {\n      columns,\n      data,\n      leftPanel: {\n        isOpen: isPanelOpen,\n        panelContent: <div>Panel content will go here along with any button interactions</div>,\n      },\n      initialState: {\n        hiddenColumns: ['age'],\n        columnOrder: [],\n      },\n      customizeColumnsProps: {\n        onSaveColumnPrefs: (newColDefs) => {\n          console.log(newColDefs);\n        },\n      },\n      DatagridActions,\n    },\n  );\n\nreturn (\n  <Wrapper>\n    <IntlProvider locale=\"en\">\n      <Datagrid {...datagridState} />\n    </IntlProvider>\n  </Wrapper>\n);\n```\n";
-var story = {
-  parameters: {
-    notes: notes
-  }
-};
-exports.story = story;