@carbon/ibm-products 1.32.1 → 1.33.0

package/lib/components/Datagrid/utils/getInlineEditColumns.js

@@ -41,25 +41,43 @@ var getInlineEditColumns = function getInlineEditColumns() {
     accessor: 'firstName',
     inlineEdit: {
       type: 'text',
-      inputProps: {} // These props are passed to the Carbon component used for inline editing
-
+      // required for including validation, this is used to set the invalid prop internally
+      validator: function validator(n) {
+        return n.length >= 40;
+      },
+      // These props are passed to the Carbon component used for inline editing
+      inputProps: {
+        invalidText: 'Invalid text, character count must be less than 40'
+      }
     }
   }, {
     Header: 'Last Name',
     accessor: 'lastName',
     inlineEdit: {
       type: 'text',
-      inputProps: {} // These props are passed to the Carbon component used for inline editing
-
+      // required for including validation, this is used to set the invalid prop internally
+      validator: function validator(n) {
+        return n.length >= 40;
+      },
+      // These props are passed to the Carbon component used for inline editing
+      inputProps: {
+        invalidText: 'Invalid text, character count must be less than 40'
+      }
     }
   }, {
     Header: 'Age',
     accessor: 'age',
     width: 120,
     inlineEdit: {
+      // required for including validation, this is used to set the invalid prop internally
+      validator: function validator(n) {
+        return n && n < 18;
+      },
       type: 'number',
-      inputProps: {} // These props are passed to the Carbon component used for inline editing
-
+      // These props are passed to the Carbon component used for inline editing
+      inputProps: {
+        invalidText: 'Invalid number, must be 18 or greater'
+      }
     }
   }, {
     Header: 'Visits',
@@ -96,7 +114,7 @@ var getInlineEditColumns = function getInlineEditColumns() {
         // These props are passed to the Carbon component used for inline editing
         items: inlineEditSelectItems,
         onChange: function onChange(item) {
-          return console.log(item);
+          console.log(item);
         }
       }
     }

package/lib/components/Datagrid/utils/makeData.js

@@ -76,6 +76,14 @@ var renderStatusIcon = function renderStatusIcon(statusChance) {
   return /*#__PURE__*/_react.default.createElement(_StatusIcon.StatusIcon, iconProps);
 };
 
+var renderDocLink = function renderDocLink(statusChance) {
+  var docLinkObj = {
+    href: statusChance > 0.66 ? 'http://carbondesignsystem.com/' : statusChance > 0.33 ? 'https://pages.github.ibm.com/cdai-design/pal/' : 'http://carbon-for-ibm-products.netlify.app/',
+    text: statusChance > 0.66 ? 'Carbon Design System' : statusChance > 0.33 ? 'Carbon for IBM Products PAL' : 'Carbon for IBM Products storybook'
+  };
+  return docLinkObj;
+};
+
 var newPerson = function newPerson() {
   var statusChance = Math.random();
   var initialChartTypeIndex = getRandomInteger(0, 2);
@@ -180,7 +188,8 @@ var newPerson = function newPerson() {
     chartType: initialChartTypeIndex === 0 ? _getInlineEditColumns.inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? _getInlineEditColumns.inlineEditSelectItems[1] : _getInlineEditColumns.inlineEditSelectItems[2],
     activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
     bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
-    status_icon: renderStatusIcon(statusChance)
+    status_icon: renderStatusIcon(statusChance),
+    doc_link: renderDocLink(statusChance)
   };
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "1.32.1",
+  "version": "1.33.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -93,5 +93,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "829c3e97ae9b2412f7fcb1859dc8dd8b019963ee"
+  "gitHead": "1ac4bda25833dab9426808f9d397d0ea4c5534e4"
 }

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

@@ -86,3 +86,10 @@ $block-class: #{$pkg-prefix}--datagrid;
   .#{$pkg-prefix}--side-panel__inner-content {
   height: 100%;
 }
+
+.#{$block-class}-story__custom-cell-wrapper.#{$carbon-prefix}--link {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -523,8 +523,3 @@
 .#{$block-class} .#{$pkg-prefix}--button-menu {
   height: $spacing-09;
 }
-
-.#{$block-class} .#{$block-class}__table-grid-active {
-  border: 2px solid $inverse-link;
-  outline: 0;
-}

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -38,7 +38,7 @@ $row-heights: (
   .#{$block-class}
     .#{$block-class}__inline-edit--outer-cell-button--#{$size}
     .#{$carbon-prefix}--number__control-btn::after {
-    height: calc($size-value - 0.25rem);
+    height: calc(#{$size-value} - 0.25rem);
   }
   .#{$block-class}
     .#{$block-class}__inline-edit--select.#{$block-class}__inline-edit--select-#{$size}.#{$carbon-prefix}--list-box {
@@ -56,6 +56,10 @@ $row-heights: (
   }
 }
 
+.#{$block-class} {
+  --#{$block-class}--grid-header-height: 0;
+}
+
 .#{$block-class}__inline-edit-cell {
   display: flex;
   height: 100%;
@@ -75,6 +79,7 @@ $row-heights: (
 .#{$block-class}__inline-edit--outer-cell-button
   .#{$block-class}__inline-edit-button {
   position: relative;
+  z-index: 2;
   display: flex;
   width: 100%;
   height: 100%;
@@ -90,6 +95,7 @@ $row-heights: (
   }
   &.#{$block-class}__inline-edit-button--non-edit {
     padding-left: 0;
+    cursor: default;
   }
   .#{$block-class}__inline-edit-button-icon {
     height: $spacing-05;
