@carbon/ibm-products 2.0.0-rc.20 → 2.0.0-rc.21

package/README.md

@@ -41,6 +41,23 @@ Then you can import the component styles in your `index.js`.
 import '@carbon/ibm-products/css/index.min.css';
 ```
 
+### Webpack 4
+
+Our package requires support for ES modules (see
+[#2378](https://github.com/carbon-design-system/ibm-cloud-cognitive/issues/2378#issuecomment-1319276192)).
+In Webpack 5, these are supported by default. In Webpack 4, you will need to add
+the [following rule](https://stackoverflow.com/a/72149467) to your config.
+
+```js
+rules: [
+  {
+    test: /\.mjs$/,
+    include: /node_modules/,
+    type: 'javascript/auto',
+  },
+],
+```
+
 ### Peer dependencies
 
 `@carbon/ibm-products` is built on top of Carbon components and has a number of

package/css/index-full-carbon.css

@@ -9503,12 +9503,19 @@ button.c4p--add-select__global-filter-toggle--open {
 }
 
 .c4p--options-tile {
-  border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
-  background-color: var(--cds-layer-01, #f4f4f4);
+  position: relative;
+  border-bottom: 1px solid var(--cds-border-subtle);
+  background-color: var(--cds-layer);
 }
 
 .c4p--options-tile__toggle-container {
-  position: relative;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: calc(
+    1rem + 2rem + 1rem
+  );
 }
 
 .c4p--options-tile__toggle {
@@ -10658,7 +10665,9 @@ button.c4p--add-select__global-filter-toggle--open {
   padding-bottom: 1rem;
 }
 .c4p--datagrid__dense-header .c4p--datagrid__table-toolbar {
+  display: flex;
   flex: 1 0 auto;
+  align-items: flex-end;
 }
 .c4p--datagrid__dense-header .cds--table-toolbar {
   background: transparent;
@@ -10666,9 +10675,6 @@ button.c4p--add-select__global-filter-toggle--open {
 .c4p--datagrid__dense-header .cds__table-container {
   flex: 1 1 100%;
 }
-.c4p--datagrid__dense-header .cds--table-toolbar {
-  padding-top: 2rem;
-}
 .c4p--datagrid__dense-header .c4p--datagrid__toolbar-divider {
   position: relative;
 }