@@ -211,7 +217,176 @@ $row-heights: (
   white-space: nowrap;
 }
 
-.#{$carbon-prefix}--data-table .#{$block-class}__carbon-row-hover-active td {
+.#{$block-class}
+  .#{$carbon-prefix}--data-table
+  .#{$block-class}__carbon-row-hover-active
+  td {
   border-top-color: $hover-ui;
   background-color: $hover-ui;
 }
+
+// Custom border/outline for the focus region, because of the scrolling
+// containers, using default border or outline did not
+.#{$block-class} .#{$block-class}__grid-container-grid-active::before {
+  position: absolute;
+  z-index: 2;
+  bottom: 0;
+  left: 0;
+  width: 2px;
+  height: calc(100% - 50px - var(--#{$block-class}--grid-header-height));
+  background-color: $inverse-link;
+  content: '';
+}
+
+.#{$block-class} .#{$block-class}__grid-container-grid-active::after {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  bottom: 0;
+  width: 2px;
+  height: calc(100% - 50px - var(--#{$block-class}--grid-header-height));
+  background-color: $inverse-link;
+  content: '';
+}
+
+.#{$block-class}
+  .#{$block-class}__grid-container-grid-active
+  .#{$carbon-prefix}--data-table-content::before {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: var(--#{$block-class}--grid-width);
+  height: 2px;
+  background-color: $inverse-link;
+}
+
+.#{$block-class}
+  .#{$block-class}__grid-container-grid-active.#{$block-class}__grid-container-grid-active--without-toolbar::before,
+.#{$block-class}
+  .#{$block-class}__grid-container-grid-active.#{$block-class}__grid-container-grid-active--without-toolbar::after {
+  height: calc(100% - 2px - var(--#{$block-class}--grid-header-height));
+}
+
+.#{$block-class}
+  .#{$block-class}__grid-container-grid-active
+  .#{$block-class}__table-container {
+  outline: 2px solid $inverse-link;
+  outline-offset: -2px;
+}
+
+.#{$block-class}
+  .#{$block-class}__grid-container-inline-edit
+  .#{$block-class}__table-container {
+  padding-top: $spacing-01;
+}
+
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  [data-invalid]
+  ~ .#{$carbon-prefix}--form-requirement,
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  [data-invalid]
+  .#{$carbon-prefix}--form-requirement {
+  position: absolute;
+  z-index: 3;
+  top: calc(100% - #{$spacing-01});
+  width: 100%;
+  padding: $spacing-03 $spacing-06 $spacing-03 $spacing-03;
+  margin: 0;
+  background-color: $ui-01;
+  outline: $spacing-01 solid $danger-02;
+  outline-offset: calc(-1 * #{$spacing-01});
+}
+
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--list-box[data-invalid]:focus-within
+  ~ .#{$carbon-prefix}--form-requirement {
+  outline: $spacing-01 solid $focus;
+}
+
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--list-box__invalid-icon,
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--text-input__invalid-icon,
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--number__invalid {
+  z-index: 4;
+  top: calc(100% + #{$spacing-04} + #{$spacing-01});
+  right: $spacing-03;
+}
+
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--number__invalid {
+  top: calc(100% + #{$spacing-02} + #{$spacing-01});
+}
+
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--form-requirement::before {
+  position: absolute;
+  top: 0;
+  left: $spacing-01;
+  width: calc(100% - (#{$spacing-01} * 2));
+  height: $spacing-01;
+  background-color: $ui-01;
+  content: '';
+}
+
+.#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--form-requirement::after {
+  position: absolute;
+  top: $spacing-01;
+  left: $spacing-03;
+  width: calc(100% - (#{$spacing-03} * 2));
+  height: 1px;
+  background-color: $ui-03;
+  content: '';
+}
+
+.#{$block-class} tbody tr:hover {
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+    .#{$carbon-prefix}--form-requirement::before {
+    background-color: $ui-03;
+  }
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+    .#{$carbon-prefix}--form-requirement::after {
+    background-color: transparent;
+  }
+}
+
+// Keep input focus states using $support-01 when inline edit cell is invalid
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--text-input:focus,
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--number
+  input[type='number']:focus,
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--number
+  input[type='number']:focus
+  ~ .#{$carbon-prefix}--number__controls
+  .#{$carbon-prefix}--number__control-btn:hover,
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--number__control-btn:focus {
+  outline-color: $support-01;
+}
+
+.#{$block-class}
+  .#{$block-class}__inline-edit--outer-cell-button--invalid
+  .#{$carbon-prefix}--number
+  input[type='number'][data-invalid]:focus
+  ~ .#{$carbon-prefix}--number__controls
+  .#{$carbon-prefix}--number__control-btn.up-icon::after {
+  background-color: $support-01;
+}

package/scss/components/InlineEdit/_inline-edit.scss

@@ -105,9 +105,11 @@
       overflow: hidden;
       // positions text and placeholder including when showing placeholder
       // NOTE: Using flex does strange things to a caret in content editable
-      width: calc(100% - var(--#{$block-class}--toolbar-width) - $spacing-05);
+      width: calc(
+        100% - var(--#{$block-class}--toolbar-width) - #{$spacing-05}
+      );
       max-width: calc(
-        100% - var(--#{$block-class}--toolbar-width) - $spacing-05
+        100% - var(--#{$block-class}--toolbar-width) - #{$spacing-05}
       );
       min-height: var(--#{$block-class}--size);
       /* stylelint-disable-next-line carbon/layout-token-use */